/* 짤통 / jjaltong — 디자인 시스템 정본 (design-factory 3단계).
 * 이름은 Tailwind 4 @theme 이름공간 그대로 — 승급 때 globals.css 의 @theme { } 로 옮긴다.
 * 여기서는 브라우저가 바로 읽도록 :root 에 둔다. style.css 는 이 변수만 쓴다(raw 색 금지).
 * 원칙: 선 0 · 그림자 0 · 모서리 0 — 구획은 칸새(--spacing-gap)와 면 3단(surface · surface-2 · paper)뿐. */

:root {
  /* ── 색 — 쪽먹 바탕 · 면 3단 · 종이 · 마젠타 하나 ─────────────────────────── */
  --color-bg: #0b122d;              /* 쪽먹 — 칸새로 비치는 바탕. 분산표 #121826 에서 쪽빛 쪽으로(vantar ΔE 0.040 → 0.068) */
  --color-surface: #1b2448;         /* 먹2 — 기본 칸 면(드립 <100 · 댓글 · 블록 · 쉬는 탭) */
  --color-surface-2: #2a3459;       /* 먹3 — 한 단 위(답글 · 자리 블록 · 자리표시자 · 더 보기 · 비추 눌림) */
  --color-paper: #e4e9f2;           /* 종이 — 눌림·선택 면(지금 탭 · 워드마크 판 · 순위판 · 추천 100+ 드립 · 고지) */
  --color-ink: #f1f3f9;             /* 먹 판 위 글자 */
  --color-ink-mute: #a3aecb;        /* 먹 판 위 보조 글자(메타 · 시각 · 12px 고지 줄) */
  --color-ink-dark: #0b122d;        /* 종이·마젠타 위 글자 */
  --color-ink-dark-mute: #505a78;   /* 종이 위 보조 글자 */
  --color-hot: #ee4af2;             /* 마젠타(OKLCH h 326.9) — 추천에만: 도장 · 눌린 추천 · 베 표지 · ▲ 글리프 · 포커스 링 */

  /* ── 서체 — 두 가족 · 두 무게 ──────────────────────────────────────────── */
  --font-display: "Gasoek One", "Pretendard Variable", Pretendard, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --leading-head: 1.2;              /* Pretendard 800 머리글(22/30/40) 행간 — Gasoek 의 1.0–1.12 는 한글 문장엔 빽빽하다 */
  --tracking-head: -0.01em;         /* Pretendard 800 머리글 자간 */

  /* ── 글자 크기 7단 — 사이 값 없음. Gasoek One = 숫자·도장·워드마크·4자 이하 낱말(lg 이상) · Pretendard = 그 밖 전부(12–40) ── */
  --text-xs: 12px;
  --text-xs--line-height: 1.4;
  --text-sm: 14px;
  --text-sm--line-height: 1.45;
  --text-base: 16px;
  --text-base--line-height: 1.6;
  --text-lg: 22px;                  /* 도장 · 퍼센트(Gasoek) · 1칸 드립 · 태그 md · 규칙 제목(Pretendard 800) */
  --text-lg--line-height: 1.12;
  --text-xl: 30px;                  /* 워드마크 · 순위판 · 추천 수(Gasoek) · 띠 머리 · 2칸 드립 · 게시판 이름 · 모바일 쪽 제목(Pretendard 800) */
  --text-xl--line-height: 1.08;
  --text-2xl: 40px;                 /* 쪽 제목 · 글 제목 · 4칸 드립 · 태그 xl(Pretendard 800) · 쓴 짤 수(Gasoek) */
  --text-2xl--line-height: 1.06;
  --text-3xl: 64px;                 /* 가장 큰 글자 — 받은 추천 · 규칙 번호 · 1위 순위판. 이보다 큰 display 없음 */
  --text-3xl--line-height: 1;

  /* ── 간격 — 4px 한 걸음. 칸새는 어디서나 4px ─────────────────────────────── */
  --spacing: 4px;
  --spacing-gap: 4px;               /* 칸새 — 선 대신 구획. 모든 격자 · 블록 사이 */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;                /* 1칸 안쪽 여백 */
  --spacing-4: 16px;                /* 2칸 이상 안쪽 여백 · <720 블록 여백 */
  --spacing-5: 20px;                /* ≥720 블록 여백 */
  --spacing-6: 24px;                /* 답글 들여쓰기 */
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-edge-sm: 8px;           /* <720 가장자리 */
  --spacing-edge-md: 16px;          /* 720–1199 가장자리 */
  --spacing-edge-lg: 20px;          /* ≥1200 가장자리 */
  --spacing-bar: 36px;              /* 짤 칸 아래 띠(1칸) */
  --spacing-bar-lg: 40px;           /* 짤 칸 아래 띠(2칸 이상) */
  --spacing-head: 56px;             /* 머리 높이 ≥720 */
  --spacing-head-sm: 52px;          /* 머리 높이 <720 */
  --spacing-touch: 44px;            /* 누를 것의 최소 한 변 */
  --spacing-ring: 3px;              /* 포커스 링 두께(선이 아니라 상태 표시 — 1px 아님) */
  --spacing-ring-offset: 1px;     /* 링 1 + 3 = 칸새 4 — 링이 이웃 칸이 아니라 바탕(쪽먹) 위에 선다: 대비 6.06 */
  --spacing-container: 1680px;      /* 6열 격자 최대 폭 */

  /* ── 모서리 · 그림자 — 둘 다 0 ─────────────────────────────────────────── */
  --radius-none: 0;
  --shadow-none: none;

  /* ── 움직임 — 누를 때만. 길이는 DESIGN.md 모션 표(0 · 90 · 120 · 160 · 600ms) ─────── */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);   /* ease-out — 누름 · 도장 · 숫자 */
  --ease-step: steps(3, end);                 /* 더 보기 ■□□ → ■■□ → ■■■ */
}