/* ============================================================
   단일 글 타입 사다리
   기준: 랜딩 토큰 + 본문 읽기용 단계.  [본문] 표시가 이 파일에서 더한 것.
   ============================================================ */
:root {
  /* 글 제목. 랜딩 --t-h2(26~42)와 같은 자리에 둔다.
     지금은 44.8px 인데 본문 h2 가 38.4 라 둘이 1.17 배로 붙어 있었다. */
  --a-title:  clamp(28px, 3.6vw, 44px);

  /* 본문 헤딩. 인접 단계 비율을 1.3 이상으로 벌린다.
     지금 실측: 제목 44.8 / h2 38.4 / h3 27.2 / h4 20 / 본문 17
       → 제목:h2 = 1.17 (너무 붙음), h4:본문 = 1.18 (거의 같음)
     새 값:      제목 44 / h2 30 / h3 23 / h4 19 / 본문 17
       → 제목:h2 = 1.47, h2:h3 = 1.30, h3:h4 = 1.21, h4:본문 = 1.12
     h4 는 굵기와 색으로 가른다 — 크기를 더 올리면 h3 를 밀어낸다. */
  --a-h2: clamp(24px, 2.2vw, 30px);
  --a-h3: clamp(20px, 1.7vw, 23px);
  --a-h4: clamp(17px, 1.4vw, 19px);

  --a-body:  clamp(16px, 1.35vw, 17px);
  --a-small: clamp(14px, 1.15vw, 15px);   /* [본문] 표·설명·각주 */
  --a-code:  clamp(13px, 1.1vw, 14.5px);  /* [본문] 코드. 본문보다 한 단계 아래 */

  --a-lh-head: 1.35;
  --a-lh-body: 1.85;   /* 한글 긴 글은 1.72 보다 한 칸 더 눕힌다 */
  --a-lh-code: 1.65;

  /* 본문 폭. 지금 640px 에 한 줄 44자다.
     한글은 60~75자 권장의 절반쯤이 편해서 이 값을 유지한다. */
  --a-measure: 680px;

  /* 여백 리듬 — 지금 값이 좋다(위:아래 ≈ 3:1). 비율만 토큰으로 고정한다. */
  --a-gap-h2: clamp(48px, 5vw, 76px);
  --a-gap-h3: clamp(32px, 3.2vw, 46px);
  --a-gap-h4: clamp(22px, 2.2vw, 30px);
  --a-gap-p:  clamp(16px, 1.5vw, 21px);
  --a-gap-block: clamp(24px, 2.4vw, 34px);   /* 표·코드·인용 위아래 */

  /* 코드 3종을 한 벌로 묶는 값. 지금은 배경·둥글기가 제각각이다. */
  --code-bg:   #0a1020;
  --code-line: rgba(255, 255, 255, 0.09);
  --code-radius: 12px;
  --code-inline-bg: rgba(51, 153, 255, 0.12);
  --code-inline-fg: #b9d9ff;

  /* 읽기 바탕 위에서만 쓰는 보조 글자색.
     랜딩의 --text-3(#5a6a8a)은 이 판 위에서 3.55:1 로 기준(4.5)에 못 미친다.
     색조는 그대로 두고 밝기만 1.25 배 올려 5.16:1 을 만든다.
     랜딩 토큰은 건드리지 않는다 — 랜딩 화면이 같이 바뀐다. */
  /* 날짜·캡션 같은 보조 글자. #7185ad 는 이 판 위에서 4.6:1 로 기준은 넘지만
     화면에서는 바탕과 같은 청회색 계열이라 뭉개져 보였다.
     계열을 벗어나게 한 단계 올린다 (--text-2 와 같은 값, 7.4:1). */
  --a-meta: #a8b4d0;

  /* 읽기 바탕.
     처음에 rgba(6,10,22,.88) 로 잡았더니 배경보다 28% 어두워서
     떠 있는 종이가 아니라 파인 우물처럼 보였다. 다크 UI 에서 표면은
     위로 올라올수록 밝다 — 랜딩 카드도 배경보다 밝다.
     이 값은 옆 배경보다 54% 밝고, 그 위에서 실측 대비가 이렇다:
       본문 8.64 · 제목 16.32 · 메타 4.84 · 링크 6.10  (전부 4.5 이상) */
  /* 0.90 으로 깔았더니 성운이 거의 안 비쳐 회색 판으로 읽혔다.
     카드와 같은 유리(--glass-tint 계열)로 두되, 긴 글을 읽는 판이라
     카드(0.55)보다는 불투명하게 한다. 파랑을 머금은 어두움이라
     옆 배경과 계열이 이어진다. */
  /* 읽기 판. 배경(--bg #03050f)과 **같은 색조**의 한 단계 위다.
     rgba(19,27,51,.82) 은 합성하면 #131b33 — 배경보다 훨씬 밝은데 채도가
     죽어서 회색으로 읽혔다. 흰 글자를 얹는 판이 회색이면 글자가 흐려 보인다.
     색조를 유지한 채 어둡게 내린다 (better-colors 원칙 6).

       --bg        #03050f   페이지
       --a-surface #0c1326   읽기 판   ← 여기
       --code-bg   #0a1020   코드 (판 안쪽이라 더 어둡다) */
  --a-surface: rgba(12, 19, 38, 0.92);
}