/* overprint — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — 브라우저는 @theme 블록을 읽지 않는다 #73)
 * 방향 A "포스터 벽": 회색 벽(bg) 위에 종이(paper)를 붙이고, 잉크는 종이 위에서만 겹친다.
 * 겹침색은 계산값이 아니라 실측값이다 — 드럼 A × 드럼 B × 종이(multiply). 구현은 mix-blend-mode: multiply 로 같은 값을 얻는다.
 */
:root {
  /* 바탕 — 벽과 종이 */
  --color-bg: #8f9699;            /* 벽: 차가운 콘크리트, mid (OKLCH L 0.668 C 0.009 h 225) */
  --color-paper: #f1f2ef;         /* 종이: 베이지 아님 (C 0.004) */
  --color-paper-ph: #dfe2e0;      /* 사진 자리표시자 종이 */
  --color-tape: #d9dedd;          /* 테이프 조각 — opacity .78 로 붙인다 */

  /* 글자 */
  --color-ink: #232428;           /* 먹 글자 — 종이 13.80 · 벽 5.16 */
  --color-ink-muted: #505359;     /* 보조 글자 — 종이 위에서만 (6.86). 벽 위 금지 (2.57) */

  /* 강조 — 해바라기 (OKLCH h 77). 누르는 곳에만: 강조 단추 · 선택 표식 · 어두운 면의 포커스 */
  --color-accent: #ffb20f;
  --color-on-accent: #232428;     /* 8.58 */
  --color-focus: #232428;         /* 종이·벽 위 포커스 고리 */
  --color-focus-on-dark: #ffb20f; /* 겹침·먹 면 위 포커스 고리 (남보라 위 7.48) */

  /* 드럼 8 — 잉크 원색. 종이 위에 mix-blend-mode: multiply 로 찍는다 */
  --color-drum-meok: #2a2b30; /* 01 먹 */
  --color-drum-pink: #ff4fa3; /* 02 분홍 */
  --color-drum-scarlet: #f2553a; /* 03 주홍 */
  --color-drum-sun: #ffb20f; /* 04 해바라기 */
  --color-drum-green: #12a05c; /* 05 풀 */
  --color-drum-teal: #00838d; /* 06 청록 */
  --color-drum-blue: #1f6dd1; /* 07 청 */
  --color-drum-violet: #7a58b0; /* 08 보라 */

  /* 종이 위 실측 — 드럼 × 종이(multiply). 대비 계산과 정지 그림(SVG fill)에 쓴다 */
  --color-print-meok: #28292d;
  --color-print-pink: #f14b99;
  --color-print-scarlet: #e55136;
  --color-print-sun: #f1a90e;
  --color-print-green: #119856;
  --color-print-teal: #007c84;
  --color-print-blue: #1d67c4;
  --color-print-violet: #7354a5;

  /* 겹침 28 — 드럼 A × 드럼 B × 종이 (multiply 실측). 이름은 드럼 번호 순 */
  --color-over-meok-pink: #280d1d; /* 먹 × 분홍 */
  --color-over-meok-scarlet: #260e0a; /* 먹 × 주홍 */
  --color-over-meok-sun: #281c03; /* 먹 × 해바라기 */
  --color-over-meok-green: #031a10; /* 먹 × 풀 */
  --color-over-meok-teal: #001519; /* 먹 × 청록 */
  --color-over-meok-blue: #051125; /* 먹 × 청 */
  --color-over-meok-violet: #130e1f; /* 먹 × 보라 */
  --color-over-pink-scarlet: #e51923; /* 분홍 × 주홍 */
  --color-over-pink-sun: #f13409; /* 분홍 × 해바라기 */
  --color-over-pink-green: #112f37; /* 분홍 × 풀 */
  --color-over-pink-teal: #002754; /* 분홍 × 청록 */
  --color-over-pink-blue: #1d207d; /* 분홍 × 청 */
  --color-over-pink-violet: #731a69; /* 분홍 × 보라 */
  --color-over-scarlet-sun: #e53803; /* 주홍 × 해바라기 */
  --color-over-scarlet-green: #103314; /* 주홍 × 풀 */
  --color-over-scarlet-teal: #00291e; /* 주홍 × 청록 */
  --color-over-scarlet-blue: #1c222d; /* 주홍 × 청 */
  --color-over-scarlet-violet: #6d1c26; /* 주홍 × 보라 */
  --color-over-sun-green: #116a05; /* 해바라기 × 풀 */
  --color-over-sun-teal: #005708; /* 해바라기 × 청록 */
  --color-over-sun-blue: #1d480c; /* 해바라기 × 청 */
  --color-over-sun-violet: #733a0a; /* 해바라기 × 보라 */
  --color-over-green-teal: #004e30; /* 풀 × 청록 */
  --color-over-green-blue: #024147; /* 풀 × 청 */
  --color-over-green-violet: #08343c; /* 풀 × 보라 */
  --color-over-teal-blue: #00356c; /* 청록 × 청 */
  --color-over-teal-violet: #002b5b; /* 청록 × 보라 */
  --color-over-blue-violet: #0e2487; /* 청 × 보라 */

  /* 서체 — 서가 가족만 */
  --font-display: "Gasoek One", "Pretendard Variable", sans-serif; /* 한글 4자 이하·숫자·₩ 에만 (#84) */
  --font-mark: "Anybody", "Pretendard Variable", sans-serif;       /* 제호 OVERPRINT 에만. font-weight 900 · font-stretch 125% */
  --font-body: "Pretendard Variable", "Pretendard", system-ui, sans-serif; /* 제목 800 · 본문 400 · 숫자 tabular-nums */

  /* 글자 크기 — 폭 표(wireframe 8절)의 식 그대로 */
  --text-mark: min(12.6cqi, 168px);       /* 제호 펼침 — 머리 종이에 container-type: inline-size */
  --text-mark-sub: min(7cqi, 96px);       /* 제호 반 크기 — 아이덴티티·주문 */
  --text-mark-bar: 28px;                  /* 접힘 띠 */
  --text-poster: min(27.5cqi, 200px);     /* "1+1=3" 한 줄 — 포스터 안쪽이 560px 이상일 때 */
  --text-poster-stack: 42cqi;             /* "1+1" / "=3" 두 줄 — 560px 미만 */
  --text-poster-line: clamp(26px, 1.2rem + 1.6vw, 44px);
  --text-h1: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem);
  --text-h2: clamp(1.75rem, 1rem + 2.2vw, 3.5rem);
  --text-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --text-numeral: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);  /* Gasoek 가격·단계 숫자 */
  --text-numeral-s: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); /* 띠지·영수증 합계 */
  --text-step: clamp(4rem, 3rem + 3vw, 6rem);           /* 주문 단계 1–4 */
  --text-body: 1.0625rem;   /* 17px */
  --text-small: 0.875rem;   /* 14px — 스펙 줄·hex */
  --text-micro: 0.75rem;    /* 12px — 눈금 숫자만 */

  --leading-display: 0.88;
  --leading-heading: 1.18;
  --leading-body: 1.65;
  --tracking-heading: -0.03em;
  --tracking-display: -0.01em;

  /* 간격 — 4px 척도 + 벽·종이 */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-wall: 12px;          /* ≥768 에서 24px — 미디어 쿼리로 바꾼다 */
  --spacing-gutter: 24px;        /* 벽 12열 거터 */
  --spacing-sheet-head: 16px;    /* 머리 종이 안쪽: <768 16 · 768–1023 24 · ≥1024 32 */
  --spacing-sheet-poster: 20px;  /* 포스터 안쪽: <768 20 · ≥768 40 · ≥1200 48 */
  --spacing-section: clamp(64px, 40px + 6vw, 160px); /* 벽 위 블록 사이 — 벽이 숨 쉰다 */

  /* 모서리 — 종이는 거의 각지다. 둥근 카드 금지 */
  --radius-none: 0;
  --radius-sheet: 2px;
  --radius-dot: 999px;   /* 스티커 원·핀 맞춤 표식만 */

  /* 그림자 — 종이가 벽에서 떠 있는 정도. 회색 단일 그림자 금지, 두 겹 */
  --shadow-sheet: 0 1px 0 rgb(35 36 40 / 0.14), 0 18px 28px -20px rgb(35 36 40 / 0.55);
  --shadow-lift: 0 2px 0 rgb(35 36 40 / 0.12), 0 28px 40px -22px rgb(35 36 40 / 0.6);
  --shadow-bar: 0 10px 18px -14px rgb(35 36 40 / 0.6);

  /* 이징·길이 — DESIGN.md 모션 규칙 표와 같은 이름 */
  --ease-register: cubic-bezier(0.32, 0.72, 0, 1); /* 판 맞춤 — 무겁게 들어와 딱 선다 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* 응답 일반 */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);        /* 도장 찍기 */
  --duration-register: 460ms;
  --duration-fold: 240ms;
  --duration-swap: 160ms;
  --duration-open: 220ms;
  --duration-press: 90ms;
  --duration-lift: 180ms;

  /* 상태 변수 — 토큰이 아니라 슬라이더가 바꾸는 값. 기본만 여기 둔다 */
  --misreg: 1;            /* mm, 0–3 */
  --misreg-unit: 2.5px;   /* ≥768 에서 4px */
}

@media (min-width: 768px) {
  :root {
    --spacing-wall: 24px;
    --spacing-sheet-head: 24px;
    --spacing-sheet-poster: 40px;
    --misreg-unit: 4px;
  }
}
@media (min-width: 1024px) {
  :root { --spacing-sheet-head: 32px; }
}
@media (min-width: 1200px) {
  :root { --spacing-sheet-poster: 48px; }
}