/* keelway — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — 브라우저는 @theme 블록을 읽지 않는다 #73)
   원칙: 바다는 멈춰 있고 페이지가 지나간다 · 유리는 영상 위 운송장 캡슐에만 · 녹색은 지금 움직이는 것에만 */
:root {
  /* ── 색: 밤바다 잉크 ───────────────────────────── */
  --color-bg: #0a1418;               /* 바탕 — 영상이 없을 때·판(slab) 기본 */
  --color-bg-deep: #060e11;          /* 꼬리·가장 깊은 판 */
  --color-surface: #11222a;          /* 판 안의 올린 면(가격 표·FAQ 줄 hover) */
  --color-surface-line: #1b3039;     /* 면 위의 구획선(불투명이 필요한 곳) */
  --color-ink: #eef3f1;              /* 본문·제목 */
  --color-ink-2: #c3d0cf;            /* 보조 문장 */
  --color-ink-3: #8ea2a5;            /* 메타·라벨(작은 글자 최저선) */
  --color-accent: #5cf0a4;           /* 우현등 녹색 — 움직이는 것에만(라이브 점·진행선·ETA) */
  --color-accent-ink: #06281a;       /* 녹색 위 글자(작은 딱지에만) */
  --color-line: rgba(238, 243, 241, 0.12);   /* 머리카락 선 */
  --color-line-strong: rgba(238, 243, 241, 0.22);

  /* 영상 위 덧칠 — 가장 밝은 프레임(#8aa0ad 가정) 기준으로 맞춘 값 */
  --color-scrim-strong: rgba(6, 14, 17, 0.78);
  --color-scrim-mid: rgba(6, 14, 17, 0.6); /* 4단계 실측: 항적 최댓값 #eae7eb 에서 55% 는 ink 4.46 → 60% 로 5.25 */
  --color-scrim-soft: rgba(6, 14, 17, 0.2);

  /* 리퀴드 글래스 — 운송장 캡슐 한 부품 전용(회차 4 에서 헤더를 칸막이 띠로 바꿨다) */
  --color-glass-fill: rgba(238, 243, 241, 0.06);
  --color-glass-tint: rgba(6, 14, 17, 0.56);
  --color-glass-edge-hi: rgba(255, 255, 255, 0.55);
  --color-glass-edge-lo: rgba(255, 255, 255, 0.04);

  /* ── 서체 ─────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-weight-display: 600;
  --font-weight-body: 400;
  --font-weight-strong: 600;
  --font-stretch-display: 75%;       /* Bricolage 폭 축 — 압축으로만 쓴다 */

  /* ── 글자 크기 (폭 실측: wireframe 폭 표) ──────────── */
  --text-hero: clamp(3.5rem, 1.2rem + 7vw, 9rem);
  --text-hero--line-height: 0.92;
  --text-hero--letter-spacing: -0.03em;
  --text-display: clamp(2.5rem, 1rem + 4.2vw, 5.5rem);
  --text-display--line-height: 0.96;
  --text-display--letter-spacing: -0.03em;
  --text-figure: clamp(3rem, 1.5rem + 5vw, 6.5rem);
  --text-figure--line-height: 1;
  --text-title: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  --text-title--line-height: 1.15;
  --text-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --text-lead--line-height: 1.5;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-micro: 0.75rem;             /* 눈썹 딱지·메타 — mono 대문자, 자간 0.14em */
  --text-micro--line-height: 1.3;
  --text-micro--letter-spacing: 0.14em;

  /* ── 간격 (fluid 는 margin·gap 에, 테두리 상자 padding 은 리터럴 단계 #50) ── */
  --spacing: 0.25rem;
  --spacing-pad-xs: 0.5rem;
  --spacing-pad-sm: 0.75rem;
  --spacing-pad-md: 1.25rem;
  --spacing-pad-lg: 2rem;
  --spacing-gutter: clamp(1.25rem, 0.4rem + 3.4vw, 5rem);
  --spacing-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --spacing-stack: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  --spacing-section: clamp(6rem, 4rem + 6vw, 10rem);
  --spacing-window: clamp(18rem, 55svh, 36rem);   /* 창(window) 띠 높이 — 바다가 다시 보이는 구간 */
  --spacing-max: 80rem;              /* 내용 최대 폭 1280 */
  --spacing-capsule: 22.5rem;        /* 운송장 캡슐 폭 360 */

  /* ── 반경 (이중 테 — 바깥 껍데기·안쪽 심 동심원) ── */
  --radius-pill: 999px;
  --radius-shell: 2rem;
  --radius-core: calc(2rem - 0.375rem);
  --radius-md: 1rem;
  --radius-sm: 0.625rem;

  /* ── 그림자 (진한 검정 그림자 금지 — 퍼진 바다색) ── */
  --shadow-glass: 0 1.5rem 3.75rem -1.5rem rgba(2, 8, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-lift: 0 2rem 5rem -2.5rem rgba(2, 8, 10, 0.7);
  --shadow-core: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ── 이징 (linear·ease-in-out 금지) ── */
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1);       /* 등장 — 600ms */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);     /* 누름·캡슐 펼침 — 420ms */
  --ease-tab: cubic-bezier(0.4, 0, 0.2, 1);          /* 수단 탭 교차 페이드 — 240ms */
}