/* 동네열바퀴 — 사이트 꾸밈 (2026-10-04 · 실거래 일꾼)
 * 폰 390폭 먼저. 숫자가 크고 장식이 없는 꼴. 외부 글꼴 0 — 기기 글꼴을 쓴다.
 * ★ 고정 요소(position:fixed·sticky)를 두지 않는다 — 앵커 광고 「상단만」 자리를 비워 둔다(지시 12).
 */
:root{
  --ink:#15181c; --sub:#5c6570; --faint:#8a929b; --line:#e4e7eb; --soft:#f4f5f7;
  --bg:#fff; --hi:#c0262d; --hi-soft:#fbeced; --link:#1d4ec2;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.62 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--link)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

/* 머리 — 흐르는 자리. 붙박지 않는다 */
.site{border-bottom:1px solid var(--line)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.03em}
.brand i{width:12px;height:12px;background:var(--hi);display:inline-block;border-radius:2px}
/* 2026-10-05 로고 확정 — 머리말은 워드마크(밝은 화면 wordmark-light · 어두운 화면 wordmark-dark) · 아주 좁으면 심볼만 */
.brand .bm,.brand img{display:block}.brand .bm img{height:26px;width:auto}
.brand .bs{display:none;height:26px;width:26px}
@media (max-width:289px){.brand .bm{display:none}.brand .bs{display:block}}
/* 어두운 화면 — 사이트는 밝은 판 하나지만 wordmark-dark(밝은 글자)를 쓰는 머리말 띠만 어둡게 둔다 */
@media (prefers-color-scheme:dark){.site{background:#121214;border-bottom-color:#2a2a30}.top a{color:#b8bcc4}.top a:hover{color:#fff}}
.top{display:flex;gap:14px;font-size:13.5px}
.top a{color:var(--sub);text-decoration:none}
.top a:hover{color:var(--ink)}

main{padding-bottom:8px}
main>h1:first-child{margin-top:18px}
.crumb{margin:16px 0 0;font-size:12.5px;color:var(--sub)}
.crumb a{color:var(--sub)}
h1{font-size:27px;line-height:1.25;letter-spacing:-.035em;margin:6px 0 6px}
h2{font-size:19px;letter-spacing:-.025em;margin:34px 0 10px;line-height:1.35}
h3{font-size:15.5px;margin:22px 0 8px}
.lead{color:var(--sub);margin:0 0 14px;font-size:14px}
p{margin:0 0 12px}

/* 큰 숫자 */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 6px}
.stat{background:var(--soft);border-radius:8px;padding:10px 10px 8px}
.stat b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:11.5px;color:var(--sub)}
.facts{margin:14px 0 4px;padding-left:1.1em}
.facts li{margin-bottom:6px}

/* 면적 칸 */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.chips a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:13px;text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums}
.area{border-top:2px solid var(--ink);margin-top:34px;padding-top:4px}
.area h2{margin-top:10px}
.area h2 small{font-size:13px;color:var(--sub);font-weight:600}
.rec{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:2px 0 8px}
.rec b{font-size:30px;font-weight:800;color:var(--hi);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.15}
.rec span{font-size:13px;color:var(--sub)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.kv div{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kv b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.kv span{font-size:11.5px;color:var(--sub)}

/* 표 */
.tbl{overflow-x:auto;margin:8px 0}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:12px;color:var(--sub);padding:0 0 6px}
th{font-weight:600;color:var(--sub);text-align:left;border-bottom:1px solid var(--ink);padding:6px 5px;font-size:12px;white-space:nowrap}
td{border-bottom:1px solid var(--line);padding:7px 5px;vertical-align:top;overflow-wrap:normal}
td:first-child{overflow-wrap:anywhere}
td.n,th.n{text-align:right;white-space:nowrap}
td small{display:block;color:var(--faint);font-size:11.5px;font-weight:400}
td b{font-weight:700}
td small.hi{color:var(--hi);font-weight:600}
tr.up td.n:last-child{color:var(--hi);font-weight:700}
tr.up td.n:last-child small{font-weight:400}
tr.x td{color:var(--faint)}
tr.x s{color:var(--faint)}
.tag{display:inline-block;font-size:11px;line-height:1.5;border:1px solid var(--sub);color:var(--sub);border-radius:3px;padding:0 4px;margin-left:4px;vertical-align:1px}

/* 차트 */
details{margin:4px 0 8px}
summary{cursor:pointer;font-size:13px;color:var(--link);padding:6px 0}
figure{margin:12px 0 4px}
figcaption{font-size:12px;color:var(--sub);margin-top:2px}
svg.chart{display:block;width:100%;height:auto}
svg .g{stroke:var(--line);stroke-width:1}
svg .gv{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
svg .t{fill:var(--faint);font-size:10px;font-family:inherit}
svg .th{fill:var(--hi);font-size:10px;font-weight:700;font-family:inherit}
svg .hi{stroke:var(--hi);stroke-width:1;stroke-dasharray:4 3}
svg .ln{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
svg .pt{fill:var(--ink)}

.note{font-size:12.5px;color:var(--sub)}
.box{background:var(--soft);border-radius:8px;padding:10px 12px;margin:14px 0;font-size:13px;color:var(--sub)}
.box p{margin:0 0 4px}
.list{padding-left:1.1em}
.list li{margin-bottom:4px}
.cols{columns:2;column-gap:18px;padding-left:1.1em}
.cols li{break-inside:avoid;margin-bottom:4px}

/* 글 장 (읽는 법·소개·방침) */
.doc h2{font-size:18px}
.doc p,.doc li{font-size:14.5px;line-height:1.75}
.doc .when{color:var(--sub);font-size:12.5px}

/* 문의 폼 */
form.ask{display:grid;gap:12px;margin:12px 0}
form.ask label{display:grid;gap:4px;font-size:13.5px;font-weight:600}
form.ask input,form.ask textarea{font:inherit;font-size:16px;border:1px solid #c9ced4;border-radius:8px;padding:10px 12px;width:100%}
form.ask textarea{min-height:150px;resize:vertical}
form.ask button{font:inherit;font-weight:700;font-size:15px;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:12px 16px;cursor:pointer}
form.ask .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#ask-msg{min-height:1.4em;font-size:13.5px}

/* 발 */
.foot{margin-top:44px;border-top:1px solid var(--line);padding:16px 0 44px;font-size:12px;color:var(--sub);line-height:1.7}
.foot p{margin:0 0 6px}
.foot a{color:var(--sub)}

@media (min-width:640px){
  h1{font-size:32px}
  .stat b{font-size:25px}
  .rec b{font-size:34px}
  .kv{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cols{columns:3}
}

/* ── 2판 — 동네 소식 · 영상 짝 (2026-10-04) ── */
.bd{display:inline-block;font-size:11.5px;font-weight:700;line-height:1.5;border-radius:4px;padding:0 6px;margin-right:4px;border:1px solid transparent;white-space:nowrap}
.bd.k1{background:#15181c;color:#fff}
.bd.k2{background:#e9eef9;color:#1d3f8f;border-color:#c7d3ef}
.bd.k3{background:#f4f5f7;color:#3d454e;border-color:#d5d9de}
.bd.k4{background:#fff;color:#5c6570;border-color:#c9ced4;border-style:dashed}
.bd.up{background:var(--hi-soft);color:var(--hi)}
.bd.dn{background:#eef1f4;color:#33404d}
.tagsum{font-size:13px;color:var(--sub);margin:4px 0 12px}
.news{margin:6px 0 10px}
.nw{border:1px solid var(--line);border-radius:10px;padding:12px 14px 10px;margin:0 0 12px}
.nw h3{margin:6px 0 4px;font-size:17px;line-height:1.4}
.nw p{margin:0 0 6px;font-size:14.5px}
.nw .list{margin:4px 0 8px;font-size:14px;color:#2b3138}
.nwh{margin:0}
.src{list-style:none;margin:8px 0 4px;padding:8px 0 0;border-top:1px dashed var(--line);font-size:13px}
.src li{margin:0 0 4px}
.src a{color:var(--link)}
.chk{font-size:12px;color:var(--faint);margin:4px 0 0}
.nsum{list-style:none;padding:0;margin:8px 0 10px}
.nsum li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.nsum li .note{display:block;margin-top:2px}
.nsum li.on{background:var(--soft);padding-left:6px;padding-right:6px;border-radius:6px}
.dcard{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 10px}
.dcard h3{margin:2px 0 4px;font-size:17px}
.dcard p{margin:0 0 2px}
.yt{max-width:320px;margin:10px 0 4px;aspect-ratio:9/16;background:var(--soft);border-radius:10px;overflow:hidden}
.yt iframe{width:100%;height:100%;border:0;display:block}
.deals{list-style:none;padding:0;margin:8px 0 12px}
.deals li{border-bottom:1px solid var(--line);padding:10px 0}
.deals p{margin:0}
.dl1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dl1 b{font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dl3{font-size:13px;color:#2b3138;margin-top:2px}

/* ── 신고가 공유 카드 (2026-10-04) ── */
.hcard{border:1px solid var(--line);border-radius:12px;padding:16px 16px 12px;margin:14px 0 12px}
.hc-b{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:-.02em}
.hc-b i{width:10px;height:10px;background:var(--hi);border-radius:2px;display:inline-block}.hc-b img{display:block}
.hcard h1{margin:4px 0 2px;font-size:25px}
.hc-s{margin:0;color:var(--sub);font-size:14px}
.hc-p{margin:10px 0 0;font-size:38px;font-weight:800;color:var(--hi);letter-spacing:-.035em;line-height:1.1}
.hc-h{margin:8px 0 0;font-weight:700;font-size:15px}
.hc-m{margin:2px 0 0;font-size:14px;color:#3d454e}
.hc-l{margin:10px 0 2px}
.hc-l svg{width:100%;height:auto;max-width:360px}
.hc-f{margin:6px 0 0;font-size:13px;color:#3d454e}
.hc-n{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--sub);line-height:1.55}
.share{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;align-items:center}
.share button,.share a.sh-img{font:inherit;font-size:14px;font-weight:700;border-radius:8px;padding:9px 14px;cursor:pointer;text-decoration:none;line-height:1.2}
.share .sh-go{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.share .sh-copy{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.share a.sh-img{background:#fff;color:var(--ink);border:1px solid #c9ced4}
.sh-msg{flex-basis:100%;margin:0;font-size:13px;color:var(--sub);min-height:1em}
.sh-url{width:100%;font:inherit;font-size:14px;padding:8px;border:1px solid #c9ced4;border-radius:6px}
.deals .share{margin-top:8px}
.hc-h .hc-d{white-space:nowrap}
