/* 리셋과 문서 리듬. 컴포넌트는 components.css 로 간다.
   색은 반드시 토큰으로만 참조한다 — raw hex 는 테스트가 막는다. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--color-surface-base);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
  color: var(--color-text-accent);
  text-decoration: none;
  transition: color var(--motion-instant) var(--motion-ease);
}
a:hover { color: var(--color-accent); text-decoration: underline; }

/* 포커스 표시는 어디서도 숨기지 않는다. 접근성 필수 규칙이다.
   포커스 링은 accent 로 그리며 모든 표면에서 3:1 을 넘는다. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ── 타이포 계층 ─────────────────────────────
   어두운 배경에서 밝은 글자는 광학적으로 두꺼워 보이므로,
   밝은 배경 기준의 네거티브 트래킹을 그대로 쓰면 뭉친다.
   각 단계에서 트래킹을 완화했다. */
.t-display-2 { font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -1.2px; }
.t-h1        { font-size: 38px; font-weight: 700; line-height: 1.12; letter-spacing: -0.7px; }
.t-h2        { font-size: 26px; font-weight: 700; line-height: 1.24; letter-spacing: -0.4px; }
.t-h3        { font-size: 21px; font-weight: 650; line-height: 1.3;  letter-spacing: -0.2px; }
.t-title     { font-size: 18px; font-weight: 600; line-height: 1.4;  letter-spacing: -0.1px; }
.t-body      { font-size: 16px; font-weight: 400; line-height: 1.55; }
.t-body-sm   { font-size: 15px; font-weight: 400; line-height: 1.5;  color: var(--color-text-secondary); }
.t-caption   { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--color-text-muted); }
.t-eyebrow   {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-text-accent);
}

/* 유틸: 색을 인라인 style 로 쓰지 않기 위한 최소한의 클래스 */
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

/* ── 레이아웃 프리미티브 ─────────────────────*/
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }

.row { display: flex; align-items: center; gap: var(--space-sm); }

.grid-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.section { padding: var(--space-xxl) 0; }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }
.mt-xs { margin-top: var(--space-xs); }

/* 읽기 좋은 줄 길이. 본문 문단이 화면 끝까지 늘어지지 않게 한다 */
.measure { max-width: 34rem; }

/* 스크린리더 전용 — 시각적으로 숨기되 읽히게 한다 */
.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;
}

@media (max-width: 600px) {
  .container { padding: 0 var(--space-md); }
  .t-display-2 { font-size: 34px; letter-spacing: -0.6px; }
  .t-h1 { font-size: 27px; letter-spacing: -0.3px; }
  .grid-cards { grid-template-columns: 1fr; }
  .section { padding: var(--space-xl) 0; }
}