/* typography.css — 타이포 스케일과 섹션 문법 (UI-DESIGN-SYSTEM §1-2·§3).

   base.css 에서 떼어냈다. 그 파일은 **30KB 예산**이 걸려 있고(절대 지시 11 ·
   `test_file_size`·`test_nav_responsive` 등 다섯 테스트가 잠근다) 이 둘을 넣자 넘었다.
   modal.css 를 같은 이유로 뺀 선례를 따른다 — 예산은 «작게 유지하라» 는 설계 압력이지
   피해 갈 장애물이 아니다. 한 화면에 늘 필요한 규칙만 base 에 남긴다.

   ⚠️ base.css 보다 **뒤에** 실려야 한다(base.html) — 컴포넌트 규칙이 스케일을 덮는 경우가
      있고(예: `.hero h1`), 그 순서가 뒤집히면 카드 안 소제목이 본문을 누른다. */

/* ── 섹션 (UI §1-2 «여백이 계층이다» · templates/common/_components/section.html) ──
   세로 리듬 96~160px 는 규범이 오래 전부터 요구한 값인데 화면이 지키지 않고 있었다.
   구분선·박스가 아니라 **공간**으로 나눈다 — 그래서 여기엔 테두리가 한 줄도 없다.
   ⛔ 제목을 2톤으로 쪼개지 마라(§1-1 색은 CTA 하나뿐). 배지 pill·이탤릭 리드도 두지 않는다. */
.sec { margin: 120px 0 0; }
.sec:first-of-type { margin-top: 96px; }
.sec-tight { margin-top: 72px; }
.sec-h { font-size: 40px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 12px; color: var(--text); }
/* ⚠️ `.t-lead`(아래 스케일 절)와 **margin 하나만 빼고 같은 값**이다. 규범 §3 이 정한
   「리드 문단」이 곧 이것이고, 섹션 안에서는 여백을 `.sec-body` 가 주므로 margin 만 0 이다.
   ⛔ **묶으려다 되돌렸다**(2026-09-20): `.t-lead, .sec-lead { }` 로 그룹을 만들면
      `tests/test_section_grammar.py::_rule()` 의 정규식(`\.{cls}\s*\{`)이 **앞쪽
      셀렉터를 못 찾는다** — 개편 초반에 `:root[data-theme='dark']` 를 둘로 나눴다가
      `test_theme_contrast` 파서를 깨뜨린 것과 같은 함정이다. 한쪽을 지우면 24px 만큼
      시각이 바뀐다. 이득(≈100 B)보다 위험이 커서 **값을 맞춰 둘 다 남긴다.**
   ⇒ 한쪽을 고치면 **반드시 다른 쪽도 같이 고쳐라.** */
.sec-lead { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 62ch; }
.sec-body { margin-top: 32px; }
@media (max-width: 900px) {
  .sec { margin-top: 88px; }
  .sec:first-of-type { margin-top: 72px; }
  .sec-tight { margin-top: 56px; }
  .sec-h { font-size: 32px; }
  .sec-body { margin-top: 24px; }
}
@media (max-width: 640px) {
  .sec { margin-top: 64px; }
  .sec-lead { font-size: 16px; }
}

/* ── 타이포 스케일 (UI §3) ──────────────────────────────────────────────────
   규범은 오래 전부터 display 56 / title1 40 / title2 28 / title3 21 과 자간 -0.015em 을
   적어 두었는데, 화면은 템플릿마다 **인라인 스타일로 34·40·28·22** 를 제각기 박고 있었다.
   숫자가 흩어지면 «어느 것이 더 큰 제목인가» 를 아무도 답할 수 없다 — 중단점과 같은 병이다.
   ⚠️ 여기에 `!important` 를 쓰지 마라. 인라인 스타일이 남아 있는 곳은 그 인라인을 **지우는**
      것이 고치는 길이지, 무게로 이기는 것이 아니다. */
/* ⭐ display 는 **70px** 이다. 규범 §3 은 오래 56 을 적어 두었으나 실제 히어로는 70 이었고,
   1200px 넘는 화면에서 56 은 작다 — 이 자리는 「크고, 조이고, 무겁게」(§1-3)가 가장 크게
   작용하는 곳이다. 숫자를 화면에 맞추되 **정의처는 하나**로 모은다(2026-09-19). */
.t-display { font-size: 70px; font-weight: 800; letter-spacing: -0.037em; line-height: 1.03; margin: 0 0 20px; }
.t-title1  { font-size: 40px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;  margin: 0 0 8px; }
.t-title2  { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.14; margin: 0 0 8px; }
.t-title3  { font-size: 21px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2;  margin: 0 0 6px; }
.t-lead    { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 0 24px; max-width: 62ch; }
/* ⚠️ 위 `.sec-lead`(섹션 절)와 같은 값이다 — 사유는 그쪽 주석에. `.t-lead` 는 지금
   템플릿에서 쓰이지 않지만 **규범 §3 이 정한 스케일**이라 남긴다(섹션 밖의 리드 자리용).
   ⛔ 「죽은 CSS 네」 하고 지우지 마라 — 규범과 구현이 더 멀어진다. */
/* 스케일 **밖**의 제목 — 카드 안 소제목처럼 본문 크기로 두어야 하는 자리.
   ⭐ 억지로 title3(21px)로 키우지 않는다. 카드 안에서 소제목이 본문을 누르면 위계가 뒤집힌다.
      «제목이지만 크지 않다» 는 것도 하나의 단계다. */
.t-sm { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 6px; }
/* 숫자는 자릿수가 흔들리지 않게(가격·판 번호·통계) — 규범 §3. */
.t-num { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .t-display { font-size: 40px; letter-spacing: -0.028em; margin: 0 0 14px; }
  .t-title1  { font-size: 32px; }
  .t-title2  { font-size: 24px; }
  .t-title3  { font-size: 19px; }
}
@media (max-width: 640px) {
  .t-lead { font-size: 16px; }
}