/* 베이스라인 — 초기화, 한글 조판, 글자 역할, 배치
   tokens.css 다음에 불러온다. 여기 있는 값은 전부 토큰 참조다. 숫자를 직접 쓰지 않는다. */
@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, video, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  /* 컴포넌트의 display 가 hidden 속성을 덮지 않게 한다 */
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    letter-spacing: var(--type-body-tracking);
    font-weight: var(--type-body-weight);
    /* 한글 조판: 어절 단위 줄바꿈(TY9). 긴 URL·영문은 넘치면 끊는다 */
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* 구간 다크는 배경과 글자를 같이 바꾼다 */
  [data-tone] { background: var(--bg-canvas); color: var(--text-primary); }

  h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; line-height: inherit; text-wrap: balance; }
  p, li, dd, figcaption { text-wrap: pretty; }

  /* 한글은 기울이지 않는다(TY2). em 은 굵기로 강조한다 */
  em, i, cite { font-style: normal; }
  em { font-weight: 700; }
  strong, b { font-weight: 700; }

  /* 수치는 자리 맞춤(TY12) */
  table, .num, data, time { font-variant-numeric: tabular-nums; }

  a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  @media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }

  /* 포커스 링은 즉시 나타난다(MO5). transition 대상에서 뺀다 */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs); }

  ::selection { background: var(--accent-soft); color: var(--text-primary); }

  hr { border: 0; border-top: 1px solid var(--line-subtle); }
}

/* 글자 역할. 크기를 직접 쓰지 말고 이 클래스를 쓴다 */
@layer base {
  .t-display, .t-title-1, .t-title-2, .t-title-3, .t-body-lg, .t-body, .t-body-sm,
  .t-label, .t-label-sm, .t-caption, .t-price {
    font-family: var(--f); font-size: var(--s); line-height: var(--l);
    letter-spacing: var(--tr); font-weight: var(--w);
  }
  .t-display  { --f: var(--type-display-family);  --s: var(--type-display-size);  --l: var(--type-display-leading);  --tr: var(--type-display-tracking);  --w: var(--type-display-weight); }
  .t-title-1  { --f: var(--type-title-1-family);  --s: var(--type-title-1-size);  --l: var(--type-title-1-leading);  --tr: var(--type-title-1-tracking);  --w: var(--type-title-1-weight); }
  .t-title-2  { --f: var(--type-title-2-family);  --s: var(--type-title-2-size);  --l: var(--type-title-2-leading);  --tr: var(--type-title-2-tracking);  --w: var(--type-title-2-weight); }
  .t-title-3  { --f: var(--type-title-3-family);  --s: var(--type-title-3-size);  --l: var(--type-title-3-leading);  --tr: var(--type-title-3-tracking);  --w: var(--type-title-3-weight); }
  .t-body-lg  { --f: var(--type-body-lg-family);  --s: var(--type-body-lg-size);  --l: var(--type-body-lg-leading);  --tr: var(--type-body-lg-tracking);  --w: var(--type-body-lg-weight); }
  .t-body     { --f: var(--type-body-family);     --s: var(--type-body-size);     --l: var(--type-body-leading);     --tr: var(--type-body-tracking);     --w: var(--type-body-weight); }
  .t-body-sm  { --f: var(--type-body-sm-family);  --s: var(--type-body-sm-size);  --l: var(--type-body-sm-leading);  --tr: var(--type-body-sm-tracking);  --w: var(--type-body-sm-weight); }
  .t-label    { --f: var(--type-label-family);    --s: var(--type-label-size);    --l: var(--type-label-leading);    --tr: var(--type-label-tracking);    --w: var(--type-label-weight); }
  .t-label-sm { --f: var(--type-label-sm-family); --s: var(--type-label-sm-size); --l: var(--type-label-sm-leading); --tr: var(--type-label-sm-tracking); --w: var(--type-label-sm-weight); }
  .t-caption  { --f: var(--type-caption-family);  --s: var(--type-caption-size);  --l: var(--type-caption-leading);  --tr: var(--type-caption-tracking);  --w: var(--type-caption-weight); }
  .t-price    { --f: var(--type-price-family);    --s: var(--type-price-size);    --l: var(--type-price-leading);    --tr: var(--type-price-tracking);    --w: var(--type-price-weight); font-variant-numeric: tabular-nums; }

  .muted   { color: var(--text-secondary); }
  .subtle  { color: var(--text-tertiary); }
  .accent  { color: var(--text-accent); }
  .measure { max-width: var(--measure); }
}

/* 배치 */
@layer layout {
  .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
  .column    { width: 100%; max-width: calc(var(--column) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

  /* 섹션 간격은 세 단계. 모든 섹션을 같은 값으로 두지 않는다(LY10) */
  .section       { padding-block: var(--section); }
  .section-tight { padding-block: var(--section-tight); }
  .section-loose { padding-block: var(--section-loose); }

  /* 세로 쌓기. 안쪽 간격을 --gap 으로 고른다. 그룹 안은 좁게, 그룹 사이는 넓게(LY9) */
  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-md)); }
  .stack[data-gap="xs"] { --gap: var(--space-xs); }
  .stack[data-gap="sm"] { --gap: var(--space-sm); }
  .stack[data-gap="lg"] { --gap: var(--space-lg); }
  .stack[data-gap="xl"] { --gap: var(--space-xl); }
  .stack[data-gap="3xl"] { --gap: var(--space-3xl); }

  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-xs)); }

  /* 비대칭 2단. 넓은 쪽을 고른다. 768px 아래에서는 한 줄로 쌓인다 */
  .split { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 768px) {
    .split { grid-template-columns: 7fr 5fr; gap: var(--space-4xl); }
    .split[data-weight="end"] { grid-template-columns: 5fr 7fr; }
    .split[data-align="start"] { align-items: start; }
  }

  .divider { border-top: 1px solid var(--line-subtle); }

  /* 섹션 바탕 바꾸기. 명암을 크게 끊을 때는 data-tone="dark" 를 쓴다 */
  .band-surface { background: var(--bg-surface); }
  .band-sunken  { background: var(--bg-sunken); }
  .band-lines   { border-block: 1px solid var(--line-subtle); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* 움직임을 줄이도록 설정한 사용자는 연출 없이 본다(MO9) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}