:root{
  --bg:#0e1014; --bg2:#161a21; --panel:#1b2029; --panel2:#222834;
  --line:#2a313d; --txt:#e8ecf2; --txt-dim:#9aa4b2; --txt-mute:#6b7382;
  --accent:#5b8cff; --accent2:#7c5cff; --good:#36c98e; --warn:#e0a93b;
  --chip:#262d3a; --chip-on:#34508f; --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--txt); font-size:14px;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:24px; padding:14px 22px;
  background:linear-gradient(180deg,#171c25,#12151c);
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:16px;
}
.brand h1{font-size:16px;font-weight:700;letter-spacing:-.2px}
.sub{font-size:11px;color:var(--txt-mute)}
.search-wrap{flex:1;max-width:520px}
#search{
  width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-size:14px;
}
#search:focus{outline:none;border-color:var(--accent)}
.stat{color:var(--txt-dim);font-size:12px;white-space:nowrap;margin-left:auto}

/* Scene/script panel */
#sceneToggle.on{border-color:var(--accent);background:var(--chip-on);color:#fff}
.scene-panel{
  flex:0 0 auto;background:#12161e;border-bottom:1px solid var(--line);padding:14px 22px;
}
.scene-panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.scene-panel-head>span:first-child{font-weight:700}
.scene-hint{font-size:12px;color:var(--txt-mute)}
.scene-collapse-btn{margin-left:auto;align-self:center;background:var(--chip);border:1px solid var(--line);color:var(--txt-dim);font-size:12px;padding:4px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.scene-collapse-btn:hover{border-color:var(--accent);color:#fff}
#sceneInput{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);padding:11px 13px;font-size:13.5px;line-height:1.5;resize:vertical;font-family:inherit;
}
#sceneInput:focus{outline:none;border-color:var(--accent)}
.scene-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.scene-actions .d-play{margin:0}
.srt-upload{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);cursor:pointer;font-size:13px}
.srt-upload:hover{border-color:var(--accent)}
.srt-name{font-size:12px;color:var(--txt-dim)}
.scene-examples{font-size:12px;color:var(--txt-mute)}
.scene-examples a{color:var(--accent);cursor:pointer}
.scene-examples a:hover{text-decoration:underline}

/* Scene analysis summary banner */
.scene-summary{
  margin:10px 12px 4px;padding:12px 16px;border-radius:11px;
  background:linear-gradient(135deg,rgba(91,140,255,.14),rgba(124,92,255,.1));
  border:1px solid #34406a;
}
.scene-sum-row{display:flex;align-items:center;gap:12px}
.scene-label{font-weight:700}
.scene-quad{padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:600}
.scene-detected{font-size:12.5px;color:var(--txt-dim)}
.scene-metrics{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0;font-size:12.5px;color:var(--txt-dim)}
.scene-metrics b{color:var(--txt)}
.scene-instr b{color:var(--good)}
.scene-sum-row2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.scene-sum-row2 .k{color:var(--txt-mute);margin-left:6px}
.scene-tag{padding:3px 9px;border-radius:7px;background:var(--chip);color:var(--txt-dim);font-size:12px}
.scene-tag.dim{opacity:.5}
.scene-collapsed-bar{display:flex;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto;
  padding:10px 22px;background:var(--bg2);border-bottom:1px solid var(--line);
  border-left:3px solid var(--accent);font-size:13px;color:var(--txt-dim)}
.scene-collapsed-bar[hidden]{display:none}
.scene-collapsed-bar:hover{background:var(--panel);color:var(--txt)}
.scene-collapsed-bar .scb-label{font-weight:600;color:var(--txt)}
.scene-collapsed-bar .scb-hint{color:var(--accent);font-size:12px}

/* 장면 이미지 패널 (분석 배너 우측 = 빨간 박스 자리) */
/* 자막 컨텍스트 헤더 — 분석 배너 상단에 자연스럽게 이어지는 한 섹션(점선 구분) */
.srt-seg-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding-bottom:9px;margin-bottom:2px;border-bottom:1px dashed #3a4670;font-size:12.5px;color:var(--txt-dim)}
.srt-seg-head b{color:var(--txt)}
.srt-file{font-weight:600;color:var(--txt)}
.srt-seg-meta{color:var(--txt-dim)}
.srt-seg-time{padding:2px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px}
.srt-seg-text{flex:1 1 100%;margin:2px 0 0;color:var(--txt);font-style:italic;line-height:1.5}
.scene-summary{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.scene-summary[hidden]{display:none}
.scene-sum-body{min-width:0}
/* 장면 이미지 3장 행 */
.scene-image{position:relative}
.scene-image[hidden]{display:none}
.scene-image.si-row{display:flex;gap:10px}
.scene-image.si-loading,.scene-image.si-error{display:flex;align-items:center;justify-content:center;
  border:1px solid #2a3142;background:#11141a;border-radius:9px;min-height:130px}
.scene-image.si-error{border-color:#5a2a2a}
.si-card{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  border:1px solid #2a3142;border-radius:9px;overflow:hidden;background:#11141a}
/* contain: 원본 비율 그대로 표시(잘림 없음) + 다크 배경(필름 프레임 느낌). 전체는 크게보기. */
.si-card .si-img{width:100%;height:150px;object-fit:contain;background:#0a0e14;display:block;cursor:zoom-in}
.si-actions{display:flex;gap:6px;padding:6px;flex-wrap:wrap}
.si-btn{flex:1 1 auto;background:rgba(0,0,0,.35);border:1px solid #3a4150;color:#cdd6e6;
  font-size:11px;padding:5px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.si-btn:hover{border-color:var(--accent);color:#fff}
.si-btn.si-match{background:rgba(124,92,255,.18);border-color:#4a3a8a;color:#cbb8ff}
.si-btn.si-match:hover{background:rgba(124,92,255,.32);color:#fff}
.si-btn:disabled{opacity:.4;cursor:default;background:rgba(0,0,0,.25);color:#7b8496}
.si-btn:disabled:hover{border-color:#3a4150}
.si-inner{display:flex;flex-direction:column;align-items:center;gap:9px}
.si-cap{font-size:12px;color:var(--txt-mute)}
.si-cap.err{color:#e07a7a;text-align:center;line-height:1.5}
.si-sub{font-size:11px;color:var(--txt-mute)}
.si-spin{width:26px;height:26px;border:3px solid #2a3142;border-top-color:var(--accent);border-radius:50%;animation:si-spin .9s linear infinite}
@keyframes si-spin{to{transform:rotate(360deg)}}
.si-img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.si-badge{position:absolute;top:6px;left:6px;background:rgba(124,92,255,.85);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;z-index:1}
.si-retry{background:none;border:1px solid var(--accent);color:#9ab6ff;font-size:12px;padding:5px 12px;border-radius:7px;cursor:pointer}
/* 이미지 추천(어울리는 곡만 보기) 복귀 바 */
.list-back-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;margin-bottom:8px;
  background:rgba(124,92,255,.1);border:1px solid #4a3a8a;border-radius:9px}
.list-back-btn{background:var(--accent);border:none;color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer}
.list-back-btn:hover{filter:brightness(1.1)}
.list-back-info{font-size:12.5px;color:var(--txt-dim)}
/* 임시 토스트(모드 전환 안내) — 플레이어 바 위 중앙 */
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(8px);z-index:80;
  max-width:520px;padding:11px 18px;border-radius:10px;background:#1b2233;border:1px solid #3a4670;
  color:var(--txt);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:99;cursor:zoom-out;padding:24px}
.lb-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:92vw;max-height:92vh;cursor:default}
.lb-img{max-width:92vw;max-height:78vh;border-radius:10px;display:block}
.lb-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;background:#1b2029;border:1px solid #3a4150;color:#e7ebf2;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{border-color:var(--accent);color:#fff}
.lb-bar{display:flex;gap:8px}
.lb-download,.lb-ptoggle{background:rgba(255,255,255,.08);border:1px solid #3a4150;color:#cdd6e6;font-size:12px;padding:6px 12px;border-radius:7px;cursor:pointer}
.lb-download:hover,.lb-ptoggle:hover{border-color:var(--accent);color:#fff}
.lb-prompt{max-width:680px;background:#11141a;border:1px solid #2a3142;border-radius:8px;padding:10px 12px;font-size:12px;color:#9aa3b4;line-height:1.55;max-height:18vh;overflow:auto}

/* Layout */
.layout{flex:1;display:flex;min-height:0}
.filters{
  width:268px;flex:0 0 auto;background:var(--bg2);border-right:1px solid var(--line);
  overflow-y:auto;padding:16px;
}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.filters-head h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-dim)}
.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px}
.link-btn:hover{text-decoration:underline}

.fgroup{border-top:1px solid var(--line);padding:12px 0}
.fgroup-title{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--txt);margin-bottom:8px;user-select:none;
}
.fgroup-title .cnt{color:var(--txt-mute);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:5px 10px;border-radius:999px;background:var(--chip);border:1px solid transparent;
  color:var(--txt-dim);font-size:12px;cursor:pointer;transition:.12s;white-space:nowrap;
}
.chip:hover{color:var(--txt);border-color:var(--line)}
.chip.on{background:var(--chip-on);color:#fff;border-color:var(--accent)}
.range-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.range-row input[type=range]{flex:1}
.range-val{font-size:12px;color:var(--txt-dim);min-width:64px;text-align:right}

/* Content */
.content{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
/* 결과 스크롤 영역 — 장면요약+곡리스트가 함께 스크롤, 헤더/플레이어는 고정 */
.content-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.content-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.sort-wrap{display:flex;align-items:center;gap:8px;color:var(--txt-dim);font-size:12px}
#sortBy{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.ghost-btn{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-size:13px;
}
.ghost-btn:hover{border-color:var(--accent)}
.track-list{flex:0 0 auto;padding:8px 12px 20px}
.list-loading{padding:40px 16px;text-align:center;color:var(--txt-dim);font-size:14px}

/* Track row */
.track{
  display:grid;
  grid-template-columns:34px 1fr 150px 90px 64px 56px;
  align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;
}
.track:hover{background:var(--panel)}
.track.playing{background:linear-gradient(90deg,rgba(91,140,255,.16),transparent)}
.track .idx{color:var(--txt-mute);font-size:13px;text-align:center}
.track.playing .idx{color:var(--accent)}
.t-main{min-width:0}
.t-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-sub{font-size:12px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-tags{display:flex;gap:5px;flex-wrap:wrap;overflow:hidden;max-height:22px}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--chip);color:var(--txt-dim);white-space:nowrap}
.fit-badge{display:inline-block;margin-right:7px;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:700;vertical-align:1px}
.fit-badge.hi{background:rgba(54,201,142,.22);color:#56e0a8}
.fit-badge.mid{background:rgba(91,140,255,.22);color:#9fc0ff}
.fit-badge.lo{background:rgba(224,169,59,.2);color:#e6b85a}
.tag.genre{background:#26344f;color:#9fc0ff}
.tag.mood{background:#32294f;color:#c3a9ff}
.t-num{font-size:12px;color:var(--txt-dim);text-align:center}
.t-bpm b{color:var(--txt);font-size:14px}
.energy-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.energy-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--warn))}
.status-dot{font-size:11px;padding:2px 6px;border-radius:5px;text-align:center}
.status-dot.approved{background:rgba(54,201,142,.18);color:var(--good)}
.status-dot.draft{background:rgba(224,169,59,.16);color:var(--warn)}
.no-audio{opacity:.45}

.empty{padding:60px;text-align:center;color:var(--txt-mute)}

/* Detail drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
.detail{
  position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;z-index:50;
  background:var(--bg2);border-left:1px solid var(--line);overflow-y:auto;padding:22px;
  box-shadow:-12px 0 40px rgba(0,0,0,.4);
}
.detail h2{font-size:20px;margin-bottom:2px}
.detail .d-ko{color:var(--txt-dim);margin-bottom:14px}
.d-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--txt-dim);font-size:22px;cursor:pointer}
.d-play{
  display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border:none;padding:10px 18px;border-radius:10px;cursor:pointer;font-size:14px;margin-bottom:18px;
}
.d-play:disabled{opacity:.4;cursor:not-allowed}
.d-section{border-top:1px solid var(--line);padding:14px 0}
.d-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-dim);margin-bottom:10px}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.d-field{font-size:13px}
.d-field .k{color:var(--txt-mute);font-size:11px;display:block;margin-bottom:1px}
.d-field .v{color:var(--txt)}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}
.d-meter{margin:8px 0}
.d-meter label{font-size:12px;color:var(--txt-dim);display:flex;justify-content:space-between}
.d-meter .bar{height:8px;border-radius:4px;background:var(--line);margin-top:4px;overflow:hidden}
.d-meter .bar i{display:block;height:100%;background:var(--accent)}
/* Scene recommendation explanation (detail panel) */
.scene-explain{background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(124,92,255,.08));
  border:1px solid #34406a;border-radius:11px;padding:14px 16px;margin-top:6px}
.scene-explain h3{color:#bcd0ff}
.se-sum{font-size:13px;color:var(--txt-dim);margin-bottom:10px;line-height:1.6}
.se-fit{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:6px;background:var(--chip);color:var(--txt)}
.se-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:6px}
.se-table td{padding:5px 6px;border-top:1px solid var(--line);vertical-align:top}
.se-table td:first-child{color:var(--txt-mute);white-space:nowrap;width:74px}
.se-table b{color:var(--txt)}
.se-ok{color:var(--good);font-weight:600}
.se-no{color:var(--warn)}
.se-diff{color:var(--txt-mute);font-size:11px}
.se-block{margin-top:12px}
.se-block h4{font-size:12px;color:var(--txt-dim);margin-bottom:7px;text-transform:none;letter-spacing:0}
.se-kw{margin-bottom:6px;font-size:12px}
.se-kw-name{display:inline-block;min-width:78px;color:#9fc0ff;font-weight:600}
.se-chip{display:inline-block;padding:2px 8px;margin:2px 3px;border-radius:7px;background:var(--chip);color:var(--txt-dim);font-size:11.5px}
.se-dim{color:var(--txt-mute);font-size:12px}
.se-segs{margin:0;padding-left:0;list-style:none;counter-reset:seg}
.se-segs li{padding:8px 10px;border-radius:8px;background:var(--panel);margin-bottom:6px}
.se-seg-pos{font-weight:600;color:var(--accent);font-size:12px}
.se-seg-fit{float:right;font-size:11px;color:var(--txt-mute);background:var(--chip);padding:1px 7px;border-radius:6px}
.se-seg-text{margin-top:4px;font-size:12.5px;color:var(--txt-dim);line-height:1.5}

.lyrics,.prompt{white-space:pre-wrap;font-size:12.5px;color:var(--txt-dim);line-height:1.55;
  background:var(--panel);border-radius:9px;padding:12px;max-height:260px;overflow:auto}
.drive-frame{width:100%;height:80px;border:0;border-radius:9px;margin-top:10px;background:#000}
.d-link{color:var(--accent);font-size:12px;display:inline-block;margin-top:8px}

/* Player bar */
.player{
  flex:0 0 auto;display:grid;grid-template-columns:minmax(180px,1fr) 2fr minmax(180px,1fr);
  align-items:center;gap:18px;padding:12px 22px;background:#12151c;border-top:1px solid var(--line);
}
.np-info{display:flex;align-items:center;gap:12px;min-width:0}
.np-art{width:48px;height:48px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:20px;flex:0 0 auto}
.np-meta{min-width:0}
.np-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-sub{font-size:12px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-controls{display:flex;flex-direction:column;gap:6px}
.ctrl-row{display:flex;align-items:center;justify-content:center;gap:14px}
.ctrl-row button{background:none;border:none;color:var(--txt);font-size:18px;cursor:pointer}
.ctrl-row button:hover{color:var(--accent)}
.ctrl-row .primary{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;font-size:15px;display:grid;place-items:center}
.seek-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--txt-mute)}
.seek-row input{flex:1}
.np-drive{display:flex;flex-direction:column;gap:4px}
.np-drive #driveFrame{width:100%;height:62px;border:0;border-radius:8px;background:#000}
.np-drive-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.np-drive-nav button{background:none;border:none;color:var(--txt);font-size:16px;cursor:pointer}
.np-drive-nav button:hover{color:var(--accent)}
.np-drive-hint{font-size:11px;color:var(--txt-mute)}
.np-extra{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.src-badge{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--chip);color:var(--txt-dim)}
.src-badge.local{background:rgba(54,201,142,.18);color:var(--good)}
.src-badge.drive{background:rgba(91,140,255,.18);color:#9fc0ff}
.src-badge.err{background:rgba(224,80,80,.18);color:#ff9a9a}
.excerpt-toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txt-dim);cursor:pointer;user-select:none}
.excerpt-toggle input{cursor:pointer}
.vol-ctrl{display:flex;align-items:center;gap:6px}
.vol-ctrl input{width:84px}

input[type=range]{-webkit-appearance:none;height:4px;border-radius:2px;background:var(--line);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2c333f;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:900px){
  .filters{display:none}
  .track{grid-template-columns:30px 1fr 70px}
  .track .t-tags,.track .t-status{display:none}
  .player{grid-template-columns:1fr;gap:8px}
  .np-extra{display:none}
}