@import url(https://font.imbc.com/mbcnew/mbcnew.css);
@import url("https://vote2026.imbc.com/css/m/common.css");

/* ─── CSS 변수: 정당 컬러 ─────────────────────────────── */
:root { --c-party1: #4C95E8; /* 더불어민주당 */
  --c-party2: #E66A6A; /* 국민의힘 */
  --c-party3: #4E6DA2; /* 조국혁신당 */
  --c-party4: #ECA559; /* 개혁신당 */
  --c-party5: #B84A6C; /* 진보당 */
  --c-party99: #9D9D9D; /* 기타·무소속 */
  --c-party-etc2: #C6CEDB; /* 미개표 */
  --c-partyC: #9370D6; /* 경합 */
  --c-edu:        #79ADAE; /* 교육감 */
  /* 2026선거지도.svg 행정구역 면색 */
  --map-ref-fill-main: #F1F3F5; --map-ref-fill-city: #E9ECEF; }

/* ─── 리셋 & 기본 ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── mount() 내부: 팝업 등 절대 배치 기준 ─────────────── */
.map-wrapper, #mapTooltip { position: relative; font-family: 'mbcnew-light', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-weight:normal; letter-spacing: -0.025em; color:#495057; }

/* ─── 지도 영역 ────────────────────────────────────────── */
.map-area { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 0; width: 100%; overflow: visible; }
.map-svg-slot { display: flex; justify-content: center; overflow: visible; }

/* viewBox 좌측 확장(428×556)으로 본토 중심 정렬 · 오버레이·도서 클립 방지 */
/* isolation: isolate — region-active-overlay mix-blend-mode 스태킹 격리 */
.election-svg { display: block; flex-shrink: 0; padding: 0 10px; width: 100%; height: auto; max-width: none; overflow: visible; isolation: isolate; }

/* ─── SVG 지역 인터랙션 ────────────────────────────────── */
.region { cursor: pointer; }

/* PC 호버·터치 활성: map.js 가 동일 path 복제 후 .region-active-overlay 에 렌더 */
.region-active-overlay { pointer-events: none; }
/* .region path 보다 우선해 오버레이는 항상 순수 검정 (당 색 fill 규칙이 자식 path에도 적용되므로 !important) */
.region-active-overlay path,
.region-active-overlay polygon { fill: #000 !important; fill-opacity: 0.7; mix-blend-mode: soft-light; pointer-events: none; }

/* ─── 지도 타입별: 행정구역 path/polygon (fill)
     .map-svg-slot[data-map-type] 기준 — 광역단체장만 JS에서 --region-fill(당 색) 설정 */

.map-svg-slot[data-map-type] .election-svg .region path,
.map-svg-slot[data-map-type] .election-svg .region polygon { transition: fill .3s ease; }

.map-svg-slot[data-map-type="metropolitan"] { --map-region-fill-empty: var(--map-ref-fill-city); }
.map-svg-slot[data-map-type="metropolitan"] .election-svg .region path,
.map-svg-slot[data-map-type="metropolitan"] .election-svg .region polygon { fill: var(--region-fill, var(--map-region-fill-empty)); }

/* 기초단체장·재보궐: 2026선거지도.svg와 동일 (광역 #F1F3F5 / 6대 직할 #E9ECEF) */
.map-svg-slot[data-map-type="local"] .election-svg .region path,
.map-svg-slot[data-map-type="local"] .election-svg .region polygon,
.map-svg-slot[data-map-type="by-election"] .election-svg .region path,
.map-svg-slot[data-map-type="by-election"] .election-svg .region polygon,
.map-svg-slot[data-map-type="by-election-cg"] .election-svg .region path,
.map-svg-slot[data-map-type="by-election-cg"] .election-svg .region polygon {fill: var(--map-ref-fill-main);}
.map-svg-slot[data-map-type="local"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) path,
.map-svg-slot[data-map-type="local"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) polygon,
.map-svg-slot[data-map-type="by-election"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) path,
.map-svg-slot[data-map-type="by-election"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) polygon,
.map-svg-slot[data-map-type="by-election-cg"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) path,
.map-svg-slot[data-map-type="by-election-cg"] .election-svg .region:is(
    [data-region="seoul"],
    [data-region="incheon"],
    [data-region="daejeon"],
    [data-region="sejong"],
    [data-region="daegu"],
    [data-region="ulsan"],
    [data-region="busan"],
    [data-region="gwangju"]
  ) polygon { fill: var(--map-ref-fill-city); }

.map-svg-slot[data-map-type="education"] { --map-region-fill: var(--c-edu); }
.map-svg-slot[data-map-type="education"] .election-svg .region path,
.map-svg-slot[data-map-type="education"] .election-svg .region polygon { fill: var(--region-fill, var(--map-region-fill)); }

/* 광역·교육감: 모바일 터치 히트 원 — 시각 없음, fill 규칙 제외 */
.map-svg-slot:is([data-map-type="metropolitan"], [data-map-type="education"])
  .election-svg .region .region-touch-hit { fill: transparent; pointer-events: all; }

/* ─── 오버레이 그룹 (SVG 내부) ────────────────────────── */
.overlay-group { pointer-events: none; }
.overlay-group.interactive { pointer-events: all; }

/* ─── 기초단체장 도트 클러스터 지역명 레이블 ──────────── */
.dot-label { font-size: 16px; font-family: 'mbcnew-bold', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Noto Sans KR', 'Malgun Gothic', sans-serif; fill: #495057; pointer-events: none; }

/* ─── 글래스 백드롭 (지도 SVG 복제 + blur, backdrop-filter 대체) ─── */
.glass-backdrop { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.glass-backdrop-map { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.glass-backdrop-svg { display: block; width: 100% !important; height: 100% !important; max-width: none !important; padding: 0 !important; pointer-events: none; isolation: auto; /* transform: scale(0.95); */
  transform-origin: center center; opacity: 0.4; }
#mapTooltip .glass-backdrop-svg { filter: blur(6px); -webkit-filter: blur(6px); }
.popup-layer .glass-backdrop-svg { filter: blur(12px); -webkit-filter: blur(12px); }

/* ─── 툴팁 ─────────────────────────────────────────────── */
#mapTooltip { position: fixed; min-width: 140px; overflow: hidden; pointer-events: none; z-index: 9999; opacity: 0; margin-top:-10px; transition: opacity .15s ease, margin-top .15s ease; text-align: center; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.60); background:#fff; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15); }
#mapTooltip.visible { opacity: 1; margin-top:0; pointer-events: auto; }
.tooltip-content { position: relative; z-index: 1; padding: 12px 12px 11px; background: transparent; }
.tt-region { font-family: "mbcnew-bold"; font-size: 13px; line-height: 20px; padding-bottom:6px; margin-bottom:8px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.tt-candidate { font-size: 13px; line-height: 20px; margin-bottom:4px; }
.tt-rate { font-family: "mbcnew-bold"; font-size: 18px; line-height: 24px; }

/* ─── 범례 ─────────────────────────────────────────────── */
.legend { position: relative; width:100%; top:0; right:0; margin-top:1.875em; text-align:center; padding:0 10px; }
.legend-header { display:inline-block; font-size: var(--fs-lg); line-height:20px; background-color:#F1F3F5; padding: 7px 24px 5px; border-radius: 30px; }
.legend-header strong{ font-weight:normal; font-family:'mbcnew-medium'; }
.legend-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; row-gap: .5em; margin-top: .75em; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); line-height: 20px; margin: 0 .625em; }
.legend-swatch { width: 12px; height: 12px; flex-shrink: 0; }
.legend-swatch--party1 { background: var(--c-party1); }
.legend-swatch--party2 { background: var(--c-party2); }
.legend-swatch--party3 { background: var(--c-party3); }
.legend-swatch--party4 { background: var(--c-party4); }
.legend-swatch--party5 { background: var(--c-party5); }
.legend-swatch--party99 { background: var(--c-party99); }
.legend-swatch--party-etc2 { background: var(--c-party-etc2); }
.legend-swatch--partyC { background: var(--c-partyC); }

/* ─── 팝업 레이어 (기초단체장 상세) ────────────────────────── */
.popup-layer { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 8px); border-radius: 20px; z-index: 101; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; overflow:hidden; box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.60); background:#fff; }
.popup-layer.open { opacity: 1; visibility: visible; pointer-events: all; }
.popup-layer-close { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; display: flex; cursor: pointer; z-index: 2; background:none; border:none; }
.popup-layer-body { position: relative; z-index: 1; padding: 12px 12px 16px; text-align:center; }
.popup-title { font-family:'mbcnew-bold'; font-size: 1em; color: #495057; line-height: 1.5; margin-bottom: 6px; }

.popup-summary { display:flex; justify-content:center; flex-wrap: wrap; margin-bottom: 12px; }
.popup-party { display: flex; align-items: center; justify-content:center; flex:0 0 100%; width:100%; font-size: var(--fs-md); margin-top:4px; line-height:1.5385; }
.popup-party:nth-child(2n) { padding-left:6.666666vw; box-sizing:border-box; }
.popup-party:nth-child(-n+2) { margin-top:0; }
.popup-summary:has(.popup-party:nth-child(2n)) { padding:0 1.111111111%; justify-content:start; }
.popup-summary:has(.popup-party:nth-child(2n)) .popup-party { justify-content:start; flex:0 0 50%; width:50%; padding-left:6.666666vw; box-sizing:border-box; }
.popup-party-dot { display:inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right:6px; }
.popup-divider { height: 1px; background:#000; opacity: 0.15; margin-bottom:12px; }
.popup-district-group { display:flex; justify-content:start; flex-wrap: wrap; margin-bottom: 12px; padding:0 1.111111111%; row-gap: 1px; }
.popup-district-group:last-child{ margin-bottom:0; }
.popup-district { display: flex; align-items: center; justify-content:start; flex:1 0 50%; width:50%; font-size: var(--fs-md); margin-top:4px; line-height:1.5385; padding-left:6.666666vw; box-sizing:border-box; }
.popup-district:nth-child(2n){ box-sizing:border-box; }
.popup-district:nth-child(-n+2){ margin-top:0; }
.popup-district-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right:6px; }