:root{--bg:#0f1115;--card:#171a21;--line:#2a2f3a;--ink:#f2f3f5;--quiet:#9aa3b2;--accent:#3ddc97;--accent-ink:#06301f;--warn:#ffb454;--danger:#ff6b6b;--me:#1d2a3d;--you:#2b2436}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.app{display:flex;flex-direction:column;min-height:100dvh;max-width:720px;margin:0 auto;padding:16px;gap:12px}
header{display:flex;align-items:center;justify-content:space-between;gap:8px}
header h1{font-size:18px;margin:0;font-weight:600}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--quiet);white-space:nowrap}
.pill.ok{border-color:var(--accent);color:var(--accent)}.pill.bad{border-color:var(--danger);color:var(--danger)}.pill.warn{border-color:var(--warn);color:var(--warn)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.hidden{display:none!important}
label{display:block;font-size:13px;color:var(--quiet);margin-bottom:6px}
select,input[type=text]{width:100%;font-size:17px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0c0e12;color:var(--ink)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:14px 18px;font-size:17px;font-weight:600}
button.primary{background:var(--accent);color:var(--accent-ink);width:100%}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
button:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}
.code{font-size:40px;letter-spacing:6px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
#qr{display:flex;justify-content:center;background:#fff;padding:12px;border-radius:12px;margin:12px auto;width:fit-content}
.hint{font-size:13px;color:var(--quiet);text-align:center}
.turn{text-align:center;font-size:22px;font-weight:700;padding:14px;border-radius:12px;border:1px solid var(--line)}
.turn.me{background:var(--me);border-color:#3b6ea5}.turn.you{background:var(--you);border-color:#8a5aa8}
.log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:160px;max-height:46dvh}
.utt{padding:10px 12px;border-radius:12px;max-width:92%}
.utt.me{align-self:flex-end;background:var(--me)}.utt.you{align-self:flex-start;background:var(--you)}
.utt .src{font-size:13px;color:var(--quiet)}.utt .dst{font-size:19px;margin-top:2px}
.partial{font-size:15px;color:var(--quiet);min-height:22px;font-style:italic;padding:0 4px}
.ptt{width:100%;height:120px;font-size:22px;border-radius:18px;background:#22262f;color:var(--ink);border:2px solid var(--line);user-select:none;touch-action:none}
.ptt.live{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ptt.busy{opacity:.5}
.mini{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--quiet);flex-wrap:wrap}
.mini input{width:18px;height:18px}
.err{color:var(--danger);font-size:13px;min-height:20px}
.big{font-size:34px;line-height:1.3;text-align:center;padding:20px 8px;word-break:keep-all}
.show-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;padding:16px;gap:12px;z-index:9}

/* 2분할 대화 화면 */
.split{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}
.pane{flex:1;display:flex;flex-direction:column;border-radius:14px;padding:10px 12px;min-height:120px;overflow:auto;gap:8px}
.pane.you{background:var(--you);border:1px solid #8a5aa8}
.pane.me{background:var(--me);border:1px solid #3b6ea5}
.pane .tag{font-size:12px;color:var(--quiet);letter-spacing:.04em;text-transform:uppercase}
.pane .utt{max-width:100%;padding:0;background:transparent}
.pane .main{font-size:22px;line-height:1.35;font-weight:600}
.pane .utt:not(:last-child) .main{font-size:16px;font-weight:400;opacity:.65}
.pane .sub{font-size:14px;color:var(--quiet)}
.turn.duplex{font-size:15px;padding:8px}
.meterwrap{height:6px;border-radius:3px;background:#22262f;overflow:hidden}.meter{height:100%;width:0;background:var(--accent);transition:width .1s}