/* 실거래지도 새 스킨(스테이징 전용, 2026-08-10)
원본 map.html의 로직·DOM은 건드리지 않고 이 파일과 map_v2.js로만 겉모습을 바꾼다.
그래야 매일 도는 지도 갱신·기능 수정과 충돌하지 않고, 채택되면 그때 본편에 옮긴다.
skin-a = 네이버부동산형(좌측 목록 + 지도) / skin-b = 호갱노노형(지도 전면 + 하단 시트) */
/* ── 0. 화면 뼈대: 지도를 최대로 ───────────────────────────── */
body.v2 #wrap{position:relative;overflow:hidden}
body.v2 .site-header{padding-top:7px;padding-bottom:7px;border-bottom:1px solid rgba(20,20,20,.07);
box-shadow:0 1px 3px rgba(20,20,20,.04);z-index:1000;position:relative}
body.v2 #map{flex:1;min-height:0}
body.v2 .site-footer{display:none} /* 지도 화면에서는 푸터를 접는다(원본 저작권은 범례로) */
body.v2 #legend{bottom:14px;left:14px;border-radius:12px;border:0;
box-shadow:0 2px 10px rgba(20,20,20,.12);background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
/* 타일 색(2026-08-10 개정): 처음엔 마커를 돋보이게 하려고 채도를 .42까지 낮췄는데
"구식으로 보이고 지하철·학교가 안 보인다"는 지적을 받았다. 배경 타일에 그려진
지하철 노선·학교·공원 색이 그 필터에 다 빠져 있었던 것.
그래서 원본보다 오히려 진하게 간다. ?tone= 으로 비교할 수 있게 세 단계를 둔다. */
body.v2 .leaflet-tile{filter:saturate(1.18) contrast(1.06) brightness(1.01)}
/* CARTO 계열은 이미 밝고 정돈된 색이라 손대지 않는 편이 깨끗하다.
VWorld를 쓸 때만 위 보정이 의미가 있다(누런 베이지를 살리려던 것). */
body.v2.base-voyager .leaflet-tile,body.v2.base-positron .leaflet-tile{filter:none}
/* VWorld white는 이미 백지 톤이라 채도 보정을 걸면 오히려 탁해진다(2026-08-10). */
body.v2.base-vworld-white .leaflet-tile{filter:none}
body.v2.tone-soft .leaflet-tile{filter:saturate(.72) brightness(1.04)}
body.v2.tone-plain .leaflet-tile{filter:none}
body.v2.tone-vivid .leaflet-tile{filter:saturate(1.35) contrast(1.06)}
/* ── 1. 상단 컨트롤: 지도 위에 떠 있는 캡슐 ────────────────── */
body.v2 #bar{position:absolute;top:calc(var(--v2-top,52px) + 12px);left:12px;z-index:900;
background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
border:0;border-radius:16px;padding:9px 12px;
box-shadow:0 6px 24px rgba(20,20,20,.13),0 1px 3px rgba(20,20,20,.08);
max-width:calc(100vw - 24px);row-gap:7px}
body.v2.skin-a #bar{left:calc(var(--v2-list,352px) + 12px)}
/* 목록이 지도를 덮지 않게 지도 자체를 옆으로 물린다(네이버부동산과 같은 방식).
폭이 바뀌므로 map_v2.js가 invalidateSize()를 부른다. */
body.v2.skin-a #map{margin-left:var(--v2-list,352px)}
body.v2.skin-a #legend{left:calc(var(--v2-list,352px) + 14px)}
body.v2 #stat{margin-left:8px}
/* 검색창을 제일 눈에 띄게 */
body.v2 #sq{width:210px;height:34px;border-radius:10px;border:1.5px solid #E3E6EC;
padding:0 13px;font-size:13.5px;background:#F6F8FB;transition:border-color .15s ease,background .15s ease}
body.v2 #sq:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(37,84,224,.1)}
body.v2 .sbtn{height:34px;border-radius:10px;padding:0 15px;font-size:12.5px}
body.v2 #fbtn{height:34px;border-radius:10px;padding:0 15px;background:#fff;color:var(--text2);
border:1.5px solid #E3E6EC;font-size:12.5px}
body.v2 #fbtn:hover{border-color:var(--navy);color:var(--navy);opacity:1}
body.v2 #modes button{height:34px;border-radius:10px;font-size:12.5px}
body.v2 select{height:34px;border-radius:10px;border:1.5px solid #E3E6EC;font-size:12.5px}
body.v2 .chip{border-radius:10px;border:1.5px solid #E3E6EC;color:var(--text2);font-weight:600;
padding:5px 12px;transition:all .13s ease}
body.v2 .chip:hover{border-color:var(--navy);color:var(--navy)}
body.v2 .chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
body.v2 #fpanel{border:0;border-radius:16px;box-shadow:0 12px 34px rgba(20,20,20,.16)}
/* ── 2. 마커: 가격 말풍선 ────────────────────────────────────
원본은 색을 인라인 style로 넣으므로 map_v2.js가 그 값을 --c로 옮기고 배경을 지운다.
여기서는 --c만 참조한다(인라인 배경이 남아 있으면 아무 일도 일어나지 않게). */
/* 가격 마커(2026-08-10 3차 · 최종안) — 석봉님: "말풍선을 좀 더 심플하고 세련되게".
1차 흰 카드+색 띠(정보 3줄)는 지저분했고, 2차 채도 높은 컬러 알약은 배경이
VWorld 베이지로 돌아오니 너무 원색으로 튀었다. 그래서 장식을 걷어낸다:
흰 바탕에 진한 숫자 하나, 상품 구분은 아래 얇은 색선 한 줄로만. */
body.v2 .pricetag{background:#fff !important;color:#16181D;border:0;
border-radius:7px;padding:4px 10px 5px;font-size:12.5px;font-weight:700;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;
box-shadow:0 1px 2px rgba(16,18,24,.16),0 0 0 1px rgba(16,18,24,.09);
position:relative;line-height:1.2;text-align:center;
transition:transform .12s ease,box-shadow .12s ease}
body.v2 .pricetag:before{content:"";position:absolute;left:7px;right:7px;bottom:0;height:2px;
border-radius:2px;background:var(--c,#2554E0)}
body.v2 .pricetag:after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;
width:0;height:0;border:4px solid transparent;border-top-color:#fff;
filter:drop-shadow(0 1px 0 rgba(16,18,24,.14))}
/* 면적·계약일은 크게 확대했을 때만. 평소엔 가격만 읽히는 게 낫다. */
body.v2 .pricetag .n{display:none;font-size:9.5px;font-weight:500;color:#8B9099;
margin-top:1px;letter-spacing:0}
body.v2.z17 .pricetag .n{display:block}
body.v2 .pricetag .nm{display:none}
body.v2.z16 .pricetag .nm,body.v2.z17 .pricetag .nm{display:block;font-size:10px;font-weight:500;
color:#6B707A;max-width:96px;margin:0 auto;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.v2 .pricetag:hover{transform:translateY(-1px);z-index:10000;
box-shadow:0 4px 12px rgba(16,18,24,.2),0 0 0 1px var(--c,#2554E0)}
body.v2 .pricetag.sel{box-shadow:0 4px 14px rgba(16,18,24,.24),0 0 0 2px #16181D}
body.v2 .pricetag.apx{opacity:.9}
body.v2 .pricetag.apx:before{background:repeating-linear-gradient(90deg,var(--c,#2554E0) 0 4px,transparent 4px 7px)}
/* 목록에서 가리킨 항목 */
body.v2 .pricetag.hl{transform:translateY(-2px) scale(1.06);z-index:10001;
box-shadow:0 6px 16px rgba(16,18,24,.26),0 0 0 2px var(--c,#2554E0)}
/* 군집(시군구·동) 원 */
/* 시군구·동 군집(2026-08-10 3차 · 최종안): 검은 원 → 파랑 덩어리 → **흰 원**.
화면에 30개 넘게 깔리는 물건이라 색을 채우면 지도가 통째로 무거워진다.
흰 바탕에 지역명은 잉크색, 건수만 파랑으로 두어 숫자가 먼저 읽히게 한다. */
body.v2 .clus{background:rgba(255,255,255,.97) !important;border:0;
border-radius:100px !important;backdrop-filter:none;
box-shadow:0 2px 8px rgba(16,18,24,.16),0 0 0 1px rgba(16,18,24,.1)}
body.v2 .clus.dong{background:rgba(255,255,255,.97) !important;
box-shadow:0 2px 8px rgba(37,84,224,.18),0 0 0 1.5px rgba(37,84,224,.5)}
body.v2 .clus .cn{font-size:11px;font-weight:700;letter-spacing:-.03em;color:#16181D}
body.v2 .clus .cc{font-size:11px;font-weight:800;opacity:1;color:#2554E0;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
body.v2 .clus:hover{transform:scale(1.06);
box-shadow:0 5px 16px rgba(16,18,24,.22),0 0 0 1.5px #2554E0}
/* ── 3. 좌측 목록 패널 (skin-a) ─────────────────────────────── */
#v2list{display:none;position:absolute;left:0;top:var(--v2-top,52px);bottom:0;width:var(--v2-list,352px);z-index:880;
background:#fff;box-shadow:2px 0 18px rgba(20,20,20,.09);flex-direction:column;overflow:hidden}
body.v2.skin-a #v2list{display:flex}
#v2list .v2h{padding:13px 16px 11px;border-bottom:1px solid #EDEFF3;flex:0 0 auto}
#v2list .v2h .t{font-size:15px;font-weight:800;letter-spacing:-.02em;color:#141414}
#v2list .v2h .s{font-size:11.5px;color:#8a8378;margin-top:3px}
#v2list .v2sort{display:flex;gap:5px;padding:9px 14px;border-bottom:1px solid #F1F3F7;flex:0 0 auto}
#v2list .v2sort button{border:1.5px solid #E3E6EC;background:#fff;border-radius:8px;padding:4px 11px;
font:inherit;font-size:11.5px;font-weight:700;color:#6b6459;cursor:pointer;transition:all .13s ease}
#v2list .v2sort button.on{background:#141414;border-color:#141414;color:#fff}
#v2list .v2b{flex:1;overflow-y:auto;overscroll-behavior:contain}
#v2list .v2i{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid #F1F3F7;cursor:pointer;
transition:background .12s ease}
#v2list .v2i:hover{background:#F7F9FC}
#v2list .v2i.on{background:#EEF3FF;box-shadow:inset 3px 0 0 var(--c,#2554E0)}
#v2list .v2i .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;
align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;letter-spacing:-.03em;
background:var(--c,#2554E0)}
#v2list .v2i .bd{flex:1;min-width:0}
#v2list .v2i .nm{font-size:13.5px;font-weight:800;color:#141414;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v2list .v2i .ad{font-size:11px;color:#8a8378;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v2list .v2i .pr{font-size:14px;font-weight:800;color:#141414;margin-top:4px;letter-spacing:-.03em}
#v2list .v2i .pr .u{font-size:10.5px;font-weight:700;color:#fff;background:var(--c,#2554E0);
border-radius:5px;padding:1px 5px;margin-right:5px;vertical-align:1.5px;letter-spacing:0}
#v2list .v2i .mt{font-size:10.5px;color:#9a938a;margin-top:2px}
#v2list .v2more{padding:13px;text-align:center;font-size:12px;color:#6b6459;cursor:pointer;font-weight:700}
#v2list .v2empty{padding:34px 20px;text-align:center;color:#9a938a;font-size:12.5px;line-height:1.7}
/* ── 4. 하단 시트 (skin-b · 모바일 공통) ─────────────────────── */
#v2sheet{display:none;position:absolute;left:0;right:0;bottom:0;z-index:890;background:#fff;
border-radius:18px 18px 0 0;box-shadow:0 -6px 26px rgba(20,20,20,.16);
max-height:76%;flex-direction:column;transition:transform .26s cubic-bezier(.2,.8,.3,1)}
body.v2.skin-b #v2sheet{display:flex}
#v2sheet .sh-g{padding:8px 0 3px;flex:0 0 auto;cursor:pointer;text-align:center}
#v2sheet .sh-g i{display:inline-block;width:38px;height:4px;border-radius:4px;background:#ddd7ca}
#v2sheet .sh-h{display:flex;align-items:baseline;gap:8px;padding:2px 18px 11px;flex:0 0 auto;cursor:pointer}
#v2sheet .sh-h .t{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
#v2sheet .sh-h .s{font-size:11.5px;color:#8a8378}
#v2sheet .sh-h .x{margin-left:auto;font-size:11.5px;color:#8a8378;font-weight:700}
#v2sheet .v2b{flex:1;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #f2eee4}
#v2sheet.min{transform:translateY(calc(100% - 52px))}
#v2sheet .v2i{display:flex;gap:11px;padding:12px 18px;border-bottom:1px solid #F1F3F7;cursor:pointer}
#v2sheet .v2i:active{background:#fbf9f4}
#v2sheet .v2i .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:800;color:#fff;background:var(--c,#2554E0)}
#v2sheet .v2i .nm{font-size:13.5px;font-weight:800;letter-spacing:-.02em}
#v2sheet .v2i .ad{font-size:11px;color:#8a8378;margin-top:2px}
#v2sheet .v2i .pr{font-size:14px;font-weight:800;margin-top:4px;letter-spacing:-.03em}
#v2sheet .v2i .pr .u{font-size:10.5px;font-weight:700;color:#fff;background:var(--c,#2554E0);
border-radius:5px;padding:1px 5px;margin-right:5px;vertical-align:1.5px}
#v2sheet .v2empty{padding:30px 20px;text-align:center;color:#9a938a;font-size:12.5px}
#v2sheet .v2more{padding:13px;text-align:center;font-size:12px;color:#6b6459;font-weight:700;cursor:pointer}
/* ── 5. 스킨 전환 스위치(스테이징에만 있는 물건) ─────────────── */
#v2skin{position:absolute;top:calc(var(--v2-top,52px) + 12px);right:12px;z-index:1100;display:flex;gap:0;
background:rgba(255,255,255,.97);border-radius:12px;padding:4px;
box-shadow:0 6px 22px rgba(20,20,20,.14);font-size:11.5px}
#v2skin button{border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:700;
color:#6b6459;padding:6px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
#v2skin button.on{background:#141414;color:#fff}
#v2skin .lbl{align-self:center;font-size:10.5px;color:#9a938a;padding:0 6px 0 2px;white-space:nowrap}
#v2skin .sep{width:1px;background:#eee9dd;margin:5px 3px}
/* ── 6. 모바일 ──────────────────────────────────────────────── */
@media (max-width:720px){
body.v2 #bar{left:8px;right:8px;top:8px;padding:7px 9px;border-radius:14px}
body.v2.skin-a #bar{left:8px}
body.v2 #sq{width:auto;height:32px;font-size:12.5px}
body.v2 .sbtn,body.v2 #fbtn,body.v2 #modes button,body.v2 select,body.v2 #mcats button{height:32px}
/* 목록은 두 스킨 모두 하단 시트로 (좁은 화면에서 좌측 패널은 지도를 다 먹는다) */
body.v2.skin-a #v2list{display:none}
body.v2.skin-a #map{margin-left:0}
body.v2 #bar{top:calc(var(--v2-top,48px) + 8px)}
#v2skin{top:auto}
body.v2.skin-a #v2sheet{display:flex}
#v2sheet{max-height:72%}
#v2skin{top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));right:8px;font-size:11px}
#v2skin button{padding:5px 9px;font-size:11px}
body.v2 #legend{display:none}
body.v2 #loanChip{bottom:auto !important;top:56px !important;right:8px !important}
body.v2.skin-b #loanChip,body.v2.skin-a #loanChip{z-index:880}
body.v2 .pricetag{font-size:11.5px;padding:3px 8px 3px 7px}
}
/* ── 7. 1차 시안 검증에서 나온 것들 (2026-08-10 라이브 실측 후 보정) ── */
/* 줌 버튼이 떠 있는 컨트롤바와 겹쳤다. 네이버·호갱노노처럼 오른쪽 아래로 내린다. */
body.v2 .leaflet-top.leaflet-left{top:auto;left:auto;right:12px;bottom:104px}
body.v2 .leaflet-control-zoom{border:0;box-shadow:0 3px 12px rgba(20,20,20,.16);border-radius:11px;overflow:hidden}
body.v2 .leaflet-control-zoom a{width:34px;height:34px;line-height:34px;font-size:19px;color:#3B3B39;border:0}
body.v2 .leaflet-control-zoom a:first-child{border-bottom:1px solid #eee9dd}
/* B안 데스크톱: 하단 시트를 화면 전체로 펴면 지도가 안 보인다.
지도가 주인공인 안이므로 왼쪽 아래 카드로 띄우고 접힌 상태로 시작한다. */
@media (min-width:721px){
body.v2.skin-b #v2sheet{left:12px;right:auto;width:398px;max-height:64%;
border-radius:16px 16px 0 0;box-shadow:0 -4px 26px rgba(20,20,20,.18)}
body.v2.skin-b #v2sheet.min{transform:translateY(calc(100% - 56px))}
body.v2.skin-b #legend{left:426px}
}
#v2sheet.min{transform:translateY(calc(100% - 56px))}
/* 모바일 헤더가 두 줄로 부풀어 지도를 먹었다. 메뉴는 한 줄 가로 스크롤로. */
@media (max-width:720px){
body.v2 .site-header{padding:6px 0 5px}
body.v2 .site-header .brand{padding-left:12px}
body.v2 .site-header .sub{display:none}
body.v2 .site-header nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;padding:2px 12px 1px;gap:13px}
body.v2 .site-header nav::-webkit-scrollbar{display:none}
body.v2 .site-header nav a,body.v2 .site-header nav span{flex:0 0 auto}
/* 스킨 스위치 자리 찾기(모바일): 하단은 시트 손잡이, 상단은 컨트롤바가 이미 쓴다.
둘 다 피해 컨트롤바 아래 왼쪽에 붙인다. */
#v2skin{bottom:auto;top:calc(var(--v2-top,80px) + 96px);left:8px;right:auto;
background:rgba(255,255,255,.94);padding:3px}
}
/* ── 8. 생활 POI(지하철·학교) — map_v2_poi.js가 그린다 ─────────
네이버·호갱노노에서 가장 눈에 먼저 들어오는 게 역과 학교다. 우리 가격 마커보다
한 단계 낮은 위계로: 색은 채우되 크기는 작게, 라벨은 흰 테두리로 지도 위에서 읽히게. */
.poi{display:flex;align-items:center;gap:4px;white-space:nowrap;pointer-events:none;
font-family:'Pretendard','Malgun Gothic',system-ui,sans-serif}
.poi i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border-radius:50%;color:#fff;font-style:normal;font-weight:800;
box-shadow:0 1px 3px rgba(20,20,20,.35),0 0 0 2px rgba(255,255,255,.9)}
.poi b{font-weight:700;letter-spacing:-.02em;
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 4px #fff,0 1px 2px rgba(255,255,255,.9)}
/* 지하철: 한국 지하철 표지처럼 동그란 색 원 */
.poi.sub i{width:18px;height:18px;background:#1B4DE4;font-size:9px}
.poi.sub i:after{content:"";width:7px;height:7px;border-radius:50%;
border:2.5px solid #fff;display:block}
.poi.sub b{font-size:12px;color:#12296B;
text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 6px #fff,1px 1px 2px #fff,-1px -1px 2px #fff}
.poi.sub.train i{width:15px;height:15px;background:#6B7280}
.poi.sub.train b{font-size:10.5px;color:#4B5563}
/* 학교: 급별 색 + 초·중·고 한 글자 */
.poi.sch{justify-content:center}
.poi.sch i{width:17px;height:17px;font-size:10px;border-radius:6px;
box-shadow:0 1px 4px rgba(20,20,20,.3),0 0 0 2.5px rgba(255,255,255,.95)}
.poi.sch b{font-size:10px;color:#5A5348}
@media (max-width:720px){
.poi.sub b{font-size:10px}
.poi.sch b{font-size:9.5px}
.poi.sch i{width:15px;height:15px;font-size:9px}
}
/* ── 9. 좌측 목록 접기·펴기 (2026-08-10 석봉님 요청) ────────────
"왼쪽에 뜨는 매물 창을 왼쪽으로 닫았다가 다시 열 수 있게."
패널을 왼쪽으로 밀어 넣고, 손잡이만 지도 가장자리에 남긴다.
지도 폭이 바뀌므로 map_v2.js가 invalidateSize()를 부른다. */
#v2list{transition:transform .24s cubic-bezier(.2,.8,.3,1)}
body.v2.skin-a #map,body.v2.skin-a #bar,body.v2.skin-a #legend{
transition:margin-left .24s cubic-bezier(.2,.8,.3,1),left .24s cubic-bezier(.2,.8,.3,1)}
body.v2.listoff #v2list{transform:translateX(-100%)}
body.v2.listoff.skin-a #map{margin-left:0}
body.v2.listoff.skin-a #bar{left:12px}
body.v2.listoff.skin-a #legend{left:14px}
#v2grip{display:none;position:absolute;top:50%;margin-top:-30px;z-index:895;
left:var(--v2-list,352px);width:22px;height:60px;
background:#fff;border:0;border-radius:0 9px 9px 0;cursor:pointer;
box-shadow:3px 0 10px rgba(16,18,24,.13);
color:#6B707A;font-size:13px;font-weight:700;padding:0;
transition:left .24s cubic-bezier(.2,.8,.3,1),color .13s ease}
body.v2.skin-a #v2grip{display:block}
body.v2.listoff #v2grip{left:0}
#v2grip:hover{color:#16181D;box-shadow:3px 0 14px rgba(16,18,24,.2)}
@media (max-width:720px){body.v2.skin-a #v2grip{display:none}}
/* ── 10. 단지·구역 카드 상단 (2026-08-10 석봉님: "컴팩트하고 세련되게") ──
원본은 상품색(파랑·보라 등)을 헤더 전체에 채우고 그 안에 큰 알약 버튼을 넣는다.
면적이 넓어 카드를 열 때마다 원색 덩어리가 먼저 들어오고, 정작 단지명·주소는
그 위에 얹힌 흰 글씨라 읽는 맛이 없었다. 지도 마커를 흰 카드로 정리한 것과도 어긋난다.
→ 헤더를 흰 바탕으로 돌리고 상품색은 **작은 배지 하나**로만 남긴다.
색 자체는 버리지 않는다 — map_v2.js가 인라인 배경색을 --c로 옮겨 배지·강조선에 쓴다. */
body.v2 #rcard .rc-h{background:#fff !important;color:#16181D;
padding:14px 16px 12px;border-bottom:1px solid #ECEEF2;position:relative}
body.v2 #rcard .rc-h:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--c,#2554E0)}
body.v2 #rcard .rc-h .k{display:inline-block;font-family:inherit;
font-size:10.5px;font-weight:700;letter-spacing:0;opacity:1;
color:#fff;background:var(--c,#2554E0);border-radius:5px;padding:2px 7px;margin-bottom:7px}
body.v2 #rcard .rc-h h2{font-family:inherit;font-size:18px;font-weight:800;
letter-spacing:-.03em;color:#16181D;margin:0;line-height:1.25}
body.v2 #rcard .rc-h .loc{font-size:12px;color:#8B9099;margin-top:3px;opacity:1}
body.v2 #rcard .rc-h .rc-pill{background:#F1F3F7;color:#4A5058;font-size:10.5px;
padding:2px 8px;margin-top:7px}
/* 관심단지 버튼: 헤더 폭을 다 먹던 큰 알약 → 제목 옆 작은 버튼.
⚠️ 배경·글자색은 인라인으로 남긴다(등록되면 JS가 노란색으로 바꾸는데, CSS로 덮으면
그 상태 변화가 안 보인다). 우리가 건드리는 건 크기·테두리·자리뿐. */
body.v2 #rcard #rcFav{position:absolute;right:46px;top:14px;margin-top:0 !important;
font-size:11.5px !important;padding:5px 11px !important;
box-shadow:0 0 0 1px rgba(16,18,24,.12);white-space:nowrap}
body.v2 #rcard #rcClose{background:#F1F3F7 !important;color:#6B707A !important;
width:26px !important;height:26px !important;font-size:15px !important;top:13px !important}
body.v2 #rcard #rcClose:hover{background:#E4E7EC !important;color:#16181D !important}
@media (max-width:720px){
body.v2 #rcard .rc-h{padding:12px 14px 11px}
body.v2 #rcard .rc-h h2{font-size:16.5px}
body.v2 #rcard #rcFav{right:42px;top:12px;font-size:11px !important;padding:4px 9px !important}
}
/* 넓게 볼 때 목록에 뜨는 지역 순위(2026-08-10) — 단지 목록과 같은 리듬으로 */
.v2r{display:flex;align-items:center;gap:10px;padding:11px 15px;cursor:pointer;
border-bottom:1px solid #F1F3F7;transition:background .12s ease}
.v2r:hover{background:#F7F9FC}
.v2r .rk{flex:0 0 auto;width:20px;text-align:center;font-size:11.5px;font-weight:800;color:#B9BEC7;
font-variant-numeric:tabular-nums}
.v2r .rn{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#16181D;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2r .rn em{font-style:normal;font-size:11px;font-weight:500;color:#9AA0A9;margin-left:6px}
.v2r .rc{flex:0 0 auto;font-size:13.5px;font-weight:800;color:#2554E0;letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.v2r .rc i{font-style:normal;font-size:10.5px;font-weight:600;color:#9AA0A9;margin-left:2px}
/* ── 11. 동 단위 원: 이름을 원 밖으로 (2026-08-10 석봉님 "텍스트가 얽혀 보기 싫다") ──
원 안에 '동소문동6가' 같은 긴 이름을 우겨넣으니 줄이 접히고 옆 원과 부딪쳤다.
네이버·카카오가 쓰는 방식으로 바꾼다: **원에는 건수만, 이름은 원 아래 한 줄.**
원 크기를 고정해야 줄지어 놓았을 때 정돈돼 보이므로 건수에 따른 크기 변화는 버린다
(건수는 숫자로 이미 읽힌다). 시군구 단계는 이름이 짧아 그대로 둔다. */
body.v2 .leaflet-marker-icon:has(> .clus.dong){
width:34px !important;height:34px !important;
margin-left:-17px !important;margin-top:-17px !important;overflow:visible !important}
body.v2 .clus.dong{width:100% !important;height:100% !important;position:relative;overflow:visible}
body.v2 .clus.dong .cc{font-size:12.5px;font-weight:800;color:#2554E0;letter-spacing:-.03em}
body.v2 .clus.dong .cn{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
white-space:nowrap;font-size:11px;font-weight:700;color:#16181D;letter-spacing:-.03em;
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff,1px 1px 2px #fff,-1px -1px 2px #fff;
pointer-events:none}
/* 겹치는 이름은 map_v2.js가 이 클래스를 붙여 숨긴다(건수 많은 쪽이 남는다) */
body.v2 .clus.dong.nolabel .cn{display:none}
@media (max-width:720px){
body.v2 .leaflet-marker-icon:has(> .clus.dong){width:30px !important;height:30px !important;
margin-left:-15px !important;margin-top:-15px !important}
body.v2 .clus.dong .cc{font-size:11.5px}
body.v2 .clus.dong .cn{font-size:10px}
}
/* ── 12. 조건 0건 안내 버튼 (2026-08-10) ─────────────────────── */
#v2empty{display:none;position:absolute;left:50%;transform:translateX(-50%);
bottom:34px;z-index:905;border:0;cursor:pointer;font:inherit;text-align:center;
background:rgba(22,24,29,.94);color:#fff;border-radius:14px;padding:11px 20px;
box-shadow:0 8px 26px rgba(16,18,24,.28);backdrop-filter:blur(6px);
transition:transform .13s ease,box-shadow .13s ease}
body.v2 #v2empty.on{display:block}
body.v2.skin-a #v2empty{left:calc(50% + var(--v2-list,352px)/2)}
body.v2.listoff.skin-a #v2empty{left:50%}
#v2empty b{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);
letter-spacing:-.02em}
#v2empty span{display:block;font-size:13.5px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
#v2empty:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 12px 30px rgba(16,18,24,.34)}
body.v2.skin-a #v2empty:hover{transform:translateX(-50%) translateY(-2px)}
@media (max-width:720px){
#v2empty{bottom:auto;top:calc(var(--v2-top,80px) + 92px);padding:9px 16px;max-width:88vw}
body.v2.skin-a #v2empty{left:50%}
#v2empty b{font-size:11.5px}#v2empty span{font-size:12.5px}
}
/* ── 13. 동 경계 호버(스테이징 시험) ─────────────────────────── */
#dongtip{position:absolute;z-index:930;pointer-events:none;
background:rgba(22,24,29,.92);color:#fff;font-size:12px;font-weight:700;letter-spacing:-.02em;
padding:5px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(16,18,24,.28);white-space:nowrap}
/* ⚠️ fill-opacity가 0이면 SVG 면이 마우스를 못 받아 호버가 안 걸린다(2026-08-10 확인).
투명하게 두되 pointer-events는 살려야 이름표가 뜬다. */
.dongzone{cursor:default;pointer-events:all !important}