:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e2e5ea; --line2:#eef0f4;
  --fg:#1a1d22; --dim:#6b7280; --dim2:#9aa1ac;
  --accent:#2563eb; --accent-bg:#e8efff;
  --good:#0f7b5f; --good-bg:#e2f5ee; --bad:#c2410c;
  --star:#f59e0b;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14171c; --panel:#1b1f26; --line:#2b313a; --line2:#232830;
    --fg:#e6e9ee; --dim:#9aa3b0; --dim2:#6d7684;
    --accent:#5b8cff; --accent-bg:#1e2942;
    --good:#3ecf9a; --good-bg:#14332a; --bad:#ff8a5c;
    --star:#fbbf24;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; background:var(--bg); color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
       "Malgun Gothic","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 필터 레일 ---------- */
#rail{
  width:272px; flex:0 0 272px; height:100vh; overflow-y:auto;
  background:var(--panel); border-right:1px solid var(--line);
  padding:14px 14px 24px;
}
#rail header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#rail h1{font-size:15px;margin:0;letter-spacing:-.2px}
#reset{
  font:inherit;font-size:11px;color:var(--dim);background:none;
  border:1px solid var(--line);border-radius:5px;padding:3px 7px;cursor:pointer;
}
#reset:hover{color:var(--fg);border-color:var(--dim2)}

.grp{margin-bottom:15px}

/* ---------- 사용자 · 저장한 조건 ---------- */
.btn{
  font:inherit;font-size:11.5px;padding:5px 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--dim);white-space:nowrap;
}
.btn:hover{color:var(--fg);border-color:var(--dim2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn.wide{width:100%}
.userrow{display:flex;gap:6px;align-items:center}
.userrow input{
  flex:1;min-width:0;font:inherit;padding:6px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--fg);
}
.userrow input:focus,#savename:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}
.avatar{
  width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent-bg);
  color:var(--accent);display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;
}
.who-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint-note{font-size:10.5px;color:var(--dim2);margin-top:5px;line-height:1.5}
#savedlist{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.empty-note{font-size:11px;color:var(--dim2);padding:2px 0 4px}
.sf{
  display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);padding-left:8px;
}
.sf:hover{border-color:var(--dim2)}
.sf.active{border-color:var(--accent);background:var(--accent-bg)}
.sf .apply{
  flex:1;min-width:0;text-align:left;background:none;border:none;color:var(--fg);
  font:inherit;font-size:12px;padding:6px 0;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sf.active .apply{color:var(--accent);font-weight:600}
.sf .overwrite{
  background:none;border:none;font:inherit;font-size:10.5px;color:var(--bad);
  cursor:pointer;padding:3px 2px;white-space:nowrap;
}
.sf .overwrite:hover{text-decoration:underline}
.sf .del{
  background:none;border:none;color:var(--dim2);cursor:pointer;font-size:15px;
  line-height:1;padding:4px 8px;
}
.sf .del:hover{color:var(--bad)}
#savename{
  width:100%;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--fg);
}
.saverow{display:flex;gap:6px;margin:6px 0}
.saverow .btn{flex:1}
.msg{font-size:11px;color:var(--bad);margin-top:6px}
.msg.ok{color:var(--good)}
.lbl{font-size:11px;font-weight:600;color:var(--dim);margin-bottom:6px;
     text-transform:none;letter-spacing:.02em}
#rail input[type=search],#rail select{
  width:100%;font:inherit;padding:6px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--fg);
}
#rail input[type=search]:focus,#rail select:focus{outline:2px solid var(--accent-bg);border-color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips.scroll{max-height:172px;overflow-y:auto;align-content:flex-start}
.chip{
  font:inherit;font-size:11.5px;padding:3px 8px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);color:var(--dim);
  white-space:nowrap;
}
.chip:hover{border-color:var(--dim2);color:var(--fg)}
.chip[aria-pressed=true]{
  background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600;
}
.chip .n{font-size:10px;opacity:.6;margin-left:3px;font-variant-numeric:tabular-nums}
.chip:disabled{opacity:.35;cursor:default}

.chk{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12px;
     color:var(--dim);margin-bottom:5px;cursor:pointer}
.chk input{margin:0;accent-color:var(--accent)}
.chk:hover{color:var(--fg)}

/* ---------- 게이지바 ---------- */
.gauge{margin-bottom:16px}
.gauge .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.gauge .val{font-size:11.5px;color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
.gauge .track{position:relative;height:22px}
.gauge .rail{position:absolute;top:9px;left:0;right:0;height:4px;border-radius:2px;background:var(--line)}
.gauge .fill{position:absolute;top:9px;height:4px;border-radius:2px;background:var(--accent)}
.gauge input[type=range]{
  position:absolute;top:0;left:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.gauge input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent);cursor:grab;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.gauge input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent);cursor:grab;
}
.gauge input[type=range]::-moz-range-track{background:none;border:none}

#status{font-size:11px;color:var(--dim2);border-top:1px solid var(--line2);
        padding-top:10px;margin-top:4px;line-height:1.7}
#status b{color:var(--dim);font-weight:600}

/* ---------- 본문 ---------- */
main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh}
#bar{
  display:flex;align-items:center;gap:14px;
  padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--line);
}
#views{display:flex;gap:2px;background:var(--bg);border-radius:7px;padding:2px}
.view{
  font:inherit;font-size:12px;padding:4px 12px;border:none;border-radius:5px;
  background:none;color:var(--dim);cursor:pointer;
}
.view:hover{color:var(--fg)}
.view[aria-pressed=true]{background:var(--panel);color:var(--accent);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
#summary{font-size:12.5px;flex:1}
#summary b{font-size:14px;font-variant-numeric:tabular-nums}
#baractions{display:flex;align-items:center;gap:12px}
#sortinfo{font-size:11px;color:var(--dim2)}
#csv{
  font-size:11px;color:var(--dim);text-decoration:none;border:1px solid var(--line);
  border-radius:5px;padding:3px 9px;
}
#csv:hover{color:var(--accent);border-color:var(--accent)}

/* 실거래 추이 스파크라인 */
.spark{display:block;margin-top:1px;opacity:.9}
.trend-up{color:var(--bad);font-weight:600}
.trend-dn{color:var(--good);font-weight:600}
/* 표본이 1건뿐인 구간을 비교한 변화율 — 값은 보여주되 신뢰도를 낮춰 표시 */
.thin{opacity:.5;font-weight:400}
.thinmark{font-size:9px;vertical-align:2px;margin-left:1px}

/* 같은 동·평형대 대비 평당가 순위 */
.rankbar{display:block;width:38px;height:3px;border-radius:2px;background:var(--line);
  margin-top:3px;position:relative}
.rankbar i{position:absolute;top:0;bottom:0;left:0;border-radius:2px;background:var(--accent)}
.rank-cheap{color:var(--good);font-weight:600}

.badge.fresh{outline:1px solid currentColor;outline-offset:-1px}

/* 지도 */
#mapwrap{flex:1;position:relative;min-height:0}
#map{position:absolute;inset:0}
#maplegend{
  position:absolute;bottom:12px;left:12px;z-index:500;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:11px;
  color:var(--dim);line-height:1.7;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
#maplegend b{color:var(--fg)}
.leaflet-container{background:var(--bg)!important;font:inherit!important}

#tablewrap{flex:1;overflow:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
thead th{
  position:sticky;top:0;z-index:2;background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:7px 8px;text-align:left;white-space:nowrap;
  font-size:11px;font-weight:600;color:var(--dim);cursor:pointer;user-select:none;
}
thead th:hover{color:var(--fg)}
thead th.sorted{color:var(--accent)}
thead th .ar{font-size:9px;margin-left:2px}
thead th.nosort{cursor:default}
thead th.nosort:hover{color:var(--dim)}
tbody td{padding:6px 8px;border-bottom:1px solid var(--line2);white-space:nowrap}
tbody tr:hover{background:var(--accent-bg)}
tbody tr.gone{opacity:.5}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:11px}
.dim{color:var(--dim2)}
/* 1년 넘은 실거래가 — 값을 흐리게 하고 취소선으로 신뢰하지 말라는 신호를 준다 */
.stale{color:var(--dim2);text-decoration:line-through;text-decoration-thickness:1px}
.name{font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.region{color:var(--dim);font-size:11px}
.gap-good{color:var(--good);font-weight:600}
.gap-bad{color:var(--bad)}
.badge{font-size:9.5px;padding:1px 4px;border-radius:3px;margin-left:4px;
       background:var(--line);color:var(--dim);vertical-align:1px}
.badge.dn{background:var(--good-bg);color:var(--good)}
.badge.up{background:#fdece4;color:var(--bad)}
@media (prefers-color-scheme:dark){.badge.up{background:#3a2117}}

.stars{cursor:pointer;user-select:none;letter-spacing:-1px;font-size:13px;color:var(--dim2);opacity:.45}
.stars:has(.on){opacity:1}
.stars .on{color:var(--star)}
.stars:hover{opacity:.85}
.chk .hint{flex-basis:100%;padding-left:20px;font-size:10px;color:var(--dim2);opacity:.8}
.memo{
  width:120px;font:inherit;font-size:11px;padding:2px 4px;border:1px solid transparent;
  border-radius:4px;background:none;color:var(--fg);
}
.memo:hover{border-color:var(--line)}
.memo:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.link{color:var(--accent);text-decoration:none;font-size:13px}
.link:hover{text-decoration:underline}

.expand{
  font:inherit;font-size:11px;color:var(--dim);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:5px;padding:2px 7px;white-space:nowrap;
}
.expand:hover{color:var(--accent);border-color:var(--accent)}

#empty{padding:48px 16px;text-align:center;color:var(--dim2)}
#more{padding:12px;text-align:center}
#loadmore{
  font:inherit;font-size:12px;padding:7px 18px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
}
#loadmore:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:900px){
  body{flex-direction:column}
  #rail{width:100%;flex:none;height:auto;max-height:46vh;border-right:none;
        border-bottom:1px solid var(--line)}
  main{height:auto;flex:1}
}