:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6b6a65;  /* #898781 은 대비 3.4:1 이라 주의 문구가 잘 안 읽혔다 */
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --line: #ebeae4;
  --accent: #1f66c2;
  --up: #c7362f;      /* 국내 관례: 상승 빨강 */
  --down: #2a6fd6;    /* 하락 파랑 */
  --s1: #2a78d6; --s2: #e69f00; --s3: #009e73; --s4: #cc79a7; --s-other: #b5b3ab;  /* 색약에도 갈리게(Okabe–Ito) — 주황·노랑이 붙어 보였다 */
  --badge: #f0efec;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink-2: #c3c2b7; --muted: #a3a19a;  /* #898781 은 다크에서 3.9:1 */
    --grid: #2c2c2a; --axis: #383835; --line: #2c2c2a; --accent: #3987e5;
    --up: #e66767; --down: #5598e7;
    --s1: #3987e5; --s2: #e8a33a; --s3: #19b38a; --s4: #d68fb7; --s-other: #6b6a65;
    --badge: #2c2c2a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
  word-break: keep-all; overflow-wrap: break-word;  /* 한글을 낱말 단위로 줄바꿈('준 / 공' 처럼 끊겼다) */
}
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.pad { padding: 16px; }
.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
/* 집북 — 인스타 @jipbook.kr 과 같은 마크(logo.svg)와 글자(Black Han Sans, '집북' 두 글자만 담은 jipbook.woff2 2.8KB, OFL) */
@font-face { font-family: "Jipbook"; src: url("jipbook.woff2") format("woff2"); font-display: swap; }
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand img { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.brand .wm { font-family: "Jipbook", sans-serif; font-weight: 400; font-size: 23px; letter-spacing: -0.02em; line-height: 1; }
.brand span { font-weight: 400; color: var(--ink-2); font-size: 14px; }
main { max-width: 1080px; margin: 0 auto; padding: 12px 12px 40px; }
@media (min-width: 1280px) { main, .foot { max-width: 1240px; } }
h1 { font-size: 20px; margin: 12px 4px 4px; }
h2 { font-size: 16px; margin: 24px 4px 8px; }
.lead { color: var(--ink-2); margin: 0 4px 12px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cards .card { cursor: pointer; }
.cards .card:hover { border-color: var(--axis); }
.card .name { font-weight: 600; }
.card .score { font-size: 26px; font-weight: 700; }
.card .score small { font-size: 13px; font-weight: 400; color: var(--muted); }
.kv { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.up { color: var(--up); } .down { color: var(--down); }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--badge); color: var(--ink-2); white-space: nowrap; }
.badge.reg { color: var(--up); }
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0;
}
.filters label { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; max-width: 100%; }
/* 긴 옵션(구역 이름) 때문에 select 가 화면 밖으로 밀려 빌라 화면이 가로로 넘쳤다(390px 에서 427px) */
.filters select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
/* 자주 안 쓰는 조건은 접는다 — 폰에서 조건 칸이 열 줄이었다 */
.more-f { flex-basis: 100%; min-width: 0; }
.more-f summary { cursor: pointer; font-size: 13px; color: var(--accent); width: max-content; }
.more-f summary b { color: var(--up); font-weight: 600; margin-left: 4px; }
.more-f-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.why { flex-basis: 100%; font-size: 12px; }
.why summary { cursor: pointer; color: var(--muted); width: max-content; }
.why p { margin: 4px 0 0; }
.filters input, .filters select {
  font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--axis); border-radius: 6px;
  background: var(--page); color: var(--ink);
}
.filters input[type=number] { width: 76px; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--axis); border-radius: 6px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--ink-2); padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--page); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
.tablewrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
th, td { padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 14px; }
th { font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--surface); }
th.sorted { color: var(--ink); }
th:first-child, td:first-child { text-align: left; }
table.regions tbody tr { cursor: pointer; }  /* 누르면 가는 표만 — 단독 거래 표는 눌러도 아무 일 없다 */
tbody tr:hover { background: var(--page); }
.notes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.notes li { font-size: 13px; color: var(--ink-2); }
.notes .badge { margin-right: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tile .v { font-size: 20px; font-weight: 700; }
.tile .l { font-size: 12px; color: var(--muted); }
.cx { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cx-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; cursor: pointer; }
.cx-name { font-weight: 600; }
.cx-sub { font-size: 13px; color: var(--ink-2); }
.cx-price { text-align: right; font-weight: 700; }
.cx-meta { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cx-body { border-top: 1px solid var(--line); padding: 12px 14px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart text { fill: var(--muted); font-size: 11px; }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; }
svg.chart .base { stroke: var(--axis); stroke-width: 1; }
svg.chart circle { stroke: var(--surface); stroke-width: 2; }
svg.chart circle.hot { stroke: var(--ink); }
.tip {
  position: fixed; z-index: 20; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--axis); border-radius: 8px; padding: 6px 9px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.more { display: block; width: 100%; padding: 10px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.back { display: inline-block; margin: 4px; font-size: 14px; }
.foot { max-width: 1080px; margin: 0 auto; padding: 0 16px 32px; font-size: 12px; }
.explain { font-size: 13px; color: var(--ink-2); }
.explain summary { cursor: pointer; }
@media (max-width: 640px) {
  th, td { padding: 7px 8px; font-size: 13px; }
  .hide-m { display: none; }
  .seg button { padding: 5px 7px; font-size: 12.5px; }
  .cx-body { padding: 12px 10px; }
  .dense th, .dense td { padding: 7px 5px; }  /* 다섯 칸 표(전세가율·갭)가 390px 에서 갭 칸이 잘렸다 */
}

/* 호재·악재 토글 패널: 오른쪽 가장자리 탭 → 서랍 */
#layer-btn {
  position: fixed; right: 0; top: 40%; z-index: 30; writing-mode: vertical-rl;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px; padding: 12px 7px;
  border: 1px solid var(--axis); border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--ink); color: var(--page); cursor: pointer; box-shadow: -2px 2px 8px rgba(0,0,0,.12);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); z-index: 40; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line); padding: 14px 16px 24px;
  transform: translateX(100%); transition: transform .2s ease; box-shadow: -6px 0 18px rgba(0,0,0,.12);
}
.drawer:not(.open) { visibility: hidden; box-shadow: none; }  /* 닫힌 서랍 그림자가 폰 오른쪽에 회색 줄로 보였다 */
.drawer { transition: transform .2s ease, visibility .2s; }
.drawer.open { transform: none; }
body.drawer-open #layer-btn { display: none; }
@media (min-width: 1200px) {
  /* 넓은 화면에선 서랍이 본문을 가리지 않게 밀어 둔다 */
  body.drawer-open main, body.drawer-open .foot { margin-right: 340px; }
}
.lp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 16px; }
.lp-x { font: inherit; border: 0; background: none; color: var(--ink-2); font-size: 18px; cursor: pointer; }
.lp-row { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.lp-sec { font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
.lp-note { font-size: 12px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--axis); background: transparent; color: var(--ink-2); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--page); border-color: var(--ink); }
.chip span { opacity: .7; font-size: 12px; }
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iss { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.iss.bad { border-left-color: var(--down); }
.iss-d { color: var(--ink-2); margin-top: 3px; }
.iss-s { font-size: 12px; margin-top: 3px; }
.badge.st-확정, .badge.st-진행 { color: var(--ink); font-weight: 600; }
.badge.st-설 { font-style: italic; }
.badge.st-지연, .badge.st-취소 { color: var(--down); }
.card-iss { font-size: 12px; color: var(--ink-2); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
.cx-head .acts { grid-column: 1 / -1; }  /* 이름·가격 줄 밑 한 줄 통째 — 이름 칸 안에선 폰에서 세로로 쌓였다 */
.act {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; line-height: 1.2;
  padding: 5px 10px; border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent); cursor: pointer;
}
.act:first-child { background: var(--accent); color: var(--surface); }
.linkbtn { font: inherit; font-size: 12px; font-weight: 400; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0 4px; }
.dev { margin-top: 12px; }
.py-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.py { font-size: 12px; background: var(--badge); border-radius: 6px; padding: 2px 8px; color: var(--ink-2); white-space: nowrap; }
.py b { color: var(--ink); font-weight: 600; }

.place { margin: 4px 0 12px; }
.place-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.place-map { width: 100%; height: 260px; border: 0; border-radius: 8px; margin-top: 8px; background: var(--badge); }
.place-map.kmap { overflow: hidden; position: relative; }
.rv-msg { padding: 16px; font-size: 13px; }
.rv-note { position: absolute; left: 8px; top: 8px; z-index: 5; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; }

/* 이름이 .top(맨 위 고정 줄)과 겹쳐 배지가 sticky 로 떠 표 머리글 위에 그려졌다 → peak */
.badge.peak { color: var(--up); font-weight: 600; }

.badge.warn { color: #8a4700; background: #fff1dc; font-weight: 600; }  /* #b25e00 은 12px 에서 대비 4.2:1 이라 진하게 */
@media (prefers-color-scheme: dark) { .badge.warn { color: #ffb45c; background: #3a2a14; } }
.filters.where label.big { font-size: 14px; color: var(--ink); font-weight: 600; }
.filters.where select, .filters.where input { font-size: 15px; padding: 6px 10px; min-width: 0; }
/* 동과 단지는 한 줄에 나란히. 동 칸은 글자만큼, 단지 칸이 남는 폭을 다 쓴다(긴 단지 이름이 잘리지 않게) */
.filters.where label.big { white-space: nowrap; min-width: 0; }
.filters.where label.cx-find { flex: 1 1 140px; max-width: 460px; }
.filters.where label.cx-find input { flex: 1; width: 100%; }
/* 폰: 동 칸은 가장 긴 동 이름만큼 넓어져(진접읍 금곡리 (12)) 390px 에서도 한 줄에 둘이 안 들어간다.
   억지로 줄이면 동 이름이 잘리니 두 줄로 쌓되, 칸 시작과 끝을 맞춘다 */
@media (max-width: 640px) {
  .filters.where label.big { flex: 1 1 100%; max-width: none; }
  .filters.where label.big select, .filters.where label.big input { flex: 1; width: 100%; }
  .filters.where label.big { display: grid; grid-template-columns: 2.2em 1fr; }
}

/* ---- 디자인 검수 2026-09-25 ---- */
.card .score, .tile .v { font-variant-numeric: normal; } /* 큰 숫자는 비례 숫자 */
.card .name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } /* 규제 배지를 늘 이름 아래 → 숫자 줄 맞춤 */
.rank-tabs { margin: 8px 4px 0; }
.h2note { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.explain p { margin: 6px 0 0; }
table.regions th.gs, table.regions td.gs { border-left: 1px solid var(--line); }
table.regions th, table.regions td { cursor: pointer; }
table.regions .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.regions thead th { z-index: 2; }
table.regions thead .sticky { z-index: 3; } /* 머리글과 첫 칸이 겹치는 모서리가 맨 위 */
/* 순위표 머리글 고정: 표 머리글이 윗줄 밑으로 가면 app.js floatHead 가 같은 머리글을 여기 띄운다 */
.thead-float { position: fixed; z-index: 4; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
.thead-float table { table-layout: fixed; }
.thead-float th { position: static; }
.thead-float th.sticky { position: sticky; left: 0; }
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.tiles.compact .tile { padding: 8px 10px; }
.tiles.compact .tile .v { font-size: 18px; }
.sumrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.sumrow details summary { cursor: pointer; }
th[title] { text-decoration: underline dotted var(--axis); text-underline-offset: 3px; }
@media (max-width: 640px) {
  .top { padding: 10px 12px; }
  .brand span { display: none; }
  #asof { font-size: 12px; }
  h1 { font-size: 18px; }
  .tiles.compact { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tiles.compact .tile .v { font-size: 15px; }
  .tiles.compact .tile .l { font-size: 11px; }
  /* 호재·악재 탭: 가장자리 세로 탭이 표 오른쪽 칸을 가려서 아래 오른쪽 둥근 버튼으로 */
  #layer-btn { writing-mode: horizontal-tb; top: auto; bottom: 16px; right: 12px; border-radius: 999px; border: 1px solid var(--axis);
    padding: 10px 14px; letter-spacing: 0; }
  table.regions td.gs-m, table.regions th.gs-m { border-left: 1px solid var(--line); }
}
/* 가까운 역 줄 */
.cx-st { grid-column: 1 / -1; } /* 가격 칸 밑까지 폭을 다 쓴다 */
.badge.st { color: var(--accent); font-weight: 600; }
.badge.zn { color: #7a4b00; background: #fff4df; }
@media (prefers-color-scheme: dark) { .badge.zn { color: #ffcf7a; background: #3a2c12; } }
.show-m { display: none; }
@media (max-width: 640px) { .show-m { display: inline; } }
/* 주택 유형 비율 막대 */
.mix { margin: 6px 0; padding: 10px 12px; }
.mix-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.mix-bar i { display: block; height: 100%; }

/* 지역 지도: 목록 위 가격 핀 */
.rmap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 4px; font-size: 12px; }
.rmap { height: 480px; border-radius: 10px; overflow: hidden; background: var(--badge); margin-bottom: 10px; border: 1px solid var(--line); }
@media (max-width: 640px) { .rmap { height: 300px; } }
.pin {
  font: inherit; font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--accent); background: #fff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pin b { color: #1f66c2; font-weight: 700; }  /* 지도는 늘 밝아 다크 모드 파랑(3.6:1)이 흐렸다 */
.pin.on { background: var(--accent); color: #fff; }
.pin.on b { color: #fff; }
.cx-head, .place { scroll-margin-top: calc(var(--top-h, 64px) + 8px); }  /* 핀·지도 버튼으로 내려올 때 위 고정 줄(app.js trackTopHeight)에 가리지 않게 */

/* 이름 찾기 추천 칸(맨 위 전체 찾기, 시군구 단지 찾기 공용) */
.search { position: relative; flex: 1 1 200px; max-width: 380px; align-self: center; }
.search input, .cx-find input { font: inherit; font-size: 14px; }
.search input { width: 100%; padding: 6px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--page); color: var(--ink); }
.filters.where label.cx-find { position: relative; }
.sugg {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
  max-height: 60vh; overflow-y: auto; font-size: 14px; color: var(--ink);
}
.sugg li { padding: 7px 10px; cursor: pointer; }
.sugg li b { font-weight: 600; }
.sugg li .muted { font-size: 12px; }
.sugg li.on, .sugg li:hover { background: var(--badge); }
.filters.where label.cx-find .sugg { left: 40px; }
@media (max-width: 640px) {
  .top .search { order: 3; flex-basis: 100%; max-width: none; }
}

/* 맨 위로: 늘 떠 있다(사장님, 2026-09-25). 폰에선 호재·악재 둥근 버튼 위 */
#top-btn {
  position: fixed; right: 16px; bottom: 20px; z-index: 30; width: 44px; height: 44px; border-radius: 50%;
  font: inherit; font-size: 20px; line-height: 1; border: 1px solid var(--axis); background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
}
@media (max-width: 640px) { #top-btn { right: 12px; bottom: 72px; } }
body.drawer-open #top-btn, #top-btn:not(.show) { display: none; }

/* 재건축 정보 칸(펼친 상세) */
.rsbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; background: var(--page); }
.rsbox-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.rsbox dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.rsbox dt { color: var(--muted); }
.rsbox dd { margin: 0; text-align: right; }
.rs-steps { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.rs-steps li { display: flex; flex-direction: column; }
.rs-steps li span { color: var(--muted); }
.rs-steps li b { font-weight: 600; }
.rsbox p { font-size: 11.5px; margin: 8px 0 0; }

/* iOS 는 16px 보다 작은 입력 칸을 누르면 화면을 확대한다(검색할 때 확대되던 것). 터치 기기에선 입력 칸 글자를 16px 로 */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* 관심 단지 */
.act.fav { border-color: var(--axis); color: var(--ink-2); }
.act.fav.on { border-color: #d49a00; color: #b07d00; }
@media (prefers-color-scheme: dark) { .act.fav.on { border-color: #c98500; color: #ffc44d; } }
.favs { margin: 8px 0 4px; }
.favs-h { margin-bottom: 8px; font-size: 14px; }
.favs-h .muted { font-size: 12px; margin-left: 4px; }
.favs .chip { text-align: left; }

/* 입주 예정 목록 */
.moves { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }

/* 2026-09-25 부정 리뷰 반영 */
.map-lock { position: absolute; left: 8px; top: 8px;  /* 아래 왼쪽은 카카오 로고 자리라 덮었다 */ z-index: 10; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--axis); background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
.map-lock.on { background: var(--ink); color: var(--page); }
.rmap { position: relative; }
.picked { margin: 4px; font-size: 13px; color: var(--ink-2); }
.empty { text-align: center; margin: 8px 0; }
.empty p { margin: 4px 0 10px; }
.scope { font-size: 12px; margin: 4px; }
.glossary { margin-top: 8px; }
.glossary dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.glossary dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.glossary dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { main { padding-bottom: 120px; } }  /* 떠 있는 두 버튼이 마지막 줄을 가렸다 */
.map-locked, .map-locked * { touch-action: pan-y !important; }  /* pinch-zoom 까지 주면 두 손가락이 지도 대신 페이지를 확대했다 */
/* 좁은 화면: 서랍 뒤 반투명 막을 누르면 닫힌다. 넓은 화면은 서랍이 본문 옆에 서 있어 막이 없다 */
#scrim { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.25); }
@media (max-width: 1199px) { body.drawer-open #scrim { display: block; } }
.share { margin: 0 0 8px; }
.share .linkbtn { padding: 0; }
/* 폰: 접힌 줄 셋(입주 예정·AI 점수·호재 악재)을 한 줄 칩으로 — 위쪽이 길어 목록까지 한참 내려가야 했다. 펼치면 그 칩만 한 줄 전체 */
@media (max-width: 640px) {
  .sumrow { display: flex; flex-wrap: wrap; gap: 6px; }
  .sumrow > details { flex: 1 1 auto; padding: 8px 10px; }
  .sumrow > details[open] { flex-basis: 100%; }
}
.favs-h .linkbtn { margin-left: 6px; }
/* 분양·청약 공고 */
.subs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.sub-i { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; }
.sub-i:first-child { border-top: 0; padding-top: 0; }
.subs-home { margin: 8px 0 4px; }
/* 지도 안 버튼(z-index 10)이 맨 위 고정 줄(5) 위로 올라와 검색칸을 덮었다 — 지도 상자를 따로 쌓아 안에 가둔다 */
.rmap, .place-map { isolation: isolate; }
/* 폰: 내리는 동안 떠 있는 버튼 숨김(카드 이름·가격을 가렸다) */
@media (max-width: 640px) {
  #top-btn, #layer-btn { transition: opacity .2s; }
  body.fab-hide #top-btn, body.fab-hide #layer-btn { opacity: 0; pointer-events: none; }
}
/* 가격 칸(날짜·평형·층 줄)이 넓어 단지 이름이 '한솔마을(5단지)(' / '주공)'처럼 괄호 중간에서 끊겼다 — 가격 칸 폭을 묶고 날짜 줄을 접는다 */
.cx-head { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 640px) { .cx-price { max-width: 46vw; } .cx-price .cx-sub { font-size: 12px; } }
/* 키보드·링크가 된 시군구 카드와 표 이름 */
.cards a.card { display: block; color: inherit; }
a.rowlink { color: inherit; }
th[tabindex]:focus-visible, a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
/* 터치: 누르는 곳을 44px 가까이(세그 29·카드 버튼 27·접힘 줄 20px 이었다) */
@media (pointer: coarse) {
  .seg button, .act, .chip, .back, .linkbtn, .map-lock { min-height: 40px; }
  summary { padding: 8px 0; }
}
/* 단지 카드 펼침·접기 표시(2026-09-27 사장님: 폈을 때 무엇이 펴졌고 어떻게 접는지 안 보였다) */
.cx-toggle { grid-column: 1 / -1; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); text-align: center; font-size: 13px; color: var(--accent); }
.cx-toggle::after { content: "상세 보기 ▾"; }
.cx-head[aria-expanded="true"] .cx-toggle { display: none; }  /* 펼치면 바로 밑 붙어 따라오는 줄(.cx-bar)이 접기를 맡는다 — 둘이 겹쳐 보였다 */
.cx-head[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 10px 10px 0 0; }
.cx:has(> .cx-head[aria-expanded="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* 상세를 내려 읽는 동안 위에 붙어 따라오는 이름·접기 줄(상세 안에서만 — 다음 카드로 넘어가면 사라짐) */
.cx-bar { position: sticky; top: var(--top-h, 64px); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -12px -14px 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.cx-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cx-bar .linkbtn { font-size: 14px; white-space: nowrap; flex: none; }
.cx-close-end { display: block; width: 100%; margin-top: 14px; padding: 10px; font: inherit; font-size: 14px; color: var(--accent);
  background: var(--page); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
@media (max-width: 640px) { .cx-bar { margin: -12px -10px 10px; padding: 8px 10px; } }
@media (pointer: coarse) { .cx-bar .linkbtn { min-height: 40px; } }
/* 실거래가 아직 없는 새 단지(목록 뒤 따로) */
.new-h { font-size: 16px; margin: 18px 4px 8px; }
.new-cx .new-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }  /* .cx-head 와 같은 모양, 누르면 펼치는 핸들러는 안 붙게 다른 이름 */
.new-cx .subs { grid-column: 1 / -1; margin: 6px 0 0; }
.new-cx.picked-new { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.new-cx { scroll-margin-top: calc(var(--top-h, 64px) + 8px); }
.new-cx .new-silv { grid-column: 1 / -1; font-size: 13px; }
.new-cx .new-silv ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
/* 화면 밖 단지 카드는 그리기를 미룬다(송파 화면 첫 그리기·정렬 바꾸기가 폰에서 0.4~0.8초 멈췄다). 크기는 한 번 그려진 값을 기억 */
.cx { content-visibility: auto; contain-intrinsic-size: auto 260px; }
/* iOS 는 cursor:pointer 가 아닌 요소 탭에 click 을 안 보낸다 — 청약 무순위 배지를 눌러도 설명이 안 떴다(4차 리뷰) */
@media (pointer: coarse) { .badge[title], .explain-tip[title] { cursor: pointer; } }
.tip { max-width: min(360px, calc(100vw - 16px)); }
.new-cx .new-naver { align-self: start; font-size: 13px; white-space: nowrap; }
#new-h { scroll-margin-top: calc(var(--top-h, 64px) + 8px); }
/* 떠 있는 버튼: ↑ 는 가만히 있으면 흐리게 비켜서고, 폰의 호재·악재 버튼은 작게(카드 가격·역 줄을 가렸다, 4차 리뷰) */
#top-btn { transition: opacity .3s; }
#top-btn.idle { opacity: .35; }  /* 흐리게만 — 누르면 된다 */
@media (max-width: 640px) {
  #layer-btn { padding: 7px 11px; font-size: 12px; opacity: .92; }
}
/* 터치: 작은 링크·지도 핀도 누르기 쉽게(20~22px 였다) */
@media (pointer: coarse) {
  .place-alt a, a.muted[target="_blank"] { display: inline-block; padding: 8px 0; }
  .pin { padding: 6px 9px; }
}
/* 숫자·짧은 묶음이 줄 끝에서 갈리지 않게('1억 2, / 505', '▼50. / 7%', '주차 세대당 1. / 1대' — 5차 리뷰) */
.nw, .tile .v, .tile .l, .cx-meta > span, .cx-st > span, .kv > span, .up, .down { white-space: nowrap; }
.cx-st, .cx-meta, .kv { flex-wrap: wrap; }
.tile .l { white-space: normal; }
.tile .l b, .tile .l span { white-space: nowrap; }
/* 지역 지도: 테두리로 되돌리기(지도 움직이기 옆) */
.map-home { position: absolute; left: 8px; top: 48px; z-index: 10; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--axis); background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
@media (pointer: fine) { .map-home { top: 8px; } }
@media (pointer: coarse) { .map-home { top: 56px; min-height: 36px; } }
/* 투자 신호 줄(신고가·직전 시세보다 싸게·주변 대비) */
.cx-sig { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.badge.sig-up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.badge.sig-dip { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
/* 필요 현금 계산 */
.cash { padding: 10px 12px; }
.cash-in { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; align-items: center; }
.cash-in label { display: inline-flex; align-items: center; gap: 4px; }
.cash-in input, .cash-in select { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--axis); border-radius: 6px;
  background: var(--page); color: var(--ink); min-height: 32px; }
.cash-in input { width: 5.5em; }
.cash-out { margin-top: 8px; }
.cash-out b { font-size: 15px; }
.warn-line { margin: 8px 0 0; font-size: 13px; color: #8a4700; }
@media (prefers-color-scheme: dark) { .warn-line { color: #f0b36a; } }
@media (pointer: coarse) { .cash-in input, .cash-in select { font-size: 16px; } }
/* 구역 그리기(지역 지도) */
.map-draw { top: 84px; }
@media (pointer: fine) { .map-draw { top: 44px; } }
@media (pointer: coarse) { .map-draw { top: 100px; } }
.draw-bar { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 6px rgba(0,0,0,.25); font-size: 13px; }
.draw-bar span { flex: 1 1 100%; }
.draw-bar button { font: inherit; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 36px; }
.draw-bar [data-done] { background: #7a3fd6; border-color: #7a3fd6; color: #fff; }
.draw-bar [data-done]:disabled { opacity: .45; cursor: default; }
.area-box { padding: 10px 12px; margin: 6px 0; border-left: 4px solid #7a3fd6; }
.area-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.area-h .linkbtn { margin-left: auto; }
.rmap.drawing .pin { pointer-events: none; opacity: .6; }
/* 2026-10-02 UX 리뷰: 구역 칸이 고정 머리줄 밑에 숨었다, 펼친 요약 칸은 넓게, 폰에서 구역 머리 줄바꿈, 그리기 바는 지도 아래로(위 단추를 가렸다) */
#area-box { scroll-margin-top: 100px; }
.sumrow > details[open] { grid-column: 1 / -1; }
.area-h { flex-wrap: wrap; }
.area-h .linkbtn { white-space: nowrap; }
.draw-bar { top: auto; bottom: 28px; }
@media (prefers-color-scheme: dark) { .brand img { box-shadow: 0 0 0 1px #2c3a44; } }  /* 어두운 바탕에서 남색 타일 가장자리가 묻혔다 */
/* 디자인 검수(2026-10-02) */
.warnc { color: #b25e00; }  /* 주의(입주 물량 많음) — 하락 파랑·링크 파랑과 갈리게 */
@media (prefers-color-scheme: dark) { .warnc { color: #f0b36a; } }
svg.chart text.minor { opacity: .7; }
svg.chart circle { stroke-opacity: .9; }
/* ⑧ 단지 상세의 작은 표는 너무 넓게 늘어나지 않게, 글 칸은 왼쪽 */
.cx-body .tablewrap { max-width: 760px; }
.cx-body td.txt, .cx-body th.txt { text-align: left; white-space: normal; }
/* ⑭ 머리줄을 본문과 같은 폭에 */
@media (min-width: 1100px) { .top { padding-left: max(16px, calc((100% - 1080px) / 2 + 12px)); padding-right: max(16px, calc((100% - 1080px) / 2 + 12px)); align-items: center; } }
@media (min-width: 1280px) { .top { padding-left: max(16px, calc((100% - 1240px) / 2 + 12px)); padding-right: max(16px, calc((100% - 1240px) / 2 + 12px)); } }
/* 정비 구역 단계 배지 */
.badge.pz-early { background: #fdf0d5; color: #8a5300; }
.badge.pz-mid { background: #e3eefc; color: #1b4f99; }
.badge.pz-late { background: #def5ea; color: #0b6b44; }
.badge.pz-off { background: var(--badge); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .badge.pz-early { background: #3a2c10; color: #f0c06a; } .badge.pz-mid { background: #15294a; color: #8db8f2; } .badge.pz-late { background: #0f3324; color: #7fd8ac; }
}
.pz-list li { line-height: 1.6; }
/* 디자인 검수 폰·다크(2026-10-02) */
.cx-body .kv > *, .area-box .kv > * { white-space: normal; }  /* 상세 줄이 카드 밖으로 425px 넘쳤다 */
.pz-act { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 2px; }
@media (pointer: fine) { .pz-act .linkbtn { min-height: 32px; } }  /* 폰은 40px(터치) 그대로 */
.top { align-items: center; }
@media (prefers-color-scheme: dark) { .badge.reg { color: #ff8080; } .badge.st { color: #8db8f2; } }
/* 가로로 넘치는 표: 오른쪽에 그림자로 '더 있음'(숫자가 '20억 3,0'에서 잘린 채 끝나 보였다) */
.tablewrap { background:
  linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
  linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left / 10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right / 10px 100% no-repeat scroll; }
.tablewrap table { background: transparent; }
.filters input, .filters select { font-weight: 400; }
.map-tools { position: absolute; left: 8px; top: 8px; right: 56px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.map-tools > * { position: static !important; pointer-events: auto; }
/* 부정리뷰(2026-10-02 저녁) */
.pz-off { margin-top: 8px; }
.pz-off summary { cursor: pointer; }
.area-box.off { border-left-color: #8a8a8a; }
.area-h .badge { margin-right: 4px; }
.rmap.drawing { height: 440px; }  /* 그리는 동안 지도를 키운다 — 폰에서 그리기 바가 지도 아래쪽을 덮어 꼭짓점이 바에 찍혔다 */