@font-face{font-family:"ELT Gmarket Sans";src:url("/static/fonts/GmarketSansTTFBold.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Gmarket Sans";src:url("/static/fonts/GmarketSansTTFBold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Noto Sans KR";src:url("/static/fonts/NotoSansKR-Regular.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Noto Sans KR";src:url("/static/fonts/NotoSansKR-Bold.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Noto Serif KR";src:url("/static/fonts/NotoSerifKR-Regular.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Noto Serif KR";src:url("/static/fonts/NotoSerifKR-Bold.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Nanum Gothic";src:url("/static/fonts/NanumGothic-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Nanum Gothic";src:url("/static/fonts/NanumGothic-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Pretendard";src:url("/static/fonts/Pretendard-Medium.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Pretendard";src:url("/static/fonts/Pretendard-Bold.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Black Han Sans";src:url("/static/fonts/BlackHanSans-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Black Han Sans";src:url("/static/fonts/BlackHanSans-Regular.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Nanum Pen Script";src:url("/static/fonts/NanumPenScript-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Nanum Pen Script";src:url("/static/fonts/NanumPenScript-Regular.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Jua";src:url("/static/fonts/Jua-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Jua";src:url("/static/fonts/Jua-Regular.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT BM Hanna Pro";src:url("/static/fonts/BMHANNAPro.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT BM Hanna Pro";src:url("/static/fonts/BMHANNAPro.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT Cafe24 Ssurround";src:url("/static/fonts/Cafe24Ssurround-v2.0.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT Cafe24 Ssurround";src:url("/static/fonts/Cafe24Ssurround-v2.0.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ELT SB Aggro";src:url("/static/fonts/SB_Aggro_M.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ELT SB Aggro";src:url("/static/fonts/SB_Aggro_B.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.caption-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.caption-presets{margin-bottom:18px!important}
.caption-control{border:0;padding:0;margin:0;min-width:0}
.caption-control legend{font-size:11px;font-weight:650;color:var(--muted,#6b7280);padding:0;margin-bottom:6px}
.caption-chips{display:flex;flex-wrap:wrap;gap:5px}
.caption-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;border:1px solid var(--line,#dce1e7);border-radius:8px;background:var(--surface,#fff);padding:5px 9px;font:inherit;font-size:11px;line-height:1.3;color:var(--text,#252a34);cursor:pointer}
.caption-chip:hover{border-color:var(--accent,#747cff)}
.caption-chip.selected{color:var(--accent,#555bea);border-color:var(--accent,#747cff);background:color-mix(in srgb,var(--accent,#747cff) 10%,white);font-weight:650}
.caption-chip:focus-visible{outline:2px solid var(--accent,#747cff);outline-offset:2px}
.caption-chip:disabled{cursor:default;opacity:.65}
.caption-size{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.caption-size-range{flex:1;min-width:0;accent-color:var(--accent,#747cff);cursor:pointer}
.caption-size-number{width:64px;flex:none;min-height:30px;padding:4px 8px;font-size:12px;text-align:center}
.caption-color-custom{position:relative;cursor:pointer}
.caption-color-custom input[type=color]{width:18px;height:18px;padding:0;border:1px solid rgba(0,0,0,.2);border-radius:50%;background:none;cursor:pointer;flex:none}
.caption-color-custom input[type=color]::-webkit-color-swatch-wrapper{padding:0}.caption-color-custom input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.caption-color-custom input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.caption-swatch{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:none}
@media(max-width:600px){.caption-controls{grid-template-columns:1fr}}
.caption-safe-guide{position:absolute;border:1px dashed #68e6bd;box-shadow:0 0 0 1000px #1018203b;pointer-events:none;z-index:3;border-radius:2px}
.caption-safe-guide[hidden]{display:none}.caption-safe-guide span{position:absolute;top:4px;left:5px;font:9px/1.4 sans-serif;color:#fff;background:#164438ba;padding:2px 4px;border-radius:3px}
.caption-guide-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:11px;margin:12px 0;color:#596b82}

/* 미리보기 자막 끌어서 옮기기 (⑥ 자막) — 끄는 동안 테두리로 표시 */
.svsubt[data-cp-movable]{cursor:grab;touch-action:none;user-select:none}
.svsubt[data-cp-movable]:hover{outline:1px dashed #ffffffb3;outline-offset:3px}
.svsubt.cp-dragging{cursor:grabbing;outline:1.5px solid #68e6bd;outline-offset:3px}

/* 자막 템플릿 타일 — 캡컷 스타일 메뉴처럼 견본 자막이 보임 (caption-controls.js 가 같은 엔진으로 그림) */
.caption-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px 8px}
.caption-tpl{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0;border:0;background:none;font:inherit;color:var(--text,#252a34);text-align:center;cursor:pointer}
.caption-tpl-stage{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.caption-tpl:hover .caption-tpl-stage{outline-color:color-mix(in srgb,var(--accent,#747cff) 45%,transparent)}
.caption-tpl.selected .caption-tpl-stage{outline-color:var(--accent,#747cff)}
.caption-tpl:focus-visible{outline:none}.caption-tpl:focus-visible .caption-tpl-stage{outline-color:var(--accent,#747cff)}
.caption-tpl-text{pointer-events:none}
.caption-tpl-name{font-size:11px;line-height:1.3;color:var(--muted,#596b82)}
.caption-tpl.selected .caption-tpl-name{color:var(--accent,#555bea);font-weight:650}
.caption-tpl:disabled{cursor:default;opacity:.75}
.caption-detail-title{font-size:12px;font-weight:650;color:var(--text,#252a34);margin:4px 0 10px}

/* 🎞 편집 타임라인 (template.html cpTlInner) — 위에서부터 영상 · 자막 · 템플릿 · 효과음 · 나레이션 줄 (프리미어처럼). 막대를 끌어 원본 구간·시간·시점 조정 */
.cptl{margin-bottom:14px;padding:14px 16px}
.cptl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cptl-head>b{font-size:14.5px}
.cptl-save{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
#edSaveStatus{font-variant-numeric:tabular-nums}#edSaveStatus.dirty{color:#c2410c;font-weight:650}
.cptl-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.cptl-ai{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.cptl-ai:empty{display:none}
.cptl .btn.ai{background:linear-gradient(135deg,#f3edff,#fff0f6);border-color:#c4b5fd;color:#5b21b6;font-weight:700}
.cptl .btn.ai:disabled{opacity:.75}
.cptl-tools{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cptl-sfx-add{max-width:190px;font-size:12px;padding-top:5px;padding-bottom:5px;border-style:dashed}
.cptl-frame{display:grid;grid-template-columns:90px minmax(0,1fr);border:1px solid #e6dcf0;border-radius:12px;background:#fff;overflow:hidden}
.cptl-labels{display:grid;grid-template-rows:26px 30px 84px 50px 34px 46px 46px;border-right:1px solid #eee6f5;background:#faf7fc}
.cptl-labels span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#7a6a88;white-space:nowrap}
.cptl-labels span:nth-child(n+2){border-top:1px solid #f1ebf6}
.cptl-scroll{overflow-x:auto;overflow-y:hidden;min-width:0}
.cptl-body{position:relative;user-select:none;-webkit-user-select:none}
.cptl-ruler{position:relative;height:26px;border-bottom:1px solid #eee6f5;cursor:pointer;touch-action:none;background:#fcfbfe}
.cptl-ruler span{position:absolute;top:5px;padding-left:3px;border-left:1px solid #ddd2ea;font-size:10px;line-height:15px;color:#9a8aa8;font-variant-numeric:tabular-nums;white-space:nowrap}
.cptl-row,.cptl-ruler{box-sizing:border-box}.cptl-row{position:relative}
.cptl-scenes{height:84px;border-bottom:1px solid #f1ebf6;cursor:pointer;background:#fbf9fd}
/* 🏷 씬 분류 줄 — ③ 아웃라인의 대분류 색(--rg-*, studio-planning.css) · 스토리 등 색이 없는 분류는 회색 */
.cptl-kinds{height:30px;border-bottom:1px solid #f1ebf6;background:#fff}
.cptl-kind{position:absolute;top:4px;bottom:4px;box-sizing:border-box;display:flex;align-items:center;gap:4px;min-width:0;padding:0 6px;border:1px solid var(--rg-color,#cbd5e1);border-radius:6px;background:var(--rg-bg,#f8fafc);color:var(--rg-color,#475569);line-height:1.2;overflow:hidden;cursor:pointer}
.cptl-kind b,.cptl-kind small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cptl-kind b{flex:none;max-width:100%;font-size:11px;font-weight:700}.cptl-kind small{min-width:0;font-size:11px;font-weight:600}   /* 대분류 · 세부를 한 줄로 */
.cptl-kind b+small::before{content:"·";margin-right:4px}
.cptl-kind[data-role-group="hook"]{--rg-color:var(--rg-hook);--rg-bg:var(--rg-hook-bg)}.cptl-kind[data-role-group="ba"]{--rg-color:var(--rg-ba);--rg-bg:var(--rg-ba-bg)}.cptl-kind[data-role-group="trust"]{--rg-color:var(--rg-trust);--rg-bg:var(--rg-trust-bg)}
.cptl-kind[data-role-group="cg"]{--rg-color:var(--rg-cg);--rg-bg:var(--rg-cg-bg)}.cptl-kind[data-role-group="product"]{--rg-color:var(--rg-product);--rg-bg:var(--rg-product-bg)}.cptl-kind[data-role-group="fomo"]{--rg-color:var(--rg-fomo);--rg-bg:var(--rg-fomo-bg)}
.cptl-kind.picked{box-shadow:inset 0 0 0 1px currentColor}
.cptl-caps{height:50px;cursor:pointer;border-bottom:1px solid #f1ebf6}
.cptl-scene{position:absolute;top:5px;bottom:5px;box-sizing:border-box;border:1px solid #e2d6ee;border-radius:8px;background:#efe9f5 center/cover no-repeat;overflow:hidden}
.cptl-scene b{position:absolute;left:4px;top:4px;font-size:10.5px;font-weight:700;line-height:16px;color:#4b3a5b;background:#ffffffe0;border-radius:4px;padding:0 5px;white-space:nowrap}
/* 영상 클립 — 썸네일을 필름처럼 이어 붙이고, 아래 막대는 원본 중 쓰는 구간 */
.cptl-clip{padding:0;margin:0;font:inherit;text-align:left;border:2px solid #cdbde3;background-color:#e9e2f3;background-size:auto 100%;background-repeat:repeat-x;background-position:left center;cursor:grab;touch-action:none}
.cptl-clip:hover{border-color:#a98bd6}
.cptl-clip:focus-visible{outline:2px solid #7c3aed;outline-offset:1px}
.cptl-clip.empty{cursor:default;background:repeating-linear-gradient(135deg,#f4f0f8 0 8px,#ebe4f2 8px 16px)}
.cptl-clip-src{position:absolute;left:4px;bottom:11px;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:15px;color:#fff;background:#1f1630b8;border-radius:4px;padding:0 5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cptl-clip-tags{position:absolute;left:4px;top:24px;max-width:calc(100% - 8px);display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-style:normal}
.cptl-clip-tags>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:15px;color:#5b21b6;background:#f5f0ffe8;border-radius:4px;padding:0 5px;white-space:nowrap}
.cptl-clip-tags>.cptl-zoom-off{cursor:pointer}.cptl-clip-tags>.cptl-zoom-off:hover{background:#ddd6fe;color:#4c1d95}   /* 배속·확대 표시는 이름 아래 한 줄씩 — 좁은 클립에서도 보이고 눌림 */
.cptl-clip-range{position:absolute;left:4px;right:4px;bottom:3px;height:5px;border-radius:3px;background:#ffffffa6;overflow:hidden}
.cptl-clip-range i{position:absolute;top:0;bottom:0;border-radius:3px;background:#7c3aed}
.cptl-clip.is-dragging{cursor:grabbing;z-index:3;overflow:visible;border-color:#7c3aed}
.cptl-src-ghost{position:absolute;top:2px;bottom:2px;box-sizing:border-box;border:2px dashed #7c3aed;border-radius:8px;background:#7c3aed12;pointer-events:none;z-index:2}
.cptl-src-ghost span{position:absolute;right:6px;bottom:2px;font-size:10px;font-weight:650;color:#6d28d9;white-space:nowrap}
/* 🔊 효과음 — 왼쪽 끝 = 울리는 순간 */
.cptl-sfxrow{height:46px;border-bottom:1px solid #f1ebf6;cursor:pointer;background:#fffaf4}
.cptl-sfx{position:absolute;top:8px;bottom:8px;box-sizing:border-box;display:flex;align-items:center;min-width:0;padding:0 6px;border:1px solid #f3b874;border-left:3px solid #ea7a1a;border-radius:6px;background:#fff1df;color:#8a4210;font:inherit;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;cursor:grab;touch-action:none}
.cptl-sfx span{overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cptl-sfx:hover{border-color:#ea7a1a}
.cptl-sfx:focus-visible{outline:2px solid #ea7a1a;outline-offset:1px}
.cptl-sfx.sel{box-shadow:0 0 0 2px #ea7a1a;background:#ffe4c2}
.cptl-sfx.bad{opacity:.55;border-style:dashed}
.cptl-sfx.is-dragging{cursor:grabbing;z-index:3;overflow:visible;box-shadow:0 4px 14px #9a4b1233}
.cptl-clip.is-dragging[data-time]::after,.cptl-sfx.is-dragging[data-time]::after{content:attr(data-time);position:absolute;left:0;bottom:calc(100% + 3px);padding:1px 6px;border-radius:4px;background:#2f2340;color:#fff;font-size:10.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;z-index:5}
/* ✂️ 편집점 손잡이 — 클립 양 끝을 끌면 옆 씬과 경계가 같이 움직임 (프리미어 롤링 편집) */
.cptl-scene b em{font-style:normal;font-weight:600;color:#7c6c87;margin-left:2px}
.cptl-trim{position:absolute;top:0;bottom:0;width:10px;z-index:2;cursor:col-resize;touch-action:none}
.cptl-trim.start{left:-2px}.cptl-trim.end{right:-2px}
.cptl-trim::after{content:"";position:absolute;top:18%;bottom:18%;left:3px;width:4px;border-radius:2px;background:#7c3aed;opacity:0;transition:opacity .12s}
.cptl-clip:hover .cptl-trim::after,.cptl-trim.is-dragging::after{opacity:.9}
/* 고른 클립: 테두리 + 양끝 굵은 손잡이 — 안쪽으로 끌면 그 씬 영상이 잘림 */
.cptl-clip.picked{border-color:#7c3aed;box-shadow:0 0 0 2px #7c3aed59}
.cptl-clip.picked .cptl-trim{width:16px}.cptl-clip.picked .cptl-trim.start{left:-2px}.cptl-clip.picked .cptl-trim.end{right:-2px}
.cptl-clip.picked .cptl-trim::after{opacity:1;top:0;bottom:0;left:2px;width:8px;border-radius:3px;background:#7c3aed;box-shadow:inset 3px 0 0 #fff6,inset -3px 0 0 #fff6}
.cptl-clip.trimming{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b55}
.cptl-edit{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#f59e0b;pointer-events:none;z-index:6}
.cptl-edit[data-time]::after{content:attr(data-time);position:absolute;top:2px;left:6px;padding:2px 7px;border-radius:5px;background:#7c2d12;color:#fff;font-size:11px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 🔊 라이브러리에서 끌어 오는 효과음이 놓일 자리 */
.cptl.dropping-sfx .cptl-sfxrow{background:#ffedd5}
.cptl-drop{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#ea7a1a;pointer-events:none;z-index:6}
.cptl-drop span{position:absolute;bottom:52px;left:6px;padding:2px 7px;border-radius:5px;background:#9a4b12;color:#fff;font-size:11px;font-weight:650;white-space:nowrap}
.cptl-sfx.cptl-ghost{position:fixed;top:-200px;left:0;bottom:auto;height:28px;width:auto;padding:0 10px;font-size:12px;box-shadow:0 4px 12px #9a4b1240}
/* 트랙 이름 칸 — 💬 자막 보이기 · 🔈 효과음·나레이션 미리 듣기 끄기 */
.cptl-labels span{gap:2px}
.cptl-eye{border:0;background:transparent;padding:0 2px;font-size:12px;line-height:1;cursor:pointer;border-radius:4px}
.cptl-eye:hover{background:#ede9fe}.cptl-eye.off{opacity:.9}
.cptl-hist{display:inline-flex;gap:2px}
.cptl .btn.cptl-place{background:#fff7ed;border-color:#fdba74;color:#9a3412;font-weight:700}
/* 🔊 효과음 버튼 — 소리 이름만 얇게, 자막 템플릿 오른쪽 (template.html edSfxLibHtml) */
#cpChoices{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:18px;align-items:start}
#cpChoices>*{grid-column:1/-1}
#cpChoices>.caption-presets{grid-column:1;grid-row:2}
#cpChoices>.ed-lib{grid-column:2;grid-row:2;min-width:0}
#cpChoices>.cp-sel-banner{grid-row:1}#cpChoices>.caption-detail-title{grid-row:3}#cpChoices>.caption-controls{grid-row:4}   /* 줄을 정해 둠 — 위 '선택한 구간' 줄이 없을 때도 순서 그대로 */
.ed-lib-chips{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(var(--sfx-cols,6) * 59px)}   /* 효과음은 한 줄로 길게 말고 3줄 안팎 (줄 폭을 버튼 6개쯤으로 — 좁은 화면에서는 더 꺾임) */
.ed-sfx-chip{padding:3px 10px;border:1px solid #f3b874;border-radius:999px;background:#fff3e3;color:#8a4210;font:inherit;font-size:12px;font-weight:700;line-height:18px;cursor:grab;white-space:nowrap}
.ed-sfx-chip:hover{background:#ffe4c2;border-color:#ea7a1a}
.ed-sfx-chip:focus-visible{outline:2px solid #ea7a1a;outline-offset:1px}
.ed-sfx-chip:not([draggable]){cursor:pointer}
/* 고른 효과음의 ✕ (빼기) */
.cptl-sfx-x{margin-left:auto;padding:0 2px 0 6px;font-size:11px;color:#9a3412;cursor:pointer}
.cptl-sfx-x:hover{color:#dc2626}
.cptl-sfx.sel{overflow:visible}
/* ✏️ 미리보기 자막 고치기 입력칸 (template.html cpSubEdit) */
.cp-sub-edit{position:absolute;left:5%;right:5%;width:90%;box-sizing:border-box;transform:translateY(-50%);z-index:5;padding:6px 8px;border:2px solid #7c3aed;border-radius:8px;background:#fffffff2;color:#1f1630;font:inherit;font-size:14px;font-weight:700;text-align:center;box-shadow:0 4px 16px #0006}
#svSub[data-cp-movable]{cursor:text}
@media(max-width:900px){#cpChoices>.caption-presets,#cpChoices>.ed-lib{grid-column:1/-1}#cpChoices>.ed-lib{grid-row:3}#cpChoices>.caption-detail-title{grid-row:4}#cpChoices>.caption-controls{grid-row:5}}
/* 🎙 나레이션 파형 */
.cptl-voice{height:46px;background:#f6f8fe}
.cptl-wave{position:absolute;left:0;top:3px;height:40px;display:block;pointer-events:none}
.cptl-cap{position:absolute;top:6px;bottom:6px;box-sizing:border-box;display:flex;align-items:center;min-width:0;padding:0 8px;border:1px solid #d9c2ee;border-radius:6px;background:#f6effc;color:#3d2c4d;font:inherit;font-size:12px;text-align:left;cursor:grab;overflow:hidden;touch-action:none}
.cptl-cap:hover{border-color:#ae85d3}
.cptl-cap:focus-visible{outline:2px solid #9d6fca;outline-offset:1px}
.cptl-cap.now{background:#ecdcfa;border-color:#9d6fca}
.cptl-cap.moved{border-color:#e0a440;background:#fff6e5}.cptl-cap.moved.now{background:#ffeac2}
.cptl-cap.sel{box-shadow:0 0 0 2px #7c3aed;border-color:#7c3aed}
.cptl-cap.is-dragging{cursor:grabbing;z-index:3;overflow:visible;box-shadow:0 4px 14px #5b3a7a33}
.cptl-cap.is-dragging[data-time]::after{content:attr(data-time);position:absolute;left:0;bottom:calc(100% + 3px);padding:1px 5px;border-radius:4px;background:#2f2340;color:#fff;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.cptl-txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.cptl-txt em{font-style:normal;font-weight:700;color:#b7791f}.cptl-txt i{font-style:normal;color:#a596b0}
.cptl-grip{position:absolute;top:0;bottom:0;left:0;width:7px;cursor:ew-resize}
.cptl-grip.end{left:auto;right:0}
.cptl-grip::after{content:"";position:absolute;top:25%;bottom:25%;left:2px;width:3px;border-radius:2px;background:#ae85d3;opacity:0;transition:opacity .15s}
.cptl-cap:hover .cptl-grip::after,.cptl-cap.is-dragging .cptl-grip::after{opacity:.85}
.cptl-play{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#e5484d;pointer-events:none;z-index:4}
.cptl-play::before{content:"";position:absolute;top:0;left:-4px;border:5px solid transparent;border-top:6px solid #e5484d;border-bottom:0}
.cptl-empty{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;color:#a596b0;white-space:nowrap}
/* 템플릿 줄 — 같은 템플릿이 이어지는 자막끼리 막대 하나. 누르면 그 구간 선택 */
.cptl-tpls{height:34px;cursor:pointer;border-bottom:1px solid #f1ebf6}
.cptl-tpl{position:absolute;top:5px;bottom:5px;box-sizing:border-box;display:flex;align-items:center;gap:4px;padding:0 7px;border:1px solid var(--tpl-line);border-radius:6px;background:var(--tpl-bg);color:var(--tpl-ink);font-size:10.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;--tpl-bg:#f1f5f9;--tpl-line:#cbd5e1;--tpl-ink:#475569}
.cptl-tpl small{font-size:9px;font-weight:600;opacity:.75}
.cptl-tpl.base{border-style:dashed;background:#fafafa}
/* 💬 다른 사람 대사 — 자동 흰 박스 (자막 블록·템플릿 줄 모두 흰 바탕) */
.cptl-tpl.talk{--tpl-bg:#fff;--tpl-line:#94a3b8;--tpl-ink:#334155;cursor:default}
.cptl-cap.talk{background:#fff;border-color:#94a3b8}.cptl-cap.talk.now{background:#f1f5f9}
.cptl-tpl[data-tone="0"]{--tpl-bg:#e0f2fe;--tpl-line:#7dd3fc;--tpl-ink:#0369a1}.cptl-tpl[data-tone="1"]{--tpl-bg:#fce7f3;--tpl-line:#f9a8d4;--tpl-ink:#be185d}
.cptl-tpl[data-tone="2"]{--tpl-bg:#ede9fe;--tpl-line:#c4b5fd;--tpl-ink:#6d28d9}.cptl-tpl[data-tone="3"]{--tpl-bg:#dcfce7;--tpl-line:#86efac;--tpl-ink:#15803d}
.cptl-tpl[data-tone="4"]{--tpl-bg:#ffedd5;--tpl-line:#fdba74;--tpl-ink:#c2410c}.cptl-tpl[data-tone="5"]{--tpl-bg:#fef9c3;--tpl-line:#fde047;--tpl-ink:#a16207}
.cptl-tpl.sel{box-shadow:0 0 0 2px #7c3aed}
.cptl-tpl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.cptl-tpl .cptl-grip::after{background:var(--tpl-ink)}
.cptl-tpl:not(.base){z-index:1;cursor:grab}
.cptl-tpl:hover .cptl-grip::after,.cptl-tpl.is-dragging .cptl-grip::after{opacity:.85}
.cptl-tpl.is-dragging{cursor:grabbing;z-index:3;overflow:visible;box-shadow:0 4px 14px #5b3a7a33}
/* 템플릿 타일을 끌 때 손에 붙는 모양 — 타임라인 템플릿 막대와 같은 길쭉한 둥근 직사각형 */
.cptl-tpl.cptl-ghost{position:fixed;top:-200px;left:0;bottom:auto;height:26px;width:132px;font-size:11.5px;box-shadow:0 4px 12px #5b3a7a40}
.cptl-tpl.is-dragging[data-time]::after{content:attr(data-time);position:absolute;left:0;bottom:calc(100% + 3px);padding:1px 5px;border-radius:4px;background:#2f2340;color:#fff;font-size:10px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
/* 템플릿 타일을 끌어 오는 중: 놓을 수 있는 줄을 살짝 칠하고, 놓으면 바뀔 자막을 표시 */
.caption-tpl[draggable="true"]{cursor:grab}
.cptl.dropping .cptl-caps,.cptl.dropping .cptl-tpls{background:#faf5ff}
.cptl-cap.drop{box-shadow:0 0 0 2px #f59e0b;background:#fff4dc}
.cp-sel-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;border:1px solid #c4b5fd;border-radius:10px;background:#f5f3ff;font-size:12px;color:#4c1d95}
.cp-sel-tools{display:flex;gap:6px;margin-left:auto}
.edit-main{min-width:0}
@media(max-width:600px){.cptl-frame{grid-template-columns:54px minmax(0,1fr)}.cptl-labels span{font-size:10px}.cptl-save{margin-left:0}}