:root{
  --bg:#0f172a; --bg2:#1e293b; --card:#1e293b; --line:#334155;
  --fg:#e2e8f0; --muted:#94a3b8; --accent:#0ea5a4; --accent2:#14b8a6;
  --danger:#ef4444; --warn:#f59e0b; --ok:#22c55e;
  --pl-h:132px;
  --on-accent:#04211f; --input-bg:#0b1222;
  --topbar-bg:rgba(15,23,42,.92); --player-bg:rgba(30,41,59,.98);
}
/* 라이트 테마(관리 대시보드 → 시스템 설정에서 전환, localStorage 저장). 다크가 기본. */
:root[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#eaeff5; --card:#ffffff; --line:#d7dfe9;
  --fg:#0f172a; --muted:#5b6b7f; --accent:#0d9488; --accent2:#0f766e;
  --danger:#dc2626; --warn:#b45309; --ok:#16a34a;
  --on-accent:#ffffff; --input-bg:#ffffff;
  --topbar-bg:rgba(246,248,251,.92); --player-bg:rgba(255,255,255,.98);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12px}
.err{color:var(--danger);font-size:13px;min-height:1em;margin:6px 0 0}

button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;padding:9px 12px;font-size:14px;background:var(--bg2);color:var(--fg)}
button:active{opacity:.8}
button.primary{background:var(--accent);color:var(--on-accent);font-weight:700}
button.ghost,a.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
button.danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
button.block,.block{width:100%;display:block}
a.btn{display:inline-block;text-decoration:none;padding:9px 12px;border-radius:10px;font-size:14px;text-align:center}
input,textarea,select{font-family:inherit;font-size:15px;background:var(--input-bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px}
textarea{resize:vertical;width:100%}

/* 로그인 */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.login-card h1{margin:0 0 2px;font-size:26px}
.login-card input{width:100%;margin:16px 0 10px}

/* 상단바 */
.topbar{position:sticky;top:0;z-index:20;background:var(--topbar-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 10px) 14px 8px}
.topbar-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.brand{font-size:18px;letter-spacing:.3px;flex:0 0 auto}
.spacer{flex:1 1 0;min-width:0}
/* 새 항목: 텍스트 없는 원형 + 아이콘(고정폭 → 탭 영역을 침범하지 않음) */
.icon-btn{flex:0 0 auto;width:40px;height:40px;padding:0;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.filters{display:flex;align-items:center;gap:10px;margin-top:10px}
.chips{display:flex;gap:6px;overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px}
.chip.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;color:var(--muted)}

/* 목록 */
.list{list-style:none;margin:0;padding:8px 12px}
.row{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.row.playing{border-color:var(--accent)}
.row .play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:16px;display:flex;align-items:center;justify-content:center}
.row .play[disabled]{background:var(--bg2);color:var(--muted);opacity:.6}
.row .body{flex:1;min-width:0}
.row .title{font-size:15px;font-weight:600;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row .sub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:5px;font-size:12px;color:var(--muted)}
.row .q{flex:0 0 auto;width:38px;height:38px;font-size:18px;line-height:1;background:transparent;border:1px solid var(--line)}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.badge.proc{color:var(--warn);border-color:var(--warn)}
.badge.fail{color:var(--danger);border-color:var(--danger)}
.badge.done{color:var(--ok);border-color:var(--ok)}
.badge.verbatim{color:var(--accent2);border-color:var(--accent2)}
.badge.dl{color:var(--muted);border-color:var(--line)}
/* 확인 필요(원문 30분 초과) — 실패가 아니라 '내 결정 대기'라 경고색을 굵게 준다 */
.badge.confirm{color:var(--warn);border-color:var(--warn);font-weight:600}
.badge.arch{color:var(--muted);border-color:var(--muted)}
/* 원문 분량 확인 패널(상세 상단) */
.d-confirm{border:1px solid var(--warn);border-radius:12px;padding:12px;margin:10px 0;
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.d-confirm-t{font-weight:600;color:var(--warn);margin-bottom:4px}
.d-confirm .d-actions{margin-top:10px}
.row .q.rm{color:var(--danger);border-color:var(--danger)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.list-pad{height:calc(var(--pl-h) + env(safe-area-inset-bottom) + 12px)}

/* 플레이어 */
.player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--player-bg);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 12px calc(env(safe-area-inset-bottom) + 8px)}
.p-seek{display:flex;align-items:center;gap:8px}
.p-seek .t{font-size:11px;color:var(--muted);width:38px;text-align:center;flex:0 0 auto}
.p-range,#p-range{flex:1;accent-color:var(--accent)}
.p-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.p-meta{flex:1;min-width:0}
.p-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-cat{font-size:11px}
.p-controls{display:flex;align-items:center;gap:6px}
.p-controls button{padding:8px 9px;font-size:13px;background:var(--bg2)}
.p-controls .p-play{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:18px}
.p-controls select{padding:8px 6px;font-size:13px}

/* 모달 시트 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:640px;max-height:92dvh;background:var(--bg);border:1px solid var(--line);border-radius:18px 18px 0 0;display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);border-radius:18px 18px 0 0}
.sheet-body{padding:16px;overflow-y:auto}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%}
.field-row{display:flex;gap:10px}
.field-row .grow{flex:1}

/* 상세 */
.d-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.md{line-height:1.7;font-size:16px}
.md h2{font-size:19px;margin:0 0 12px}
.md p{margin:0 0 14px}
.ask{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.ask-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.ask textarea{margin-bottom:8px}
.answer{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;white-space:pre-wrap;line-height:1.6}
.notice{margin-top:20px;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
#d-speak{margin-top:10px}

/* 재생 목록(큐) */
.head-actions{display:flex;gap:8px;align-items:center}
.qlist{list-style:none;margin:0;padding:0}
.qrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px}
.qrow.current{border-color:var(--accent)}
.qtitle{flex:1;min-width:0;font-size:14px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer}
.qidx{color:var(--muted);font-size:12px;margin-right:6px}
.qctrl{flex:0 0 auto;display:flex;gap:4px}
.qctrl button{width:34px;height:34px;padding:0;font-size:13px;background:var(--bg2);border:1px solid var(--line)}
.qctrl button[disabled]{opacity:.35}
.qctrl .rm{color:var(--danger);border-color:var(--danger)}

/* 필터2(그룹·상태) · 그룹 액션바 */
.filters2{margin-top:8px;gap:8px}
.minisel{font-size:13px;padding:7px 8px;background:var(--input-bg);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
#group-filter{flex:1;min-width:0;max-width:60%}
button.small{font-size:12px;padding:6px 10px}
.group-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.group-bar .gb-name{font-size:13px;font-weight:700;margin-right:4px}

/* 그룹 배지 · 청취 상태 */
.gbadge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--accent);color:var(--accent)}
.lstate{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px;color:var(--muted)}
.lstate.done{color:var(--ok)}
.lstate .lbar{display:inline-block;width:80px;height:5px;border-radius:3px;background:var(--bg2);overflow:hidden}
.lstate .lbar>span{display:block;height:100%;background:var(--accent)}

/* 상세 설정(그룹·보이스 재합성) */
.d-settings{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.d-settings>summary{cursor:pointer;font-size:13px;color:var(--muted)}
.d-settings .field{margin:12px 0 0}
.d-settings #d-resynth{margin-top:10px}
.d-sep{border:none;border-top:1px solid var(--line);margin:14px 0 0}
.d-settings #d-relang-btn{margin-top:10px}

/* 실시간 대화 */
.rt-sheet{min-height:62dvh}
.rt-elapsed{font-size:13px;font-weight:600;color:var(--accent);margin-left:6px}
.rt-status{font-size:14px;font-weight:700;margin-bottom:6px}
.rt-status.connecting{color:var(--warn)}
.rt-status.connected{color:var(--ok)}
.rt-status.muted{color:var(--warn)}
.rt-status.ended{color:var(--muted)}
.rt-status.error{color:var(--danger)}
.rt-hint{margin-bottom:10px;color:var(--warn)}
.rt-cols{display:flex;gap:10px;margin-bottom:14px}
.rt-col{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rt-col.ai{border-color:var(--accent)}
.rt-col-h{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.rt-log{flex:1;min-height:32dvh;max-height:44dvh;overflow-y:auto;font-size:14px;line-height:1.55;-webkit-overflow-scrolling:touch}
.rt-log p{margin:0 0 8px}
/* 자막 말풍선: 탭하여 복사(옅은 힌트) */
.rt-bubble{cursor:pointer;border-radius:6px;padding:2px 5px;margin:0 -5px 6px;transition:background .12s}
.rt-bubble:hover,.rt-bubble:active{background:var(--bg2)}
.rt-interim{font-size:14px;line-height:1.5;color:var(--muted);font-style:italic;min-height:1.2em;margin-top:4px}
/* 상태 인식 단일 버튼(한 줄) — 상태별 색/아이콘으로 구분 */
.rt-main{margin-top:4px;font-size:16px;padding:14px;font-weight:700;border:none;width:100%}
.rt-main.live{background:var(--bg2);color:var(--fg);border:1px solid var(--line)}   /* 유휴(마이크 ON): 내 말 멈춤 */
.rt-main.talk{background:var(--accent);color:var(--on-accent)}                        /* 마이크 OFF: 말하기 */
.rt-main.barge{background:var(--danger);color:#fff}                                   /* AI 발화 중: 멈추고 말하기 */
/* 에코 가드·웹검색 컨트롤 */
.rt-controls{display:flex;align-items:center;gap:14px;margin:2px 0 6px}
.rt-mic{font-size:18px;line-height:1;filter:none;transition:opacity .15s}
.rt-mic.gated{opacity:.35;filter:grayscale(1)}
.rt-mic.paused{opacity:.35;filter:grayscale(1)}
.rt-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg);cursor:pointer;user-select:none}
.rt-toggle.small{font-size:12px;color:var(--muted);margin:8px 0 6px}
.rt-toggle input{width:16px;height:16px;accent-color:var(--accent)}
.rt-hint2{margin-bottom:8px;line-height:1.4}
.rt-search{margin:0 0 10px;padding:8px 10px;background:var(--bg2);border:1px solid var(--warn);border-radius:10px;color:var(--warn);font-size:13px}
/* 라이브러리 수정 결과 카드 + 되돌리기 */
.rt-cards:empty{display:none}
.rt-cards{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;max-height:22dvh;overflow-y:auto}
.rt-card{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:1px solid var(--accent);border-radius:10px;font-size:13px}
.rt-card-t{font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30%}
.rt-card-d{flex:1;color:var(--muted);line-height:1.4;word-break:break-word}
.rt-undo{flex-shrink:0}
/* Q&A 출처 */
.d-sources{margin-top:8px;line-height:1.5;word-break:break-all}
.d-sources b{color:var(--fg)}

/* 상단 탭 내비 */
.tabs{display:flex;gap:2px;margin-left:6px;flex:0 1 auto;min-width:0}
.tab{background:transparent;border:none;border-radius:8px;padding:7px 12px;font-size:14px;color:var(--muted);font-weight:600;white-space:nowrap}
.tab.active{background:var(--bg2);color:var(--fg)}
/* 좁은 폭: 브랜드를 숨기고 탭 패딩을 줄여 탭이 세로로 찌그러지지 않게 */
@media(max-width:400px){
  .brand{display:none}
  .tab{padding:7px 10px}
}
.view-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 4px;max-width:680px;margin:0 auto}
.view-head strong{font-size:17px}
.view-intro{padding:0 14px 4px;max-width:680px;margin:0 auto}

/* Q&A 대시보드 */
.qa-list{list-style:none;margin:0;padding:8px 12px;max-width:680px}
.qa-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.qa-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.qa-item-link{font-size:13px;font-weight:700;color:var(--accent);cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-kind{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.qa-kind.realtime{color:var(--accent);border-color:var(--accent)}
.qa-time{font-size:11px;color:var(--muted)}
.qa-q{font-size:14px;font-weight:600;line-height:1.5;margin:0 0 6px}
.qa-q::before{content:"Q ";color:var(--accent)}
.qa-a{font-size:14px;line-height:1.6;color:var(--fg);white-space:pre-wrap;margin:0}
.qa-a::before{content:"A ";color:var(--muted)}
.qa-src{margin-top:6px;font-size:12px;color:var(--muted);word-break:break-all}
.qa-turns{margin:0;padding:0;list-style:none}
.qa-turn{font-size:14px;line-height:1.55;margin:0 0 4px}
.qa-turn.user{color:var(--fg)}
.qa-turn.ai{color:var(--muted)}
.qa-turn b{color:var(--accent);font-weight:700}

/* 관리 대시보드 */
.manage-body{max-width:680px;margin:0 auto;padding:8px 14px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:6px 0 16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat .n{font-size:22px;font-weight:800;color:var(--accent)}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.manage-sec{margin:16px 0 8px;font-size:14px;font-weight:700}
.bars{display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:8px;font-size:13px}
.bar-row .lbl{width:88px;flex:0 0 auto;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
.bar-row .track>span{display:block;height:100%;background:var(--accent)}
.bar-row .cnt{width:28px;text-align:right;color:var(--muted)}
.manage-note{margin-top:16px;padding:10px 12px;background:var(--bg2);border:1px dashed var(--line);border-radius:10px;font-size:12px;color:var(--muted);line-height:1.5}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.setting-row>span{font-size:14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:transparent;border:none;border-radius:0;padding:8px 14px;font-size:13px;color:var(--muted);font-weight:600}
.seg button.active{background:var(--accent);color:var(--on-accent)}

@media(min-width:680px){
  .qa-list,.manage-body{margin-left:auto;margin-right:auto}
}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:calc(var(--pl-h) + 20px);transform:translateX(-50%);background:#000;color:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:13px;z-index:60;max-width:90%}

@media(min-width:680px){
  .list{max-width:680px;margin:0 auto}
  .player{padding-left:calc(50% - 328px);padding-right:calc(50% - 328px)}
}