/* 통화 분석 — 휴대폰 먼저 (375px 기준) · 밝은 배경 + 진한 남색 */
:root { --bg:#F4F6F9; --card:#fff; --line:#DDE3EA; --ink:#111827; --muted:#64748B; --navy:#1F3864; --blue:#1F5FBF;
        --green:#1E7B3A; --red:#B42318; --amber:#8A5A00; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }      /* .seg · .card 의 display 가 숨김 속성을 덮지 않게 */
.sum.fold { -webkit-line-clamp:4; cursor:pointer; } .sum.open { -webkit-line-clamp:unset; display:block; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 "Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif; -webkit-text-size-adjust:100%; }
a { color:var(--blue); }
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--navy); color:#fff; }
.top .brand { color:#fff; text-decoration:none; font-weight:700; font-size:17px; }
.inline { margin:0; } .link { background:none; border:0; color:#C9D8EE; font:inherit; font-size:13px; cursor:pointer; padding:6px; }
main#app { max-width:760px; margin:0 auto; padding:12px 16px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 13px; margin-bottom:10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:40px; padding:8px 14px; border-radius:10px; border:0; background:var(--navy); color:#fff; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.sm { min-height:34px; padding:5px 11px; font-size:13px; font-weight:500; }
.btn.grey { background:#EEF2F7; color:#334155; } .btn.red { background:#FDE7E3; color:var(--red); } .btn.line { background:#fff; color:var(--navy); border:1px solid #C9D1DC; }
.btn[disabled] { opacity:.5; }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--red); font-size:14px; }
/* 로그인 */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login .card { width:100%; max-width:380px; padding:22px 20px; }
.login .brand { font-size:20px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.login label { display:block; margin:10px 0; font-size:13.5px; color:#334155; }
.login input { display:block; width:100%; margin-top:4px; font:inherit; font-size:16px; padding:10px 12px; border:1px solid #C9D1DC; border-radius:10px; }
.login .btn { width:100%; margin-top:8px; }
/* 위 칸 */
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.up { position:relative; overflow:hidden; } .up input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ag { font-size:12.5px; color:var(--muted); margin-left:auto; } .ag b.on { color:var(--green); } .ag b.off { color:var(--red); }
.money { font-size:12.5px; color:var(--muted); margin-top:8px; }
.meter { height:6px; background:#E5EAF1; border-radius:4px; overflow:hidden; margin-top:4px; } .meter i { display:block; height:100%; background:var(--blue); }
.meter i.hot { background:var(--red); }
.prog { margin-top:8px; font-size:13px; }
.seg { display:flex; gap:6px; margin:4px 0 10px; }
.seg button { flex:1; font:inherit; font-size:13.5px; padding:8px 4px; border:1px solid #D5DCE6; border-radius:10px; background:#fff; color:#334155; }
.seg button.on { background:var(--navy); border-color:var(--navy); color:#fff; }
/* 목록 */
.list { display:flex; flex-direction:column; gap:8px; }
.it { background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 13px; }
.it.dim { background:#FAFBFC; }
.it a.go { display:block; text-decoration:none; color:inherit; }
.h { display:flex; gap:8px; align-items:baseline; } .h b { font-size:15.5px; } .h small { color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap; }
.sum { font-size:13.5px; color:#374151; margin-top:4px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; align-items:center; }
.st { display:inline-block; font-size:11.5px; padding:2px 8px; border-radius:999px; background:#F1F4F8; color:#475569; white-space:nowrap; }
.st.ok { background:#E7F6EC; color:var(--green); } .st.part { background:#FFF4E5; color:var(--amber); } .st.none { background:#F1F4F8; color:#5B6575; }
.st.bad { background:#FDE7E3; color:var(--red); } .st.run { background:#E8EEF7; color:#33507A; }
.st.web { background:#E6F4F7; color:#0B5563; }
.st.term { background:#EEF4FB; color:var(--navy); }
a.it.go { display:block; text-decoration:none; color:inherit; }
/* 출처 표시 (답 맨 위 · 크게) */
.srcline { margin-bottom:6px; }
.src { display:inline-block; font-size:13px; font-weight:700; padding:3px 10px; border-radius:8px; }
.src.ok { background:#E7F6EC; color:var(--green); } .src.web { background:#E6F4F7; color:#0B5563; }
.src.lock { background:#FFF4E5; color:var(--amber); } .src.none { background:#F1F4F8; color:#5B6575; }
/* 대화 줄 고르기 */
.lines { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ln { display:flex; gap:8px; padding:9px 12px; border-bottom:1px solid #EEF1F5; font-size:14.5px; line-height:1.5; cursor:pointer; }
.ln:last-child { border-bottom:0; } .ln:active { background:#F3F7FC; }
.ln.on { background:#FFF4D6; box-shadow:inset 4px 0 0 #E0A100; }
.ln .tm { flex:0 0 auto; font-size:11.5px; color:var(--muted); padding-top:3px; }
.ln .lt { flex:1; word-break:break-word; }
.pick { position:sticky; bottom:8px; z-index:6; box-shadow:0 -4px 18px rgba(16,24,40,.12); max-height:60vh; overflow:auto; }
.pk-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.pk { position:relative; margin-bottom:8px; } .pk textarea { width:100%; font:inherit; font-size:15px; padding:8px 30px 8px 10px; border:1px solid #C9D1DC; border-radius:10px; resize:vertical; }
.pk .x { position:absolute; top:4px; right:4px; border:0; background:none; font-size:18px; color:#64748B; cursor:pointer; }
.btn.full { width:100%; margin-top:4px; }
/* 주제별 묶음 */
.topic { background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.tp-h { display:flex; gap:8px; align-items:baseline; } .tp-h b { font-size:15.5px; color:var(--navy); } .tp-h .tm { font-size:12px; color:var(--muted); margin-left:auto; }
.tp-s { font-size:14px; color:#374151; margin-top:4px; line-height:1.55; }
.cqs { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.cq { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid #DDE3EA; border-radius:10px; background:#FAFBFD; cursor:pointer; font-size:14.5px; line-height:1.45; }
.cq input { width:20px; height:20px; margin-top:1px; flex:0 0 auto; }
.cq small { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.cq.on { background:#FFF4D6; border-color:#E0A100; }
details.raw { margin-top:8px; } details.raw summary { font-size:12.5px; color:var(--muted); cursor:pointer; }
details.raw .lines { margin-top:6px; }
.ref .rv.w { color:#0B5563; } .ref .rv.l { color:var(--amber); } .ref .rq.u { color:#64748B; font-size:11.5px; word-break:break-all; }
.acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.empty { color:var(--muted); text-align:center; padding:28px 8px; font-size:14px; }
/* 낱말 */
.kws { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.kw { display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:4px 6px 4px 10px; border-radius:999px; background:#EEF4FB; color:var(--navy); }
.kw button { border:0; background:none; color:#64748B; font-size:15px; line-height:1; cursor:pointer; padding:0 4px; }
.kwadd { display:flex; gap:6px; margin-top:8px; } .kwadd input { flex:1; min-width:0; font:inherit; font-size:15px; padding:8px 10px; border:1px solid #C9D1DC; border-radius:10px; }
/* 상세 */
.dh { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .dh h2 { margin:0; font-size:18px; } .dh small { color:var(--muted); }
audio { width:100%; margin:8px 0 2px; height:40px; }
.tabs { position:sticky; top:48px; z-index:5; background:var(--bg); padding:8px 0; display:flex; gap:6px; }
.tabs button { flex:1; font:inherit; font-size:14px; padding:9px 4px; border:1px solid #D5DCE6; border-radius:10px; background:#fff; color:#334155; }
.tabs button.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.q { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 13px; margin-bottom:10px; }
.qq { font-size:15px; font-weight:600; line-height:1.45; } .qq .who { font-size:11.5px; font-weight:500; color:var(--muted); margin-right:4px; display:block; }
.qm { font-size:12px; color:var(--muted); margin:4px 0 6px; }
.tm { cursor:pointer; text-decoration:underline; }
.a { font-size:14.5px; line-height:1.65; white-space:pre-line; margin-top:6px; word-break:break-word; }
.warn { font-size:13px; background:#FFF8EC; border:1px solid #F1D9A6; color:#6B4E16; border-radius:8px; padding:6px 10px; margin-top:8px; white-space:pre-line; }
.ask { font-size:13px; background:#EEF4FB; border:1px solid #CFE0F3; color:var(--navy); border-radius:8px; padding:6px 10px; margin-top:6px; white-space:pre-line; }
.refs { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ref { display:block; text-decoration:none; border:1px solid #DDE3EA; border-radius:9px; padding:7px 10px; background:#FAFBFD; color:#1F2937; }
.ref .rt { font-size:12.5px; font-weight:600; color:var(--navy); } .ref .rq { font-size:12.5px; color:#475569; margin-top:2px; line-height:1.45; word-break:break-word; }
.ref .rv { font-size:11px; margin-left:6px; white-space:nowrap; } .ref .rv.y { color:var(--green); } .ref .rv.n { color:var(--red); }
details.sr { font-size:12px; color:var(--muted); margin-top:6px; } details.sr summary { cursor:pointer; }
.msgs { display:flex; flex-direction:column; gap:6px; }
.m { max-width:86%; padding:7px 11px; border-radius:14px; font-size:14px; line-height:1.5; word-break:break-word; }
.m.me { align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.m.ot { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.m .tm { font-size:10.5px; opacity:.75; margin-left:6px; }
.m .un { display:block; font-size:11.5px; margin-top:3px; color:#B45309; } .m.me .un { color:#FFE7A8; }
ul.todo { margin:0; padding-left:20px; } ul.todo li { margin:5px 0; font-size:14.5px; }
.note { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.55; }
/* 원문 보기 */
.vh { padding:12px 16px 0; max-width:1000px; margin:0 auto; } .vh h1 { font-size:16px; margin:2px 0; line-height:1.4; word-break:break-word; } .vh small { color:var(--muted); }
.vnav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:8px 16px; max-width:1000px; margin:0 auto; }
.pdfw { max-width:1000px; margin:0 auto; padding:0 8px 40px; } .pg { position:relative; margin:0 auto; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.dv-hl { position:absolute; background:rgba(255,213,0,.42); mix-blend-mode:multiply; border-radius:2px; pointer-events:none; }

.cq.vf span{color:#5b6475}
.src.none{background:#f1f3f6;color:#5b6475}