/* 리셋 · 타이포 · 폭 · 장(章) 머리말.
 * (상단 내비·푸터·고정 버튼은 chrome.css, 재사용 조각은 components.css)
 *
 * ★타이포 척도는 애플 제품 페이지의 것을 따른다 — 본문 17px, 장 제목 최대 64px,
 *   첫 화면 제목 최대 92px. 글자가 크다는 것은 «한 화면에 한 가지만 말한다» 는 뜻이고,
 *   그래서 문장은 짧아야 한다(문구는 content/ 에서 줄인다, 템플릿이 자르지 않는다).
 */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* ★한국어는 낱말 단위로만 줄을 바꾼다(애플 KR 페이지와 같다). 글자가 커질수록
     «않/습니다» 처럼 낱말 한가운데서 끊긴 줄이 눈에 크게 걸린다. 너무 긴 낱말은
     overflow-wrap 이 받아 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; color: var(--text-strong);
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ★숫자는 어디서든 고정폭. 자릿수가 바뀔 때 흔들리면 안 된다. */
.num, .seg__value, .seg__ghost {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ── 폭 ──
 * wrap 1200 = 글과 격자, wrap--wide 1400 = 큰 화면 사진, wrap--narrow 820 = 머리말·FAQ. */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 40px, var(--wrap-wide)); }
.wrap--narrow { width: min(100% - 40px, var(--wrap-narrow)); }
.wrap--text { width: min(100% - 40px, var(--wrap-text)); }

/* ── 장(章) ──
 * ★장 사이에 구분선을 긋지 않는다. 바탕색이 바뀌는 것이 곧 장의 경계다.
 *   어두운 장이 이어질 때만 `section--deep` 으로 한 톤 내려 경계를 만든다.
 *   밝은 장은 `theme-light` 를 함께 단다(tokens.css). */
.section {
  padding-block: var(--section-y); position: relative;
  background: var(--bg-base); color: var(--text);
}
.section--deep { background: var(--bg-deep); }
.section--tight { padding-block: clamp(64px, 8vw, 112px); }

/* 장 머리말 — 작은 장 이름(eyebrow) → 큰 제목 → 한 줄 설명.
 * ★기본은 가운데 정렬이다. 왼쪽 정렬(`shead--left`)은 표·폼처럼 아래 내용이
 *   왼쪽에서 시작할 때만 쓴다. 제목과 내용의 축이 어긋나면 눈이 두 번 움직인다. */
.shead { max-width: var(--wrap-narrow); margin: 0 auto var(--s-9); text-align: center; }
.shead--left { margin-inline: 0; text-align: left; }
.shead h2 {
  font-size: clamp(36px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -0.04em;
  text-wrap: balance;
}
.shead__lead {
  margin-top: var(--s-5); color: var(--text-muted);
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; text-wrap: pretty;
}
.shead__lead strong { color: var(--text); font-weight: 600; }
.shead__link { display: inline-block; margin-top: var(--s-4); font-size: 17px; }

.eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--accent); margin-bottom: var(--s-4);
}
.accent { color: var(--accent); }
/* 애플식 «두 문장 제목» 에서 뒷문장을 한 톤 내릴 때. */
.dim { color: var(--text-muted); }

/* ── 문장형 링크 («더 알아보기 ›») ── */
.tlink { color: var(--accent); font-weight: 500; white-space: nowrap; }
.tlink::after {
  content: "\203A"; display: inline-block; margin-left: 5px; font-weight: 600;
  transition: transform .2s var(--ease);
}
.tlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.tlink:hover::after { transform: translateX(2px); }

/* ── 긴 설명 단락 ── */
.prose { font-size: 17px; color: var(--text-muted); max-width: 42em; }
.prose strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .shead { margin-bottom: var(--s-7); }
}