/* breezeone — 디자인 토큰 정본 (3단계). 이름은 Tailwind 4 @theme 이름공간, 선언은 :root (브라우저는 @theme 를 읽지 않는다 — lessons #73).
 *
 * 두 척도를 쓴다 (wireframe §0):
 *   폰 모드 (< 600px)  — :root 기본값. px 고유 척도, 패널 높이 auto.
 *   캔버스 모드 (≥ 600px) — 아래 @media. 가운데 열(.sheet, container-type: inline-size) 안의 모든 크기를 cu = 860분의 1 로 쓴다.
 *     860 에서 1cu = 1px, 780 에서 0.907px → 780 긴 이미지가 860 의 정확한 축소가 되고, 패널 경계가 절단선(4,000px)에 맞는다.
 *     cqi 는 쓰는 요소의 **가장 가까운 조상** 컨테이너를 본다 — cu 로 크기를 주는 요소는 .sheet 의 자손이어야 한다(.sheet 자신은 안 된다).
 *
 * 모션 없음: 긴 이미지로 잘라도 같아야 한다. 전환 시간 토큰을 두지 않는다(--ease-instant 만).
 */

:root {
  /* ── 색 — 팔레트 5 (template.json design.palette) + 역할 색 ─────────────── */
  --color-bg: #bbdac8;              /* 공기 세이지 — 패널 기본 바탕(면적 84%). 흰 바탕 3장(직전) 회피 ΔE ≥ 0.069 */
  --color-ink: #14201a;             /* 잉크 — 글자·구획선·인출선·치수선 */
  --color-band: #ffe03a;            /* 강조 띠 — 유일한 강조색. 글자색으로 쓰지 않는다(바탕 위 1.14:1). 띠 위 글자는 늘 잉크 */
  --color-paper: #f5f8f6;           /* 흰 판 — FIG 판·규격표·후기 카드·보증서·제품 소개 패널 */
  --color-ink-2: #3b4b43;           /* 보조 잉크 — 주석·캡션·메타. 세이지 6.15 · 흰 판 8.64 · 띠 7.03 */

  --color-ground-ink: #14201a;      /* 어두운 면 — 문제 제기 패널 1곳만(= 잉크). 위 글자는 paper, 보조는 bg */
  --color-ground-desk: #a6c8b5;     /* 책상 — 캔버스 밖(뷰포트 > 860) 양옆. 재단 표시가 여기 놓인다 */
  --color-line: #5f7268;            /* 표 행 사이 가는 줄(비텍스트) — 세이지 3.41 · 흰 판 4.80 */
  --color-swatch-fog: #eceeea;      /* 색 칩 — 포그 화이트(비텍스트, 잉크 2cu 테두리로 경계) */
  --color-swatch-graphite: #3c4240; /* 색 칩 — 그래파이트(비텍스트) */

  /* ── 서체 ───────────────────────────────────────────────────────────── */
  --font-display: "Anybody", "Pretendard Variable", Pretendard, system-ui, sans-serif; /* 숫자·라틴 라벨·워드마크만 (한글 없음). G1: Big Shoulders → Anybody (oatnine 과 R2) */
  --font-display-stretch: 62.5%;    /* Anybody 너비 축 — display 를 쓰는 모든 요소에 font-stretch 로 준다. 폭 표(wireframe §9)는 이 값으로 실측 */
  --font-head: "Pretendard Variable", Pretendard, system-ui, sans-serif;   /* 한글 헤드카피 — 800 */
  --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-weight-head: 800;
  --font-weight-num: 800;
  --font-weight-label: 600;
  --font-weight-body: 400;
  --font-weight-strong: 700;

  --tracking-hook: -0.035em;
  --tracking-head: -0.03em;
  --tracking-label: 0.06em;         /* Anybody 대문자 라벨(FIG. 01 · POINT 01) */
  --tracking-wordmark: 0.04em;

  /* ── 글자 — 폰 척도 (기본) ─────────────────────────────────────────── */
  --text-hook: 2.125rem;            /* 34px — 후킹 헤드카피 h1 */
  --text-hook--line-height: 1.18;
  --text-head: 1.75rem;             /* 28px — 블록 헤드카피 h2·h3 */
  --text-head--line-height: 1.22;
  --text-num-xl: 2rem;              /* 32px — 후킹 수치 3 */
  --text-num-xl--line-height: 1;
  --text-num-l: 3rem;               /* 48px — 특징 큰 숫자 */
  --text-num-l--line-height: 0.95;
  --text-num-m: 1.375rem;           /* 22px — 치수·도표 숫자 */
  --text-num-m--line-height: 1.1;
  --text-title: 1.1875rem;          /* 19px — 질문·소제목·카드 제목 */
  --text-title--line-height: 1.3;
  --text-lead: 1.0625rem;           /* 17px */
  --text-lead--line-height: 1.55;
  --text-body: 1rem;                /* 16px */
  --text-body--line-height: 1.65;
  --text-table: 0.875rem;           /* 14px — 규격표·비교표·안내표 */
  --text-table--line-height: 1.45;
  --text-label: 0.8125rem;          /* 13px — 키커·캡션·칩 이름 */
  --text-label--line-height: 1.4;
  --text-fine: 0.75rem;             /* 12px — ※ 주석 (최소) */
  --text-fine--line-height: 1.5;
  --text-wordmark: 1.125rem;        /* 18px */
  --text-mark: 0.875rem;            /* 14px — 책상의 재단 표시 라벨(캔버스 밖 · 고정) */

  /* ── 간격 — 이름의 숫자 = 캔버스 cu 값. 폰 값은 대략 절반 ───────────────── */
  --spacing-8: 4px;
  --spacing-12: 6px;
  --spacing-16: 8px;
  --spacing-20: 10px;
  --spacing-24: 12px;
  --spacing-28: 14px;
  --spacing-32: 16px;
  --spacing-40: 20px;
  --spacing-48: 24px;
  --spacing-64: 32px;
  --spacing-side: 20px;             /* 열 좌우 */
  --spacing-panel: 48px;            /* 패널 위아래 */
  --spacing-panel-tight: 48px;      /* P05 (캔버스 74) */
  --spacing-panel-table: 48px;      /* P13 (캔버스 96) */
  --spacing-panel-card: 48px;       /* P18 (캔버스 120) */
  --spacing-rule: 2px;              /* 장 구분선·표 바깥선·카드 테두리 */
  --spacing-hair: 1px;              /* 표 행 사이·치수선·FIG 판 테두리 */
  --spacing-leader: 1px;            /* 인출선 */
  --spacing-dot: 24px;              /* 번호 원 ①~⑥ 지름 */
  --spacing-plate-hook: clamp(240px, 40svh, 300px); /* 폰 후킹 FIG 판 높이 — 393×660 에서 264, 390×844 에서 300 */
  --spacing-sheet: 860px;           /* 캔버스 열 최대 폭 */

  /* 패널 높이 — 폰은 auto. 캔버스 값은 절단 계획(wireframe §2)이다: 바꾸면 긴 이미지의 절단선이 글자를 자른다. */
  --spacing-p00: auto; --spacing-p01: auto; --spacing-p02: auto; --spacing-p03: auto; --spacing-p04: auto;
  --spacing-p05: auto; --spacing-p06: auto; --spacing-p07: auto; --spacing-p08: auto; --spacing-p09: auto;
  --spacing-p10: auto; --spacing-p11: auto; --spacing-p12: auto; --spacing-p13: auto; --spacing-p14: auto;
  --spacing-p15: auto; --spacing-p16: auto; --spacing-p17: auto; --spacing-p18: auto; --spacing-p19: auto;

  /* ── 모서리 · 그림자 · 이징 ─────────────────────────────────────────── */
  --radius-none: 0;                 /* 모든 판·칩·표·카드 — 90° */
  --radius-dot: 999px;              /* 번호 원 ①~⑥ · 보증서 도장 원 · 인출선 끝점만 */
  --shadow-none: none;              /* 그림자 없음 — 판은 테두리로 선다 */
  --ease-instant: steps(1, end);    /* 상태 변화는 즉시(모션 없음) */

  /* 캔버스 단위 — 캔버스 모드에서만 쓴다 */
  --cu: calc(100cqi / 860);
}

@media (min-width: 600px) {
  :root {
    /* 글자 — 캔버스 척도 (860 기준 px = cu). 폰(≈390)에서 긴 이미지는 0.45배 → 본문 26 ≈ 12px, 주석 20 ≈ 9px */
    --text-hook: calc(84 * var(--cu));
    --text-hook--line-height: 1.12;
    --text-head: calc(64 * var(--cu));
    --text-head--line-height: 1.18;
    --text-num-xl: calc(88 * var(--cu));
    --text-num-xl--line-height: 1;
    --text-num-l: calc(120 * var(--cu));
    --text-num-l--line-height: 0.9;
    --text-num-m: calc(40 * var(--cu));
    --text-num-m--line-height: 1.1;
    --text-title: calc(36 * var(--cu));
    --text-title--line-height: 1.25;
    --text-lead: calc(30 * var(--cu));
    --text-lead--line-height: 1.5;
    --text-body: calc(26 * var(--cu));
    --text-body--line-height: 1.6;
    --text-table: calc(24 * var(--cu));
    --text-table--line-height: 1.4;
    --text-label: calc(24 * var(--cu));
    --text-label--line-height: 1.35;
    --text-fine: calc(20 * var(--cu));
    --text-fine--line-height: 1.45;
    --text-wordmark: calc(30 * var(--cu));

    --spacing-8: calc(8 * var(--cu));
    --spacing-12: calc(12 * var(--cu));
    --spacing-16: calc(16 * var(--cu));
    --spacing-20: calc(20 * var(--cu));
    --spacing-24: calc(24 * var(--cu));
    --spacing-28: calc(28 * var(--cu));
    --spacing-32: calc(32 * var(--cu));
    --spacing-40: calc(40 * var(--cu));
    --spacing-48: calc(48 * var(--cu));
    --spacing-64: calc(64 * var(--cu));
    --spacing-side: calc(56 * var(--cu));
    --spacing-panel: calc(112 * var(--cu));
    --spacing-panel-tight: calc(74 * var(--cu));
    --spacing-panel-table: calc(96 * var(--cu));
    --spacing-panel-card: calc(120 * var(--cu));
    --spacing-rule: calc(2 * var(--cu));
    --spacing-hair: max(1px, calc(1 * var(--cu)));
    --spacing-leader: calc(1.5 * var(--cu));
    --spacing-dot: calc(40 * var(--cu));
    --spacing-plate-hook: calc(460 * var(--cu));

    /* 패널 높이 = 절단 계획. 합 18,000cu. 860 절단 4,000·8,000·12,000·16,000 / 780 절단 4,410·8,821·13,231·17,641 이 전부 경계에 떨어진다 */
    --spacing-p00: calc(72 * var(--cu));    /*     0–72     머리 띠 */
    --spacing-p01: calc(828 * var(--cu));   /*    72–900    후킹 헤드 (1440×900 첫 화면 = P00+P01) */
    --spacing-p02: calc(1280 * var(--cu));  /*   900–2180   문제 제기 (어두운 면) */
    --spacing-p03: calc(1050 * var(--cu));  /*  2180–3230   제품 소개 · 색 */
    --spacing-p04: calc(770 * var(--cu));   /*  3230–4000   제품 소개 · 구성품    │ 860 절단 01│02 */
    --spacing-p05: calc(410 * var(--cu));   /*  4000–4410   특징 머리            │ 780 절단 01│02 */
    --spacing-p06: calc(950 * var(--cu));   /*  4410–5360   특징 ① 무게 */
    --spacing-p07: calc(950 * var(--cu));   /*  5360–6310   특징 ② 흡입 */
    --spacing-p08: calc(740 * var(--cu));   /*  6310–7050   특징 ③ 소음 */
    --spacing-p09: calc(950 * var(--cu));   /*  7050–8000   특징 ④ 충전          │ 860 절단 02│03 */
    --spacing-p10: calc(820 * var(--cu));   /*  8000–8820   특징 ⑤ 필터 세척     │ 780 절단 02│03 */
    --spacing-p11: calc(1400 * var(--cu));  /*  8820–10220  사용 장면 */
    --spacing-p12: calc(740 * var(--cu));   /* 10220–10960  규격 도면 (#spec) */
    --spacing-p13: calc(1040 * var(--cu));  /* 10960–12000  규격표               │ 860 절단 03│04 */
    --spacing-p14: calc(1230 * var(--cu));  /* 12000–13230  비교 (가상)          │ 780 절단 03│04 */
    --spacing-p15: calc(1430 * var(--cu));  /* 13230–14660  후기 (가상) */
    --spacing-p16: calc(1340 * var(--cu));  /* 14660–16000  FAQ                  │ 860 절단 04│05 */
    --spacing-p17: calc(840 * var(--cu));   /* 16000–16840  배송·교환 */
    --spacing-p18: calc(800 * var(--cu));   /* 16840–17640  품질보증서           │ 780 절단 04│05 */
    --spacing-p19: calc(360 * var(--cu));   /* 17640–18000  가상 고지 */
  }
}