/* ════════════════════════════════════════
   인구현황 대시보드 공통 스타일 — public/css/population.css

   인구 대시보드와 연령 분포 대시보드가 함께 쓴다.
   제목·라벨이 숫자에 묻히지 않도록 대비(색·굵기·크기)를 올리고,
   교단 CI 색(Denim #2f557f · Campfire #e36520)을 기준으로 맞춘다.
   ※ 그래프 계열색(PD_COLOR)은 건드리지 않는다 — 여기는 화면 서식만 담당한다.
════════════════════════════════════════ */

/* ── 상단 지표 카드 (총인구·총세대·세대당 인구·총면적) ──
   권역 카드(.pop-zone)와 같은 모양 — 왼쪽 굵은 테두리 + 알약형 이름표.
   네 카드 모두 「합회 전체」 지표라 색을 나누지 않고 CI 남색 하나로 맞춘다. */
.pop-kpi {
  flex: 1; min-width: 170px;
  background: #fff; border: 1.5px solid var(--border-light);
  border-left: 5px solid #2f557f;
  border-radius: 12px; padding: 13px 15px;
}
.pop-kpi-label {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .3px; line-height: 1.35;
  background: #eaf2fa; color: #23558c; border: 1px solid #b9d3ec;
}
.pop-kpi-value {
  font-size: 25px; font-weight: 800; color: #16283f;
  margin-top: 9px; line-height: 1.15; letter-spacing: -.5px;
}
.pop-kpi-unit {
  font-size: 12.5px; font-weight: 700; color: var(--text-sub);
  margin-left: 4px; letter-spacing: 0;
}
.pop-kpi-sub { font-size: 11.5px; color: var(--text-sub); margin-top: 5px; line-height: 1.4; }

/* ── 권역 카드 (강북권·강남권) ── */
.pop-zone {
  flex: 1; min-width: 262px;
  background: #fff; border: 1.5px solid var(--border-light);
  border-left-width: 5px; border-left-style: solid;   /* 색은 권역별로 인라인 지정 */
  border-radius: 12px; padding: 13px 15px;
}
.pop-zone-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
/* 권역 이름표 — 옅은 바탕 + 진한 글자라 흰 글자보다 읽기 쉽다 */
.pop-zone-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .3px; line-height: 1.35;
  border: 1px solid transparent;
}
.pop-zone-note { font-size: 12px; color: var(--text-sub); font-weight: 600; }

/* ── 카드 안 작은 항목 (인구·세대·면적·세대당 / 남·여·어린이·장년) ── */
.pop-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pop-cells--5 { grid-template-columns: repeat(5, 1fr); }   /* 연령 카드: 인구·남·여·어린이·장년 */
.pop-cell-label { font-size: 12px; font-weight: 700; color: #54657a; letter-spacing: .1px; }
.pop-cell-value { font-size: 15.5px; font-weight: 800; color: #16283f; margin-top: 2px; letter-spacing: -.2px; }

/* ── 구역(섹션) 제목 (권역 구성비·선교지역별 인구·선교지역별 연령 구분) ── */
.pop-sec {
  background: #fff; border: 1.5px solid var(--border-light);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.pop-sec-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1.5px solid var(--border-light);
}
.pop-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: #1e3a5f; letter-spacing: -.2px;
}
.pop-sec-title::before {
  content: ''; flex: none; width: 4px; height: 16px;
  border-radius: 2px; background: #2f557f;
}
.pop-sec-note { font-size: 12px; color: var(--text-sub); font-weight: 500; }
.pop-sec-spacer { flex: 1; }

/* ── 화면 상단 조작줄의 라벨 (기준연월) ── */
.pop-field-label {
  display: block; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 800; color: #2f557f; letter-spacing: .2px;
}

/* 좁은 화면에서는 카드 안 항목을 2열로 접는다 */
@media (max-width: 640px) {
  .pop-cells, .pop-cells--5 { grid-template-columns: repeat(2, 1fr); }
  .pop-kpi-value { font-size: 22px; }
}