/* ═════════════════════════════════════════════
   DESIGN TOKENS — 단일 소스 (single source of truth)
   모든 색·타이포·간격·모션 값은 여기서만 정의한다.
   컴포넌트 CSS(main.css)는 반드시 이 변수만 사용한다.
   규칙 문서: /DESIGN.md
   ═════════════════════════════════════════════ */

:root {
  /* ── color · Paper & Ink (모노크롬 고정) ── */
  --paper: #f4f1ea;      /* 배경 */
  --paper-2: #ebe7dd;    /* 카드·이미지 바탕 */
  --ink: #141311;        /* 텍스트·선 */
  --ink-soft: #33302a;   /* 본문 프로즈 */
  --muted: #7d786e;      /* 보조 텍스트 */
  --line: rgba(20, 19, 17, 0.14);        /* 헤어라인 */
  --line-strong: rgba(20, 19, 17, 0.55); /* 강조 보더 */
  --dark: #161511;       /* 다크 밴드 배경 */
  --dark-line: rgba(244, 241, 234, 0.16);
  --dark-muted: rgba(244, 241, 234, 0.55);

  /* ── typography ── */
  --font-display: "Anton", "Pretendard Variable", Pretendard, sans-serif;
  --font-label: "Jost", "Pretendard Variable", Pretendard, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, "Jost", -apple-system, sans-serif;

  --fs-body: 15px;
  --fs-label: 11px;
  --fs-label-xs: 10px;
  --ls-label: 0.32em;          /* 라벨 자간 (uppercase 필수) */
  --ls-label-tight: 0.22em;

  /* display scale — 유동(clamp) 고정값. 새 크기 만들지 말 것 */
  --fs-hero: clamp(64px, 16.5vw, 240px);       /* 메인 히어로 전용 */
  --fs-display-1: clamp(48px, 10vw, 140px);    /* 페이지 타이틀 */
  --fs-display-2: clamp(34px, 6vw, 84px);      /* 섹션 타이틀 */
  --fs-display-3: clamp(30px, 5.6vw, 76px);    /* 작가 리스트 행 */
  --fs-display-4: clamp(26px, 4.4vw, 56px);    /* 블록 타이틀 */
  --fs-display-5: clamp(20px, 3vw, 40px);      /* prev/next 등 */

  /* ── spacing rhythm ── */
  --pad: clamp(20px, 4vw, 64px);               /* 페이지 좌우 여백 */
  --sect: clamp(72px, 12vh, 140px);            /* 섹션 상하 여백 */
  --gap-lg: clamp(24px, 5vw, 96px);
  --gap-md: clamp(16px, 2.5vw, 36px);
  --gap-sm: clamp(12px, 2vw, 24px);

  /* ── shape ── */
  --radius-card: 14px;   /* 카드에만 */
  --radius-pill: 999px;  /* 태그·버튼(원형)에만 — 그 외 라운드 금지 */

  /* ── motion (모든 트랜지션은 이 값만) ── */
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;
  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);   /* 기본 등장 */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); /* 이동·변형 */
  --reveal-y: 34px;      /* 리빌 이동 거리 */
  --stagger: 0.07s;      /* 연속 등장 간격 */

  /* ── layers ── */
  --z-head: 100;
  --z-menu: 150;
  --z-float: 60;
  --z-grain: 300;

  --head-h: 72px;
}