/* blue-hour — 디자인 시스템 정본. 설명은 _design/DESIGN.md.
 * 이름은 Tailwind 4 @theme 이름공간이다 — 승급 때 `:root {` 를 `@theme {` 로 바꿔 globals.css 로 그대로 옮긴다.
 * style.css 는 여기 있는 var() 만 쓴다. raw 색은 이 파일과 grain.svg 에만 있다.
 * 인쇄 논리: 코발트는 잉크, 글자는 인쇄되지 않은 종이(녹아웃), 호박색은 두 번째 판 한 도(度). */

:root {
  /* ── 색 ─────────────────────────────────────────────────────────────── */
  --color-bg: #3450a3;          /* 시트 — 블루 아워 코발트. OKLCH L 0.46 → tone mid */
  --color-bg-wall: #111a3d;     /* 벽 — 시트 바깥 여백. 해가 진 뒤 밤 */
  --color-ink: #f3efe6;         /* 종이 — 제목·본문. 시트 위 6.48:1 */
  --color-haze: #d3dcf6;        /* 옅은 하늘 — 보조 글자·가는 선. 시트 위 5.43:1 */
  --color-accent: #ffb547;      /* 나트륨 가로등 호박 — 일시 숫자·예매 면·선 1개만. 시트 위 4.23:1 → 큰 글자·면 전용 */
  --color-on-accent: #111a3d;   /* 호박 면 위 글자. 9.65:1 */

  /* ── 서체 ───────────────────────────────────────────────────────────── */
  /* Archivo 에는 한글이 없다 — 한글 글리프는 자연히 Pretendard 로 떨어진다(의도) */
  --font-display: "Archivo", "Pretendard Variable", system-ui, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;

  --font-weight-title: 900;
  --font-weight-date: 800;
  --font-weight-strong: 700;
  --font-weight-body: 500;

  /* Archivo 너비 축(wdth 62–125%). 제목 숨쉬기의 범위·쉼, 그리고 좁힌/벌린 보조 활자 */
  --font-stretch-breathe-min: 64%;
  --font-stretch-breathe-max: 82%;  /* HOUR 폭 2.71em — 이 값에서 제목 칸에 맞도록 --text-title* 를 잡았다 */
  --font-stretch-rest: 72%;         /* reduced-motion 에서 멈추는 자리 */
  --font-stretch-date: 75%;         /* "10.18 SUN" 4.01em */
  --font-stretch-wide: 125%;        /* QUARTET · 머리줄 — 넓게 벌린 작은 대문자 */

  /* ── 글자 크기 — 제목은 너비·높이 중 작은 쪽을 따른다(한 화면에 들어가야 한다) ── */
  --text-title: min(29vw, 19svh);                        /* 1열 < 60rem — 390×844 → 113px */
  /* 12열 ≥ 60rem — 1440×900 → 302px. 높이 쪽 상한은 "제목 두 줄(1.6em) + 나머지(머리줄·QUARTET·출연 ≈ 12rem) + 벽·여백(≈ 9.4vw) ≤ 100svh"
   * 를 1.6 으로 나눈 것 — 36svh 로는 1366×657 · 1280×720 노트북 창에서 스크롤이 생겼다(구현 실측, NOTES.md) */
  --text-title-wide: min(21vw, calc(62svh - 5.9vw - 7.5rem));
  --text-date: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);  /* 44 → 88px */
  --text-venue: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);  /* 22 → 32px */
  --text-name: clamp(1rem, 0.92rem + 0.3vw, 1.25rem);   /* 16 → 20px — 출연 한글 이름 */
  --text-quartet: clamp(0.875rem, 0.7rem + 0.5vw, 1.25rem); /* 14 → 20px — QUARTET 줄 */
  --text-body: 0.9375rem;                                /* 15px — 한글 본문 최소 */
  --text-micro: 0.75rem;                                 /* 12px — 라틴 대문자 머리줄·악기 전용 */

  --leading-title: 0.8;
  --leading-tight: 1.1;
  --leading-body: 1.5;
  --tracking-title: -0.01em;
  --tracking-micro: 0.16em;
  --tracking-quartet: 0.32em;

  /* ── 간격 — 4px 척도 ────────────────────────────────────────────────── */
  --spacing: 0.25rem;
  --spacing-1: 0.25rem;  /* 4 */
  --spacing-2: 0.5rem;   /* 8 */
  --spacing-3: 0.75rem;  /* 12 */
  --spacing-4: 1rem;     /* 16 */
  --spacing-6: 1.5rem;   /* 24 — 12열 거터 */
  --spacing-8: 2rem;     /* 32 */
  --spacing-12: 3rem;    /* 48 */
  --spacing-wall: clamp(0.5rem, 1.4vw, 1.25rem);   /* 벽 두께 8 → 20px */
  --spacing-sheet: clamp(1.25rem, 3.3vw, 3rem);    /* 시트 안쪽 여백 20 → 48px */
  --spacing-mark: 0.75rem;                         /* 재단 표시 L자 한 변 12px */

  --breakpoint-wide: 60rem;  /* 1열 → 12열. 미디어 쿼리에는 var() 가 안 들어간다 — style.css 에 60rem 을 그대로 쓰고 이 줄이 근거 */

  /* ── 모서리·그림자 — 없다. 종이는 둥글지 않고, 벽에 붙은 포스터는 뜨지 않는다 ── */
  --radius-none: 0;
  --shadow-none: none;

  /* ── 움직임 — 화면에서 움직이는 것은 제목 하나 ─────────────────────────── */
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);  /* 사인형 ease-in-out — 양 끝에서 오래 머문다 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* 예매 링크 색 전환 */
  --animate-breathe: breathe 9s var(--ease-breathe) infinite alternate;

  /* ══ v2 · 예매 페이지(/blue-hour/book/) — 읽고 누르는 화면(Operate). 위의 값은 하나도 바꾸지 않고 더하기만 했다 ══ */

  /* 완료 티켓 면 — accent 와 같은 잉크(두 번째 판)다. 따로 bg- 이름을 둔 까닭: 대비 도구가 이것을 "면" 으로 재서
   * 호박 면 위에 올릴 수 있는 글자가 on-accent 하나뿐이라는 것(ink·haze 는 미달)을 표에 숫자로 남기려고 */
  --color-bg-ticket: #ffb547;

  /* 예매 제목 — 숨 쉬지 않는다(쉼 폭 72% 에 멈춘 채). BLUE HOUR 한 줄 = 4.68em(wdth 72, 실측) */
  --text-title-book: min(17vw, 9svh);        /* 1열 한 줄 — 390×844 → 66px(310px 폭 / 칸 334) · 393×660 → 59px */
  --text-title-book-wide: min(11vw, 20svh);  /* 12열 두 줄 BLUE / HOUR — 1440×900 → 158px · 1366×657 → 131px */
  /* 큰 숫자 둘 — 높이 상한(svh)을 같이 둔다: 노트북 창에서도 결제 버튼이 첫 화면에 남게 */
  --text-count: min(clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem), 7svh);  /* 인원 숫자(종이색) 36 → 56px */
  --text-total: min(clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem), 10svh);    /* 합계 숫자(호박) 44 → 88px — 포스터 일시 숫자와 같은 크기 사다리 */

  /* 누르는 것의 크기 — 포스터의 48px 예매 면을 규칙으로 올렸다 */
  --spacing-target: 3rem;       /* 48 — 스테퍼 ± · 포스터로 · 다시 고르기 */
  --spacing-target-lg: 3.5rem;  /* 56 — 결제하기(화면에서 하나뿐인 주 행동) */
  /* 주문서 행 안쪽 여백의 바닥값 — 남는 높이는 행 사이에 고르게 나눈다(qa-1 P3: 빈 높이를 한 곳에 모으지 않는다) */
  --spacing-row: clamp(0.5rem, 2svh - 0.5rem, 1rem);  /* 660 → 8 · 900 → 10 */

  /* 결제 → 완료: 호박 판이 결제 버튼 쪽(아래)에서 위로 찍혀 올라온다. 예매 페이지에서 움직이는 것은 이것 하나 */
  --animate-ticket: ticket-print 400ms var(--ease-out) both;
}

/* 제목 숨쉬기 — Idle animation · Alternate(yoyo) Loop. 값은 위 --font-stretch-breathe-* 와 같다(키프레임에는 리터럴로 둔다).
 * font-stretch 가 아니라 wdth 축을 직접 움직인다: Chromium 은 font-stretch 보간을 0.25% 단위로 끊어 302px 제목의 끝이
 * 한 번에 2.4px 씩 계단처럼 뛴다(실측 4초에 25번). font-variation-settings 는 매 프레임 연속이다(0.3px/프레임, 비용 같음).
 * 정지 상태(reduced-motion)는 여전히 font-stretch: var(--font-stretch-rest) 다. */
@keyframes breathe {
  from { font-variation-settings: "wdth" 64; }
  to   { font-variation-settings: "wdth" 82; }
}

/* 완료 티켓 찍기 — Reveal(Clip-path) · Origin-aware(결제 버튼이 있던 아래 변에서) · Ease-out · Fill mode both.
 * 한 번만 돈다(반복 없음). 되돌아갈 때(다시 고르기)는 움직이지 않는다. reduced-motion 에서는 animation: none — 바로 보인다. */
@keyframes ticket-print {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}