/* 릴스 로컬 설계기 — 「세워 둔 폰 한 대와 초 눈금」.
   컨셉: 촬영 노출 기준인 18% 그레이카드를 지면으로 깔고, 그 위에 **정면 평면**으로 세로 폰 화면
   한 대를 세운다. 화면 오른쪽을 초 눈금이 세로로 흐르고, 각 컷 길이만큼 눈금 칸이 찬다.
   시그니처(대담함 1곳) = **이산 칸 채움** — 눈금 한 칸이 1초이고, 칸 수는 컷 길이 합이다.
     한도(총 길이) 없는 카운터를 두지 않는다. 칸이 곧 한도다.
   디스플레이 활자를 두지 않는다 — 화면 안 자막이 유일한 큰 글자이고 그건 사용자 콘텐츠다.
   원근·입체 0: perspective·rotateX/Y·translateZ·베젤 하이라이트 전부 없음(2026-09-11 재디자인 계약).
   타입 = 스케일 1.25 / base 20 (20·25·31·39) · 행간 1.55 · 웨이트 400/500/900.
   radius 문법 = **단일 radius 8px, 화면 한 곳뿐**. 그 밖의 모든 모서리는 0.
   색은 옮기지 않았다(그레이스케일 블라인드 실증: 채도 0에서 색은 변별력 0).
   설계 근거·시리즈 상호 배제 표 = docs/DESIGN.md */

:root {
  --stage: #a8a8a4;        /* 지면 60% — 노출 기준 카드의 **가운데 칸**. 흰 접시와 검은 불판 사이 어디쯤이다.
                              2026-09-11 3차: 밝은 쪽으로 옮기려 했으나 형제 예약 지면과 dE 8 미만으로 붙었다
                              (HS #bfc1c4 5.23 · UD #c4baab 6.19) → **hex 는 그대로 두고 잉크를 어둡게** 벌렸다.
                              「이유 없는 회색」이라는 지적에는 색이 아니라 **노출 기준 카드 도식**으로 답한다. */
  --stage-rail: #9fa09e;   /* 눈금 빈 칸·입력면 */
  --stage-edge: #8d8e8c;   /* 괘선 */
  --gate: #1b1e21;         /* 화면 30% — 세로 폰 화면(지면보다 어두운 틴트 면) */
  /* 면 토큰: --gate */   /* ← 고정 형식 선언(산문 아님). 형제 검사기가 「면(카드)」 키를
        이 줄에서 읽는다. 면 키를 눈금 홈(--stage-rail)으로 오인한 사고가 3라운드를 생존한
        원인이 산문 설명에 헛맞춘 것이라, 선언을 기계가 읽는 형태로 승격했다.
        선언이 없으면 검사기가 EXIT=1 (누락을 침묵시키지 않는다). */
  --gate-ink: #eff0ee;
  --gate-dim: #a8aaa8;
  --plate-lo: #1b1e21;     /* 노출 기준 카드의 「검은 불판」 칸 — **지면보다 반드시 어둡다**.
                              라이트에서는 화면 토큰(--gate)과 같은 값이라 렌더가 종전과 동일하다.
                              별도 토큰으로 뗀 이유: 다크에서 --gate 는 지면보다 **밝아야** 폰 화면이
                              보이고, 카드의 lo 칸은 지면보다 **어두워야** 「흰/가운데/검정」이 성립한다.
                              한 토큰이 두 요구를 동시에 못 지킨다(2026-09-11 독립 게이트 4차 시정). */
  --ink: #17181a;
  --ink-soft: #2b2c2a;   /* 3차: #333433 → 지각 대비 상향(지면 5.88:1 · 눈금면 5.34:1) */
  --ink-faint: #333433;  /* 3차: #4f504e 는 지면 3.40:1 로 「탁하다」의 주범이었다 → 5.24:1 */
  --on-ink: #f2f3f1;       /* 잉크 면 위의 글자 (버튼) */
  --mark: #022292;         /* 강조 10% — 차이나마커 블루 */
  --sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "D2Coding", monospace;
  --screen-r: 8px;         /* 이 제품에서 0 이 아닌 유일한 모서리 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --stage: #17181a;
    --stage-rail: #212224;
    --stage-edge: #333537;
    --gate: #262729;
    --gate-ink: #e8e9e7;
    --plate-lo: #060708;   /* 지면 #17181a 보다 확실히 어둡다 — tests/shots.mjs 가 매 실행 단조 감소를 재확인한다 */
    --gate-dim: #9a9c9a;
    --ink: #e9eae8;
    --ink-soft: #a4a6a4;
    --ink-faint: #858785;
    --on-ink: #17181a;
    --mark: #8fa8ff;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--stage); }
body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
a { color: var(--mark); }

.wrap { max-width: 34em; margin: 0 auto; padding: 0 20px 56px; }

/* ── 수치 표제 — 디스플레이 활자를 두지 않는다. 큰 것은 숫자뿐. ── */
h1 {
  margin: 32px 0 20px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-soft);
}
h1 b { font-weight: 900; color: var(--ink); font-family: var(--mono); }
/* 부제 = 정체 진술(R9). 수치 표제는 이 제품의 얼굴이라 그대로 두고, 무엇을 해 주는지는 이 한 줄이 맡는다. */
.what { margin: -12px 0 24px; font-size: 16px; color: var(--ink-soft); }

/* ── 세워 둔 폰 한 대 + 초 눈금 (정면 평면) ── */
.phone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 0 8px;
  max-width: 340px;
  margin: 0 0 32px;
}
.screen {
  position: relative;
  grid-area: 1 / 1;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  background: var(--gate);
  border-radius: var(--screen-r);
  /* 아래 여백 = 화면 높이의 25%(가림 영역). 9:16 이라 높이의 25% = 폭의 44.4% 이고, 퍼센트 패딩은
     폭 기준이므로 그대로 환산해 쓴다. 자막·촬영 지시가 그 선 아래로 내려가지 않는다. */
  /* 오른쪽은 UI 가림 영역(우측 11%)만큼 더 비운다 — 화면 안 글자가 그 선을 넘지 않는다. */
  padding: 16px calc(11% + 8px) calc(25% * 16 / 9) 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
/* 무엇을 찍는가 — 화면 맨 위. 엔진이 컷마다 매기는 촬영 지시(label)라 컷을 넘길 때마다 바뀐다. */
.take { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--gate-dim); }
.cue {
  margin: auto 0 0;            /* 자막은 하단 안전선 **위**에 앉는다 — 화면이 스스로 제 규칙을 지킨다 */
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--gate-ink);
}
/* 훅 컷 — 자막은 상단 1/3 자리로 올라가고(바로 아래가 그 안내선), 촬영 지시는 하단 안전선 위에 남는다. */
.screen.hook .cue { margin-top: 0; }
.screen.hook .shot { margin-top: auto; }
.shot { margin: 0; font-size: 16px; line-height: 1.5; color: var(--gate-dim); }
/* 컷 위치·구간은 **우리 UI 라벨**이라 가림 영역 안(맨 아래)에 둔다 — 자막 자리를 뺏지 않는다. */
.meta { position: absolute; left: 16px; bottom: 14px; margin: 0; font-family: var(--mono); font-size: 13px; color: var(--gate-dim); }
/* 세로 9:16 안전 영역 도식 — 엔진 subtitleGuide 의 수치를 선으로 옮긴 것(이미지 0 · 실시간 코드 렌더). */
.frame { position: absolute; inset: 0; pointer-events: none; }
.frame span { position: absolute; display: block; border: 0 dashed var(--ink-faint); }
.frame .g-hook { left: 0; right: 0; top: 33.33%; border-top-width: 1px; }
.frame .g-ui { top: 0; bottom: 0; right: 11%; border-right-width: 1px; }
.frame .g-safe { left: 0; right: 0; bottom: 25%; border-bottom-width: 1px; }
.frame i {
  position: absolute;
  left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--gate-dim);
}
.frame .g-hook i { top: 4px; }
.frame .g-safe i { top: 6px; left: auto; right: calc(11% + 8px); }   /* 선 아래(가림 영역 안) 오른쪽 — 자막과 겹치지 않는다 */

/* 초 눈금 — 한 칸이 1초. 칸 수 = 컷 길이 합이라 한도가 곧 눈금이다. */
.gauge {
  grid-area: 1 / 2;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cell {
  position: relative;
  background: var(--stage-rail);
  border: 0;
}
.cell.head { box-shadow: inset 0 2px 0 0 var(--ink); }
.cell.done { background: var(--ink-faint); }
.cell.now { background: var(--mark); }
.cell span {
  position: absolute;
  left: 0; top: 2px;
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}
.cell.now span, .cell.done span { color: var(--on-ink); }

/* ── 노출 기준 카드 — 지면이 왜 이 회색인지 화면이 스스로 말한다 (2026-09-11 3차) ──
   블라인드 4/6 이 「이유 없는 회색 배경」·「가릴 단서가 없다」로 라벨을 못 세웠다.
   촬영 전에 노출을 맞추는 카드는 실제 현장 물건이고, 그 가운데 칸이 이 지면이다.
   선·면만으로 그린다 — 생성 이미지·스톡 0(R5 부칙). */
.card {
  grid-area: 3 / 1 / 4 / 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 24px 0 0;
  border: 2px solid var(--stage-edge);
}
.card .patch { display: block; height: 32px; }
.card .p-hi { background: var(--gate-ink); }
.card .p-mid { background: var(--stage); }       /* ← 지면과 **같은 토큰**이다. 그래서 설명이 성립한다. */
.card .p-lo { background: var(--plate-lo); }   /* 지면보다 어두운 쪽 — 모드 불문 hi > mid > lo */
.card figcaption {
  grid-column: 1 / 4;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-top: 2px solid var(--stage-edge);
}

.next {
  grid-area: 2 / 1 / 3 / 3;
  margin: 12px 0 0;
  min-height: 48px;
  padding: 10px 24px;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--on-ink);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* ── 소재 칩 — 가로 한 줄 ── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.chip {
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--stage-rail);
  border: 2px solid var(--stage-edge);
  border-radius: 0;
  cursor: pointer;
}
/* 선택 상태를 **색 하나로만** 갈랐더니 2/6 이 「카테고리 색인지 선택인지 모르겠다」고 했다(3차 시정).
   색 위에 축을 하나 더 얹는다 — 고른 칩에는 체크가 그어진다(선 두 획 · 글리프·이미지 0). */
.chip { position: relative; }
.chip[aria-pressed="true"] { background: var(--mark); border-color: var(--mark); color: var(--on-ink); padding-left: 40px; }
.chip[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 8px; height: 14px;
  margin-top: -9px;
  border: 2px solid var(--on-ink);
  border-top: 0; border-left: 0;
  transform: rotate(40deg);
}

/* ── 컷 스트립 — 본문 컷만 끌어서 순서를 바꾼다 ── */
/* ── 컷 스트립 — **시간이 곧 자리다** (2026-09-11 3차 · 이 제품의 「사람의 선택」) ──
   2차까지 다섯 컷의 행 높이가 전부 같았다. 3초짜리와 4초짜리가 종이에서 같은 자리를 먹었고,
   판정자 3/6 이 「기계적으로 균일한 행 리듬」으로 읽었다(독립 게이트 재판정 §5-3).
   릴스는 초로 짜는 것이다. 긴 컷은 콘티에서도 칸을 더 먹어야 한다 —
   그래서 행의 키를 `--sec` 이 정하고, 왼쪽 **초 자**의 눈금 수가 곧 그 컷의 초다.
   임의 변주가 아니다: 순서를 바꾸면 retime() 이 **시작·끝 초**를 다시 매기고(길이 sec 는 컷을 따라간다)
   컷이 옮겨 간 자리에서 그 컷의 길이만큼 칸이 늘거나 준다. */
.cuts { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cut {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 0 12px 24px;
  min-height: calc(var(--sec, 3) * 34px + 16px);   /* 1초 = 34px. 3초 118px · 4초 152px · 6초 220px — 22px 로는 본문 높이에 묻혀 차이가 안 보였다(육안 1회) */
  background: transparent;     /* 면(카드)은 화면 한 곳뿐 — 목록은 지면 위 괘선 구획이다(지면 유형 = 2분할 지면) */
  border: 0;
  border-top: 2px solid var(--stage-edge);
  border-radius: 0;
}
/* 초 자 — 칸 하나가 1초. 칸 수를 세면 그 컷의 초가 나온다(위 눈금과 같은 문법, 세로 축). */
.secbar {
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: calc(var(--sec, 3) * 34px);
  background: repeating-linear-gradient(to bottom, var(--ink-soft) 0 32px, transparent 32px 34px);
}
.cut.hook { border-top-color: var(--ink); }
.cut.hook .secbar { background: repeating-linear-gradient(to bottom, var(--mark) 0 32px, transparent 32px 34px); }
.cut .no { grid-area: 1 / 1; margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
/* 제목과 설명의 크기 차를 벌린다 — 2차엔 20/16(1.25)이라 「아래로 갈수록 균질하게 뭉개진다」로 읽혔다.
   25/16 = 1.5625. 스케일 1.25(20·25·31·39) 안의 값이다. */
.cut .sub { grid-area: 2 / 1; margin: 0; font-size: 25px; font-weight: 500; line-height: 1.3; }
.cut .tip { grid-area: 3 / 1 / 4 / 3; margin: 0; font-size: 16px; color: var(--ink-soft); }
.cut .pin { grid-area: 1 / 2 / 3 / 3; margin: 0; align-self: center; font-size: 13px; color: var(--ink-faint); }
.cut .move { grid-area: 1 / 2 / 3 / 3; align-self: center; display: flex; gap: 4px; }
.cut .mv {
  font: inherit; font-size: 18px; font-weight: 500;
  min-width: 48px; min-height: 48px; padding: 10px;
  color: var(--ink); background: var(--stage); border: 2px solid var(--stage-edge); border-radius: 0; cursor: pointer;
}
.cut.dragging { opacity: .5; }
.cut.over { box-shadow: inset 0 3px 0 0 var(--mark); }

/* ── 입력 ── */
.shape { display: flex; flex-direction: column; gap: 20px; margin: 0 0 32px; }
.row { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.row legend { padding: 0; font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span { font-size: 16px; color: var(--ink-soft); }
select, input[type="text"] {
  font: inherit;
  font-size: 20px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--stage-rail);
  border: 2px solid var(--stage-edge);
  border-radius: 0;
}
input::placeholder { color: var(--ink-faint); }
.do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.go {
  font: inherit; font-size: 20px; font-weight: 500;
  min-height: 48px; padding: 10px 24px;
  color: var(--on-ink); background: var(--ink); border: 0; border-radius: 0; cursor: pointer;
}
.quiet {
  font: inherit; font-size: 18px; font-weight: 400;
  min-height: 48px; padding: 10px 16px;
  color: var(--ink); background: transparent; border: 2px solid var(--ink-faint); border-radius: 0; cursor: pointer;
}
.said:empty { display: none; }
.said { margin: 8px 0 0; font-size: 16px; color: var(--ink-soft); }

.told:empty { display: none; }
.told { display: flex; flex-direction: column; gap: 4px; }
.told p { margin: 0; padding: 10px 14px; background: var(--stage-rail); border-top: 3px solid var(--mark); font-size: 16px; }

/* ── 찍고 나서 쓸 것 ── */
.out h2 { margin: 0 0 16px; font-size: 25px; font-weight: 500; line-height: 1.3; }
.blocks { display: flex; flex-direction: column; gap: 24px; }
.block h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.block ul, .block ol { margin: 0; padding: 0 0 0 20px; }
.block li { margin: 0 0 4px; font-size: 18px; }
.block p { margin: 0 0 8px; font-size: 18px; color: var(--ink-soft); }
.block .tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.block .tags li { font-family: var(--mono); font-size: 16px; padding: 6px 10px; background: var(--stage-rail); }

/* ── 푸터 ── */
footer { margin: 56px 0 0; padding: 16px 0 0; border-top: 2px solid var(--stage-edge); }
.colophon { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-family: var(--mono); font-size: 13px; color: var(--ink-faint); }
.colophon span:empty { display: none; }
.hand { margin: 0 0 12px; font-size: 18px; color: var(--ink-soft); }
.promo { font-weight: 500; color: var(--ink); }
a.promo { color: var(--mark); }
.legal { margin: 0 0 16px; padding: 0 0 0 20px; font-size: 16px; color: var(--ink-faint); }
.legal li { margin: 0 0 4px; }
/* 자사 슬롯 = 마지막 줄 서명 한 줄. 밑줄 없음, 텍스트만. */
.sign { font-size: 16px; color: var(--ink-soft); }
.sign a.promo { text-decoration: none; }

/* ── 넓은 화면: 2분할 지면 ─────────────────────────────────────────────
   좌 = 촬영면(세워 둔 폰 한 대, 스크롤을 따라 붙어 있다) · 우 = 작업면(컷 목록·소재·입력·콘티).
   2026-09-11 2차: 1440px 에서 폰 폭 그대로 왼쪽에 몰려 오른쪽 300px 이 통째로 빈 회색이었고,
   상단 블록 우측 끝(739)과 컷 목록 우측 끝(1039)이 어긋나 **정렬축이 둘**이었다(독립 게이트 사유 3).
   지면을 세로로 가르면 축이 하나가 되고, 빈 오른쪽이 작업면이 된다. */
@media (min-width: 1000px) {
  .wrap { max-width: 46em; }
  .stage {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 32px;
  }
  h1 { grid-area: 1 / 1 / 2 / 3; }
  .what { grid-area: 2 / 1 / 3 / 3; }
  .phone { grid-area: 3 / 1 / 7 / 2; position: sticky; top: 24px; align-self: start; margin: 0; }
  .cuts { grid-area: 3 / 2 / 4 / 3; margin: 0 0 24px; }
  #materials { grid-area: 4 / 2 / 5 / 3; }
  .shape { grid-area: 5 / 2 / 6 / 3; }
  .out { grid-area: 6 / 2 / 7 / 3; }
}

/* ── 좁은 화면 ── */
@media (max-width: 480px) {
  body { font-size: 18px; }
  .wrap { padding: 0 16px 48px; }
  .phone { max-width: 100%; }
  .cue { font-size: 25px; }
  select, input[type="text"], .go { font-size: 18px; }
}

/* ── 정지 경로 (U9-a) — reduce 에서 전환·애니메이션 0, 최종 상태가 곧바로 보인다 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}