/* bubblejack — 디자인 시스템 정본 (회차 3 "청량함", designer · 2026-09-25 · 회차 5 기포 부품 갱신 — frontend-dev, 메인 승인)
 *
 * 페이지는 이 파일을 먼저 <link> 로 싣고, style.css 는 여기 있는 var() 만 쓴다(raw 색 0).
 * 이름은 Tailwind 4 @theme 이름공간이다 — 승급할 때 :root 블록을 globals.css 의 @theme 로 그대로 옮긴다.
 * (@theme 는 브라우저가 모르는 규칙이라 정적 사이트에서는 :root 에 둔다.)
 *
 * 렌즈: industrial-brutalist-ui — 회차 3 에서 "제도선" 모드를 버리고 "면" 모드로 옮긴다:
 * 구획은 선이 아니라 색 판과 간격이 한다(1px 헤어라인 0 · 대문자 자간 라벨 0 · 12열 격자 0).
 * UI 가 칠하는 색은 한 화면에 셋 — 그 맛의 바탕 + 먹 + 흰 판. 사진(캔·스플래시·확대 판)의 화소는 세지 않는다.
 * 회차 1 → 3 에서 지운 토큰: --spacing-hairline · --shadow-hairline · --text-micro--letter-spacing · --ease-pop
 * (style.css 의 참조는 4단계가 걷어낸다 — DESIGN.md "회차 3 · 토큰 변경" 표).
 */

:root {
  /* ── color · 바탕(ground/band/plate) — 회차 1 과 같다(새 색 0) ─────────────
     맛 바탕 다섯 장 — 순서는 스냅 순서(따뜻함·차가움을 번갈아). 전부 먹 글자로 AA 본문을 넘는다(DESIGN.md 대비표).
     회차 3: 맛 바탕은 "탄산수" 다 — 기포가 이 색 속을 올라간다. 캔 사진도 이 색 위에서 찍어(컷아웃 가장자리 번짐이 같은 색) 이음매가 없다. */
  --color-guava-ground: #ff5c9d; /* 01 Guava Riot — 대표 바탕(template.json palette.bg) */
  --color-rasp-ground: #1fc8e3; /* 02 Blue Rasp Racket — palette.accent */
  --color-yuzu-ground: #f7e03c; /* 03 Yuzu Holler */
  --color-cuke-ground: #3fdc96; /* 04 Cucumber Clatter */
  --color-mango-ground: #ffa126; /* 05 Mango Mayhem */
  --color-carbon-band: #111111; /* 먹 띠 — What's inside · 꼬리 · 버튼 판 · 색인 타일 · 핀 */
  --color-fizz-plate: #ffffff; /* 흰 판 — 스티커 · 가격 판 · 영양 표 · 맛 계기 빈 칸 · Where to buy 바탕 · 기포 */

  /* ── color · 글자(ink) ──────────────────────────────────────────────────
     맛 바탕·흰 판 위 글자는 언제나 먹. 먹 판(버튼·타일·띠) 위 글자는 흰색 또는 그 화면의 맛 색. */
  --color-ink: #111111;
  --color-fizz: #ffffff;

  /* ── color · 지금 맛(스위치) — 섹션의 data-flavor 가 바꾼다(아래) ───────── */
  --color-ground: var(--color-guava-ground);
  --color-on-ground: var(--color-ink);

  /* ── font — 회차 1 과 같다 ───────────────────────────────────────────────
     display = Big Shoulders Display(압축 · 시카고 간판) — 맛 이름·숫자·제목·스티커, 언제나 대문자, 자간 0.
     body = Chivo(그로테스크) — 문장·표·micro. micro 는 회차 3 부터 문장식 대소문자·자간 0(대문자 자간 라벨 0). */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --font-weight-body: 400;
  --font-weight-medium: 500; /* 한 줄 카피(lead) */
  --font-weight-semibold: 600; /* micro · 치수 활자 */
  --font-weight-strong: 700; /* 버튼 · 표 머리 */
  --font-weight-display: 800; /* 수치 · 제목 · 스티커 · 색인 번호 */
  --font-weight-black: 900; /* 맛 이름 */

  /* ── text ───────────────────────────────────────────────────────────────
     mega 의 실제 크기는 style.css 가 min(맞춤 너비, 높이 상한)으로 정한다(wireframe-v3 "폭 표") — 여기 값은 상·하한이다.
     위계: 화면에서 가장 큰 "물체" 는 캔 사진 하나, 가장 큰 "글자" 는 맛 이름(다음 글자의 3배 이상 — 최저 390 CUCUMBER 86.5 : 28 = 3.1). */
  --text-mega: clamp(4rem, 24vw, 20rem); /* 하한 64px — 320px 폰에서 CUCUMBER 가 69.6px 여야 넘치지 않는다 */
  --text-mega--line-height: 0.8;
  --text-mega--letter-spacing: -0.005em;
  --text-display: clamp(4rem, 11vw, 10rem); /* 상세 맛 이름 */
  --text-display--line-height: 0.82;
  --text-numeral: clamp(3rem, 7vw, 6.5rem); /* 페어링 번호 · 핵심 수치 · 가격 */
  --text-numeral--line-height: 0.85;
  --text-h2: clamp(2.5rem, 5.5vw, 5rem); /* 구간 제목 — display 대문자 */
  --text-h2--line-height: 0.88;
  --text-band: clamp(1.75rem, 3.4vw, 3rem); /* 활자 띠(Marquee) · 다른 맛 띠 · 페어링 이름 */
  --text-band--line-height: 1;
  --text-stat: clamp(1.75rem, 2.8vw, 2.5rem); /* 정보 행 수치 4칸의 숫자 */
  --text-stat--line-height: 0.9;
  --text-sticker: clamp(1.25rem, 2vw, 1.75rem); /* 스티커 SALTY! · PSSHT! */
  --text-sticker--line-height: 0.9;
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem); /* 한 줄 카피 — Chivo 500, 최대 34ch */
  --text-lead--line-height: 1.35;
  --text-body: 1rem;
  --text-body--line-height: 1.55;
  --text-small: 0.875rem;
  --text-small--line-height: 1.45;
  --text-micro: 0.8125rem; /* 13px — 단위 · 치수 활자 · 범례 · 표 머리. 문장식 대소문자, 자간 0 */
  --text-micro--line-height: 1.3;

  /* ── spacing ────────────────────────────────────────────────────────────
     4px 척도. 선 굵기는 "막대" 둘뿐(영양 표 8px·4px) — 1px 헤어라인은 없다. 구획은 면과 간격으로. */
  --spacing-bar: 8px; /* 영양 표 구획 막대 */
  --spacing-bar-thin: 4px; /* 영양 표 칼로리 아래 막대 */
  --spacing-ring: 3px; /* 포커스 링 — 선이 아니라 상태 표시다 */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-header: 3.5rem; /* 56px — 헤더 높이 */
  --spacing-tap: 2.75rem; /* 44px — 터치 타깃 최소 */
  --spacing-button: 3rem; /* 48px — 버튼 높이 */
  --spacing-button-lg: 3.5rem; /* 56px — buy [담기] 한 개(이 페이지의 주인공 동작) */
  --spacing-chip: 3.5rem; /* 56px — buy 맛 칩 최소 높이(번호 + 이름) */
  --spacing-swatch: 0.75rem; /* 12px — buy 맛 칩의 색 견본(원칙 1 의 넷째 예외) */
  --spacing-margin: clamp(1rem, 2.8vw, 2.5rem); /* 좌우 여백 16 → 40 */
  --spacing-gutter: clamp(0.75rem, 1.7vw, 1.5rem); /* 이름 칸 ↔ 캔 칸 사이 12 → 24 (격자는 두 칸 — 12열 없음) */
  --spacing-can: 76svh; /* 홈 캔 사진 높이(가로 화면 56rem↑) — 너비 = 높이 × 0.56(컷아웃 상자) */
  --spacing-can-sm: 64svh; /* 홈 캔 사진 높이 상한(세로 화면) — 실제는 남는 줄을 채운다 */
  --spacing-can-detail: 84svh; /* 상세 히어로 캔 높이(가로 화면) */
  --spacing-can-band: 7.5rem; /* 상세 "다른 맛" 띠의 작은 캔(120px) */
  --spacing-pin: 2rem; /* 상세 핀 번호 타일 32px */
  --spacing-bubble-xs: 5px; /* 기포 다섯 크기(회차 5) — 5·7·10px 이 다수(76%), 15·21px 이 소수 */
  --spacing-bubble-sm: 7px;
  --spacing-bubble-md: 10px;
  --spacing-bubble-lg: 15px;
  --spacing-bubble-xl: 21px;
  --spacing-bubble-ring: 1px; /* 기포 한 알의 흰 테(회차 5 — 먹 2px 윤곽을 걷었다: 스티커 점으로 읽혔다). 구획선이 아니다 */

  /* ── opacity — 기포 유리 구슬 전용(회차 5). 이 부품에만 반투명을 쓴다(다른 판·글자 0) ── */
  --opacity-bubble-shade: 44%; /* 채움 = 그 섹션 바탕 + 먹 이만큼 — 밝은 바탕일수록 더(아래 맛 스위치가 바꾼다) */
  --opacity-bubble-fill: 35%; /* 그 채움의 불투명도 — 뒤의 바탕이 비친다(유리) */
  --opacity-bubble-rim: 55%; /* 흰 테 */
  --opacity-bubble-glint: 85%; /* 안쪽 위 하이라이트 점 */

  /* ── radius · shadow — 모서리는 90°(기포만 원), 그림자 없음 ───────────── */
  --radius-none: 0px;
  --radius-bubble: 50%; /* 기포 전용 — 버튼·칩·카드에 쓰지 않는다(알약 0) */
  --shadow-none: none;

  /* ── ease ───────────────────────────────────────────────────────────────
     길이는 DESIGN.md 회차 3 모션 표에 있다(90 · 120 · 160 · 240ms · 프레임 90ms · 기포 6–14s(높이 900px 기준) · Marquee 32s). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Layout animation · Translate · Crossfade */
  --ease-press: cubic-bezier(0.2, 0, 0, 1); /* Press / Tap feedback */
  --ease-rise: linear; /* 기포 상승 — 등속(회차 5: 탄산 기포는 곧 종단 속도에 닿는다 · 등속이라 높이마다 밀도가 같다). UI 반응에는 쓰지 않는다 */
  --ease-sway: cubic-bezier(0.45, 0, 0.55, 1); /* 기포 좌우 흔들림 — Alternate(yoyo) */
  --ease-cut: steps(1, end); /* 치익(캔을 누를 때) 3프레임 하드컷 — Stepped animation */
  --ease-linear: linear; /* Marquee 전용 */
}

/* ── 맛 스위치 — 섹션(또는 <html>)에 data-flavor 를 주면 --color-ground 가 바뀐다 ── */
[data-flavor="guava"] { --color-ground: var(--color-guava-ground); --color-on-ground: var(--color-ink); --opacity-bubble-shade: 40%; }
[data-flavor="rasp"] { --color-ground: var(--color-rasp-ground); --color-on-ground: var(--color-ink); --opacity-bubble-shade: 50%; }
[data-flavor="yuzu"] { --color-ground: var(--color-yuzu-ground); --color-on-ground: var(--color-ink); --opacity-bubble-shade: 48%; --opacity-bubble-fill: 30%; --opacity-bubble-rim: 65%; }
[data-flavor="cuke"] { --color-ground: var(--color-cuke-ground); --color-on-ground: var(--color-ink); --opacity-bubble-shade: 52%; }
[data-flavor="mango"] { --color-ground: var(--color-mango-ground); --color-on-ground: var(--color-ink); --opacity-bubble-shade: 50%; }
[data-flavor="carbon"] { --color-ground: var(--color-carbon-band); --color-on-ground: var(--color-fizz); }
[data-flavor="plate"] { --color-ground: var(--color-fizz-plate); --color-on-ground: var(--color-ink); }

/* ── color · 기포 유리 구슬(회차 5) — 그 섹션의 바탕에서 풀어야 해서 :root 가 아니라 기포 층·치익 파편에 둔다
   (:root 에 두면 <html> 의 맛으로 굳어 다른 맛 섹션의 기포가 엉뚱한 색이 된다). 글자에 쓰지 않는다 ── */
.fizz,
.burst {
  --color-bubble-fill: color-mix(in oklch, color-mix(in oklch, var(--color-ground), var(--color-ink) var(--opacity-bubble-shade)) var(--opacity-bubble-fill), transparent);
  --color-bubble-rim: color-mix(in oklch, var(--color-fizz-plate) var(--opacity-bubble-rim), transparent);
  --color-bubble-glint: color-mix(in oklch, var(--color-fizz-plate) var(--opacity-bubble-glint), transparent);
}