/* afterlight — 디자인 시스템 정본 (design-factory 3단계 · lens: industrial-brutalist-ui)
 *
 * 이름은 Tailwind 4 @theme 이름공간 그대로다(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*).
 * 브라우저가 읽어야 하므로 :root 에 둔다 — 승급 때 @theme 블록으로 그대로 옮긴다.
 * style.css 는 여기 있는 var() 만 쓴다. raw 색·px 숫자를 새로 만들지 않는다.
 *
 * 색의 근거: 바탕은 채도 0 의 중립 먹 — 색보정실의 벽이 작업의 색을 왜곡하지 않게 중립 회색인 것과 같은 이유다.
 * 강조는 편집기의 재생 헤드·녹화 탈리 램프의 빨강 하나뿐이고, "지금 이 순간" 에만 쓴다(DESIGN.md 원칙 2).
 */

:root {
  /* ── 색 ─────────────────────────────────────────────────────────────── */
  --color-bg: #0c0c0c;          /* 중립 먹 — 채도 0. jjaltong #121826 과 ΔE 0.063, fellrun 침엽수 계열과 ≥ 0.08 */
  --color-surface: #161616;     /* 한 단계 밝은 면 — 방 띠·EDL 짝수 행·레일 */
  --color-surface-2: #1f1f1f;   /* 두 단계 — 챕터 블록·세그먼트 버튼·트랙 ID 칸·지도 도로 */
  --color-plate: #000000;       /* 모니터 레터박스·번인 창 뒤판 — 사진·영상 위 글자는 항상 이 판 위에 */
  --color-ink: #eeeeee;         /* 본문·제목 — bg 위 16.86:1 */
  --color-ink-2: #9a9a9a;       /* 보조 글 — bg 6.95 · surface 6.43 · surface-2 5.86 */
  --color-accent: #ff3d3a;      /* 탈리 레드 — OKLCH h 26.9°(0–29° 구간). 재생 헤드·REC 점·현재 챕터·지도 점·슬라이더 선만 */
  --color-on-ink: #0c0c0c;      /* 잉크로 채운 버튼 위 글자(= bg) */

  /* ── 서체 ───────────────────────────────────────────────────────────── */
  --font-display: "Gothic A1", "Pretendard Variable", Pretendard, system-ui, sans-serif;   /* 900 만 쓴다 */
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;        /* 숫자·타임코드·EDL 전용. 한글·기호(→ ● ▶)는 이 가족에 없다 */

  --font-weight-display: 900;
  --font-weight-body: 400;
  --font-weight-strong: 600;
  --font-weight-mono: 500;

  /* 글자 크기 — 모바일 기준값. 폭별 값은 아래 미디어 쿼리가 덮는다(값의 근거는 wireframe 폭 표) */
  --text-2xs: 0.6875rem;   /* 11 — 챕터 바 번호(모바일) */
  --text-xs: 0.75rem;      /* 12 — 번인 창·트랙 ID·꼬리 */
  --text-sm: 0.875rem;     /* 14 — 보조 글·표 */
  --text-base: 1rem;       /* 16 — 본문 */
  --text-lg: 1.125rem;     /* 18 — 리드 문장 */
  --text-title: 1.25rem;   /* 20 — EDL 제목·챕터 이름·트랙 이름(Gothic A1 900) */
  --text-h3: 1.5rem;       /* 24 */
  --text-h2: 1.875rem;     /* 30 → 44 → 56 → 64 */
  --text-h1: 2.25rem;      /* 36 → 48 → 40(레일) → 46 — 홈 H1 */
  --text-page: 2.25rem;    /* 36 → 60 → 72 — 작업·파이프라인·스튜디오 H1 */
  --text-work: 2.75rem;    /* 44 → 72 → 88 — 작업 상세 제목 */
  --text-room: 4rem;       /* 64 → 80 → 96 — 방 띠 단어(VFX·색보정·편집·사운드) */
  --text-count: 3rem;      /* 48 → 60 → 72 — 카운터 숫자(Gothic A1 900) */
  --text-tc: 0.75rem;      /* 12 → 13 — 번인 타임코드 */

  --leading-tight: 1.08;   /* display 두 줄 */
  --leading-snug: 1.3;
  --leading-body: 1.65;    /* 한글 본문 */
  --tracking-display: -0.03em;  /* Gothic A1 900 한글 — 실측 0.99em/자 */
  --tracking-body: 0;

  /* ── 간격 ───────────────────────────────────────────────────────────── */
  --spacing: 0.25rem;               /* Tailwind 4 기본 단위 4px — 1·2·3·4·6·8·12·16·24 배수만 쓴다 */
  --spacing-page: 1.25rem;          /* 20 → 32(≥720) → 40(≥1024) — 페이지 좌우 */
  --spacing-rail: clamp(20rem, 25vw, 25rem);   /* 무대 레일 폭 320–400 (≥1024 에서만 붙는다) */
  --spacing-rail-pad: 1.5rem;       /* 레일 안쪽 좌우 24 */
  --spacing-gap: 1.5rem;            /* 모니터↔레일, 판↔판 사이 24 */
  --spacing-cut: 0.125rem;          /* 챕터 블록·EDL 행 사이 2px 틈 — 선이 아니라 바탕이 비쳐 보이는 틈 */
  --spacing-section: clamp(4rem, 2rem + 6vw, 8rem);   /* 블록 사이 세로 리듬(margin·gap 에만, #50) */
  --spacing-head: 3rem;             /* 머리 띠 높이 48 → 56(≥1024) */
  --spacing-hit: 2.75rem;           /* 터치 타깃 최소 44 */
  --spacing-preview: clamp(25rem, 30vw, 32rem);   /* 작업 목록 미리보기 모니터 폭(≥1200) */

  /* ── 모서리·그림자 — 브루탈리스트: 둥근 것 0, 그림자 0 ─────────────── */
  --radius-none: 0;
  --radius-grip: 0;                 /* 슬라이더 손잡이도 사각 */
  --shadow-none: none;

  /* ── 움직임 ─────────────────────────────────────────────────────────── */
  --ease-cut: steps(1, end);                   /* 하드 컷 — 프레임 교체·미리보기 교체 */
  --ease-shuttle: steps(8, end);               /* 셔틀 프리뷰 8프레임 */
  --ease-tick: steps(10, end);                 /* 카운터 — 24fps 로 10틱 */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);      /* 펼침·슬라이더 키보드 이동 */
  --ease-duration-shuttle: 560ms;              /* 8 × 70ms — 로드 연출 ≤ 600ms 규칙 */
  --ease-duration-tick: 420ms;                 /* shoot 450ms 컷 안에 끝난다 */
  --ease-duration-open: 240ms;
  --ease-duration-nudge: 120ms;
  --ease-fps: 24;                              /* 타임코드·카운터의 프레임률 */
  --ease-scrub-seg: 50svh;                     /* 스크럽 구간 하나(데스크톱). 720–1023 45svh · 폰 36svh */
}

@media (min-width: 720px) {
  :root {
    --spacing-page: 2rem;
    --text-h2: 2.75rem;
    --text-h1: 3rem;
    --text-page: 3.75rem;
    --text-work: 4.5rem;
    --text-room: 5rem;
    --text-count: 3.75rem;
    --text-tc: 0.8125rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --spacing-page: 2.5rem;
    --spacing-head: 3.5rem;
    --text-h2: 3.5rem;
    --text-h1: 2.5rem;      /* 레일 안 272px — 6.51em × 40 = 260 */
    --text-page: 4.5rem;
    --text-work: 5.5rem;
    --text-room: 6rem;
    --text-count: 4.5rem;
    --text-title: 1.375rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --text-h2: 4rem;
    --text-h1: 2.875rem;    /* 레일 안 312px — 6.51em × 46 = 299.5 */
  }
}

@media (max-width: 1023px) {
  :root {
    --ease-scrub-seg: 45svh;
  }
}

/* 4단계: 폰은 구간을 36svh 로 줄였다 — 45svh(844 에서 380px × 9)는 엄지로 넘기기에 길었다. 트랙 505 → 424svh (NOTES) */
@media (max-width: 719px) {
  :root {
    --ease-scrub-seg: 36svh;
  }
}