/* gallhub — 디자인 시스템 정본 (1~3 설계, 2026-09-25)
 *
 * 이름은 Tailwind 4 @theme 이름공간(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*
 * + --font-weight-* --leading-* --tracking-* --breakpoint-*). 브라우저가 직접 읽어야 하므로 :root 에 둔다 —
 * 승급(Next.js)할 때는 이 블록을 globals.css 의 @theme { } 로 그대로 옮긴다.
 * style.css 는 여기 있는 변수만 쓴다(raw 색 0). 대비 실측은 DESIGN.md 대비표(`node build.mjs --contrast gallhub`).
 *
 * 한 장의 원칙: 선은 표에만 있다 · 무게가 곧 추천이다 · 색지는 한 장, 하늘 인주는 '지금'에만.
 */
:root {
  /* ── 색: 회청 색지 한 장 + 흰 잉크 한 벌 + 하늘 인주 ─────────────────────────── */
  /* 지면(색지). 분산표 #5b6b8a 를 L 0.527 → 0.465 로 한 계단 내렸다 — #5b6b8a 위에서는 흰색도 5.36:1 이라
     메타 글자(보조 잉크)가 4.5 를 못 넘는다. oklch(0.465 0.064 263) */
  --color-bg: #46597e;
  /* 먹띠 — 표 머리 행 · 꼬리 · 가상 고지 띠. 면으로 구획한다(선 대신). oklch(0.36 0.06 263) */
  --color-band: #2c3d5d;
  /* 우물 — 입력 '모양'(검색 · 로그인 · 글쓰기 · 댓글 칸). 테두리 없이 한 계단 파인 면. oklch(0.40 0.06 263) */
  --color-surface-well: #364768;
  /* 행 표시 — 행 hover · 지금 보는 글 · :target 조항 · 찾은 말. oklch(0.42 0.06 263) */
  --color-surface-row: #3c4d6e;

  /* 흰 잉크 — 제목 · 본문 · 표 머리 복괘 · 반전 버튼 면. 따뜻한 종이색(색지와 보색 쪽) */
  --color-ink: #f4efe4;
  /* 보조 잉크 — 메타(글쓴이 · 날짜 · 조회 · 추천 · 캡션). 바탕 위 4.75:1 — 이보다 흐리게 하지 않는다 */
  --color-ink-soft: #cdd5e1;
  /* 하늘 인주 — '지금' 만: 새 글 N · 지금 보는 글 ▶ · 포커스 링 · #fail 의 고칠 칸. 면으로 쓰지 않는다.
     oklch(0.858 0.092 227) — 분산표 200–229° 안, arc-card #80f4ff 와 ΔE 0.062 */
  --color-accent: #8cddff;
  /* 표 괘선 — 행 사이 1px. 글자가 아니라 장식선이라 1.8~2.1:1 로 물러선다 */
  --color-rule: #7c8dab;

  /* ── 서체: 함렛(관보의 활자) + 프리텐다드(서식의 숫자) ───────────────────────── */
  --font-display: "Hahmlet", "Noto Serif KR", serif;
  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;

  /* 추천 5계단 = 제목 굵기 (이 템플릿만의 한 가지). 경계: 0–4 · 5–14 · 15–39 · 40–99 · 100+
     Hahmlet 은 360↔760 사이 폭 차가 0.5% 라 굵기가 바뀌어도 열이 흔들리지 않는다(실측) */
  --font-weight-rec-1: 360;
  --font-weight-rec-2: 460;
  --font-weight-rec-3: 560;
  --font-weight-rec-4: 660;
  --font-weight-rec-5: 760;
  --font-weight-meta: 450;
  --font-weight-head: 600;
  --font-weight-title: 700;
  --font-weight-mast: 800;

  /* ── 글자 크기 (px 은 16 기준) ───────────────────────────────────────────── */
  --text-2xs: 0.75rem;        /* 12 — 모바일 메타 줄 · 캡션 작은 */
  --text-2xs--line-height: 1.45;
  --text-xs: 0.8125rem;       /* 13 — 표 메타 열(번호 · 글쓴이 · 날짜 · 조회 · 추천) */
  --text-xs--line-height: 1.4;
  --text-sm: 0.875rem;        /* 14 — 방주 · 사진 설명 · 공지 목록 */
  --text-sm--line-height: 1.55;
  --text-row: 0.9375rem;      /* 15 — 표 제목 칸 (Hahmlet) */
  --text-row--line-height: 1.4;
  --text-base: 1rem;          /* 16 — UI 본문 */
  --text-base--line-height: 1.6;
  --text-body: 1.0625rem;     /* 17 — 글 본문 */
  --text-body--line-height: 1.8;
  --text-lead: 1.1875rem;     /* 19 — 표 캡션 · 방주 제목 */
  --text-lead--line-height: 1.35;
  --text-h3: 1.375rem;        /* 22 — 구간 제목 (Hahmlet 600) */
  --text-h3--line-height: 1.3;
  --text-h2: clamp(1.5rem, 1.12rem + 1.2vw, 2.125rem);   /* 24→34 — 글 제목 · 쪽 제목 */
  --text-h2--line-height: 1.28;
  --text-h1: clamp(1.875rem, 1.3rem + 1.9vw, 3rem);      /* 30→48 — 갤러리 이름 · 제호 */
  --text-h1--line-height: 1.12;
  --text-tally: 2.5rem;       /* 40 — 글 보기의 추천 · 비추 수 */
  --text-tally--line-height: 1;

  --leading-tight: 1.12;
  --leading-row: 1.4;
  --leading-body: 1.8;
  --tracking-display: -0.012em;
  --tracking-meta: 0;
  --tracking-caps: 0.04em;    /* 영문 약어(No. · N) 에만 */

  /* ── 간격 — 4px 계단. fluid 는 여백(margin · gap)에만 쓴다(lessons #50) ─────── */
  --spacing: 0.25rem;                              /* 4 — 기본 단위 */
  --spacing-cell-x: 0.625rem;                      /* 10 — 표 칸 좌우 */
  --spacing-cell-y: 0.5rem;                        /* 8 — 표 칸 위아래 → 행 높이 ≈ 37 */
  --spacing-cell-y-tight: 0.375rem;                /* 6 — 허브 · 재노출 목록(작은 표) */
  --spacing-stack: 0.75rem;                        /* 12 — 제목과 그 아래 한 줄 */
  --spacing-gutter: 2.5rem;                        /* 40 — 단 사이(괘선 없이 이 폭이 단을 가른다) */
  --spacing-block: 3rem;                           /* 48 — 구간 사이 */
  --spacing-section: 4.5rem;                       /* 72 — 쪽 안의 큰 구간 · 꼬리 앞 */
  --spacing-margin: clamp(1rem, 3.2vw, 3rem);      /* 16→48 — 지면 좌우 여백 */
  --spacing-rail: 18rem;                           /* 288 — 방주(오른쪽 단) */
  --spacing-hub-side: 17.5rem;                     /* 280 — 허브 좌단 · 우단 */
  --spacing-measure: 42rem;                        /* 672 — 글 본문 폭(17px 에서 한 줄 ≈ 44자) */
  --spacing-frame: 81rem;                          /* 1296 — 지면 최대 폭 */
  --spacing-target: 2.75rem;                       /* 44 — 터치 타깃 최소 */

  /* ── 모서리 · 그림자 — 둘 다 0. 관보에는 둥근 모서리도 그림자도 없다 ──────────── */
  --radius-none: 0;
  --shadow-none: none;

  /* ── 움직임 — 기본 ease-in-out · linear 금지(렌즈), 길이는 DESIGN.md 모션 표 ───── */
  --ease-paper: cubic-bezier(0.32, 0.72, 0, 1);    /* 종이가 놓이듯 — 새 글 도착 · 펼침 */
  --ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);    /* 즉답 — hover · 누름 · 탭 전환 */

  /* ── 너비 경계 (미디어 쿼리는 변수를 못 읽는다 — 값을 그대로 옮겨 쓴다) ────────── */
  --breakpoint-sm: 45rem;    /* 720 — 이 아래는 표 행을 두 줄 묶음으로 다시 짠다 */
  --breakpoint-md: 60rem;    /* 960 — 허브 2단 · 목록은 말머리 · 조회 열을 되살린다 */
  --breakpoint-lg: 70rem;    /* 1120 — 방주 단이 붙는다(가장 좁은 본문 칸: 720) */
  --breakpoint-xl: 75rem;    /* 1200 — 허브 3단이 붙는다(가장 좁은 가운데 단: 483) */
}