/* ==========================================================================
   RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT (2026-10-06 재작업)

   컨셉 : 계기판 — 해석 캔버스와 제어 패널이 첫 화면의 주인이고, 표제는 작다.
          페이지는 밝은 쿨 바탕 한 체제다. 어두운 면은 캔버스 화면(.hero-stage) 하나뿐이다.
          이전 판의 "암실/사양서" 띠 교대(어두운 띠 4 + 밝은 띠 4)는 없앴다 —
          쇼케이스 19종 계측에서 띠 교대·Pretendard·IBM Plex Mono·큰 고지 푸터가
          saebyeok-cheonggwa 와 0.887 로 묶였기 때문이다(outputs/rework-2026-10-06/plan.md).

   ── 레퍼런스 실측 (2026-10-06, 1440×900 playwright)
   R1′ 구도 · windy.com — 지도 캔버스 1440×900 이 첫 화면 전부. h1 없음.
       제어는 가장자리 패널(왼쪽 위 검색·예보 390px 폭, 오른쪽 레이어 버튼 세로 열,
       아래 시간축 띠 + 범례 kt 0~60). radius 0 이 384 : 83 으로 지배.
       → 가져온 것: 제어를 캔버스 옆 세로 열에, 범례·캡션을 캔버스 아래 띠에 둔다
       → 안 가져온 것: 전폭 오버레이(캔버스 위 글자는 어두운 스크림이 필요해 띠가 되살아난다)
   R1′ 구도 · earth.nullschool.net — 캔버스 1440×900, h1 "earth" 18px 좌하단,
       배경 #000005, radius 0 455 : 312.
       → 가져온 것: 표제는 도구 옆에 작게(18~22px)
   R1 푸터 · luminary.ai / flexcompute.com / simscale.com (텍스트 페처) — 셋 다 5열 색인 푸터
       (Platform·Resources·Industries·Company·Developers 등). → 다열 색인 형태의 근거
   R2 톤 · 제품 실물 렌더(assets/sph-*.webp) — 어두운 바탕 위 시안→초록 입자.
       캔버스 화면만 어둡게 두는 이유다. 온도 램프는 실물 렌더의 색 언어를 따른다.

   ── 강조색 246° (유지)
   246° 는 tools/similarity.mjs 가 재는 LCh hue 다 — 이전 판의 계기 청색 #2a6b8a 가 바로 246° 다.
   plan.md 의 "246° 청(유지)" 대로 값을 그대로 쓴다(출발점은 제품 에디터 테마 #3b82f6 에서
   채도를 낮추고 청록 쪽으로 튼 것). 흰 글자 5.88:1, 바탕 #f3f6f8 위 글자로 5.42:1.
   ========================================================================== */

:root {
  /* ── 타이포그래피 — 5단계. 표제가 작으므로 디스플레이 단계가 없다 ── */
  --step--1: 0.8125rem; /* 13px — 라벨·캡션·표 머리 */
  --step-0: 1rem; /* 16px — 본문 (한글 하한) */
  --step-1: 1.1875rem; /* 19px — 리드·h3 */
  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22 → 28px — h1(작게)·h2 */
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* 28 → 40px — 큰 수치 하나 */
  /* 최대 ÷ 본문 = 40 ÷ 16 = 2.5배. 표제가 아니라 캔버스가 크기를 맡는다 */

  --leading-tight: 1.3; /* 한글 제목 1.2~1.35 */
  --leading-normal: 1.7;
  --leading-loose: 1.85;
  --measure: 36em;

  /* 표제·본문 모두 Spoqa Han Sans Neo(OFL, jsdelivr spoqa/spoqa-han-sans). 모노 없음 —
     한글이 섞이는 라벨을 모노에 두면 글자가 흩어진다. 숫자는 tabular-nums 로 정렬한다 */
  --font-body: "Spoqa Han Sans Neo", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --weight-strong: 700;

  /* ── 색 · 밝음·쿨 한 체제 ── */
  --surface: #f3f6f8;
  --surface-2: #e8edf1;
  --surface-3: #dde4e9;
  --panel: #ffffff;
  --line: #cfd8df;
  --line-strong: #a9b6c0;
  --ink: #121a21;
  --ink-muted: #4a5a67; /* 바탕 6.56:1 · 패널 7.12:1 */
  --ink-faint: #55656f; /* 바탕 5.56:1 · surface-2 5.12:1 — 13px 캡션도 AA */
  --accent: #2a6b8a; /* LCh 246° · 흰 글자 5.88:1 · 바탕 #f3f6f8 위 5.42:1 · 푸터 면 #e8edf1 위 4.99:1 */
  --accent-hover: #1f5069;
  --accent-ink: #ffffff;
  --accent-wash: #e3ecf1;

  /* ── 캔버스 화면 — 페이지에서 유일한 어두운 면. 띠가 아니라 부품이다 ── */
  --screen: #0e1114;
  --screen-2: #1b2126;
  --screen-line: #2c343a;
  --screen-ink: #e8ecef; /* 15.94:1 */
  --screen-ink-muted: #98a3ab; /* 7.36:1 */
  --screen-accent: #3e8fb0; /* 어두운 화면 위 장비 표식 선 · 5.20:1 */

  /* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩. UI 강조색이 아니다 ── */
  --temp-cold: #2f7d9e;
  --temp-mid: #39a894;
  --temp-warm: #8cc152;
  --temp-hot: #d7d64a;

  /* ── 형태 — radius 0 한 값 (plan.md 배정 · R1′ 둘 다 0 이 지배) ── */
  --radius: 0;

  /* ── 간격 ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(4rem, 2.5rem + 5vw, 7rem);

  --container: 1200px;
  --container-wide: 1440px;
  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --panel-width: 22rem;

  /* ── 모션 — 상태 전환만. 등장 모션 없음 ── */
  --dur-quick: 160ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}