/* ═══════════════════════════════════════════════════════════════════════════
   type-tokens.css — 타이포그래피 정본 (2026-08-22)
   규칙 전문: docs/TYPOGRAPHY.md

   ⛔ `--font-sans` · `--fs-*` · `--lh*` 의 **유일한** 정의처다.
      다른 파일에서 다시 정의하지 말 것 — 값이 갈린다.
      (전에는 site-shell.css · app-shell.css · index.html 세 곳에 같은 계단이
       복제돼 있었다. 값이 우연히 같았을 뿐 정본이 없었다.)

   왜 이 파일이 site-shell.css 와 따로인가
     site-shell.css 는 상단 바까지 그린다. `.nav` · `.site-path` · `.brand-word` ·
     `.brand-divider` 가 app.html 에도 있어서, app.html 에 통째로 실으면 상단 바가
     덮인다 (`site-shell.css` 의 `.brand-divider{display:none !important}` 가
     app.html:513 의 구분선을 지운다 — 실측으로 잡았다).
     토큰만 떼어 두면 app.html 도 같은 계단을 쓸 수 있다.

   ⛔ 웹폰트 로드(`<link>`)는 여기 없다 — 각 HTML 의 head 가 담당한다.
      `@import` 로 부르면 요청 체인이 한 홉 늘어 글꼴 깜빡임이 길어진다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* 서체 — 한 벌만 쓴다. face 를 직접 나열하지 말고 이 토큰을 참조한다.
     ⛔ 본문에 명조(세리프) 금지 — REGRESSION_LOCKS.md S2-PCSIDE-T */
  --font-sans:'Pretendard',-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* 크기 계단 — 짝수 정수 6단 + 제목 별도 단 (A안 · 2026-08-22 운영자 확정).
     전에는 값이 19종이었고 13종이 9.5~15.5px 6px 구간에 몰려 있었다(12 / 12.5 / 13 / 13.5 …).
     눈으로 구분이 안 되는데 새 컴포넌트마다 「여긴 12.5인가 13인가」를 다시 골라야 했고,
     0.5px 은 DPI 마다 반올림이 갈려 저해상도 안드로이드에서 같은 줄이 들쭉날쭉했다.
     ⛔ 0.5px 을 다시 만들지 말 것. 필요한 크기가 없으면 가까운 칸으로 붙인다. */
  --fs-xs:10px;     /* ⛔ 라틴·숫자 전용 — 한글 금지(획이 조밀해 받침이 뭉갠다) */
  --fs-sm:12px;     /* 보조 메타·주석·배지 — 한글 자리의 하한 */
  --fs-md:14px;     /* 라벨·칩·버튼·캡션 */
  --fs-base:16px;   /* 본문·리드·입력창 — ⛔ 입력창은 이 아래로 내리지 말 것(iOS 가 확대한다) */
  --fs-lg:18px;     /* 카드 제목·소제목 */
  --fs-xl:20px;     /* 큰 라벨 */

  /* 제목 단 — 본문 스케일(10~20) **밖**이다. 제목까지 20px 안에 넣으면
     히어로와 본문 차이가 4px 이 되어 랜딩 첫인상이 무너진다. */
  --fs-h1:36px;
  --fs-h2:24px;

  /* 행간 */
  --lh:1.6;
  --lh-tight:1.45;
  --lh-loose:1.9;
}

/* 좁은 화면에서는 제목만 한 단 낮춘다 — 본문 스케일은 그대로. */
@media(max-width:720px){
  :root{ --fs-h1:24px; --fs-h2:20px; }
}