/* 학군 지도 전용. 색은 dashboard.css 의 --re-* 와 palette.js 를 따른다. */

/* 지역 탭(re-view-tabs)과 학교급 탭(re-lvl-tabs)을 한 줄에 묶는다. dashboard.css 의
   .re-controls 가 이미 flex-wrap 이라, 이 안에서도 좁은 화면에서 자연히 줄바꿈된다. */
.re-tab-groups { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.re-school-layer .re-dot {
  stroke: #fff;
  stroke-width: 1.5;
  transition: r 100ms linear;
  cursor: pointer;
  outline: none;
}

/* 점의 실제 지오메트리(r=5, viewBox 스케일에 따라 화면 픽셀이 줄어든다)는
   클릭/호버 판정에 안 쓴다. schoolmap.js 가 svg 전체에서 클릭·마우스이동을
   한 번만 받아 커서에서 가장 가까운 점을 골라 이 is-hover/is-selected 클래스를
   붙인다 — 화면 기준 히트 반경이 viewBox 스케일과 무관하게 일정하다(서울 뷰
   ↔ 전체 뷰 전환 시에도). 점마다 각자 큰 히트 영역을 그리는 방식은 겹친 점의
   히트 영역까지 서로 겹쳐 DOM 순서상 나중 점이 항상 클릭을 가로채는 회귀가
   나서(390px 서울 뷰 38개 중 9개가 자신이 아닌 다른 학교로 뜸) 채택하지 않았다.

   is-hover(가리킴, 표 행 마우스오버/포커스와 연동)와 is-selected(클릭해 고른
   학교)는 크기·링 색·굵기를 모두 다르게 둬 두 상태가 같아 보이지 않게 한다. */
.re-school-layer .re-dot.is-hover {
  r: 7;
  stroke: var(--re-ink2);
  stroke-width: 2.5;
}

/* 학교급 색은 palette.js 의 CATEGORICAL(범주형 슬롯 1·2)과 같은 값이다.
   초=CATEGORICAL[0](파랑), 중=CATEGORICAL[1](주황). CSS 는 그 모듈을 import 할
   수 없어 여기 값을 그대로 옮겨 적었다 — palette.js 쪽을 바꾸면 여기도 바꿀 것. */
.re-school-layer .re-dot.is-초 { fill: #2a78d6; }
.re-school-layer .re-dot.is-중 { fill: #eb6834; }

.re-school-layer .re-dot:focus-visible {
  r: 7;
  stroke: var(--re-ink2);
  stroke-width: 2.5;
}

.re-school-layer .re-dot.is-selected {
  r: 8;
  stroke: var(--re-ink);
  stroke-width: 3;
}

/* 구는 누를 대상이 아니라 배경이다. 점이 묻히지 않게 옅게 깐다. interactive:
   false 라 map.js 가 이 구들에 리스너를 아예 안 달므로(is-hover 클래스도 안
   붙는다) 여기서 :hover 를 따로 지울 필요가 없다. */
.re-app.is-schools svg.re-map path { cursor: default; }

.re-legend-dots { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--re-ink2); }
.re-legend-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.re-legend-dots .is-초 { background: #2a78d6; }
.re-legend-dots .is-중 { background: #eb6834; }

.re-caveat {
  font-size: 12px;
  color: var(--re-ink2);
  background: rgba(61, 65, 68, 0.05);
  border-radius: 6px;
  padding: 8px 11px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.re-school-meta { font-size: 13px; color: var(--re-ink2); margin: 0 0 12px; }

/* .re-panel-head / .re-back-btn / tr.re-list-row 호버 규칙은 실거래 대시보드도
   똑같이 쓰므로 dashboard.css 로 옮겼다(중복 방지). 여기서는 학군 전용 규칙만
   남긴다. */

/* 특목고·자사고 진학률(시·도 단위) — 지도/목록과 분리된 독립 섹션이다.
   .re-section-title 은 dashboard.css 에 이미 있는 규칙을 그대로 물려쓴다. */
.re-progression { margin-top: 22px; }
.re-prog-note {
  font-size: 12.5px; color: var(--re-ink2); line-height: 1.6; margin: 0 0 10px;
}
.re-prog-chart svg { width: 100%; height: auto; display: block; }

/* 범례는 SVG 끝점 라벨과 같은 정보를 한 번 더, 색맹·저시력 사용자도 읽을 수
   있게 텍스트로 준다(색만이 유일한 채널이 되지 않도록). 스와치(<i>) 색은
   charts.js 가 palette.js CATEGORICAL 값을 그대로 inline style 로 찍어 준다
   — 여기서 새 색을 정의하지 않는다. */
.re-prog-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--re-ink2);
}
.re-prog-legend span { display: inline-flex; align-items: center; gap: 6px; }
.re-prog-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* 졸업자 수(분모) 축소를 상호작용 없이 보여주는 캡션. 표처럼 보이지 않게
   진학률 범례와 같은 톤(muted)으로 둔다 — 이 페이지의 주인공은 여전히
   위쪽 지도·시세다. */
.re-prog-cohort {
  font-size: 12px; color: var(--re-muted); margin: 10px 0 0;
  display: flex; gap: 14px; flex-wrap: wrap;
}