/* KSH AIVidioStation — 작품 검토 GUI (태스크 #7)
   밝은 노션풍. 웜그레이 중성색 + 단일 액센트. 목업(webui/mockup)에서 확정한 토큰을 그대로 잇는다.
   외부 CDN·원격 요청 없음 — 폰트는 로컬 번들(fonts/, OFL 1.1). */

@font-face {
  font-family: 'Pretendard';
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --canvas: #ffffff;
  --surface: #f8f7f5;
  --surface-2: #f2f0ec;
  --surface-3: #ebe8e3;
  --hairline: #e9e6e1;
  --hairline-strong: #dcd8d1;

  --ink-strong: #1f1e1b;
  --ink: #37352f;
  --muted: #6f6a62;
  --faint: #9c968c;

  --accent: #0075de;
  --accent-ink: #0a5cab;
  --accent-soft: #e8f1fc;

  --ok-bg: #dff3e6;      --ok-fg: #21663f;
  --stale-bg: #ece2f8;   --stale-fg: #6a3ea0;
  --pend-bg: #ffeeda;    --pend-fg: #96580f;
  --err-bg: #fde3e1;     --err-fg: #a5382f;
  --open-bg: #f0eeea;    --open-fg: #6f6a62;
  --gold: #b8860b;       --gold-bg: #fdf3dc;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --shadow-1: 0 1px 2px rgba(15,15,15,.05);
  --shadow-2: 0 1px 2px rgba(15,15,15,.05), 0 6px 16px rgba(15,15,15,.07);
  --shadow-3: 0 12px 40px rgba(15,15,15,.14);

  --sidebar-w: 268px;
  --read-w: 780px;
  --blk-pad: 14px;
  --blk-text: 16.5px;
}
:root.dense { --read-w: 1040px; --blk-pad: 8px; --blk-text: 15px; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--canvas); color: var(--ink);
  font-family: 'Pretendard', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: 'SFMono-Regular', Consolas, 'D2Coding', monospace;
        font-size: .86em; letter-spacing: -.01em; }
.hidden { display: none !important; }
.spacer { flex: 1; }
#app { height: 100%; display: flex; flex-direction: column; }
#app.booting { align-items: center; justify-content: center; color: var(--faint); }

/* ───────────────────────── 공통 요소 ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 5px 11px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s;
  box-shadow: var(--shadow-1); white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn.sm { padding: 3px 8px; font-size: 12.5px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.danger { color: var(--err-fg); border-color: #eec3bf; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 5px; padding: 1px 7px;
  font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap;
  background: var(--open-bg); color: var(--open-fg);
}
.badge.fixed { background: var(--ok-bg); color: var(--ok-fg); }
.badge.stale { background: var(--stale-bg); color: var(--stale-fg); }
.badge.pending { background: var(--pend-bg); color: var(--pend-fg); }
.badge.err { background: var(--err-bg); color: var(--err-fg); }
.badge.warn { background: var(--pend-bg); color: var(--pend-fg); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge.plain { background: transparent; color: var(--faint); font-weight: 500; padding-left: 0; }
.badge.gold { background: var(--gold-bg); color: #7a5a06; }

/* 코드 병기 — 라벨은 한글, 원래 코드는 작게 옆에 (피드백 3호) */
.code-note { color: var(--faint); font-size: 11.5px; font-weight: 500;
             font-family: 'SFMono-Regular', Consolas, monospace; }

.t { border-radius: 5px; padding: 0 7px; font-size: 12px; font-weight: 700;
     line-height: 1.75; display: inline-block; white-space: nowrap; }
.t-N    { background: #e7eefb; color: #2b5d9f; }
.t-D    { background: #fbe7e4; color: #a5453b; }
.t-INV  { background: #ddf1f0; color: #1e6d6a; }
.t-QC   { background: #fdf1d6; color: #8a6420; }
.t-CB   { background: #e3f2e3; color: #2e6b39; }
.t-E    { background: #eeecea; color: #5f5a53; }
.t-MUTE { background: #f2f1ef; color: #86817a; }
.t-BREAK{ background: #f2f1ef; color: #86817a; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.dot.story { background: #4a8fd4; } .dot.lecture { background: #9b72c9; }

/* ───────────────────────── 상단 바 ───────────────────────── */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 18px;
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs .home { color: var(--muted); font-weight: 500; cursor: pointer; }
.crumbs .home:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }
.crumbs .work { font-weight: 700; font-size: 15.5px; color: var(--ink-strong); }
.crumbs .sub { color: var(--faint); font-size: 13px; }
.topbar .tools { display: flex; align-items: center; gap: 8px; }

.tabs { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--r-md); }
.tabs a { padding: 4px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
          color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--canvas); color: var(--ink-strong); box-shadow: var(--shadow-1); }

/* 편집 모드 바 */
.editbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: #fffaf0; border-bottom: 1px solid #f0e0bb;
  padding: 8px 18px; font-size: 13.5px; color: #7d5a12;
}

/* ───────────────────────── 레이아웃 ───────────────────────── */
.shell { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 auto; background: var(--surface);
  border-right: 1px solid var(--hairline); display: flex; flex-direction: column; min-height: 0;
}
.sidebar .head { padding: 12px 12px 8px; flex: 0 0 auto; }
.search { width: 100%; background: var(--canvas); border: 1px solid var(--hairline-strong);
          border-radius: var(--r-sm); padding: 5px 10px; font-size: 13.5px; box-shadow: var(--shadow-1); }
.search::placeholder { color: var(--faint); }
.filters { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.filters button { border: 1px solid transparent; background: transparent; border-radius: 20px;
                  padding: 1px 9px; font-size: 12px; color: var(--muted); cursor: pointer; }
.filters button:hover { background: var(--surface-2); }
.filters button.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.tree { flex: 1; overflow-y: auto; padding: 4px 8px 32px; }
.tree .grp { font-size: 11.5px; font-weight: 700; color: var(--faint);
             letter-spacing: .06em; padding: 12px 8px 4px; }
.ch-row, .sc-row { display: flex; align-items: center; gap: 7px; border-radius: var(--r-sm);
                   padding: 4px 8px; cursor: pointer; color: var(--ink); }
.ch-row { font-weight: 600; font-size: 13.5px; }
.sc-row { padding-left: 22px; font-size: 13px; color: var(--muted); }
.ch-row:hover, .sc-row:hover { background: var(--surface-2); }
.ch-row.on, .sc-row.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.ch-row .no { color: var(--faint); font-weight: 500; min-width: 15px; font-variant-numeric: tabular-nums; }
.ch-row .label, .sc-row .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-row .cnt, .ch-row .cnt { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.main { flex: 1; overflow-y: auto; min-width: 0; }
.pad { padding: 28px 40px 140px; }
.reader { max-width: var(--read-w); margin: 0 auto; }

.tree::-webkit-scrollbar, .main::-webkit-scrollbar, .inspector::-webkit-scrollbar { width: 10px; }
.tree::-webkit-scrollbar-thumb, .inspector::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: 6px; border: 3px solid var(--surface); }
.main::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px;
  border: 3px solid var(--canvas); }

/* ───────────────────────── 홈 ───────────────────────── */
.home-wrap { max-width: 1080px; margin: 0 auto; padding: 56px 40px 100px; }
.home-title { font-size: 34px; font-weight: 700; letter-spacing: -.02em;
              color: var(--ink-strong); margin: 0 0 6px; }
.home-sub { color: var(--muted); margin: 0 0 6px; }
.home-root { color: var(--faint); font-size: 13px; }
.home-bar { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; }
.home-bar .label { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .06em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 16px; }
.pcard { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
         padding: 18px 18px 16px; box-shadow: var(--shadow-1); cursor: pointer;
         transition: box-shadow .15s, border-color .15s, transform .15s; }
.pcard:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-strong); transform: translateY(-1px); }
.pcard .name { font-size: 19px; font-weight: 700; color: var(--ink-strong); letter-spacing: -.01em; }
.pcard .byline { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.pcard .stats { display: flex; gap: 14px; margin: 16px 0 12px; }
.pcard .stat .v { font-size: 19px; font-weight: 700; color: var(--ink-strong);
                  font-variant-numeric: tabular-nums; line-height: 1.2; }
.pcard .stat .k { font-size: 11.5px; color: var(--faint); }
.bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar i.fixed { background: #57a97a; } .bar i.stale { background: #a982d6; }
/* 진행률 바 아래 한 줄 — 왼쪽 설명 / 오른쪽 숫자. 카드 밖(대시보드 상단)에서도
   같은 규칙을 써야 두 글자가 붙어 버리지 않는다(실측: "컨펌만 3작품을 만드는…"). */
.barline, .pcard .barline {
                  display: flex; align-items: center; justify-content: space-between;
                  gap: 12px; font-size: 12px; color: var(--muted); margin-top: 7px; }
.pcard .foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.pcard .path { color: var(--faint); font-size: 11.5px; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.pcard.add { border-style: dashed; border-color: var(--hairline-strong); box-shadow: none;
             display: flex; flex-direction: column; align-items: center; justify-content: center;
             text-align: center; color: var(--faint); min-height: 208px; gap: 6px; cursor: default; }
.pcard.add:hover { background: var(--surface); transform: none; box-shadow: none; }
.pcard.add .plus { font-size: 26px; color: var(--hairline-strong); line-height: 1; }
.pcard.bad { border-color: #eec3bf; background: #fffaf9; }

/* ───────────────────────── 대본뷰 ───────────────────────── */
.ch-head { margin: 46px 0 18px; }
.ch-head:first-child { margin-top: 4px; }
.ch-head .eyebrow { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .07em; }
.ch-head h2 { font-size: 25px; font-weight: 700; letter-spacing: -.02em;
              color: var(--ink-strong); margin: 4px 0 8px; line-height: 1.35; }
.ch-head .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 color: var(--muted); font-size: 13px; }

/* 씬 구분선 = 장면 전환 + **씬 컨펌의 자리**. 채움선(.rule)을 제목과 게이트 사이에
   두어, 왼쪽은 읽는 정보(씬 이름) 오른쪽은 행동(픽 대기·컨펌)으로 갈린다. */
.scene-mark { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px;
              color: var(--faint); font-size: 12.5px; }
.scene-mark .rule { flex: 1; height: 1px; background: var(--hairline); }
.scene-mark .slug { font-weight: 600; color: var(--muted); cursor: pointer; }
.scene-mark:hover .slug { color: var(--accent-ink); }
/* 컨펌 버튼은 접히지 않지만 조용히 있는다 — 씬 위에 올리거나 컨펌 전이면 또렷해진다 */
.scene-mark .btn { opacity: .55; transition: opacity .12s; }
.scene-mark:hover .btn, .scene-mark .btn.primary { opacity: 1; }

/* 씬 일괄 컨펌 띠 — 대상 건수와 제외 사유를 누르기 전에 보여 준다 */
.confirm-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--hairline);
               border-radius: var(--r-sm); background: var(--surface); font-size: 12.5px; }
.confirm-bar .cb-title { font-weight: 700; color: var(--ink-strong); }
.confirm-bar .cb-count { font-variant-numeric: tabular-nums; font-weight: 600;
                         color: var(--accent-ink); }
.confirm-bar .cb-note { color: var(--faint); }

/* 블록 — 피드백 1호: 블록 사이 경계를 선으로 확실히 긋는다.
   여백만으로 구분하면 긴 나레이션이 이어질 때 어디서 끊기는지 안 보인다. */
.blocks { border-top: 1px solid var(--hairline); }
.blk { padding: var(--blk-pad) 14px; margin: 0 -14px;
       border-bottom: 1px solid var(--hairline); transition: background .12s; }
.blk:hover { background: var(--surface); }
.blk.sel { background: var(--accent-soft); }
.blk.type-D { background: linear-gradient(90deg, rgba(251,231,228,.35), transparent 42%); }
.blk.type-D:hover { background: linear-gradient(90deg, rgba(251,231,228,.55), var(--surface) 42%); }
.blk-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.blk-head .id { color: var(--faint); font-weight: 500; }
.blk-head .speaker { font-weight: 700; color: var(--ink-strong); font-size: 14px; }
.blk-head .tools { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.blk:hover .blk-head .tools, .blk.sel .blk-head .tools { opacity: 1; }
.blk-text { font-size: var(--blk-text); line-height: 1.85; color: var(--ink); white-space: pre-wrap;
            word-break: keep-all; }
.blk.type-D .blk-text { color: var(--ink-strong); }
.blk-text mark { background: var(--gold-bg); color: #7a5a06; padding: 0 2px; border-radius: 3px;
                 box-shadow: inset 0 -2px 0 rgba(184,134,11,.35); }

/* 읽는 화면 — 상세정보 OFF. 제작 메타를 걷어낸 만큼 본문 호흡을 넓힌다.
   블록 경계선은 그대로 둔다 (피드백 1호에서 확정한 것). */
.reader.plain .blk { padding-top: calc(var(--blk-pad) + 3px);
                     padding-bottom: calc(var(--blk-pad) + 3px); }
.reader.plain .blk-head { margin-bottom: 2px; }

.aux { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.aux-row { display: flex; gap: 8px; font-size: 13px; color: var(--muted); align-items: baseline; }
.aux-row .k { flex: 0 0 auto; color: var(--faint); font-size: 12px; font-weight: 600; min-width: 62px; }
.aux-row .v { flex: 1; min-width: 0; }

details.fold { margin-top: 8px; }
details.fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 6px; font-size: 12.5px; color: var(--muted); background: var(--surface-2);
  border-radius: 20px; padding: 2px 10px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: var(--surface-3); }
details.fold .body { margin-top: 8px; padding: 10px 12px; background: var(--surface);
                     border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: 14px; }
details.fold .body .lab { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .05em; }

.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
           margin: 10px 0; border: 1px solid var(--hairline); background: var(--surface); }
.callout .ic { flex: 0 0 auto; font-size: 15px; line-height: 1.6; }
.callout .body { flex: 1; min-width: 0; }
.callout .t-line { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 4px;
                   color: var(--muted); }
.callout .q { font-size: var(--blk-text); line-height: 1.85; word-break: keep-all; }
.callout.quote { background: var(--gold-bg); border-color: #f0dfae; }
.callout.quote .t-line { color: #8a6420; } .callout.quote .q { color: #4a3a10; }
.callout.inv { background: #eefaf9; border-color: #cfe9e7; }
.callout.inv .t-line { color: #1e6d6a; } .callout.inv .q { color: #23413f; }
.callout.pend { background: var(--pend-bg); border-color: #f6ddb9; }
.callout.pend .t-line { color: var(--pend-fg); }
.callout.warn { background: var(--err-bg); border-color: #f6ccc8; }
.callout.warn .t-line { color: var(--err-fg); }
.callout.board { background: #f2f8f2; border-color: #d3e7d5; }
.callout.board .t-line { color: #2e6b39; }
.callout.board ul { margin: 4px 0 0; padding-left: 18px; }
.callout.board li { margin: 2px 0; }

.break-mark { display: flex; align-items: center; gap: 10px; color: var(--faint);
              font-size: 12.5px; margin: 22px 0; }
.break-mark::before, .break-mark::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* 편집 필드 */
textarea.edit {
  width: 100%; display: block; background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 9px 11px; resize: none; overflow: hidden;
  font-size: var(--blk-text); line-height: 1.85; box-shadow: inset 0 1px 2px rgba(15,15,15,.03);
}
textarea.edit.small { font-size: 14px; line-height: 1.7; }
textarea.edit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.edit.dirty { border-color: var(--gold); background: #fffdf6; }
.edit-wrap { position: relative; }
.edit-wrap .lock { font-size: 11.5px; color: var(--faint); margin-top: 3px; }

/* ───────────────────────── 컷시트뷰 ───────────────────────── */
.sheet-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
                 padding-bottom: 14px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.seg { display: flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; }
.seg button { border: 0; background: transparent; border-radius: 5px; padding: 3px 12px;
              font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--canvas); color: var(--ink-strong); box-shadow: var(--shadow-1); }

.scene-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas);
              box-shadow: var(--shadow-1); margin-bottom: 22px; overflow: hidden; }
.scene-card > header { padding: 16px 20px 14px; border-bottom: 1px solid var(--hairline); }
.scene-card .slug-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.scene-card .slug { font-size: 17px; font-weight: 700; color: var(--ink-strong); letter-spacing: -.01em; }
.scene-card .summary { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.scene-card .actions { margin-left: auto; display: flex; gap: 6px; }
.world { display: grid; grid-template-columns: 74px 1fr; gap: 4px 12px; margin-top: 13px; font-size: 13px; }
.world dt { color: var(--faint); font-size: 12px; font-weight: 600; }
.world dd { margin: 0; color: var(--ink); }
.world .look { color: var(--muted); }

/* 인물 칩 (피드백 4호) — 누르면 외형·등장 지점이 펼쳐진다 */
.cast-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cast-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2);
             border: 1px solid transparent; border-radius: 20px; padding: 2px 10px;
             font-size: 12.5px; cursor: pointer; }
.cast-chip:hover { border-color: var(--hairline-strong); background: var(--surface-3); }
.cast-chip.on { background: var(--accent-soft); border-color: #bfdcf7; color: var(--accent-ink); font-weight: 600; }
.cast-chip .n { font-weight: 600; }
.cast-chip .c { color: var(--faint); font-size: 11.5px; font-weight: 500; }
.cast-panel { margin-top: 12px; border: 1px solid var(--hairline); border-radius: var(--r-md);
              background: var(--surface); padding: 12px 14px; }
.cast-panel .look { font-size: 13.5px; color: var(--ink); line-height: 1.65; }
.cast-panel .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cast-panel .where { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.cast-panel .where b { color: var(--ink); font-weight: 600; }
.cast-panel .jump { color: var(--accent-ink); cursor: pointer; }
.cast-panel .jump:hover { text-decoration: underline; }

table.shots { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.shots th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--faint);
  letter-spacing: .05em; padding: 9px 10px; border-bottom: 1px solid var(--hairline);
  background: var(--surface); white-space: nowrap; }
table.shots td { padding: 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.shots tr:last-child td { border-bottom: 0; }
table.shots tbody tr { cursor: pointer; }
table.shots tbody tr:hover { background: var(--surface); }
table.shots tbody tr.sel { background: var(--accent-soft); }
table.shots .c-id { white-space: nowrap; font-weight: 600; color: var(--accent-ink); }
table.shots .c-vocab { color: var(--muted); }
table.shots .c-sub { color: var(--ink); line-height: 1.6; }
table.shots .c-act { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
table.shots .num { color: var(--faint); font-variant-numeric: tabular-nums; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
           gap: 14px; padding: 16px 20px 20px; }
.gcard { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--canvas);
         overflow: hidden; cursor: pointer; box-shadow: var(--shadow-1); }
.gcard:hover { box-shadow: var(--shadow-2); }
.gcard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.thumb { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg,#f4f2ef 0 8px,#efece8 8px 16px);
         display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px;
         color: var(--faint); font-size: 12px; border-bottom: 1px solid var(--hairline);
         overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .fn { font-size: 11px; color: #b3ada3; }
.gcard .g-body { padding: 10px 12px 12px; }
.gcard .g-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.gcard .g-sub { font-size: 13px; line-height: 1.55; color: var(--ink);
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.section-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700;
                 color: var(--faint); letter-spacing: .07em; margin: 34px 0 12px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* 우측 인스펙터 */
.inspector { width: 340px; flex: 0 0 auto; background: var(--surface);
             border-left: 1px solid var(--hairline); overflow-y: auto; padding: 16px 16px 60px; }
.ins-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ins-sec { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .06em;
           margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
.prompt { background: var(--canvas); border: 1px solid var(--hairline);
          border-radius: var(--r-md); padding: 4px 12px; }
.p-row { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 7px 0;
         border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.p-row:last-child { border-bottom: 0; }
.p-k { color: var(--faint); font-weight: 600; }
.p-v { color: var(--ink); line-height: 1.6; word-break: break-word; }

/* ───────────────────────── 공용 폭·메타줄 ───────────────────────── */
.video-wrap { max-width: 1180px; margin: 0 auto; }
.vmeta { display: flex; align-items: center; gap: 10px; margin: 14px 0 22px; flex-wrap: wrap; }
.vmeta .fname { color: var(--muted); font-size: 13px; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
              gap: 12px; margin-top: 18px; }
.acard { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 13px 14px;
         background: var(--canvas); box-shadow: var(--shadow-1); }
.acard .k { font-size: 12px; color: var(--faint); font-weight: 600; }
.acard .v { font-size: 21px; font-weight: 700; color: var(--ink-strong);
            font-variant-numeric: tabular-nums; margin: 3px 0 6px; }
.acard .v small { font-size: 13px; color: var(--faint); font-weight: 500; }
.acard .bar { height: 5px; }

/* ───────────────────────── 상태바 · 모달 · 토스트 ───────────────────────── */
.statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 32px;
             padding: 0 16px; background: var(--surface); border-top: 1px solid var(--hairline);
             font-size: 12.5px; color: var(--muted); }
.statusbar .sep { color: var(--hairline-strong); }
.statusbar .clickable { cursor: pointer; }
.statusbar .clickable:hover { color: var(--ink); text-decoration: underline; }

.scrim { position: fixed; inset: 0; background: rgba(31,30,27,.42); display: flex;
         align-items: center; justify-content: center; z-index: 40; padding: 24px; }
.modal { background: var(--canvas); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
         width: min(880px, 100%); max-height: 84vh; display: flex; flex-direction: column; }
.modal > header { display: flex; align-items: center; gap: 10px; padding: 16px 20px 14px;
                  border-bottom: 1px solid var(--hairline); }
.modal h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-strong); }
.modal .mbody { padding: 16px 20px; overflow: auto; }
.modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px;
                  border-top: 1px solid var(--hairline); align-items: center; }
pre.diff { margin: 0; font-family: 'SFMono-Regular', Consolas, 'D2Coding', monospace;
           font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
           background: var(--surface); border: 1px solid var(--hairline);
           border-radius: var(--r-md); padding: 12px 14px; }
pre.diff .h { color: var(--accent-ink); }
pre.diff .a { color: #1e6b3f; background: #e6f5ec; display: block; }
pre.diff .r { color: #a5382f; background: #fceceb; display: block; }
pre.diff .c { color: var(--faint); }

.lint-list { display: flex; flex-direction: column; gap: 8px; }
.lint-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px;
             border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.lint-item .where { color: var(--accent-ink); font-weight: 600; cursor: pointer; white-space: nowrap; }
.lint-item .msg { flex: 1; font-size: 13.5px; }

#toast { position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%);
         display: flex; flex-direction: column; gap: 6px; z-index: 50; align-items: center; }
.toast { background: var(--ink-strong); color: #fff; border-radius: var(--r-md);
         padding: 8px 16px; font-size: 13.5px; box-shadow: var(--shadow-3); }
.toast.ok { background: #21663f; } .toast.bad { background: #a5382f; }

/* ───────────────────────── 제작 단계 ───────────────────────── */
/* 단계 화면 위의 안내 띠 — "지금 무엇을 하는 자리인가"를 항상 보이게 */
.stagebar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.sb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-no {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.sb-name { font-size: 15px; font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
.sb-what { font-size: 12.5px; color: var(--muted); }
.sb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 대시보드 카드 안에서도 머리 줄을 쓴다 */
.pcard .slug-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pcard .slug-row .name { font-size: 18px; }

/* 후보 고르기 = 캐스팅보드 (2 배우 캐스팅 · 3 무대 제작)
   한 대상의 후보를 **나란히** 놓고 눈으로 비교하는 것이 이 화면의 전부다.
   그래서 칸을 크게 잡고(최소 190px) 썸네일을 원본 비율로 보여 준다 —
   얼굴을 잘라 보여 주면 고를 수가 없다. */
.board-body { padding: 14px 20px 18px; }
.cand-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cand { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden;
        cursor: pointer; background: var(--canvas); transition: box-shadow .12s, border-color .12s; }
.cand:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-strong); }
.cand.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cand .thumb { aspect-ratio: 1/1; background: var(--surface-3); display: flex;
               align-items: center; justify-content: center; overflow: hidden; }
.cand .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cand .thumb audio { width: 94%; }
.cand-cap { padding: 6px 9px 8px; font-size: 12.5px; color: var(--muted);
            display: flex; align-items: center; justify-content: center; gap: 6px; }
.cand.on .cand-cap { color: var(--accent-ink); font-weight: 600; }
/* 확정된 캐릭터시트·설정화 — 후보와 같은 자리에 같은 몸짓(눌러서 확대)으로 놓되,
   후보가 아니라 결과물이라는 것이 한눈에 보여야 한다. */
.cand.sheet { border-color: var(--ok-fg); box-shadow: 0 0 0 3px var(--ok-bg); }
.cand.sheet .cand-cap { color: var(--ok-fg); font-weight: 600; }

/* 후보가 아직 없을 때의 빈 슬롯 — 지어낸 후보처럼 보이면 안 되므로 점선·회색 */
.cand-ph { width: 100%; height: 100%; display: flex; align-items: center;
           justify-content: center; font-size: 26px; color: var(--muted);
           border: 1px dashed var(--hairline-strong); border-radius: var(--r-sm);
           background: repeating-linear-gradient(45deg, transparent, transparent 7px,
                       var(--surface-3) 7px, var(--surface-3) 14px); }
.cand-empty { border: 1px dashed var(--hairline-strong); border-radius: var(--r-md);
              background: var(--surface); padding: 16px 18px; }
.cand-empty .t-line { font-weight: 700; color: var(--ink-strong); margin-bottom: 3px; }
.cand-empty .vmeta { margin-top: 10px; }

/* 확대 보기 — 후보를 실제 크기로 확인하고 그 자리에서 확정한다 */
.lightbox { display: flex; flex-direction: column; gap: 10px; }
.lb-stage { background: var(--surface-3); border-radius: var(--r-md);
            min-height: 320px; max-height: 62vh; display: flex;
            align-items: center; justify-content: center; overflow: hidden; }
.lb-stage img { max-width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.lb-cap { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }

/* ═══════════════════════ 6 촬영 — 스토리보드 + 생성 콘솔 ═══════════════════════ */
.shoot-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             padding: 10px 0 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 18px; }
.today { display: flex; align-items: center; gap: 8px; background: var(--surface);
         border: 1px solid var(--hairline); border-radius: 20px; padding: 3px 12px; font-size: 12.5px; }
.today b { color: var(--ink-strong); }

.scene-strip { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; flex-wrap: wrap; }
.scene-strip .no { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
                   color: var(--accent-ink); display: flex; align-items: center;
                   justify-content: center; font-size: 12.5px; font-weight: 700; flex: 0 0 auto; }
.scene-strip .slug { font-size: 16px; font-weight: 700; color: var(--ink-strong); }
.scene-strip .sum { color: var(--muted); font-size: 13px; }

.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.shotcard { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas);
            box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column;
            transition: box-shadow .15s, border-color .15s; }
.shotcard:hover { box-shadow: var(--shadow-2); }
.shotcard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shotcard.done { border-color: #cfe4d6; }
.shotcard.retake { border-color: #f0c9c4; }

/* 프레임 = 카드의 주인공 */
.frame { position: relative; aspect-ratio: 16/9; background: #23211d; overflow: hidden;
         display: flex; align-items: flex-end; justify-content: center; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 생성 전: 구도 어휘를 그림으로 — 사이즈=피사체 크기, 앵글=시선, 무빙=화살표 */
.frame.ph { background:
  linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 25%,
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/33.33% 100%,
  #2a2724; }
.subj { width: 34%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
        border-radius: 4px 4px 0 0; position: relative; }
.subj::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%);
                top: -14%; width: 44%; padding-top: 44%; border-radius: 50%;
                background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.32); }
.frame.ph.a-low .subj { transform: perspective(300px) rotateX(6deg); }
.frame.ph.a-high .subj { transform: perspective(300px) rotateX(-8deg); opacity: .85; }
.frame.ph.a-dutch { transform: rotate(-4deg) scale(1.08); }
.frame.ph.a-overhead .subj { height: 26% !important; width: 26%; border-radius: 50%; }
.frame .move-arrow { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
                     color: rgba(255,255,255,.72); font-size: 22px; letter-spacing: 2px; }
.frame .vocab-tag { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.frame .vocab-tag span { background: rgba(0,0,0,.55); color: #f3f0ec; font-size: 10.5px;
                         padding: 1px 6px; border-radius: 4px; backdrop-filter: blur(2px); }
.frame .st-tag { position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 700;
                 padding: 2px 7px; border-radius: 4px; }
.st-미생성 { background: rgba(255,255,255,.16); color: #efece7; }
.st-생성중 { background: #d9b467; color: #3a2c07; }
.st-완료   { background: #57a97a; color: #fff; }
.st-리테이크 { background: #d1685c; color: #fff; }
.st-재사용 { background: rgba(255,255,255,.16); color: #cfe9e7; }
.frame .shot-id { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.55);
                  color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 4px;
                  font-family: Consolas, monospace; }

.shot-body { padding: 11px 13px 12px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.shot-body .subject { font-size: 13.5px; line-height: 1.55; color: var(--ink);
                      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                      overflow: hidden; }
.shot-body .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                  font-size: 11.5px; color: var(--faint); }
.shot-actions { display: flex; gap: 6px; padding: 0 13px 13px; }
.shot-actions .btn { flex: 1; justify-content: center; }

.gen-est { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.gen-est .box { border: 1px solid var(--hairline); border-radius: var(--r-md);
                padding: 10px 12px; background: var(--surface); }
.gen-est .k { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.gen-est .v { font-size: 18px; font-weight: 700; color: var(--ink-strong); }
/* 백엔드 선택 — 견적 발급 시점에 정한다(고른 값이 견적에 박히고 실행이 따른다) */
.backend-pick { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.be-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.be-k { font-size: 12px; font-weight: 700; color: var(--faint); min-width: 42px; }
.be-off { font-size: 10.5px; color: var(--err-ink, #a33); margin-left: 4px; }
.be-row .seg button.on .be-off { color: #a33; }

.prompt-box { background: var(--surface); border: 1px solid var(--hairline);
              border-radius: var(--r-md); padding: 12px 14px; font-size: 13px;
              line-height: 1.7; max-height: 220px; overflow: auto; white-space: pre-wrap; }

.empty { color: var(--faint); text-align: center; padding: 60px 20px; }
/* 역추적 전문이 들어와도 줄바꿈·들여쓰기를 살려서 읽을 수 있게 (전수검사 B8) */
.err-box { border: 1px solid #eec3bf; background: #fffaf9; color: var(--err-fg);
           border-radius: var(--r-md); padding: 14px 16px; margin: 20px 0;
           white-space: pre-wrap; word-break: break-word;
           font-family: 'SFMono-Regular', Consolas, 'D2Coding', monospace; font-size: 12.5px; }

/* ───────────────────────── 에이전트 패널 (우측, 전 공정 공통) ─────────────────────────
   본문과 나란히 놓는다 — 겹치면 촬영 스토리보드·컷시트가 가려서 못 쓴다.
   접힘·폭은 사람이 정하고 localStorage에 남는다.

   패널 자체(.agent-*)의 스타일은 **static/agent.css**로 옮겼다(2026-08-16) —
   편집기 v2가 같은 컴포넌트(AgentPanel.tsx)를 쓰면서 뼈대 스타일도 한 벌이어야
   하기 때문이다. 여기 남는 것은 webui 앱 셸의 배치(.work-*)뿐이다. */
.work-row { flex: 1; display: flex; min-height: 0; }
.work-body { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── 편집 준비: 재료 충족 표 ─────────────────────────────────────────────
   "왜 편집기가 안 열리나"의 답이 여기 있다. 첫 오류 한 줄이 아니라 무엇이 몇 개
   모자란지를 보여 주는 자리라, 수치 열은 자리를 고정하고 눈이 세로로 훑게 둔다. */
.mat-table { border-collapse: collapse; margin: 6px 0 2px; }
.mat-table td { padding: 3px 14px 3px 0; vertical-align: middle; }
.mat-table td:first-child { color: var(--ink); }
.mat-table td:nth-child(2) { color: var(--faint); white-space: nowrap; }