:root{
  --bg:#0c1116; --panel:#161d26; --line:#28323f; --ink:#eaf0f6; --sub:#9fb0c2; --faint:#6b7c8f;
  --green:#2fd07a; --green-d:#1fa860; --red:#ff4d5e; --blue:#4a9eff; --gold:#ffcb45;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); min-height:100vh;
  background:radial-gradient(circle at 50% -8%, rgba(47,208,122,.10), transparent 45%), var(--bg);}
.wrap{max-width:500px; margin:0 auto; padding:0 16px 40px;}

.top{text-align:center; padding:36px 0 4px;}
.top h1{font-size:32px; font-weight:900; margin:0;}
.top .tg{color:var(--sub); font-size:14px; margin-top:8px; line-height:1.8;}
.top .tg b{color:var(--ink)}

/* 시나리오 카드 */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}
@media(max-width:440px){.grid{grid-template-columns:1fr}}
.scard{background:var(--panel); border:1.5px solid var(--line); border-radius:16px; padding:15px; cursor:pointer; text-align:left;}
.scard:hover{border-color:var(--green)}
.scard .em{font-size:30px}
.scard .ti{font-weight:800; font-size:15px; margin-top:6px;}
.scard .pl{color:var(--faint); font-size:12px; margin-top:2px;}
.scard .lv{display:inline-block; font-size:10.5px; margin-top:8px; padding:2px 8px; border-radius:999px; background:#1e2732; color:var(--sub);}
.custom{background:var(--panel); border:1.5px dashed var(--line); border-radius:16px; padding:16px; margin-top:12px;}
.custom input{width:100%; font:inherit; font-size:14.5px; background:#0e141b; border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px; outline:none;}
.custom button{width:100%; margin-top:9px; font:inherit; font-size:14px; font-weight:800; background:var(--panel); border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px; cursor:pointer;}
.warn{color:var(--faint); font-size:12px; text-align:center; margin-top:16px; line-height:1.8;}
.warn b{color:var(--gold)}

/* 통화 화면 */
.callscreen{text-align:center; padding-top:20px;}
.callee{font-size:22px; font-weight:900; margin-top:10px;}
.calleesub{color:var(--sub); font-size:13px; margin-top:3px;}
.mission{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin:14px 0; font-size:12.5px; color:var(--sub); text-align:left; line-height:1.7;}
.mission b{color:var(--gold)}
.avatar{width:110px; height:110px; border-radius:50%; margin:8px auto; background:radial-gradient(circle at 40% 35%, #2b3a49,#1a232e); display:flex; align-items:center; justify-content:center; font-size:52px; position:relative;}
.avatar.speaking::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid var(--green); animation:ring 1.1s infinite;}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.status{color:var(--sub); font-size:14px; min-height:22px; margin-top:6px;}

.transcript{text-align:left; margin:16px 0; max-height:38vh; overflow-y:auto;}
.line{margin:8px 0; display:flex;}
.line.me{justify-content:flex-end}
.line .b{max-width:82%; font-size:14.5px; line-height:1.7; border-radius:14px; padding:9px 13px;}
.line.them .b{background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px;}
.line.me .b{background:#123a2a; color:#c9f2dd; border-bottom-right-radius:4px;}
.line .b.interim{opacity:.55; font-style:italic;}

.controls{position:sticky; bottom:0; padding:12px 0 calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(0deg,var(--bg) 70%,transparent);}
.talkbtn{width:100%; font:inherit; font-size:17px; font-weight:900; color:#062012; background:var(--green); border:0; border-radius:14px; padding:16px; cursor:pointer;}
.talkbtn.rec{background:var(--red); color:#fff; animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,94,.5)}50%{box-shadow:0 0 0 16px rgba(255,77,94,0)}}
.subrow{display:flex; gap:9px; margin-top:9px;}
.subrow button{flex:1; font:inherit; font-size:13.5px; font-weight:700; background:var(--panel); border:1.5px solid var(--line); color:var(--sub); border-radius:12px; padding:12px; cursor:pointer;}
.subrow .hang{border-color:#5a2530; color:var(--red);}
.typebar{display:flex; gap:8px; margin-top:9px;}
.typebar input{flex:1; font:inherit; font-size:14px; background:#0e141b; border:1.5px solid var(--line); color:var(--ink); border-radius:11px; padding:12px; outline:none;}
.typebar button{font:inherit; font-weight:800; background:var(--blue); color:#fff; border:0; border-radius:11px; padding:0 16px; cursor:pointer;}

/* 피드백 */
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fb{animation:pop .5s;}
.fbtop{text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;}
.fbtop .gg{font-size:50px; font-weight:900;}
.fbtop .missions{display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap:wrap;}
.mtag{font-size:12px; border-radius:999px; padding:5px 12px; border:1px solid var(--line);}
.mtag.done{background:#123a2a; color:var(--green); border-color:#1f6b47;}
.mtag.miss{background:#2a1216; color:var(--red); border-color:#5a2530;}
.fbone{color:var(--sub); font-size:13.5px; margin-top:10px; line-height:1.7;}
.bars{margin-top:12px;}
.brow{display:flex; align-items:center; gap:10px; margin:7px 0;}
.brow .bk{flex:0 0 56px; font-size:13px; color:var(--sub);}
.brow .bt{flex:1; height:8px; background:#1e2732; border-radius:5px; overflow:hidden;}
.brow .bf{height:100%; background:var(--green); border-radius:5px;}
.brow .bv{flex:0 0 34px; text-align:right; font-weight:800; font-size:13px;}
.fbsec{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-top:10px; font-size:14px; line-height:1.8;}
.fbsec .h{font-size:12px; font-weight:900; margin-bottom:5px;}
.fbsec.good .h{color:var(--green)} .fbsec.fix .h{color:var(--gold)} .fbsec.model .h{color:var(--blue)}
.actions{display:flex; gap:9px; margin-top:14px;}
.actions button{flex:1; font:inherit; font-size:14.5px; font-weight:800; padding:14px; border-radius:12px; border:1.5px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
.actions .prime{background:var(--green); border-color:var(--green); color:#062012;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
.foot{margin-top:26px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.8;}
.hidden{display:none}