/* The Last Tide — 디자인 토큰 (정본)
 * 방향 A "Waterline": 젖은 프레스북. 중간 톤 sea-glass 바탕, 가는 세리프, 느린 모션.
 * 이름은 Tailwind 4 @theme 이름공간이다 — 승급 때 이 블록을 globals.css 의 @theme { } 안으로 그대로 옮긴다.
 * 여기서는 브라우저가 읽어야 하므로 :root 에 둔다(@theme 은 Tailwind 없이는 무시된다).
 * 대비 실측은 _design/DESIGN.md 대비표 — `node build.mjs --contrast last-tide`.
 */
:root {
  /* ── 색 ──────────────────────────────────────────────────────────────
   * 바탕 셋(bg · surface · band) + 먹 넷(ink · salt · salt-dim · accent).
   * sea 바탕 위 글자는 ink 하나뿐이다 — 회색 글자로 위계를 만들지 않는다(대비 여유가 없다). 위계는 크기·서체·이탤릭으로.
   * salt · salt-dim · accent 는 band(deep water) 위에서만 글자로 쓴다. */
  --color-bg: #7f918a; /* sea glass — 페이지 바탕 (mid) */
  --color-surface: #9eada6; /* shoal — 이중 베젤 바깥 틀 · 선택 안 된 탭 호버 */
  --color-band: #26312e; /* deep water — 스틸 자리표시자 · 어두운 띠 · 메뉴 덮개 */
  --color-band-abyss: #161e1c; /* abyss — 꼬리(빌링 블록) */
  --color-ink: #0f1715; /* kelp ink — sea · shoal 위 모든 글자 · 내비 pill 바탕 · 포커스 링(밝은 쪽) */
  --color-salt: #eef1ea; /* salt — band · 물 아래 띠 위 글자 · 내비 pill 글자 */
  --color-salt-dim: #b7c2bc; /* salt, dimmed — band 위 보조 글자 · 자리표시자 라벨 */
  --color-accent: #eed98e; /* harbor lamp — 물때선 · 개봉일 · 주 CTA 바탕 · 포커스 링(어두운 쪽). sea 위 글자로 쓰지 않는다 */
  --color-line: #56655f; /* sea 위 가는 선 (장식, 비텍스트) */
  --color-line-salt: #3d4a46; /* band 위 가는 선 · 자리표시자 수평 줄무늬 */
  --color-submerge: rgb(22 30 28 / 0.72); /* 물때선 아래 사진을 덮는 물 — 흰 사진 위에서도 salt 가 6:1 이상 */

  /* ── 서체 ── 서가: /_shared/fonts/instrument-serif/font.css · /_shared/fonts/manrope/font.css */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* 400 · 400 italic 만 있다 */
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; /* 200–800 가변 */

  /* ── 글자 크기 (유동) ── 1440 · 390 에서의 값은 DESIGN.md 표 */
  --text-display: clamp(4rem, 2.2rem + 7.6vw, 9rem); /* 히어로 제목 — 화면에 하나 */
  --text-display--line-height: 0.88;
  --text-display--letter-spacing: -0.02em;
  --text-title: clamp(3rem, 1.9rem + 4.6vw, 7rem); /* 페이지 h1 · 개봉일 · 큰 인용 */
  --text-title--line-height: 0.94;
  --text-title--letter-spacing: -0.015em;
  --text-heading: clamp(2rem, 1.45rem + 2.3vw, 3.5rem); /* 절 제목 · 시놉시스 첫 문장 · 주연 이름 */
  --text-heading--line-height: 1.04;
  --text-heading--letter-spacing: -0.01em;
  --text-lede: clamp(1.3125rem, 1.05rem + 1.1vw, 2.125rem); /* 로그라인 · 감독의 말 (Instrument 이탤릭) */
  --text-lede--line-height: 1.4;
  --text-subtitle: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); /* 스틸 위 자막 (Manrope 500) */
  --text-subtitle--line-height: 1.35;
  --text-body: 1.0625rem; /* 17px 본문 */
  --text-body--line-height: 1.65;
  --text-small: 0.875rem; /* 주소 · 캡션 · 고지 */
  --text-small--line-height: 1.55;
  --text-label: 0.75rem; /* 씬 헤딩 · 라벨 · 탭 — 대문자, 12px 아래로 내리지 않는다 */
  --text-label--line-height: 1.3;
  --text-label--letter-spacing: 0.16em;
  --text-billing: 0.8125rem; /* 빌링 블록 — 대문자, 좁은 자간 */
  --text-billing--line-height: 1.6;
  --text-billing--letter-spacing: 0.02em;

  --tracking-label: 0.16em;
  --tracking-billing: 0.02em;
  --leading-prose: 1.65;
  --container-prose: 38rem; /* 본문 최대 폭 ≈ 62ch */

  /* ── 간격 ── 4px 바탕 척도 + 이름 붙은 리듬 */
  --spacing: 0.25rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-page: clamp(1.25rem, 0.5rem + 3.9vw, 4rem); /* 바깥 여백 — 390 에서 ≈23px, 1440 에서 64px */
  --spacing-gutter: clamp(1rem, 0.7rem + 1.2vw, 1.5rem); /* 열 사이 */
  --spacing-section: clamp(6rem, 3.6rem + 9.8vw, 11rem); /* 절 사이 — 렌즈의 py-24~py-40 */
  --spacing-tide-step: clamp(1.5rem, 0.9rem + 2.5vw, 3rem); /* 출연 초상이 한 장씩 내려앉는 단 */
  --spacing-nav-top: 1.25rem; /* 떠 있는 내비가 위에서 떨어진 거리 */
  --spacing-tap: 2.75rem; /* 44px — 터치 타깃 최소 */

  /* ── 반지름 ── 스틸 자체는 0(극장 화면은 각이 있다). 둥근 것은 틀과 버튼뿐 */
  --radius-none: 0;
  --radius-frame: 1.5rem; /* 이중 베젤 바깥 */
  --radius-frame-inner: 1rem; /* 안쪽 = 바깥 − 틀 두께(0.5rem) — 동심 */
  --radius-pill: 999px; /* 내비 · 버튼 · 탭 · 포맷 표지 */

  /* ── 그림자 ── 검정 그림자 금지. deep water 색으로 넓고 옅게 */
  --shadow-float: 0 1.5rem 3.75rem -1.5rem rgb(15 23 21 / 0.38); /* 떠 있는 내비 pill · 토스트 */
  --shadow-frame: 0 2rem 4rem -2.5rem rgb(15 23 21 / 0.45); /* 이중 베젤 바깥 틀 */
  --shadow-inset: inset 0 1px 0 rgb(238 241 234 / 0.14); /* 틀 안쪽 윗선 하이라이트 */

  /* ── 이징 ── linear · ease-in-out 쓰지 않는다 */
  --ease-tide: cubic-bezier(0.32, 0.72, 0, 1); /* 느린 무게 — 등장 · 물때선 · 메뉴 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 반응 — 버튼 · 토스트 · 탭 */
}

/* 컴포넌트 변수 — @theme 이름공간 밖(승급 때 :root 로 남긴다) */
:root {
  --duration-fast: 160ms; /* 누름 · 호버 */
  --duration-quick: 320ms; /* 토스트 · 탭 교차 페이드 */
  --duration-base: 900ms; /* 스크롤 등장 */
  --duration-slow: 1200ms; /* 스틸 Reveal */
  --stagger: 90ms;
  /* 메뉴 판 — 열기 480ms(마지막 줄까지 600ms 이하) · 닫기 360ms */
  --duration-menu: 480ms;
  --duration-menu-out: 360ms;
  --duration-menu-item: 300ms;
  --duration-menu-lead: 60ms;
  --stagger-menu: 45ms;
  --waterline: 72%; /* 스틸 물때선 높이(위에서부터) — 이 아래에만 글자가 사진에 닿는다 */
  --waterline-hero-mobile: 58%; /* 모바일 히어로(4:5 크롭)만 — 물 아래 띠를 넓혀 제목 두 줄 + 개봉일을 담는다 */
  --waterline-portrait: 80%;
  --waterline-rise: 6%; /* 스크롤 밀물 — 72% → 66% */
  --waterline-width: 1px;
  --grain-opacity: 0.05; /* 고정 필름 그레인 덮개 (pointer-events: none) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --stagger: 0ms;
    --waterline-rise: 0%;
    --duration-menu: 0ms;
    --duration-menu-out: 0ms;
    --stagger-menu: 0ms;
  }
}