/* ④ 편집기·타임라인 편집. (studio.css 에서 옮김) */
/* ── ④ 편집기(editor-v1) ───────────────────────────────── */
body[data-view="editor"] .app { grid-template-columns: minmax(0, 1fr); }
body[data-view="editor"] .side, body[data-view="editor"] .site-footer { display: none; }
body[data-view="editor"] { overflow: hidden; }
.editor { display: grid; grid-template-rows: 52px minmax(0, 1fr) 232px; height: 100dvh; }
.ed-top { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 0 14px; border-bottom: 1px solid var(--c-line); background: var(--c-bg-sunken); }
.ed-back { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ed-back:hover { color: var(--c-text); }
.clipnav { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin-left: var(--sp-2); }
.clipnav > div { display: grid; min-width: 0; }
.clipnav b { overflow: hidden; max-width: 360px; font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; }
.clipnav span { color: var(--c-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ed-score { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; }
.ed-score b { padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-brand-grad); color: #fff; }
.spacer { flex: 1; }
.save-state { display: flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; }
.save-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }
.save-state[data-status="dirty"]::before, .save-state[data-status="saving"]::before { background: var(--c-brand-3); }
.save-state[data-status="error"] { color: var(--c-warning); }
.save-state[data-status="error"]::before { background: var(--c-danger); }
.ed-work { display: grid; grid-template-columns: 56px 300px minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.ed-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-right: 1px solid var(--c-line); background: var(--c-bg-sunken); }
.ed-rail button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--c-muted); font-size: var(--fs-xs); }
.ed-rail button svg { width: 20px; height: 20px; }
.ed-rail button:hover { color: var(--c-text); }
.ed-rail button.on { background: rgba(255, 122, 61, .14); color: #fff; }
.ed-script { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--c-line); background: var(--c-panel); }
.ed-script h2 { margin: 0; padding: 14px 16px 8px; color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.script-silence { margin: 0 12px 6px; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: transparent; color: var(--c-text-soft); font-size: var(--fs-xs); text-align: left; }
.script-silence:not(:disabled):hover { border-color: var(--c-brand-2); color: #fff; }
.script-silence:disabled { opacity: .55; }
.script-lines { display: grid; align-content: start; gap: 2px; min-height: 0; overflow: auto; padding: 4px 10px 20px; }
.script-line { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-2); padding: 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text-soft); font-size: var(--fs-md); line-height: 1.6; text-align: left; }
.script-line time { color: var(--c-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; line-height: 2; }
.script-line:hover { background: var(--c-surface-hover); }
.script-line.now { background: rgba(255, 122, 61, .22); color: #fff; }
.script-empty { padding: 6px; }
.script-hook { margin: 0 0 var(--sp-2); font-size: var(--fs-md); line-height: 1.7; }
.script-empty small { color: var(--c-dim); font-size: var(--fs-xs); }
.ed-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 0; padding: 12px; }
.render-status { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; max-width: 100%; padding: 6px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); background: var(--c-surface); font-size: var(--fs-xs); color: var(--c-muted); }
.render-status strong { color: var(--c-text); }
.render-status.error-state { border-color: rgba(230, 180, 95, .45); }
.render-output { padding: 6px 12px; border: 1px solid rgba(86, 214, 139, .35); border-radius: var(--r-btn); background: rgba(86, 214, 139, .06); font-size: var(--fs-xs); }
.player-wrap { display: flex; flex: 1; align-items: center; justify-content: center; width: 100%; min-height: 0; container-type: size; }
.player-shell { position: relative; width: min(100cqw, calc(100cqh * 9 / 16)); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.transport { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); }
.player-time { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.player-time b { color: #fff; font-weight: var(--fw-regular); }
.ed-panel { min-height: 0; overflow: auto; padding: 14px; border-left: 1px solid var(--c-line); background: var(--c-panel); }
.ed-panel section { display: grid; gap: var(--sp-3); }
.ed-panel h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.ed-panel h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--c-text-soft); }
.group { display: grid; gap: var(--sp-2); padding-top: 14px; border-top: 1px solid var(--c-line); }
.group.first { padding-top: 0; border-top: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--c-text-soft); font-size: var(--fs-xs); }
.tpl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.tpl-card { display: grid; gap: 0; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: var(--r-btn); background: var(--c-bg-sunken); }
.tpl-card .mini { border-radius: 0; }
.tpl-card span { padding: 4px 2px; color: var(--c-muted); font-size: var(--fs-xs); text-align: center; }
.tpl-card.on { border-color: var(--c-brand-2); }
.tpl-card.on span { color: #fff; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 22px; height: 22px; padding: 0; border: 2px solid var(--c-line-strong); border-radius: 50%; }
.swatch[aria-pressed="true"], .swatch:hover { border-color: #fff; box-shadow: 0 0 0 2px var(--c-brand-2); }
.channel-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.avatar { width: 44px; height: 44px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: var(--c-surface); object-fit: cover; }
.channel-fields { display: grid; gap: 6px; font-size: var(--fs-xs); }
.comment-list { display: grid; gap: 6px; }
.comment-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.comment-time { color: var(--c-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.subtitle-list { display: grid; gap: 2px; }
.subtitle-row { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-2); padding: 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text-soft); font-size: var(--fs-sm); text-align: left; }
.subtitle-row:hover { background: var(--c-surface-hover); }
.subtitle-row time { color: var(--c-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.range-label { margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.range-bar { position: relative; height: 34px; border-radius: var(--r-sm); background: var(--c-track-source); }
.range-segment { position: absolute; top: 4px; bottom: 4px; min-width: 18px; border: 1px solid var(--c-brand-line); border-radius: 6px; background: rgba(255, 122, 61, .22); }
.range-handle { position: absolute; top: -1px; bottom: -1px; width: 10px; padding: 0; border: 0; background: var(--c-brand-2); cursor: ew-resize; touch-action: none; }
.range-handle.start { left: -1px; border-radius: 6px 2px 2px 6px; }
.range-handle.end { right: -1px; border-radius: 2px 6px 6px 2px; }
.range-bounds { display: flex; justify-content: space-between; color: var(--c-dim); font-size: var(--fs-xs); }
.notice { margin: 0; color: var(--c-warning); font-size: var(--fs-xs); }
.ai-total { color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.ai-reason { display: grid; gap: var(--sp-3); }
.ai-why { margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.6; }

/* 캔버스 슬롯(레거시 플레이어와 같은 구조 — 글자는 캔버스가 그리고 DOM 은 잡는 자리만 맡는다) */
.player-screen { position: absolute; inset: 0; overflow: hidden; background: #070707; container-type: inline-size; }
.player-copy { position: absolute; top: 16%; left: 8%; right: 8%; z-index: 2; display: grid; place-items: center; text-align: center; }
.caption { width: 100%; padding: 0; font-size: 7.7778cqw; font-weight: 850; line-height: 1.1; text-align: center; word-break: keep-all; }
.player-media { position: absolute; top: 35%; left: 0; right: 0; height: 30%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg, #b58c73, #556b75 52%, #11171d); color: rgba(255, 255, 255, .72); font-size: var(--fs-xs); }
.source-preview { width: 100%; height: 100%; border: 0; background: #000; }
.player-media.has-preview > span { display: none; }
.player-overlay { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.player-channel { position: absolute; bottom: 17%; left: 0; right: 0; text-align: center; font-weight: 700; }
.player-title { position: absolute; bottom: 11%; left: 7%; right: 7%; text-align: center; font-weight: 700; word-break: keep-all; }
.player-comments { position: absolute; display: flex; align-items: center; overflow: hidden; }
.player-hook { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; overflow: hidden; word-break: keep-all; }
.canvas-preview #captionPreview { color: transparent; text-shadow: none; }
.canvas-preview #playerTitle, .canvas-preview #playerChannel, .canvas-preview #playerComments { visibility: hidden; }
.canvas-preview #playerHook { color: transparent !important; background: transparent !important; }
.canvas-hit-slot { position: absolute; z-index: 4; }
.player-screen.layout-editing .source-preview { pointer-events: none; }
.player-screen.layout-editing .canvas-edit-target { outline: 1.5px dashed transparent; outline-offset: -2px; cursor: grab; touch-action: none; }
.player-screen.layout-editing .canvas-edit-target:hover, .player-screen.layout-editing .canvas-edit-target:focus-visible { outline-color: rgba(255, 122, 61, .9); }
.canvas-resize-handle { display: none; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; padding: 0; border: 1px solid #fff; border-radius: 3px; background: var(--c-brand-2); cursor: nwse-resize; }
.player-screen.layout-editing .canvas-edit-target:hover > .canvas-resize-handle, .player-screen.layout-editing .canvas-edit-target:focus-within > .canvas-resize-handle { display: block; }
.slot-text-input { position: absolute; z-index: 6; min-height: 26px; padding: 2px 6px; border: 2px solid var(--c-brand-2); border-radius: 4px; background: rgba(8, 10, 14, .86); color: #fff; font-size: var(--fs-sm); text-align: center; }
.rendered-preview { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-screen.showing-result > :not(.rendered-preview) { visibility: hidden; }

/* 타임라인 */
.ed-timeline { display: grid; grid-template-rows: 38px auto minmax(0, 1fr); min-height: 0; border-top: 1px solid var(--c-line); background: var(--c-bg-sunken); }
.tl-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 14px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-text-soft); }
.tl-hint, #timelineDuration { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tl-body { display: grid; grid-template-columns: 86px minmax(0, 1fr); min-height: 0; }
.tl-labels { border-right: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-xs); }
.tl-label { display: flex; align-items: center; height: 38px; padding: 0 10px; }
.tl-label--source { height: 42px; }
.tl-label--ruler { height: 22px; }
.tl-lanes { position: relative; min-width: 0; padding-right: 14px; }
.tl-source-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; align-items: center; gap: 6px; height: 42px; border-bottom: 1px solid var(--c-line); }
.tl-edge { color: var(--c-dim); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center; }
.tl-source { position: relative; height: 30px; border-radius: 6px; background: var(--c-track-source); }
.tl-clip { position: absolute; height: 12px; min-width: 6px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; background: rgba(255, 255, 255, .16); color: transparent; font-size: 0; }
.tl-clip.on { border-color: var(--c-brand-2); background: var(--c-brand-2); }
.tl-clip:hover { border-color: #fff; }
.tl-scroll { margin-left: 46px; margin-right: 54px; overflow-x: auto; overflow-y: hidden; }
.tl-local { position: relative; min-width: 100%; cursor: pointer; }
.tl-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--c-line); color: var(--c-dim); font-size: var(--fs-xs); }
.tl-tick { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-tick:first-child { transform: none; }
.tl-lane { position: relative; height: 38px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.tl-block { position: absolute; top: 7px; height: 24px; overflow: hidden; padding: 0 5px; border-radius: 5px; color: var(--c-text); font-size: var(--fs-xs); line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.tl-block--subtitle { border: 1px solid rgba(139, 108, 255, .6); background: rgba(139, 108, 255, .25); }
.tl-block--text { border: 1px solid rgba(255, 154, 61, .6); background: rgba(255, 154, 61, .22); }
.tl-block--text.tl-block--row2 { top: 20px; height: 16px; line-height: 14px; }
.tl-block--comment { border: 1px solid rgba(63, 201, 138, .6); background: rgba(63, 201, 138, .2); }
.tl-head { position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px; margin-left: -1px; background: var(--c-playhead); pointer-events: none; }
.tl-head::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--c-playhead); }
.ed-mobile-note { display: none; }

/* 타임라인 편집(C단계) */
.tl-tools { display: flex; align-items: center; gap: 4px; }
.tl-tools .icon-btn { width: 26px; height: 26px; }
.tl-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--c-line); }
.tl-notice { padding: 4px 14px; border-bottom: 1px solid var(--c-line); }
.tl-body { overflow-y: auto; }
.tl-window-lock { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 4px, transparent 4px 8px); pointer-events: none; }
.tl-clip.on { height: 22px; cursor: grab; touch-action: none; }
.tl-grip { position: absolute; top: -2px; bottom: -2px; width: 10px; padding: 0; border: 0; border-radius: 3px; background: #fff; cursor: ew-resize; touch-action: none; }
.tl-grip--start { left: -6px; }
.tl-grip--end { right: -6px; }
.tl-grip:focus-visible { outline: 2px solid var(--c-brand-2); }
.tl-block { cursor: grab; touch-action: none; user-select: none; }
.tl-block.sel { outline: 2px solid #fff; outline-offset: -1px; }
.tl-block.is-cut { opacity: .35; text-decoration: line-through; }
.tl-edge-grip { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.tl-edge-grip--start { left: 0; }
.tl-edge-grip--end { right: 0; }
.tl-cuts { position: absolute; top: 22px; right: 0; bottom: 0; left: 0; pointer-events: none; }
.tl-cut { position: absolute; top: 0; bottom: 0; border-right: 1px solid rgba(255, 107, 115, .6); border-left: 1px solid rgba(255, 107, 115, .6); background: repeating-linear-gradient(135deg, rgba(255, 107, 115, .28) 0 5px, rgba(255, 107, 115, .08) 5px 10px); pointer-events: auto; cursor: pointer; }
.tl-inline-input { position: absolute; top: 5px; z-index: 5; height: 28px; min-width: 120px; padding: 0 6px; border: 2px solid var(--c-track-subtitle); border-radius: 5px; background: #111; color: #fff; font-size: var(--fs-xs); }
.script-line.sel { box-shadow: inset 0 0 0 1px var(--c-brand-2); }
.script-line.is-cut span { color: var(--c-dim); text-decoration: line-through; }
.script-line .script-restore { margin-left: 6px; padding: 0 6px; border: 1px solid var(--c-line); border-radius: 4px; background: transparent; color: var(--c-text-soft); font-size: var(--fs-xs); text-decoration: none; }