@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  html:focus-within { scroll-behavior: smooth; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: clip; }
  body { min-height: 100svh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
  p { text-wrap: pretty; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  :where(dialog) { padding: 0; border: 0; }
}

@layer base {
  html { background: var(--bg); }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-feature-settings: "ss06" on, "lnum" 1;
    font-variant-numeric: lining-nums; /* Cormorant 기본 숫자는 올드스타일이라 한글 옆에서 처져 보여요 */
    word-break: keep-all;
    letter-spacing: -.005em;
  }
  ::selection { background: var(--brown-800); color: var(--ivory-100); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  .on-dark :focus-visible, .section--dark :focus-visible { outline-color: var(--oak-300); }

  .skip-link {
    position: fixed; left: var(--s-4); top: var(--s-4); z-index: var(--z-toast);
    padding: var(--s-3) var(--s-5); background: var(--brown-800); color: var(--ivory-100);
    border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out);
  }
  .skip-link:focus { transform: none; }

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

  hr { border: 0; height: 1px; background: var(--line); }

  /* Typography ------------------------------------------------------------ */
  .t-display-xl, .t-display-lg, .t-display-md, .t-display-sm {
    font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--ink-strong);
    text-wrap: balance;
  }
  .t-display-xl { font-size: var(--fs-display-xl); line-height: 1.08; }
  .t-display-lg { font-size: var(--fs-display-lg); line-height: 1.12; }
  .t-display-md { font-size: var(--fs-display-md); }
  .t-display-sm { font-size: var(--fs-display-sm); line-height: 1.28; letter-spacing: var(--tracking-tight); }
  .t-title-lg { font-size: var(--fs-title-lg); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
  .t-title { font-size: var(--fs-title); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.015em; }
  .t-body-lg { font-size: var(--fs-body-lg); line-height: 1.78; }
  .t-body { font-size: var(--fs-body); }
  .t-small { font-size: var(--fs-small); }
  .t-caption { font-size: var(--fs-caption); line-height: 1.55; }
  .t-sub { color: var(--text-sub); }
  .t-accent { color: var(--accent-text); }

  /* 한글 명조 제목: 브랜드 로고의 세리프 결을 이어받아요 */
  .t-serif-ko { font-family: var(--font-serif-ko); font-weight: 400; letter-spacing: -.045em; }
  .t-serif-ko b, .t-serif-ko strong { font-weight: 600; }

  /* 영문 세리프: 로고(Cormorant 계열)와 같은 결 */
  .t-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
  .t-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
  .t-num { font-family: var(--font-serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: -.02em; }
  .t-mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
  .t-tabular { font-variant-numeric: tabular-nums; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: .9em;
    font-family: var(--font-serif); font-size: .9rem; font-weight: 500;
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text);
    line-height: 1;
  }
  .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
  .eyebrow--plain::before { display: none; }
  @media (max-width: 520px) { .eyebrow { letter-spacing: .2em; font-size: .8rem; gap: .7em; } .eyebrow::before { width: 18px; } }
  .section--dark .eyebrow, .on-dark .eyebrow { color: var(--oak-300); }

  .prose { max-width: 68ch; color: var(--text); }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { font-size: var(--fs-title-lg); font-weight: 600; margin-top: 2.2em; letter-spacing: var(--tracking-tight); }
  .prose h3 { font-size: var(--fs-title); font-weight: 600; margin-top: 1.8em; }
  .prose ul, .prose ol { padding-left: 1.2em; }
  .prose li + li { margin-top: .4em; }
  .prose table { width: 100%; font-size: var(--fs-small); }
  .prose th, .prose td { border-bottom: 1px solid var(--line); padding: .7em .6em; text-align: left; vertical-align: top; }
  .prose th { font-weight: 600; background: var(--bg-alt); }
  .prose a { text-decoration: underline; text-underline-offset: 3px; }
}