* { box-sizing: border-box; }
body {
  margin:0; background:#1b1d22; color:#e6e6e6;
  font-family: "Malgun Gothic","맑은 고딕",sans-serif; font-size:14px;
}
#app { display:flex; flex-direction:column; height:100vh; }
header {
  padding:8px 14px; background:#13151a; border-bottom:1px solid #2c2f37;
  display:flex; align-items:baseline; gap:14px;
}
header h1 { font-size:16px; margin:0; }
#meta { color:#8a8f99; font-size:12px; }

#main { flex:1; display:flex; min-height:0; }

/* 사이드바 */
#sidebar { width:340px; border-right:1px solid #2c2f37; display:flex; flex-direction:column; }
#searchbar { display:flex; gap:4px; margin:8px; }
#search { flex:1; padding:7px 9px; background:#0f1115; border:1px solid #2c2f37;
          color:#e6e6e6; border-radius:5px; }
#clearsearch { width:32px; background:#2c2f37; color:#c8c8c8; border:none;
               border-radius:5px; cursor:pointer; font-size:13px; }
#clearsearch:hover { background:#46505e; color:#fff; }
#voiceonly-label { display:flex; align-items:center; gap:6px; margin:0 8px 8px;
                   font-size:12px; color:#b9c2cf; cursor:pointer; user-select:none; }
#voiceonly-label input { cursor:pointer; }
#list { flex:1; overflow-y:auto; }
.item { padding:7px 12px; border-bottom:1px solid #23262e; cursor:pointer; }
.item:hover { background:#23262e; }
.item.sel { background:#2f4a6b; }
.item .k { color:#7fb0ff; font-size:11px; }
.item .spk { color:#ffcf6b; font-size:11px; margin-left:6px; }
.item .pv { color:#c8c8c8; display:block; margin-top:2px;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 플레이어 */
#player { flex:1; display:flex; flex-direction:column; padding:16px; overflow-y:auto; }
#stage { position:relative; }
#speaker { color:#ffcf6b; font-weight:bold; height:22px; margin-bottom:4px; }
#window {
  background:#0b0d11; border:2px solid #44506a; border-radius:8px;
  min-height:150px; padding:18px 20px; font-size:22px; line-height:1.7;
  white-space:pre-wrap; word-break:break-all;
}
#text .cursor { color:#7fb0ff; animation:blink 0.6s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
#text .code { color:#ff7b7b; font-size:13px; opacity:0.8; }
#cues { min-height:24px; margin-top:8px; color:#6bd6a0; font-size:13px; }
.cue { display:inline-block; margin-right:12px; }
.cue.wait { color:#ffd86b; }
.cue.voice { color:#6bd6ff; }
.cue.page { color:#ff9bd6; }

#controls { margin:14px 0; display:flex; align-items:center; gap:8px; }
#controls button {
  padding:8px 14px; background:#2f4a6b; color:#fff; border:none;
  border-radius:5px; cursor:pointer; font-size:14px;
}
#controls button:hover { background:#3d5d85; }
#clock { margin-left:auto; font-variant-numeric:tabular-nums; color:#8a8f99; font-size:16px; }

#settings { display:flex; flex-wrap:wrap; gap:18px; padding:10px 0;
            border-top:1px solid #2c2f37; border-bottom:1px solid #2c2f37; color:#b8bcc4; }
#settings label { display:flex; align-items:center; gap:6px; }

/* 편집 패널 */
#editor { margin-top:14px; padding:10px 0; border-top:1px solid #2c2f37; }
#editor .row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
#editor button { padding:5px 10px; background:#3a5; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
#editor button:hover { filter:brightness(1.15); }
#editor #reset { background:#666; } #editor #copy { background:#557; }
#editmsg { font-size:12px; }
#edit { width:100%; height:90px; background:#0b0d11; color:#e6e6e6; border:1px solid #44506a;
        border-radius:6px; padding:10px; font-family:Consolas,"맑은 고딕",monospace; font-size:15px;
        line-height:1.6; resize:vertical; }
#codehelp { margin-top:5px; color:#8a8f99; font-size:11px; font-family:Consolas,monospace; }

#info { margin-top:12px; font-size:13px; color:#c8c8c8; }
#info .row { margin:3px 0; }
#info b { color:#8a8f99; display:inline-block; min-width:80px; }
#i_timeline { margin-top:6px; font-family:Consolas,monospace; font-size:12px;
              color:#9aa0aa; white-space:pre-wrap; line-height:1.5; }
.tl-wait { color:#ffd86b; } .tl-voice { color:#6bd6ff; }
.tl-page { color:#ff9bd6; } .tl-text { color:#d8d8d8; }