:root{
  /* ── Reelo 라이트 디자인 시스템 (Claude Design 포트) — paper·헤어라인 보더·코발트 강조 ──
     기존 토큰명(--bg/--panel/--panel2/--line/--ink/--sub/--accent/--accent2/--warn)을 라이트값으로
     remap해 앱 전체가 캐스케이드로 재스킨됨. 프리뷰 스테이지(--canvas)만 다크 네이비 유지(영상 톤). */
  --bg:#FBFBFA;            /* paper 페이지 배경 */
  --panel:#FFFFFF;         /* surface 레일·인스펙터·모달·탑바·카드 */
  --panel2:#F5F5F3;        /* surface2 칩·버튼·입력·호버 */
  --surface3:#F0F0EE;      /* raised 호버/활성 */
  --field:#FFFFFF;         /* 입력 필드 안쪽(라이트=흰 배경+보더) */
  --canvas:#0C0E16;        /* 다크 프리뷰·썸네일 스테이지(영상 프레임과 동일 톤) — 유지 */
  --line:#E8E7E3;          /* 헤어라인 보더 */
  --line-strong:#DAD9D4;   /* 강조 구분선 */
  --ink:#17181C;           /* 본문 텍스트 */
  --sub:#5B5D65;           /* 보조/라벨/메타 (ink2) */
  --faint:#8A8C94;         /* 3차/캡션 (ink3) — 랜딩 baseline과 동일 hex */
  --accent:#2A4FE0;        /* 브랜드 코발트 = primary·AI동사·저장 */
  --accent-h:#2342C4;      /* 코발트 호버 */
  --accent-soft:rgba(42,79,224,.08);
  --on-accent:#FFFFFF;     /* 코발트 배경 위 텍스트 */
  --accent2:#2A4FE0;       /* 정밀모드·포커스링·번호배지 = 브랜드 코발트(단일 강조) */
  --accent2-soft:rgba(42,79,224,.10);
  --live:#0FB07A;          /* teal = 성공·라이브·재생중 */
  --live-soft:rgba(15,176,122,.10);
  --warn:#E0833A;          /* 앰버 = 미저장/주의 */
  --warn-soft:rgba(224,131,58,.12);
  --danger:#E5484D;        /* 위험 */
  --danger-soft:rgba(229,72,77,.10);
  --radius:10px;           /* 컨트롤 기본 라운드 */
  --radius-lg:14px;        /* 카드/모달 라운드 */
  --radius-chip:8px;
  --shadow-pop:0 18px 44px -16px rgba(20,22,30,.22);
  --shadow-card:0 1px 2px rgba(20,22,30,.04);
  --shadow-modal:0 32px 72px -28px rgba(20,22,30,.34);   /* 모달 depth — 순검정 아닌 잉크틴트(랜딩 무드) */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;   /* mono 라벨·숫자 SSOT(랜딩 --mono와 동일) */
}
*{box-sizing:border-box}
/* ★load-bearing: hidden 속성은 어떤 author display 규칙보다 항상 이겨야 한다.
   이 파일은 종전에 `.menu[hidden]`·`.modal-wrap[hidden]`처럼 **한정 셀렉터 10여 개**로 하나씩
   막고 있었는데, 그 그물망에서 `.nav-drawer`가 빠져 있었다 — `.nav-drawer{display:flex}`가
   UA의 `[hidden]{display:none}`을 이겨서, JS가 hidden=true로 닫아도 요소가 계속 렌더됐다.
   결과(2026-07-24 실측): 닫힌 드로어 안의 **포커스 가능 요소 9개가 탭 순서에 살아남아**
   키보드 사용자의 포커스가 화면 밖 x:-51로 사라졌고, aria-hidden도 inert도 없어 스크린리더에는
   닫힌 메뉴가 계속 읽혔다.
   ★한정 셀렉터 방식은 새 컴포넌트를 추가할 때마다 빠뜨리기 쉬운 구조라 같은 사고가 반복된다
   (랜딩·대시보드·share·account는 이미 이 전역 규칙을 갖고 있고 그래서 안전했다).
   ★도입 전 실측: 이 규칙의 영향을 받는(=hidden인데 렌더되던) 요소는 편집기 전체에서 .nav-drawer
   단 하나였다. 열기/닫기 슬라이드는 hidden=false 구간에서 일어나므로 영향 없음을 확인했다. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,system-ui,-apple-system,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(42,79,224,.18)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#c4c3bd}
/* SVG 라인 아이콘 스프라이트(<use href="#i-*">) — 24 viewBox, stroke 1.6, currentColor, round cap/join */
svg.ic-svg,svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
svg.i-fill{fill:currentColor;stroke:none}
/* 버튼·메뉴·세그·칩 안의 아이콘 = 16px(컴팩트) */
.btn .ic .i,.iconbtn .ic .i{width:16px;height:16px}
.seg .i,.menu-item .i,.cred-chip .i{width:15px;height:15px}
.btn .i{width:16px;height:16px}
.menu-item .i{flex:0 0 auto;color:var(--sub)}
.menu-item:hover .i{color:var(--ink)}
.menu-item.danger .i{color:var(--danger)}
/* ── 앱 셸 툴바: 3-zone grid (LEFT 로고+프로젝트 · CENTER 모드 토글 · RIGHT 액션+계정).
   디자인 = 54px 높이·흰 배경·헤어라인. 가로 스크롤 원천 차단.
   sticky: 모바일에서 본문 스크롤 시에도 도구막대·팝오버 앵커 유지(팝오버는 fixed+JS 배치 규약이라 트리거가 화면에 있어야 함). ── */
.top{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;height:54px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.tb-right{justify-self:end}
.tb-center{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;position:relative}  /* V2-A: .rv-pop 앵커 */
.project-mode-chip{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border:1px solid rgba(42,79,224,.24);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.project-mode-chip[hidden]{display:none}
.tb-sep{width:1px;height:24px;align-self:center;margin:0 4px;background:var(--line);flex:0 0 auto}
/* 로고 마크: "컷이 모여 재생이 되는" 브랜드 마크(가로 슬라이스 재생 ▶, 코발트 볼륨·무그림자) — REELO·BRAND MARK v1/2026. 정본 SVG = assets/brand/. 인라인 = .brand-mark */
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:var(--ink);text-decoration:none;flex:0 0 auto;white-space:nowrap}
.brand .brand-mark{width:28px;height:28px;flex:none}
.brand-name{letter-spacing:-.05em}
.tag{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:6px;white-space:nowrap;letter-spacing:.02em}
.proj{flex:0 1 auto;min-width:0;color:var(--ink);font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1 1 0;min-width:8px}
#brandLogo{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:8px}
#brandLogo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ░ LEFT NAV DRAWER ░ — 로고로 열림. 탑바 위(z 120), 백드롭은 드로어 아래(z 119). dashboard 오버레이와 동일 a11y(Esc·바깥클릭·포커스). */
#navBackdrop{position:fixed;inset:0;background:rgba(13,14,20,.42);backdrop-filter:blur(3px);z-index:119;opacity:0;transition:opacity .2s ease}
#navBackdrop.open{opacity:1}
.nav-drawer{position:fixed;left:0;top:0;height:100vh;height:100dvh;width:260px;background:var(--panel);border-right:1px solid var(--line);box-shadow:var(--shadow-pop);z-index:120;display:flex;flex-direction:column;padding:16px 14px;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);font-family:Pretendard,system-ui,-apple-system,sans-serif}
.nav-drawer.open{transform:translateX(0)}
.nd-head{display:flex;align-items:center;gap:9px;padding:4px 6px 2px}
.nd-mark{width:28px;height:28px;flex:none;display:block}
.nd-word{font-weight:800;font-size:18px;letter-spacing:-.05em;color:var(--ink);flex:1;min-width:0}
.nd-close{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--sub);cursor:pointer;display:grid;place-items:center;flex:none}
.nd-close:hover{background:var(--surface3);color:var(--ink)}
.nd-close .i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nd-nav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.nd-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--sub);font-size:13.5px;font-weight:500;font-family:inherit;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}
.nd-item .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nd-item .lbl{flex:1;min-width:0}
.nd-item:hover{background:var(--surface3);color:var(--ink)}
.nd-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
.nd-item.on{background:var(--accent-soft);color:var(--ink);font-weight:600}
.nd-item.on .i{color:var(--accent);stroke:var(--accent)}
.nd-credit{margin-top:auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px}
.nd-credit-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.nd-credit-lbl{font-size:12.5px;font-weight:600;color:var(--sub)}
.nd-credit-val{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
.nd-credit-bar{height:6px;background:#E5E4DF;border-radius:99px;overflow:hidden}
.nd-credit-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .2s ease}
.nd-topup{width:100%;margin-top:11px;height:32px;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;font-size:12.5px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer}
.nd-topup:hover{background:var(--surface3)}
.nd-topup:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nd-account{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px;background:none;border:0;border-radius:9px;cursor:pointer;text-align:left;width:100%;font-family:inherit}
.nd-account:hover{background:var(--surface3)}
.nd-account:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nd-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#5B7BFF);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.nd-account-t{flex:1;min-width:0}
.nd-account-name{display:block;font-size:13px;font-weight:600;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-account-email{display:block;font-size:11px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.nav-drawer{transition:none}#navBackdrop{transition:none}}
/* 모드 세그먼트: CENTER. 디자인 = F1F1EF 트랙 + 흰 활성 알약(그림자). #viewToggle 단일 버튼 유지(JS 무수정) */
.mode-seg{display:inline-flex;background:#F1F1EF;border:0;border-radius:9px;padding:3px;flex:0 0 auto}
.seg{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 13px;background:transparent;border:0;border-radius:7px;color:var(--sub);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:background .14s ease,color .14s ease,box-shadow .14s ease}
.seg:hover{color:var(--ink)}
.seg.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.08)}   /* 활성 = 흰 알약 + 미세 그림자 */
/* 버튼 — iconbtn = ic+lbl 구조(반응형서 lbl만 숨김). 디자인 = 34px·헤어라인 보더·subtle hover */
.btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:0 12px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .14s ease,border-color .14s ease,transform .05s ease}
.btn:hover{background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn.subtle{color:var(--sub);background:transparent;border-color:transparent}
.btn.subtle:hover{color:var(--ink);background:var(--surface3);border-color:transparent}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
/* mp4 = 디자인의 대표 액션(잉크 검정 버튼) */
.btn.export{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.export:hover{background:#000;border-color:#000}
.btn.export .ic{color:#fff}
.iconbtn .ic{font-size:14px;line-height:1;color:var(--sub)}
.iconbtn.primary .ic{color:var(--on-accent)}
#genBtn .ic{color:var(--accent)}
/* Tabler 아이콘(잔존 fallback) 정렬·크기 */
.ti{line-height:1;vertical-align:-.12em}
.iconbtn .ic .ti{font-size:16px;vertical-align:0}
.menu-item .ti{flex:0 0 auto;width:18px;text-align:center;font-size:16px;color:var(--sub);vertical-align:0}
.menu-item:hover .ti{color:var(--ink)}
.menu-item.danger .ti{color:var(--danger)}
#moreBtn{width:34px;height:34px;justify-content:center;padding:0;color:var(--sub)}
#moreBtn .ti{font-size:18px}
/* 프로젝트 버튼 — 디자인: 폴더 + 이름 + 미저장닷 + chev (surface2 알약) */
.proj-btn{background:var(--panel2);border:1px solid #ECEBE7;color:var(--ink)}
.proj-btn:hover{background:var(--surface3)}
.proj-btn .lbl{font-weight:600;font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-btn .chev{width:14px;height:14px;color:var(--faint);margin-left:-1px}
/* 생성 CTA — 헤어라인 버튼 + 코발트 스파클 아이콘(디자인) */
.gen-cta .ic{color:var(--accent)}
/* 크레딧 칩(아바타 버튼 안) — 디자인: 모노 수치 + 코발트 번개 */
.cred-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--sub)}
.cred-chip .i{width:14px;height:14px;color:var(--accent)}
.acct-btn:hover .cred-chip{background:var(--surface3);color:var(--ink)}
/* 계정 아바타 + 크레딧 칩 (클릭 시 팝오버에 renderAcct 출력) — 디자인 = 코발트 그라데 원형 아바타 */
.acct-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:999px;padding:0;cursor:pointer;flex:0 0 auto;font-family:inherit;touch-action:manipulation}
.acct-btn .avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2A4FE0,#5B7BFF);color:#fff;font-weight:700;font-size:12px;text-transform:uppercase}
.acct-btn .cred{font-family:var(--mono);color:var(--sub);font-size:12px;font-weight:600;white-space:nowrap}
.acct-btn:hover .cred{color:var(--ink)}
/* 팝오버(오버플로 ⋯ + 계정) 공통 */
.tb-pop{position:relative;flex:0 0 auto}
/* position:fixed → .top의 overflow:hidden(가로스크롤 방지)에 안 잘림. 위치는 JS가 트리거 기준으로 클램프 */
.menu{position:fixed;z-index:80;min-width:210px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 44px -16px rgba(20,22,30,.28)}
.menu[hidden]{display:none}
.menu-item{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;min-height:40px;background:transparent;border:0;color:var(--ink);font:inherit;font-weight:600;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer}
.menu-item kbd{margin-left:auto}
.menu-item:hover{background:var(--panel2)}
.menu-item kbd{color:var(--sub);font-size:11px;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.menu-sep{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu-item.danger{color:var(--danger)}        /* 파괴적 리셋 = 빨강(doReset 기존 confirm 유지) */
.menu-item.danger:hover{background:rgba(229,72,77,.12)}
.acct-menu{min-width:240px}
.acct-menu .acct{display:flex;flex-direction:column;gap:6px;padding:6px 8px;font-size:12px}
/* 포커스 — :focus-visible accent2 링(outline-none 금지) */
.btn:focus-visible,.seg:focus-visible,.acct-btn:focus-visible,.menu-item:focus-visible,.brand:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.menu-item:focus-visible{outline-offset:-2px}
/* ── 반응형: 라벨→아이콘→⋯ 흡수. 가로 스크롤 0. ✨생성·모드·⋯·👤는 어느 폭에서도 생존 ── */
.show-in-menu{display:none}
@media (pointer:coarse){.btn,.seg,.menu-item,.acct-btn,.nf-bell{min-height:44px}.jw-chip.nf-bell{width:44px;height:44px;min-width:44px;min-height:44px}}   /* 터치 ≥44 */
/* 되돌리기·저장은 라벨을 가장 먼저 접는다. 편집은 자동 저장이고 그 사실은 CENTER의 '저장됨' 칩이 이미
   말해주므로 두 버튼은 아이콘+툴팁으로 충분하다. 여기서 번 폭은 프로젝트명(.proj)이 가져간다
   (1440 실측: RIGHT 존이 716px를 먹어 프로젝트명이 209px 중 112px만 받고 잘렸다). */
@media (max-width:1500px){#undo .lbl,#save .lbl{display:none}}
@media (max-width:1100px){.tag{display:none}#exportBtn .lbl,#playAllBtn .lbl,#undo .lbl,#save .lbl{display:none}}  /* 라벨 먼저 축약(아이콘) */
@media (max-width:860px){#projectsBtn .lbl,#genBtn .lbl,.dirty-flag .lbl{display:none}
  #exportBtn,#playAllBtn{display:none}[data-proxy="exportBtn"],[data-proxy="playAllBtn"]{display:flex}}   /* 출력/재생 → ⋯ 흡수 */
@media (max-width:560px){.brand-name{display:none}.acct-btn .cred{display:none}
  #undo,#save{display:none}[data-proxy="undo"],[data-proxy="save"]{display:flex}.menu-sep.show-in-menu{display:block}}   /* 저장/되돌리기는 가장 마지막에 흡수(자주 씀) */
/* ── 2행 툴바(≤1360): 1행에 다 안 들어가면 겹치지 말고 2행으로.
   1행 = [로고·프로젝트]…[알림·생성·⋯·계정] · 2행 = [모드 세그 | 프로젝트명(말줄임) | 저장닷 | 검토].
   tb-center를 0폭으로 짜부라뜨려 콘텐츠가 좌우 위로 흘러넘치던 붕괴의 근본 처방.

   ★적용 폭을 640 → 1360으로 올렸다(2026-07-22). 3-zone에서 CENTER 폭은 대략 (뷰포트 - 920px)인데
   내용물은 세그 196 + 저장됨 60 + 검토 42 + 여백 ≈ 330px이 고정이라, 프로젝트명이 먼저 0까지 짜부라지고
   그래도 모자라면 서로 겹친다. 900px 실측: CENTER 109px에 콘텐츠 298px → '프로젝트' 라벨과 '저장됨' 칩이
   같은 자리에 겹쳐 뭉개지고 알림 벨이 '정밀 편집' 글자 위에 올라탔다.
   폭별 프로젝트명 실측(1행일 때): 1200→0px · 1250→1px · 1300→51px · 1360→71px · 1440→191px.
   즉 1360 이하는 이름이 읽을 수 없으므로 2행이 유일한 해다. ── */
@media (max-width:1360px){
  .top{grid-template-rows:auto auto;height:auto;row-gap:0}
  .tb-left{grid-row:1;grid-column:1;min-height:50px}
  .tb-right{grid-row:1;grid-column:3;min-height:50px}
  .tb-center{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:8px;min-height:46px;padding:4px 2px 7px;border-top:1px solid var(--line)}
  .tb-center .mode-seg{order:-1}       /* 세그를 행 선두로 — 편집 모드가 2행의 주인 */
  .proj{flex:1 1 0}                    /* 프로젝트명이 남는 폭을 흡수(말줄임) — 세그·검토는 절대 축소 금지 */
}
/* 모바일 밀도(≤640): 2행 구조는 위에서 이미 잡혔고, 여기선 여백·부가 요소만 더 줄인다. */
@media (max-width:640px){
  .top{padding:0 10px;column-gap:8px}
  .tb-right{gap:6px}
  .tb-sep{display:none}
  .acct-btn .cred-chip{display:none}   /* 수치 없는 ⚡칩은 무의미 — 아바타만 */
}
/* 편집기 조직 영상 작업 요약 — 상세 대기열은 대시보드 한 곳이 권위다. */
.org-job-summary{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;background:var(--panel);border-bottom:1px solid var(--line);color:var(--sub);font-size:12.5px;font-weight:600;text-decoration:none}
.org-job-summary[hidden]{display:none}
.org-job-summary:hover{background:var(--panel2);color:var(--ink)}
.org-job-summary:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.org-job-summary-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.org-job-summary[data-active="true"] .org-job-summary-dot{background:var(--live)}
.org-job-summary-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.org-job-summary-action{display:inline-flex;align-items:center;gap:2px;margin-left:auto;color:var(--accent);white-space:nowrap}
.org-job-summary-action .i{width:14px;height:14px}
@media(pointer:coarse){.org-job-summary{min-height:44px}}
@media(max-width:560px){.org-job-summary{padding-inline:10px}.org-job-summary-action{font-size:0}.org-job-summary-action .i{width:16px;height:16px}}
/* 일관된 부드러운 인터랙션(폴리시) — 칩·레일·레이어 hover/active 전환 */
.chip,.mom,.layer-row,.cut-h,.sw,.tab{transition:background .14s ease,border-color .14s ease,color .14s ease}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ── 필름스트립: 탑바 아래 가로 클립 스트립(전 컷). 디자인 = 흰 배경·헤어라인·92px 높이.
   #filmstrip의 카드(.conti-card)는 컴팩트 클립으로 리스타일(이름 보존, 외양만). ── */
/* height가 아니라 min-height인 이유: 가로 스크롤바는 '자리를 차지하는' 종류(Windows 전부, macOS 항상표시)면
   92px에서 자기 두께만큼을 빼앗아 간다. 카드는 88px이라 남는 80px에 안 들어가고, align-items:center가
   초과분을 위아래로 나눠 컷 라벨 아랫부분(한글 받침)이 잘렸다. 오버레이 스크롤바 환경에선 92px 그대로다. */
.filmstrip{display:flex;align-items:center;gap:9px;min-height:92px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;flex:0 0 auto;scrollbar-width:thin}
.filmstrip[hidden]{display:none}
.filmstrip .conti-card{flex:0 0 auto;width:124px;background:transparent;border:0;border-radius:0;overflow:visible}
.filmstrip .conti-card:hover{border:0}
/* 선택 표시 = '테두리'가 아니라 '탭 인디케이터' 언어. 비선택 컷은 살짝 가라앉혀(dim) 선택 컷이 대비로 뜬다.
   상태 보더(수정·미저장·핀)는 얇은 색선으로 유지 — 선택과 별 레이어라 공존한다. */
/* 선택 표시 = '테두리'가 아니라 '탭 인디케이터' 언어. 비선택 컷은 살짝 가라앉혀(dim) 선택 컷이 대비로 뜬다.
   상태 보더(수정·미저장·핀)는 얇은 색선으로 유지 — 선택과 별 레이어라 공존한다. */
.filmstrip .conti-card .conti-cardthumb{aspect-ratio:16/9;border-radius:9px;border:1.5px solid transparent;background:var(--canvas);overflow:hidden;opacity:.62;transition:opacity .16s ease,box-shadow .16s ease,transform .16s ease}
.filmstrip .conti-card.modified .conti-cardthumb{border-color:var(--live)}
.filmstrip .conti-card.unsaved .conti-cardthumb{border-color:var(--warn)}
.filmstrip .conti-card.pinned .conti-cardthumb{border-color:var(--sub)}
.filmstrip .conti-card.needs-attention .conti-cardthumb{box-shadow:inset 0 0 0 1.5px var(--warn)}
.filmstrip .conti-card:hover:not(.sel) .conti-cardthumb{opacity:.85}          /* hover = 되살아남(클릭 어포던스) */
/* ★ 선택(현재 보는) 컷: 완전 선명 + 잉크 드롭섀도로 '떠오름' — 대비만으로 선택 표현(코발트 링·테두리·구분선 없음). */
.filmstrip .conti-card.sel .conti-cardthumb{opacity:1;box-shadow:0 8px 20px -10px rgba(12,14,22,.55)}
.filmstrip .conti-card.sel .cc-num{color:#fff;background:var(--accent);border-radius:5px;padding:0 5px}
.filmstrip .conti-card.sel .cc-lbl{color:var(--ink);font-weight:700}
.filmstrip .conti-card.playing:not(.sel) .conti-cardthumb{box-shadow:0 0 0 3px var(--accent-soft)}   /* 선택 링은 재생 중에도 유지(소스 순서 덮어쓰기 방지) */
.filmstrip .conti-cardcap{padding:5px 1px 0;font-size:10px;gap:5px;background:transparent}
.filmstrip .cc-num{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--sub)}
.filmstrip .cc-lbl{font-size:11px;font-weight:600;color:var(--ink)}
.filmstrip .cc-dur{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.filmstrip .cc-attn{flex:0 0 auto;padding:1px 4px;border-radius:4px;background:var(--warn-soft,#fff5dc);color:var(--warn);font-size:8.5px;font-weight:800;white-space:nowrap}
.filmstrip .ot-seam{position:relative;z-index:2;display:grid;place-items:center;flex:0 0 26px;width:26px;height:44px;margin:0 -8px;border:0;color:var(--accent);cursor:help}
.filmstrip .ot-seam::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(42,79,224,.28)}
.filmstrip .ot-seam svg{position:relative;width:20px;height:20px;padding:3px;border:1px solid rgba(42,79,224,.24);border-radius:999px;background:var(--panel);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){.filmstrip .ot-seam{min-width:44px;width:44px;margin:0 -12px}}

/* 본문 = 뷰포트 − 탑바(54px) − 필름스트립(92px). FOCUS 3열 그리드 [240 | 1fr | 322]. */
.layout{display:grid;grid-template-columns:240px 1fr 322px;gap:0;height:calc(100vh - 54px - 92px);min-height:0}
.rail{background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:12px}
.stage{display:flex;flex-direction:column;min-width:0;padding:13px 22px 16px;overflow:hidden;isolation:isolate}   /* isolate: 오버레이 z-index(region-hint 80·rs-handle·dm-dragging)를 스테이지 안에 가둠 → 모달 위로 새지 않음(버그 수정) */
.insp{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px;display:flex;flex-direction:column}
/* [hidden] must beat the display:flex class rules above (equal specificity -> later wins) so the
   conti/draft view toggle actually hides these panels. */
.rail[hidden],.stage[hidden],.insp[hidden]{display:none!important}
.btn[hidden]{display:none!important}        /* [hidden] toggled buttons(기본으로 지정/삭제) must beat .btn display:inline-flex */

/* rail */
.cut{margin-bottom:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cut-h{padding:9px 11px;background:var(--panel2);font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.cut-h .role{font-size:11.5px;color:var(--sub);font-weight:600}
.mom{display:flex;gap:10px;align-items:center;padding:9px 11px;border-top:1px solid var(--line);cursor:pointer}
.mom > div:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.mom:hover{background:var(--panel2)}
.mom.active{background:rgba(42,79,224,.15);box-shadow:inset 3px 0 0 var(--accent2)}
.mom .thumb{width:64px;height:36px;border-radius:4px;background:var(--field);border:1px solid var(--line);flex:none;overflow:hidden}
img.fv{display:block;width:100%;height:100%;object-fit:cover}  /* 격리 프레임 기본 맞춤(전 호스트) — 신규 프레임 호스트에 개별 규칙 불요 */
.mom .thumb svg,.mom .thumb img.fv{width:100%;height:100%;display:block}
.mom .ml{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mom .md{font-size:12px;color:var(--sub)}
.seg-tag{font-size:11.5px;color:var(--accent);font-weight:700}

/* stage — 디자인: 모드라벨 + 씬모션 칩(우측) · 큰 다크 16:9 프리뷰(중앙) · 트랜스포트(하단) */
.stage-head{display:flex;align-items:center;gap:10px;margin-bottom:0;flex-wrap:wrap;flex:none}
.stage-mode{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(42,79,224,.22);border-radius:7px;padding:4px 9px}
#stageLabel{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.hint{font-size:12.5px;color:var(--sub);line-height:1.5}
.stage-head .grow{flex:1}
.muted{color:var(--sub);font-weight:400;font-size:11px}
.grp .muted{font-size:12px;color:var(--sub)}

/* ── 모달(Claude Design 포트): 헤더(아이콘칩+타이틀+서브+X) · 바디 · 보더 푸터 행 ── */
.modal-wrap{position:fixed;inset:0;background:rgba(13,14,20,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.modal-wrap[hidden]{display:none}
.modal{width:min(700px,100%);max-height:90vh;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden}
.modal-wide{width:min(860px,100%);height:min(640px,90vh)}
/* 헤더 행 */
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--line);flex:none}
.modal-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.modal-ico .i{width:18px;height:18px}
.ico-cobalt{background:var(--accent-soft)}
.ico-cobalt .i{color:var(--accent)}
.ico-amber{background:var(--warn-soft)}
.ico-amber .i{color:var(--warn)}
.modal-head-t{flex:1;min-width:0}
.modal-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.modal-sub{font-size:12.5px;color:var(--faint);margin-top:1px}
.modal-x{width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:8px;cursor:pointer;color:var(--faint);flex:none;transition:background .14s ease,color .14s ease}
.modal-x .i{width:18px;height:18px}
.modal-x:hover{background:var(--surface3);color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-head-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--panel);border:1px solid var(--line-strong);border-radius:9px;font-size:13px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;flex:none;transition:background .14s ease}
.modal-head-btn .i{width:16px;height:16px}
.modal-head-btn:hover{background:var(--panel2)}
.modal-head-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ico-cobalt-ink{color:var(--accent)}
/* 바디 */
.modal-body{padding:20px 22px;overflow-y:auto}
.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:7px}
.field-label-sub,.brand-sec-sub{font-weight:400;color:var(--faint)}
.modal textarea{width:100%;box-sizing:border-box;background:var(--field);border:1px solid var(--line-strong);border-radius:11px;color:var(--ink);padding:13px 14px;font-family:inherit;font-size:13.5px;line-height:1.6;resize:vertical;outline:none;transition:border-color .14s ease,box-shadow .14s ease}
.modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
/* 푸터 행 */
.modal-foot{display:flex;align-items:center;gap:12px;padding:15px 22px;border-top:1px solid var(--line);flex:none}
.modal-foot .spacer{flex:1}
.gen-status{font-size:12px;color:var(--sub)}
.gen-status:empty{display:none}
/* 모바일 푸터: 한 줄 강제 유지가 cap-note를 세로로 꺾던 문제 — 줄바꿈 허용 + 고지문은 부제가 대신 */
@media(max-width:560px){
  .modal-foot{flex-wrap:wrap;gap:8px 10px;padding:12px 14px}
  .modal-foot .cap-note{display:none}
  .modal-foot .gen-status{flex:1 1 100%}
}
/* 모바일 모달(≤640): 둘레 여백 축소로 폭 확보 + 주소창 변동에 안전한 dvh 상한 + 헤더·바디 패딩 압축.
   내부 그리드는 어떤 모달이든 1열 스택이 기본(가로 스크롤 금지 — GUIDE-mobile-ui). */
@media(max-width:640px){
  .modal-wrap{padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .modal{max-height:calc(100dvh - 28px)}
  .modal-wide{height:auto;max-height:calc(100dvh - 28px)}
  .modal-head{padding:14px 16px}
  .modal-body{padding:16px}
  .modal-foot{padding-left:16px;padding-right:16px}
}
/* 생성 진행 표시(모달 푸터): indeterminate 바 + 경과 카운터 — 내부 파이프라인 비노출 */
.gen-progress{display:none;flex:1 1 100%;min-width:0;flex-direction:column;gap:6px;margin-top:2px}
.gen-progress.on{display:flex}
.gen-progress-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink)}
.gen-progress-row .gp-label{font-weight:600}
.gen-progress-row .gp-elapsed{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto}
.gen-progress-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.gen-progress-bar>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--accent),#5B7BFF);border-radius:3px;animation:indet 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gen-progress-bar>i{animation:none;width:100%;opacity:.5}}
.gen-progress-bar.is-det>i{animation:none;margin-left:0;transition:width .35s ease}   /* 확정 진행바: 폭=완료/총컷(인라인 style.width), 슬라이드 애니 끔 */
@media (prefers-reduced-motion:reduce){.gen-progress-bar.is-det>i{transition:none}}
/* ── 공용 확인 대화상자(ui-dialog.js): 네이티브 confirm/alert/prompt 대체 — .modal 디자인 언어 공유 ── */
.dlg-wrap{z-index:10000}
.dlg{width:min(440px,100%)}
.dlg .modal-head{border-bottom:0;padding-bottom:2px}
.dlg-body{padding:6px 22px 18px}
.dlg-text{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink)}
.dlg-points{margin-top:12px;padding:12px 14px;background:var(--panel2);border-radius:var(--radius);display:flex;flex-direction:column;gap:7px}
.dlg-point{position:relative;padding-left:13px;font-size:12.5px;line-height:1.55;color:var(--sub)}
.dlg-point::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.dlg-check{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2);color:var(--sub);font-size:12.5px;line-height:1.55;cursor:pointer}
.dlg-check input{width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.dlg-input{width:100%;box-sizing:border-box;margin-top:12px;background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);padding:11px 13px;font-family:inherit;font-size:13.5px;line-height:1.5;outline:none;resize:vertical}
.dlg-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.dlg .modal-foot{border-top:0;padding-top:4px}
.ico-danger{background:var(--danger-soft)}
.ico-danger .i{color:var(--danger)}
/* 공용 세그먼트 탭(빌링 등 오버레이 내부 탭) */
.segtabs{display:inline-flex;background:var(--panel2);border-radius:10px;padding:3px}
.segtab{height:32px;padding:0 16px;border:0;border-radius:7px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;background:transparent;color:var(--sub);transition:background .14s ease,color .14s ease}
.segtab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.08)}
.segtab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ── 계정·요금제·팀 오버레이(billing.js) — .modal 디자인 언어 공유 ── */
.bill-tabs-row{padding:14px 22px 0;flex:none}
.bill-msg{padding:8px 22px 0;font-size:12px;min-height:14px;color:var(--live);flex:none}
.bill-msg.err{color:var(--danger)}
.bill-body{flex:1;overflow-y:auto;padding:14px 22px 20px}
.bill-sec-h{font-size:12px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin:24px 0 11px}
.bill-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bill-meter{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;margin-bottom:18px}
.bill-meter-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.bill-meter-lbl{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.bill-scope-tag{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 9.5px/1 var(--mono);letter-spacing:.01em}
.bill-meter-sub{color:var(--sub);font-size:11px;line-height:1.55;text-align:right}
.bill-balance-primary{padding:17px 0 16px}
.bill-balance-label{color:var(--sub);font-size:10.5px;font-weight:650;line-height:1.35}
.bill-balance-num{font:800 30px/1.12 var(--mono);letter-spacing:-.035em;margin-top:5px;font-variant-numeric:tabular-nums}
.bill-balance-num small,.bill-topup-value small{margin-left:4px;font:600 12px/1 var(--mono);letter-spacing:0;color:var(--sub)}
.bill-balance-empty{margin-top:7px;color:var(--sub);font-size:12px;font-weight:600}
.bill-meter-progress{padding-top:13px}
.bill-progress-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px;color:var(--sub);font:600 10.5px/1.35 var(--mono);font-variant-numeric:tabular-nums}
.bill-bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bill-bar>i{display:block;height:100%;border-radius:99px}
.bill-topup-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.bill-topup-note{margin-top:4px;color:var(--sub);font-size:10px;line-height:1.35}
.bill-topup-value{flex:0 0 auto;font:780 17px/1.15 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-meter-foot{padding-top:12px;color:var(--sub);font-size:10.5px;line-height:1.45}
.bill-mono.credit-in{color:var(--accent);font-weight:750}
.bill-mono.credit-out{color:var(--ink);font-weight:700}
@media(max-width:720px){.bill-meter-head{align-items:flex-start;flex-direction:column;gap:5px}.bill-meter-sub{text-align:left}.bill-progress-head{align-items:flex-start;flex-direction:column;gap:3px}}
@media(max-width:480px){.bill-meter{padding:15px}.bill-balance-num{font-size:27px}.bill-topup-row{align-items:flex-start;padding:12px}.bill-topup-note{max-width:170px}}
/* ★2026-07-24 프로드 실측(크레딧 내역 탭): 한 줄에 아이콘+제목+금액+시각이 nowrap으로 들어가는데
   시각이 130px을 먹어 제목이 12px로 눌렸다 — "기본 크레딧 제공"이 세로 6줄로 쏟아졌다.
   위 .ci-line·.cue-hd와 같은 부류(한글은 글자 단위 줄바꿈이라 폭이 1글자가 되면 세로로 흐른다).
   시각을 아랫줄로 내리면 제목이 153px을 되찾는다. */
@media(max-width:560px){.bill-row{flex-wrap:wrap}.bill-row-t{min-width:0}.bill-when{flex:1 1 100%;text-align:right}}
.bill-plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column}
.bill-plan.cur{background:var(--accent-soft);border-color:var(--accent)}
.bill-plan-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.bill-tag{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 6px}
.bill-price{display:flex;align-items:baseline;gap:3px;margin:10px 0 2px}
/* 구독임을 명시(2026-07-24) — "/월"만으로는 단발 구매처럼 읽혔다. 랜딩 .tier-cycle과 같은 카피. */
.bill-cycle-note{font-size:11.5px;color:var(--faint);margin:0 0 4px}

/* ── 구독 탭(2026-07-24) — 기존 .bill-* 언어 재사용: 같은 카드 반경·선·여백 ── */
.bill-sub-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px}
.bill-sub-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bill-sub-plan{font-size:17px;font-weight:750;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bill-sub-state{font-size:11px;font-weight:700;color:var(--live);background:var(--live-soft);border-radius:999px;padding:2px 8px}
.bill-sub-state.warn{color:var(--warn);background:var(--warn-soft)}
.bill-sub-amt{font-family:var(--mono);font-size:19px;font-weight:750;color:var(--ink);white-space:nowrap}
.bill-sub-amt small{font-family:inherit;font-size:12px;font-weight:600;color:var(--sub);margin-left:2px}
.bill-sub-meta{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.5}
.bill-sub-next{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.bill-sub-note{margin-top:8px;font-size:12px;color:var(--faint);line-height:1.5}
.bill-sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bill-sub-rowt{font-size:14px;font-weight:700;color:var(--ink)}
.bill-sub-pill{font-size:11.5px;font-weight:600;color:var(--sub);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
/* 해지는 버튼 하나로 조용히 둔다(2026-07-24 개정). danger 박스로 강조하면 해지를 권하는 화면처럼
   읽히고, 설명은 확인 다이얼로그가 이미 갖고 있다. 위험 색은 hover에서만 드러낸다. */
.bill-sub-cancel{display:flex;justify-content:flex-end;margin-top:16px}
.bill-cancel-btn{color:var(--sub)}
.bill-cancel-btn:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 34%,var(--line))}
@media(max-width:560px){
  .bill-sub-top,.bill-sub-row{flex-direction:column;align-items:stretch}
  .bill-sub-amt{font-size:22px}
  .bill-sub-row .btn{width:100%}
  /* 배지는 늘리지 않는다 — stretch되면 버튼으로 오인된다(누를 게 없는데 눌러보게 만든다). */
  .bill-sub-pill{align-self:flex-start}
}
.bill-price b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.bill-price small{font-size:11px;color:var(--sub)}
.bill-feat{font-size:11.5px;color:var(--sub);padding-bottom:13px;border-bottom:1px solid var(--line)}
.bill-feats{flex:1;display:flex;flex-direction:column;gap:7px;padding-top:12px}
.bill-feats .bf{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;color:var(--ink)}
.bill-feats .bf svg{flex:none;margin-top:2px}
.bill-change-note{margin-top:11px;padding:7px 8px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:650;text-align:center}
.bill-plan .btn,.bill-pkg .btn{margin-top:13px;height:38px;justify-content:center}
.bill-plan-note{margin-top:13px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:11px;text-align:center}
.bill-pkg{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px;text-align:center}
.bill-pkg .btn{width:100%;margin-top:0;height:34px}
.bill-pkg-best{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:700;color:#fff;background:var(--live);border-radius:5px;padding:2px 8px}
.bill-pkg-n{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--ink)}
.bill-pkg-l{font-size:11px;color:var(--sub);margin:2px 0 11px}
.bill-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.bill-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.bill-list>.bill-row:last-child{border-bottom:0}
.bill-row.pending{background:var(--panel2)}
.bill-empty{color:var(--sub);font-size:12px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg)}
.bill-kind-ico{width:32px;height:32px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;flex:none}
.bill-row-t{flex:1;font-size:13.5px;font-weight:600}
.bill-mono{font-family:var(--mono);font-size:12px;color:var(--sub)}
.bill-when{font-family:var(--mono);font-size:11px;color:var(--sub);text-align:right}
.bill-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#5B7BFF);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.bill-avatar.ghost{background:var(--panel);color:var(--sub)}
.bill-member-t{flex:1;min-width:0}
.bill-member-email{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill-member-email.dim{font-weight:400;color:var(--sub)}
.bill-member-name{display:block;font-size:11px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill-cr{font-family:var(--mono);font-size:10.5px;color:var(--sub);flex:none}
.bill-select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:11px;font-family:inherit}
.bill-chip{font-family:var(--mono);font-size:11px;color:var(--sub);background:var(--panel2);border-radius:7px;padding:4px 10px;flex:none}
.bill-chip.wait{font-size:10px;color:var(--warn);background:var(--warn-soft)}
.bill-act{font-size:11px;padding:4px 9px;min-height:0}
.bill-invite{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line-strong);border-radius:11px;padding:7px 7px 7px 14px;margin-bottom:18px}
.bill-invite>.i-lead{flex:none;color:var(--sub)}
.bill-invite input{flex:1;min-width:0;border:0;outline:none;font-family:inherit;font-size:13.5px;background:none;color:var(--ink)}
.bill-invite .btn.primary{height:34px;padding:0 15px;min-height:0}
.bill-upsell{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:18px}
.bill-upsell-t{font-size:13px;font-weight:700;margin-bottom:3px}
.bill-upsell-d{font-size:12px;color:var(--sub);margin-bottom:10px}
.bill-upsell .btn.primary{height:32px;padding:0 14px;min-height:0}
.bill-seats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin-bottom:10px}
.bill-seats b{color:var(--ink)}
.bill-note{font-size:11px;color:var(--sub);margin-bottom:14px}
.bill-account-settings{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel)}
.bill-pref-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border-bottom:1px solid var(--line)}
.bill-pref-row:last-child{border-bottom:0}
.bill-pref-copy{min-width:0}.bill-pref-copy label,.bill-pref-label{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.bill-pref-copy p{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--sub)}
.bill-pref-copy a{color:var(--accent);text-underline-offset:2px}
.bill-pref-check{width:18px;height:18px;accent-color:var(--accent);flex:none}
.bill-google-link{display:flex;align-items:center;gap:7px;flex:none}
.bill-google-link input{width:150px;height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;background:var(--field);color:var(--ink);font:inherit;font-size:12px;outline:none}
.bill-google-link input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bill-google-link .btn{height:34px;min-height:0;white-space:nowrap}
@media(max-width:640px){
  .bill-pref-row{align-items:flex-start;flex-direction:column}
  .bill-google-link{width:100%}
  .bill-google-link input{flex:1;min-width:0;width:auto}
}
.bill-feed{border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px 12px}
.bill-feed-row{display:flex;gap:9px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--line)}
.bill-feed-row:last-child{border-bottom:0}
.bill-feed-ico{flex:none;font-size:14px;line-height:1.4}
.bill-feed-t{font-size:12.5px;color:var(--ink);line-height:1.45}
.bill-feed-when{font-size:11px;color:var(--faint);margin-top:1px}
.cap-note{font-family:var(--mono);font-size:11px;color:var(--faint)}
.lock-note{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.lock-note .i{width:14px;height:14px;color:var(--faint)}
.gen-run{gap:7px}
.gen-run .i{width:16px;height:16px}
.run-eta{font-size:11px}
.btn-tag:empty{display:none}   /* 크레딧 배지: 값 없으면(무료/해당없음) 숨김 */
/* 첨부 행(대시 박스) */
.attach-row{display:flex;align-items:center;gap:9px;margin-top:12px;padding:12px;border:1.5px dashed var(--line-strong);border-radius:11px;cursor:pointer;transition:border-color .14s ease,background .14s ease}
.attach-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.attach-row .i{width:18px;height:18px;color:var(--faint);flex:none}
.attach-row-t{font-size:13px;color:var(--sub)}
.attach-row.disabled{opacity:.5;pointer-events:none}
.nofab-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--live);background:var(--live-soft);border-radius:5px;padding:2px 7px;flex:none}
.nofab-badge .i{width:11px;height:11px;color:var(--live);stroke-width:2.2}
.attach-info{display:block;margin-top:8px}
/* gen: 브랜드/비율 2-col */
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:18px}
/* 브랜드 셀은 기본 hidden(display:none)이라 그리드 셀을 점유하지 않음.
   레이아웃: 윗 행 = [출력비율](+브랜드 표시 시 [브랜드][출력비율]), 아랫 행 = .gen-pair(full-width) 안에
   [컷수][목표길이] 나란히. 그 아래 .gen-estimate(라이브 예상 제작 시간/한도). */
.gen-brand-control{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;position:relative;cursor:pointer}
.gen-brand-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.gen-brand-dot{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;background:var(--accent-soft);position:relative;z-index:2;pointer-events:none}
.gen-brand-dot .i{width:13px;height:13px;color:var(--accent)}
.gen-brand-control select{position:absolute;inset:0;width:100%;height:100%;appearance:none;-webkit-appearance:none;background:none;border:0;outline:none;padding:0 38px 0 43px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.gen-brand-chev{width:15px;height:15px;color:var(--faint);flex:none;margin-left:auto;position:relative;z-index:2;pointer-events:none}
.ratio-seg{display:flex;gap:6px;height:44px}
.ratio-btn{flex:1;border-radius:10px;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:600;background:var(--panel);color:var(--sub);border:1px solid var(--line-strong);transition:background .14s ease,border-color .14s ease}
.ratio-btn:hover:not(:disabled){background:var(--panel2)}
.ratio-btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.ratio-btn:disabled{opacity:.5;cursor:not-allowed}
.ratio-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 테마 선택(새 영상 만들기) — ratio-seg와 동일 룩, 한글 라벨이라 기본 폰트 */
.theme-seg{display:flex;gap:6px;height:44px}
.theme-btn{flex:1;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;background:var(--panel);color:var(--sub);border:1px solid var(--line-strong);transition:background .14s ease,border-color .14s ease}
.theme-btn:hover{background:var(--panel2)}
.theme-btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ot-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ot-btn.is-locked{color:var(--sub);border-color:var(--line-strong)}
.ot-btn.is-locked:hover{color:var(--ink);border-color:var(--faint)}
.ot-pro-lock{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:10px;font-weight:700;line-height:1.25}
.ot-pro-lock[hidden]{display:none!important}
.ot-pro-lock .i{width:10px;height:10px;fill:currentColor;stroke:none}
/* ── 컷 수 스테퍼(생성 모달): − 값 + (3~8, 자동추천·직접조정) ── */
.cut-stepper{display:flex;align-items:center;gap:6px;height:44px}
.cut-step-btn{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;font-size:18px;font-weight:600;line-height:1;background:var(--panel);color:var(--sub);border:1px solid var(--line-strong);transition:background .14s ease,border-color .14s ease}
.cut-step-btn:hover:not(:disabled){background:var(--panel2);color:var(--ink)}
.cut-step-btn:disabled{opacity:.4;cursor:not-allowed}
.cut-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cut-step-val{flex:1;min-width:0;height:44px;text-align:center;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink);outline:none;-moz-appearance:textfield}
.cut-step-val::-webkit-outer-spin-button,.cut-step-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cut-step-val:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.cut-hint{display:block;margin-top:7px}
/* ── 컷수+목표길이 페어: 한 행에 나란히(그리드 폭 전체 점유 → 출력비율/브랜드는 윗 행) ── */
.gen-pair{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:start}
.gen-pair-cell{min-width:0}
/* 모바일(≤640): 생성 폼 1열 스택 — 스테퍼(44+44+값)·세그가 반폭에 안 들어가 우측 열이 잘리고 모달 안 가로 스크롤이 생기던 것 */
@media(max-width:640px){.gen-grid,.gen-pair{grid-template-columns:1fr}}
/* ── 생성 모달: 라이브 예상 제작 시간/크레딧 줄(그리드 아래 full-width) ── */
.gen-estimate{margin-top:14px;font-size:13px;line-height:1.5;color:var(--sub);min-height:18px}
.gen-estimate:empty{display:none}
.gen-estimate b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.gen-estimate.over{color:var(--danger)}
.gen-estimate.over b{color:var(--danger)}
/* ── 게이트 2단계: 콘티 플랜 검토·편집(생성 모달 안) ── */
.plan-review-head{margin-bottom:14px}
.plan-review-title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.plan-review-lead{margin:0;font-size:12.5px;line-height:1.5;color:var(--sub)}
.plan-cuts{display:flex;flex-direction:column;gap:12px}
/* 내레이션 음성 동시 생성(기본 ON) — 확정 시 대본 있는 컷당 20cr 합산(이중 컨펌 고지) */
.plan-vo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.plan-vo-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer}
.plan-vo-check input{accent-color:var(--accent)}
.plan-vo-hint{font-size:11.5px;color:var(--sub)}
.plan-vo-sel{margin-left:auto;font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);max-width:220px}
/* ④-2 생성 토글 + 참고 픽커(EXEC-brand-canon §5) — .plan-vo와 짝을 이루는 카드, 기존 토큰만 사용 */
.canon-ref-picker{margin-top:8px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.canon-ref-lbl{font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:8px}
.canon-ref-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer;padding:4px 0}
.canon-ref-item input{accent-color:var(--accent)}
.canon-ref-item input:disabled{cursor:not-allowed}
.canon-ref-picker.disabled{opacity:.45}
.canon-ref-picker.disabled .canon-ref-item{cursor:not-allowed}
/* 스토리 검토 제안(T4) — 컷 카드 위 안내 박스(제안일 뿐 자동 적용 없음) */
.plan-story-notes{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-lg);background:var(--accent-soft);padding:10px 13px}
.plan-story-notes-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.plan-story-note{font-size:12.5px;line-height:1.55;color:var(--sub)}
.plan-one-take-note{margin:8px 0 0;padding:8px 10px;border-radius:9px;background:var(--accent-soft);color:var(--ink)}
.plan-story-notes>summary{cursor:pointer;list-style-position:inside}
.plan-story-notes:not([open])>summary{margin-bottom:0}
.plan-suggestion-body{display:flex;flex-direction:column;gap:7px;padding-top:5px}
.plan-suggestion-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line)}
.plan-suggestion-item:first-of-type{border-top:0}
.plan-sugg-check{flex:0 0 auto;accent-color:var(--accent)}
.plan-suggestion-anchor{flex:1 1 260px;min-width:0;padding:0;border:0;background:none;color:var(--sub);font:inherit;line-height:1.55;text-align:left;cursor:pointer}
.plan-suggestion-anchor:hover{color:var(--ink);text-decoration:underline}
/* 인스펙터 안(이미 그 컷이 열려 있음)에서는 앵커가 아니라 본문 텍스트다 */
.plan-sugg-note{flex:1 1 220px;min-width:0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.plan-suggestion-action,.plan-suggestion-dismiss,.plan-suggestion-state{flex:0 0 auto;white-space:nowrap}
.plan-suggestion-dismiss{padding:5px;border:0;background:none;color:var(--sub);font:inherit;cursor:pointer}
.plan-suggestion-dismiss:hover{color:var(--danger)}
.plan-suggestion-state{padding:2px 7px;border-radius:999px;background:var(--panel2);color:var(--sub);font-size:11px;font-weight:700}
.plan-suggestion-item.is-applied .plan-suggestion-anchor,.plan-suggestion-item.is-resolved .plan-suggestion-anchor,
.plan-suggestion-item.is-applied .plan-sugg-note,.plan-suggestion-item.is-resolved .plan-sugg-note{text-decoration:line-through;opacity:.7}
.plan-suggestion-item.is-dismissed{opacity:.52}
.plan-suggestion-batch{align-self:flex-end}
.plan-evidence-box{border-left-color:var(--accent2)}
.plan-evidence-limit,.plan-evidence-status{font-size:11.5px;line-height:1.45;color:var(--sub)}
.plan-evidence-file{max-width:100%;font-size:12px;color:var(--sub)}
.plan-evidence-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.plan-fix-warning{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 9px;padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.4;background:var(--danger-soft);border:1px solid var(--line)}
.plan-fix-warning .ps-msg{flex:1 1 240px;min-width:0;color:var(--ink)}
/* scroll-margin-top: 포커스 이동(Tab)이 카드를 스크롤 컨테이너 최상단에 붙여 상단 요소에 가리는 것을 막는다 */
.plan-cut{scroll-margin-top:12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:12px 13px;box-shadow:var(--shadow-card)}
.plan-cut.plan-cut-warning{border-color:var(--danger)}
.plan-cut-focus,.plan-cut-changed{animation:plan-card-pulse 1.2s ease both}
.plan-cut-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.plan-cut-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:700}
.plan-role-badge{flex:0 0 auto;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--sub);font-size:11.5px;font-weight:600}
.plan-cut-sp{flex:1 1 auto;min-width:8px}
.plan-mini{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--sub);font-size:15px;font-weight:600;line-height:1;cursor:pointer;font-family:inherit;transition:background .14s ease,border-color .14s ease,color .14s ease}
.plan-mini:hover:not(:disabled){background:var(--panel2);color:var(--ink)}
.plan-mini:disabled{opacity:.4;cursor:not-allowed}
.plan-mini:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.plan-mini.plan-del:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.plan-row{margin-bottom:9px}
.plan-row:last-child{margin-bottom:0}
.plan-row .field-label{margin-bottom:5px}
.plan-cut input[type=text],.plan-cut textarea{width:100%;box-sizing:border-box;background:var(--field);border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);padding:8px 10px;font-family:inherit;font-size:13px;line-height:1.5;outline:none;transition:border-color .14s ease,box-shadow .14s ease}
.plan-cut textarea{resize:vertical;min-height:42px}
.plan-cut input[type=text]:focus,.plan-cut textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.plan-dur-row{display:flex;align-items:center;gap:10px}
.plan-dur-row .field-label{margin-bottom:0}
.plan-dur{width:84px;flex:0 0 auto;height:36px;text-align:center;background:var(--field);border:1px solid var(--line-strong);border-radius:9px;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);outline:none;-moz-appearance:textfield}
.plan-dur::-webkit-outer-spin-button,.plan-dur::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.plan-dur:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.plan-add{margin-top:12px;width:100%;justify-content:center}
.plan-add:disabled{opacity:.45;cursor:not-allowed}
/* ★화면·모션 = 핵심 편집 필드 강조(accent 좌측 보더 + accent 라벨). 입력 배경은 그대로 둬 텍스트 대비 유지 */
.plan-row-primary{border-left:3px solid var(--accent);padding:2px 0 2px 10px;margin-left:-1px}
.plan-row-primary .field-label{color:var(--accent);font-weight:700}
.plan-hint{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;color:var(--sub)}
/* ── 검토 단계 재설계: 와이드 모달 + 아웃라인(축소) ↔ 인스펙터(확대) 2단 ── */
.gen-wide{width:min(860px,100%)}
/* ★요약 바는 정적이다. 종전 position:sticky + z-index:4 는 스크롤된 컷 카드의 ↑↓× 를 덮어
   클릭을 가로챘다(elementFromPoint = .plan-review-sum). 2단 배치로 긴 스크롤 자체가 사라져
   스티키가 필요 없어졌으므로, 겹침의 원인을 남기지 않고 제거한다. */
.plan-review-sum{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 12px;font-size:12.5px;color:var(--sub)}
.plan-review-sum:empty{display:none}
.sum-chip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 10px;border-radius:999px;background:var(--panel2);font-size:11.5px;color:var(--sub)}
.sum-chip b{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
.sum-chip.is-cost{background:var(--accent-soft)}
.sum-chip.is-cost b{color:var(--accent)}
.sum-chip.sum-over{background:var(--danger-soft);color:var(--danger)}
.sum-chip.sum-over b{color:var(--danger)}
button.sum-chip{border:1px solid var(--danger);font-family:inherit;font-weight:600;cursor:pointer}
button.sum-chip:hover{background:var(--danger);color:var(--on-accent)}
button.sum-chip:hover b{color:var(--on-accent)}
button.sum-chip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.plan-sum-sp{flex:1 1 auto;min-width:0}
.plan-review-sum.plan-sum-flash{animation:plan-sum-pulse .8s ease}
/* 전역 제안은 '모아보기' 칩 하나로 접어 둔다 — 각 제안의 정위치는 자기 컷 인스펙터다 */
.plan-sugg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);
  font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer}
.plan-sugg-chip:hover{background:var(--accent2-soft)}
.plan-sugg-chip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.plan-review-split{display:grid;grid-template-columns:236px minmax(0,1fr);gap:14px;align-items:start}
.plan-rail{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:2px;background:var(--panel)}
.plan-rail-lbl{padding:0 4px 3px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.plan-rail-list{display:flex;flex-direction:column;gap:3px;min-width:0;max-height:min(50vh,420px);overflow-y:auto}
.plan-rail-item{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;
  width:100%;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:none;
  font:inherit;text-align:left;color:var(--sub);cursor:pointer;
  transition:background .14s ease,border-color .14s ease}
.plan-rail-item:hover{background:var(--panel2)}
.plan-rail-item[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.plan-rail-item:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.plan-rail-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--faint)}
.plan-rail-item[aria-selected="true"] .plan-rail-num{color:var(--accent)}
.plan-rail-txt{min-width:0}
/* 역할(훅·문제·해결·증거·클로징)이 스토리 흐름의 척추 — 스캔 앵커로 승격한다 */
.plan-rail-role{display:block;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--accent)}
.plan-rail-msg{display:block;font-size:11.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-rail-meta{display:flex;align-items:center;gap:5px}
.plan-rail-dot{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:9.5px;font-weight:700}
.plan-rail-dot.is-warn{background:var(--danger)}
.plan-rail-dur{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.plan-rail-item[aria-selected="true"] .plan-rail-dur{color:var(--sub)}
/* 인스펙터: 선택된 컷 하나만 완전한 편집 폼으로 */
.plan-pane-nav{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.plan-pane-pos{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
/* 제안을 자기 컷에 귀속 — 고칠 내용을 보면서 고친다 */
.plan-cut-sugg{margin:2px 0 10px;padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:9px;background:var(--accent-soft)}
.plan-cut-sugg-t{margin-bottom:6px;font-size:11.5px;font-weight:700;color:var(--accent)}
/* ── 협업(팀 워크스페이스) — 초안은 org 공유 자원이다 ──
   ★프레즌스·코멘트는 아직 콘티 단계(presence.js/comments.js, index.html 전용) 전용이고
   스토리보드 단계에는 없다. 플랜 컷 id는 신규 컷에서 ""이고 저장 시 서버가 재키하므로 컷 앵커가
   불안정해 지금 앵커형 협업을 얹으면 안 된다. 아래는 (a)역할 반영 (b)동시 저장 충돌 복구 두 가지와,
   장차 컷별 프레즌스/코멘트 배지가 들어갈 .plan-rail-meta 슬롯의 스타일만 미리 둔다. */
.plan-collab-note{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 11px;padding:8px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel2);font-size:12px;line-height:1.5;color:var(--sub)}
.plan-collab-note.is-stale{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.plan-collab-note .btn{flex:0 0 auto;white-space:nowrap}
.plan-collab-note b{color:var(--ink)}
.plan-rail-lock{display:inline-grid;place-items:center;min-width:15px;height:15px;border-radius:999px;
  background:var(--panel2);color:var(--sub);font-size:9.5px;font-weight:700}
.plan-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:9px}
.plan-top>.plan-row{flex:1 1 auto;min-width:0;margin-bottom:0}
.plan-top>.plan-dur-row{flex:0 0 auto}
.plan-fit-hint{margin:-3px 0 9px}
.plan-fit-hint:empty{display:none}
.plan-fit-delta,.plan-fit-shrink{display:inline-flex;width:max-content;max-width:100%;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;cursor:help}
.plan-fit-shrink{cursor:pointer}
.plan-fit-warning{color:var(--danger);font-weight:700}
.plan-dur-flash{animation:plan-dur-pulse .8s ease}
@keyframes plan-dur-pulse{0%,100%{box-shadow:none}35%{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}}
@keyframes plan-sum-pulse{35%{background:var(--accent-soft)}}
@keyframes plan-card-pulse{30%{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}}
/* WP5 재배치 칩 · WP7 편집 프리플라이트 — 인스펙터 인라인(비차단·평문) */
.retime-chip,.edit-preflight{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0;padding:8px 11px;
  border-radius:9px;font-size:12.5px;line-height:1.4;background:rgba(42,79,224,.06);border:1px solid rgba(42,79,224,.16)}
.edit-preflight{background:rgba(224,142,42,.08);border-color:rgba(224,142,42,.22)}
.retime-chip .rt-msg,.edit-preflight .pf-msg{flex:1 1 200px;min-width:0;color:var(--ink)}
.retime-chip .btn,.edit-preflight .btn{flex:0 0 auto;white-space:nowrap}
/* WP6-1 연속 컷 분할(체인) — 검토 화면 배지·제안 카드 */
.plan-chain-badge{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;cursor:pointer;color:var(--accent);background:rgba(42,79,224,.1);border:1px solid rgba(42,79,224,.22)}
.plan-chain-badge:hover{background:rgba(42,79,224,.16)}
.plan-chain-off{color:var(--sub);background:var(--panel2);border-color:var(--line)}
.plan-split-prop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 9px;padding:8px 11px;border-radius:9px;
  font-size:12.5px;line-height:1.4;background:rgba(42,79,224,.06);border:1px solid rgba(42,79,224,.16)}
.plan-split-prop .ps-msg{flex:1 1 240px;min-width:0;color:var(--ink)}
.plan-split-prop .btn{flex:0 0 auto;white-space:nowrap}
.plan-duo{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.plan-duo>.plan-row{margin-bottom:0;min-width:0}
@media(max-width:700px){   /* 좁은 폭: 아웃라인을 가로 칩 스트립으로 접는다(2단 유지 불가) */
  .plan-review-split{grid-template-columns:1fr;gap:11px}
  .plan-rail{position:static}
  .plan-rail-list{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    padding-bottom:4px;scroll-snap-type:x proximity}
  .plan-rail-item{flex:0 0 auto;width:auto;max-width:220px;scroll-snap-align:start}
  .plan-rail-msg{max-width:130px}
}
@media(max-width:640px){
  .plan-duo{grid-template-columns:1fr;row-gap:9px}
  .plan-top{flex-wrap:wrap}
  .plan-suggestion-item{align-items:flex-start}
  .plan-suggestion-anchor{flex-basis:calc(100% - 34px)}
  .plan-suggestion-action,.plan-suggestion-dismiss,.plan-evidence-actions .btn{flex:1 1 auto;justify-content:center}
  .plan-evidence-actions{align-items:stretch}
  .plan-pane-nav .btn{flex:1 1 auto;justify-content:center}
}
@media(pointer:coarse){
  .plan-mini{width:40px;height:40px}
  .plan-story-notes>summary,.plan-suggestion-anchor,.plan-suggestion-dismiss{min-height:44px}
  .plan-rail-item{min-height:44px}
}
/* ── 전역 재생: 프레임리스 다크 오버레이 ── */
.player-wrap{background:rgba(8,9,13,.74);backdrop-filter:blur(5px)}
.player{width:min(900px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:14px}
.player-head{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
.player-title{font-size:14px;font-weight:600;color:#fff}
.player-meta{font-family:var(--mono);font-size:11px;color:#9AA0B0}
.player-note{font-size:11.5px;color:#7B8194}
.player-x{width:34px;height:34px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:0;border-radius:9px;cursor:pointer;color:#fff;flex:none;transition:background .14s ease}
.player-x .i{width:18px;height:18px}
.player-x:hover{background:rgba(255,255,255,.2)}
.player-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.player-frame{background:var(--canvas);border-radius:16px;overflow:hidden;border:1px solid #1C2230;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);position:relative}
.player-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--canvas)}
.player-stage svg,.player-stage img.fv{width:100%;height:100%;display:block}
.player-cut{position:absolute;left:16px;top:15px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:600;color:#fff;background:rgba(8,10,18,.55);backdrop-filter:blur(4px);border-radius:6px;padding:4px 9px;pointer-events:none}
.player-cut:empty{display:none}
.player-transport{display:flex;align-items:center;gap:13px;padding:13px 16px;background:#0A0C13;border-top:1px solid #181E2A}
.player-mute{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid #30384A;border-radius:9px;background:#151A25;color:#C9D1E5;cursor:pointer;flex:none}
.player-mute:hover{background:#202737}.player-mute .i{width:18px;height:18px}
.player-play{width:36px;height:36px;display:grid;place-items:center;background:var(--accent);border:0;border-radius:9px;cursor:pointer;flex:none;color:#fff;transition:background .14s ease}
.player-play .i{width:16px;height:16px;color:#fff}
.player-play:hover{background:#3358ea}
.player-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.player-transport #playerScrub{flex:1;accent-color:var(--accent);cursor:pointer}
/* width:auto는 전역 .tlabel{width:46px}(에디터의 한 값짜리 "3.5s"용)를 되돌리는 것이다. 이 모달은 같은 클래스를
   "30.9s · 35.1s" 두 값에 재사용하는데 글자는 83px라 37px이 상자 밖으로 나가 MP4 버튼 밑에 겹쳐 찍혔다.
   데스크톱에선 오른쪽이 비어 있어 겹칠 게 없었을 뿐, 넘침 자체는 원래부터 있었다. */
.player-transport .tlabel{font-family:var(--mono);font-size:11.5px;color:#AEB6CC;flex:none;white-space:nowrap;width:auto}
.player-mp4{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:rgba(255,255,255,.08);border:0;border-radius:8px;cursor:pointer;color:#fff;font-size:12px;font-weight:600;font-family:inherit;flex:none;transition:background .14s ease}
.player-mp4 .i{width:14px;height:14px;color:#fff}
.player-mp4:hover{background:rgba(255,255,255,.15)}
.player-mp4:disabled{opacity:.5;cursor:not-allowed}
.player-mp4:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ★2026-07-24 프로드 실측: 전체 재생 모달엔 미디어쿼리가 하나도 없어 좁은 화면 대응이 통째로 빠져 있었다.
   트랜스포트가 nowrap인데 range의 '내재 최소폭'(min-width:auto ≈129px)이 축소를 막아 375px에서 44px 넘쳤고,
   overflow:visible이라 MP4 버튼이 모달 밖 화면 밖으로 흘러나갔다. 축소를 풀고, 좁으면 탐색바를 아랫줄
   전체로 내려 손가락이 쥘 폭을 준다(한 줄에 우겨넣으면 320px에서 탐색바가 39px까지 쪼그라든다). */
.player-transport #playerScrub{min-width:0}
@media(max-width:560px){
  .player-transport{flex-wrap:wrap;row-gap:11px}
  .player-transport #playerScrub{order:9;flex:1 1 100%}
  .player-transport .tlabel{margin-left:auto}
}
/* 컷 썸네일 스트립(정직: 실제 다크 프레임 또는 다크 플레이스홀더 + 컷 번호/라벨) */
.player-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;flex:none}
.player-strip:empty{display:none}
.pstrip-cut{flex:none;width:124px;border-radius:8px;overflow:hidden;border:1px solid #232A3A;background:var(--canvas);cursor:pointer;padding:0;opacity:.62;transition:opacity .14s ease,border-color .14s ease}
.pstrip-cut:hover{opacity:.85}
.pstrip-cut.on{opacity:1;border-color:var(--accent)}
.pstrip-cut:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pstrip-thumb{position:relative;aspect-ratio:16/9;width:100%;background:var(--canvas);display:flex;align-items:center;justify-content:center}
.pstrip-thumb svg,.pstrip-thumb img.fv{width:100%;height:100%;display:block}
.pstrip-ph{font-family:var(--mono);font-size:10px;color:#5B6680}
.pstrip-cap{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#0A0C13;border-top:1px solid #181E2A}
.pstrip-num{font-family:var(--mono);font-size:10px;font-weight:700;color:#9FB2F5;flex:none}
.pstrip-lbl{font-size:10.5px;color:#C5CAD6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ③ conti view (storyboard / structure design, ADR-0008) */
.btn.on{background:rgba(42,79,224,.14);border-color:var(--accent);color:var(--accent)}
.conti{grid-column:1/-1;overflow:auto;padding:18px 22px}
.conti[hidden]{display:none}
.conti-head{font-size:14px;margin-bottom:16px}
.conti-ov{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px;max-width:1100px}
.ov-title{font-weight:800;font-size:16px;margin-bottom:6px}
.ov-meta{font-size:12px;margin-bottom:4px}
.ov-guide{font-size:11px;color:var(--sub)}
.ov-size{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:11px}
.szbtn{background:var(--field);border:1px solid var(--line);color:var(--sub);border-radius:6px;padding:2px 9px;cursor:pointer;font-size:11px;font-family:inherit}
.szbtn:hover{border-color:var(--accent2);color:var(--ink)}
.szbtn.on{background:rgba(42,79,224,.16);border-color:var(--accent2);color:var(--accent2);font-weight:700}
/* version badge */
.rev{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--accent2);background:rgba(42,79,224,.12);border-radius:5px;padding:1px 6px}
/* 재생성 progress overlay */
.conti-row{position:relative}
.regen-busy{position:absolute;inset:0;background:rgba(251,251,250,.86);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:5}
.regen-card{text-align:center;min-width:280px}
.regen-msg{font-size:13px;color:var(--ink);margin-bottom:10px;line-height:1.4}
.regen-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.regen-bar>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--accent),#5B7BFF);border-radius:3px;animation:indet 1.1s ease-in-out infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}
/* 변경 배너 + 행 플래시 */
.changebanner{background:rgba(42,79,224,.12);border:1px solid var(--accent);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:11px;animation:cbfade 7s forwards}
.changebanner b{color:var(--accent);font-size:12px}
.cb-row{margin-top:4px;display:flex;gap:6px}
/* CP1 과금 정직화: 변경 배너 되돌리기(무료) 푸터 + 프라이머리 버튼 위 크레딧 태그 대비 */
.cb-foot{margin-top:8px;display:flex;align-items:center;gap:10px}
.cb-undo{height:26px;padding:0 12px;font-size:11px}
.btn.primary .btn-tag{color:#fff;background:rgba(0,0,0,.32)}   /* accent 버튼 위 배지: 밝은 흰 배경은 흰 글자 대비 부족 → 어두운 오버레이로 가독성 확보 */
.cb-k{flex:0 0 30px;color:var(--sub);font-weight:700}
.cb-now{color:var(--ink)}
.cb-old{color:var(--sub);text-decoration:line-through;opacity:.8}
@keyframes cbfade{0%{opacity:0;transform:translateY(-4px)}6%{opacity:1;transform:none}88%{opacity:1}100%{opacity:.55}}
.conti-row.flash{animation:rowflash 1.4s ease-out}
@keyframes rowflash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:none}}
.sect{flex:0 0 auto;font-size:10px;font-weight:800;color:#fff;background:var(--accent2);border-radius:5px;padding:1px 7px}
.ci-trwrap{font-size:11px;color:var(--sub);white-space:nowrap}
.ci-tr{width:84px}
.conti-list{display:flex;flex-direction:column;gap:14px;max-width:1100px}
.conti-row{position:relative;display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.conti-row.unsaved{box-shadow:inset 0 0 0 2px var(--warn)}
.conti-row.modified{box-shadow:inset 0 0 0 2px var(--accent)}
.conti-still{flex:0 0 auto;width:var(--still-w,300px);aspect-ratio:16/9;align-self:flex-start;background:var(--canvas);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.conti-still svg{width:100%;height:100%;display:block}
/* 리뷰 룸 (P1): 가로 필름스트립 + 단일 컷 포커스 */
.conti-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:16px}
.conti-card{flex:0 0 auto;width:184px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .14s ease,transform .05s ease}
.conti-card:hover{border-color:var(--accent)}
.conti-card:active{transform:translateY(1px)}
.conti-card.sel{border-color:var(--accent2);box-shadow:0 8px 20px -12px rgba(12,14,22,.35)}   /* 레거시 풀사이즈 카드(현행 필름스트립 아님) — 얇은 코발트선+잉크 그림자로 정리 */
.conti-card.unsaved{box-shadow:inset 0 0 0 2px var(--warn)}
/* 썸네일은 playStill이 100ms마다 innerHTML 교체 → 클릭이 교체를 가로지르면 mousedown 타깃이 detach돼
   click이 안 쏨(=여러 번 클릭해야 전환). pointer-events:none로 클릭을 *안정적인 카드 본체*가 받게 함. */
.conti-cardthumb{aspect-ratio:16/9;background:var(--canvas);overflow:hidden;pointer-events:none}
.conti-cardthumb svg{width:100%;height:100%;display:block}
.conti-cardcap{display:flex;align-items:center;gap:6px;padding:6px 9px;font-size:12px}
.cc-num{font-weight:800;color:var(--sub);flex:0 0 auto}
.cc-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cc-dur{flex:0 0 auto;font-size:11px;color:var(--sub)}
.cdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
/* CP7: 색약 대비 — 형태로도 구분(미저장=속 빈 링, 변경됨=채움) */
.cdot.uns{background:transparent;box-shadow:inset 0 0 0 2px var(--warn)} .cdot.mod{background:var(--accent)}
/* 인트로/아웃트로 범퍼 — 필름스트립 칩 · 콘티 토글바 · 포커스 안내 */
.cc-bumper{flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--accent);background:var(--field);border:1px solid var(--accent);border-radius:5px;padding:1px 5px}
.filmstrip .cc-bumper{font-size:8.5px;padding:0 4px}
/* ④-3 핀 컷(EXEC-brand-canon §6): 필름스트립 캡션 인라인 칩 — 절대배치 코너배지(.cl-badge/.cm-badge)와 겹치지 않게 캡션행에 배치 */
.cc-pin{flex:0 0 auto;font-size:10px}
.bumper-bar{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.bumper-bar-lead{font-size:12px;font-weight:700;color:var(--faint)}
.bumper-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sub);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer}
.bumper-toggle:hover{border-color:var(--accent)}
.bumper-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bumper-toggle .bt-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.bumper-toggle.on{color:var(--ink);border-color:var(--accent)}
.bumper-toggle.on .bt-dot{background:var(--accent)}
.bumper-toggle .bt-state{font-size:11px;color:var(--sub)}
.bumper-toggle.on .bt-state{color:var(--accent)}
.gen-bumper-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.gen-bumper-options[hidden]{display:none!important}
.gen-bumper-label{font-size:11px;font-weight:700;color:var(--faint)}
.gen-bumper-options label{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--field);font-size:12px;font-weight:600;color:var(--sub);cursor:pointer}
.gen-bumper-options label:has(input:checked){border-color:var(--accent);color:var(--accent);background:#F4F6FF}
.gen-bumper-options input{accent-color:var(--accent)}
.bumper-focus-note{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sub);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.bumper-focus-note .i{width:14px;height:14px;flex:0 0 auto;opacity:.7}
/* 씬 편집기 2-구역: 좌(프레임 + 그 아래 자막·내레이션) | 우(세부내용: 메시지·텍스트·모션·세부조정). 좁으면 줄바꿈(좌 위 / 우 아래). */
.conti-focus{display:flex;flex-direction:row;flex-wrap:wrap;gap:18px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;max-width:1160px}
.cf-left{flex:1 1 430px;min-width:300px;max-width:560px;display:flex;flex-direction:column;gap:12px}
.conti-focus.unsaved{box-shadow:inset 0 0 0 2px var(--warn)}
.conti-focus.modified{box-shadow:inset 0 0 0 2px var(--accent)}
.conti-focus.flash{animation:rowflash 1.4s ease-out}
.conti-focusstill{position:relative;width:100%;aspect-ratio:16/9;background:var(--canvas);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer}   /* 클릭=재생/일시정지(재생버튼·스페이스와 동일) */
.conti-focusstill svg{width:100%;height:100%;display:block;pointer-events:none}   /* 클릭이 컨테이너로 버블(SVG 내부 요소가 target을 가로채 오버레이 가드에 걸리지 않게) */
.conti-focusstill .still-ph{cursor:default}   /* 로딩·미리보기 없음 상태는 클릭 어포던스 숨김(무동작) */
.conti-focus .conti-body{flex:1 1 380px;min-width:300px;display:flex;flex-direction:column;gap:9px}
.cf-left .ci-review{margin:0}
.rail-head{padding:2px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.rail-head .rh-num{font-weight:800;color:var(--accent2)}
.rail-head .rh-lbl{font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* P4 편집 입자 배지: 컷이 지원하는 편집 정밀도(정밀/구성/맞춤) — 색상 구분 칩 */
.gran{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;cursor:help}
.gran-dots{letter-spacing:1px;font-size:8px;line-height:1}
.gran-precise{color:#0E9E6E;border-color:rgba(15,176,122,.4);background:var(--live-soft)}      /* 정밀 = teal */
.gran-compose{color:var(--accent);border-color:rgba(42,79,224,.4);background:var(--accent-soft)}/* 구성 = 코발트 */
.gran-code{color:#7A4FD0;border-color:rgba(122,79,208,.4);background:rgba(122,79,208,.10)}      /* 맞춤 = 바이올렛 */
/* P3 전역 재생 플레이어: 다크 오버레이 스타일은 모달 섹션(.player-*)에 통합됨 */
.conti-card.playing{box-shadow:0 0 0 2px var(--accent) !important}
/* 세부 조정 — 비-precise 컷 편집 안내(노드편집 무반영 → AI 편집 유도) */
.shotnote{font-size:12.5px;line-height:1.65;color:var(--sub);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.shotnote b{color:var(--ink)}
.still-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px}
.conti-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;font-size:12px}
/* 헤더 행: '변경됨' 배지·코멘트 마커가 늦게 붙어도 프레임 밖 overflow 금지 — 제목이 먼저 줄고, 그래도 좁으면 줄바꿈 */
.conti-rowhead{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0}
.conti-num{background:var(--accent2);color:#fff;border-radius:6px;padding:1px 7px;font-weight:800;font-size:11px}
.conti-rowhead .role{font-size:10px;color:var(--accent);font-weight:700}
.conti-rowhead .grow{flex:1}
.ci-durwrap{font-size:12px;color:var(--sub);white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px}
.ci-badge{flex:0 0 auto;display:inline-flex;align-items:center}
.ci-badge:empty{display:none}   /* 빈 배지 자리가 gap을 두 번 먹지 않게 — 배지 등장 전후 간격 동일 */
/* min-width:0 — input은 min-width:auto가 '내재 최소폭'(≈168px)이라 flex 축소를 막는다. 그 탓에 좁은
   화면에서 행이 안 줄고 상자가 카드 밖으로 밀려났다(2026-07-24 320px 실측). 넓은 폭에선 무해하다. */
.ci-f{background:var(--field);border:1px solid var(--line);border-radius:7px;color:var(--ink);font-family:inherit;font-size:13.5px;padding:6px 10px;line-height:1.4;min-width:0}
.ci-f:focus{border-color:var(--accent2);outline:none}
.ci-label{font-weight:700;flex:1 1 90px;width:auto;min-width:70px;max-width:220px}   /* basis 90: 배지·마커가 붙어도 한 줄 유지(제목이 양보) — intrinsic basis면 wrap이 shrink보다 먼저 발동 */
.ci-dur{width:62px;text-align:right;font-family:var(--mono)}
.ci-dur.saving,.sdurin.saving{border-color:var(--accent2);box-shadow:0 0 0 2px var(--accent-soft)}   /* 시간 조절 저장 대기(디바운스) 표시 */
.ci-line{display:flex;gap:8px;align-items:flex-start}
.ci-k{flex:0 0 104px;color:var(--sub);padding-top:6px;font-size:13px;font-weight:600;line-height:1.3;display:flex;flex-direction:column;gap:1px}
.ci-k > .ci-khint{white-space:normal}
.ci-kl{font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap;line-height:1.3}
.ci-msg{flex:1}
.ci-script{flex:1;resize:vertical;line-height:1.4}
.ci-objs{flex:1;display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;padding-top:3px}
.ci-objsec{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.objnote{line-height:1.55;padding:5px 2px}
.objnote b{color:var(--ink)}
.objmoment{font-size:10px;font-weight:700;color:var(--accent);margin-top:4px;padding-left:58px}
.objrow{display:flex;align-items:center;gap:6px}
.objkind{flex:0 0 52px;font-size:10px;color:var(--sub);font-weight:700;text-align:right}
.objc{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:inherit;font-size:12px;padding:3px 8px}
.objc:focus{border-color:var(--accent2);outline:none}
.objtog{display:flex;gap:3px;flex:0 0 auto}
.objtog .chip{font-size:10px;padding:2px 7px}
.objdel{flex:0 0 auto;background:transparent;border:none;color:var(--sub);cursor:pointer;font-size:12px;padding:0 4px}
.objdel:hover{color:var(--warn)}
.objadd{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;padding-left:58px}
.objadd .chip.add{font-size:10px;color:var(--accent2);background:rgba(42,79,224,.1);padding:2px 8px}
.obj{display:inline-flex;align-items:center;gap:4px}
.obj b{color:var(--ink);font-weight:700}
.achip{font-style:normal;font-size:10px;color:var(--accent);background:rgba(42,79,224,.12);border-radius:4px;padding:0 5px;margin-left:2px}
.achip.fx{color:var(--accent2);background:rgba(42,79,224,.14)}
/* ---- 화면·모션 = prose-first (자연어) + 거울 + AI 반영; 세부 조정은 접힘 ---- */
.ci-line.shot{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.ci-khint{display:block;font-size:12px;color:var(--sub);font-weight:500;margin-top:3px;line-height:1.35;letter-spacing:0}   /* --faint(#8C8E96≈2.9:1 라이트)는 가독성 미달 → --sub로 AA 확보(유저 가독성 요청) */
.shotprose{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.shotmirror{display:flex;gap:6px;align-items:flex-start;font-size:11px;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.mirrortext{color:var(--accent);white-space:pre-line;line-height:1.45}
.shotapply{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ai-apply{background:linear-gradient(135deg,#2A4FE0,#5B7BFF);color:#fff;border:none;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.ai-apply:hover{filter:brightness(1.08)}
.shotadv{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015)}
.shotadv>summary{cursor:pointer;font-size:12.5px;color:var(--sub);padding:9px 11px;user-select:none;list-style:none}
.shotadv>summary::-webkit-details-marker{display:none}
.shotadv>summary:before{content:"▸ ";color:var(--accent2)}
.shotadv[open]>summary:before{content:"▾ "}
.shotadv[open]>summary{border-bottom:1px solid var(--line);color:var(--ink)}
.shotadv .shotspec{padding:10px}
.shotspec{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.shotmoment{display:flex;flex-direction:column;gap:5px;border-left:2px solid var(--line);padding-left:10px}
.shotsub{font-size:10px;font-weight:800;color:var(--sub);letter-spacing:.04em;margin-top:3px}
.muted.small{font-size:12px}
/* layout tree */
.laytree{display:flex;flex-direction:column;gap:1px;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.laycon{font-size:10px;color:var(--accent2);font-weight:700;padding:1px 0}
.laykind{opacity:.85}
.layleaf{display:flex;align-items:center;gap:6px;font-size:11px;padding:1px 0}
.layord{flex:0 0 16px;height:16px;line-height:16px;text-align:center;font-size:9px;font-weight:700;color:var(--bg);background:var(--accent);border-radius:50%}
.laytag{flex:0 0 auto;color:var(--sub);font-weight:700;font-size:10px}
.laytxt{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* per-object motion row */
.mrow{display:flex;flex-direction:column;gap:2px}
.objmv{flex:0 0 auto;background:transparent;border:none;color:var(--sub);cursor:pointer;font-size:9px;padding:0 2px}
.objmv:hover{color:var(--accent2)}
.objdata{display:flex;gap:6px;align-items:center;padding-left:58px;font-size:11px;color:var(--sub);flex-wrap:wrap}
.dlabel{font-size:9px;font-weight:800;color:var(--accent2);background:rgba(42,79,224,.12);border-radius:4px;padding:1px 5px}
.objdata input{background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:inherit;font-size:12px;padding:2px 7px}
.objpts{min-width:140px}.objxs{min-width:120px}.objfrac{width:70px}
.objnl{display:flex;gap:5px;padding-left:58px;align-items:center}
.objnlin{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--ink);font-family:inherit;font-size:12px;padding:3px 8px}
.objnlin:focus{border-color:var(--accent2);outline:none}
.objnlbtn{flex:0 0 auto;background:rgba(42,79,224,.12);border:1px solid var(--accent);color:var(--accent);border-radius:6px;font-size:10px;font-weight:700;padding:3px 9px;cursor:pointer;white-space:nowrap}
.objnlbtn:hover{background:rgba(42,79,224,.2)}
.objmotion{font-size:10px;color:var(--sub);padding-left:58px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mlabel{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;line-height:1.2;font-size:9px;font-weight:800;color:var(--accent);background:rgba(42,79,224,.12);border-radius:4px;padding:1px 5px}
.beatsel{color:var(--sub)}
.beatdd{background:var(--field);border:1px solid var(--line);color:var(--ink);border-radius:5px;font-size:10px;padding:1px 4px;font-family:inherit;max-width:170px}
/* scene direction */
.scenedir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;padding:5px 0 2px}
.sdur{color:var(--sub)}
.sdurin{width:56px;background:var(--field);border:1px solid var(--line);color:var(--ink);border-radius:6px;font-family:inherit;font-size:11px;padding:2px 6px}
.chip.sflag,.chip.scam{cursor:pointer;font-size:10px}
.chip.sflag.cur,.chip.scam.cur{background:rgba(42,79,224,.16);color:var(--accent2);border-color:var(--accent2)}
.shotconn{font-size:10px;color:var(--accent2);background:rgba(42,79,224,.08);border-radius:6px;padding:3px 8px}
.ci-dir{flex:0 0 auto;resize:none;line-height:1.5;min-height:54px;max-height:240px;overflow-y:auto}   /* auto-grow(JS): 텍스트에 맞춰 늘어남 — flex-grow 제거해 명시 height가 반영되게 */
.conti-actions{display:flex;gap:6px;align-items:center;margin-top:4px}
.conti-ctrls{display:flex;gap:5px}
.conti-ctrls button{background:var(--field);border:1px solid var(--line);color:var(--sub);border-radius:6px;padding:3px 9px;cursor:pointer;font-size:12px}
.conti-ctrls button:hover:not(:disabled){border-color:var(--accent2);color:var(--ink)}
.conti-ctrls button:disabled{opacity:.35;cursor:default}
/* 프리뷰: 디자인 = 스테이지 가운데 큰 다크 16:9, 라운드 14·헤어라인·드롭섀도. flex:1로 가용공간 채움. */
.screen-wrap{position:relative;width:100%;max-width:none;aspect-ratio:16/9;max-height:100%;flex:1 1 auto;margin:14px auto 0;border-radius:14px;overflow:hidden;border:1px solid #1C2230;background:var(--canvas);box-shadow:0 24px 60px -28px rgba(0,0,0,.5)}
.screen,.overlay{position:absolute;inset:auto;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}
.screen svg,.screen img.fv{width:100%;height:100%;display:block}
.screen img.fv{object-fit:contain}
.source-media-preview{position:absolute;inset:0;display:grid;place-items:center;background:#02070c;overflow:hidden}
.source-media-video{display:block;width:100%;height:100%;object-fit:contain;background:#02070c}
.source-media-poster,.source-media-edit-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.source-media-poster{background:#02070c;z-index:1}
.source-media-edit-layer{z-index:2}
.source-media-poster svg,.source-media-edit-layer svg,.source-media-poster img.fv{width:100%;height:100%;display:block}
/* touch-action:none — 영역 드래그를 브라우저 스크롤이 가로채지 않게(터치 전용 속성, 마우스 무영향).
   이게 없으면 터치 드래그가 시작되자마자 pointercancel로 끊겨 모바일 영역 지정이 불가능하다. */
.overlay{cursor:crosshair;touch-action:none}
.ovbox{position:absolute;border:1px solid transparent;border-radius:3px}
.ovbox:hover{border-color:rgba(42,79,224,.6);background:rgba(42,79,224,.08)}
.ovbox.sel{border-color:var(--accent);background:rgba(42,79,224,.14);box-shadow:0 0 0 1px var(--accent)}
/* 체험 전용: 수정이 반영된 영역 상시 하이라이트(teal=성공) — 클릭·드래그를 막지 않는다 */
.demo-accent{position:absolute;pointer-events:none;z-index:8;border:2px solid rgba(15,176,122,.85);border-radius:10px;background:rgba(15,176,122,.12);box-shadow:0 0 0 4px rgba(15,176,122,.16),0 0 22px rgba(15,176,122,.3);animation:demoAccentIn .5s ease-out}
.demo-accent-lbl{position:absolute;top:-24px;left:0;font-size:11px;font-weight:700;color:#fff;background:var(--live);padding:2px 8px;border-radius:999px;white-space:nowrap}
@keyframes demoAccentIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ovbox.hi{border-color:rgba(42,79,224,.6);background:rgba(42,79,224,.08)}
.ovbox.subbox{border:1px dashed rgba(42,79,224,.5);border-radius:4px}
.ovbox.subbox:hover{border-color:var(--accent);background:rgba(42,79,224,.1)}
.ovbox.subbox.sel{border:2px solid var(--accent);background:rgba(42,79,224,.16);box-shadow:0 0 0 1px var(--accent)}
.ovbox .lbl{position:absolute;top:-17px;left:0;font-size:10px;background:var(--accent);color:var(--on-accent);padding:1px 5px;border-radius:4px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none}
.ovbox:hover .lbl,.ovbox.sel .lbl{opacity:1}
/* direct manipulation: 드래그-재정렬 + 리사이즈 (flow 존중 — 위치 이동 아님) */
.ovbox{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ovbox.dm-dragging{opacity:.5;z-index:90;cursor:grabbing}
/* 공간 NL 편집(코드 컷): 영역 드래그 선택 */
.overlay.region-mode{cursor:crosshair;user-select:none;-webkit-user-select:none}
.ci-regen.precision-regen-guide{animation:precision-regen-guide 1.05s ease-in-out 3}
@keyframes precision-regen-guide{0%,100%{box-shadow:0 0 0 0 rgba(43,212,160,0)}50%{box-shadow:0 0 0 7px rgba(43,212,160,.34)}}
/* ── 캔버스 유휴 어포던스: '드래그해 수정할 영역 지정'을 화면 한가운데 크고 명확하게.
   재생 중(.is-playing)·드래그 중(.is-selecting)엔 자동으로 사라져 영상을 가리지 않음. pointer-events:none로 드래그/클릭 통과. ── */
.region-idle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:11px;padding:22px 28px;border:1.5px dashed rgba(122,150,255,.62);border-radius:16px;background:rgba(9,12,20,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 12px 34px -10px rgba(0,0,0,.62);color:#fff;text-align:center;pointer-events:none;z-index:60;max-width:82%;opacity:1;transition:opacity .28s ease}
.region-idle .ri-ic{width:32px;height:32px;color:#93A8FF;stroke-width:1.55}
.region-idle .ri-t{font-size:14px;font-weight:700;letter-spacing:-.01em}
.region-idle .ri-s{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.68);line-height:1.55;max-width:32ch}
.screen-wrap.is-playing .region-idle,.screen-wrap.is-selecting .region-idle{opacity:0}
@media (prefers-reduced-motion:reduce){.region-idle{transition:none}.ci-regen.precision-regen-guide{animation:none;box-shadow:0 0 0 4px rgba(43,212,160,.34)}}
.region-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(10,13,20,.92);backdrop-filter:blur(5px);color:rgba(255,255,255,.92);font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);box-shadow:0 2px 12px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;z-index:80}
.region-hint b{color:#fff;font-weight:700}
.region-box{position:absolute;border:2px solid var(--accent);background:rgba(42,79,224,.13);border-radius:4px;box-sizing:border-box;z-index:70}
.region-box.region-dragging{pointer-events:none}
.region-lbl{position:absolute;left:0;top:-20px;font-size:11px;font-weight:700;color:var(--accent);background:rgba(8,12,20,.85);padding:1px 6px;border-radius:4px;white-space:nowrap}
.region-clear{position:absolute;right:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.region-clear:hover{border-color:var(--accent);color:var(--accent)}
/* 영역 위 손그림 주석(스케치 → 이미지로 AI에 의도 전달) */
.region-box.draw{border-style:dashed}
.region-draw{position:absolute;inset:0;cursor:crosshair;touch-action:none;z-index:1;border-radius:2px}
.region-draw:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.region-box.draw .region-lbl,.region-box.draw .region-clear{z-index:3}
.region-tools{position:absolute;left:0;bottom:-34px;display:flex;gap:4px;z-index:3}
.region-tools .rt{min-width:28px;height:26px;padding:0 7px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(8,12,20,.92);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.region-tools .rt:hover{border-color:var(--accent)}
.region-tools .rt.on{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.region-tools .rt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tgt-clear{margin-left:8px;font-size:11px;background:transparent;border:1px solid var(--line);color:var(--sub);border-radius:6px;padding:1px 7px;cursor:pointer}
.tgt-clear:hover{border-color:var(--accent);color:var(--accent)}
.ovbox.dm-drop{border-color:var(--accent2);background:rgba(42,79,224,.18);box-shadow:0 0 0 2px var(--accent2)}
.rs-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;background:var(--accent);border:2px solid #fff;cursor:nwse-resize;z-index:80;box-shadow:0 1px 3px rgba(0,0,0,.45);touch-action:none}
.rs-handle:hover{transform:scale(1.25)}
.rs-handle:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.dm-badge{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:12px;padding:3px 9px;border-radius:6px;z-index:9999;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.rs-handle:hover{transform:none}}
/* 트랜스포트 — 디자인: 코발트 정사각 재생 + 시간(모노) + 채워지는 진행바 */
.transport{display:flex;align-items:center;gap:14px;max-width:none;margin:8px auto 0;padding:8px 2px 0;width:100%;flex:none}
.audio-mute{width:38px;height:38px;justify-content:center;padding:0;flex:0 0 auto}.audio-mute .i{width:18px;height:18px}
.audio-state{font-size:11px;color:var(--muted);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.audio-state:empty{display:none}
.transport #play{width:38px;height:38px;justify-content:center;padding:0;flex:0 0 auto;background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:10px;font-size:15px}
.transport #play:hover{background:var(--accent-h);border-color:var(--accent-h)}
.transport input[type=range]{flex:1;accent-color:var(--accent)}
.tlabel{font-family:var(--mono);font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;width:46px;text-align:right}

/* inspector */
.insp-empty{color:var(--ink);font-size:13px;line-height:1.7;padding:18px 14px 16px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-bottom:2px}
.insp-empty b{color:var(--ink);font-weight:700}
.insp-empty .ie-ex{display:block;margin-top:8px;font-size:12.5px;color:var(--sub);line-height:1.6}
.sel-head{font-weight:800;font-size:15px;margin-bottom:2px}
.sel-meta{font-size:12px;color:var(--sub);margin-bottom:14px}
.sel-meta .pill{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:2px 8px;margin-right:4px}
.grp{margin-bottom:16px}
.grp h4{margin:0 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.grp .row{margin-top:2px}
.row{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer;font-weight:600;font-size:13px}
.chip:hover{border-color:var(--accent)}
.sw{width:26px;height:26px;border-radius:6px;border:2px solid var(--line);cursor:pointer}
.txtin,.chatin{width:100%;background:var(--field);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px;font-family:inherit;font-size:13px}
.chatrow{display:flex;gap:6px;margin-top:6px}
.chatrow .btn{flex:none}
.tgt-banner{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:7px;padding:8px 10px;margin-bottom:6px;line-height:1.5}
.tgt-kind{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--accent2);background:rgba(42,79,224,.14);padding:1px 6px;border-radius:5px}
.tgt-kind.field{color:var(--accent);background:rgba(42,79,224,.16)}
.tgt-val{font-variant-numeric:tabular-nums;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:5px;padding:0 6px}
.tgt-of{color:var(--sub);font-size:12px}
.chat-tgt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub);margin-bottom:8px;padding:6px 10px;background:var(--panel2);border-radius:8px;border:1px solid var(--line)}
.chat-tgt .tgt-ico{width:14px;height:14px;color:var(--accent);flex:0 0 auto}
.chat-tgt b{color:var(--ink);font-weight:700}
.chat-tgt .tgt-of{color:var(--faint)}
.ai-edit-compare{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-1px 0 8px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:11.5px;color:var(--sub)}
.ai-edit-compare[hidden]{display:none}
.ai-edit-compare .compare-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:650}
.ai-edit-compare .compare-actions{display:flex;gap:6px;flex:0 0 auto}
.ai-edit-compare .btn{min-height:44px;padding:7px 10px;font-size:11.5px;touch-action:none}
.scope-note{font-size:12px;color:var(--accent);background:rgba(42,79,224,.1);border-radius:7px;padding:7px 9px;margin-bottom:12px}
/* moment-scoped scope-chat conversation */
.chat-panel{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;min-height:200px}
.chat-log{flex:1;overflow:auto;max-height:34vh;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.chat-empty{color:var(--sub);font-size:12.5px;text-align:center;padding:22px 14px;line-height:1.6;max-width:34ch;margin:0 auto}
.cmsg{max-width:92%;font-size:12px;line-height:1.4;border-radius:9px;padding:6px 9px}
.cmsg.user{align-self:flex-end;background:var(--accent2);color:#fff;border-bottom-right-radius:3px}
.cmsg.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:3px}
.cmsg.ai.err{border-color:var(--warn);color:var(--warn)}
.cmsg-tgt{font-size:10px;opacity:.85;margin-bottom:2px}
.cmsg-tgt .tgt-kind,.cmsg-tgt .tgt-val,.cmsg-tgt .tgt-of{background:rgba(255,255,255,.18);color:#fff;border:none}
.cmsg-txt{white-space:pre-wrap;word-break:break-word}
.chat-box{padding-top:12px;border-top:1px dashed var(--line);margin-top:10px}
.chat-box .chatrow{gap:7px;margin-top:0}
.chat-box textarea{flex:1;width:100%;min-height:76px;background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 12px;font-family:inherit;font-size:13.5px;line-height:1.55;resize:none;transition:border-color .15s ease,box-shadow .15s ease}
.chat-box textarea::placeholder{color:var(--faint);opacity:1}
.chat-box textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* opacity 단독은 "왜 안 눌리는지"를 말해주지 않는다 — 커서까지 함께 알린다(다른 :disabled 규칙 20곳과 동일 관용구).
   편집 지시창은 생성 중 잠기는 자리라 이 신호가 특히 필요하다. */
.chat-box textarea:disabled{opacity:.5;cursor:not-allowed}
/* 입력 아래 액션 줄: 좌측 키 힌트 · 우측 전송(입력이 패널 전폭을 쓰도록 버튼을 아래로 분리) */
.chat-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.chat-actions .btn.primary{flex:0 0 auto;padding:8px 15px;font-size:13px}
.chat-hint{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:-.01em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.chat-hint kbd{font-family:var(--mono);font-size:10px;color:var(--sub);background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;margin:0 1px}

/* feedback round 1 additions */
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.dirty-flag{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.dirty-flag.is-saved{color:#0E9F6E;background:rgba(15,176,122,.12);border-color:rgba(15,176,122,.32)}   /* 자동저장 완료(기본) */
.dirty-flag.is-saving{color:#B26B22;background:rgba(224,131,58,.12);border-color:rgba(224,131,58,.4)}     /* 저장 중… */
.dirty-flag.is-unsaved{color:var(--warn);background:rgba(224,131,58,.12);border-color:rgba(224,131,58,.4)} /* 저장 안 됨(영속 실패 등 예외) */
@media (prefers-reduced-motion:reduce){.dirty-flag{transition:none}}
/* rail: edited badge + per-cut delete + add button */
.cut-h .right{display:flex;align-items:center;gap:6px}
.badge-edit{font-size:10px;font-weight:800;color:var(--warn);background:rgba(224,131,58,.15);padding:1px 6px;border-radius:10px}
.badge-unsaved{font-size:11px;font-weight:800;color:var(--warn);background:rgba(224,131,58,.16);padding:1px 6px;border-radius:10px;white-space:nowrap}
.badge-mod{font-size:11px;font-weight:800;color:var(--accent);background:rgba(42,79,224,.16);padding:1px 6px;border-radius:10px;white-space:nowrap}
.cut.unsaved{border-color:rgba(224,131,58,.55)}
.cut.modified{border-color:rgba(42,79,224,.45)}
.del-cut{border:none;background:transparent;color:var(--sub);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:5px}
.del-cut:hover{color:var(--warn);background:rgba(224,131,58,.12)}
.mv-cut{border:none;background:transparent;color:var(--sub);cursor:pointer;font-size:10px;line-height:1;padding:2px 3px;border-radius:5px}
.mv-cut:hover:not([disabled]){color:var(--accent);background:var(--panel2)}
.mv-cut[disabled]{opacity:.25;cursor:default}
/* inspector current-value display */
.curval{font-size:12.5px;color:var(--sub);margin:0 0 6px}
.curval b{color:var(--ink);font-variant-numeric:tabular-nums}
.chip.cur{border-color:var(--accent);background:rgba(42,79,224,.14);color:var(--accent)}
.sw.cur{outline:2px solid var(--accent);outline-offset:2px}
/* 토스트: 랜딩 무드 = ink 서피스 + 부드러운 잉크틴트 그림자(솔리드 코발트·순검정 그림자 폐기). ink는 랜딩의 primary CTA 색과 동일 언어 */
/* ★pointer-events:none 필수 — 토스트는 role="status" 알림일 뿐 조작 대상이 아닌데, 한 번 뜨면 DOM에
   영구히 남는 fixed 박스다. 없으면 opacity:0(=투명)인 상태로도 하단 중앙의 탭을 계속 먹는다.
   데스크톱은 하단 중앙이 비어 무해했지만 모바일(≤640)에선 액션 행이 정확히 그 자리라 '버튼을 눌러도
   반응이 없다'로 나타났다(2026-07-22 /demo '수정 반영' 실측: 375px에서 버튼 폭 157px 중 좌측 77px이
   투명 토스트 아래). 박스 크기가 직전 메시지 길이를 따라가서 증상이 간헐적으로 보이던 것도 같은 원인. */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(6px);background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;letter-spacing:-.01em;padding:11px 18px;border-radius:var(--radius);box-shadow:var(--shadow-pop);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* layers (object tree) — Figma-style */
.layers-panel{border-bottom:1px solid var(--line);margin:-14px -14px 12px;padding:13px 14px 10px;background:var(--panel)}
.layers-panel[hidden]{display:none}              /* 레이어 없는 컷(맞춤/구성)에서 패널 통째 숨김 */
.panel-h{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.panel-h:hover{color:var(--ink)}
.panel-h .pchev{font-size:10px;transition:transform .15s ease;flex:0 0 auto}
.panel-h .panel-sub{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0}
.collapsed>.panel-h .pchev{transform:rotate(-90deg)}
.layers-panel.collapsed #layers{display:none}
.chat-panel.collapsed{min-height:0}
.chat-panel.collapsed .chat-log,.chat-panel.collapsed .chat-box{display:none}
.panel-sub{color:var(--sub);font-weight:600}
.layers{max-height:34vh;overflow:auto}
.layers-empty{font-size:12.5px;color:var(--sub);line-height:1.6;padding:8px 6px}
.layers-empty b{color:var(--ink)}
.layer-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12.5px;white-space:nowrap;overflow:hidden}
.layer-row:hover{background:var(--panel2)}
.layer-row.sel{background:rgba(42,79,224,.16);box-shadow:inset 2px 0 0 var(--accent)}
.layer-row .tt{flex:none;font-size:10px;font-weight:800;color:var(--accent2);background:rgba(42,79,224,.14);padding:1px 5px;border-radius:5px;text-transform:uppercase}
.layer-row.container .tt{color:var(--sub);background:var(--panel2)}
.layer-row .nm{overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.layer-row .nm.muted{color:var(--sub);font-style:italic}
.layer-row.field{font-size:12px}
.layer-row.field .tt{color:var(--sub);background:var(--panel2);font-size:9.5px}
.layer-row.field .nm{color:var(--sub)}
.layer-row.field.sel .nm{color:var(--accent)}

/* ── 브랜드킷 모달(P0.5) — Claude Design 톤 ── */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand-sec-h{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px}
.brand-sec-h:first-child{margin-top:0}
.brand-row{display:flex;gap:14px;margin:12px 0}
.brand-field{flex:1;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--sub);font-weight:600}
.brand-field input,.brand-field select{background:var(--field);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;color:var(--ink);font-family:inherit;font-size:14px;outline:none;transition:border-color .14s ease,box-shadow .14s ease}
.brand-field input:focus,.brand-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
/* 브랜드 정의(콘티 생성 주입) — 세로 스택 텍스트영역 */
.brand-defs{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.brand-field.wide{width:100%}
.brand-field textarea{background:var(--field);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;color:var(--ink);font-family:inherit;font-size:14px;line-height:1.45;outline:none;resize:vertical;min-height:38px;transition:border-color .14s ease,box-shadow .14s ease}
.brand-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
/* 링크/파일 자동 채우기 — 브랜드 정의를 스크래핑/추출로 자동 채움 */
.brand-autofill{border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;margin:8px 0}
.brand-autofill-h{font-size:12.5px;color:var(--sub);margin-bottom:8px}
.brand-url-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.brand-url-row input{flex:1;min-width:180px;background:var(--field);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;color:var(--ink);font-family:inherit;font-size:14px;outline:none;transition:border-color .14s ease,box-shadow .14s ease}
.brand-url-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,224,.12)}
.brand-url-row .btn{white-space:nowrap}
/* 색상: 디자인 타일 미감 — 토글+색상+hex 한 줄 카드 */
.brand-colors{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0}
.brand-color{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:8px 11px 8px 9px}
.brand-color.off{opacity:.55}
.brand-color.off .bc-hex{font-style:italic}
.brand-color.extracted{background:var(--accent-soft);border-color:rgba(42,79,224,.35)}
.brand-color .bc-on{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);flex:0 0 auto}
.bc-label{font-size:12.5px;color:var(--sub);font-weight:600;cursor:pointer}
.bc-input{width:38px;height:38px;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bc-input::-webkit-color-swatch-wrapper{padding:0}
.bc-input::-webkit-color-swatch{border:0;border-radius:9px}
.bc-hex{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.bc-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--accent);background:rgba(42,79,224,.14);border:1px solid rgba(42,79,224,.4);border-radius:999px;padding:1px 7px}
.brand-preview{display:flex;align-items:center;gap:12px;margin:12px 0 2px}
.brand-swatches{display:flex;gap:6px}
.brand-swatches .swatch{width:28px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
/* 자막 스타일 실시간 미리보기(브랜드 모달) */
.cap-preview{margin:12px 0 2px}
.cap-preview-h{margin-bottom:6px}
.cap-preview-frame{width:100%;aspect-ratio:16/7;border-radius:12px;overflow:hidden;border:1px solid #1C2230;background:var(--canvas)}
.cap-preview-frame svg{display:block;width:100%;height:100%}
/* ④-1 스타일 탭(EXEC-brand-canon §4) — 캐논 통계·규칙 칩. 기존 토큰만 사용(새 색값 없음). */
.canon-proj-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.canon-proj-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.canon-proj-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.canon-rule-add{display:flex;gap:8px;margin:4px 0 10px}
.canon-rule-add .txtin{flex:1}
.canon-rules{display:flex;flex-direction:column;gap:6px}
.canon-rule-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.canon-rule-row:last-child{border-bottom:0}
.canon-rule-text{flex:1;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.canon-rule-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
/* 인트로/아웃트로 범퍼(선택) — intro/outro 나란히, 각 카드에 필드+16:9 미리보기 */
.brand-bumpers{display:grid;grid-template-columns:1fr;gap:14px;margin:8px 0 2px}   /* 풀폭 스택 — 옵션·미리보기에 여유 */
.bump-frow{display:flex;gap:12px}
.bump-frow .brand-field{flex:1;min-width:0}
.bump-dur input{max-width:130px}
/* 등장·액센트: 셀렉트 대신 시각 세그먼트(초심자도 효과를 알 수 있게 아이콘+라벨) */
.bump-opt{display:flex;flex-direction:column;gap:6px}
.bump-opt-lbl{font-size:12.5px;color:var(--sub);font-weight:600}
.opt-seg{display:flex;gap:6px;flex-wrap:wrap}
.opt-btn{flex:1 1 58px;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;background:var(--field);border:1px solid var(--line-strong);border-radius:10px;color:var(--sub);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}
.opt-btn:hover{border-color:var(--accent)}
.opt-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.opt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.opt-ico{width:30px;height:16px;color:var(--faint)}
.opt-btn.on .opt-ico{color:var(--accent)}
.brand-bumper{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.bump-on{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.bump-on input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.bump-fields{display:flex;flex-direction:column;gap:9px}
.bump-fields[hidden]{display:none}
.bump-preview-frame{position:relative;width:100%;max-width:520px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid #1C2230;background:var(--canvas)}
.bump-preview-frame.sample::after{content:"예시";position:absolute;top:7px;right:8px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border-radius:5px;padding:2px 7px;pointer-events:none}   /* 샘플명 렌더 표시 — 이름 입력 시 재렌더로 자동 제거 */
.bump-preview-frame[hidden]{display:none}
.bump-preview-frame svg{display:block;width:100%;height:auto}
.bump-preview-frame img.bp-frame{display:block;width:100%;height:100%;object-fit:cover}  /* height:auto는 aspect-ratio 컨테이너와 소수픽셀 어긋나 하단 1px에 컨테이너 배경(다크)이 비침(07-16 실측) — 프레임=컨테이너=16:9라 cover 무손실 */
.bump-ai{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.bump-ai[hidden]{display:none}
.bump-ai-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bump-ai-edit{display:flex;flex-direction:column;gap:8px}
.bump-ai-edit[hidden]{display:none}
.bump-ai-actions{display:flex;gap:8px;flex-wrap:wrap}
/* 브랜드 로고 업로드(공유 자산) + 범퍼 유형(워드마크/로고) + 로고 등장 블록 */
.brand-logo-up{display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--field)}
.blogo-thumb{flex:0 0 auto;width:88px;height:56px;border-radius:9px;border:1px dashed var(--line-strong);background:var(--canvas);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px}
.blogo-thumb.has{border-style:solid}
.blogo-thumb svg{display:block;max-width:100%;max-height:46px;width:auto;height:auto}
.blogo-ph{font-size:11px;color:var(--faint);font-weight:600}
.blogo-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.blogo-lbl{font-size:13px;font-weight:600;color:var(--ink)}
.blogo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blogo-pick{cursor:pointer;margin:0}
.bump-type .opt-btn{flex:1 1 92px}
.bump-wordmark[hidden],.bump-logo[hidden],.bump-textfields[hidden]{display:none}
.bump-logo{display:flex;flex-direction:column;gap:9px}
.opt-seg.disabled{opacity:.5;pointer-events:none}
.bump-logo-hint{margin:2px 0 0;color:var(--warn,#d9a441)}
.bump-logo-hint[hidden]{display:none}
/* 오브젝트 크기 조절(로고+텍스트) — 로고·글자 크기 슬라이더 */
.bump-size{gap:8px}
.bump-size-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub);font-weight:600}
.bump-size-row[hidden]{display:none}
.bump-size-tag{flex:0 0 42px}
.bump-size-row input[type=range]{flex:1;min-width:0;height:4px;accent-color:var(--accent);cursor:pointer}
.bump-size-row output{flex:0 0 42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
/* 범퍼 배경(자동대비/명암/커스텀) */
.bump-bg .opt-btn{flex:1 1 62px}
.bg-custom{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:3px;padding:4px 9px;border:1px solid var(--line-strong);border-radius:8px;font-size:11px;font-weight:600;color:var(--sub);cursor:pointer;transition:border-color .14s ease,color .14s ease}
.bg-custom:hover{border-color:var(--accent)}
.bg-custom.on{border-color:var(--accent);color:var(--ink)}
.bg-custom-sw{width:13px;height:13px;border-radius:3px;border:1px solid var(--line-strong);display:inline-block;background:repeating-conic-gradient(#8888 0% 25%,#0000 0% 50%) 50%/8px 8px}
.bg-custom input[type=color]{width:22px;height:18px;padding:0;border:none;background:none;cursor:pointer}
#introGenCost,#outroGenCost{white-space:nowrap}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-status .spin{margin-right:4px}
/* 멀티 브랜드 라이브러리 — 좌측 목록 레일(236px) + 우측 편집기, 헤더/푸터 사이를 채움 */
.brand-layout{flex:1;display:grid;grid-template-columns:236px 1fr;min-height:0}
.brand-list{padding:12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.brand-list-items{display:flex;flex-direction:column;gap:6px}
.brand-list-item{display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px;color:var(--ink);cursor:pointer;font-family:inherit;font-size:13.5px;width:100%;transition:background .14s ease,border-color .14s ease}
.brand-list-item:hover{background:var(--accent-soft)}
.brand-list-item.active{border-color:var(--accent);background:var(--accent-soft)}
.brand-list-item:disabled{cursor:default}
.brand-list-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bli-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bli-default{font-size:13px;color:var(--accent);flex:0 0 auto}
.bli-sw{display:flex;gap:3px;flex:0 0 auto}
.bli-dot{width:11px;height:11px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.brand-new{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;background:none;border:1.5px dashed var(--line-strong);border-radius:11px;cursor:pointer;color:var(--sub);font-size:13px;font-weight:600;font-family:inherit;margin-top:2px;transition:border-color .14s ease,color .14s ease}
.brand-new .i{width:16px;height:16px}
.brand-new:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.brand-new:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand-new:disabled{opacity:.45;cursor:not-allowed}
/* 브랜드 편집 탭(v2): 탭바는 스크롤 밖 고정, 패널만 스크롤. 숨은 pane 값도 저장에 포함(노출 분할일 뿐 폼 리셋 아님) */
.brand-edit{display:flex;flex-direction:column;padding:0;overflow:hidden;min-width:0}
.brand-tabs{display:flex;gap:4px;background:#F1F1EF;border-radius:9px;padding:3px;margin:14px 22px 0;flex:0 0 auto}
.brand-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 13px;background:transparent;border:0;border-radius:7px;color:var(--sub);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:background .14s ease,color .14s ease,box-shadow .14s ease}
.brand-tab:hover{color:var(--ink)}
.brand-tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.08)}
.brand-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand-panes{flex:1;overflow-y:auto;padding:16px 22px 22px;min-width:0;overflow-anchor:none}   /* anchor 끔: 폰트픽커 비동기 렌더가 첫 열림 스크롤을 밀어내는 것 방지 */
.btn.danger{color:var(--danger);border-color:rgba(229,72,77,.4)}
.btn.danger:hover{background:rgba(229,72,77,.12)}
.brand-gate{margin:12px 22px 0;padding:11px 14px;border-radius:11px;font-size:13px;font-weight:600;color:var(--sub);background:var(--panel2);border:1px solid var(--line)}
.brand-gate.upsell{color:var(--ink);background:var(--accent-soft);border-color:rgba(42,79,224,.35);line-height:1.5}
.brand-gate.upsell b{color:var(--accent)}
/* 무료 게이트 히어로(v2): 콤팩트 모달 + 가치 3줄 + 미니 프리뷰 + CTA */
.brand-gate.gate-hero{margin:14px 22px 18px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;font-weight:500}
.bgh-head{font-size:14.5px}
.bgh-body{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.bgh-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink);line-height:1.5;flex:1;min-width:220px}
.bgh-mini{width:224px;max-width:100%;flex:0 0 auto}
.bgh-cta{display:flex;justify-content:flex-end}
.brand-gate.limit{color:var(--ink);background:var(--warn-soft);border-color:rgba(224,131,58,.45)}
.brand-gate.limit .btn{margin-left:10px;vertical-align:middle}
/* ── 내레이션 설정(ElevenLabs) 모달 — 보이스 카드 그리드 + 무드 칩 + 슬라이더 ── */
.narr-voice-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 보이스 카드: 좌측 아바타(::before, 두 행 span) + 우측 이름/무드 2행 */
.narr-voice{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);cursor:pointer;font-family:inherit;transition:background .14s ease,border-color .14s ease}
.narr-voice:hover{background:var(--accent-soft)}
.narr-voice.sel{border-color:var(--accent);background:var(--accent-soft)}
.narr-voice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.narr-voice::before{content:"";grid-column:1;grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--panel2);box-shadow:inset 0 0 0 12px var(--panel),inset 0 0 0 13px var(--accent)}
.narr-voice.reco::before{box-shadow:inset 0 0 0 12px var(--panel),inset 0 0 0 13px var(--live)}
.narr-voice .nv-name{grid-column:2;grid-row:1;font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.narr-voice .nv-mood{grid-column:2;grid-row:2;font-size:11.5px;color:var(--faint);margin-top:1px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.narr-voice.reco .nv-name::after{content:"추천";margin-left:6px;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--accent);background:rgba(42,79,224,.12);border-radius:4px;padding:1px 5px;vertical-align:middle}
/* ▶ 미리 듣기(커밋 샘플 mp3 재생 — 무료): 카드 3행, 클릭은 카드 선택과 분리(stopPropagation) */
.narr-voice{grid-template-rows:auto auto auto}
.narr-voice .nv-preview{grid-column:2;grid-row:3;justify-self:start;margin-top:6px;font-size:11px;font-weight:600;color:var(--accent);background:rgba(42,79,224,.08);border:1px solid transparent;border-radius:6px;padding:3px 8px;cursor:pointer;transition:background .14s ease}
.narr-voice .nv-preview:hover{background:rgba(42,79,224,.16)}
.narr-voice .nv-preview:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* 재생 중: ■ 정지 토글 + 버튼 배경에 진행(--pp) 채움 = 남은 길이 시각화 */
.narr-voice .nv-preview.playing{color:var(--accent);border-color:rgba(42,79,224,.38);background:linear-gradient(90deg,rgba(42,79,224,.32) var(--pp,0%),rgba(42,79,224,.12) var(--pp,0%))}
.mood-chips{display:flex;gap:7px;flex-wrap:wrap}
.mood-chip{font-size:13px;font-weight:500;color:var(--sub);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;font-family:inherit;transition:background .14s ease,color .14s ease,border-color .14s ease}
.mood-chip:hover{background:var(--panel2)}
.mood-chip.on{color:var(--on-accent);background:var(--ink);border-color:var(--ink);font-weight:600}
.mood-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.narr-tune{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.narr-field{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--sub);font-weight:600}
.narr-field-h{display:flex;justify-content:space-between;align-items:center}
.narr-field input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.narr-field .narr-v{font-family:var(--mono);color:var(--faint);font-weight:500}
.narr-field .narr-hint{font-weight:400;color:var(--faint);font-size:11px}
.narr-gate{margin:12px 22px 0;padding:11px 14px;border-radius:11px;font-size:13px;font-weight:600;color:var(--ink);background:rgba(120,160,255,.10);border:1px solid rgba(120,160,255,.4)}
.narr-est{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
/* 생성된 음성(컷별 미리듣기) — #narrResult */
.narr-result{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.nr-row{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;font-size:13px;color:var(--ink)}
.nr-row+.nr-row{border-top:1px solid var(--line)}
.nr-play{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;font-size:11px;line-height:1;flex:none;font-family:inherit;transition:border-color .14s ease,color .14s ease;margin-top:1px}
.nr-play:hover{border-color:var(--accent);color:var(--accent)}
.nr-play.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nr-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.nr-name{font-weight:600}
.nr-params{font-size:11.5px;color:var(--sub);line-height:1.4}   /* 생성 파라미터(성우·무드·안정성·표현·속도) — 수정 참고 */
.nr-stale{font-size:11.5px;font-weight:600;color:var(--warn)}
.ci-narr-set{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;font-size:12.5px;font-weight:600;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--sub);cursor:pointer;font-family:inherit;transition:border-color .14s ease,color .14s ease,background .14s ease;margin-left:0}
.ci-narr-set:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ci-narr-set .i{width:14px;height:14px;color:var(--accent);flex:none}
/* 모바일(v2 커밋6): 목록=가로 스크롤 칩 행(고정 크롬 ~344→~250px), 필드 행 랩(가로 오버플로 49px 해소) */
@media(max-width:560px){
  .brand-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .brand-list{border-right:none;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:9px 12px}
  .brand-list-items{flex-direction:row;gap:8px}
  .brand-list-item{width:auto;flex:0 0 auto;padding:8px 12px;border-radius:20px}
  .brand-new{width:auto;flex:0 0 auto;margin-top:0;padding:8px 12px;border-radius:20px;white-space:nowrap}
  .brand-row,.bump-frow{flex-wrap:wrap}
  .brand-row .brand-field,.bump-frow .brand-field{flex:1 1 100%;min-width:0}
  .brand-tabs{margin:10px 12px 0}
  .brand-tab{padding:0 8px;font-size:12px}
  .brand-panes{padding:12px 12px 16px}
  #brandModal .modal-foot{padding:10px 14px;gap:8px}
  #brandModal .lock-note{display:none}   /* 모바일 크롬 절약 — 상태는 상태줄(brandStatus)·배너가 전달 */
  .narr-voice-list{grid-template-columns:1fr}
}
/* 자막 리스트(전체 검토) — 자막(화면 띠) vs 내레이션(VO) 시각 대비 + 즉시 피드백 */
.cap-list{margin:10px 0 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:10px 12px}
.cap-list-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cap-list-title{font-size:13px;font-weight:700;color:var(--ink)}
.cap-count{font-size:11px;font-weight:700;color:var(--accent);background:rgba(42,79,224,.12);padding:2px 8px;border-radius:20px}
.cap-leg{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--sub)}
.cap-leg-i{font-size:12px}
.cap-leg-i.sub{color:var(--accent)}
.cap-leg-i.vo{color:var(--accent2)}
.cap-row{display:grid;grid-template-columns:auto minmax(110px,1fr) minmax(0,2.2fr);gap:10px;align-items:center;padding:6px 7px;border-radius:9px;border:1px solid transparent;transition:background .14s,box-shadow .14s}
.cap-row+.cap-row{margin-top:2px}
.cap-row.sel{background:rgba(42,79,224,.06);box-shadow:inset 3px 0 0 var(--accent)}
.cap-row.just-saved{animation:capSaved .65s ease}
@keyframes capSaved{0%{background:rgba(42,79,224,.22)}100%{background:transparent}}
.cap-num{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--sub);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cap-num:hover{border-color:var(--accent);color:var(--accent)}
.cap-row.sel .cap-num{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cap-num:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cap-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.cap-title{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-sect{font-size:11px;color:var(--sub)}
.cap-fields{display:flex;flex-direction:column;gap:5px;min-width:0}
.cap-f{display:flex;align-items:center;gap:7px;min-width:0}
.cf-ic{flex:0 0 auto;font-size:12px;width:14px;text-align:center}
.cap-f.sub .cf-ic{color:var(--accent)}
.cap-f.vo .cf-ic{color:var(--accent2)}
.cap-inp{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:7px;padding:6px 9px;color:var(--ink);font-family:inherit;font-size:13px}
.cap-row.filled .cap-inp{border-left-color:var(--accent)}
.cap-row:not(.filled) .cap-inp{border-style:dashed}
.cap-inp::placeholder{color:var(--sub)}
.cap-inp:focus{border-color:var(--accent);outline:none}
.cap-vo{flex:1;min-width:0;font-size:12px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-vo.empty{font-style:italic;opacity:.7}
.cap-vo-edit{flex:0 0 auto;font-size:11px;padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--accent2);cursor:pointer}
.cap-vo-edit:hover{border-color:var(--accent2)}
.cap-vo-edit:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
@media(max-width:560px){.cap-row{grid-template-columns:auto 1fr}.cap-fields{grid-column:1 / -1}}
/* 자막 리스트(전체검토) 다중 큐 요약 */
.cap-cn{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--accent);background:rgba(42,79,224,.12);padding:2px 8px;border-radius:20px}
.cap-cn-first{flex:1;min-width:0;font-size:12.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-cn-edit{flex:0 0 auto;font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer}
.cap-cn-edit:hover{border-color:var(--accent)}
.cap-cn-edit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ── 시간순 자막 큐 에디터(포커스 패널) — 캡션 트랙 UI ── */
.ci-cuewrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.cue-hd{display:flex;align-items:center;gap:10px}
.cue-hd .grow{flex:1}
.cue-count{font-size:11px;font-weight:700;color:var(--accent);background:rgba(42,79,224,.12);padding:2px 8px;border-radius:20px}
.cue-man{display:inline-flex;align-items:center;min-height:24px;gap:5px;font-size:11px;color:var(--sub);cursor:pointer;user-select:none}
.cue-man input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
.cue-add{flex:0 0 auto;font-size:11px;font-weight:600;padding:4px 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer}
.cue-add:hover{border-color:var(--accent)}
.cue-add:focus-visible,.cue-man input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cue-rows{display:flex;flex-direction:column;gap:5px}
.cue-row{display:flex;align-items:center;gap:7px}
.cue-num{flex:0 0 auto;width:18px;text-align:center;font-size:11px;font-weight:700;color:var(--sub)}
.cue-start{flex:0 0 58px;width:58px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 7px;color:var(--ink);font-family:inherit;font-size:12px;text-align:right}
.cue-start.auto{color:var(--sub);background:transparent;border-color:transparent;border-bottom:1px dashed var(--line);border-radius:0;padding-right:2px}
.cue-start:focus{border-color:var(--accent);outline:none}
.cue-sx{flex:0 0 auto;font-size:11px;color:var(--sub);margin-left:-3px}
.cue-text{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:7px;padding:6px 9px;color:var(--ink);font-family:inherit;font-size:13px}
.cue-text:focus{border-color:var(--accent);outline:none}
.cue-text:placeholder-shown{border-left-color:var(--line)}
.cue-del{flex:0 0 auto;width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--sub);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0}
.cue-del:hover{border-color:var(--danger,#f87171);color:var(--danger,#f87171)}
.cue-del:focus-visible,.cue-start:focus-visible,.cue-text:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ── 효과음 칩 에디터(포커스 패널) — 자막 큐 에디터와 동일 결 ── */
.ci-sfx{flex-direction:column;align-items:stretch;gap:7px}
.sfx-hd{display:flex;align-items:center;gap:8px;min-height:24px}
.sfx-section{display:flex;flex-direction:column;gap:7px}
.bgm-row{display:flex;flex-direction:column;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--panel) 88%,var(--accent) 3%)}
.bgm-head{display:flex;align-items:baseline;gap:8px;min-width:0}.bgm-head .ci-khint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgm-controls{display:flex;align-items:center;gap:8px;min-width:0}
.bgm-select{flex:1 1 180px;min-width:110px;max-width:260px;font-size:12px;font-weight:600;padding:6px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.bgm-select:focus-visible,.bgm-play:focus-visible,.bgm-gain input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bgm-play{flex:0 0 auto;width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer;display:grid;place-items:center;font-size:10px}
.bgm-play:disabled{opacity:.38;cursor:default}
.bgm-gain{display:flex;align-items:center;gap:7px;min-width:170px;font-size:11px;color:var(--sub);white-space:nowrap}.bgm-gain input{width:92px;accent-color:var(--accent);cursor:pointer}.bgm-gain output{width:42px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:720px){.bgm-controls{flex-wrap:wrap}.bgm-select{max-width:none}.bgm-gain{flex:1 1 100%}.bgm-gain input{flex:1}.bgm-head .ci-khint{display:none}}
.sfx-hd .ci-kl{padding-top:0}
.sfx-global{flex:0 0 auto;max-width:220px;font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.sfx-rows{display:flex;flex-direction:column;gap:5px}
.sfx-chip{display:flex;align-items:center;gap:7px;padding:4px 6px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:7px;background:var(--panel)}
.sfx-chip.auto{border-left-color:var(--line)}
.sfx-lbl{flex:1;min-width:0;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfx-autotag{margin-left:6px;font-size:10px;font-weight:700;color:var(--sub);background:var(--line);padding:1px 6px;border-radius:20px}
.sfx-rep{margin-left:5px;font-size:10px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);padding:1px 6px;border-radius:20px}
.sfx-t{flex:0 0 58px;width:58px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 7px;color:var(--ink);font-family:inherit;font-size:12px;text-align:right}
.sfx-t:focus{border-color:var(--accent);outline:none}
.sfx-sx{flex:0 0 auto;font-size:11px;color:var(--sub);margin-left:-3px}
.sfx-gain{flex:0 0 auto;font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--sub);cursor:pointer}
.sfx-gain:hover{border-color:var(--accent);color:var(--accent)}
.sfx-play{flex:0 0 auto;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0}
.sfx-play:hover{border-color:var(--accent)}
.sfx-del{flex:0 0 auto;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--sub);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0}
.sfx-del:hover{border-color:var(--danger,#f87171);color:var(--danger,#f87171)}
/* (sfx-tl 마커 스트립은 통합 타임라인 .ctl로 승격·이관) */
.sfx-swap{flex:0 1 150px;min-width:90px;font-size:12px;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}  /* 소리 바꾸기(v2 신규) — 같은 계열이 맨 위 */
.sfx-swap:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sfx-sem{font-size:11px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:1px 7px;border-radius:20px}  /* 의미 라벨(v2 §3-2②) — 왜 여기 소리가 있는지 */
.sfx-mute{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--sub);cursor:pointer;white-space:nowrap}
.sfx-mute input{accent-color:var(--accent);cursor:pointer}
.sfx-muted .sfx-rows,.sfx-muted .sfx-addwrap{opacity:.45;filter:saturate(.4)}  /* 컷 끄기 시 시각 강등(편집은 여전히 가능) */

/* ── 통합 재생 타임라인(.ctl) — 자막·내레이션·효과음 한 시간축(포커스 패널). 파형/줌 없음(northstar). ── */
.ci-line.ctl-line{flex-direction:column;align-items:stretch;gap:6px}   /* .ci-line 기본(align-items:flex-start)보다 특이도 우위 필수 — 아니면 트랙이 수축 */
.ctl-body{width:100%}
.ctl-hd{display:flex;align-items:center;gap:8px;min-height:24px}
.ctl-audio-mute{width:28px;height:28px;padding:0;display:inline-grid;place-items:center}.ctl-audio-mute .i{width:15px;height:15px}
/* 소리는 기본 꺼짐이다(예고 없는 내레이션 방지). 꺼진 상태를 아이콘만으로 알리기엔 약해서
   '주의'가 아닌 '비활성' 톤(--faint)으로 낮춘다 — 켜면 평소 색으로 돌아와 상태 차이가 읽힌다.
   경고색을 쓰지 않는 이유: 음소거는 오류가 아니라 기본값이다. */
.ctl-audio-mute.is-muted{color:var(--faint)}
.ctl-audio-mute.is-muted:hover{color:var(--ink)}
@media(pointer:coarse){.player-mute,.audio-mute,.ctl-audio-mute{min-width:44px;min-height:44px}}
.ctl-hd .ci-kl{padding-top:0}
.ctl-play{flex:0 0 auto;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ctl-play:hover{border-color:var(--accent)}
.ctl-time{font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 8px;border-radius:20px;font-variant-numeric:tabular-nums}
.ctl-hint{margin-left:auto}
.ctl-body{display:flex;gap:6px}
.ctl-labels{flex:0 0 52px;display:flex;flex-direction:column;gap:4px}
.ctl-label{height:22px;display:flex;align-items:center;font-size:10.5px;font-weight:600;color:var(--sub)}
.ctl-label.ruler{height:16px}
.ctl-track{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:4px}
.ctl-ruler{position:relative;height:16px;cursor:pointer;touch-action:none}
.ctl-tick{position:absolute;top:2px;bottom:0;border-left:1px solid var(--line)}
.ctl-tick i{position:absolute;left:3px;top:-1px;font-style:normal;font-size:9px;color:var(--sub);font-variant-numeric:tabular-nums}
.ctl-lane{position:relative;height:22px;background:var(--panel);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.ctl-lane.mute{opacity:.45;filter:saturate(.4)}
.ctl-empty{display:flex;align-items:center;height:100%;padding:0 8px;font-size:10.5px;color:var(--sub);background:none;border:none;cursor:default;user-select:none}
.ctl-narradd{cursor:pointer}
.ctl-narradd:hover{color:var(--accent)}
.ctl-capseg{position:absolute;top:2px;bottom:2px;border:none;border-radius:4px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--ink);font-size:10px;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;cursor:grab;touch-action:none}
.ctl-capseg:hover{background:color-mix(in srgb,var(--accent) 36%,transparent)}
.ctl-capseg:active{cursor:grabbing}
.ctl-narrbar{position:absolute;top:2px;bottom:2px;border:none;border-radius:4px;background:color-mix(in srgb,var(--accent2,#7c5cff) 24%,transparent);color:var(--ink);font-size:10px;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;cursor:pointer}
.ctl-narrbar.est{background:none;border:1px dashed color-mix(in srgb,var(--accent2,#7c5cff) 55%,transparent);color:var(--sub)}
.ctl-narrbar:hover{filter:brightness(1.1)}
/* 자막/내레이션 블록 — 라벨(가운데=이동) + 좌/우 리사이즈 핸들(시작·종료) */
.ctl-capseg .cap-lbl,.ctl-narrbar .narr-lbl{display:block;height:100%;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grab}
.ctl-capseg .cap-lbl:active,.ctl-narrbar .narr-lbl:active,.ctl-narrbar:active{cursor:grabbing}
.ctl-capseg .cap-h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2;touch-action:none}
.ctl-capseg .cap-h.l{left:0;border-radius:4px 0 0 4px}
.ctl-capseg .cap-h.r{right:0;border-radius:0 4px 4px 0}
.ctl-capseg .cap-h:hover{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.ctl-sfxmark{position:absolute;top:50%;transform:translateY(-50%);min-width:18px;height:16px;padding:0 4px;border:none;border-radius:8px;background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent);font-size:9px;font-weight:700;cursor:grab;display:flex;align-items:center;justify-content:flex-start;touch-action:none}
.ctl-sfxmark:not(.series){transform:translate(-50%,-50%);justify-content:center}
.ctl-sfxmark:hover{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.ctl-sfxmark:active{cursor:grabbing}
.ctl-sfxmark.auto{background:var(--line);color:var(--sub)}
.ctl-sfxmark.auto:hover{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent)}
.ctl-ph{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);border-radius:1px;pointer-events:none;z-index:5;box-shadow:0 0 4px color-mix(in srgb,var(--accent) 50%,transparent)}
.ctl-momsep{position:absolute;top:16px;bottom:0;border-left:1px dashed var(--line);pointer-events:none;z-index:4}
.sfx-add{display:flex;align-items:center;gap:7px}
.sfx-pick{flex:1;min-width:0;font-size:12px;padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.sfx-ok{flex:0 0 auto;font-size:11px;font-weight:600;padding:4px 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--accent);cursor:pointer}
.sfx-ok:hover{border-color:var(--accent)}

/* ════ UX·접근성 고도화 (Web Interface Guidelines) ═════════════════════════════ */
:root{ color-scheme: light; }                 /* 네이티브 스크롤바·select·range를 다크로 */
body{ -webkit-tap-highlight-color: transparent; }
button, a, .chip, .szbtn, .conti-ctrls button { touch-action: manipulation; }  /* 모바일 300ms 탭지연 제거 */

/* 일관된 키보드 포커스 링 — 모든 상호작용 요소(인라인 스타일 오버레이 버튼/입력 포함).
   마우스 클릭엔 안 뜨고(:focus-visible) 키보드 탐색 때만 보임. 기존 outline:none을 덮음. */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
.chip:focus-visible, .szbtn:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline-offset: 1px; }

/* 모달/오버레이: 뒤 본문으로 스크롤 전파 차단 */
.modal-wrap, #billingWrap, #dashWrap{ overscroll-behavior: contain; }

/* 제목 줄바꿈 균형 */
.modal-h, .sel-head, .ov-title, .conti-head{ text-wrap: balance; }

/* 본문 바로가기 — 키보드 사용자가 툴바 전체를 탭으로 통과하지 않도록. 랜딩(.skip)과 동일 관용구.
   평소엔 화면 밖, 포커스를 받으면 좌상단에 나타난다. */
.skip{position:absolute;left:12px;top:-56px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:9px;font-weight:600;font-size:14px;text-decoration:none;
  transition:top .15s ease}
.skip:focus{top:10px}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

/* 화면에는 안 보이지만 스크린리더·문서 아웃라인에는 존재하는 텍스트 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================================
 * STORYBOARD (Claude Design 포트) — 콘티 '전체 검토' 오버뷰를 중앙 정렬 반응형 카드 그리드로.
 * 카드 = 16:9 다크 라이브스틸 + 역할/번호 오버레이 + 라벨 + 편집입자배지 + 모먼트 리스트 + hover-lift.
 * 카드 클릭 = selectCut → 아래 cap-list(자막 검토) + conti-focus(정밀편집)로 진입(기능 100% 보존, 외양만).
 * ============================================================================ */
.storyboard{max-width:1160px;margin:0 auto;padding:8px 4px 8px}
.sb-head{margin-bottom:22px}
.sb-title{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sb-title .muted{font-weight:600;color:var(--sub);font-size:18px}
.sb-meta{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.sb-lead{margin:8px 0 0;font-size:14px;color:var(--sub)}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.sb-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-card);transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.sb-card:hover{box-shadow:0 14px 30px -16px rgba(20,22,30,.22);transform:translateY(-2px)}
.sb-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sb-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-card)}
.sb-card.unsaved{border-color:rgba(224,131,58,.55)}
.sb-card.modified{border-color:rgba(42,79,224,.45)}
.sb-thumb{position:relative;aspect-ratio:16/9;background:var(--canvas);overflow:hidden}
.sb-still{position:absolute;inset:0}
.sb-still svg,.sb-still img.fv{width:100%;height:100%;display:block}
.sb-still .still-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#5B6680;font-size:11px;font-family:var(--mono)}
.sb-role{position:absolute;left:11px;top:11px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;color:#fff;background:rgba(8,10,18,.6);backdrop-filter:blur(4px);border-radius:6px;padding:3px 8px}
.sb-rnum{color:#9FB2F5}
.sb-dur{position:absolute;right:11px;bottom:11px;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(8,10,18,.6);border-radius:6px;padding:3px 8px}
.sb-dot{position:absolute;right:11px;top:11px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(8,10,18,.5)}
.sb-dot.uns{background:var(--warn)} .sb-dot.mod{background:var(--accent)}
.sb-body{padding:14px 16px 15px}
.sb-cardtitle{display:flex;align-items:center;gap:8px}
.sb-label{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-cardtitle .gran{flex:0 0 auto}
.sb-moments{display:flex;flex-direction:column;gap:5px;margin-top:11px}
.sb-mom{display:flex;align-items:center;gap:8px}
.sb-mbar{width:3px;height:13px;border-radius:2px;background:var(--line-strong);flex:none}
.sb-card.sel .sb-mbar{background:var(--accent)}
.sb-mlbl{flex:1;min-width:0;font-size:12.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-mdur{font-family:var(--mono);font-size:10px;color:var(--faint);flex:none}
/* 씬 편집기: 프레임 바로 아래 '자막·내레이션 검토' 묶음(별도 자막검토 리스트 폐지 → 컷별 통합) */
.ci-review{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px 14px;margin:2px 0 12px;display:flex;flex-direction:column;gap:12px}
.ci-review-h{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.3}
.ci-review .ci-line{align-items:flex-start}
.ci-review .cue-line{align-items:flex-start}
.ci-review .cue-line .ci-k{padding-top:7px}   /* nudge label baseline to first cue field */
/* 내레이션 행: 라벨행(라벨·힌트·우측 설정칩) 위 + 전폭 textarea 아래 (§3) */
.ci-narr{flex-direction:column;gap:6px;align-items:stretch}
.ci-narr-head{display:flex;align-items:center;gap:8px;min-height:24px}
.ci-narr-head .grow{flex:1}
.ci-narr-head .ci-kl{padding-top:0}
.ci-narr-head .ci-khint{margin-top:0;flex:0 1 auto}     /* 라벨 뒤 인라인, 스택 아님 */
.ci-narr .ci-script{width:100%;min-height:60px}
/* 자막 검토 + 포커스 패널도 그리드와 같은 폭으로 중앙 정렬(연속성) */
.conti .cap-list, .conti .conti-focus{max-width:1160px;margin-left:auto;margin-right:auto}
.conti .cap-list{margin-top:22px}
.conti .conti-focus{margin-top:18px}

/* ============================================================================
 * INSPECTOR TONE (Claude Design 포트) — 레이어 트리 + 스코프 AI 채팅(버블 스레드)
 * + 녹색 '결정적 부분 재렌더' 배지 + '스코프: {레이어}' 타깃 칩. 동작/핸들러/선택·영역·주석 전부 불변, 외양만.
 * ============================================================================ */
/* 스코프 AI 헤더: 스파클 아이콘 + 결정성(determinism) 배지 */
#chatH .scope-ai-ic{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.determ-badge{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--live);background:var(--live-soft);border:1px solid rgba(15,176,122,.32);border-radius:5px;padding:2px 6px;white-space:nowrap;flex:0 0 auto}
/* 채팅 버블 스레드: assistant(왼쪽·페이퍼)·user(오른쪽·코발트) + 아바타 */
.chat-log{gap:12px}
.cmsg{position:relative;max-width:88%;font-size:12.5px;line-height:1.55;border-radius:11px;padding:9px 11px}
.cmsg.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-top-left-radius:3px}
.cmsg.user{align-self:flex-end;background:var(--accent);color:#fff;border-top-right-radius:3px;border-bottom-right-radius:11px}
.cmsg.ai::before{content:"";position:absolute;left:-30px;top:0;width:24px;height:24px;border-radius:7px;background:var(--accent-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4FE0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.7 5.1 5.1 1.7-5.1 1.7L12 16.6l-1.7-5.1L5.2 9.8l5.1-1.7z'/></svg>");background-repeat:no-repeat;background-position:center;background-size:14px}
.chat-log{padding-left:32px}
.cmsg.user{margin-right:0}
.cmsg-tgt{font-size:10px;opacity:.8;margin-bottom:3px;font-weight:600}
/* 스코프 타깃 칩(입력 위): '스코프: {레이어}' — 코발트 소프트 칩 + 타깃 아이콘 */
.chat-tgt{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;font-size:12.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(42,79,224,.22);border-radius:8px;padding:8px 11px;margin-bottom:8px;line-height:1.45}
.chat-tgt .tgt-ico{width:14px;height:14px;flex:0 0 auto;color:var(--accent)}
.chat-tgt b{color:var(--ink)}
.chat-tgt .tgt-of{flex:1 1 100%;color:var(--sub);font-weight:500;font-size:12.5px;line-height:1.5}   /* 긴 안내문은 다음 줄로 — 칩 안 한 줄 압축 방지(가독성) */
.chat-tgt .tgt-clear{display:inline-flex;align-items:center;gap:3px;margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--sub);border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.chat-tgt .tgt-clear:hover{border-color:var(--accent);color:var(--accent)}
.chat-tgt .tgt-clear .i{width:11px;height:11px}
#chatH{align-items:center;gap:7px;flex-wrap:wrap;row-gap:4px}
#chatH .determ-badge{align-self:center}
#chatH .panel-sub{flex-basis:100%;margin-left:0;font-size:11.5px;color:var(--sub)}
/* 레이어 트리: 트리 라인 느낌 강조(디자인 톤) — 들여쓰기는 인라인 padding-left(JS) 유지 */
.layers .layer-row{border-radius:7px}
.layers .layer-row.field .nm{color:var(--sub)}

/* ───────── 교차페이지 잡 감시기 (job-watch.js) — 상단바 인디케이터 + 완료 알림 ───────── */
/* 인디케이터 칩: .credit-chip / .btn의 시각 언어와 일치(라이트 토큰·헤어라인·코발트 강조) */
.jw-indicator{display:inline-flex;align-items:center;position:relative;flex:none}
.jw-indicator[hidden]{display:none!important}
.jw-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;height:38px;padding:0 12px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.jw-chip:hover{background:var(--panel2);border-color:var(--line-strong)}
.jw-chip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.jw-chip .jw-chip-label{color:var(--ink)}
.jw-chip-compact{display:none;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
.jw-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 스피너 = 코발트 회전 링 */
.jw-spin{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
.jw-pop-spin{width:11px;height:11px;flex:none;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
/* 드롭다운 — position:fixed → .top의 overflow:hidden(가로스크롤 방지)에 안 잘림. 위치는 JS가 트리거(칩/벨) 기준으로 클램프(.menu 관용구) */
.jw-pop{position:fixed;min-width:240px;max-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;z-index:140}
.jw-pop[hidden]{display:none}
.jw-pop-empty{padding:12px 10px;font-size:12.5px;color:var(--faint);text-align:center}
.jw-pop-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px}
.jw-pop-row+.jw-pop-row{margin-top:2px}
.jw-pop-main{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.jw-pop-title{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jw-pop-meta{font-size:11.5px;color:var(--sub)}
.jw-pop-hint{font-size:11px;color:var(--warn);line-height:1.35}
.jw-pop-hint[hidden]{display:none}
.jw-pop-progress{display:block;width:100%;height:3px;margin-top:5px;overflow:hidden;border-radius:999px;background:var(--accent-soft)}
.jw-pop-progress[hidden]{display:none}
.jw-pop-progress-fill{display:block;height:100%;background:var(--accent);border-radius:inherit}
.jw-pop-elapsed{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--faint);flex:none}
.jw-pop-cancel{flex:none;margin-left:8px;font-size:11px;padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--faint);cursor:pointer}
.jw-pop-cancel:hover{color:var(--warn);border-color:var(--warn)}
.jw-pop-cancel:disabled{opacity:.5;cursor:default}
/* 완료 알림 — 영속·해제가능·클릭가능(짧은 toast와 별개). 우하단 스택 */
.jw-notices{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:200;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.jw-notice{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;box-shadow:var(--shadow-pop);padding:12px 13px;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.jw-notice.show{opacity:1;transform:translateY(0)}
.jw-notice.is-err{border-left-color:var(--danger)}
.jw-notice.is-warn{border-left-color:var(--warn)}
.jw-notice-ic{font-size:18px;line-height:1;flex:none}
.jw-notice-text{flex:1 1 auto;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.jw-notice-act{flex:none;height:30px;padding:0 13px;background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit}
.jw-notice-act:hover{background:var(--accent-h)}
.jw-notice-act:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.jw-notice.is-err .jw-notice-act{background:var(--danger)}
.jw-notice.is-warn .jw-notice-act{background:var(--warn)}
.jw-notice-x{flex:none;width:26px;height:26px;display:grid;place-items:center;background:transparent;border:0;border-radius:7px;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.jw-notice-x:hover{background:var(--surface3);color:var(--ink)}
.jw-notice-x:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
@media (max-width:560px){.jw-notices{left:16px;right:16px;max-width:none}}
@media (max-width:640px){
  .jw-chip{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:5px}
  .jw-chip-label{display:none}
  .jw-chip-compact{display:inline}
  .jw-pop{max-width:calc(100vw - 16px)}
}

/* ── 알림 센터(notify.js) — 벨 + 미읽음 뱃지 + 패널 (팀 협업 P0 §3.2.3). jw-* 칩/팝 시각 언어 재사용 ── */
.nf-bell{position:relative;width:38px;padding:0;justify-content:center}
.nf-bell svg{width:17px;height:17px;display:block;color:var(--sub)}
.nf-bell:hover svg{color:var(--ink)}
.nf-count{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;font-family:var(--mono)}
.nf-count[hidden]{display:none}
.nf-pop{min-width:320px;max-width:380px;max-height:70vh;overflow-y:auto;padding:0}
.nf-head{position:sticky;top:0;z-index:1;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink);border-radius:12px 12px 0 0}
.nf-readall{background:none;border:0;color:var(--accent);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:2px 5px;border-radius:6px}
.nf-readall:hover{background:var(--accent-soft)}
.nf-row{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;cursor:pointer;font-size:12.5px;line-height:1.45}
.nf-row+.nf-row{border-top:1px solid var(--line)}
.nf-row:hover{background:var(--panel2)}
.nf-row:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.nf-row.nf-unread{box-shadow:inset 2px 0 0 var(--accent)}
.nf-ic{flex:none;font-size:14px;line-height:1.4}
.nf-txt{flex:1 1 auto;min-width:0;color:var(--sub);overflow-wrap:anywhere}
.nf-row.nf-unread .nf-txt{color:var(--ink);font-weight:600}
.nf-body{display:block;margin-top:5px;color:var(--sub);font-weight:400;white-space:pre-wrap}
.nf-time{flex:none;color:var(--faint);font-size:10.5px;font-family:var(--mono);margin-top:1px}
/* P1: 초대 인라인 수락/거절(§3.1-D3) */
.nf-acts{display:flex;gap:6px;margin-top:7px}
.nf-act{height:26px;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer}
.nf-act:hover{background:var(--panel2)}
.nf-act-ok{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nf-act-ok:hover{background:var(--accent-h)}
/* P2: 컷 편집권 프레즌스(presence.js) — 필름스트립 잠금 뱃지 + 포커스 잠금 배너(§3.3.2) */
.conti-card{position:relative}
.cl-badge{position:absolute;top:6px;left:6px;z-index:3;background:rgba(23,24,28,.78);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.cl-banner{display:flex;align-items:center;gap:9px;background:var(--warn-soft);border:1px solid var(--warn);border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;color:var(--ink)}
.cl-banner .cl-banner-txt{flex:1 1 auto;line-height:1.4}
/* V2-A: 승인 워크플로(review.js) — 탑바 상태 pill + 액션 팝오버 + 완성 잠금 배너(§15) */
.rv-pill{border:1px solid var(--line-strong);background:var(--panel2);color:var(--sub);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rv-pill:hover{background:var(--surface3)}
.rv-pill.rv-review{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.rv-pill.rv-approved{border-color:var(--live);background:var(--live-soft);color:var(--live)}
/* 상단바 팝오버 규약: position:fixed + JS 배치(review.js) — .top{overflow:hidden}에 잘리지 않게(.menu 관용구, PR#119와 동일) */
.rv-pop{position:fixed;z-index:80;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:170px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto}
.rv-act{border:0;background:none;text-align:left;font-size:12.5px;color:var(--ink);padding:8px 12px;border-radius:8px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rv-act:hover{background:var(--panel2)}
.rv-pop-empty{font-size:12px;color:var(--faint);padding:8px 12px;max-width:230px;line-height:1.45}
.rv-banner{display:flex;align-items:center;gap:9px;background:var(--live-soft);border:1px solid var(--live);border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;color:var(--ink)}
/* P3: 컷 코멘트(comments.js) — 필름스트립 미해결 뱃지(우상단) + 포커스 코멘트 섹션(§3.4) */
.cm-badge{position:absolute;top:6px;right:6px;z-index:3;display:inline-flex;align-items:center;gap:2px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:7px;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cm-badge .i{width:12px;height:12px;display:block}
.cm-badge .cmb-n{line-height:1}
/* ── 코멘트 재설계: 하단 접이식 섹션 폐기 → 컷 헤더 인라인 칩(영상 밖) + 우측 스레드 드로어 ── */
.cm-marker{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--sub);cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
.cm-marker:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.cm-marker.has{color:var(--accent)}
.cm-marker.unresolved{border-color:var(--accent)}
.cm-marker .cm-mk-ico{display:inline-flex}
.cm-marker .i{width:17px;height:17px;display:block}
.cm-mk-dot{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;font-family:var(--mono);box-shadow:0 0 0 2px var(--panel)}
.cm-drawer{position:fixed;top:54px;right:0;bottom:0;width:360px;max-width:88vw;z-index:60;background:var(--panel);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.16);display:flex;flex-direction:column;animation:cmSlide .18s ease-out}
/* 모바일(≤640): 드로어 = 풀시트(top:54 하드코딩은 2행 툴바와 어긋남 — 뷰포트 전면 + 자체 닫기 버튼) */
@media(max-width:640px){.cm-drawer{top:0;width:100%;max-width:100%;border-left:0;z-index:90;padding-bottom:env(safe-area-inset-bottom,0px)}}
@keyframes cmSlide{from{transform:translateX(20px);opacity:.3}to{transform:none;opacity:1}}
.cm-dhead{display:flex;align-items:flex-start;gap:10px;padding:15px 16px 12px;border-bottom:1px solid var(--line)}
.cm-dhtx{flex:1;min-width:0}
.cm-dttl{font-weight:800;font-size:14px;color:var(--ink)}
.cm-dsub{font-size:12px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-dx{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:12px;color:var(--sub)}
.cm-dx:hover{border-color:var(--accent);color:var(--accent)}
.cm-dbody{flex:1;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.cm-empty{font-size:12px;color:var(--faint);padding:4px 0}
.cm-row{border-bottom:1px solid var(--line);padding-bottom:10px}
.cm-row.cm-done{opacity:.62}
.cm-meta{font-size:11.5px;color:var(--sub);margin-bottom:3px}
.cm-meta b{color:var(--ink)}
.cm-guest{display:inline-block;margin-left:5px;font-size:10px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:0 4px}  /* V2-B: 게스트 리뷰 코멘트 표시 */
.cm-resolved{margin-left:8px;color:var(--live);font-weight:600}
.cm-text{font-size:13px;color:var(--ink);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-act{margin-top:5px;background:none;border:1px solid var(--line);border-radius:7px;padding:3px 10px;font-size:11px;color:var(--sub);cursor:pointer;font-family:inherit}
.cm-act:hover{color:var(--ink);border-color:var(--line-strong)}
.cm-form{display:flex;flex-direction:column;gap:7px}
.cm-chips{display:flex;flex-wrap:wrap;gap:5px}
.cm-chip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:11px;color:var(--sub);cursor:pointer;font-family:inherit}
.cm-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.cm-input{width:100%;resize:vertical;background:var(--field);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink)}
.cm-send{align-self:flex-end}
.cm-orphan-head{font-size:11px;font-weight:700;color:var(--warn);margin-top:2px}
.cm-orphan .cm-text{color:var(--sub)}

/* prefers-reduced-motion: 장식 애니메이션만 줄임 (영상 재생은 JS 프레임이라 영향 없음) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .regen-bar>i{ animation:none; width:100% }
  /* 스피너: 회전 끔 → 정적 코발트 점 표시(작업 진행 중임은 칩 텍스트가 전달) */
  .jw-spin,.jw-pop-spin{animation:none;border:0;background:var(--accent)}
}

/* ── 브랜드 폰트 픽커(Z4 커스텀 드롭다운): 자유입력 제거 · 옵션이 해당 폰트 실스타일 스펙시멘 ── */
.font-pick{margin:6px 0 12px}
.fontsel{position:relative}
.fontsel-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px 12px;cursor:pointer;color:var(--ink);font-family:inherit;font-size:15px;text-align:left;transition:border-color .14s ease,box-shadow .14s ease}
.fontsel-trigger:hover{border-color:var(--accent)}
.fontsel.open .fontsel-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fontsel-trigger .fs-cur{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fontsel-trigger .fs-chev{color:var(--sub);font-size:12px;transition:transform .16s ease}
.fontsel.open .fs-chev{transform:rotate(180deg)}
/* 인라인 확장(절대배치 아님) — .modal-body(overflow-y:auto) 안에서 잘리지 않게. 열리면 아래 내용을 밀고
   모달이 스크롤로 수용. 패널 자체도 max-height+스크롤(옵션 많을 때). */
.fontsel-panel{display:none;margin-top:6px;background:var(--panel2);border:1px solid var(--line-strong);border-radius:var(--radius-lg);max-height:320px;overflow-y:auto;padding:5px}
.fontsel.open .fontsel-panel{display:block}
.fontsel-opt{position:relative;width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;color:var(--ink);font-family:inherit;text-align:left}
.fontsel-opt:hover{background:var(--panel2)}
.fontsel-opt.sel{background:var(--accent-soft)}
.fontsel-opt .fo-specimen{flex:0 0 148px;font-size:18px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden}
.fontsel-opt .fo-name{flex:1;font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fontsel-opt .fo-badge{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 6px}
.fontsel-opt .fo-del{flex:0 0 auto;color:var(--faint);font-size:13px;padding:2px 6px;border-radius:6px}
.fontsel-opt .fo-del:hover{color:var(--danger);background:var(--danger-soft)}
.fontsel .fs-group{font-size:11px;font-weight:700;color:var(--faint);padding:8px 11px 4px;border-top:1px solid var(--line);margin-top:4px}
.fontsel .fs-upload{justify-content:center;color:var(--accent);font-weight:700;font-size:13px;border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 8px 8px}
.fontsel .fs-upload:hover{background:var(--accent-soft)}
.fontsel .fs-empty{padding:12px;color:var(--faint);font-size:13px;text-align:center}

/* 다시 실행 버튼(되돌리기 아이콘 좌우 반전) + 키보드 단축키 도움말 오버레이 */
.redo-flip{transform:scaleX(-1)}
.sc-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
.sc-help{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px 20px 18px;max-width:420px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(0,0,0,.32)}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sc-head b{font-size:15px}
.sc-table{width:100%;border-collapse:collapse}
.sc-table td{padding:7px 4px;font-size:13px;border-top:1px solid var(--line);color:var(--ink)}
.sc-table tr:first-child td{border-top:0}
.sc-k{width:44%}
.sc-table kbd{display:inline-block;padding:3px 9px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:7px;background:var(--panel2);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

/* ══ UX 리뉴얼(2026-07-09): 안내문 다이어트 · 내부값 비노출 · 레이아웃 ══
   - 단일 장면 컷: 좌측 레일 숨김 → 캔버스 확장(2열)
   - 콘티 헤더: 제목/리드 제거 → [인트로·아웃트로 | 메타] 한 줄 + 1회 코치마크
   - 타임라인 조작법 = ⓘ 툴팁 · 영역 안내 = 트랜스포트 한 줄(#regionTip) · AI 편집 제안 칩 */
.ci-line[hidden]{display:none!important}   /* .ci-line{display:flex}가 UA [hidden]을 덮는 것 차단(화면 텍스트 조건부 노출) */
.layout.no-rail{grid-template-columns:1fr 322px}
.layout.no-rail .rail{display:none}
.sb-head.sb-slim{display:flex;align-items:center;gap:10px;margin:0 0 12px;max-width:1100px}
.sb-head.sb-slim .bumper-bar{margin-top:0}
.delivery-attention-nav{display:inline-flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line));border-radius:8px;background:var(--warn-soft,#fff9e8);white-space:nowrap}
.delivery-attention-label{padding:0 4px;font-size:11px;font-weight:800;color:var(--warn)}
.delivery-attention-step{min-height:26px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:var(--sub);font-size:11px;font-weight:700;cursor:pointer}
.delivery-attention-step:hover{background:var(--panel);color:var(--ink)}
.delivery-attention-step:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sb-head.sb-slim .sb-meta{margin-left:auto;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.conti-help{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}   /* CP4: 3경로 상시 도움 '?' */
.conti-help:hover{border-color:var(--accent);color:var(--accent)}
.conti-coach{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--sub);background:var(--accent-soft);border:1px solid rgba(42,79,224,.22);border-radius:9px;padding:8px 12px;margin:0 0 12px;max-width:1100px}
.coach-x{margin-left:auto;flex:0 0 auto;background:none;border:0;color:var(--sub);cursor:pointer;padding:2px;display:inline-flex;border-radius:5px}
.coach-x:hover{color:var(--ink)}
.coach-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctl-info{margin-left:auto;flex:0 0 auto;color:var(--sub);font-size:13px;line-height:1;cursor:help;padding:1px 3px;border-radius:5px}
.ctl-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dir-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px}
.dir-help{flex:1 1 100%;line-height:1.45;color:var(--sub)}   /* 버튼 아래 전폭 헬퍼(옆에서 어색하게 꺾이던 문구 이전) */
.dir-actions .ci-regen{font-size:12px;padding:4px 12px}
.btn-tag{font-size:9.5px;font-weight:800;color:var(--accent);background:rgba(42,79,224,.1);border-radius:4px;padding:1px 5px;margin-left:3px}
.btn:disabled .btn-tag{opacity:.5}
/* 트랜스포트 보조 힌트: 회색 한 줄 → 코발트 알약(주 안내는 캔버스 #regionIdle 어포던스) */
.region-tip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(42,79,224,.22);border-radius:999px;padding:4px 11px;white-space:nowrap;margin-left:2px}
.region-tip .i{width:14px;height:14px;flex:0 0 auto}
.region-tip b{font-weight:800}
@media(max-width:860px){.region-tip{display:none}}   /* 좁은 폭: 캔버스 어포던스로 충분 — 트랜스포트 혼잡 방지 */
.chat-suggest{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
/* 제안 칩 아래 범위 지정 힌트 — 빈 패널을 채우는 장식이 아니라 '부분 수정'이라는 제품 핵심을 알리는 한 줄 */
.chat-empty-tip{display:block;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--faint);text-wrap:pretty}
.chat-empty-tip b{color:var(--sub);font-weight:650}
.cs-chip{background:var(--field);border:1px solid var(--line);border-radius:99px;color:var(--sub);font-size:11.5px;padding:4px 11px;cursor:pointer;font-family:inherit}
.cs-chip:hover{border-color:var(--accent);color:var(--ink)}
.cs-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* AI 편집형 컷: 인스펙터·레이어가 없으므로 채팅 패널을 우측 상단으로(하단 고정 해제 — 빈 공간 방지) */
.insp.ai-only .chat-panel{margin-top:0;border-top:0;padding-top:0;flex:1}
.insp.ai-only .chat-log{max-height:none}

/* ══ UX 리뉴얼 2차(2026-07-09): 콘티 포커스 패널 재구성 — 편집기 관용구 ══
   상단 [프리뷰 | 컷 속성(헤더·메시지·연출·액션)] + 하단 풀폭 [자막·내레이션 밴드].
   좌우 높이 불균형(우측 거대 공백) 해소, 타임라인은 풀폭으로 가로 해상도 확보. */
.conti-focus{display:grid;grid-template-columns:minmax(380px,7fr) 5fr;grid-template-areas:"prev props" "band band";gap:14px 22px;align-items:stretch}
.conti-focus .cf-left{grid-area:prev;max-width:none;min-width:0}
.conti-focus .conti-body{grid-area:props;min-width:0}
.conti-focus > .ci-review{grid-area:band;margin:0}
.conti-focus .conti-body .conti-actions{margin-top:auto;padding-top:8px}   /* 액션을 속성 칼럼 하단에 고정 — 프리뷰 높이와 시각적 정렬 */
@media(max-width:980px){.conti-focus{grid-template-columns:minmax(0,1fr);grid-template-areas:"prev" "props" "band"}.conti-focus .conti-body .conti-actions{margin-top:0}}   /* minmax(0,1fr): 밴드 타임라인 min-content에 밀려 안 접히던 것 → 컨테이너로 축소(CP2) */
/* 밴드 내부 2열: [타임라인 풀폭] 아래 [자막 | 내레이션·효과음] — DOM 무변경(grid-area만) */
.conti-focus > .ci-review{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h h" "tl tl" "cue narr" "cue sfx";gap:12px 26px;align-content:start}
.conti-focus > .ci-review .ci-review-h{grid-area:h;margin:0}
.conti-focus > .ci-review .ctl-line{grid-area:tl}
.conti-focus > .ci-review .cue-line{grid-area:cue;align-self:start}
.conti-focus > .ci-review .ci-narr{grid-area:narr;align-self:start}
.conti-focus > .ci-review .ci-sfx{grid-area:sfx;align-self:start}
.conti-focus > .ci-review .ci-sfx[hidden]{display:none!important}
@media(max-width:980px){.conti-focus > .ci-review{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "tl" "cue" "narr" "sfx"}.conti-focus > .ci-review > *{min-width:0}.ctl-body{overflow-x:auto}}
/* ══ CP2 모바일: 콘티/정밀 편집 화면 붕괴·클립 방지(≤860 정밀 · ≤560 콘티 세부) ══ */
@media(max-width:860px){
  body{overflow-x:hidden}                                   /* 잔여 가로 넘침 안전망 */
  /* 정밀 편집: 3열/2열(고정 322 인스펙터가 스테이지를 53px로 압살) → 단일열 스택 */
  .layout,.layout.no-rail{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;height:auto;min-height:0;overflow:visible}
  .stage{overflow:visible;min-height:52vh}
  .insp{border-left:none;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  /* AI 편집: 터치 키보드에선 Enter/Shift 힌트가 무의미 → 숨김, 전송 버튼이 액션 줄 전폭 사용 */
  .chat-hint{display:none}
  .chat-actions{justify-content:flex-end}
  /* 액션 줄바꿈 */
  .conti-actions{flex-wrap:wrap;gap:8px}
  /* 컷 헤더 줄바꿈 + 제목 input 풀폭 */
  .conti-rowhead{flex-wrap:wrap}
  .conti-rowhead .ci-label{flex:1 1 100%}
  /* 연출 지시 액션: 버튼 아래로 캡션 줄바꿈(좁은 칼럼에서 세로 글자 깨짐 방지) */
  .dir-actions{flex-wrap:wrap}
  .dir-actions .muted{flex:1 1 100%}
  /* ★2026-07-24 프로드 실측: 위 두 줄과 정확히 같은 부류인데 정작 뼈대인 .ci-line만 빠져 있었다.
     .ci-k가 flex:0 0 104px(절대 안 줄어드는 라벨 열)라 375px에서 값 영역이 155px밖에 안 남고,
     그 안에서 자막 입력이 22px로 찌그러지고 "자막 시점 직접 맞추기"(11px 폭·117px 높이)와
     효과음 힌트(10px 폭·275px 높이)가 한 글자 폭으로 눌려 세로로 흘렀다 — 한글은 글자 단위로
     줄바꿈되므로 폭이 1글자가 되면 글자가 세로로 쏟아진다. 좁은 화면에선 라벨을 값 위로 올린다. */
  /* ★범위가 .ci-review였는데 좁았다(2026-07-24 2차): '핵심 메시지'·'연출 지시' 행은 .conti-body
     아래라 규칙 밖이었고, 320px에서 입력이 카드 테두리를 21px 뚫고 화면 밖으로 잘려 나갔다
     (라벨 104 + gap 8 + input 내재최소폭 168 = 280 > 카드 안쪽 폭). .conti-focus로 올려 둘 다 덮는다. */
  .conti-focus .ci-line{flex-direction:column;align-items:stretch;gap:4px}
  .conti-focus .ci-line > .ci-k{flex:0 0 auto;padding-top:0}
  .cue-hd,.sfx-hd{flex-wrap:wrap}
}
@media(pointer:coarse){   /* 편집기 소형 컨트롤 터치 타깃 확대(기존 44px 규칙은 .btn/.seg만 커버) */
  .cue-add,.cue-del,.cue-start,.ctl-play,.ci-narr-set,.mv-cut,.del-cut,.sfx-play{min-height:40px;min-width:40px}
  /* ★.modal-x는 '모든 모달의 닫기 버튼'인데 32px로 어느 44px 규칙에도 안 걸려 있었다
     (2026-07-24 실측: 브랜드·생성·내레이션·재생 모달 전부 동일). 모달에서 가장 많이 눌리는
     컨트롤이 가장 작았던 셈이다. 브랜드 모달의 탭·목록도 같은 이유로 함께 올린다. */
  .modal-x{width:44px;height:44px}
  .brand-tab,.brand-list-item,.brand-new,.fontsel-trigger{min-height:44px}
  /* ★2026-07-24 프로드 실계정 실측: 아래 8종은 GUIDE-mobile-ui §3의 "전용 클래스를 새로 만들면
     반드시 pointer:coarse에 min-height를 추가한다"에 한 번도 편입된 적이 없었다. 전부 '실제
     프로젝트 데이터가 있어야 렌더되는' 컨트롤이라 더미 데이터 감사에서 계속 빠져나갔다.
     .bumper-toggle은 28px인데 누르면 20크레딧이 나간다 — 가장 작고 가장 비쌌다. */
  .bumper-toggle,.gen-bumper-options label,.rv-pill,.cs-chip,.cm-marker,.sfx-global,.sfx-pick{min-height:44px}
  .conti-help,.coach-x{width:44px;height:44px}
}
/* 정돈: '수정됨' 전체 링 제거(배지·필름스트립 닷이 이미 상태 표시 — 파란 테두리가 패널을 무겁게 만듦). 미저장 경고 링만 유지. */
.conti-focus.modified{box-shadow:none}
/* 폭 리듬 통일: 헤더줄·코치마크·포커스 패널 = 같은 1160px 중앙 정렬 */
.sb-head.sb-slim{max-width:1160px;margin-left:auto;margin-right:auto}
.conti-coach{max-width:1160px;margin-left:auto;margin-right:auto;margin-bottom:12px}

/* 실제 편집기 체험: 제품 UI는 그대로 두고, 현재 조작 대상만 짚는 소형 가이드. */
.demo-guide{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:10020;width:min(394px,calc(100vw - 28px));padding:14px;background:var(--panel);background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line-strong);border-radius:15px;box-shadow:0 22px 70px rgba(12,18,36,.25);backdrop-filter:blur(16px);color:var(--ink)}
.demo-guide[hidden],.demo-guide-resume[hidden]{display:none!important}
.demo-guide-head{display:flex;align-items:center;gap:8px;cursor:grab;touch-action:none;user-select:none}
.demo-guide.is-dragging .demo-guide-head{cursor:grabbing}
.demo-guide-badge{font-size:10.5px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 8px}
.demo-guide-count{margin-left:auto;font:700 11px/1.2 var(--mono);color:var(--sub)}
.demo-guide-minimize{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--sub);font:20px/1 inherit;cursor:pointer}
.demo-guide-minimize:hover{background:var(--panel2);color:var(--ink)}
.demo-guide-progress{display:grid;grid-template-columns:repeat(var(--demo-guide-steps,6),1fr);gap:4px;margin:10px 0 13px}
.demo-guide-progress span{height:3px;border-radius:4px;background:var(--line)}
.demo-guide-progress span.is-on{background:var(--accent)}
.demo-guide-eyebrow{font:750 10.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--accent);margin-bottom:5px}
.demo-guide-title{display:block;font-size:15px;line-height:1.45;letter-spacing:-.01em}
.demo-guide-body{margin:6px 0 13px;font-size:12.5px;line-height:1.55;color:var(--sub);overflow-wrap:anywhere}
.demo-guide-draw-steps{display:grid;gap:5px;margin:10px 0 0;padding:0;list-style:none;counter-reset:draw-step}
.demo-guide-draw-steps li{position:relative;padding-left:25px;font-size:11.5px;line-height:1.35;color:var(--sub);counter-increment:draw-step}
.demo-guide-draw-steps li::before{content:counter(draw-step);position:absolute;left:0;top:-1px;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:750 9px/1 var(--mono);color:var(--sub);background:var(--panel2)}
.demo-guide-draw-steps li.is-done{color:var(--ink)}
.demo-guide-draw-steps li.is-done::before{content:"✓";border-color:rgba(15,176,122,.45);color:#0E9F6E;background:rgba(15,176,122,.12)}
.demo-guide-draw-steps li.is-ready{color:var(--accent);font-weight:700}
.demo-guide-draw-steps li.is-ready::before{border-color:var(--accent);color:var(--accent);background:rgba(42,79,224,.12)}
.demo-guide-foot{display:flex;align-items:center;gap:7px}
.demo-guide-back,.demo-guide-next,.demo-guide-action,.demo-guide-resume{font-family:inherit;cursor:pointer}
.demo-guide-back,.demo-guide-next{height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--sub);font-size:11.5px;font-weight:650}
.demo-guide-back:hover:not(:disabled),.demo-guide-next:hover{background:var(--panel2);color:var(--ink)}
.demo-guide-back:disabled{opacity:.35;cursor:default}
.demo-guide-action{min-height:36px;flex:1;border:0;border-radius:9px;padding:7px 12px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:750;line-height:1.35}
.demo-guide-action:hover{background:var(--accent-h)}
.demo-guide-action:disabled{opacity:.55;cursor:wait}
/* 03 콘티 검토를 이미 열어본 상태 — 그 단계의 할 일은 끝났으므로 강조를 '정밀 편집으로'에 넘긴다.
   종전엔 액션만 파란 CTA라, 콘티를 본 뒤에도 다음 걸음이 회색 보조 버튼에 묻혀 유저가 진행할
   길을 못 찾았다(2026-07-23 유저 리포트). 액션은 '다시 보기' 보조로 낮춘다. */
.demo-guide-action.demo-guide-action-done{flex:none;background:var(--panel2);color:var(--ink);font-weight:700}
.demo-guide-action.demo-guide-action-done:hover{background:var(--line)}
.demo-guide-next.demo-guide-next-cta{flex:1;min-height:36px;border-radius:9px;padding:7px 12px;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:750}
.demo-guide-next.demo-guide-next-cta:hover{background:var(--accent-h)}
/* ≤640에선 주 CTA가 첫 줄을 통째로 쓴다(.demo-guide-action의 order:-1·flex-basis:100% 관용구).
   강조가 next로 넘어갔으면 그 자리도 함께 넘겨야 [이전][다시 보기] 사이에 '이전'이 끼지 않는다. */
@media(max-width:640px){
  .demo-guide-action.demo-guide-action-done{order:0;flex-basis:auto}
  .demo-guide-next.demo-guide-next-cta{order:-1;flex-basis:100%}
}
.demo-guide-resume{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:10020;height:38px;border:1px solid var(--accent);border-radius:999px;padding:0 15px;background:var(--panel);color:var(--accent);box-shadow:var(--shadow-pop);font-size:12px;font-weight:750}
.demo-guide-target{outline:3px solid rgba(42,79,224,.78)!important;outline-offset:3px;animation:demoGuidePulse 1.8s ease-in-out infinite}
.overlay.demo-guide-target,.region-draw.demo-guide-target{animation:none}
@keyframes demoGuidePulse{50%{outline-color:rgba(42,79,224,.3)}}
@media(min-width:800px) and (min-height:760px){
  .demo-guide.demo-guide-dialog,.demo-guide.demo-guide-flow{left:50%;right:auto;transform:translateX(-50%);width:min(920px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(240px,1fr) auto;grid-template-areas:"head title foot" "head body foot";align-items:center;column-gap:16px;row-gap:2px;padding:10px 12px}
  .demo-guide.demo-guide-dialog{bottom:10px}
  .demo-guide.demo-guide-flow{top:154px;bottom:auto}
  .demo-guide.demo-guide-dialog .demo-guide-head,.demo-guide.demo-guide-flow .demo-guide-head{grid-area:head}
  .demo-guide.demo-guide-dialog .demo-guide-progress,.demo-guide.demo-guide-dialog .demo-guide-eyebrow,.demo-guide.demo-guide-flow .demo-guide-progress,.demo-guide.demo-guide-flow .demo-guide-eyebrow{display:none}
  .demo-guide.demo-guide-dialog .demo-guide-title,.demo-guide.demo-guide-flow .demo-guide-title{grid-area:title;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demo-guide.demo-guide-dialog .demo-guide-body,.demo-guide.demo-guide-flow .demo-guide-body{grid-area:body;margin:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demo-guide.demo-guide-dialog .demo-guide-foot,.demo-guide.demo-guide-flow .demo-guide-foot{grid-area:foot;min-width:300px}
  .demo-guide.demo-guide-flow.demo-guide-drawing{left:auto;right:18px;top:162px;transform:none;width:350px;display:block;padding:13px 14px}
  .demo-guide.demo-guide-flow.demo-guide-drawing .demo-guide-head{margin-bottom:0}
  .demo-guide.demo-guide-flow.demo-guide-drawing .demo-guide-title{display:block;margin-top:10px;white-space:normal;font-size:14px}
  .demo-guide.demo-guide-flow.demo-guide-drawing .demo-guide-body{display:block;margin:6px 0 12px;white-space:normal;overflow:visible}
  .demo-guide.demo-guide-flow.demo-guide-drawing .demo-guide-foot{display:flex;min-width:0}
}
.demo-guide.demo-guide-placed{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto}
@media(max-width:640px){.demo-guide{right:10px;bottom:10px;width:calc(100vw - 20px)}.demo-guide-resume{right:10px;bottom:10px}.demo-guide-foot{flex-wrap:wrap}.demo-guide-action{order:-1;flex-basis:100%}}
/* ★단일열 스택(≤860)에선 재개 필을 좌하단으로 — 우하단 고정이면 우측 정렬된 '수정 반영'(#chatSend)을
   덮어 노출 폭이 ~51px 슬리버만 남고, 손가락 탭(접촉 반경 ~20px)이 필로 새서 버튼이 무반응처럼 된다
   (2026-07-22 유저 리포트, elementFromPoint 실측). 위 640 블록보다 뒤에 둬야 ≤640에서도 이긴다. */
@media(max-width:860px){.demo-guide-resume{left:14px;right:auto}}
/* ★폭이 넓어도 높이가 짧으면(≤760 — 위 min-height:760 데스크톱 플로우 배치 미달) 카드·필이 기본
   우하단으로 떨어져, 뷰포트 하단에 붙은 채팅 패널의 '수정 반영'(#chatSend)을 덮는다(2026-08-03
   1280×720 실측, elementFromPoint=demoGuideResume). ≤860 규칙의 높이 축 쌍둥이. */
@media(max-height:760px){.demo-guide-resume{left:14px;right:auto}}
/* 모바일에서 재개 필(z 10020)이 열린 모달의 푸터 버튼(저장/닫기) 위에 앉는다 → 모달이 떠 있는 동안은 숨긴다.
   모달을 닫으면 곧바로 되살아나므로 가이드 접근성은 유지된다. */
@media(max-width:640px){
  body:has(.modal-wrap:not([hidden])) .demo-guide-resume,
  body:has(.modal-wrap:not([hidden])) .demo-guide{display:none!important}
}
/* ★AI 편집 입력에 포커스가 있는 동안(=모바일 키보드 열림)은 가이드 카드·필을 통째로 숨긴다(위 모달 관용구 동형).
   iOS는 키보드가 열리면 fixed 요소의 '페인트 위치'와 '탭 판정 영역'이 어긋나 — 화면엔 '수정 반영'이
   보이는데 탭은 가이드 UI가 먹는 일이 실기기에서만 난다(2026-07-22 유저 반복 리포트의 마지막 조각).
   입력을 마치고 포커스가 떠나면(키보드 닫힘) 곧바로 되살아난다. */
@media(max-width:860px){
  body:has(#chatin:focus) .demo-guide-resume,
  body:has(#chatin:focus) .demo-guide{display:none!important}
}
@media(prefers-reduced-motion:reduce){.demo-guide-target{animation:none}}

/* ── 훅픽(EXEC-l3-hookpick §3.3 v2) — 프리뷰 오버레이 필 + '현재 vs 대안' 비교 팝오버 ── */
/* 필은 판단 대상(프리뷰) 위에 — 대안 선택은 시각 비교라 어포던스가 비주얼에 붙는다. cf-left가 앵커
   (playStill이 still 내부를 다시 그리므로 still 안엔 못 둔다). 프리뷰 스테이지는 다크(--canvas)라
   잉크 반투명+블러 필이 라이트/다크 스틸 모두에서 읽힌다. */
.cf-left{position:relative}
.hp-fab{position:absolute;top:10px;right:10px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:999px;background:rgba(12,14,22,.72);color:#fff;font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 14px -6px rgba(12,14,22,.55);transition:background .15s ease}
.hp-fab:hover{background:rgba(12,14,22,.88)}
.hp-fab:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.hp-fab .i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.hp-fab-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--accent);color:#fff}
@media (pointer:coarse){.hp-fab{min-height:36px}}

/* ── 핀 컷 토글(EXEC-brand-canon §6 · 배치 v2) — 컷 *상태*는 rowhead 소속(액션 행은 행위만) ──
   미고정=고스트 아이콘(옵트인 기능이라 조용히) · 고정=잉크 칩 '고정됨'(잠금 상태가 제목 옆에서 즉독) */
.ci-pinhead{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;border:0;background:transparent;color:var(--sub);font:inherit;font-size:11.5px;font-weight:700;padding:5px 7px;border-radius:999px;cursor:pointer;transition:background .14s ease,color .14s ease}
.ci-pinhead .i{width:15px;height:15px}
.ci-pinhead .ci-pinlbl{display:none}
.ci-pinhead:hover{background:var(--panel2);color:var(--ink)}
.ci-pinhead:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.ci-pinhead.on{background:var(--ink);color:#fff;padding:5px 10px}
.ci-pinhead.on .ci-pinlbl{display:inline}
.ci-pinhead.on:hover{background:#2a2e3c;color:#fff}
@media (pointer:coarse){.ci-pinhead{min-height:34px}}
.hp-pop{position:fixed;z-index:80;width:min(560px,92vw);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -16px rgba(20,22,30,.28);overflow:hidden}
.hp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.hp-head b{font-size:13px;color:var(--ink)}
.hp-note{font-size:11px;color:var(--sub);flex:1}
.hp-x{border:0;background:none;font-size:16px;line-height:1;cursor:pointer;color:var(--sub);padding:2px 6px;border-radius:6px}
.hp-x:hover{background:var(--panel2);color:var(--ink)}
.hp-body{display:flex;gap:10px;padding:12px;overflow:auto;min-height:0}   /* .menu 관용구: 뷰포트보다 크면 내부 스크롤(스왑 버튼 가림 방지) */
.hp-loading{font-size:12px;color:var(--sub);padding:14px}
.hp-card{flex:1 1 0;min-width:210px;display:flex;flex-direction:column;gap:7px}
.hp-badge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--sub);border:1px solid var(--line)}
.hp-card.hp-cur .hp-badge{background:var(--ink);color:#fff;border-color:var(--ink)}   /* 비교 기준=현재는 잉크 배지 */
.hp-thumb{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--canvas);box-shadow:0 8px 20px -12px rgba(12,14,22,.5)}
.hp-card.hp-cur .hp-thumb{opacity:.92}                    /* 현재는 살짝 후퇴 — 시선은 대안으로(필름스트립 dim 문법) */
.hp-thumb svg,.hp-thumb img.fv{width:100%;height:100%;display:block}
.hp-meta{font-size:11px;color:var(--sub);font-family:var(--mono)}
.hp-swap{width:100%;justify-content:center;margin-top:auto}
.hp-keep{margin-top:auto;min-height:34px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--sub);border:1px dashed var(--line);border-radius:9px}
@media(max-width:640px){.hp-pop{left:8px !important;right:8px;width:auto}.hp-body{flex-direction:column}.hp-card{min-width:0}}

/* ── 원테이크 저장된 컷 — 현재 결과 우선 + 이전/새 결과 왕복 선택 ── */
.cf-left>.hp-fab~.cv-fab{top:48px}
.cv-fab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#fff;color:#202431;font-size:10px;font-weight:800}
.cv-pop{position:fixed;z-index:81;width:min(780px,94vw);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px -16px rgba(20,22,30,.28);overflow:hidden}
.cv-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;padding:12px;overflow:auto;min-height:0}
.cv-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.cv-card.current{border-color:var(--accent);box-shadow:0 0 0 2px rgba(42,79,224,.12)}
.cv-card-badge{align-self:flex-start;font-size:10.5px;font-weight:750;padding:3px 8px;border-radius:999px;background:var(--panel2);color:var(--sub)}
.cv-card.current .cv-card-badge{background:var(--ink);color:#fff}
.cv-thumb{width:100%}
.cv-edges{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:45px}
.cv-edge{display:inline-flex;align-items:center;max-width:100%;padding:3px 7px;border-radius:6px;font-size:10.5px;font-weight:650;line-height:1.3;color:var(--sub);background:var(--panel2);border:1px solid var(--line)}
.cv-edge.continuous{color:#176443;background:rgba(41,153,102,.1);border-color:rgba(41,153,102,.28)}
.cv-edge.unverified{color:#8a5a0a;background:rgba(220,151,36,.12);border-color:rgba(220,151,36,.3)}
.cv-select,.cv-keep{margin-top:auto}
.changebanner.cv-notice{display:flex;align-items:center;gap:12px;padding:10px 12px;animation:none;opacity:1}
.cv-notice-text{min-width:0;flex:1}
.cv-notice-title{display:block}
.cv-notice-copy{margin-top:3px;color:var(--sub);font-size:11px;line-height:1.4}
.cv-notice-action{flex:0 0 auto;min-height:30px;white-space:nowrap}
@media(max-width:700px){.cv-pop{left:8px !important;right:8px;width:auto}.cv-body{grid-template-columns:1fr}.cv-card{min-width:0}.changebanner.cv-notice{align-items:flex-start;flex-direction:column}.cv-notice-action{width:100%;justify-content:center}}

/* ── 모션 로고(P3 B-1): 벡터 확인 게이트 + 모션 스토리보드 모달 (GUIDE-mobile-ui 준수) ── */
.lv-wrap{position:fixed;inset:0;background:rgba(12,14,22,.55);display:flex;align-items:center;justify-content:center;z-index:260;padding:14px}
.lv-wrap[hidden]{display:none}
.lv-modal{background:var(--bg0,#fff);border-radius:14px;box-shadow:0 18px 60px rgba(12,14,22,.28);max-width:880px;width:100%;max-height:calc(100dvh - 28px);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lv-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lv-panes{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.lv-pane{margin:0;min-width:0}
.lv-pane figcaption{font-size:12px;color:var(--gray,#5a6b86);margin-bottom:4px}
.lv-canvas{height:min(240px,32dvh);overflow:auto;border:1px solid var(--line,#e3e7ef);border-radius:10px;background:repeating-conic-gradient(#f2f4f9 0% 25%,#fff 0% 50%) 0 0/16px 16px}
.lv-fit{display:block;width:calc(var(--lvz,1)*100%);height:auto}
.lv-fit svg{width:100%;height:auto;display:block}
.lv-zoom{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.lv-zoom .opt-btn{min-width:42px}
.lv-metrics{min-height:1em}
.lv-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.lv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lv-card{display:flex;flex-direction:column;gap:6px;text-align:left;border:1.5px solid var(--line,#e3e7ef);border-radius:12px;padding:8px;background:none;cursor:pointer;min-width:0}
.lv-card.on{border-color:var(--primary,#2a4fe0);box-shadow:0 0 0 3px rgba(42,79,224,.14)}
.lv-card .lv-play{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b0f14}
.lv-card .lv-play svg,.lv-card .lv-play img{width:100%;height:100%;display:block}
.lv-outro-too{display:flex;align-items:center;gap:6px;font-size:13px}
@media(max-width:640px){.lv-panes{grid-template-columns:1fr}.lv-cards{grid-template-columns:1fr 1fr}.lv-modal{padding:12px}}
@media(pointer:coarse){.lv-card{min-height:44px}.lv-zoom .opt-btn{min-height:36px}}

/* 새 영상 만들기 — 브랜드 프레임 옵션(표시/풀블리드): 아이콘이 결과를 그대로 보여준다(직관 표기) */
.frame-btn{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.frame-ico{width:22px;height:13px;flex:none;color:var(--primary,#2a4fe0)}
.frame-btn:not(.on) .frame-ico{color:var(--gray,#5b6b86)}

/* ── 누름 상태(:active) — 터치 피드백 ──────────────────────────────────────────
   2026-07-24 감사: 인터랙티브 요소 63개 중 :active가 있는 건 21개(33%)뿐이었다.
   ★hover는 마우스에만 있다 — 터치 기기에서는 이 컨트롤들을 눌러도 "눌렸다"는 신호가
   전혀 없었다. focus-visible은 이미 63/63이라 키보드는 멀쩡했고, 빠진 건 손가락이다.
   관용구는 이 파일이 이미 쓰던 것을 그대로 따른다(.btn:active·.conti-card:active =
   translateY(1px)). 새 어휘를 만들지 않는다.
   ★transition을 붙이지 않는다: 눌림은 애니메이션이 아니라 즉시 반응이어야 한다
   (prefers-reduced-motion 전역 규칙도 어차피 transition을 끈다).
   ★:not(:disabled) — 비활성 컨트롤이 눌린 척하면 거짓 피드백이다.
   ★파일 끝에 두는 이유: 앞선 :hover 규칙(예 .sb-card:hover의 -2px 리프트)보다 뒤여야
   같은 특이도에서 누름이 이긴다. */
.seg:not(:disabled):active,.jw-chip:not(:disabled):active,.chip:not(:disabled):active,
.cs-chip:not(:disabled):active,.mood-chip:not(:disabled):active,.brand-tab:not(:disabled):active,
.brand-list-item:not(:disabled):active,.menu-item:not(:disabled):active,.nd-item:not(:disabled):active,
.nd-close:not(:disabled):active,.rv-pill:not(:disabled):active,.acct-btn:not(:disabled):active,
.bumper-toggle:not(:disabled):active,.ctl-play:not(:disabled):active,.cue-add:not(:disabled):active,
.cue-del:not(:disabled):active,.del-cut:not(:disabled):active,.sfx-play:not(:disabled):active,
.player-play:not(:disabled):active,.player-mute:not(:disabled):active,.player-x:not(:disabled):active,
.player-mp4:not(:disabled):active,.opt-btn:not(:disabled):active,.theme-btn:not(:disabled):active,
.szbtn:not(:disabled):active,.ratio-btn:not(:disabled):active,.fontsel-opt:not(:disabled):active,
.modal-head-btn:not(:disabled):active,.proj-btn:not(:disabled):active,.nr-play:not(:disabled):active,
.ot-btn:not(:disabled):active,.cut-step-btn:not(:disabled):active,.plan-mini:not(:disabled):active,
.objdel:not(:disabled):active,.objnlbtn:not(:disabled):active,
/* 2차: 링크·소형 아이콘 버튼·데모 가이드 컨트롤(1차에서 누락) */
.skip:active,.brand:active,.nd-topup:not(:disabled):active,.nd-account:not(:disabled):active,
.conti-help:active,.coach-x:active,.ci-pinhead:not(:disabled):active,.cm-marker:not(:disabled):active,
.mv-cut:not(:disabled):active,.ci-narr-set:not(:disabled):active,.demo-guide-minimize:active,
.demo-guide-back:not(:disabled):active,.demo-guide-action:active,.demo-guide-next:not(:disabled):active,
/* 3차: 모달이 열린 상태에서만 보이는 컨트롤(1·2차 측정 시 DOM에 없었다) */
.modal-x:active,.brand-new:not(:disabled):active,.fontsel-trigger:not(:disabled):active,
/* 4차: 로그인 상태에서만 열리는 화면(내레이션·보이스, 사용량·과금, 팀·멤버, 조직 작업 바).
   ★이들은 /demo로는 도달할 수 없어 1~3차 측정 DOM에 아예 없었다 — 계정을 만들어 로그인한
   뒤에야 드러났다. 측정 대상에 없던 것은 "통과"가 아니라 "미측정"이다. */
.narr-voice:not(:disabled):active,.nv-preview:not(:disabled):active,.segtab:not(:disabled):active,
.org-job-summary:active,.ctl-empty:not(:disabled):active{transform:translateY(1px)}
/* .sb-card는 hover에서 -2px 떠오른다 → 누르면 제자리로 내려앉아야 "눌림"으로 읽힌다 */
.sb-card:active{transform:translateY(0)}
/* ★텍스트 입력(.ci-f·.cue-text·.cue-start·textarea)과 네이티브 체크박스는 일부러 제외한다.
   입력창은 눌러서 실행하는 물건이 아니라 커서를 두는 자리다 — 누를 때 1px 움직이면 캐럿이
   흔들려 오히려 잘못이다. 입력의 상태 응답은 focus 링이고, 그건 이미 63/63으로 갖춰져 있다. */