/* 보건 리스크 페이지 전용 루트와 공통 높이 변수 */
.people-risk-page{
  padding-top: 0;
  --people-main-panel-h: clamp(350px, calc(100vh - 590px), 500px); /* 350px=최소높이, 590px=화면에서 뺄 높이(줄이면 커짐), 500px=최대높이 */
  --people-main-graph-h: calc(var(--people-main-panel-h) - clamp(30px, 2.5vw, 38px)); /* main-panel 높이에서 제목/여백값(30~38px)을 뺀 상단 그래프 실제 높이 */
  --people-sub-graph-h: clamp(190px, 20vh, 235px); /* 190px=하단 그래프 최소높이, 20vh=화면높이 기준 자동값, 235px=최대높이 */
  --people-trend-graph-h: calc(var(--people-main-graph-h) * 0.85); /* SSP별 장기 추세 그래프 높이. 0.85=상단 그래프 기준 85%, 숫자를 줄이면 이 그래프만 낮아짐 */
  --people-age-graph-h: calc(var(--people-main-graph-h) * 0.85); /* 연령대별 환자수 구성 그래프 높이. 0.85=상단 그래프 기준 85%, 숫자를 줄이면 이 그래프만 낮아짐 */
  --people-map-graph-h: calc(var(--people-main-graph-h) * 1); /* 시도별 공간 분포 지도 높이. 1=상단 그래프 기준 100%, 0.8=80% */
  --people-monthly-graph-h: calc(var(--people-sub-graph-h) * 1.3); /* 월별 계절성 그래프 높이. 1=하단 그래프 기준 100%, 0.8=80% */
  --people-growth-compare-graph-h: calc(var(--people-sub-graph-h) * 1.3); /* 인구추계별 부담 비교 그래프 높이. 0.95=하단 그래프 기준 95% */
}

/* 상단 필터 드롭다운 영역 */
.people-controls{
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: clamp(8px, 0.7vw, 12px);
  align-items: stretch;
  margin-bottom: clamp(8px, 0.7vw, 12px);
}

/* 필터 카드와 데이터 안내 박스 */
.people-filter-card,
.people-data-info{
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  padding: clamp(7px, 0.65vw, 10px) clamp(9px, 0.78vw, 12px);
  min-height: clamp(52px, 4vw, 66px);
}

/* 여러 칸을 차지하는 필터 카드가 필요할 때 사용 */
.people-filter-card--wide{
  grid-column: span 2;
  min-width: 240px;
}

/* 필터 카드 내부 라벨 */
.people-filter-label{
  font-size: clamp(10px, 0.7vw, 12px);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: clamp(5px, 0.45vw, 8px);
}

/* 데이터 로드/안내 문구 박스 */
.people-data-info{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: clamp(34px, 2.8vw, 42px);
  color: #334155;
  font-size: clamp(10px, 0.7vw, 12px);
  line-height: 1.45;
}

/* 보건 리스크 페이지 안의 Dash Dropdown 크기 보정 */
.people-risk-page .Select-control{
  border-radius: 6px !important;
  min-height: clamp(30px, 2.25vw, 34px) !important;
}

/* 슬라이더가 추가될 경우 주변 간격 보정 */
.people-risk-page .rc-slider{
  margin: 4px 6px 0;
}

/* 상단 KPI 카드 5개를 배치하는 그리드 */
.people-kpi-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: clamp(8px, 0.7vw, 12px);
  margin-bottom: clamp(8px, 0.7vw, 12px);
}

/* 개별 KPI 카드 레이아웃 */
.people-kpi-card{
  display: grid;
  grid-template-columns: clamp(30px, 2.6vw, 40px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 0.6vw, 10px);
  min-height: clamp(56px, 4.8vw, 74px);
  padding: clamp(7px, 0.7vw, 10px);
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

/* KPI 왼쪽 원형 아이콘 */
.people-kpi-icon{
  width: clamp(30px, 2.6vw, 40px);
  height: clamp(30px, 2.6vw, 40px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 900;
}

/* KPI 아이콘 색상 테마 */
.people-kpi-icon.blue{ color: #2563eb; background: #eaf1ff; }
.people-kpi-icon.green{ color: #059669; background: #dcfce7; }
.people-kpi-icon.purple{ color: #7c3aed; background: #f1e9ff; }
.people-kpi-icon.orange{ color: #f97316; background: #fff0e7; }
.people-kpi-icon.pink{ color: #db2777; background: #fde7f3; }

/* KPI 제목 텍스트 */
.people-risk-page .people-kpi-title{
  color: #0f172a;
  font-size: clamp(9px, 0.64vw, 11px);
  font-weight: 700;
  line-height: 1.25;
}

/* KPI 핵심 숫자 값. 글자 크기는 여기서 조절 */
.people-risk-page .people-kpi-value{
  margin-top: clamp(2px, 0.25vw, 4px);
  color: #0f172a;
  font-size: clamp(16px, 0.82vw, 26px) !important;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

/* KPI 보조 설명 텍스트 */
.people-risk-page .people-kpi-desc{
  margin-top: clamp(2px, 0.25vw, 4px);
  color: #475569;
  font-size: clamp(9px, 0.62vw, 11px);
  line-height: 1.25;
}

/* 상단 3개 패널: 장기 추세, 연령대 구성, 지도 */
.people-main-grid{
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) minmax(260px, 1.05fr) minmax(245px, 0.9fr);
  gap: clamp(8px, 0.7vw, 12px);
  margin-bottom: clamp(8px, 0.7vw, 12px);
  align-items: stretch;
}

/* 하단 4개 패널: 월별, 인구추계, 랭킹, 인사이트 */
.people-sub-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(205px, 1fr));
  gap: clamp(8px, 0.7vw, 12px);
}

/* 모든 보건 리스크 패널의 기본 카드 스타일 */
.people-panel{
  border-radius: 8px;
  border-color: #dbe4ef;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  min-height: clamp(200px, 21vh, 270px);
}

/* 상단 3개 패널의 고정 높이 */
.people-trend-panel,
.people-age-panel,
.people-map-panel{
  height: var(--people-main-panel-h);
  min-height: 0;
}

/* 공통 analysis_shell 안에서 상단 패널 높이를 강제로 일치 */
.analysis29 .people-risk-page .people-trend-panel,
.analysis29 .people-risk-page .people-age-panel,
.analysis29 .people-risk-page .people-map-panel{
  height: var(--people-main-panel-h) !important;
  min-height: 0 !important;
}

/* 지도 패널은 내부 지도가 넘치지 않도록 숨김 처리 */
.people-map-panel{
  align-self: start;
  min-height: 0;
  overflow: hidden;
}

/* 공통 shell 스코프에서 지도 패널 높이/넘침 재보정 */
.analysis29 .people-risk-page .people-map-panel{
  align-self: start;
  min-height: 0 !important;
  overflow: hidden;
}

/* 패널 제목 영역 */
.people-risk-page .panel-title{
  padding: clamp(7px, 0.65vw, 11px) clamp(9px, 0.78vw, 14px) clamp(3px, 0.35vw, 6px);
  border-bottom: 0;
  font-size: clamp(12px, 0.9vw, 15px);
}

/* 하단 그래프의 기본 크기 */
.people-graph{
  width: 100%;
  height: auto;
  min-height: 0 !important;
}

/* 그래프가 들어간 패널을 세로 flex로 만들어 중앙 정렬 가능하게 함 */
.people-trend-panel,
.people-age-panel,
.people-map-panel,
.people-sub-grid .people-panel{
  display: flex;
  flex-direction: column;
}

/* Dash Graph 컴포넌트 자체를 패널 가운데로 정렬 */
.people-trend-panel .dash-graph,
.people-age-panel .dash-graph,
.people-sub-grid .dash-graph{
  align-self: center;
}

/* Plotly 내부 컨테이너 높이를 부모 Graph 높이와 맞춤 */
.people-graph .js-plotly-plot,
.people-graph .plot-container,
.people-graph .svg-container{
  height: 100% !important;
  min-height: 0 !important;
}

/* SSP별 장기 추세 그래프 크기와 중앙 위치 */
.people-trend-panel .people-graph{
  width: 95%;
  height: var(--people-trend-graph-h) !important;
  min-height: 0 !important;
  margin: auto;
}

/* dcc.Graph가 잡는 inline/내부 높이보다 SSP 그래프 높이 설정을 우선 적용 */
#people-trend,
#people-trend .js-plotly-plot,
#people-trend .plot-container,
#people-trend .svg-container{
  height: var(--people-trend-graph-h) !important;
  min-height: 0 !important;
}

/* 연령대별 환자수 구성 그래프 크기와 중앙 위치 */
.people-age-panel .people-graph{
  width: 95%;
  height: var(--people-age-graph-h) !important;
  min-height: 0 !important;
  margin: auto;
}

/* dcc.Graph가 잡는 inline/내부 높이보다 연령대별 그래프 높이 설정을 우선 적용 */
#people-age,
#people-age .js-plotly-plot,
#people-age .plot-container,
#people-age .svg-container{
  height: var(--people-age-graph-h) !important;
  min-height: 0 !important;
}

/* 월별 계절성 그래프 중앙 배치 */
#people-monthly{
  height: var(--people-monthly-graph-h) !important;
  min-height: 0 !important;
  margin: auto;
}

/* dcc.Graph가 잡는 inline/내부 높이보다 월별 그래프 높이 설정을 우선 적용 */
#people-monthly .js-plotly-plot,
#people-monthly .plot-container,
#people-monthly .svg-container{
  height: var(--people-monthly-graph-h) !important;
  min-height: 0 !important;
}

/* 인구추계별 부담 비교 그래프 높이 축소 및 중앙 배치 */
#people-growth-compare{
  height: var(--people-growth-compare-graph-h) !important;
  min-height: 0 !important;
  margin: auto;
}

/* dcc.Graph가 잡는 inline/내부 높이보다 인구추계 비교 그래프 높이 설정을 우선 적용 */
#people-growth-compare .js-plotly-plot,
#people-growth-compare .plot-container,
#people-growth-compare .svg-container{
  height: var(--people-growth-compare-graph-h) !important;
  min-height: 0 !important;
}

/* 지도 Graph 기본 높이 */
.people-map-graph{
  height: var(--people-map-graph-h) !important;
  min-height: 0 !important;
}

/* 지도 Graph 안쪽 여백 */
.people-map-graph{
  padding: 0 clamp(6px, 0.6vw, 8px) clamp(4px, 0.45vw, 6px);
}

/* 지도 Plotly 내부 컨테이너 높이 고정 */
#people-map,
#people-map .js-plotly-plot,
#people-map .plot-container,
#people-map .svg-container{
  height: var(--people-map-graph-h) !important;
  min-height: 0 !important;
}

/* 공통 shell 스코프에서 지도 높이 강제 보정 */
.analysis29 .people-risk-page #people-map,
.analysis29 .people-risk-page #people-map .js-plotly-plot,
.analysis29 .people-risk-page #people-map .plot-container,
.analysis29 .people-risk-page #people-map .svg-container,
.analysis29 .people-risk-page .people-map-graph{
  height: var(--people-map-graph-h) !important;
  min-height: 0 !important;
}

/* 위험 지역 랭킹의 기준 선택 segmented control */
.people-segment{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 clamp(10px, 0.9vw, 16px) clamp(4px, 0.35vw, 6px);
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  overflow: hidden;
  background: #f8fafc;
}

/* segmented control 버튼 라벨 */
.people-segment label{
  margin: 0;
  padding: clamp(2px, 0.28vw, 4px) clamp(6px, 0.6vw, 9px);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #64748b;
}

/* 기본 radio input 숨김 */
.people-segment input{
  display: none;
}

/* 선택된 segmented control 버튼 */
.people-segment label:has(input:checked){
  color: #0b5cff;
  background: #fff;
  box-shadow: inset 0 2px 0 #0b5cff;
}

/* 위험 지역 랭킹 표 전체 */
.people-rank-table{
  width: calc(100% - clamp(14px, 1.35vw, 24px));
  margin: 0 clamp(7px, 0.68vw, 12px);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  transform: scaleY(0.95);
  transform-origin: center;
}

/* 랭킹 표 한 행의 컬럼 구성 */
.people-rank-row{
  display: grid;
  grid-template-columns: clamp(28px, 2.2vw, 36px) minmax(70px, 1fr) minmax(72px, 1fr) minmax(58px, 0.74fr);
  min-height: clamp(17px, 1.28vw, 21px);
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  font-size: clamp(9px, 0.62vw, 10px);
  text-align: center;
}

/* 마지막 행 구분선 제거 */
.people-rank-row:last-child{
  border-bottom: 0;
}

/* 랭킹 표 셀 공통 스타일 */
.people-rank-row > div{
  padding: clamp(2px, 0.24vw, 4px) clamp(5px, 0.48vw, 7px);
  border-right: 1px solid #e5e7eb;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 랭킹 표 마지막 셀도 가운데 정렬 */
.people-rank-row > div:last-child{
  border-right: 0;
  text-align: center;
}

/* 랭킹 표 헤더 행 */
.people-rank-head{
  background: #f8fafc;
  color: #334155;
  font-weight: 900;
}

/* 랭킹 표 증가율 색상 */
.people-rank-growth{
  color: #ef2323;
  font-weight: 900;
}

/* 랭킹 표 컨테이너를 패널 중앙에 배치 */
#people-ranking{
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}

/* 하단 랭킹 패널은 표 높이에 맞게 자연 높이 사용 */
.people-sub-grid .people-ranking-panel{
  min-height: auto;
  height: auto;
}

/* 공통 shell 스코프에서 랭킹 패널 높이 보정 */
.analysis29 .people-risk-page .people-sub-grid .people-ranking-panel{
  min-height: auto !important;
  height: auto !important;
}

/* 주요 인사이트 목록 레이아웃 */
.people-insights{
  display: grid;
  gap: clamp(5px, 0.5vw, 8px);
  padding: 2px clamp(8px, 0.75vw, 13px) clamp(8px, 0.8vw, 13px);
}

/* 인사이트 개별 항목 */
.people-insight-item{
  display: grid;
  grid-template-columns: clamp(28px, 2.4vw, 36px) minmax(0, 1fr);
  gap: clamp(6px, 0.6vw, 10px);
  align-items: center;
  min-height: clamp(36px, 3.3vw, 46px);
  padding: clamp(6px, 0.58vw, 8px);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

/* 인사이트 왼쪽 아이콘 */
.people-insight-icon{
  width: clamp(24px, 2vw, 30px);
  height: clamp(24px, 2vw, 30px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 900;
}

/* 인사이트 아이콘 색상 테마 */
.people-insight-icon.blue{ color: #2563eb; background: #eaf1ff; }
.people-insight-icon.pink{ color: #db2777; background: #fde7f3; }
.people-insight-icon.green{ color: #059669; background: #dcfce7; }
.people-insight-icon.orange{ color: #f97316; background: #fff0e7; }

/* 인사이트 문장 텍스트 */
.people-insight-text{
  color: #1f2937;
  font-size: clamp(10px, 0.72vw, 12px);
  line-height: 1.45;
}

/* 페이지 하단 데이터 안내 문구 */
.people-footnote{
  margin-top: clamp(8px, 0.7vw, 12px);
  color: #64748b;
  font-size: clamp(10px, 0.7vw, 12px);
  text-align: center;
}

/* 중간 폭 화면: 필터/KPI는 3열로 줄임 */
@media (max-width: 1500px){
  .people-controls{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .people-data-info{
    grid-column: 1 / -1;
  }
  .people-kpi-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .people-trend-panel,
  .people-age-panel,
  .people-map-panel,
  .people-ranking-panel{
    min-height: auto;
  }
}

/* 좁은 데스크톱/태블릿: 하단 패널 2열 */
@media (max-width: 1180px){
  .people-sub-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 작은 화면: 상단/하단 패널 모두 1열 */
@media (max-width: 980px){
  .people-main-grid{
    grid-template-columns: 1fr;
  }
  .people-sub-grid{
    grid-template-columns: 1fr;
  }
}

/* 모바일 폭: 필터/KPI 1열, 그래프 높이 축소 */
@media (max-width: 760px){
  .people-controls,
  .people-kpi-grid{
    grid-template-columns: 1fr;
  }
  .people-kpi-value{
    white-space: normal;
  }
  .people-panel{
    min-height: auto;
  }
  .people-trend-panel,
  .people-age-panel,
  .people-map-panel,
  .people-ranking-panel{
    height: auto;
  }
}