/* 시군구 지도 — templates/pages/area_hub.html #map · tools/map_svg.py (10-08)
   지표 바꾸기는 라디오 + CSS 만 (JS 없이). 경로마다 data-<지표>="0..5" — 0 은 값 없음 */
.dmap input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.dm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dm-tabs label { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--soft); cursor: pointer; }
#dm-rent:checked ~ .dm-tabs label[for="dm-rent"], #dm-stores:checked ~ .dm-tabs label[for="dm-stores"],
#dm-pop:checked ~ .dm-tabs label[for="dm-pop"], #dm-work:checked ~ .dm-tabs label[for="dm-work"] { background: var(--blue); color: #fff; }
.dmap input:focus-visible ~ .dm-tabs label { outline: 2px solid var(--sky); }
.dmap svg { width: 100%; height: auto; max-height: 560px; display: block; }
.dmap path { fill: #edf1f7; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .15s; }
.dmap a:hover path { stroke: var(--text); stroke-width: 2; }
.dmap text { font-size: 11px; font-weight: 700; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; pointer-events: none; }
.dmap .q0 { background: #edf1f7; border: 1px solid #d5dce8; } .dmap .q1 { background: #dcebfb; } .dmap .q2 { background: #a9cdf3; } .dmap .q3 { background: #64a6ea; } .dmap .q4 { background: #2a74d6; } .dmap .q5 { background: #0b3f9e; }
#dm-rent:checked ~ svg path[data-rent="1"], #dm-stores:checked ~ svg path[data-stores="1"], #dm-pop:checked ~ svg path[data-pop="1"], #dm-work:checked ~ svg path[data-work="1"] { fill: #dcebfb; }
#dm-rent:checked ~ svg path[data-rent="2"], #dm-stores:checked ~ svg path[data-stores="2"], #dm-pop:checked ~ svg path[data-pop="2"], #dm-work:checked ~ svg path[data-work="2"] { fill: #a9cdf3; }
#dm-rent:checked ~ svg path[data-rent="3"], #dm-stores:checked ~ svg path[data-stores="3"], #dm-pop:checked ~ svg path[data-pop="3"], #dm-work:checked ~ svg path[data-work="3"] { fill: #64a6ea; }
#dm-rent:checked ~ svg path[data-rent="4"], #dm-stores:checked ~ svg path[data-stores="4"], #dm-pop:checked ~ svg path[data-pop="4"], #dm-work:checked ~ svg path[data-work="4"] { fill: #2a74d6; }
#dm-rent:checked ~ svg path[data-rent="5"], #dm-stores:checked ~ svg path[data-stores="5"], #dm-pop:checked ~ svg path[data-pop="5"], #dm-work:checked ~ svg path[data-work="5"] { fill: #0b3f9e; }
.dm-key { display: none; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.dm-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#dm-rent:checked ~ .k-rent, #dm-stores:checked ~ .k-stores, #dm-pop:checked ~ .k-pop, #dm-work:checked ~ .k-work { display: flex; }