:root{--bg: #0f1115;--panel: #161a22;--panel-2: #1d2230;--border: #2a2f3d;--text: #e7eaf0;--muted: #8a93a6;--accent: #4f8cff;--accent-2: #6c5cff;--danger: #ff5470;--video: #2c5fa0;--audio: #2c8060}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Pretendard,Apple SD Gothic Neo,Noto Sans KR,sans-serif;color:var(--text);background:var(--bg);overflow:hidden;font-size:13px;-webkit-user-select:none;user-select:none}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px}button:hover{background:#283045}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;font-weight:600}button.on{background:var(--accent);border-color:transparent}button.icon-btn{min-width:32px;height:28px;padding:0 6px;font-size:14px;display:inline-flex;align-items:center;justify-content:center}button.auto-edit-cta{background:linear-gradient(135deg,#f7c948,#ff8a50);border-color:transparent;color:#1a1320;font-weight:700;font-size:13px;padding:6px 14px;height:30px;box-shadow:0 0 12px #f7c94859;letter-spacing:.02em}button.auto-edit-cta:hover{filter:brightness(1.08);box-shadow:0 0 16px #f7c9488c}button.cta-large{font-size:14px;padding:10px 20px;font-weight:700;letter-spacing:.02em}.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}button.preset-chip{padding:6px 10px;font-size:12px;border-radius:14px;background:#0c0e14;border:1px solid var(--border);cursor:pointer}button.preset-chip:hover{background:#1a1d28;border-color:var(--accent)}button.preset-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;font-weight:600}.eta-hint{font-size:12px;color:var(--muted);margin-right:auto;align-self:center}input[type=number],input[type=text],select{background:#0c0e14;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:12px}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:700;font-size:16px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.topbar-controls{display:flex;gap:12px;flex:1}.topbar-controls label{display:flex;gap:6px;align-items:center;color:var(--muted)}.topbar-controls .custom-res input{width:70px;text-align:right}.topbar-controls .custom-res span{color:var(--muted)}.main{display:grid;grid-template-columns:260px 1fr 280px;flex:1;min-height:0}.sidebar-left,.sidebar-right{background:var(--panel);border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.sidebar-right{border-right:0;border-left:1px solid var(--border)}.center{display:flex;flex-direction:column;min-width:0;min-height:0}.media-library{display:flex;flex-direction:column;height:100%}.media-library.drag-over{outline:2px dashed var(--accent);outline-offset:-8px}.ml-header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:600}.ml-header span{flex:1}.ml-list{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:4px}.ml-empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:12px}.ml-item{display:grid;grid-template-columns:60px 1fr auto;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:4px;cursor:grab}.ml-item:active{cursor:grabbing}.ml-item img{width:60px;height:34px;object-fit:cover;border-radius:2px;background:#000}.ml-thumb-placeholder{width:60px;height:34px;background:#000;display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:2px}.ml-meta{min-width:0}.ml-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-sub{color:var(--muted);font-size:11px}.ml-remove{width:22px;height:22px;padding:0;font-size:14px}.preview{flex:1;background:#0a0c12;display:flex;flex-direction:column;min-height:0}.preview-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;min-height:0}.preview-stage canvas{max-width:100%;max-height:100%;background:#000;border-radius:4px;box-shadow:0 4px 24px #00000080}.canvas-overlay-box{position:fixed;pointer-events:none;z-index:50;box-sizing:border-box;outline:2px solid rgba(79,140,255,.85);transform-origin:center center}.canvas-overlay-box .overlay-body{position:absolute;top:0;right:0;bottom:0;left:0;cursor:move;pointer-events:auto}.canvas-overlay-box .overlay-corner{position:absolute;width:12px;height:12px;background:#4f8cff;border:2px solid #fff;border-radius:2px;pointer-events:auto;z-index:1}.canvas-overlay-box .overlay-corner.tl{top:-7px;left:-7px;cursor:nwse-resize}.canvas-overlay-box .overlay-corner.tr{top:-7px;right:-7px;cursor:nesw-resize}.canvas-overlay-box .overlay-corner.bl{bottom:-7px;left:-7px;cursor:nesw-resize}.canvas-overlay-box .overlay-corner.br{bottom:-7px;right:-7px;cursor:nwse-resize}.canvas-overlay-box .overlay-rotate{position:absolute;top:-32px;left:50%;width:14px;height:14px;margin-left:-7px;background:#4ee07a;border:2px solid #fff;border-radius:50%;pointer-events:auto;cursor:grab;z-index:1}.canvas-overlay-box .overlay-rotate:before{content:"";position:absolute;left:50%;top:14px;width:2px;height:18px;margin-left:-1px;background:#4f8cffd9}.preview-controls{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--border)}.preview-controls .time{color:var(--muted);font-variant-numeric:tabular-nums;min-width:130px;text-align:right;font-size:12px}.preview-controls input[type=range]{accent-color:var(--accent)}.master-vol{display:flex;align-items:center;gap:6px;padding-left:8px;border-left:1px solid var(--border)}.master-vol input[type=range]{width:100px}.master-vol .vol-icon{background:transparent;border:0;padding:0 4px;font-size:16px;cursor:pointer}.master-vol .vol-percent{font-size:11px;color:var(--muted);min-width:36px;text-align:right}.timeline{background:var(--panel);border-top:1px solid var(--border);height:320px;resize:vertical;display:flex;flex-direction:column;min-height:200px}.timeline-toolbar{display:flex;gap:8px;align-items:center;padding:4px 8px;background:var(--panel-2);border-bottom:1px solid var(--border)}.timeline-toolbar .zoom-info{color:var(--muted);font-size:11px}.timeline-toolbar .hint{color:var(--muted);font-size:11px;margin-left:auto}.timeline-toolbar .toolbar-sep{width:1px;height:18px;background:var(--border);margin:0 4px}.timeline-body{flex:1;overflow:auto;position:relative}.timeline-grid{position:relative;min-height:100%}.ruler-row{display:flex;position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--border)}.ruler-corner{border-right:1px solid var(--border);background:var(--panel-2)}.ruler{position:relative;cursor:col-resize;background:var(--panel)}.ruler .tick{position:absolute;top:0;width:1px;height:100%;background:var(--border)}.ruler .tick span{position:absolute;left:4px;bottom:4px;font-size:10px;color:var(--muted);white-space:nowrap}.marker{position:absolute;top:0;width:1px;height:100%;background:var(--marker-color, #f7c948);cursor:pointer}.marker .marker-flag{position:absolute;top:2px;left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--marker-color, #f7c948)}.marker:hover{filter:brightness(1.2)}.tracks{display:flex;flex-direction:column}.track-row{display:flex;border-bottom:1px solid var(--border)}.track-header{display:flex;flex-direction:column;justify-content:center;padding:4px 6px;gap:3px;background:var(--panel-2);border-right:1px solid var(--border);position:sticky;left:0;z-index:4}.track-header-row{display:flex;align-items:center;gap:4px}.track-grip{cursor:grab;color:var(--muted);font-size:12px;padding:0 2px;-webkit-user-select:none;user-select:none;letter-spacing:-2px}.track-grip:hover{color:var(--text)}.track-grip:active{cursor:grabbing}body.reordering-track,body.reordering-track *{cursor:grabbing!important}.track-vol{width:100%;accent-color:var(--accent);margin:0}.track-duck{width:100%;accent-color:var(--audio);margin:0;filter:hue-rotate(20deg)}.track-duck.on{accent-color:#ff8a50}.track-resize{position:absolute;left:0;right:0;bottom:-2px;height:5px;cursor:ns-resize;z-index:3}.track-resize:hover{background:#4f8cff66}.track-row{position:relative}.track-row.locked .clip{cursor:not-allowed}.track-row.locked .clip-handle{display:none}.marquee{position:fixed;pointer-events:none;background:#4f8cff26;border:1px dashed var(--accent);z-index:7}.track-name{font-weight:600;font-size:12px;padding:2px 6px;border-radius:3px;flex:1}.track-name.video{background:#4f8cff33;color:#b8cdff}.track-name.audio{background:#2c806033;color:#a6e2c5}.track-name.subtitle{background:#f7c94833;color:#f7c948}.track-row.subtitle-track .track-area{background:#f7c9480a}.subtitle-track .track-buttons{flex-wrap:wrap;gap:3px}.subtitle-track .track-buttons button{width:auto;height:22px;padding:0 6px;font-size:11px;white-space:nowrap}.subtitle-block{position:absolute;top:4px;bottom:4px;border-radius:4px;background:#f7c948b3;border:1px solid rgba(0,0,0,.3);color:#1a1a1a;font-size:11px;padding:0 6px;display:flex;align-items:center;cursor:grab;overflow:hidden;white-space:nowrap}.subtitle-block.selected{outline:2px solid var(--accent);outline-offset:-1px;box-shadow:0 0 0 2px #4f8cff4d}.subtitle-block .subtitle-text{text-overflow:ellipsis;overflow:hidden;pointer-events:none}.z-badge{font-size:10px;padding:1px 4px;border-radius:3px;font-weight:600;letter-spacing:.5px}.z-badge.front{background:#ff547033;color:#ff96a8}.z-badge.back{background:#ffffff0f;color:var(--muted)}.track-buttons{display:flex;gap:2px}.track-buttons button{width:22px;height:22px;padding:0;font-size:11px}.track-buttons .solo-btn.on{background:#f7c948;color:#1a1a1a;border-color:#f7c948}.track-area{position:relative;background:linear-gradient(180deg,#ffffff03,#ffffff06)}.track-area.over{background:#4f8cff33}.clip{position:absolute;top:4px;bottom:4px;border-radius:4px;overflow:hidden;cursor:grab;background:var(--video);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 3px #0006}.clip.audio{background:var(--audio)}.clip.selected{outline:2px solid var(--accent);outline-offset:-1px;box-shadow:0 0 0 2px #4f8cff4d}.clip-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;pointer-events:none;padding-left:8px}.clip-thumb{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:.55}.clip-strip{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;opacity:.6;overflow:hidden}.clip-strip-cell{height:100%;background-size:cover;background-position:center;border-right:1px solid rgba(0,0,0,.25)}.clip-strip-cell:last-child{border-right:none}.clip-waveform{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;height:60%;pointer-events:none;opacity:.65}.clip-waveform.video{color:#cfe1ff}.clip-waveform.audio{color:#d4ffec}.clip-label{position:relative;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-handle{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;z-index:2}.clip-handle.left{left:0}.clip-handle.right{right:0}.clip-handle:hover{background:#ffffff4d}.fade-marker{position:absolute;top:0;bottom:0;pointer-events:none}.fade-marker.fade-in{left:0;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent)}.fade-marker.fade-out{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.7))}.audio-tail{position:absolute;top:30%;bottom:30%;background:linear-gradient(90deg,#7ae09a8c,#7ae09a00);border-top-right-radius:6px;border-bottom-right-radius:6px;pointer-events:none;z-index:1}.clip-mute{position:absolute;top:3px;right:9px;width:18px;height:18px;padding:0;border-radius:3px;font-size:11px;background:#00000080;border:1px solid rgba(255,255,255,.2);z-index:3;display:flex;align-items:center;justify-content:center;line-height:1}.clip-mute:hover{background:#000c}.clip-mute.on{background:var(--danger);border-color:transparent}.clip.has-color{border-top:3px solid var(--clip-color, transparent)}.color-row{display:flex;gap:4px;flex-wrap:wrap}.color-swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);padding:0;cursor:pointer}.color-swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px #4f8cff4d}.clip.grouped:before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--group-color, var(--accent));box-shadow:0 0 0 1.5px #0000008c;z-index:4;pointer-events:none}.clip.muted:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(-45deg,transparent 0,transparent 6px,rgba(255,84,112,.18) 6px,rgba(255,84,112,.18) 12px);pointer-events:none}.playhead{position:absolute;top:0;bottom:0;width:2px;pointer-events:none;z-index:6}.playhead-cap{position:absolute;top:0;left:-7px;width:16px;height:18px;background:var(--danger);border-bottom-left-radius:50%;border-bottom-right-radius:50%;cursor:ew-resize;pointer-events:auto;box-shadow:0 1px 3px #0006}.playhead-cap:hover{filter:brightness(1.2)}.playhead-line{position:absolute;top:18px;bottom:0;left:0;width:2px;background:var(--danger)}.playhead-hit{position:absolute;top:18px;bottom:0;left:-4px;width:10px;cursor:ew-resize;pointer-events:auto}.timeline-footer{display:flex;gap:16px;padding:4px 12px;background:var(--panel-2);border-top:1px solid var(--border);color:var(--muted);font-size:11px}.props{padding:10px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.props-empty{color:var(--muted);padding:30px 10px;text-align:center}.props-title{font-weight:600}.props-asset{font-size:12px;color:var(--muted);word-break:break-all;padding-bottom:6px;border-bottom:1px solid var(--border)}.props-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.props-field input[type=range]{accent-color:var(--accent)}.props-field.slider-input .slider-row{display:grid;grid-template-columns:1fr 64px auto;gap:6px;align-items:center}.props-field.slider-input input[type=number]{width:100%;text-align:right}.props-field.slider-input .slider-suffix{color:var(--muted);font-size:11px}.props-section{border:1px solid var(--border);border-radius:4px;background:#ffffff05}.props-section>summary{padding:6px 8px;cursor:pointer;font-weight:600;color:var(--text);-webkit-user-select:none;user-select:none}.props-section>summary:hover{background:#ffffff0a}.props-section[open]{padding-bottom:8px}.props-section>.props-field,.props-section>button{margin:6px 8px 0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(640px,92vw);max-height:90vh;display:flex;flex-direction:column}.modal-title{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600}.modal-body{padding:16px;overflow-y:auto;flex:1}.modal-actions{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--border)}.log{background:#0a0c12;color:var(--muted);padding:8px;border-radius:4px;font-size:10px;max-height:180px;overflow:auto}.error{color:var(--danger);background:#ff54701a;padding:8px;border-radius:4px;white-space:pre-wrap}.range-modes{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.range-modes label{display:flex;align-items:center;gap:6px;cursor:pointer}.range-inputs{display:flex;gap:12px;padding-left:22px}.range-inputs label{flex-direction:column;align-items:flex-start;gap:2px;color:var(--muted);font-size:12px}.range-summary{color:var(--muted);font-size:12px;padding:8px 0}.download-btn{display:inline-block;margin-top:10px;padding:8px 14px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;text-decoration:none;border-radius:4px;font-weight:600}.save-row{display:flex;gap:8px;margin-bottom:12px}.save-row input{flex:1}.project-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:360px;overflow-y:auto}.project-item{display:flex;gap:6px;align-items:stretch}.project-pick{flex:1;text-align:left;padding:8px 10px;display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border:1px solid var(--border)}.project-pick:hover{background:#283045}.project-name{font-weight:600}.project-sub{color:var(--muted);font-size:11px}.project-item>button:last-child{width:32px;background:var(--panel-2);border:1px solid var(--border);color:var(--danger)}
