:root{--bg:#05070c;--panel:#141925;--line:#232a3a;--txt:#eef2fa;--sub:#8b97ad;--teal:#2fd6c6;--amber:#ffb454;--green:#57d675;--red:#ff6b6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:-apple-system,"Noto Sans KR",system-ui,sans-serif;background:var(--bg);color:var(--txt)}
.view{min-height:100dvh;display:flex;flex-direction:column}
.hidden{display:none!important}

/* 준비 화면 */
.phead{padding:20px 18px 8px}
.logo{font-weight:800;font-size:22px}.logo b{color:var(--teal)}
.phead .sub{font-size:12px;color:var(--sub);margin-top:2px}
.pbody{padding:8px 18px 40px;max-width:760px;margin:0 auto;width:100%}
.fl{font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:1px;display:block;margin:14px 0 6px}
textarea#script{width:100%;height:150px;background:#0d1119;border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:12px;font-size:15px;line-height:1.6;resize:vertical}
.segprev{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.segprev .s{display:flex;gap:10px;align-items:flex-start;background:#0d1119;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.segprev .s .n{font-size:11px;color:var(--sub);min-width:34px}
.segprev .s .t{font-size:14px;flex:1;line-height:1.5}
.segprev .tag{font-size:10px;padding:2px 7px;border-radius:20px;white-space:nowrap}
.tag.도입{background:rgba(47,214,198,.15);color:var(--teal)}.tag.강조{background:rgba(255,180,84,.15);color:var(--amber)}
.tag.전환{background:rgba(87,214,117,.15);color:var(--green)}.tag.일반{background:#1a2130;color:var(--sub)}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
.setrow small{display:block;color:var(--sub);font-size:11px}
.seg-sel{display:flex;gap:6px}.seg-sel button{font-size:12px;padding:6px 11px;border-radius:8px;background:#0d1119;border:1px solid var(--line);color:var(--sub);cursor:pointer}
.seg-sel button.on{color:#08110f;background:var(--teal);border-color:var(--teal);font-weight:700}
.tog{width:46px;height:26px;border-radius:20px;background:#20283a;position:relative;cursor:pointer;flex:none}
.tog.on{background:var(--teal)}.tog i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}.tog.on i{left:23px}
.startbtns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.go{padding:16px;border:0;border-radius:14px;background:var(--teal);color:#08110f;font-size:16px;font-weight:800;cursor:pointer}
.go.ghost{background:#0d1119;color:var(--txt);border:1px solid var(--line)}
.hint{font-size:12px;color:var(--sub);margin-top:12px;line-height:1.5}

/* 라이브 */
#live{position:relative}
.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:12px;color:var(--sub);gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-weight:700;font-size:12px}
.chip .dot{width:8px;height:8px;border-radius:50%;animation:p 1.3s infinite}@keyframes p{50%{opacity:.35}}
.chip.on-track{background:rgba(47,214,198,.12);color:var(--teal)}.chip.on-track .dot{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.chip.dev{background:rgba(255,180,84,.14);color:var(--amber)}.chip.dev .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.chip.para{background:rgba(87,214,117,.14);color:var(--green)}.chip.para .dot{background:var(--green)}
.hudr{display:flex;gap:12px;align-items:center}
.mic{display:flex;align-items:center;gap:7px;color:var(--teal)}
.wave{display:flex;gap:2px;align-items:flex-end;height:15px}.wave i{width:3px;background:var(--teal);border-radius:2px;height:5px;animation:w 1s infinite}
.wave i:nth-child(2){animation-delay:.2s}.wave i:nth-child(3){animation-delay:.4s}.wave i:nth-child(4){animation-delay:.1s}
@keyframes w{0%,100%{height:5px}50%{height:15px}}
.mic.off{color:var(--sub)}.mic.off .wave i{animation:none;background:var(--sub)}
.banner{position:absolute;top:44px;left:14px;right:14px;z-index:6;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(38,28,16,.96),rgba(30,24,14,.96));box-shadow:0 6px 20px rgba(0,0,0,.5);border:1px solid rgba(255,180,84,.4);display:flex;align-items:center;gap:12px}
.bic{font-size:20px}.btx{flex:1}.btx b{color:var(--amber)}.bhint{font-size:12px;color:var(--sub);margin-top:2px}
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;gap:22px;overflow:hidden}
.prev{font-size:24px;color:#2a3346;line-height:1.4;min-height:1.4em}
.cur{font-size:54px;font-weight:800;line-height:1.35;letter-spacing:-1px;position:relative;transition:font-size .2s}
.cur .said{color:var(--teal)}   /* 말한 부분: 줄 안에서 청록으로 채워지며 진행 표시 */
.cur .rest{color:inherit}       /* 아직 안 읽은 부분: 밝게 유지(읽기 좋게) */
.cur .role{position:absolute;left:-2px;top:-28px;font-size:12px;font-weight:700;letter-spacing:1px}
.role.도입{color:var(--teal)}.role.강조{color:var(--amber)}.role.전환{color:var(--green)}.role.일반{color:var(--sub)}
.next{font-size:30px;color:#4a5878;line-height:1.4;min-height:1.4em}
.next2{font-size:26px;color:#333c52;line-height:1.4;min-height:1.35em}
.next3{font-size:23px;color:#28303f;line-height:1.4;min-height:1.3em}
body.mirror .stage{transform:scaleX(-1)}
.spd{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sub);padding:2px 6vw}
.bar{flex:1;height:5px;border-radius:5px;background:#141a26;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .3s}
.ctrl{display:flex;justify-content:center;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.b{min-width:52px;height:56px;border-radius:15px;border:1px solid #1c2333;background:#0d1220;color:var(--txt);font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.b.wide{flex:1;max-width:170px;font-size:14px;font-weight:700}.b small{font-size:10px;color:var(--sub)}
.b.re{border-color:var(--teal);color:var(--teal)}.b.stop{border-color:#3a2330;color:var(--red)}
.b.active{background:var(--amber);color:#08110f;border-color:var(--amber)}
.heard{padding:0 6vw 10px;font-size:12px;color:#48536b;text-align:center;min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}