/* 레이더룸 공통 토큰 — 색은 세 가지만: 블랙 #0A0A0A · 화이트 #F4F2EE · 레드 #E1251B (2+1)
   상태는 레드의 진하기 · 채움/테두리 · 반전으로만 나눈다. 섞은 색(color-mix)은 이 셋의 투명도일 뿐 새 색이 아니다. */
:root{--ink:#0A0A0A;--paper:#F4F2EE;--red:#E1251B;
 --bg:var(--ink);--fg:var(--paper);
 --r:4px;--r2:10px;--pop:4px 4px 0 var(--red);
 --dot:radial-gradient(color-mix(in srgb,var(--fg) 16%,transparent) 1px,transparent 1.6px);
 --f-ui:'Noto Sans KR',system-ui,'Malgun Gothic',sans-serif;--f-num:'Space Grotesk','Noto Sans KR',ui-monospace,sans-serif}
.light{--bg:var(--paper);--fg:var(--ink);--pop:4px 4px 0 var(--ink)}
/* 바탕·글자에서 갈라진 값 — 테마(.light)가 바뀌는 자리에서 다시 계산되게 둘 다에 둔다 */
:root,.light{--p1:color-mix(in srgb,var(--fg) 5%,var(--bg));--p2:color-mix(in srgb,var(--fg) 9%,var(--bg));--p3:color-mix(in srgb,var(--fg) 15%,var(--bg));
 --ln:color-mix(in srgb,var(--fg) 14%,transparent);--ln2:color-mix(in srgb,var(--fg) 28%,transparent);
 --mu:color-mix(in srgb,var(--fg) 62%,var(--bg));--mu2:color-mix(in srgb,var(--fg) 42%,var(--bg));
 --rs:color-mix(in srgb,var(--red) 16%,transparent);--rs2:color-mix(in srgb,var(--red) 38%,transparent);}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:14px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,h4{margin:0}
img{max-width:100%}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mu{color:var(--mu)}.sm{font-size:12px}.xs{font-size:11px}
.red{color:var(--red)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp{flex:1}
.mt{margin-top:12px}.mt2{margin-top:20px}

/* ── 카드 · 머리 딱지 ── */
.card{background:var(--p1);border:1px solid var(--ln);border-radius:var(--r2);padding:16px;min-width:0;position:relative}
.card+.card,.grid+.card,.card+.grid,.grid+.grid,.verdict+.grid{margin-top:14px}
.ch{display:flex;align-items:flex-start;gap:8px 10px;flex-wrap:wrap;margin:0 0 12px}
.ch h3{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.ch .tip{font-size:11.5px;color:var(--mu);font-weight:500;flex-basis:100%;margin-top:-4px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:minmax(0,1fr)}}

/* 연결 상태 딱지 4종 — 레드 진하기·채움·테두리로만 */
.bdg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;white-space:nowrap;letter-spacing:-.01em;margin-left:auto}
.bdg::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.live{background:var(--fg);color:var(--bg)}
.bdg.live::before{background:var(--red)}
.bdg.proxy{border:1.5px solid var(--red);color:var(--red)}
.bdg.soon{border:1px dashed var(--ln2);color:var(--mu)}
.bdg.soon::before{background:transparent;border:1px solid currentColor}
.bdg.need{background:var(--red);color:var(--paper)}
.bnote{font-size:11px;color:var(--mu);flex-basis:100%;margin-top:-2px}

/* 숫자 출처 꼬리표 — 실측 · 입력 · 추정 · 미확인 */
.src{display:inline-block;font-size:10px;font-weight:700;padding:0 5px;border-radius:3px;line-height:16px;vertical-align:middle;white-space:nowrap;font-family:var(--f-ui)}
.src.s-실측{background:var(--p3);color:var(--fg)}
.src.s-입력{border:1px solid var(--red);color:var(--red)}
.src.s-추정{border:1px dashed var(--ln2);color:var(--mu)}
.src.s-미확인{color:var(--mu2);text-decoration:line-through}
.at{font-size:10.5px;color:var(--mu2);white-space:nowrap}

/* KPI */
.kpi{background:var(--p1);border:1px solid var(--ln);border-radius:var(--r2);padding:14px;min-width:0}
.kpi .lab{font-size:12px;color:var(--mu);font-weight:700}
.kpi .v{font-family:var(--f-num);font-size:30px;font-weight:700;line-height:1.15;margin:4px 0 2px}
.kpi .v small{font-size:13px;font-weight:600;color:var(--mu);margin-left:2px}
.kpi .v.none{font-size:17px;color:var(--mu);font-family:var(--f-ui)}
.kpi .b{font-size:11px;color:var(--mu);line-height:1.4}
.kpi.hot{border-color:var(--red);box-shadow:var(--pop)}

/* 한 줄 결론 */
.verdict{border-left:4px solid var(--red);padding:12px 14px;background:var(--p2);border-radius:0 var(--r2) var(--r2) 0;font-size:16px;font-weight:800;line-height:1.45}

/* 표 */
.tbw{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11.5px;color:var(--mu);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--ln2);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--ln);vertical-align:top}
td.n,th.n{text-align:right;font-family:var(--f-num)}
tr.me td{background:var(--rs)}

/* 막대 · 칩 */
.bar{height:8px;background:var(--p3);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg)}
.bar.r i{background:var(--red)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--ln2)}
.chip.on{border-color:var(--red);color:var(--red);font-weight:700}
.chip.ok{background:var(--p3)}

/* 버튼 · 입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:var(--r);border:1px solid var(--ln2);font-weight:700;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn.pri{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn.inv{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.in{width:100%;padding:9px 11px;border-radius:var(--r);border:1px solid var(--ln2);background:var(--bg);min-width:0}
textarea.in{min-height:90px;resize:vertical}

/* 예시(준비 중) — 흐리게 + 「예시」 */
.ex{position:relative;border-radius:var(--r2);overflow:hidden}
.ex>.exin{filter:blur(1.4px);opacity:.42;pointer-events:none;user-select:none}
.ex::after{content:'예시';position:absolute;top:8px;left:8px;font-size:11px;font-weight:900;padding:2px 8px;border:1.5px solid var(--fg);border-radius:3px;background:var(--bg);letter-spacing:.1em}

/* 리뷰 */
.rv{border-bottom:1px solid var(--ln);padding:10px 0}
.rv:last-child{border-bottom:0}
.rv .meta{font-size:11.5px;color:var(--mu)}
.rv .body{font-size:13px;margin-top:4px;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.stars{color:var(--red);font-weight:800}

/* 처방 장부 */
.rx{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--ln)}
.rx:last-child{border-bottom:0}
.rx .no{font-family:var(--f-num);font-weight:800;font-size:18px;color:var(--red)}
.rx ul{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--mu)}

/* 서류철 리포트 */
.folder{background:var(--paper);color:var(--ink);border-radius:var(--r2);padding:20px;box-shadow:6px 6px 0 var(--red);border:1px solid var(--ink);--fg:var(--ink);--bg:var(--paper);--mu:color-mix(in srgb,var(--ink) 62%,var(--paper));--mu2:color-mix(in srgb,var(--ink) 42%,var(--paper));--ln:color-mix(in srgb,var(--ink) 14%,transparent);--ln2:color-mix(in srgb,var(--ink) 28%,transparent);--p1:color-mix(in srgb,var(--ink) 4%,var(--paper));--p2:color-mix(in srgb,var(--ink) 7%,var(--paper));--p3:color-mix(in srgb,var(--ink) 13%,var(--paper))}
.folder .tab{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:3px 3px 0 0;margin:-20px 0 12px}
.folder h4{font-size:13px;font-weight:900;margin:18px 0 8px;padding-top:12px;border-top:2px solid var(--ink)}
.stamp{display:inline-block;border:2px solid var(--red);color:var(--red);font-weight:900;padding:2px 10px;transform:rotate(-4deg);font-size:12px;letter-spacing:.1em}

/* 지도 검색 재현 */
.mapl{border:1px solid var(--ln2);border-radius:var(--r2);overflow:hidden}
.mapl .q{padding:10px 12px;border-bottom:1px solid var(--ln2);font-weight:700;display:flex;gap:8px}
.mapl .it{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:10px 12px;border-bottom:1px solid var(--ln);align-items:center}
.mapl .it:last-child{border-bottom:0}
.mapl .it .rk{font-family:var(--f-num);font-weight:800;font-size:17px;text-align:center}
.mapl .it.me{background:var(--rs);outline:2px solid var(--red);outline-offset:-2px}
.mapl .gap{text-align:center;color:var(--mu);font-size:12px;padding:4px;border-bottom:1px solid var(--ln)}

.empty{padding:22px;text-align:center;color:var(--mu);border:1px dashed var(--ln2);border-radius:var(--r2);font-size:13px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:99px;font-weight:700;font-size:13px;z-index:99;max-width:90vw}
.grid>.card{margin-top:0!important}