/* ==========================================================================
   Base : reset + 타이포그래피 + 레이아웃 유틸리티
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-thumb { background-color: var(--color-ink-500); border-radius: 10px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: var(--tracking-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Typography ---------- */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.t-display b, .t-display strong { font-weight: var(--weight-bold); }
.t-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: 1.3; }
.t-h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.53; }
.t-h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.t-lead { font-size: var(--text-lead); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-body); }
.t-caption { font-size: var(--text-3xs); font-weight: var(--weight-light); color: var(--color-text-muted); }
.t-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}
.t-en { font-family: var(--font-display); }
.t-muted { color: var(--color-text-muted); }
.t-light { font-weight: var(--weight-light); }

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