:root{color-scheme:dark;--bg:#0b0f0d;--panel:#151a17;--line:#2b352f;--ink:#f1f6f3;--muted:#a8b5ad;--accent:#32dc7c;--warm:#ffd281;--ph:#868686;--panel2:#171e1a;--panel-empty:#171d19;--panel-bar:#151917;--panel-mute:#1b231e;--accent-ink:#123823;--accent-quiet:#0f281a;--raise:#1b2721;--r-card:16px;--r-block:14px;--r-bar:0;--dim:rgba(0,0,0,.5)}/* 기준 = 라이브 실측(docs) */
/* 11차-58: --raise 가 목업 화면(body.mockup)에서 미정의였다 —
   정의가 dist/proto/pyeonseong-final.css:7 의 `body.proto-shell, .pyeon` 안에만 갇혀 있었다.
   var(--raise) 에 대체값이 없으면 그 선언이 통째로 무효가 되어 배경이 투명으로 떨어진다.
   실측(1036×760): 01·02·05 모두 getComputedStyle(:root)["--raise"] === "" 였다.
   쓰는 곳 22군데(host.css 11 · request.css 6 · script.css 4 · mockup.css 1)가 세 조에 걸쳐 있어
   각 파일을 고치는 대신 :root 한 줄로 살린다. 값은 프로토가 쓰던 것 그대로. */
*{box-sizing:border-box}body.mockup{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.workspace{max-width:none;margin:auto;padding:26px 30px 60px}.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.page-title small{font-size:12px;letter-spacing:.16em;color:var(--accent)}.page-title h1{font-size:30px;font-weight:750;margin:5px 0}.page-title p{color:var(--muted);margin:0}.badge{white-space:nowrap;font-size:13px;border:1px solid var(--line);border-radius:30px;padding:5px 12px;color:var(--muted)}h2{font-size:18px;font-weight:700;margin:0 0 14px}h3{font-size:16px;font-weight:700;margin:8px 0}p{margin:8px 0}.muted,.help{color:var(--muted);font-size:14px}.primary,.secondary{border-radius:8px;padding:10px 16px;border:1px solid var(--line);background:#203029;color:var(--ink);font-weight:650;line-height:1.4}/* 🔴 11차-77(2조 실측): 글자색이 토큰이 아니라 #082716 하드코딩이었다. --accent-ink 는 :root 에
   정의만 있고 공통에서 0번 쓰이고 있었다(죽은 토큰). 03(.pyeon)만 var(--accent-ink)를 써서 달랐다 —
   .pyeon 이 덮개가 아니라 「제대로 쓰는 쪽」이었다. 값의 근거는 14 §1-1 라이브 실측(#123823)이고
   #082716 은 어디서 왔는지 모르는 값이다. */
.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.primary:hover{background:#64eba1}.secondary:hover{background:#2b4034}.panel,.fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin:16px 0}
/* 11차-56 형 07-5: "오른쪽 패널은 밑으로 내려 있는 거야. 얘만 내려간 거야. 잡아라. 이거 글로벌로 똑같이."
   .panel 의 위 여백 16 을 우측 열 첫 패널이 그대로 먹고, .editor-grid{align-items:start} 라 끌어올려 주지 않았다.
   그래서 화면마다 국소로 margin-top:0 을 붙여 왔고(.rq-side · .hs-side …) 07 만 그 수리가 없어 내려가 있었다.
   실측(1036×760, 본문 첫 패널과의 차이): 01·02·05 = 0 · 07 = 16 · 06 은 3열이라 구조가 다르다.
   격자 첫 줄은 본문·우측이 같은 높이에서 시작한다 — 한 벌로 여기서 잡는다.
   🔴 본문 쪽도 같이 잡히지만 이미 0 이라 안 움직인다(위 실측). 국소 수리들은 각 조가 걷는다(24 G12). */
.editor-grid>.panel,.editor-grid>*>.panel:first-child{margin-top:0}.fold{padding:0}.fold summary{padding:15px 18px;cursor:pointer;font-size:15px;color:#cbdbd0;font-weight:650}.fold-content{padding:0 18px 20px}.notice{background:#1d3025;color:#d3e8da;border:1px solid #31513d;border-radius:10px;padding:14px 18px;font-size:14px;margin:14px 0}.notice.warning{background:#332b1d;border-color:#675337;color:#ffe1a8}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:16px 0;font-size:14px}.statusbar b{color:var(--accent)}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}/* 11차-15: .plan-cards 는 기본 규칙이 아예 없어 grid 가 아니었다(1000px 질의 안에도 칸 수만 있고 display:grid 가 없다). 그래서 06 연출 화면이 카드 1줄 1장 = 이미지 962×1710 로 늘어져 세로 12,127px 가 됐다. 열 수는 폭이 정하게 둔다 */.plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.plan-cards figure{margin:0}.plan-cards figure img{display:block;width:100%;height:auto;border-radius:8px}/* 11차-17 D2: 카드마다 채운 버튼을 두지 않고 카드 전체를 누르게 한다(24 B2) */.plan-card{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}.plan-card:hover{border-color:var(--accent)}.plan-cards figcaption{margin-top:8px;font-size:13px;color:var(--muted)}.preview-panel,.inspector,.timeline{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}@media(max-width:1000px){.workspace{padding:20px}.editor-grid,.direction-layout,.script-layout,.host-layout,.export-grid{grid-template-columns:1fr}.sticky{position:static}.inspector{max-width:none}.preview-stage{height:350px}.statusbar{flex-wrap:wrap}.page-title{align-items:flex-start}.page-title h1{font-size:26px}.playbar{flex-wrap:wrap}.plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}/* 11차-8: .project-card 규칙이 @media(max-width:600px) 안에 갇혀 있어 601px 이상에서 카드 테두리·안쪽 여백이 없고 이동 버튼이 카드 밖으로 떨어졌다. 최상위로 올린다 */.project-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;overflow:hidden}.project-card article{border:0!important;box-shadow:none!important}.project-card>.primary{margin-top:12px}.project-card .source-part img{height:140px;object-fit:cover}/* 11차-10: 아래 세 덩이(.request-layout · .home-projects · .final-placeholder)가 @media(max-width:600px) 안에 갇혀 있었다. *//* 601px 이상에서 2단 배치가 통째로 죽어 있었고, 그 안에 중첩된 @media(max-width:1000px)도 600px 이하에서만 사는 죽은 코드였다. *//* naver-main 판정으로 최상위로 올리고, 중첩됐던 1000px 질의는 원래 의도대로 최상위 1000px 질의로 옮긴다(좁은 폭 1열은 필요한 규칙이다). *//* 11차-12: 값이 270·24 여서 14 기준(우측 330 · 사이 18)과 달랐다. 지금은 쓰는 화면이 없지만 이름이 request- 라 붙이면 우측이 60px 좁아진 채 통과한다(naver-main 판정) */.request-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.request-layout .source-part{margin-bottom:20px}/* 11차-10: 실서비스 저장본 dist/before/home.html 의 "grid gap-4 sm:grid-cols-[repeat(auto-fill,minmax(420px,1fr))]" 그대로. 열 수는 폭이 정한다(24 A1) */.home-projects{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}/* 11차-36: 빈 상태 박스 — 라이브 #171d19 · 테두리 1px · r16 */.final-placeholder{height:320px;background:var(--panel-empty);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#c2d7c9;text-align:center;margin-bottom:18px}.final-placeholder small{color:var(--muted);font-size:13px;margin-top:10px}@media(max-width:1000px){.request-layout{grid-template-columns:1fr}}@media(max-width:600px){.project-card>.primary{width:100%}.workspace{padding:14px}.page-title .badge{display:none}}

.studio-brand button{background:none;color:var(--ink);border:0}.studio-brand span{font-size:12px;color:var(--muted);margin-left:7px}.journey button{flex:1;white-space:nowrap;background:none;border:0;color:var(--muted);font-size:13px;padding:12px 9px;border-bottom:2px solid transparent}.mockup[data-page^="editing"] .editor-grid{align-items:stretch}.mockup[data-page^="editing"] .inspector{overflow:auto}.mockup[data-page^="editing"] .preview-panel{display:flex;flex-direction:column}.mockup[data-page^="editing"] .preview-stage{height:auto;flex:1;min-height:0}.mockup[data-page^="editing"] .preview-stage img{height:calc(100% - 28px)}.mockup[data-page^="editing"] .timeline{margin-top:10px}.mockup[data-page^="editing"] .page-title{margin-bottom:12px}.mockup[data-page^="editing"] .page-title h1{font-size:25px}.mockup[data-page^="editing"] .page-title p{font-size:14px}@media(max-width:1000px){.mockup[data-page^="editing"] .inspector{height:auto;max-height:none}}

/* 상단바 — 원본(로고·주메뉴·테마·계정·로그아웃) 복원 */
.studio-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:-10px 0 0;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.brand-left,.brand-right{display:flex;align-items:center;gap:14px;min-width:0}
.brand-home{background:none;border:0;color:inherit;cursor:pointer;padding:0;white-space:nowrap}
.studio-brand b{color:var(--accent);font-size:19px}
.global-nav{display:flex;gap:2px}
.global-nav button{background:none;border:0;color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:7px;font-size:13px}
.global-nav button:hover{background:rgba(255,255,255,.07);color:#e7f5ec}
.theme-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.theme-toggle button{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 10px;font-size:12px}
.theme-toggle button.on{background:#183525;color:#7eecac}
.linklike{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.account{color:var(--muted);white-space:nowrap}
.account small{opacity:.65}

/* 프로젝트 이름 — 원본 방송 정보 팝업 자리. ChatGPT/Claude 처럼 상단에 둔다 */
.project-bar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 0 10px}
.project-name{background:none;border:0;color:inherit;cursor:pointer;padding:0;display:flex;align-items:baseline;gap:6px}
.project-name b{font-size:17px;font-weight:700}
.project-name span{color:var(--muted);font-size:15px}
.project-name i{color:var(--muted);font-style:normal;font-size:11px}
.project-name:hover b{color:var(--accent)}
.project-meta{color:var(--muted);font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* 제작 단계 내비 — 원본처럼 상태(확정 완료·현재 단계·예정 단계)와 잠금을 표시 */
.journey{display:flex;overflow:auto;border-bottom:1px solid var(--line);margin:0 0 18px;gap:0}
.journey button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;white-space:nowrap;
  padding:9px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer}
.journey button em{font-style:normal;font-size:13px;font-weight:600}
.journey button small{font-size:10.5px;opacity:.7;display:flex;align-items:center;gap:3px}
.journey button.done em{color:#b9d6c4}
.journey button.done small::before{content:"✓";color:var(--accent)}
.journey button.now{background:#183525;color:#7eecac;border-bottom-color:var(--accent)}
.journey button.now em{font-weight:750}
.journey button.locked{opacity:.45;cursor:not-allowed}
.journey button.locked small::before{content:"🔒"}
.journey button.viewing{box-shadow:inset 0 0 0 1px var(--line)}
.journey button:hover:not(.locked){background:rgba(255,255,255,.05)}

/* ── 06 영상 편집 — 원본 구조로 재작성 ───────────────────────── */

/* 화면 탭: 구간 검토 / 컷 작업 / 최종 영상 (원본 3탭) */
/* 내보내기는 섹션이 아니라 기능 버튼으로 자리 잡는다 (지시 5) */
.export-btn{margin-left:auto;padding:9px 16px;border:1px solid var(--line);border-radius:9px;
  background:none;color:#c7d8cc;cursor:pointer;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}
.export-btn:hover{background:rgba(255,255,255,.07);color:#e7f5ec}

/* 타임라인: 원본 트랙 구성 + 확대/축소. 폭이 시간에 비례한다 */
.mockup[data-page="editing"] .timeline{margin-top:18px;padding:16px}
.timeline header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.timeline header h2{margin:0 0 3px;font-size:16px}
.tl-tools{display:flex;gap:6px;flex-wrap:wrap}
.tl-tools button{padding:5px 11px;border:1px solid var(--line);border-radius:7px;background:none;color:var(--muted);cursor:pointer;font-size:12px}
.tl-tools button:hover{background:rgba(255,255,255,.07);color:#e7f5ec}
.tl-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 6px;font-size:12.5px;color:var(--muted)}
.tl-status b{color:#e7f5ec}
.tl-status progress{width:150px;height:6px}
.tl-scroll{overflow-x:auto;padding-bottom:6px}
.tl-inner{position:relative;min-width:100%}
.mockup[data-page="editing"] .track{margin:8px 0;gap:10px}
.mockup[data-page="editing"] .track>strong{width:54px;font-size:12px;color:var(--muted);flex:none}
.mockup[data-page="editing"] .ruler{display:flex;flex:1;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px}
.mockup[data-page="editing"] .ruler span{flex:none;border-left:1px solid var(--line);padding-left:3px}
.seg-block{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 10px;font-size:11.5px;
  background:#1b3527;border:1px solid var(--accent);border-radius:5px;color:#b9e8cb;white-space:nowrap;overflow:hidden}
.mockup[data-page="editing"] .track-area{height:28px}
.mockup[data-page="editing"] .clip-strip{gap:3px;overflow:visible}
.mockup[data-page="editing"] .clip{flex:none;min-width:22px;overflow:hidden;padding:0;position:relative}
.mockup[data-page="editing"] .clip img{width:100%;height:var(--cliph,44px);object-fit:cover;display:block}
.mockup[data-page="editing"] .clip span{position:absolute;left:0;right:0;bottom:0;font-size:10px;padding:1px 3px;
  background:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden}
.mockup[data-page="editing"] .clip.selected{outline:2px solid var(--accent);outline-offset:-2px}
.mockup[data-page="editing"] .audio-track{flex:1;height:28px}
@media(max-width:1000px){.mockup[data-page="editing"] .editor-grid{grid-template-columns:1fr}
  .subtitle-panel{max-height:340px}}

/* 좌우 패널 높이를 맞춘다 (지시 14) */
.mockup[data-page="editing"] .editor-grid{align-items:stretch}
.mockup[data-page="editing"] .subtitle-panel,
.mockup[data-page="editing"] .preview-panel{height:560px}
.mockup[data-page="editing"] .preview-panel{display:flex;flex-direction:column}
.mockup[data-page="editing"] .preview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.mockup[data-page="editing"] 
/* ── 상단 GNB 정리 (지시 1·2·3) — 원본 DOM 은 그대로 두고 배치·크기만 잡는다 ── */
/* 방송 정보 블록이 order-last + w-full 이라 한 줄 아래로 내려간다. 같은 줄로 올린다. */
.mockup[data-page="editing"] header .order-last{order:0 !important;width:auto !important;flex:0 1 auto;
  border-top:0 !important;height:auto !important;min-width:0;margin-left:.5rem}
.mockup[data-page="editing"] header{flex-wrap:nowrap !important;gap:4px;height:56px !important}
.mockup[data-page="editing"] header button,
.mockup[data-page="editing"] header a{white-space:nowrap}
.mockup[data-page="editing"] header .ml-2{margin-left:.5rem !important;gap:0 !important}
.mockup[data-page="editing"] header .ml-2 button{padding:5px 9px !important}
.mockup[data-page="editing"] header > *{height:auto !important}
/* 근본 없는 폰트 크기 정리 — 헤더는 12~13px 로 통일 */
.mockup[data-page="editing"] header,
.mockup[data-page="editing"] header *:not(.pop *){font-size:12.5px}
.mockup[data-page="editing"] header .order-last button{font-size:12.5px;max-width:320px}
.mockup[data-page="editing"] header svg{width:15px;height:15px}
.mockup[data-page="editing"] header .shrink-0.rounded-xl span:first-child{font-size:15px}

/* ── 타임라인 — 미니멀 재설계 (지시 16·17) ────────────────────────
   글자는 구간 제목만. 클립은 장면만 보여준다. 확대는 슬라이더. */
.tl{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:14px;overflow:hidden}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;border-bottom:1px solid var(--line)}
.tl-ops{display:flex;gap:6px}
.tl-ops button{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:none;
  color:var(--muted);cursor:pointer;font-size:12px;line-height:1}
.tl-ops button:hover{background:rgba(255,255,255,.07);color:#e7f5ec}
.tl-ops button[disabled]{opacity:.35;cursor:not-allowed}
.tl-zoom{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.tl-zoom input{width:132px;accent-color:var(--accent)}
.tl-scroll{overflow-x:auto;overflow-y:hidden}
.tl-body{position:relative;width:calc(100% * var(--zoom));min-width:100%;padding:0 0 10px}
.tl-ruler{position:relative;height:20px;border-bottom:1px solid var(--line);margin-left:72px}
.tl-ruler span{position:absolute;top:0;font-size:9.5px;color:var(--muted);padding-left:3px;
  border-left:1px solid var(--line);height:100%;line-height:20px;font-variant-numeric:tabular-nums}
.tl-ruler span.minor{border-left-color:rgba(255,255,255,.07)}
.tl-head{position:absolute;top:0;bottom:8px;left:0;width:1px;background:#ff6b5a;z-index:6;
  margin-left:72px;pointer-events:none}
.tl-head i{position:absolute;top:-1px;left:-4px;width:9px;height:9px;border-radius:50%;background:#ff6b5a}
.tl-row{display:flex;align-items:center;gap:0;margin-top:6px}

.tl-lane{position:relative;flex:1;height:26px;background:#0d1711;border-radius:4px}
.tl-lane-clips{height:40px}
.tl-lane-wave{height:20px}
.tl-lane>*{position:absolute;top:2px;bottom:2px;border:0;padding:0;cursor:pointer}

.tl-seg{background:#18291f;border:1px solid rgba(126,236,172,.35) !important;border-radius:4px;
  display:flex;align-items:center;overflow:hidden}
.tl-seg span{font-size:10.5px;color:#a9d8bd;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-seg[aria-pressed="true"]{border-color:var(--accent) !important}
.tl-banner{background:#3a2c14;border:1px solid #c9922f !important;border-radius:4px}
.tl-dircut{background:#1d2740;border:1px solid #5b7cc4 !important;border-radius:4px}
.tl-grip{position:absolute;top:0;bottom:0;width:6px;background:#c9922f;opacity:.9;cursor:ew-resize}
.tl-grip-l{left:0;border-radius:4px 0 0 4px}.tl-grip-r{right:0;border-radius:0 4px 4px 0}
.tl-clip{border-radius:3px;overflow:hidden;background:#0a1410;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.09)}
.tl-clip img{width:100%;height:100%;object-fit:cover;display:block}
.tl-clip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);z-index:3}
.tl-lane-wave span{background:repeating-linear-gradient(90deg,rgba(126,236,172,.55) 0 1px,transparent 1px 3px);
  border-radius:2px;pointer-events:none}

/* 헤더 버튼 높이를 한 줄로 통일 (지시 2·3) */
.mockup[data-page="editing"] header button:not(.pop button){height:32px !important;min-height:0 !important;
  padding-top:0 !important;padding-bottom:0 !important;line-height:1.2}
.mockup[data-page="editing"] header .order-last button{height:32px !important}

/* ══ 06 영상 편집 ══════════════════════════════════════════════
   타이포: 최소 12 · 메타 12 · 본문/버튼 13 · 제목 15 · 화면 제목 20 (지시 3) */
.mockup[data-page="editing"]{--fs-min:12px;--fs-meta:12.5px;--fs-base:13px;--fs-panel:15px}
.ico{width:16px;height:16px;flex:none}
.ico-sm{width:13px;height:13px}

/* ── 타이틀 줄 (지시 14·15) ── */
.mockup[data-page="editing"] .page-title{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:14px 0 14px}
.mockup[data-page="editing"] .page-title h1{font-size:20px;font-weight:700;margin:0}
.title-sub{margin:4px 0 0;font-size:var(--fs-meta);color:var(--muted)}
/* 11차-52(32 §2-1): 제목 줄 오른쪽 = [프로젝트명(잘림)] [주 행동]. 주 행동이 제일 오른쪽이다.
   좁은 폭에서 긴 프로젝트명이 버튼을 밀어내면 안 된다 — 줄어드는 건 프로젝트명 쪽이다.
   형이 06에서 「버튼 글자가 삐져나간다」를 이미 지적하셨다. 1036 에서 재야 걸린다. */
/* 🔴 11차-72(2조 실측): flex:1 1 auto + text-align:right 라 **박스가 남은 폭을 다 먹고**
   글자만 오른쪽 끝으로 갔다 — 05 는 h1 끝에서 575px, 06 은 306px 떨어져 「센터 정렬」로 보였다.
   02·07 은 각자 .hs-proj · .fn-proj 로 0 1 auto 를 덮어 멀쩡했다(그래서 grep 으로는 안 보였다).
   text-align:right 는 그대로 둔다 — 박스가 글자만큼이면 그게 뜻을 갖는다. */
.title-proj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--muted);text-align:right}
.page-title .title-l{flex:1 1 auto;min-width:0}
.page-title .rq-head-r>button,.page-title .sc-head-r>button,.page-title .fn-head-r>button{flex:none}
.export-wrap{position:relative}
.export-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:10px;
  border:1px solid rgba(126,236,172,.35);background:#183525;color:#7eecac;cursor:pointer;
  font-size:var(--fs-base);font-weight:650}
.export-btn:hover{background:#1d4430}

/* ── 3열: 목록 · 미리보기 · 속성 (지시 18) ── */
.mockup[data-page="editing"] .editor-grid{display:grid;
  grid-template-columns:minmax(210px,300px) minmax(280px,1fr) minmax(230px,290px);
  gap:12px;align-items:stretch;margin:0 0 12px}
.col-list,.col-preview,.col-props{height:580px;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}

/* 좌: 목록 */
.list-tabs{display:flex;gap:18px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
.list-tabs button{padding:0 0 9px;border:0;border-bottom:2px solid transparent;background:none;
  color:var(--muted);cursor:pointer;font-size:var(--fs-base);font-weight:600}
.list-tabs button.active{color:#7eecac;border-bottom-color:var(--accent)}
.list-search{padding:10px 14px 8px}
.list-search input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta)}
.list-body{flex:1;min-height:0;overflow:auto;padding:0 8px 10px}
.seg-head{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;margin:0;padding:7px 8px;
  background:#101c15;border-bottom:1px solid var(--line);font-size:var(--fs-min);font-weight:700;color:#a9d8bd;
  white-space:nowrap;overflow:hidden}
.seg-head b{overflow:hidden;text-overflow:ellipsis;min-width:0}
.seg-head small{flex:none;margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--fs-min)}
.row{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;align-items:start;width:100%;text-align:left;
  padding:8px;border:1px solid transparent;border-radius:8px;background:none;color:inherit;cursor:pointer}
.row:hover{background:rgba(255,255,255,.05)}
.row.selected{background:#152a1e;border-color:var(--accent)}
.row-time{font-size:var(--fs-min);color:var(--accent);font-variant-numeric:tabular-nums;padding-top:2px}
.row-text{font-size:var(--fs-base);line-height:1.5}
.row-text i{color:var(--muted);font-style:normal}
.row-clip{grid-template-columns:44px 62px 1fr auto;align-items:center}
.row-clip img,.row-swatch{width:62px;height:36px;border-radius:5px;display:block;object-fit:cover}
.row-swatch.tag-banner-bg{background:linear-gradient(135deg,#c9922f,#8a6318)}
.row-body b{display:block;font-size:var(--fs-base);font-weight:600}
.row-body small{display:block;font-size:var(--fs-min);color:var(--muted);margin-top:2px}
.row-tag{font-size:var(--fs-min);padding:2px 7px;border-radius:999px;white-space:nowrap}
.tag-video,.tag-lip{background:rgba(126,236,172,.14);color:#8fe0b3}
.tag-dir{background:rgba(91,124,196,.2);color:#9db4e6}
.tag-banner{background:rgba(201,146,47,.18);color:#e0b563}

/* 가운데: 미리보기 (탭 없음 — 선택이 곧 미리보기, 지시 19) */
.col-preview .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#08100c;margin:14px;border-radius:10px;padding:10px}
.col-preview .stage img{max-height:100%;max-width:100%;object-fit:contain;border-radius:6px}
.vbar{display:flex;align-items:center;gap:12px;padding:0 14px 14px}
.vbtns{display:flex;gap:6px;align-items:center}
.vbtn{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:none;color:#c7d8cc;cursor:pointer}
.vbtn:hover{background:rgba(255,255,255,.08);color:#e7f5ec}
.vbtn-main{width:34px;height:34px;background:#183525;border-color:rgba(126,236,172,.4);color:#7eecac}
.vtime{font-size:var(--fs-min);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vtime b{color:#e7f5ec}.vtime i{margin:0 4px;font-style:normal;opacity:.5}
#v-scrub{flex:1;min-width:60px;accent-color:var(--accent)}

/* 우: 속성 패널 — 선택한 것의 속성만 (지시 13·18) */
.col-props{padding:0}
.props-top{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.props-kind{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-min);padding:3px 9px;
  border-radius:999px;background:rgba(126,236,172,.14);color:#8fe0b3;margin-bottom:8px}
.props-kind.banner{background:rgba(201,146,47,.18);color:#e0b563}
.props-kind.seg{background:rgba(255,255,255,.08);color:#c7d8cc}
.props-top h2{margin:0;font-size:var(--fs-panel);font-weight:700}
.props-top p{margin:5px 0 0;font-size:var(--fs-min);color:var(--muted)}
.props-body{flex:1;min-height:0;overflow:auto;padding:12px 14px}
.props-tabs{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.props-tabs button{flex:none;white-space:nowrap;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
  background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-min)}
.props-tabs button.on{background:#183525;border-color:var(--accent);color:#7eecac}
.props-body label{display:block;font-size:var(--fs-min);color:#c7d8cc;margin:0 0 10px}
.props-body input[type=text],.props-body input[type=number]{width:100%;margin-top:5px;padding:7px 9px;
  border:1px solid var(--line);border-radius:7px;background:#0d1711;color:inherit;font-size:var(--fs-base)}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.props-foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.props-foot button{flex:1;min-width:84px;padding:9px 10px;border-radius:8px;border:1px solid var(--line);
  background:none;color:#d6e6db;cursor:pointer;font-size:var(--fs-base)}
.props-foot button.main{background:#2f8f5b;border-color:#3fbd79;color:#fff;font-weight:600}
.props-foot button:hover{filter:brightness(1.12)}
.props-empty{padding:20px 16px;font-size:var(--fs-meta);color:var(--muted);line-height:1.6}

/* ── 타임라인 ── */
.tl{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;
  border-bottom:1px solid var(--line)}
.tl-left,.tl-right{display:flex;align-items:center;gap:9px;flex:none;position:relative}
.tlb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);
  border-radius:8px;background:none;color:#c7d8cc;cursor:pointer;font-size:var(--fs-meta);white-space:nowrap}
.tlb:hover:not([disabled]){background:rgba(255,255,255,.08);color:#e7f5ec}
.tlb[disabled]{opacity:.3;cursor:not-allowed}
.tlb.ico-only{width:30px;padding:0;justify-content:center}
.tlb-play{width:32px;padding:0;justify-content:center;background:#183525;border-color:rgba(126,236,172,.4);color:#7eecac}
.tl-clock{font-size:var(--fs-min);color:var(--muted);font-variant-numeric:tabular-nums}
.tl-clock b{color:#e7f5ec}.tl-clock i{margin:0 4px;font-style:normal;opacity:.5}
.tl-div{width:1px;height:18px;background:var(--line)}
.tl-ops{display:flex;gap:5px;flex:none}
.tl-zoom{display:flex;align-items:center;gap:8px;color:var(--muted)}
.tl-zoom input{width:120px;accent-color:var(--accent)}
.tl-scroll{overflow-x:auto;overflow-y:hidden}
.tl-body{position:relative;width:calc(100% * var(--zoom));min-width:100%;padding:0 0 12px}
.tl-ruler{position:relative;height:22px;border-bottom:1px solid var(--line);margin-left:72px}
.tl-ruler span{position:absolute;top:0;font-size:var(--fs-min);color:var(--muted);padding-left:4px;
  border-left:1px solid var(--line);height:100%;line-height:22px;font-variant-numeric:tabular-nums}
.tl-head{position:absolute;top:0;bottom:10px;left:0;width:1px;background:#ff6b5a;z-index:8;margin-left:72px;pointer-events:none}
.tl-head i{position:absolute;top:-1px;left:-4px;width:9px;height:9px;border-radius:50%;background:#ff6b5a}
.tl-row{display:flex;align-items:center;margin-top:7px}

.tl-lane{position:relative;flex:1;height:30px;background:#0d1711;border-radius:5px}
.tl-lane-dir{height:38px}
.tl-lane-clips{height:54px}
.tl-lane-wave{height:28px;background:#0a1410}
.tl-lane>*{position:absolute;top:2px;bottom:2px;border:0;padding:0;cursor:pointer}
.tl-seg{background:#18291f;box-shadow:inset 0 0 0 1px rgba(126,236,172,.3);border-radius:5px;
  display:flex;align-items:center;overflow:hidden}
.tl-seg span{font-size:var(--fs-min);color:#a9d8bd;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
/* 클립: 썸네일을 반복해 채운다 — 한 장을 늘리지 않는다 (지시 13) */
.tl-clip,.tl-dircut{border-radius:4px;overflow:hidden;background-repeat:repeat-x;background-position:left center;
  background-size:auto 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.tl-dircut{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(91,124,196,.75)}
.tl-clip[aria-pressed="true"],.tl-dircut[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);z-index:4}
.tl-banner{background:linear-gradient(135deg,#3a2c14,#241a0c);box-shadow:0 0 0 1px #c9922f;border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.tl-banner span{font-size:var(--fs-min);color:#e0b563;white-space:nowrap;overflow:hidden;padding:0 8px}
.tl-banner[aria-pressed="true"]{box-shadow:0 0 0 2px #f0c163}
.tl-grip{position:absolute;top:0;bottom:0;width:5px;background:#c9922f;cursor:ew-resize}
.tl-grip-l{left:0}.tl-grip-r{right:0}
.tl-lane-wave .wave{position:absolute;inset:2px 0;background-repeat:repeat-x;background-size:auto 100%;
  background-position:left center;pointer-events:none}
/* 3열은 최대한 버틴다. 정말 좁아질 때만 속성 패널이 아래로 내려간다. */
@media(max-width:820px){.mockup[data-page="editing"] .editor-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .col-props{grid-column:1 / -1;height:auto;max-height:320px}}
@media(max-width:620px){.mockup[data-page="editing"] .editor-grid{grid-template-columns:1fr}
  .col-list{height:320px}}

.props-note{margin:0 0 10px;font-size:var(--fs-min);color:var(--muted);line-height:1.6}
.props-note b{color:#d6e6db}
.kinds{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.kind{padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:none;color:var(--muted);
  cursor:pointer;font-size:var(--fs-min)}
.kind.on{background:#183525;border-color:var(--accent);color:#7eecac}
.props-body textarea{width:100%;margin-top:5px;padding:8px 9px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta);line-height:1.6;resize:vertical;font-family:inherit}
.cnt{display:block;text-align:right;color:var(--muted);font-size:var(--fs-min);margin-top:4px}
.script{margin:0 0 10px;padding:10px 12px;border-left:2px solid var(--accent);background:#0d1711;
  border-radius:0 7px 7px 0;font-size:var(--fs-base);line-height:1.6}

/* 후보(영상 이력·이미지)는 장면이 보여야 고를 수 있다 — 썸네일을 키운다 (지시 4) */
.cands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cand{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:#0a1410;cursor:pointer}
.cand img{width:100%;aspect-ratio:9/16;max-height:150px;object-fit:cover;display:block}
.cand.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cand-tag{position:absolute;left:5px;bottom:5px;padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.66);color:#d6e6db;font-size:var(--fs-min)}
.cand-tag.new{background:#2f8f5b;color:#fff}
.cand-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:9/16;max-height:150px;border-style:dashed;color:var(--muted)}
.cand-add .plus{font-size:19px;line-height:1}
.cand-add small{font-size:var(--fs-min)}
.cand-add:hover{border-color:var(--accent);color:#7eecac}
/* 모듈 이름 바꾸기 (지시 2) */
.name-edit{display:flex;gap:8px;align-items:center}
.name-edit input{flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-base)}

.props-kind.dir{background:rgba(91,124,196,.2);color:#9db4e6}
.props-actions2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.props-actions2 button{padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:none;
  color:#c7d8cc;cursor:pointer;font-size:var(--fs-min)}
.props-actions2 button:hover{background:rgba(255,255,255,.07)}
.props-body label .cands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}

/* ── 속성 패널: 라벨 + 값 + 행동. 설명문을 쓰지 않는다 ── */
.prow{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.prow:last-child{border-bottom:0}
.prow-col{grid-template-columns:1fr;align-items:stretch}
.plabel{font-size:var(--fs-min);color:var(--muted);display:flex;align-items:center;gap:5px}
.pval{font-size:var(--fs-base);display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.pval .src{color:var(--muted);font-size:var(--fs-min);margin-left:4px}
.pthumb{width:38px;height:22px;object-fit:cover;border-radius:4px;flex:none}
.ph-empty{display:inline-block;background:#12201a;border:1px dashed var(--line)}
.pbtn{flex:none;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:none;
  color:#c7d8cc;cursor:pointer;font-size:var(--fs-min);white-space:nowrap}
.pbtn:hover{background:rgba(255,255,255,.08)}
.pbtns{display:flex;gap:6px;margin-top:7px}
.psep{margin:14px 0 4px;font-size:var(--fs-min);color:var(--muted);
  border-top:1px solid var(--line);padding-top:12px}
.prow input[type=text]{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-base)}
.prow .num{width:52px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta);text-align:center}
.prow textarea{width:100%;margin-top:6px;padding:8px 9px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta);line-height:1.6;resize:vertical;font-family:inherit}
.plabel .dot{width:6px;height:6px;border-radius:50%;background:#e0b563;display:inline-block}
.props-kind .lock{margin-left:5px;font-size:10px;font-style:normal}
/* 잠긴 레이어 — 손댈 수 없음을 트랙에서 바로 보인다 */

.tl-row.locked .tl-lane{opacity:.92}
.pval small{color:var(--muted);font-size:var(--fs-min)}
.pval{white-space:nowrap}

/* ── 장면 다시 만들기 모달 (05 연출 Inspector 와 같은 공정) ── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.66);padding:24px}
/* 🔴 11차-68 걸리기 전에 막는다 — 지금 새는 곳 0건이다(2조·1조 전 화면 실측).
   병: author 의 display:* 가 [hidden] 의 display:none 을 이긴다. 닫힌 판이 화면을 덮어
       버튼이 하나도 안 눌린다. 눈에도 콘솔에도 안 보이고 grep 으로도 안 잡힌다.
   실제로 당한 자리: dist/proto/lab.html 의 .zoom{position:fixed;inset:0;display:grid}
       — 확대창이 닫힌 채로 화면 전체를 덮어 참조·생성·삭제가 전부 먹지 않았다(11차-64).
   왜 lab 만 걸렸나: dist/pages/* 는 공통 번들 assets/*.css 에 같은 한 줄이 있어 면역이었고
       dist/proto/ 는 그 번들을 안 읽는다. 이 파일을 읽는 02·03·05·06·07 에 같은 면역을 준다. */
[hidden]{display:none!important}
.modal[hidden]{display:none}
.modal-card{width:min(980px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:#0f1a13;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:baseline;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:var(--fs-panel)}
.modal-head span{font-size:var(--fs-min);color:var(--muted)}
.modal-x{margin-left:auto;width:28px;height:28px;border:1px solid var(--line);border-radius:7px;
  background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-meta)}
.modal-body{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:270px 1fr;gap:20px;padding:18px}
.rm-sec{display:flex;align-items:center;gap:10px;margin:16px 0 8px;font-size:var(--fs-min);
  color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.rm-left .rm-sec:first-of-type,.rm-right .rm-sec:first-child{margin-top:0;border-top:0;padding-top:0}
.rm-sec .pbtn{margin-left:auto}
.rm-now{background:#08100c;border-radius:10px;padding:8px}
.rm-now img{width:100%;aspect-ratio:9/16;max-height:270px;object-fit:contain;display:block;border-radius:6px}
.rm-refs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ref{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0a1410;cursor:pointer}
.ref img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ref.on{border-color:var(--accent)}
.ref-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  aspect-ratio:1;border-style:dashed;color:var(--muted)}
.ref-add span{font-size:17px;line-height:1}
.ref-add small{font-size:10px}
.rm-fields{display:flex;flex-direction:column;gap:8px}
.rmf{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:start}
.rmf label{font-size:var(--fs-min);color:var(--muted);padding-top:8px}
.rmf textarea{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta);line-height:1.55;resize:vertical;font-family:inherit}
.rmf.changed textarea{border-color:#c9922f}
.rm-ask{display:flex;gap:8px;margin-top:12px}
.rm-ask input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:#0d1711;color:inherit;font-size:var(--fs-meta)}
.rm-cands{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rm-cands .cand img{max-height:130px}
.modal-foot{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.modal-foot .grow{flex:1}
.modal-foot button{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:none;
  color:#d6e6db;cursor:pointer;font-size:var(--fs-base)}
.modal-foot button.main{background:#2f8f5b;border-color:#3fbd79;color:#fff;font-weight:600}
.modal-foot button:hover{filter:brightness(1.12)}
/* 호스트 샷 고르기 — 패널 안에서 편다 */
.shotpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.shotpick button{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#0a1410;cursor:pointer;position:relative}
.shotpick b{position:absolute;left:0;right:0;bottom:0;font-size:10px;padding:2px;
  background:rgba(0,0,0,.6);color:#d6e6db;font-weight:500}
.shotpick button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* 🔴 11차-89 형 06 — 호스트 샷 카드를 **9:16** 으로. 실측(고치기 전 1440): 카드 안쪽 180×240 = 3:4 였는데
   생산 계약은 1008×1792 = 9:16 이다. 3:4 칸에 9:16 그림을 넣으면 찌그러지거나 잘려서
   **실제로 나올 그림과 다른 꼴**을 보여 주게 된다 — 「예시가 거짓말한다」의 한 판이다.
   높이 240 은 두고 폭만 135 로 좁힌다(다섯 × 135 = 675 < 모달 978 이라 자리는 그대로다). */
.mockup[data-page="editing"] .shotpick{grid-template-columns:repeat(5,minmax(0,135px));justify-content:center}
/* 🔴 샷 이름을 그림 **아래**로 내린다 — 캡처로 잡았다. 앞 규칙이 `position:absolute;bottom:0` 이고
   뒤 규칙이 덮개를 `rgba(0,0,0,.6)` → `.35` 로 낮춰서, 밝은 그림(「전신」) 위에서는 글자가 거의 안 읽혔다.
   덮개를 다시 진하게 하는 대신 **그림을 안 가리게** 내린다 — 이름은 그림의 일부가 아니다. */
.mockup[data-page="editing"] .shotpick img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.mockup[data-page="editing"] .shotpick b{position:static;background:none;color:var(--ink);
  padding:5px 2px;font-size:var(--fs-min);text-align:center}

@media(max-width:760px){.modal-body{grid-template-columns:1fr}}

/* 연출 컷이 있는 구간은 립싱크가 대체된다 (05 Inspector: "Visual 은 이 구간의 Lipsync 화면을 대체합니다") */
.tl-clip[data-replaced]{background-image:none !important;background:repeating-linear-gradient(135deg,
  #12201a 0 6px,#0d1711 6px 12px);box-shadow:inset 0 0 0 1px rgba(91,124,196,.45)}
.tl-clip[data-replaced]::after{content:"연출로 대체";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:9px;color:#9db4e6;white-space:nowrap;overflow:hidden}

/* 트랙 거터 — 이름과 잠금을 왼쪽에 모으고 트랙 높이를 통일한다 */
/* 11차-37: 트랙 이름 칸도 같은 변수를 본다 */
.tl-gutter{width:var(--tl-head,150px);flex:none;display:flex;align-items:center;gap:6px;padding-left:12px} /* 10차-13: 트랙 이름이 잘려 넓혔다 */
.tl-gutter span{flex:1;font-size:var(--fs-min);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 11차-37 형 1·2번: 헤더 열 폭을 변수 하나로 묶는다 — 눈금·재생 헤드·트랙 이름·범위 막대가 같은 x 에 선다 */
/* 형 06-1: "지금 너무 넓으니까 좀 좁혀" — 150 → 88.
   실측(1280, 2026-09-19): 트랙 이름 최대폭 44.5px(혜택 카드) + 좌우 여백 24 = 68.5,
   「보이는 범위」 54.9px + 왼 여백 12 = 66.9. 88 이면 글꼴이 20% 넓어져도 안 잘린다.
   🔴 88 을 자에 다시 적지 않는다 — editing.js 가 `scrollWidth > clientWidth` 로 잘림만 본다. */
.mockup[data-page="editing"]{--tl-head:88px}
/* 형 06-1: 눈금 줄에 진짜 왼쪽 칸이 생겼다 — margin 으로 비우던 것을 칸이 대신한다.
   margin 이면 가로로 밀 때 눈금이 트랙 이름 칸 자리로 흘러들어 가 가릴 것이 없었다. */
.tl-rulerrow{display:flex;align-items:stretch}
.tl-ruler{margin-left:0;flex:1;min-width:0}
.tl-gutter-blank{border-bottom:1px solid var(--line)}
/* 11차-37: 재생 헤드는 JS 가 left 로 자리를 잡는다 — margin 까지 주면 헤더 열만큼 두 번 밀린다 */
.tl-head{margin-left:0}
/* 🔴 11차-81 — 캡처가 잡은 것. 자는 「닿는다」로 초록이었는데 **화면을 열면 아무것도 안 보였다.**
   자는 제 손으로 `scrollTop` 을 옮겨 놓고 「보인다」고 했다. 사람은 굴리기 전엔 못 본다 —
   그리고 맥 스크롤바는 굴리기 전엔 안 뜬다(형이 이미 한 번 지적하신 그것: `.props-body` 바로 위 주석).
   → 굴려서 닿게 하지 말고 **처음부터 들어가게** 한다. 그림이 남는 높이만큼 줄어들면 된다.
   🔴 원래 있던 `.cand img{max-height:min(150px,100%)}` 가 아무것도 안 줄인 이유:
      그 `100%` 는 `.res` 가 아니라 **높이가 auto 인 카드**에 걸려서 `none` 으로 죽는다.
      그래서 `.res` → `.cands` → `.cand` 를 세로 flex 로 이어 준다(높이가 확정되는 사슬을 만든다). */
.mockup[data-page="editing"] .col-props>.res{display:flex;flex-direction:column}
.mockup[data-page="editing"] .col-props>.res .cands{flex:1 1 auto;min-height:0;align-content:stretch}
.mockup[data-page="editing"] .col-props .cand[data-tag]{display:flex;flex-direction:column;min-height:0}
/* 🔴 그림에 바닥(min-height)을 주지 않는다 — 한 번 줬다가 캡처로 걸렸다.
   바닥을 주면 그림+버튼이 카드보다 커지는데 `.cand{overflow:hidden}` 이라 **버튼이 통째로 잘렸다.**
   그때 자는 초록이었다: 「보이나」를 `.res` 안에 있나로 쟀는데 **잘라 내는 상자는 `.res` 가 아니라 카드**였다.
   (오늘 두 번째 같은 병 — 「칸」이 아니라 「글자」를 재라던 그 자리다. 이번엔 「바깥 상자」가 아니라 「잘라 내는 상자」.)
   실측: 1440·1280 은 93px, 1036 은 52px. 🟡 1036 썸네일이 작은 것은 아는 값이다 —
   우측 패널 높이 예산 문제라 여기서 혼자 못 정한다(plan-2 에 올렸다). */
/* 🔴 11차-100 형 ① "썸네일은 동일한 크기여야 되는데 … 크기가 다르면 안 돼"
   실측(2026-09-19): 「지금 쓰는 것」 124×178 · 「1차」 124×151 — **[이 자리에 쓰기] 버튼이 있는 카드만
   그만큼 그림이 줄고 있었다.** 카드가 셋이 되면 전부 124×72 로 또 줄었다(남는 높이를 나눠 갖는 탓).
   → 그림을 **남는 공간이 아니라 비(9:16)로** 잡는다. 버튼 유무·카드 수와 무관하게 같아진다.
   그러면 카드가 컨테이너보다 길어질 수 있으므로 목록이 굴러가게 한다(아래 `.cands`). */
.mockup[data-page="editing"] .col-props .cand[data-tag] img{flex:1 1 auto;min-height:0;height:auto;
  max-height:none;aspect-ratio:auto}
/* 🔴 11차-100 형 ① "썸네일은 동일한 크기여야 되는데 … 크기가 다르면 안 돼"
   실측(2026-09-19): 「지금 쓰는 것」 124×178 · 「1차」 124×151 — **[이 자리에 쓰기] 버튼이 있는 카드만**
   그만큼 그림이 줄고 있었다. 그림을 비로 못 박아 봤더니 이번엔 카드가 `.res` 를 넘쳐 버튼이 잘렸다
   (`.res` 는 창 높이에 따라 96~223px 로 변한다 — 어떤 고정값도 어딘가에서 깨진다).
   → **그림은 그대로 남는 공간을 먹게 두고, 「지금 쓰는 것」에 버튼과 같은 크기의 빈 자리를 준다.**
     그러면 어느 창에서든 두 카드의 그림 높이가 저절로 같아진다. */
.mockup[data-page="editing"] .col-props .cand.on[data-tag]::after{content:"\00a0";display:block;flex:none;
  padding:6px 4px;border-top:1px solid transparent;font-size:var(--fs-min);line-height:1.2}
.mockup[data-page="editing"] .col-props .cand-use{flex:none}
/* 🔴 꼬리표를 위로 올린다 — 캡처로 잡았다. `.cand-tag` 는 `position:absolute;bottom:5px` 이라
   버튼 띠 **위에 겹쳐** 「1차 자리에 쓰기」로 읽혔다(형 여덟 패턴 「잘려서 뜻을 잃음」).
   자는 「둘 다 보인다」로 초록이었다 — 겹침은 「보이나」가 아니라 「서로 안 닿나」라 따로 잰다. */
.mockup[data-page="editing"] .col-props .cand[data-tag] .cand-tag{top:5px;bottom:auto}
/* 형 06-4: 생성 이력 후보를 눌러서 이 자리에 쓴다(끌기가 아니라).
   🔴 `[data-page="editing"]` 안으로만 건다 — `.cand` 자체는 01 요청서·다시 만들기 모달도 쓰는
      공통 클래스(1조 소유)라 건드리지 않는다. 새 이름 `.cand-use` 도 여기 안에서만 그린다.
   🔴 숨겼다가 hover 로 꺼내지 않는다 — 「쓰임 모를 버튼」은 형 지적 여덟 패턴 중 하나다(24). */
.mockup[data-page="editing"] .col-props .cand[data-tag]{cursor:default}
.mockup[data-page="editing"] .cand-use{display:block;width:100%;padding:6px 4px;border:0;border-top:1px solid var(--line);
  background:var(--panel2);color:var(--muted);font-size:var(--fs-min);line-height:1.2;cursor:pointer;
  white-space:normal;word-break:keep-all}
.mockup[data-page="editing"] .cand-use:hover,.mockup[data-page="editing"] .cand-use:focus-visible{color:var(--ink);background:#1d2b23}
/* 🔴 11차-97 형 06: `[같은 조건으로]`·`[바꿔서 다시 만들기]` 팝오버가 잘려 보였다.
   실측(1440): 팝오버 왼쪽 1083 인데 `.col-props` 왼쪽이 1130 — **왼쪽으로 47px 삐져나와**
   `.col-props{overflow:hidden}` 에 잘린다. 1036 에서는 패널이 더 넓어 안 잘렸다(그래서 여태 안 보였다).
   🔴 「바깥 상자」가 아니라 **실제로 자르는 상자**를 찾아 잰 것이다(오늘 배운 방식).
   → 패널 밖으로 안 나가게 **왼쪽 기준**으로 붙인다. `overflow` 를 푸는 쪽은 안 고른다 —
      그러면 다른 것이 같이 새어 나온다. */
.mockup[data-page="editing"] .split-menu{left:0;right:auto}
.mockup[data-page="editing"] .tl-lane{height:34px}
.mockup[data-page="editing"] .tl-lane-dir{height:44px}
.mockup[data-page="editing"] .tl-lane-clips{height:44px}
.mockup[data-page="editing"] .tl-lane-wave{height:34px}

/* 패널: 결과가 맨 위 · 나머지는 한 줄씩 */
.res{padding:12px 14px;border-bottom:1px solid var(--line)}
.res-h{font-size:var(--fs-min);color:var(--muted);margin-bottom:8px}
.card-prev{aspect-ratio:9/16;max-height:150px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3a2c14,#241a0c);border:1px solid #c9922f;border-radius:9px}
.card-prev span{font-size:var(--fs-base);color:#e0b563;font-weight:600}
.ptag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-min);padding:3px 9px;
  border-radius:999px;background:rgba(126,236,172,.14);color:#8fe0b3;margin-bottom:10px}
.ptag.dir{background:rgba(91,124,196,.2);color:#9db4e6}
.ptag.banner{background:rgba(201,146,47,.18);color:#e0b563}
.ptag.seg{background:rgba(255,255,255,.08);color:#c7d8cc}
.ptag .lock{font-size:9px;font-style:normal}
.rmf-ro{padding:7px 9px;border:1px solid transparent;border-radius:7px;background:rgba(255,255,255,.04);
  font-size:var(--fs-meta);color:var(--muted);line-height:1.55}
/* 립싱크는 참조를 못 바꾼다 */
#rm-refs[data-mode="cut"] .ref-add{display:none}
.seg-edit{position:absolute;inset:2px 4px;border:1px solid var(--accent);border-radius:4px;background:#0d1711;color:inherit;font-size:var(--fs-min);padding:0 6px;z-index:5}

/* 트랙 컨트롤 — 이모지 대신 선 아이콘. 잠금과 숨김을 따로 둔다 */
.tl-ctl{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:4px;background:none;color:var(--muted);cursor:pointer;opacity:.35}
.tl-ctl svg{width:13px;height:13px}
.tl-ctl:hover{opacity:.9;background:rgba(255,255,255,.08)}
.tl-ctl.on{opacity:1;color:#e0b563}
.tl-row.hidden .tl-lane{opacity:.25}
.tl-row.hidden .tl-ctl[data-ctl="hide"]{opacity:1;color:#e0b563}
/* 패널 머리 — 무엇을 잡았는지가 맨 위 */
.props-head{display:flex;align-items:center;gap:7px;padding:12px 14px 0}
.props-head .lock{font-size:var(--fs-min);font-style:normal;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.card-prev{flex-direction:column;gap:4px}
.card-prev b{font-size:var(--fs-min);color:#e0b563;opacity:.8;font-weight:500}
/* 모달 — 만들기 → 결과 */
.modal-body{display:block;padding:0}
.rm-m{padding:16px 18px;border-bottom:1px solid var(--line)}
.rm-m:last-child{border-bottom:0}
.rm-mh{font-size:var(--fs-min);color:var(--muted);margin-bottom:9px}
.rm-start{display:flex;align-items:center;gap:12px}
.rm-start img,.rm-start .pthumb{width:72px;height:128px;object-fit:cover;border-radius:7px;flex:none}
.rm-start-a{display:flex;gap:7px}
.rm-m textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;
  background:#0d1711;color:inherit;font-size:var(--fs-base);line-height:1.6;resize:vertical;font-family:inherit}
.rmf2{display:block;font-size:var(--fs-min);color:var(--muted);margin-bottom:9px}
.rmf2 input{width:100%;margin-top:5px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  background:#0d1711;color:inherit;font-size:var(--fs-base)}
.rm-made img{width:100%;max-width:210px;aspect-ratio:9/16;object-fit:cover;border-radius:9px;
  border:2px solid var(--accent);display:block}
.rm-res{background:rgba(126,236,172,.05)}

/* 샷마다 보이는 범위가 다르다 — 같은 소재를 프레이밍만 달리해 보여준다 */
.shot-img{display:block;width:100%;aspect-ratio:3/4;background-repeat:no-repeat;border-radius:7px 7px 0 0}
.shotpick button{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#0a1410;cursor:pointer}
.shotpick b{display:block;font-size:var(--fs-min);padding:5px 2px;color:#c7d8cc;font-weight:500;
  background:rgba(0,0,0,.35)}
.shotpick button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* 패널 머리 정렬 */
.props-head{display:flex;align-items:center;gap:7px;padding:14px 14px 0;min-height:0}
/* 만드는 중 */
.cand.busy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:9/16;max-height:150px;border:1px dashed var(--line);border-radius:9px;color:var(--muted)}
.cand.busy small{font-size:var(--fs-min)}
/* 🔴 11차-89 형 06: 「만드는 중」 카드가 **제 공정**을 말한다(연출·쇼호스트·혜택 카드가 다 다르다).
   남은 시간·비용은 안 쓴다 — 모른다. 공정 이름만(추정값을 확정값처럼 쓰지 않는다). */
/* 🔴 11차-92 — 「만드는 중」 카드가 **제 칸보다 커서 다음 줄 카드가 그 아래를 덮었다.**
   「N초째」가 DOM 에도 있고 제자리에도 있는데 **화면에서는 가려져 안 보였다**(캡처로 잡았다).
   🔴 자가 「보이나」를 「잘라 내는 상자 안에 있나」로만 재서 **「남이 덮고 있나」를 못 봤다** —
      오늘 꼬리표/버튼 겹침과 같은 병이다. 겹침은 따로 잰다.
   🔴 처음엔 `aspect-ratio:9/16` 을 줬다가 **더 나빠졌다** — 실측: 행은 80px 인데 카드가 150px 이 되어
      70px 을 넘겨 덮었다. 다른 카드는 그림이 `flex:1 1 auto;min-height:0` 이라 행에 맞춰 줄어든다.
      → 비를 주지 말고 **행 높이에 맞춰 줄어들게** 둔다. 그리고 「만드는 중」 글자 줄을 뺐다 —
        스피너가 이미 그 말을 하고, 남는 줄이 「그림 만드는 중 · 8초째」라 더 많은 것을 말한다(규칙 4). */
/* 🔴 바탕 규칙(`.cand.busy`)이 `aspect-ratio:9/16 · max-height:150px` 를 갖고 있어 150px 이 됐다 —
   그게 행 높이(80px)를 70px 넘겨 다음 줄을 덮었다. 여기서 둘 다 푼다(바탕은 1조 자리라 안 건드린다). */
/* 🔴 만드는 중·실패도 **같은 목록 안**이라 형 ① 이 걸린다 — 그림 자리와 같은 크기로 둔다.
   ⚠️ 옛날에 `aspect-ratio:auto` 로 풀어 둔 적이 있는데(안의 글이 잘려서), 이번엔 비를 주고
      **안의 글이 잘리나를 자로 같이 잰다**(아래 modal/editing 자).*/
/* 만드는 중·실패도 같은 목록 안이라 형 ① 이 걸린다 — 행 높이에 맞춰 늘어나게 둔다(숫자를 안 박는다) */
/* 만드는 중·실패도 같은 목록 안이라 형 ① 이 걸린다 — 행 높이에 맞춰 늘어나게 둔다(숫자를 안 박는다).
   🔴 실패 카드만 `min-height:max-content` 다 — 글이 많아 행 높이에 안 들어가면 잘리는데(실측 1장),
      실패와 [다시 시도] 는 반드시 보여야 한다. 이 한 장 때문에 그 행이 넉넉해지고 형제도 같이 커진다. */
.mockup[data-page="editing"] .col-props .cand.busy{aspect-ratio:auto;max-height:none;min-height:0;
  height:auto;overflow:hidden}
.mockup[data-page="editing"] .col-props .cand.fail{aspect-ratio:auto;max-height:none;
  min-height:max-content;height:auto;overflow:hidden}
/* 🔴 11차-92 ㉡ — 돌고 있는 컷은 **타임라인에서도** 보인다. 패널은 고른 컷만 그리는데
   진짜 생성은 수십 초라 그 사이 다른 컷으로 옮기면 「없어진 것처럼」 보인다. */
.mockup[data-page="editing"] .is-making{outline:2px dashed var(--accent);outline-offset:1px;animation:mk 1.2s ease-in-out infinite}
@keyframes mk{0%,100%{opacity:1}50%{opacity:.55}}
/* 🔴 11차-89 — 실패 카드. 자동 재시도가 계약에 없어 **버튼이 없으면 사용자가 거기서 멈춘다.**
   빨강으로 소리치지 않는다 — 고칠 수 있는 자리라 「할 일」로 보이면 된다(24). */
/* 🔴 실패 카드도 비를 안 준다 — 같은 병(제 칸보다 커져 다음 줄을 덮는다) */
.mockup[data-page="editing"] .cand.fail{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;min-height:0;border-color:#c9922f;background:#2a1f10}
.mockup[data-page="editing"] .cand.fail>small:first-child{color:#f0c163;font-size:var(--fs-min)}
.mockup[data-page="editing"] .cand.busy .cand-flow{color:var(--muted);font-size:var(--fs-min);
  line-height:1.3;text-align:center;padding:0 6px;white-space:normal;word-break:keep-all}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);
  border-radius:50%;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cands{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}

/* ══ 8차 지시 2 — 상단 GNB·단계 바를 좌측 서비스 메뉴로 (06 영상 편집만) ══════════
   계층: 홈 > 프로젝트 > 공정 > 구간. 지금 있는 곳을 기준으로 한 단계씩 내려간다.
   계층은 크기·굵기·회색 단계·들여쓰기로만 나눈다(박스·테두리·아이콘 최소).
   테마·의견·스튜디오·Admin·로그아웃은 맨 아래 계정 줄의 메뉴 안에 둔다. */
.mockup[data-page="editing"],.mockup.has-snav{display:flex;align-items:flex-start;min-height:100vh}
.mockup[data-page="editing"]>.workspace,.mockup.has-snav>.workspace{flex:1;min-width:0;margin:0}
/* 10차-11: 제목 줄 좌표를 편집 화면 기준(x 252 · y 12)으로 맞춘다. 아래 여백(60px)은 그대로.
   제목 줄은 위쪽 정렬 — 오른쪽 버튼이 편집보다 커도 h1이 내려가지 않게(10차-11a 실측: 가운데 정렬이라 6px 내려갔다) */
.mockup.has-snav:not([data-page="editing"]) .page-title{align-items:flex-start}
.mockup.has-snav:not([data-page="editing"]):not([data-page="cuesheet"]):not([data-page="home"])>.workspace{padding:12px 20px 60px}/* 11차-11 홈 레일(15 §1-1-1): 브랜드와 계정 발치만 남긴다. 단계 nav를 걷어내면 발치를 밀어 줄 것이 없으므로 여기서 내린다 */.snav-home .snav-foot{margin-top:auto}/* 11차-16 H6: 홈 주 행동은 제목 줄 오른쪽(14 §1-1). 상태는 제목 아래 한 줄로 갈랐다 */.home-head-r{display:flex;align-items:center;gap:10px}/* 홈은 작업 영역 기본 여백 26px 30px 60px 을 쓴다(14 §1). 위 12px/20px 은 타임라인이 있는 화면 사정이다 */.mockup.has-snav[data-page="home"]>.workspace{padding:26px 30px 60px} /* 10차-10: 내용이 짧은 화면(07)에서 margin:auto로 가운데 내려가던 것 */
.snav{position:sticky;top:0;flex:none;width:232px;height:100vh;display:flex;flex-direction:column;
  padding:18px 12px 12px;border-right:1px solid var(--line);background:var(--bg);font-size:14px;line-height:1.35}
.snav a,.snav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
.snav-ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.snav .snav-brand{display:flex;align-self:flex-start;margin:0 6px 16px}
.snav .snav-up{display:flex;align-items:center;gap:6px;padding:6px 10px;color:var(--accent);font-weight:700;border-radius:8px}
.snav .snav-up:hover{background:rgba(255,255,255,.05)}
.snav-label{margin:18px 10px 4px;color:var(--muted);font-size:12px;font-weight:600;opacity:.75}
.snav .snav-project{height:auto !important;min-height:36px;margin:0 0 12px;padding:6px 10px !important;font-size:14px;
  text-align:left;border-radius:8px}
.snav .snav-project>span{align-items:flex-start !important}
.snav .snav-project .truncate{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.snav .snav-project svg{margin-top:2px}
.snav nav{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px}
.snav-steps,.snav-segs{list-style:none;margin:0;padding:0}
.snav-step{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border-radius:8px;
  color:var(--muted);font-weight:600}
.snav-step>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.snav-step:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.snav-step .snav-ic{color:var(--accent);opacity:.8}
.snav-step.is-now{color:var(--ink);font-weight:800;background:rgba(54,221,131,.10)}
.snav-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.snav-step.is-locked{opacity:.45;cursor:pointer} /* 10차-5: 목업에서는 잠긴 단계도 눌러 이동 */
.snav-step.is-locked .snav-ic{color:var(--muted)}
.snav-segs{margin:4px 0 8px 10px;padding-left:10px;border-left:1px solid var(--line)}
.snav-segs button{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 8px;border-radius:7px;
  color:var(--muted);font-size:13px;text-align:left}
.snav-segs button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav-segs button em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;opacity:.7}
.snav-segs button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.snav-segs button[aria-current="true"]{color:var(--ink);font-weight:700}
.snav-segs button[aria-current="true"] em{color:var(--accent);opacity:1}
/* 맨 아래 계정 줄 — 오른쪽 52px 는 목업 셸의 검토 도구 버튼(좌하단) 자리를 피한다 */
.snav-foot{position:relative;flex:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.snav-account{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left}
.snav-account:hover,.snav-account[aria-expanded="true"]{background:rgba(255,255,255,.06)}
.snav-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:#183525;color:#7eecac;font-size:13px;font-weight:800}
.snav-who{display:flex;flex-direction:column;min-width:0}
.snav-who b{font-size:13px}
.snav-who small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:60;padding:6px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.snav-menu>a,.snav-menu>button{display:flex;align-items:center;width:100%;min-height:36px;padding:0 10px;border-radius:8px;
  font-size:13.5px;text-align:left}
.snav-menu>a:hover,.snav-menu>button:hover{background:rgba(255,255,255,.06)}
.snav-menu hr{margin:6px 4px;border:0;border-top:1px solid var(--line)}
.snav-menu-row{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 6px 0 10px;font-size:13.5px}
.snav-seg{display:flex;padding:2px;border-radius:8px;background:rgba(255,255,255,.06)}
.snav-seg button{padding:3px 10px;border-radius:6px;font-size:12px;color:var(--muted)}
.snav-seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}

/* 제목 줄 — 공정 이름만. 방송 정보 보기(프로젝트 이름)는 좌측 메뉴의 프로젝트 줄로 합쳤다 (8차-4) */
.mockup[data-page="editing"] .page-title .title-l,.mockup.has-snav .page-title .title-l{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0}
.mockup[data-page="editing"] .page-title .title-l>.title-sub,.mockup.has-snav .page-title .title-l>.title-sub{margin:0}

/* ══ 8차 지시 1 — 노트북 높이에서 타임라인이 스크롤 없이 보이게 ══════════════════
   한 화면 높이(100vh)를 나눠 갖는다. 타임라인은 트랙 5줄이 다 보이는 제 높이를 먼저 갖고,
   남은 높이를 목록·미리보기·속성 3열이 나눠 쓴다. 미리보기는 9:16 을 지킨 채 줄어들고,
   목록과 속성은 자기 안에서 스크롤한다. 3열이 300px 밑으로 내려가면 줄이지 않고
   페이지가 스크롤된다(미리보기가 알아볼 수 없을 만큼 작아지지 않게). */
.mockup[data-page="editing"]>.workspace{display:flex;flex-direction:column;height:100vh;padding:12px 20px 14px}
.mockup[data-page="editing"] .page-title{flex:none;align-items:center;margin:0 0 10px;height:auto !important}
.mockup[data-page="editing"] .editor-grid{flex:1 1 0;min-height:300px;grid-template-rows:minmax(0,1fr);margin:0 0 10px}/* 11차-18 E7: 06의 주 행동은 세로로 끝나는 자리에 둔다(24 B3-1b). 작업 공간이 flex column 이라 *//* 바가 늘 발치에 있고 격자 폭을 건드리지 않는다(24 F1 — .toast가 본문을 1280→1107로 줄인 사고) *//* 11차-36: 라이브 하단 고정 바 — 배경 #151917 · 테두리 1px · radius 0(형 "라이브 그대로") */.ed-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 0;padding:10px 0 0;border-top:1px solid var(--line);border-radius:var(--r-bar);background:var(--panel-bar)}.ed-bar-l{font-size:13px;color:var(--muted)}
.mockup[data-page="editing"] .col-list,
.mockup[data-page="editing"] .col-preview,
.mockup[data-page="editing"] .col-props{height:auto}
.mockup[data-page="editing"] #timeline{flex:none}

/* ══ 8차 지시 6 — 팝오버 한 벌 · 속성 패널 버튼 한 틀 · 내보내기 형식×범위 ══════════
   팝오버(내보내기·추가·다시 만들기·프로젝트·계정)는 같은 모양이다. 제목 줄의 small 규칙(자간·강조색)이 새지 않게 초기화. */
.pop{position:absolute;z-index:40;min-width:200px;padding:6px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);box-shadow:0 16px 40px -12px rgba(0,0,0,.6);letter-spacing:normal;text-align:left}
.pop>button,.pop>a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:36px;
  justify-content:center;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--ink);
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.pop>button:hover,.pop>a:hover{background:rgba(255,255,255,.06)}
.pop b{font-weight:600;font-size:13.5px}
.pop small,.page-title .pop small{display:block;margin:0;font-size:12px;letter-spacing:normal;color:var(--muted);line-height:1.4}
.pop-label{margin:6px 10px 4px;font-size:12px;color:var(--muted);letter-spacing:normal}
.pop-seg{display:flex;gap:2px;margin:0 6px 6px;padding:2px;border-radius:8px;background:rgba(255,255,255,.06)}
.pop-seg button{flex:1;min-width:0;padding:5px 8px;border:0;border-radius:6px;background:none;color:var(--muted);
  font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pop-seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}
.pop-seg button:disabled{opacity:.4;cursor:not-allowed}
.export-menu{right:0;top:calc(100% + 8px);width:300px}
.add-menu{left:0;top:calc(100% + 8px);width:180px}
.snav-menu{position:absolute}
.snav-proj-menu{left:0;right:0;top:calc(100% + 2px)}
/* 속성 패널 — 대상이 무엇이든 버튼 줄은 맨 아래, [주 행동][보조] (+ 얹은 것만 빼기) */
/* 11차-54: 1036 에서 우측 값 칸이 24px 만 남아 「위치 00:00」이 통째로 잘렸다(연출 컷 12개 전부 · 80px 잘림).
   원인은 .props-body 가 아니라 위에 있는 「지금 쓰는 것」 미리보기(.res)다 —
   그림 높이가 150px 붙박이라 안 줄고, .props-body 는 flex:1 이라 「남은 것」만 받는다.
   실측(1036×800): col-props 344 안에 props-head 14 + res 217 + props-body 24 + props-foot 106 = 361.
   그림은 줄어도 뜻을 안 잃지만 「위치 00:00」은 잘리면 뜻을 잃는다(형 여덟 패턴 「잘려서 뜻을 잃음」).
   → 값 칸에 최소 높이를 주고, 미리보기가 그만큼 줄어들게 한다. 1440 에서는 여유가 있어 전과 같다. */
.col-props>.props-body{flex:1 1 auto;min-height:96px}
/* 1036×760 에서는 구간 유형(.res 가 없는 쪽)이 여전히 내용보다 짧다 — 높이가 모자라 스크롤이 불가피하다.
   형 지적은 「스크롤은 되는데 스크롤바가 안 보여 잘렸다로 읽힌다」였다. 그러니 스크롤바를 보이게 한다.
   맥은 기본이 「겹쳐 뜨고 곧 사라지는」 스크롤바라 아무 표시도 안 남는다. */
.col-props>.props-body{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.col-props>.props-body::-webkit-scrollbar{width:8px}
.col-props>.props-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.col-props>.props-body::-webkit-scrollbar-track{background:transparent}
/* 🔴 11차-81(형 06-4 를 붙이다 캡처로 잡은 것 — 자는 「패널 넘침 0」으로 초록이었다):
   `overflow:hidden` 이라 1036 에서 **생성 이력 카드의 아래가 잘려 있었다.**
   실측(1036×860): `.res` 88–233 인데 카드는 127–333 — 꼬리표 「지금 쓰는 것」도 「이 자리에 쓰기」도 안 보였다.
   `.cand img{max-height:min(150px,100%)}` 가 줄여 줄 거라 믿은 자리인데, 그 `100%` 는 `.res` 가 아니라
   **카드 높이**에 걸려서 아무것도 안 줄였다. 잘린 지 오래인데 「넘침」을 재는 자에는 안 잡혔다(`.col-props` 는 안 넘쳤다).
   → 잘라 내는 대신 **굴린다.** 바로 아래 `.props-body` 가 같은 이유로 이미 그렇게 하고 있다(형: 스크롤바를 보이게).
      썸네일을 더 줄이지 않는 이유는 형 지적 여덟 패턴에 「작은 썸네일」이 있어서다. */
.col-props>.res{flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.col-props>.res{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.col-props>.res::-webkit-scrollbar{width:8px}
.col-props>.res::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.col-props>.res::-webkit-scrollbar-track{background:transparent}
.col-props>.res .cand img,.col-props>.res .card-prev{max-height:min(150px,100%)}
.props-foot{margin-top:auto;align-items:stretch}
/* 11차-37 형 5번: flex:1 1 0 + min-width:0 이라 좁아지면 버튼이 줄어 글자가 넘쳤다. 줄이 접히게 최소 폭을 준다 */.props-foot>button,.props-foot .split{flex:1 1 auto;min-width:96px}
/* 11차-49(형 16번 · 2조 요청): 버튼 위계 3단에서 .ghost 는 제일 조용한 칸이다 — 글자 버튼으로 내린다.
   2조가 mockup.css 를 못 고쳐 mockup.js:132 에 인라인(border-color:transparent;background:none;padding-left/right:4px)으로
   임시 처리해 뒀다. 이 규칙이 그 인라인을 대신하니 2조는 그 인라인을 걷어도 된다. */
.props-foot button.ghost{flex:0 0 auto;min-width:0;padding:9px 4px;border-color:transparent;background:none;color:var(--muted)}
.split{position:relative;display:flex}
.split>button:first-child{flex:1;min-width:0;padding:9px 8px;border-radius:8px 0 0 8px;border:1px solid var(--line);
  background:none;color:#d6e6db;cursor:pointer;font-size:var(--fs-base)}
.split>.split-arrow{flex:none;width:32px;display:grid;place-items:center;border:1px solid var(--line);border-left:0;
  border-radius:0 8px 8px 0;background:none;color:#d6e6db;cursor:pointer}
.split-menu{right:0;bottom:calc(100% + 6px);width:190px}
/* 프로젝트 이름 — 한 줄 */
.snav .snav-project .truncate{white-space:nowrap;display:block;-webkit-line-clamp:unset}
.snav .snav-project>span{align-items:center !important}
.snav .snav-project svg{margin-top:0}
.snav-proj-edit{width:100%;margin:0 0 12px;padding:7px 10px;border:1px solid var(--accent);border-radius:8px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:14px;font-weight:700}
.snav nav,.snav .snav-foot{position:relative}
.snav-proj-wrap{position:relative}
.snav-proj-wrap .snav-proj-menu{top:calc(100% - 8px)}
/* 11차-37 형 5번: nowrap 이라 버튼이 좁아지면 글자가 밖으로 나갔다(flex-wrap 은 버튼 단위로만 접힌다). 줄이 접히게 둔다 */.props-foot button{white-space:normal;word-break:keep-all;line-height:1.25;min-width:0}
.props-foot .split>button{min-width:0;flex:none}
.props-foot .split>button:first-child{flex:1 1 auto}
.props-foot .split>.split-arrow{width:32px;padding:0}
.props-foot .split .split-menu button{flex:none;min-width:0;border:0;padding:6px 10px}
.props-foot>button.main{flex:1 1 auto;min-width:96px}
.props-foot .split{flex:1.6 1 auto;min-width:120px}
.props-foot .split>button:first-child{padding:9px 6px;min-width:0}
.page-title .pop>button{min-height:46px;padding:7px 10px;gap:3px}
.page-title .pop>button+button{margin-top:2px}
.export-menu{width:340px}
.export-menu .pop-seg [data-exp-range="all"]{flex:0 0 64px}

/* ══ 8차 지시 7 — 쇼호스트 = 립싱크 영상 + 음성 한 묶음(연결) · 표시 구간 내비게이터 · 내보내기 팝오버 ══ */
.tl-group{align-items:stretch}
.tl-group .tl-gutter{align-self:stretch;position:relative}
.tl-stack{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;border-radius:6px;
  box-shadow:0 0 0 1px rgba(126,236,172,.16)}
.tl-stack .tl-lane-clips{border-radius:5px 5px 0 0}
.tl-stack .tl-lane-wave{border-radius:0 0 5px 5px}
.tl-link{display:inline-grid;place-items:center;color:#7eecac;opacity:.8}
.tl-link .ico{width:12px;height:12px}
.tl-host{border-radius:4px;overflow:hidden;background-repeat:repeat-x;background-position:left center;
  background-size:auto 100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(126,236,172,.22)}
.tl-lane .tl-hsel{position:absolute;top:0;bottom:0;border:2px solid var(--accent);border-radius:4px;
  background:rgba(54,221,131,.10);pointer-events:none;z-index:5}
.tl-stack .tl-lane-clips .tl-hsel{border-bottom:0;border-radius:4px 4px 0 0}
.tl-stack .tl-lane-wave .tl-hsel{border-top:0;border-radius:0 0 4px 4px}
[data-host-lane]{cursor:pointer}
.ptag.host{background:rgba(126,236,172,.14);color:#8fe0b3}

.tl-nav{display:flex;align-items:center;gap:12px;padding:8px 0 2px 0}
/* 11차-37 형 2번: 라벨은 헤더 열 안에 두고 막대는 트랙 영역 x 에서 시작한다(라이브와 같은 짜임) */
.tl-nav-label{width:var(--tl-head,150px);box-sizing:border-box;padding-left:12px}
/* 형 06-1: 「보이는 범위」 칸도 같은 색. 붙박이(sticky)는 안 붙인다 —
   이 줄은 `.tl-scroll` 밖이라 가로로 밀리지 않는다. 안 움직이는 것을 붙박이로 묶어 봐야 속임수다. */
.tl-nav-label{flex:none;font-size:12px;color:var(--muted);white-space:nowrap;background:var(--panel2)}
.tl-nav-label b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tl-nav-track{position:relative;flex:1;height:18px;border-radius:5px;background:#0a1410;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line)}
.tl-nav-marks{position:absolute;inset:3px 0;pointer-events:none}
.tl-nav-marks i{position:absolute;top:0;bottom:0}
.nm-dir{min-width:1px;background:rgba(91,124,196,.75)}
.nm-seg{width:1px;background:rgba(237,244,239,.35)}
.nm-banner{width:2px;background:#c9922f}
.tl-nav-win{position:absolute;top:0;bottom:0;min-width:12px;border:2px solid var(--accent);border-radius:5px;
  background:rgba(54,221,131,.12);cursor:grab;touch-action:none}
.tl-nav-win.drag{cursor:grabbing;background:rgba(54,221,131,.2)}
.tl-nav-win:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* 내보내기 팝오버 — 8px 격자. 섹션 사이 구분선, 형식은 아이콘 + 두 줄 */
.export-menu.pop{width:320px;padding:8px}
.export-menu .pop-label{margin:4px 8px 8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.export-menu .pop-seg{margin:0 0 4px;padding:3px;border-radius:9px;gap:3px}
.export-menu .pop-seg button{height:30px;padding:0 10px;border-radius:7px;font-size:13px}
.export-menu .pop-seg [data-exp-range="all"]{flex:0 0 72px}
.export-menu .pop-sep{height:1px;margin:8px 0;background:var(--line)}
.page-title .export-menu.pop>button{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:10px 8px;border-radius:9px}
.page-title .export-menu.pop>button+button{margin-top:0}
.export-menu .ex-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.06);color:#c7d8cc}
.export-menu .ex-ico svg{width:16px;height:16px}
.export-menu .ex-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.export-menu .ex-txt b{font-size:13.5px;line-height:1.3}
.page-title .export-menu .ex-txt small{font-size:12px;line-height:1.35}
.export-menu .ex-badge{margin-left:auto;flex:none;padding:2px 7px;border-radius:999px;font-size:11px;
  background:rgba(255,210,129,.12);color:var(--warm)}
.tl-nav-range{flex:none;min-width:92px;padding-right:4px;text-align:right;font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tl-nav{padding-right:0}
.page-title .export-menu.pop>button{justify-content:flex-start}
.tl-stack .tl-lane{flex:none}
.tl-group .tl-gutter{flex-wrap:wrap;align-content:center;row-gap:4px}
/* 11차-67 형 06-3·4·7 — 레인 머리 칸(2조 범위: .tl-* 계열).
   4: "컬럼 오른쪽에 여백이 없다" → 이름과 레인이 붙어 있었다(padding-right 0).
   3: "컬럼 헤드는 고정" → 가로로 밀어도 이름 칸은 남는다(sticky left 0).
   7: 아이콘 셋을 걷은 자리에 줄을 가르는 것이 없어졌다 → 옅은 배경과 아래 선으로 칸을 말한다.
      🔴 색을 새로 만들지 않는다 — 있는 토큰(--panel2 · --line)을 쓴다. */
/* 형 06-1: 눈금 줄의 왼쪽 칸도 트랙 이름 칸과 같은 색·같은 붙박이.
   🔴 여기 셋만 칠한다 — 클립이 놓이는 트랙(.tl-lane)에는 색을 주지 않는다(형이 못 박으셨다). */
/* 🔴 11차-86 형: "연출편집에서 구간 이동하면 좌측 헤더 부분이 fill 되어 있지 않아서 뚫려 보인다고"
   원인은 색이 아니라 **높이**였다. `.tl-row{align-items:center}` 라 칸이 글자 높이(20px)로 줄어드는데
   줄은 35·45px 이라 **위아래가 빈다** — 가로로 밀면 그 빈 띠로 클립이 지나간다.
   실측(1280 · 12배 · 600px 굴림): 구간 20/35 · 혜택 카드 20/35 · 연출 컷 20/45 · 🟢 쇼호스트 80/80.
   쇼호스트만 멀쩡한 이유가 답이었다 — `.tl-group{align-items:stretch}` 를 이미 갖고 있었다.
   🔴 높이를 숫자로 박지 않는다(35·45·80 이 다 다르다). **줄이 정하고 칸이 따라간다.**
   🔴 우리 자는 「배경이 있나」를 쟀다 — **높이가 절반이어도 배경은 있다.** 그래서 두 번 다 초록이었다.
      자를 「덮나」(칸 높이 == 줄 높이)로 바꿨다. */
.tl-row .tl-gutter,.tl-gutter-blank{padding-right:12px;position:sticky;left:0;z-index:2;background:var(--panel2)}
.tl-row .tl-gutter,.tl-nav-label{align-self:stretch}
.tl-row{border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:0}
/* 11차-67 형 06-19: ⌘+클릭으로 고른 컷. 고른 것과 「지금 보고 있는 것」(aria-pressed)은 다른 일이라
   표시도 다르게 둔다 — 보는 것은 테두리, 고른 것은 채움. */
.tl-lane .is-multi{outline:2px solid var(--accent);outline-offset:-2px}
/* 11차-70 형 06-9·10·18 — 다시 만들기 모달의 ①어디다가 / ②어떤 연출.
   🔴 ① 은 자막 155줄 목록이 아니라 가로 띠다. 지금 보고 있는 지점이 한가운데 있고 자막이 그 위에 흐른다.
      고른 자리는 「예약」이지 「배치」가 아니라 흐리게 그린다 — 타임라인에 안 꽂힌다.
   새 색을 만들지 않는다 — 있는 토큰만 쓴다. */
.rmb-band{position:relative;height:74px;margin:0 0 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);overflow:hidden}
.rmb-now{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);opacity:.7}
/* 🔴 11차-82: 폭을 「다음 조각까지의 거리」로 JS 가 준다 — 글자 길이로 잡으면 서로 겹친다.
   `translateX(-50%)` 도 걷는다: 폭이 자리를 뜻하게 됐으니 왼쪽 끝이 그 시각이다(반 칸 밀면 띠 밖으로 나간다). */
.rmb-piece{position:absolute;top:8px;bottom:8px;box-sizing:border-box;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 8px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);
  font-size:11px;text-align:left;cursor:pointer;overflow:hidden}
.rmb-piece b{color:var(--ink);font-variant-numeric:tabular-nums}
.rmb-piece span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmb-piece.is-on{border-color:var(--accent);color:var(--ink)}
.rmb-at{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;opacity:.75}
.rmb-at img{width:44px;height:58px;object-fit:cover;border-radius:6px}
.rmb-recs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.rmb-rec{flex:1 1 30%;min-width:120px;display:flex;flex-direction:column;gap:3px;padding:10px;
  border:1px solid var(--line);border-radius:10px;background:none;color:var(--muted);text-align:left;cursor:pointer}
.rmb-rec b{color:var(--ink);font-size:13px}
.rmb-rec span{font-size:11.5px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rmb-rec em{font-style:normal;font-size:11px;color:var(--muted)}
.rmb-rec.is-on{border-color:var(--accent);color:var(--ink)}
/* 🔴 11차-82(형 10 "요런 컷"): 지금 종류가 아닌 추천은 **이 방송에 실제로 있는 그 종류의 컷**을 그림으로 보인다.
   글로 설명을 지어내지 않으려고 그림을 쓴다 — 없는 종류는 그림 없이 이름만 나간다. */
.mockup[data-page="editing"] .rmb-rec img{width:100%;height:74px;object-fit:cover;border-radius:6px;display:block}
.rmb-flow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.rmb-flow i{font-style:normal;opacity:.6}



.tl-group .tl-gutter>span{flex:0 0 100%}
#props .prow .pval{white-space:normal;overflow:visible;text-overflow:clip}
.tl-nav{gap:0}.tl-nav-range{padding-left:12px}

/* 10차-1 · 10차-3: 03 방송 구성 = 편성표(부품은 proto/pyeonseong-final.css) + 06 편집 셸.
   제목 줄(상태 · 조용한 버튼 · 오른쪽 위 [편성 확정]) → 전체 폭 구간 막대 → 2열(구간 카드 · 오른쪽 패널), 각 열이 제 안에서 스크롤 */
.mockup[data-page="cuesheet"]>.workspace{display:flex;flex-direction:column;height:100vh;padding:12px 20px 14px}
.mockup[data-page="cuesheet"] .page-title{flex:none;margin:0 0 4px}
.mockup[data-page="cuesheet"] .pyeon .status{grid-column:auto;margin:0;font-size:14px}
.mockup[data-page="cuesheet"] .top-aux{display:inline-flex;gap:2px}
.cs-head-r{display:flex;align-items:center;gap:12px;flex:none}
/* 11차-73 형 03-6: 여기서 `#confirm` 을 덮고 있었다(height 38 · pad 0 18 · radius 10 · 14px).
   공통 `.primary` 가 이미 02 규격이라 덮을 이유가 없었다 — 규칙을 지운다.
   🔴 화면마다 덮어 두면 다음 화면에서 또 난다. `.title-proj` 가 같은 자리였다(02·07 이 각자 덮어
      06·05 만 어긋났다). 공통을 고치고 화면별 덮개는 두지 않는다. */
.mockup[data-page="cuesheet"] .pyeon .missing{padding:0}
.mockup[data-page="cuesheet"] .pyeon .board{flex:none;padding:6px 0 12px}
/* 10차-6: 아래 2열은 편집 .editor-grid 값과 같게(minmax(0,1fr) 330px · 18px · start) */
.cs-layout{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;padding-top:12px}
.mockup[data-page="cuesheet"] .pyeon .list-wrap{padding:0 4px 8px 0}
.cs-side{min-height:0;max-height:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.cs-side h3{margin:0 0 8px;font-size:13px;color:var(--muted)}
.cs-seg-head{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.cs-seg-head b{font-size:15px;line-height:1.35}
.cs-empty{margin:0;color:var(--muted)}
.cs-seg .sum{gap:16px}
.cs-seg .sum span{white-space:nowrap}
.cs-seg .sum b{text-align:right}
.cs-tray{list-style:none;margin:14px 0 0;padding:0}
.cs-tray:empty{display:none}
.mockup[data-page="cuesheet"] .pyeon .tray{padding:12px}
.mockup[data-page="cuesheet"] .pyeon .tray .row{gap:8px}
.cs-why{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.cs-why>summary{cursor:pointer;font-weight:700;font-size:14px}
.mockup[data-page="cuesheet"] .pyeon .cs-why .why{max-height:none}
.mockup[data-page="cuesheet"] .pyeon .p-toast{position:fixed;left:calc(50% + 116px);bottom:24px}

/* 10차-3: 모든 단계 화면 = 06 편집의 좌측 메뉴 셸(shell.js). 제목 줄 = 공정 이름 + 상태 한 줄 + 오른쪽 주 행동 */
.mockup.has-snav:not([data-page="editing"]) .page-title h1{font-size:20px;font-weight:700;margin:0}
.mockup.has-snav:not([data-page="editing"]) .page-title .title-sub{color:var(--muted);font-size:12.5px} /* 10차-5a: 편집 실측값(--fs-meta는 편집 화면에서만 정의된다) */
.mockup.has-snav:not([data-page="editing"]) .page-title .title-sub b{color:var(--ink)}
.snav-step.is-live{color:#cbdbd0}
.snav-step.is-now.is-locked{opacity:1}

/* 10차-5: 목업 도구(좌측 메뉴 맨 아래) — 서비스 UI가 아니라 검토용 */
/* 10차-5a: 도구 칸은 아래 고정, 단계 목록(nav)만 스크롤. 메뉴를 펼쳐도 단계가 가리지 않게 띄워 올린다
   (형 지적: 동작 예시를 펼치면 "최종 영상" 줄이 반쯤 덮였다) */
.snav-tools{position:relative;flex:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.snav-tools .snav-label{margin:0 10px 4px}
.snav-tool{display:flex;align-items:center;width:100%;min-height:32px;padding:0 10px;border-radius:8px;color:var(--muted);font-size:13px;text-align:left}
.snav-tool:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.snav-tool-menu{position:absolute;left:8px;right:8px;bottom:calc(100% - 4px);z-index:40;display:flex;flex-direction:column;
  padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 16px 40px -12px rgba(0,0,0,.6)}
.snav-tool-menu button{display:flex;align-items:center;min-height:30px;padding:0 8px;border-radius:7px;color:var(--muted);font-size:12.5px;text-align:left}
.snav-tool-menu button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.snav-tool-menu button[aria-pressed="true"]{color:var(--ink);font-weight:700}

/* 10차-13: 글자 버튼 기준(14 §1 · 형 결정) — 14px · --muted · 클릭 영역 40px(투명 패딩) · 밑줄 없음 */
.mockup .quiet{min-height:40px;display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:8px;
  background:none;color:var(--muted);font-size:14px;line-height:1.4;text-decoration:none;cursor:pointer}
.mockup .quiet:hover:not(:disabled){background:var(--raise);color:var(--ink)}
.mockup .quiet:disabled{opacity:.5;cursor:default}
/* 목업에서 동작이 없는 항목은 비활성 + 꼬리표(형 결정 10차-13) */
.snav-menu [disabled]{opacity:.5;cursor:default}
.snav-dead{margin-left:6px;font-size:11px;color:var(--muted)}
/* 알림 토스트 — 자리를 차지하지 않는다(11차-2 4차: CSS가 없어 본문 옆에 끼어들어 폭을 흔들었다) */
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translateX(-50%);max-width:min(560px,90vw);
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:13px}
/* 눈금 마지막 라벨이 열 밖으로 16px 나가던 것(1280에서 잡힘) — 안쪽으로 붙인다 */
.tl-ruler span:last-child{transform:translateX(calc(-100% + 3px))}

/* 🔴 11차-79 형 4번 레일 — "세로 기둥에 스텝이 이렇게 있어서 「아 요게 요렇게 순서가 진행되는구나」"
   알맹이는 「선의 진하기가 어디까지 왔나를 말하는 것」이다. 색이 아니라 선이 말한다(plan-1 설계).
   🔴 점·선은 CSS 로만 그린다 — DOM 에 표시를 넣으면 자가 firstChild 로 이름을 읽던 자리가 깨진다.
   ⚠️ 좌측은 길잡이지 주인공이 아니다 — 선을 --accent 로 두되 흐리게(24 A10-3). */
.snav-steps>li{position:relative;padding-left:24px}
.snav-steps>li::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;
  background:var(--accent);opacity:.5}
.snav-steps>li:first-child::before{top:18px}      /* 첫 칸 위는 안 그린다 */
.snav-steps>li:last-child::before{bottom:calc(100% - 18px)}   /* 마지막 칸 아래도 */
.snav-steps>li::after{content:"";position:absolute;left:5px;top:18px;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--accent);background:var(--accent)}     /* 지나온 것 = 찬 점 */
.snav-steps>li:has(.is-now)::after{width:14px;height:14px;left:4px;background:var(--bg);
  box-shadow:0 0 0 3px rgba(54,221,131,.18)}                   /* 지금 = 둘레가 있는 큰 점 */
/* 🔴 지금 칸이 경계다 — 그 아래는 선도 점도 흐리다 */
.snav-steps>li:has(.is-now)~li::before{background:var(--line);opacity:1}
.snav-steps>li:has(.is-now)~li::after{background:var(--bg);border-color:var(--line)}

/* ── 🔴 11차-93 형: "사이드바 메뉴는 접었다 폈다 할 수 있게 … 홈으로 올라가는 단계 버튼은 있어야 되니까"
   접으면 **이름 글자만** 감춘다. 칸·홈·단계 버튼은 그대로 남아 눌린다.
   🔴 DOM 은 손대지 않는다 — 3조 자 둘(host.js:57 · final-screen.js:47)이 .snav-step 의 자식 텍스트를
      읽어 02↔06·07↔06 을 대조한다. 글자를 지우면 남의 자가 깨지므로 여기서 눈에서만 없앤다.
   🔴 세로 기둥(::before)·점(::after)은 그대로 둔다 — 접어도 순서가 보여야 한다(형 뜻). */
/* ── 🔴 11차-93 공통 발치 (handoff/14 §5-2 · main 승인 · 2조 실측)
   같은 규칙이 다섯 화면에 복제돼 있었다: .cs-side-foot · .hs-side-foot · .rq-side-foot ·
   .st-side-foot · .sc-side-foot(같은 클래스가 두 번 — 앞 것이 죽어 있었다).
   머리 세 줄(margin-top·padding-top·border-top)은 다섯이 똑같고 꼬리만 제각각이었다.
   🔴 형 "다 따로 놀아"가 이것이다. `.title-proj` 와 같은 병이 발치에서 또 자랐다(24 A11).
   2조: "지키지 않은 것이 아니라 지킬 것이 없었던 것입니다." — 그래서 지킬 자리를 만든다.
   🟡 각 조가 자기 화면을 갈아탄다. 남의 .xx-side-foot 은 여기서 지우지 않는다.
   🔴 flex:none 은 승인값에 없었는데 자가 잡았다 — 다섯 중 **넷**이 갖고 있던 값이다
   (.cs·.hs·.rq·.st 가 flex:none · .sc 만 없었고 승인값이 .sc 를 베이스로 했다).
   없으면 공간이 모자랄 때 발치가 찌그러져 버튼이 눌리는데 안 보인다. 복제의 공통분모를 취한다. */
.side-foot{flex:none;margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding-top:12px;border-top:1px solid var(--line)}
.snav-toggle{display:flex;align-items:center;justify-content:center;align-self:flex-start;
  width:32px;height:32px;margin:0 0 10px;border-radius:8px;color:var(--muted)}
.snav-toggle:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.snav-toggle .snav-ic{width:18px;height:18px}
.snav.is-collapsed{width:64px;padding-left:8px;padding-right:8px}
/* 이름·부가 글자는 감추되 자리는 남긴다 */
.snav.is-collapsed .snav-label,
.snav.is-collapsed .snav-proj-wrap,
.snav.is-collapsed .snav-who,
.snav.is-collapsed .snav-tools,
.snav.is-collapsed .snav-segs,
/* 🔴 `.snav-brand span span` 으로 잡으면 로고 SVG 를 감싼 span 까지 먹어 로고가 통째로 사라진다
   (캡처로 잡았다 — 자는 폭만 재서 초록이었다). 글자는 두 번째 span 이다. */
.snav.is-collapsed .snav-brand span span+span,
.snav.is-collapsed .snav-step>span:first-child{display:none}
/* 🟡 「홈」 글자는 남긴다 — 형이 *"홈으로 올라가는 단계 버튼은 아마 있어야 되니까"* 라고 따로 짚으신 자리다.
   화살표만 남기면 어디로 가는지 모호해지고, 64px 안에 「← 홈」이 넘치지 않고 들어간다. */
.snav.is-collapsed .snav-up{justify-content:center;padding:6px 0}
.snav.is-collapsed .snav-account{justify-content:center;padding:0}
/* 🔴 번호는 레일에 없었다(counter 0건). DOM 에 글자를 더하지 않으려고 CSS 로 그린다 —
   「대본」과 「연출·편집」은 아이콘으로 못 가르지만 번호는 갈린다(24 A1: 새 그림을 안 만든다). */
.snav-steps{counter-reset:snavstep}
.snav-steps>li{counter-increment:snavstep}
.snav.is-collapsed .snav-steps>li{padding-left:22px}
.snav.is-collapsed .snav-step{justify-content:flex-start;padding:0 4px;min-height:34px}
.snav.is-collapsed .snav-step::before{content:counter(snavstep);font-size:12px;font-weight:700;
  min-width:16px;text-align:center}
.snav.is-collapsed .snav-step .snav-ic,
.snav.is-collapsed .snav-dot{display:none}   /* 번호가 그 일을 한다 — 두 표시를 겹쳐 두지 않는다 */

/* 🔴 11차-98 형 06 — 연출 컷 모달 2단계. 섹션 제목을 없앴으니(형 ⑬) 칸 이름이 왼쪽에 선다. */
.mockup[data-page="editing"] .rmw{display:flex;flex-direction:column;gap:10px}
.mockup[data-page="editing"] .rmw-r{display:flex;align-items:flex-start;gap:12px}
.mockup[data-page="editing"] .rmw-k{flex:none;width:84px;color:var(--muted);font-size:12.5px;padding-top:2px}
.mockup[data-page="editing"] .rmw-v{color:var(--ink);font-size:13.5px;font-weight:600}
/* 🔴 대사는 두 줄까지 — 넘치면 말줄임(형 설계). 여기서 늘어나면 1장이 길어져 [다음]이 밀린다 */
.mockup[data-page="editing"] .rmw-say{flex:1;min-width:0;color:var(--ink);font-size:13.5px;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mockup[data-page="editing"] .rmw-th{width:44px;height:78px;object-fit:cover;border-radius:6px;margin-left:10px}
/* 2장 — 후보 셋 + [내가 쓰기]. 그림이 9:16(생산 계약)이라 카드도 그 비다 */
.mockup[data-page="editing"] .rmi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mockup[data-page="editing"] .rmi-c{display:flex;flex-direction:column;gap:6px;padding:0 0 8px;
  border:1px solid var(--line);border-radius:10px;background:none;color:var(--muted);cursor:pointer;
  overflow:hidden;text-align:left}
.mockup[data-page="editing"] .rmi-c img{width:100%;max-width:170px;aspect-ratio:9/16;object-fit:cover;
  display:block;margin:0 auto}
.mockup[data-page="editing"] .rmi-c span{padding:0 8px;font-size:12px;line-height:1.45;min-height:3.9em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.mockup[data-page="editing"] .rmi-c.is-on{border-color:var(--accent);color:var(--ink)}
.mockup[data-page="editing"] .rmi-c em{font-style:normal;font-size:11px;color:var(--accent);padding:0 8px}
.mockup[data-page="editing"] .rmi-own{align-items:center;justify-content:center;border-style:dashed;padding:0}
.mockup[data-page="editing"] .rmi-c{padding-top:10px}
.mockup[data-page="editing"] .rmi-c span{text-align:center}
.mockup[data-page="editing"] .rmi-own b{color:var(--ink);font-size:13px}

.mockup[data-page="editing"] .rmw-sel{flex:1;min-width:0;height:34px;border:1px solid var(--line);
  border-radius:8px;padding:0 8px;font-size:13px;color:var(--ink);background:var(--bg)}
.mockup[data-page="editing"] .rmw-say.is-open{-webkit-line-clamp:unset;display:block}
.mockup[data-page="editing"] .rmw-none{font-style:normal;color:var(--muted)}
.mockup[data-page="editing"] .rmw-more{flex:none;border:0;background:none;padding:0;
  color:var(--accent);font-size:12px;cursor:pointer;text-decoration:underline}
.mockup[data-page="editing"] .rmi-mock{margin:8px 0 0;color:var(--muted);font-size:11.5px}

.mockup[data-page="editing"] #rm-foot .rm-cost{color:var(--muted);font-size:11.5px;margin-right:10px}

/* 11차-99 — 파형 · 창 안 ▶ · 글자 버튼 */
.mockup[data-page="editing"] #rm-winplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#08140d;
  font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mockup[data-page="editing"] .rm-textbtn{margin-top:8px;border:0;background:none;padding:0;
  color:var(--accent);font-size:12.5px;cursor:pointer;text-decoration:underline}

.mockup[data-page="editing"] .rmw-pth{width:34px;height:34px;object-fit:cover;border-radius:6px;margin-right:8px;flex:none}

/* 혜택 카드 후보 — 그림 대신 카드를 코드로 그린다(11차-101) */
.mockup[data-page="editing"] .col-props .cand.bncand{display:flex;flex-direction:column;min-height:0}
.mockup[data-page="editing"] .col-props .cands-bn{grid-template-columns:minmax(0,1fr)}
.mockup[data-page="editing"] .col-props .cand.bncand img{flex:1 1 auto;min-height:0;height:auto;
  max-height:none;aspect-ratio:auto;object-fit:contain;background:#0a1410}