/* 지적도 관습: 밝은 종이 바탕 + 헤어라인 경계. 단지는 동 수에 따른 단일 색상 단계. */
:root{
  --paper:#f6f7f5; --surface:#ffffff; --surface-2:#fbfcfa;
  --ink:#1d2328; --ink-2:#515c66; --ink-3:#808b95; --ink-4:#a7b0b8;
  --line:#e2e6e1; --line-2:#ccd2cc;
  --s1:#e3ebf3; --s2:#c3d6e7; --s3:#97b9d4; --s4:#6b97bb; --s5:#44759c; --s6:#2b5679;
  --mark:#b4612a; --mark-soft:#f0e2d6;
  --none:#c9cfca;
  --bld:#5b6670; --bld-edge:#3c454d; --bld-none:#aab3ba; --bld-sel:#8c4a1f;
  --font:"IBM Plex Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --shadow:0 1px 2px rgba(29,35,40,.05), 0 6px 20px rgba(29,35,40,.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased}

/* ★ 헤더 한 줄 + 아래 두 칸(2026-10-19). 전에는 브랜드와 적재 수치가 왼쪽
   패널 안에 있어서, 안 변하는 숫자가 단지 상세를 볼 세로를 먹고 있었다. */
.app{display:grid;grid-template-columns:clamp(376px,32vw,520px) 1fr;
  grid-template-rows:auto 1fr;height:100%}
.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:18px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);
  min-height:0}
.topbar .brand{flex:none}
.topbar .statrow{margin-left:auto}
@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .topbar{flex-wrap:wrap;gap:8px}
  .topbar .statrow{margin-left:0;width:100%}
}

/* ---------------- 좌측 패널 ---------------- */
.panel{display:flex;flex-direction:column;gap:12px;min-height:0;padding:18px 16px;
  background:var(--surface);border-right:1px solid var(--line);overflow:hidden}
@media (max-width:900px){.panel{border-right:none;border-bottom:1px solid var(--line);max-height:52vh}}

.brand h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.brand p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}

.searchbar{position:relative;display:flex}
#q{flex:1;min-width:0;font:400 14px var(--font);color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:8px;padding:9px 32px 9px 12px}
#q:focus{outline:2px solid var(--mark);outline-offset:-1px;border-color:var(--mark);background:var(--surface)}
#q::placeholder{color:var(--ink-4)}
.ghost{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;
  border:none;background:none;color:var(--ink-3);font-size:17px;cursor:pointer;border-radius:5px}
.ghost:hover{background:var(--paper);color:var(--ink)}

.check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--mark);margin:0}

/* 헤더 오른쪽에 가로로. 박스 네 개로 60px 쓰던 것을 한 줄로 줄였다. */
.statrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* 헤더 안의 수치 - 박스가 아니라 '이름 값' 한 쌍으로 눕힌다 */
.stat{display:flex;align-items:baseline;gap:6px;min-width:0}
.stat .k{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}
.stat .k i{font-style:normal;font-size:9.5px;color:var(--ink-4);margin-left:3px}
.stat .v{font:500 14px var(--mono);font-variant-numeric:tabular-nums;line-height:1.3;
  white-space:nowrap}

/* 헤더의 이름 - 패널 안에 있을 때보다 작게, 설명은 옆으로 눕힌다 */
.topbar .brand{display:flex;align-items:baseline;gap:9px}
.topbar .brand h1{font-size:17px}
.topbar .brand p{margin:0;font-size:11px;color:var(--ink-3)}
@media (max-width:640px){.topbar .brand p{display:none}}

.listwrap{display:flex;flex-direction:column;min-height:0;flex:1}
/* ★ 상세를 볼 때 목록을 한 줄로 접는다(2026-10-19). 패널은 최대 520px 한 칸인데
   검색·필터·통계·목록·상세를 전부 세로로 쌓는다. 그래서 정작 보려던 단지 상세가
   max-height:46% 안에 갇혀 있었다. 목록을 접으면 그 자리를 상세가 받는다. */
.listhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;
  -webkit-user-select:none;user-select:none;
  font-size:11px;color:var(--ink-3);padding:0 2px 6px;border-bottom:1px solid var(--line)}
.listhead:hover{color:var(--ink-2)}
.listhead:focus-visible{outline:2px solid var(--line-2);outline-offset:2px;border-radius:3px}
/* ★ 아이콘만 두면 누를 수 있는 줄 모른다(2026-10-19). 글자로 적는다. */
.listhead .togl{margin-left:auto;display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px;border:1px solid var(--line);border-radius:99px;color:var(--ink-3)}
.listhead:hover .togl{border-color:var(--line-2);color:var(--ink-2)}
.listhead .caret{transition:transform .12s ease}
.panel.list-collapsed .listhead .caret{transform:rotate(-90deg)}
.panel.list-collapsed .list{display:none}
.panel.list-collapsed .listwrap{flex:none}
.panel.list-collapsed .listhead{border-bottom:none;padding-bottom:0}
/* 목록이 접히면 상세가 남은 세로를 **전부** 가져간다 */
.panel.list-collapsed .detail{max-height:none;flex:1;min-height:0}
.listhead .hint{color:var(--ink-4)}
.list{list-style:none;margin:0;padding:4px 0;overflow-y:auto;min-height:0;flex:1}
.list li{margin:0}
.row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px;
  border:1px solid transparent;border-radius:7px;background:none;cursor:pointer;font:inherit;color:var(--ink)}
.row:hover{background:var(--paper);border-color:var(--line)}
.row[aria-current="true"]{background:var(--mark-soft);border-color:var(--mark)}
.row .sw{width:10px;height:10px;border-radius:2px;flex:none}
.row .mid{flex:1;min-width:0}
.row .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ad{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d{font:400 11px var(--mono);color:var(--ink-3);flex:none;text-align:right;white-space:nowrap}
.muted{color:var(--ink-3);font-size:12.5px;padding:14px 4px;line-height:1.6}

/* ---------------- 상세 ---------------- */
.detail{border-top:1px solid var(--line);padding-top:12px;max-height:46%;overflow-y:auto}
.detail h2{margin:0 0 2px;font-size:15px;font-weight:600;line-height:1.3}
.detail .sub{margin:0 0 9px;font-size:11.5px;color:var(--ink-3);line-height:1.45}
.pill{display:inline-block;font:400 10px var(--mono);padding:2px 7px;border-radius:99px;
  border:1px solid var(--line-2);color:var(--ink-2);margin-bottom:8px}
.pill.r{border-color:var(--mark);color:var(--mark);background:var(--mark-soft)}
dl{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12.5px}
dt{color:var(--ink-3)}
dd{margin:0;text-align:right;font:400 12.5px var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sect{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;
  margin:10px 0 5px;padding-top:8px;border-top:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{text-align:left;font-weight:500;color:var(--ink-3);padding:3px 5px;border-bottom:1px solid var(--line)}
td{padding:3px 5px;border-bottom:1px solid var(--line);vertical-align:top}
td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:none}

/* ---------------- 지도 ---------------- */
.mapwrap{position:relative;min-width:0;min-height:0}
#map{position:absolute;inset:0;background:var(--paper)}
.leaflet-container{font-family:var(--font);background:var(--paper)}

.maplegend{position:absolute;right:12px;bottom:22px;z-index:600;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:11px;box-shadow:var(--shadow)}
.maplegend .lt{color:var(--ink-3);font-size:10px;letter-spacing:.04em;margin-bottom:5px}
.ramp{display:flex}
.ramp i{width:20px;height:10px;display:block}
.ramp i[data-s="1"]{background:var(--s1);border-radius:2px 0 0 2px}
.ramp i[data-s="2"]{background:var(--s2)} .ramp i[data-s="3"]{background:var(--s3)}
.ramp i[data-s="4"]{background:var(--s4)} .ramp i[data-s="5"]{background:var(--s5)}
.ramp i[data-s="6"]{background:var(--s6);border-radius:0 2px 2px 0}
.rl{display:flex;justify-content:space-between;font:400 10px var(--mono);color:var(--ink-3);margin-top:2px}
.lrow{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--ink-2)}
.lrow .sw{width:15px;height:10px;border-radius:2px;flex:none}
.lrow .sw.recap{background:var(--s3);border:1.5px solid var(--mark)}
.lrow .sw.none{background:var(--none);opacity:.5}
.lrow .sw.bld{background:var(--bld);border:1px solid var(--bld-edge)}
/* ---- 지도 위 표시 옵션 (네이버지도식 세로 묶음) ---- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mapctl{position:absolute;right:12px;top:12px;z-index:600;
  display:flex;flex-direction:column;gap:2px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.09)}
.mc{display:flex;flex-direction:column;align-items:center;gap:2px;
  width:46px;padding:6px 2px 5px;border:0;border-radius:7px;background:none;
  font:inherit;font-size:10.5px;line-height:1;color:var(--ink-3);
  cursor:pointer;-webkit-user-select:none;user-select:none}
.mc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linejoin:round;stroke-linecap:round}
.mc:hover{background:var(--surface-2);color:var(--ink-2)}
.mc:focus-visible{outline:2px solid var(--s5);outline-offset:-2px}
/* 켜진 것 - 글자가 아니라 **면**으로 보여준다. 작은 아이콘은 색만으론 안 보인다 */
.mc:has(input:checked),.mc[aria-pressed="true"]{background:var(--s5);color:#fff}
.mc:has(input:checked):hover,.mc[aria-pressed="true"]:hover{background:var(--s5);color:#fff}
.mcsep{height:1px;margin:3px 4px;background:var(--line)}
@media (max-width:900px){.mapctl{right:8px;top:8px}}
tr.canceled td{color:var(--ink-4);text-decoration:line-through}
.warnx{color:var(--mark);font-weight:500}
.note{margin:6px 0 0;font-size:11px;color:var(--ink-3);line-height:1.5;
  border-left:2px solid var(--line-2);padding-left:7px}

.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:700;
  background:var(--ink);color:#fff;font-size:12.5px;padding:9px 14px;border-radius:7px;
  box-shadow:var(--shadow);max-width:min(560px,calc(100% - 28px));line-height:1.5}
.toast b{font-family:var(--mono);font-weight:500}

.leaflet-popup-content-wrapper{border-radius:8px;box-shadow:var(--shadow)}
.leaflet-popup-content{margin:9px 11px;font-size:12.5px;line-height:1.5}
.leaflet-popup-content .t{font-weight:600;margin-bottom:3px}
.leaflet-popup-content .m{font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* 평형 집계 - 실제 전용면적 병기 */
.areas { font-size: 11px; line-height: 1.3; margin-top: 1px; }

.tgl { float:right; font-weight:400; font-size:11px; color:var(--muted,#888); cursor:pointer; }
.tgl input { vertical-align:-1px; margin-right:3px; }
.note.sm { padding:2px 2px 4px; font-size:11px; }

/* ---------- 단지 마커 ----------
   폴리곤 대신 기본으로 보이는 것. 지도 위에 얹히므로 대비를 확보한다. */
.cmark-wrap { background: none; border: 0; }
.cmark {
  position: relative; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 3px 8px 4px; border-radius: 7px;
  background: var(--surface); border: 1.5px solid var(--s5);
  box-shadow: var(--shadow); white-space: nowrap; cursor: pointer;
  font-family: var(--font); line-height: 1.15;
}
.cmark::after {                       /* 말풍선 꼬리 — 좌표를 정확히 가리킨다 */
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--surface); border-right: 1.5px solid var(--s5);
  border-bottom: 1.5px solid var(--s5); transform: rotate(45deg);
}
.cmark b { font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: -.2px; }
.cmark span { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -.3px; }
.cmark.recap { border-color: var(--mark); }
.cmark.recap::after { border-color: var(--mark); }
.cmark.sel {
  background: var(--s6); border-color: var(--s6); z-index: 500;
}
.cmark.sel::after { background: var(--s6); border-color: var(--s6); }
.cmark.sel b { color: #cddcea; }
.cmark.sel span { color: #fff; }

.maplegend .sw.mk { background: var(--surface); border: 1.5px solid var(--s5); }

.cmark.nodeal { border-color: var(--line-2); }
.cmark.nodeal::after { border-color: var(--line-2); }
.cmark.nodeal span { font-weight: 500; color: var(--ink-2); font-size: 11px; }

/* ---------- 법정동 마커 ----------
   단지 마커와 한눈에 구분되어야 한다. 단지는 흰 말풍선, 동은 짙은 알약. */
.lmark {
  transform: translate(-50%, -50%);
  display: flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(43,86,121,.92); color: #fff;
  box-shadow: var(--shadow); white-space: nowrap; cursor: pointer;
  font-family: var(--font); line-height: 1.2;
}
.lmark b { font-size: 12px; font-weight: 600; letter-spacing: -.3px; }
.lmark span { font-size: 11px; font-weight: 400; color: #bed2e3; }

.row.lawd .sw.dong { background: rgba(43,86,121,.92); border-radius: 999px; }
.row.lawd .nm { font-weight: 600; }

/* 거래가 안 붙은 단지 — 점으로만. 위치와 클릭은 그대로 살린다 */
.cdot {
  transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--s4); border: 1.5px solid var(--surface);
  box-shadow: 0 1px 3px rgba(29,35,40,.35); cursor: pointer;
}
.cdot.recap { background: var(--mark); }
.cdot.sel {
  width: 15px; height: 15px; background: var(--s6);
  border-width: 2.5px; box-shadow: 0 0 0 3px rgba(43,86,121,.25);
}
.cdot:hover { width: 13px; height: 13px; }

/* ---------------- 항공사진 모드 ----------------
   바탕이 어둡고 복잡해진다. 말풍선·점·범례의 대비만 올린다.
   폴리곤 색은 app.js 가 정하므로 건드리지 않는다 — 단지 동 수를
   나타내는 색 램프라서 여기서 바꾸면 범례와 어긋난다. */
body.sat .leaflet-container { background: #15181b; }
body.sat .cmark        { box-shadow: 0 2px 10px rgba(0,0,0,.5); }
body.sat .cmark.nodeal { border-color: rgba(255,255,255,.55); }
body.sat .cmark.nodeal::after { border-color: rgba(255,255,255,.55); }
body.sat .cdot         { box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
body.sat .maplegend    { box-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* ---------------- 단지 썸네일 ----------------
   상세 맨 위. 단지 폴리곤을 bbox 로 삼아 항공사진을 작게 띄운다.
   조감이지 외관이 아니다 — 외관은 로드뷰 칸이 카카오맵으로 넘긴다. */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 11px; }
.shot {
  position: relative; aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
}
.shot .leaflet-container { background: #15181b; }
.shot:hover { border-color: var(--mark); }
.shot.none {
  grid-column: 1 / -1; aspect-ratio: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 16px 10px;
  cursor: default; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.5;
}
.shot.none span { font-size: 11px; color: var(--ink-4); }
.shot.rv {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; background: var(--paper);
}
.shot.rv b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.shot.rv span { font-size: 10px; color: var(--ink-4); text-align: center; line-height: 1.35; }
.shot.rv:hover b { color: var(--mark); }

/* ---------------- 대장이 아직 없는 신축 ----------------
   단지와 '다르게' 보여야 한다. 같은 모양으로 섞으면 단지코드가 있는 것처럼
   읽히고, 동 목록·필지가 비어 있는 것이 결손으로 보인다.
   결손이 아니라 아직 대장이 안 나온 것이다(CONTEXT 4-13). */
.pill.nb { border-color: var(--warn, #b4690e); color: var(--warn, #b4690e);
           background: color-mix(in srgb, var(--warn, #b4690e) 10%, transparent); }
.row .sw.nb { background: repeating-linear-gradient(45deg,
              var(--warn, #b4690e) 0 3px, transparent 3px 6px);
              outline: 1.5px solid var(--warn, #b4690e); outline-offset: -1.5px; }
.row .nm .tag {
  font: 500 9.5px var(--mono); vertical-align: 1px; margin-left: 4px;
  padding: 1px 4px; border-radius: 3px; letter-spacing: -.2px;
  color: var(--warn, #b4690e);
  background: color-mix(in srgb, var(--warn, #b4690e) 12%, transparent);
}
.note.nb { border-left: 2px solid var(--warn, #b4690e); padding-left: 9px; }

.nbmark {
  position: relative; transform: translate(-50%, -100%);
  display: flex; align-items: baseline; gap: 4px;
  padding: 3px 8px 4px; border-radius: 7px; white-space: nowrap; cursor: pointer;
  background: var(--surface); border: 1.5px dashed var(--warn, #b4690e);
  box-shadow: var(--shadow); font-family: var(--font); line-height: 1.15;
}
.nbmark::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 7px; height: 7px; margin-left: -3.5px; background: var(--surface);
  border-right: 1.5px dashed var(--warn, #b4690e);
  border-bottom: 1.5px dashed var(--warn, #b4690e); transform: rotate(45deg);
}
.nbmark b { font: 500 9.5px var(--mono); color: var(--warn, #b4690e); }
.nbmark span { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -.3px; }
.nbmark i { font: 500 10.5px var(--mono); font-style: normal; color: var(--ink-3); }
.nbmark.sel { background: var(--warn, #b4690e); border-style: solid; }
.nbmark.sel::after { background: var(--warn, #b4690e); }
.nbmark.sel b, .nbmark.sel span, .nbmark.sel i { color: #fff; }
body.sat .nbmark { box-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* 신축 상세의 단지 안쪽 구분 — 평형표 머리 */
.subsect { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em;
           margin: 7px 0 3px; padding-left: 2px; }

/* 연결되지 않은 거래 — 추정이라는 것이 보여야 한다.
   확인된 집계와 같은 모양이면 구분이 사라진다. */
.sect.off { color: var(--warn, #b4690e); }
.note.off { border-left: 2px dashed var(--warn, #b4690e); padding-left: 9px; }
.note.off + .subsect, .note.off ~ table { opacity: .92; }

/* ---------------- 최근 본 단지 ---------------- */
.rechead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em;
  text-transform: uppercase; padding: 6px 8px 3px;
}
.reclear {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font: 400 10.5px var(--font); color: var(--ink-4); letter-spacing: 0;
  text-transform: none; border-radius: 4px;
}
.reclear:hover { background: var(--paper); color: var(--ink-2); }
.row.recent .sw.rec { background: var(--line-2); }

/* 공사 단계 — 가로로 흐르되 좁으면 줄바꿈된다.
   '허가 → 착공 → 사용승인' 을 한 덩어리로 묶어 중간에서 깨지지 않게 한다. */
dd.flow {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: baseline; gap: 2px 5px; line-height: 1.5;
}
dd.flow span { white-space: nowrap; }
dd.flow i { font-style: normal; color: var(--ink-3); margin-right: 3px;
            font: 400 10.5px var(--font); }
dd.flow em { font-style: normal; color: var(--ink-4); }
/* 제원은 값이 길어 라벨 폭을 조금 줄인다 */
.detail dl dt { white-space: nowrap; }

/* 갱신 전후 변동률 — 올랐나 내렸나가 색으로 보여야 한다 */
td .up   { font: 500 10.5px var(--mono); color: var(--warn, #b4690e); }
td .down { font: 500 10.5px var(--mono); color: var(--s6, #2b5679); }
td .muted { font: 400 10px var(--mono); line-height: 1.3; }

/* ---------------- 상세 헤더 · 탭 ----------------
   핵심은 헤더 한 줄에, 세부는 탭 안에. 한 화면에 다 쌓으면 스크롤만 길다. */
.facts { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.facts .muted { font: 400 11.5px var(--mono); }

/* ★ 탭이 5개가 됐다 (2026-10-18). 좁은 패널에서 줄바꿈되면 밑줄이 끊기므로
   **한 줄로 두고 가로 스크롤**한다. 스크롤바는 숨긴다 — 탭이 잘리면
   사용자가 밀어 보는 것이 자연스럽다. */
.tabs {
  display: flex; gap: 2px; margin: 11px 0 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; }
.tab {
  border: 0; background: none; cursor: pointer;
  padding: 6px 10px 7px; margin-bottom: -1px;
  font: 400 12.5px var(--font); color: var(--ink-3);
  border-bottom: 2px solid transparent; border-radius: 5px 5px 0 0;
}
.tab b { font: 500 11px var(--mono); color: var(--ink-4); margin-left: 3px; }
.tab:hover { background: var(--paper); color: var(--ink-2); }
.tab[aria-selected="true"] {
  color: var(--ink); font-weight: 500; border-bottom-color: var(--mark);
}
.tab[aria-selected="true"] b { color: var(--mark); }
.pane { padding-top: 2px; }
/* 탭 첫 섹션은 위 테두리가 겹쳐 보이므로 없앤다 */
.pane > .sect:first-child { border-top: 0; padding-top: 4px; }

/* ---------------- 출처 배지 ----------------
   이 화면의 숫자는 축 여섯 개에서 온다. 어느 축인지 보여야
   값이 어긋났을 때 그게 발견인지 오류인지 가릴 수 있다. */
.sect { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.src {
  margin-left: auto; flex: none;
  font: 400 9.5px var(--mono); letter-spacing: 0; text-transform: none;
  color: var(--ink-4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px 2px;
}
.src i { font-style: normal; color: var(--warn, #b4690e); }
.srcline {
  margin: 2px 0 8px; font: 400 10.5px var(--mono);
  color: var(--ink-4); line-height: 1.5;
}

/* ---------------- 평형 카드 ----------------
   좁은 패널에서 7열 표는 안 맞는다. '범위'·'직거래' 는 대개 비어 있는데 자리를
   차지하고, 부속 줄이 칸마다 따로 놀아 행이 들쭉날쭉했다.
   카드는 **없는 값이 자리를 만들지 않는다.** */
.plist { display: flex; flex-direction: column; gap: 1px; }
.prow {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 2px 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: 0; }
.prow .pa b { font: 600 14px var(--font); letter-spacing: -.3px; }
.prow .pa span { font: 400 11px var(--mono); color: var(--ink-3); margin-left: 4px; }
.prow .pb { text-align: right; }
.prow .pb b { font: 500 14px var(--mono); font-variant-numeric: tabular-nums;
              letter-spacing: -.3px; }
.prow .pb .mo { font-weight: 400; color: var(--ink-2); }
.prow .pb span { display: block; font: 400 10.5px var(--mono); color: var(--ink-3);
                 margin-top: 1px; }
.prow .pc { font: 400 11.5px var(--mono); color: var(--ink-3); white-space: nowrap; }
.prow .pm {
  grid-column: 1 / -1; margin-top: 3px;
  font: 400 10.5px var(--mono); color: var(--ink-4); line-height: 1.55;
}
.prow .pm em { font-style: normal; color: var(--line-2); margin: 0 5px; }
.prow .pm .up   { color: var(--warn, #b4690e); }
.prow .pm .down { color: var(--s6, #2b5679); }
.prow .pm .warnx { color: var(--warn, #b4690e); }
.tgl { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0;
       font-size: 11.5px; color: var(--ink-3); cursor: pointer; }

/* 추정 연결 배지 — 확인된 것과 구분돼야 한다 */
.est {
  font: 500 9.5px var(--mono); letter-spacing: 0; text-transform: none;
  color: var(--warn, #b4690e);
  background: color-mix(in srgb, var(--warn, #b4690e) 12%, transparent);
  border-radius: 3px; padding: 1px 5px 2px;
}

/* ---------- 빈칸의 사유 (app.js 의 GAP) ----------
   값이 아니라 사유라는 걸 한눈에 알아야 한다. 값처럼 보이면 "해당 없음" 이
   데이터로 읽힌다. 그래서 전부 기울임 + 낮은 대비로 깔고, 분류가 안 된 것
   (UNKNOWN) 만 경고색으로 띄운다 — **그건 버그 신호이지 상태가 아니다.** */
.gap { font-style: italic; font-size: .92em; opacity: .75; }
.g-scope   { color: #8a6d3b; }   /* 아직 적재 전 — 받으면 생긴다 */
.g-na      { color: #777; }      /* 해당 없음 */
.g-unsure  { color: #7a5c9e; }   /* 확인 불가 */
.g-empty   { color: #888; }      /* 원본에 값 없음 */
.g-unknown { color: #b23c2e; font-weight: 600; opacity: 1; }  /* ★ 분류 실패 = 버그 */
.g-unknown::after { content: ' ⚠'; }

/* ---------- 동 입면 (app.js elevationBlock) ----------
   지적도 톤 유지: 종이 바탕 + 헤어라인 지면선. 막대는 건물 색(--bld)을 쓰고
   부속동은 --bld-none 으로 낮춘다. 동이 많으면 가로로 흐른다 — 입면은
   가로로 읽는 그림이라 줄바꿈보다 스크롤이 맞다. */
.elev{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding:10px 2px 0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.elev::-webkit-scrollbar{height:6px}
.elev::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.ev-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:22px}
.ev-up{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:1}
.ev-n{font:400 9px var(--mono);color:var(--ink-4);line-height:1;margin-bottom:2px}
.ev-bar{width:17px;background:var(--bld);border:1px solid var(--bld-edge);
  border-bottom:none;border-radius:2px 2px 0 0}
.ev-bar.aux{background:var(--bld-none);border-color:var(--ink-4)}
/* 지하는 지면선 아래. 같은 색이면 지상과 구분이 안 되므로 점선 윤곽으로 비운다 */
.ev-bar.dn{background:var(--mark-soft);border:1px dashed var(--ink-4);
  border-top:none;border-radius:0 0 2px 2px}
.ev-ground{width:100%;height:1px;background:var(--line-2)}
.ev-dn{height:var(--dn,0);display:flex;justify-content:center;align-items:flex-start;width:100%}
.ev-nm{font:400 9px var(--mono);color:var(--ink-3);line-height:1.2;margin-top:3px;
  max-width:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-col:hover .ev-bar{background:var(--bld-sel);border-color:var(--bld-sel)}
.ev-col:hover .ev-nm{color:var(--ink)}

/* ---------- 동 x 층 격자 (app.js floorBlock) ----------
   입면(.elev)이 높이를 보여준다면 여기는 **각 층의 내용**이다.
   칸이 많으므로(24동 x 21층 = 504칸) 선을 최소화하고 색만 남긴다. */
.fgrid{margin-top:6px;overflow-x:auto;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:6px 6px 8px}
.fgrid::-webkit-scrollbar{height:6px}
.fgrid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.fg-row{display:flex;align-items:stretch;gap:1px;margin-bottom:1px}
.fg-h{flex:0 0 30px;position:sticky;left:0;z-index:1;background:var(--surface-2);
  font:400 9px var(--mono);color:var(--ink-3);text-align:right;padding-right:4px;line-height:11px}
.fg-h.dn{color:var(--mark)}                 /* 지하는 색으로 구분 */
.fg-c{flex:0 0 15px;height:11px;background:transparent;border-radius:1px}

.fg-top .fg-c{height:auto;min-height:14px}
.fg-lbl{font:400 8px var(--mono);color:var(--ink-3);writing-mode:vertical-rl;
  text-orientation:mixed;overflow:hidden;white-space:nowrap}

.f-home{background:var(--s5)}               /* 주거 */
.f-shop{background:var(--mark)}             /* 근린·업무 */
.f-park{background:var(--bld-none)}         /* 주차 */
.f-etc {background:var(--s2)}               /* 기타 */
/* 한 층에 용도가 둘 이상이면 빗금 — 색 하나로 뭉개지 않는다 */
.fg-c.multi{background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.55) 0 2px, transparent 2px 4px)}
.fg-c[title]:hover{outline:1.5px solid var(--bld-sel);outline-offset:0}

/* 범례용 작은 사각형 */
.fg-k{display:inline-block;width:8px;height:8px;border-radius:1px;
  margin:0 3px 0 7px;vertical-align:baseline}

/* 호가 있는 칸만 칠하고 글자를 보인다. 빈 칸은 그 라인에 그 층이 없다는 뜻. */
.hg-c.on{background:var(--s2);color:var(--ink-2)}
.hg-c.on:hover{background:var(--s4);color:#fff}
.hg-lbl{background:none;color:var(--ink-3);font-size:9px}

/* ---------- 동 구성: 단지 -> 동 -> 호 3단계 (app.js structureBlock) ----------
   한 섹션 안이지만 **단계가 세 겹이라는 건 보이게** 둔다. 각 축의 적재 범위가
   달라서, 한 덩어리로 보이면 무엇이 없어서 무엇이 안 보이는지 흐려진다. */
.struct{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.stage{border-left:2px solid var(--line-2);padding-left:9px}
.stage-h{display:flex;align-items:baseline;gap:6px;font:500 11.5px var(--font);
  color:var(--ink-2);margin-bottom:4px}
.stage-h .src{font:400 9.5px var(--mono);color:var(--ink-4);border:none;padding:0}
/* 아래 단계는 위에서 고른 동을 따라간다 — 들여써서 종속 관계를 보인다 */
.struct .stage + .stage{border-left-color:var(--s4);margin-left:8px}

/* 선택된 동 */
.ev-col{cursor:pointer}
.ev-col.sel .ev-bar{background:var(--bld-sel);border-color:var(--bld-sel)}
.ev-col.sel .ev-nm{color:var(--ink);font-weight:600}
.fg-lbl{cursor:pointer}
.fg-lbl.sel{background:var(--bld-sel);color:#fff;border-radius:2px}

/* ---------- 동 × 라인 × 층 격자 (app.js gridBlock) ----------
   가로 = 동 x 라인, 세로 = 층, 칸 = 호. 24동 x 4라인이면 ~96칸이라
   칸에 글자를 넣지 않는다 — 모양을 보는 그림이고 상세는 툴팁이다.
   동의 **첫 칸에만** 왼쪽 경계선을 둬서 동 경계가 보이게 한다. */
.gxgrid{overflow-x:auto;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:6px 6px 8px}
.gxgrid::-webkit-scrollbar{height:6px}
.gxgrid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.gx-row{display:flex;gap:1px;margin-bottom:1px}
.gx-h{flex:0 0 30px;position:sticky;left:0;z-index:2;background:var(--surface-2);
  font:400 9px var(--mono);color:var(--ink-3);text-align:right;padding-right:4px;line-height:11px}
.gx-h.dn{color:var(--mark)}
/* ★ 2026-10-18: 격자가 **한 동만** 그린다. 전에는 24개동을 가로로 다 펼쳐
   열이 12px 이었고, 그래서 라벨을 세로로 세워야(writing-mode:vertical-rl)
   들어갔다 — 읽을 수가 없었다. 동을 고르면 열이 2~4개로 줄어 **가로로 들어간다.**
   세로쓰기는 증상이고, 원인은 '전부 한꺼번에' 였다. */
.gx-c{flex:0 0 30px;height:13px;border-radius:1px}

.gx-lines{margin-bottom:3px}
.gx-lines .gx-h{color:var(--ink-4);font-size:9px}
.gx-lines .gx-c{height:auto;font:400 10px var(--mono);color:var(--ink-3);
  line-height:14px;text-align:center;white-space:nowrap}

/* ---------- 평형 고르기 (실거래 전용) ----------
   ★ 평형은 실거래에만 있는 축이다. 대장에는 호별 전용면적이 없다.
     그래서 이 줄은 실거래 섹션 안에만 있고 밖으로 안 나간다. */
.apick{display:flex;flex-wrap:wrap;gap:3px;margin:8px 0 2px}
.achip{border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  border-radius:99px;padding:3px 9px 4px;font:400 11.5px var(--mono);color:var(--ink-3);
  display:inline-flex;align-items:baseline;gap:4px;line-height:1.4}
.achip b{font:400 9.5px var(--mono);color:var(--ink-4);font-weight:400}
.achip:hover{background:var(--paper);color:var(--ink-2)}
.achip[aria-selected="true"]{border-color:var(--mark);color:var(--ink);
  background:var(--mark-soft);font-weight:500}
.achip[aria-selected="true"] b{color:var(--mark)}

/* ---------- 동 고르기 ----------
   격자가 한 동만 그리므로 **무엇을 보고 있는지**를 이 줄이 들고 있다. */
.dpick{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0 7px}
.dchip{border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  border-radius:6px;padding:3px 8px 4px;font:400 11.5px var(--font);color:var(--ink-3);
  display:inline-flex;align-items:baseline;gap:5px;line-height:1.4}
.dchip b{font:400 9.5px var(--mono);color:var(--ink-4);font-weight:400}
.dchip:hover{background:var(--paper);color:var(--ink-2)}
.dchip[aria-selected="true"]{border-color:var(--mark);color:var(--ink);
  background:var(--mark-soft);font-weight:500}
.dchip[aria-selected="true"] b{color:var(--mark)}
/* 호가 실제로 있는 칸은 테두리로 한 번 더 구분 — 층만 있는 칸과 다르다 */
.gx-c.ho{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.gx-c[title]:hover{outline:1.5px solid var(--bld-sel);outline-offset:0;z-index:1}

/* ---------- 격자 색 기준 토글 / 공시가격 분위 ----------
   분위는 **그 단지 안에서의** 5분위다. 단조 증가하는 한 계열로 칠해야
   "낮다/높다"가 읽힌다 — 색상이 바뀌면 순서가 안 보인다.
   가격이 없는 칸(p0)은 계열 밖의 회색으로 둔다. 0 으로 칠하면 "싸다"로 읽힌다. */

.p1{background:var(--s1)}
.p2{background:var(--s2)}
.p3{background:var(--s3)}
.p4{background:var(--s4)}
.p5{background:var(--s6)}
.p0{background:repeating-linear-gradient(45deg,var(--none) 0 2px,transparent 2px 4px);
  opacity:.5}

/* ---------------- 호 상세 (격자 칸 클릭) ----------------
   격자는 모양을 보는 그림이라 칸에 글자가 없다. 숫자는 툴팁에만 있었고,
   툴팁은 올려야 보이고 **공시가격을 한 회차만** 보여준다. 이 패널이 전 회차를 연다. */
#homodal{position:fixed;inset:0;display:none;z-index:1200;
  background:rgba(20,22,26,.42);align-items:center;justify-content:center;padding:18px}
#homodal.on{display:flex}
.hm-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);width:min(420px,100%);max-height:84vh;
  overflow:auto;padding:14px 15px 15px}
.hm-h{font:500 14px var(--font);color:var(--ink);display:flex;align-items:baseline;gap:7px}
.hm-h span{font:400 11.5px var(--mono);color:var(--ink-3)}
.hm-x{margin-left:auto;border:1px solid var(--line-2);background:var(--surface);
  cursor:pointer;border-radius:6px;padding:3px 9px;font:400 11.5px var(--font);color:var(--ink-3)}
.hm-x:hover{background:var(--paper);color:var(--ink)}
.hm-addr{margin:3px 0 9px;font:400 11px var(--mono);color:var(--ink-4)}
.hm-s{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:0 0 7px}
.hm-s b{font:500 17px var(--font);color:var(--ink)}
/* 전용면적 — 이 호에서 가장 먼저 읽히는 숫자다. 공시가격과 같은 급으로 둔다. */
.hm-s2{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:-2px 0 8px}
.hm-s2 b{font:500 15px var(--font);color:var(--ink)}

.hm-t{width:100%;border-collapse:collapse;font-size:12px}
.hm-t th{font:400 10px var(--mono);color:var(--ink-4);text-align:left;padding:2px 5px}
.hm-t th.n,.hm-t td.n{text-align:right}
.hm-t td{padding:2px 5px;border-bottom:1px solid var(--line);white-space:nowrap}
/* 막대는 **최신 회차 대비** 비율이다. 0 기준이 아니므로 길이를 절대 비교하지 않는다. */
.hm-bar{width:34%;padding-left:7px!important}
.hm-bar i{display:block;height:6px;border-radius:2px;background:var(--s3)}
.hm-f{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line);font-size:12px}
.hm-k{font:400 11px var(--mono);color:var(--ink-4)}
.hm-v{color:var(--ink-2)}
/* 누를 수 있는 칸임을 커서로 알린다 */
.gx-c.hit{cursor:pointer}

/* 호 상세 - 공용면적 용도별 내역 (2026-10-18).
   합계 한 줄로는 '전용률 45.3%' 가 왜 나왔는지 보이지 않았다. 용도가 보이면
   부대시설(기타공용)이 섞여 있다는 게 화면에서 바로 읽힌다. */
.hm-a{width:100%;border-collapse:collapse;margin:4px 0 2px;font-size:12px}
.hm-a td{padding:2px 0;border-top:1px solid var(--line);vertical-align:top}
/* 용도는 짧고 고정이라 줄바꿈하면 '부대/시설' 로 쪼개진다 - 화면에서 잡았다.
   가변 폭은 세부(기타용도)가 받는다. */
.hm-a td:first-child{white-space:nowrap;width:1%;padding-right:2px}
.hm-a td.n{text-align:right;white-space:nowrap;padding-left:6px}
.hm-a2{color:var(--ink-3);padding-left:6px!important;word-break:keep-all;line-height:1.35}

/* 격자 평형 필터 - 안 고른 평형은 숨기지 않고 흐린다 (2026-10-18).
   빼면 열이 사라져 동의 모양이 무너진다. 흐린 칸도 누를 수 있다. */
.gx-c.dim{opacity:.2;filter:grayscale(1)}
.gx-c.dim.hit{cursor:pointer}

/* 층 평면 모식도 (2026-10-18). 도면이 아니다 - 라인 순서와 전용면적 비율만
   실제 값이고, 깊이/모양/방향은 원본에 없어서 그리지 않는다. */
.fp{margin:8px 0 2px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fp-h{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--surface-2);
      font-size:13px;border-bottom:1px solid var(--line)}
.fp-h .muted{margin-left:auto;font-size:12px}
.fp-h .hm-x{margin-left:4px}
.fp-row{display:flex;gap:2px;padding:8px;align-items:stretch}
.fp-c{min-width:52px;height:68px;border:1px solid var(--line);border-radius:4px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:1px;cursor:pointer;overflow:hidden}
.fp-c b{font-size:12px;line-height:1.1}
.fp-c span{font-size:11px;color:var(--ink-3)}
.fp-c i{font-size:10px;color:var(--ink-3);font-style:normal}
.fp-c.dim{opacity:.2;filter:grayscale(1)}
/* 전용면적을 모르는 호 - 폭은 평균으로 두고 **점선**으로 '모른다' 고 적는다.
   빗금은 쓰면 안 된다: .p0(공시가격 없음)가 이미 빗금이라 한 무늬에 두 뜻이
   생긴다. 화면에서 실제로 섞여 보였다(2026-10-18). */
.fp-c.unk{border-style:dashed;border-color:var(--line-2);background:var(--surface-2)}
.gx-h.hit{cursor:pointer}
.gx-h.hit:hover{text-decoration:underline}

/* 평형 칩 2단 - 같은 평형 안의 타입(정확한 전용면적) (2026-10-18) */
.apick2{margin-top:-2px;padding-left:10px;border-left:2px solid var(--line)}
.achip em{font-style:normal;font-size:10px;color:var(--mark);margin-left:3px}

/* 평형별 평면도 (2026-10-18). 그림이지 좌표가 아니다 - 설명을 같이 단다. */
.fplan{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.fplan figure{margin:0;flex:1 1 180px;max-width:100%;border:1px solid var(--line);
              border-radius:8px;overflow:hidden;background:var(--surface)}
.fplan img{display:block;width:100%;height:auto}
.fplan figcaption{padding:4px 6px;font-size:12px;border-top:1px solid var(--line);
                  background:var(--surface-2)}
.fplan .srcline{flex:1 1 100%;margin:2px 0 0}
code{font:12px/1.4 var(--mono);background:var(--surface-2);padding:1px 4px;border-radius:3px}

/* 동 윤곽 위 평면 모식도 (2026-10-18).
   윤곽은 실측 폴리곤, 칸은 전용면적 비율. 방·벽은 원본에 없어 안 그린다. */
.pl-wrap{position:relative;padding:8px;background:var(--surface-2);
         border:1px solid var(--line);border-radius:8px;margin:6px 0 2px}
svg.pl{display:block;width:100%;max-height:260px}
.pl-bg{fill:var(--surface);stroke:none}
.pl-ol{fill:none;stroke:var(--bld-edge);stroke-width:.8;vector-effect:non-scaling-stroke}
.pl-s rect{fill:var(--s3);opacity:.9}
.pl-s line{stroke:var(--bld-edge);stroke-opacity:.45;stroke-width:1;
           vector-effect:non-scaling-stroke}
.pl-s.p1 rect{fill:var(--s1)} .pl-s.p2 rect{fill:var(--s2)}
.pl-s.p3 rect{fill:var(--s3)} .pl-s.p4 rect{fill:var(--s4)}
.pl-s.p5 rect{fill:var(--s5)} .pl-s.p0 rect{fill:var(--none);opacity:.5}
.pl-s.dim rect{opacity:.15;filter:grayscale(1)}
.pl-s.hit{cursor:pointer}
.pl-s.hit:hover rect{opacity:1}
.pl-lb text{font:2.6px var(--font);fill:var(--ink);text-anchor:middle;pointer-events:none}
.pl-lb text.sm{font-size:2.1px;fill:var(--ink-2)}
.pl-n{position:absolute;right:10px;top:10px;font-size:11px;color:var(--ink-3);
      display:flex;align-items:center;gap:2px}
.pl-n span{display:inline-block}
/* 탑상형(거의 정사각형) 동은 윤곽만 그린다 - 칸을 나누면 없는 배치를 지어낸다 */
svg.pl.tower{max-height:150px}
svg.pl.tower .pl-bg{fill:var(--surface);stroke:none}

/* 기준층 평면 보기 버튼 (2026-10-18)
   층 라벨 클릭은 발견되지 않는다 — 눌리게 생긴 것을 하나 내놓는다. */
.planrow{display:flex;align-items:center;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.planbtn{border:1px solid var(--mark);background:var(--surface);color:var(--ink);
  cursor:pointer;border-radius:3px;padding:5px 10px;font-size:11.5px;line-height:1.3}
.planbtn:hover{background:var(--mark-soft)}
.planbtn b{font:400 10px var(--mono);color:var(--mark);margin-left:6px}
.planrow .muted{font-size:10.5px}

/* 용도지역 비중 (2026-10-19)
   표가 아니라 막대다 — 읽는 사람이 보는 건 "어디가 더 큰가" 하나다. */
.zlist{margin:6px 0 2px}
.zrow{display:flex;align-items:center;gap:8px;padding:2.5px 0;font-size:11.5px}
.zn{flex:0 0 40%;color:var(--ink-2)}
.zrow .zbar{flex:1;height:7px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.zrow .zbar i{display:block;height:100%;background:var(--mark);opacity:.55}
.zrow b{flex:0 0 48px;text-align:right;font:400 10.5px var(--mono);color:var(--ink-3)}

/* 정비사업 구역 (2026-10-19)
   한 단지가 지구+구역 둘에 걸리는 게 정상이라 카드를 쌓는다.
   ★ 클래스명은 .rdv 다. .rv 는 **이미 로드뷰(.shot.rv)가 쓰고 있어서**
     그대로 뒀으면 로드뷰 칸에 테두리가 생겼다 - 화면에서 잡았다. */
.rdv{border:1px solid var(--line);border-left:3px solid var(--mark);
  border-radius:3px;padding:6px 9px;margin:5px 0;background:var(--surface-2)}
.rdv-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px}
.rdv-h b{color:var(--ink)}
.rdv-st{font:400 10.5px var(--mono);color:var(--mark);
  border:1px solid var(--mark);border-radius:9px;padding:1px 7px}
.rdv-m{font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* 겹쳐보기 — 용도지역 / 정비사업 구역 (2026-10-19)
   ★ 두 팔레트 모두 검증기(dataviz validate_palette)를 통과한 값이다.
     용도지역은 **범주**(서로 다른 색조), 추진단계는 **순서**(한 색조 밝기 단계).
     눈으로 고르지 않았다 — 명도대역·채도·색각(ΔE)·대비를 전부 돌렸다. */
:root{
  /* 용도지역: 지적 관습색(주거 노랑 / 상업 분홍 / 공업 보라 / 녹지 초록)을
     따르되, 검증을 통과하도록 명도와 채도를 조정한 값이다. */
  --z-res:#B38C29; --z-com:#D9566E; --z-ind:#7B63C4; --z-grn:#3E9C62;
  /* 추진단계: 한 색조 6단계. 밝은 쪽이 이른 단계. */
  --rd1:#C7A2CE; --rd2:#AC81B7; --rd3:#90629F;
  --rd4:#744787; --rd5:#58306C; --rd6:#3D1C50;
  --rd-na:#9AA3A8;
}
.check.ovl{gap:5px}
.check.ovl select{font:400 12px var(--font);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;padding:3px 6px;cursor:pointer}
.check.ovl select:focus{outline:2px solid var(--mark);outline-offset:-1px}
#olegend{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.maplegend .sw.dash{background:transparent;border:1px dashed var(--ink-4)}
.maplegend .sw.dash.na{border-color:var(--rd-na);background:var(--rd-na);opacity:.35}

/* 주변 상권 (2026-10-19) — 숫자 네 개를 한 줄에. 막대는 용도지역과 같은 꼴을 쓴다. */
.poirow{display:flex;gap:6px;margin:7px 0 4px;flex-wrap:wrap}
.poirow span{flex:1 1 68px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 4px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2);
  font-size:10px;color:var(--ink-3)}
.poirow span b{font:600 14px var(--font);color:var(--ink)}

/* 브랜드 칩 (2026-10-19)
   ★ 이름이 곧 식별이라 색에 뜻을 싣지 않는다. 500m 밖은 흐리게만 구분한다. */
.brands{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 2px}
.bchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:11px;padding:2px 8px}
.bchip b{font:400 10px var(--mono);color:var(--mark)}
.bchip.far{opacity:.45}

/* 생활 편의 묶음 (2026-10-19)
   ★ 많은 순이 아니라 **집 주변에서 먼저 찾는 순**으로 고정이다.
     순서가 정보라서 정렬하지 않는다. */
.lifegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:4px;margin:7px 0 2px}
.lcell{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 3px;
  border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.lcell b{font:600 15px var(--font);color:var(--ink);line-height:1.1}
.lcell span{font-size:10px;color:var(--ink-3);text-align:center}
.lcell span i{font-style:normal;color:var(--ink-4)}
.lcell.far{opacity:.5}
.lt2{margin:10px 0 2px;font-size:11px;color:var(--ink-3)}


/* 주변 학교 (2026-10-19) — 셋(초/중/고)뿐이라 격자가 아니라 세로로 쌓는다.
   숫자보다 **이름**이 먼저 읽혀야 한다 - 사람은 "어느 학교" 를 먼저 묻는다. */
.schrow { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.scell  { display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline;
          gap: 4px 8px; padding: 7px 9px; border: 1px solid var(--line);
          border-radius: 7px; background: var(--surface); }
.scell .sg { font-size: 11px; color: var(--ink-3); letter-spacing: -.02em; }
.scell b   { font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.scell .sd { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.scell .sn { grid-column: 2 / -1; font-size: 11px; color: var(--ink-4); }


/* 상권의 1년 변화 (2026-10-19)
   ★ 색으로만 말하지 않는다 - '없어짐/새로' 라는 **글자**를 같이 둔다.
     빨강·초록만으로 읽게 하면 색을 구분 못 하는 사람에게는 아무 말도 안 한 것이다. */
.churn { display: flex; gap: 6px; margin: 6px 0 2px; }
.churn span { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); font-size: 10px; color: var(--ink-3); }
.churn b { font: 600 14px var(--font); line-height: 1.1; }
.churn .cgone b { color: #A8442C; }     /* 줄어든 쪽 */
.churn .cnew  b { color: #2F6B4F; }     /* 늘어난 쪽 */
.churn .cnet    { color: var(--ink-3); justify-content: center; font-size: 11px; }
.churn .cnet b  { color: var(--ink); font-size: 14px; }


/* 배정 초등학교(학구도) (2026-10-19) — 거리보다 **위**에, 한 줄로 크게.
   사람이 제일 먼저 묻는 것이 "그래서 어느 학교 가요?" 다. */
.zrow2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--line-2);
  border-radius: 7px; background: var(--surface-2); }
.zrow2 .zt { font-size: 11px; color: var(--ink-3); }
.zrow2 b { font: 600 14px var(--font); letter-spacing: -.02em; }
.zrow2 .zb { font-size: 10px; color: var(--mark); border: 1px solid var(--mark-soft);
  background: var(--mark-soft); border-radius: 3px; padding: 1px 5px; }


/* 버스 번호 칩 (2026-10-19)
   ★ 서울 버스의 관습색(간선 파랑 / 지선 초록 / 마을 연두 / 광역 빨강)을 쓰되,
     **색만으로 말하지 않는다** - 번호는 글자로 읽히고, 종류는 title 에 적는다. */
.buses { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.bno { font: 600 11px var(--mono); letter-spacing: -.01em; padding: 2px 6px;
  border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.bt3  { background:#E4EDF6; color:#1F4C7A; border-color:#C5D8EA; }  /* 간선 */
.bt4  { background:#E3F0E6; color:#20603A; border-color:#C5E0CC; }  /* 지선 */
.bt2  { background:#EFF4DD; color:#4C5B1E; border-color:#DDE7BF; }  /* 마을 */
.bt6  { background:#F7E4E4; color:#8A2B2B; border-color:#EBC8C8; }  /* 광역 */
.bt15 { background:#E8E4F2; color:#45307A; border-color:#D3CBE6; }  /* 심야 */
.bt5, .bt1, .bt7, .bt8, .bt10, .bt14, .bt0 {
  background:var(--surface-2); color:var(--ink-2); border-color:var(--line-2); }


/* 말로 찾기 (2026-10-19) */
.seg{display:flex;gap:4px;margin:0 0 6px}
.segbtn{flex:1;padding:6px 8px;font:500 12px var(--font);color:var(--ink-3);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.segbtn[aria-selected="true"]{color:var(--ink);background:var(--surface-2);
  border-color:var(--line-2);font-weight:600}
.askhint{margin:6px 0 2px;font-size:11px;color:var(--ink-3);line-height:1.9}
.askhint .ex{font:inherit;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;margin:0 2px;cursor:pointer}
.askhint .ex:hover{border-color:var(--line-2)}
.askbox{padding:9px 11px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--surface-2);margin-bottom:6px;list-style:none}
.askbox .at{font-size:11px;color:var(--ink-3);margin-bottom:5px}
.arow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;line-height:1.7}
.arow .ak{width:58px;flex:none;font-size:11px;color:var(--ink-3)}
.arow b{font:600 12px var(--font);letter-spacing:-.02em}
.arow i{font-style:normal;font-size:11px;color:var(--ink-4)}
/* 무관 - 단지 검색으로 바꿀 수 없는 말 */
.asknote.off{color:var(--ink-3)}
.asknote.off .gap{background:var(--line);color:var(--ink-2)}
/* 로그인 (2026-10-19) */
.askbox.login{display:grid;gap:8px}
.lnote{font-size:11px;color:var(--mark);line-height:1.6}
.lrow{display:flex;align-items:center;gap:8px}
.lin{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line-2);border-radius:7px;
     background:var(--surface);font:400 13px var(--font);color:var(--ink)}
.lin:focus{outline:none;border-color:var(--s4);box-shadow:0 0 0 3px var(--s1)}
.lbtn{padding:8px 16px;border:0;border-radius:7px;background:var(--s5);color:#fff;
      font:600 12px var(--font);cursor:pointer}
.lbtn:hover{background:var(--s6)}
.lbtn:disabled{background:var(--line-2);cursor:default}
.lerr{font-size:11px;color:var(--mark)}
.arow.ai b{color:var(--s6)}
.arow.ai .ak{color:var(--s6)}
.arow.bad b{color:var(--mark)}
.arow.bad i b{color:var(--mark)}
.asknote{list-style:none;margin:0 0 6px;padding:8px 10px;font-size:12px;line-height:1.6;
  border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.asknote .gap{display:inline-block;margin-right:6px;padding:1px 5px;border-radius:3px;
  font:600 10px var(--mono);background:var(--mark-soft);color:var(--mark)}
.row.ask .rk{display:inline-block;min-width:16px;margin-right:5px;
  font:600 11px var(--mono);color:var(--ink-4)}
.row.ask .kd{display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px;
  font-size:10px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line)}
.row.ask .d b{font:600 13px var(--font);color:var(--ink)}