/* 보건 리스크 페이지 전용 루트와 공통 높이 변수 */
.people-risk-shell{
  min-width: 0;
}

.people-risk-shell .people-intro{
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #d6e0ef;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.people-risk-shell .people-intro-main{
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(420px, .8fr);
  gap: 32px;
  align-items: center;
  padding: 24px 26px 20px;
}

.people-risk-shell .people-intro-kicker{
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.people-risk-shell .people-intro-title{
  margin: 0 0 9px;
  color: #172033;
  font-size: 26px;
  line-height: 1.25;
}

.people-risk-shell .people-intro-desc{
  max-width: 780px;
  margin: 0;
  color: #526176;
  font-size: 13px;
  line-height: 1.7;
}

.people-risk-shell .people-intro-desc-list{
  margin: 0;
  padding-left: 18px;
}

.people-risk-shell .people-intro-desc-list li{
  margin-bottom: 6px;
}

.people-risk-shell .people-intro-facts{
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(37, 99, 235, .14);
  border-left: 1px solid rgba(37, 99, 235, .14);
}

.people-risk-shell .people-intro-fact{
  min-height: 82px;
  padding: 12px 14px;
  border-right: 1px solid rgba(37, 99, 235, .14);
  border-bottom: 1px solid rgba(37, 99, 235, .14);
  background: rgba(255,255,255,.58);
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.people-risk-shell .people-intro-fact:hover,
.people-risk-shell .people-intro-fact:focus{
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .24);
  transform: translateY(-1px);
  outline: none;
}

.people-risk-shell .people-intro-fact-label{
  margin-bottom: 5px;
  color: #74849a;
  font-size: 10px;
  font-weight: 800;
}

.people-risk-shell .people-intro-fact-title{
  margin-bottom: 6px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.people-risk-shell .people-intro-fact-desc{
  margin: 0 0 8px;
  color: #526176;
  font-size: 11px;
  line-height: 1.55;
}

.people-risk-shell .people-intro-fact-cta{
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
}

.people-risk-shell .people-intro-guide{
  border-top: 1px solid #dce5f2;
  background: rgba(255,255,255,.68);
}

.people-risk-shell .people-intro-guide summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 26px;
  color: #1f2a44;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.people-risk-shell .people-intro-guide summary::-webkit-details-marker{
  display: none;
}

.people-risk-shell .people-intro-guide summary::after{
  content: "+";
  margin-left: 12px;
  color: #2563eb;
  font-size: 18px;
}

.people-risk-shell .people-intro-guide[open] summary::after{
  content: "−";
}

.people-risk-shell .people-intro-guide-hint{
  margin-left: auto;
  color: #7b8aa0;
  font-size: 10px;
  font-weight: 700;
}

.people-risk-shell .people-intro-guide-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 26px 24px;
}

.people-risk-shell .people-intro-guide-card{
  padding: 16px;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  background: #fff;
}

.people-risk-shell .people-intro-guide-no{
  margin-bottom: 14px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.people-risk-shell .people-intro-guide-title{
  margin-bottom: 7px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.people-risk-shell .people-intro-guide-desc{
  margin: 0;
  color: #526176;
  font-size: 11px;
  line-height: 1.65;
}

.people-risk-shell .people-intro-guide-subtitle{
  margin: 0 0 5px;
  color: #1f2a44;
  font-size: 11px;
  font-weight: 900;
}

.people-risk-shell .people-intro-guide-list{
  margin: 0 0 10px;
  padding-left: 16px;
}

.people-risk-shell .people-intro-guide-list:last-child{
  margin-bottom: 0;
}

.people-risk-shell .people-intro-guide-list li{
  margin-bottom: 5px;
}

.people-risk-shell .people-intro-guide-note{
  margin: 5px 0 0;
  color: #526176;
  font-size: 11px;
  line-height: 1.55;
}

.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-risk-shell .people-intro-main,
  .people-risk-shell .people-intro-guide-grid{
    grid-template-columns: 1fr;
  }
  .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;
  }
}

/* 보건리스크 4분면 대시보드 */
.people-risk-shell{
  background:#f5f8fb;
}

.people-risk-page{
  --people-card-short-h: clamp(650px, 39vw, 720px);
  --people-top10-card-h: clamp(730px, 48vw, 840px);
  --people-heat-card-h: clamp(730px, 48vw, 840px);
  padding:0;
  min-width:0;
}

.people-controls{
  display:flex;
  align-items:flex-start;
  margin:0 0 14px;
}

.people-filter-card--compact{
  width:220px;
  min-height:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.people-filter-card--compact .people-filter-label{
  margin:0 0 7px;
  color:#60758b;
  font-size:13px;
  font-weight:900;
}

.people-filter-card--compact .Select-control{
  height:36px !important;
  border:1px solid #b8c8d9 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:none !important;
}

.people-filter-card--compact .Select-value,
.people-filter-card--compact .Select-placeholder{
  line-height:34px !important;
  font-size:13px;
  font-weight:800;
  color:#24364a !important;
}

.people-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:20px 20px;
  align-items:stretch;
}

.people-dashboard-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  border:1px solid #d5e2ee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px rgba(28, 52, 79, 0.045);
}

.people-card-half{
  height:var(--people-card-short-h);
}

.people-dashboard-grid > .people-card-half:nth-child(1){
  grid-column:1 / span 6;
}

.people-dashboard-grid > .people-card-half:nth-child(2){
  grid-column:7 / span 6;
}

.people-card-wide{
  grid-column:1 / span 7;
  height:var(--people-top10-card-h);
}

.people-card-tall{
  grid-column:8 / span 5;
  height:var(--people-heat-card-h);
}

.people-panel-titlebar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px 9px;
  border-bottom:1px solid #dbe6f0;
  min-height:46px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.people-panel-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:26px;
  border-radius:6px;
  background:#123f6e;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.people-panel-heading{
  color:#1a2e44;
  font-size:19px;
  font-weight:900;
  line-height:1.15;
}

.people-dashboard-card .people-graph,
.people-dashboard-card .dash-graph{
  flex:1;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
}

.people-dashboard-card .people-graph .js-plotly-plot,
.people-dashboard-card .people-graph .plot-container,
.people-dashboard-card .people-graph .svg-container{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
}

.people-dashboard-card #people-trend,
.people-dashboard-card #people-age,
.people-dashboard-card #people-top10,
.people-dashboard-card #people-monthly,
.people-dashboard-card #people-trend .js-plotly-plot,
.people-dashboard-card #people-age .js-plotly-plot,
.people-dashboard-card #people-top10 .js-plotly-plot,
.people-dashboard-card #people-monthly .js-plotly-plot,
.people-dashboard-card #people-trend .plot-container,
.people-dashboard-card #people-age .plot-container,
.people-dashboard-card #people-top10 .plot-container,
.people-dashboard-card #people-monthly .plot-container,
.people-dashboard-card #people-trend .svg-container,
.people-dashboard-card #people-age .svg-container,
.people-dashboard-card #people-top10 .svg-container,
.people-dashboard-card #people-monthly .svg-container{
  height:100% !important;
  min-height:0 !important;
}

.people-page-tabs{
  margin-top:0;
}

.people-page-tabs > .tab-container{
  display:flex;
  gap:4px;
  margin:0 0 14px;
  border-bottom:1px solid #cfdbe8;
  background:transparent;
}

.people-page-tabs .people-page-tab,
.people-page-tabs .people-page-tab--selected{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:128px;
  height:42px;
  padding:0 22px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#60758b !important;
  font-size:14px;
  font-weight:900;
}

.people-page-tabs .people-page-tab--selected{
  color:#123f6e !important;
  box-shadow:inset 0 -3px 0 #123f6e;
}

.people-tab-pane{
  min-width:0;
}

.people-simulation-page{
  --people-sim-wide-h:clamp(410px, 30vw, 480px);
  --people-sim-half-h:clamp(360px, 27vw, 430px);
}

.people-simulation-controls{
  margin-bottom:16px;
}

.people-sim-control-card{
  padding:18px;
  border:1px solid #d5e2ee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px rgba(28, 52, 79, 0.045);
}

.people-sim-section-title{
  margin-bottom:14px;
  color:#1a2e44;
  font-size:18px;
  font-weight:900;
}

.people-sim-form-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:14px;
}

.people-sim-field{
  min-width:0;
}

.people-sim-field .Select-control{
  height:38px !important;
  border:1px solid #b8c8d9 !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:none !important;
}

.people-sim-field .Select-value,
.people-sim-field .Select-placeholder{
  line-height:36px !important;
  font-size:13px;
  font-weight:800;
  color:#24364a !important;
}

.people-sim-field--unit{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:8px;
  align-items:end;
}

.people-sim-field--unit .people-filter-label{
  grid-column:1 / -1;
}

.people-sim-input{
  width:100%;
  height:38px;
  min-width:0;
  padding:0 10px;
  border:1px solid #b8c8d9;
  border-radius:8px;
  color:#24364a;
  font-size:13px;
  font-weight:800;
}

.people-sim-unit{
  display:flex;
  align-items:center;
  height:38px;
  color:#60758b;
  font-size:13px;
  font-weight:900;
}

.people-sim-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

.people-sim-button{
  height:38px;
  padding:0 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.people-sim-button--ghost{
  border:1px solid #c6d4e3;
  background:#fff;
  color:#334155;
}

.people-sim-button--primary{
  border:1px solid #123f6e;
  background:#123f6e;
  color:#fff;
}

.people-sim-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.people-sim-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.people-sim-card-wide{
  grid-column:1 / span 8;
  height:var(--people-sim-wide-h);
}

.people-sim-card-table{
  grid-column:9 / span 4;
  height:var(--people-sim-wide-h);
}

.people-sim-card-half{
  grid-column:span 6;
  height:var(--people-sim-half-h);
}

.people-sim-table-wrap{
  flex:1;
  display:flex;
  align-items:center;
  padding:16px;
}

.people-sim-table{
  width:100%;
  border:1px solid #e1e8f0;
  border-radius:8px;
  overflow:hidden;
}

.people-sim-table-row{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr .8fr;
  min-height:42px;
  align-items:center;
  border-bottom:1px solid #e1e8f0;
  color:#24364a;
  font-size:12px;
}

.people-sim-table-row:last-child{
  border-bottom:0;
}

.people-sim-table-row > div{
  min-width:0;
  padding:8px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
}

.people-sim-table-row > div:first-child{
  text-align:left;
  font-weight:900;
}

.people-sim-table-head{
  background:#f6f9fc;
  color:#1a2e44;
  font-weight:900;
}

.people-sim-table-diff{
  color:#ef2323;
  font-weight:900;
}

.people-sim-insights-wrap{
  flex:1;
  min-height:0;
  padding:16px;
}

.people-sim-insights{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  height:100%;
  align-content:center;
}

.people-sim-insight-card{
  min-width:0;
  padding:14px;
  border:1px solid #e1e8f0;
  border-radius:8px;
  background:#fff;
}

.people-sim-insight-label{
  color:#60758b;
  font-size:12px;
  font-weight:900;
}

.people-sim-insight-value{
  margin-top:6px;
  color:#1a2e44;
  font-size:clamp(18px, 1.3vw, 26px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:0;
}

.people-sim-insight-desc{
  margin-top:7px;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}

@media (max-width: 1200px){
  .people-dashboard-grid{
    grid-template-columns:1fr;
  }
  .people-card-half,
  .people-card-wide,
  .people-card-tall{
    grid-column:1 / -1;
    height:auto;
    min-height:420px;
  }
  .people-card-wide,
  .people-card-tall{
    min-height:560px;
  }
  .people-sim-form-grid,
  .people-sim-kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .people-sim-card-wide,
  .people-sim-card-table,
  .people-sim-card-half{
    grid-column:1 / -1;
    height:auto;
    min-height:420px;
  }
}

@media (max-width: 760px){
  .people-filter-card--compact{
    width:100%;
  }
  .people-panel-titlebar{
    padding:11px 12px 7px;
  }
  .people-panel-heading{
    font-size:17px;
  }
  .people-dashboard-grid{
    gap:12px;
  }
  .people-page-tabs .people-page-tab,
  .people-page-tabs .people-page-tab--selected{
    flex:1;
    min-width:0;
    padding:0 10px !important;
  }
  .people-sim-form-grid,
  .people-sim-kpi-grid{
    grid-template-columns:1fr;
  }
  .people-sim-actions{
    justify-content:stretch;
  }
  .people-sim-button{
    flex:1;
  }
  .people-sim-table-row{
    grid-template-columns:1fr;
    gap:0;
    padding:8px 0;
  }
  .people-sim-table-row > div{
    text-align:left;
    white-space:normal;
  }
  .people-sim-insights{
    grid-template-columns:1fr;
    align-content:start;
  }
}

/* 분석 페이지 상단 안내 공통 양식 보정
   - 기후ㆍ재난, 해수면, 재배적지, 부동산, 보건 안내 박스의 구조값을 맞춘다. */
.extreme-page .ext-intro,
.sea-page-shell .ext-intro,
.cc-area-shell .ext-intro,
.people-risk-shell .people-intro{
  margin-bottom:14px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15, 23, 42, .05);
}

.extreme-page .ext-intro-main,
.sea-page-shell .ext-intro-main,
.cc-area-shell .ext-intro-main,
.people-risk-shell .people-intro-main{
  display:grid;
  grid-template-columns:minmax(320px, 1.2fr) minmax(420px, .8fr);
  gap:32px;
  align-items:center;
  padding:24px 26px 20px;
}

.extreme-page .ext-intro-title,
.sea-page-shell .ext-intro-title,
.cc-area-shell .ext-intro-title,
.people-risk-shell .people-intro-title{
  margin:0 0 9px;
  font-size:clamp(21px, 2vw, 28px);
  line-height:1.25;
}

.extreme-page .ext-intro-desc,
.sea-page-shell .ext-intro-desc,
.cc-area-shell .ext-intro-desc,
.people-risk-shell .people-intro-desc{
  max-width:760px;
  margin:0;
  font-size:13px;
  line-height:1.7;
}

.extreme-page .ext-intro-facts,
.sea-page-shell .ext-intro-facts,
.cc-area-shell .ext-intro-facts,
.people-risk-shell .people-intro-facts{
  display:grid;
  grid-template-columns:1fr;
}

.extreme-page .ext-intro-fact,
.sea-page-shell .ext-intro-fact,
.cc-area-shell .ext-intro-fact,
.people-risk-shell .people-intro-fact{
  min-height:62px;
  padding:12px 14px;
}

.extreme-page .ext-intro-fact-desc,
.sea-page-shell .ext-intro-fact-desc,
.cc-area-shell .ext-intro-fact-desc,
.people-risk-shell .people-intro-fact-desc{
  min-height:34px;
  margin:0 0 8px;
  font-size:11px;
  line-height:1.55;
}

.extreme-page .ext-intro-guide summary,
.sea-page-shell .ext-intro-guide summary,
.cc-area-shell .ext-intro-guide summary,
.people-risk-shell .people-intro-guide summary{
  min-height:44px;
  padding:0 26px;
  font-size:12px;
  font-weight:900;
}

.extreme-page .ext-intro-guide-hint,
.sea-page-shell .ext-intro-guide-hint,
.cc-area-shell .ext-intro-guide-hint,
.people-risk-shell .people-intro-guide-hint{
  margin-left:auto;
  font-size:10px;
  font-weight:700;
}

.extreme-page .ext-intro-guide-grid,
.sea-page-shell .ext-intro-guide-grid,
.cc-area-shell .ext-intro-guide-grid,
.people-risk-shell .people-intro-guide-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  padding:0 26px 24px;
}

.extreme-page.realestate-page .ext-intro-guide-grid,
.people-risk-shell .people-intro-guide-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.extreme-page .ext-intro-guide-card,
.sea-page-shell .ext-intro-guide-card,
.cc-area-shell .ext-intro-guide-card,
.people-risk-shell .people-intro-guide-card{
  padding:16px;
  border-radius:8px;
  background:#fff;
}

.extreme-page .ext-intro-guide-no,
.sea-page-shell .ext-intro-guide-no,
.cc-area-shell .ext-intro-guide-no,
.people-risk-shell .people-intro-guide-no{
  margin-bottom:14px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.extreme-page .ext-intro-guide-title,
.sea-page-shell .ext-intro-guide-title,
.cc-area-shell .ext-intro-guide-title,
.people-risk-shell .people-intro-guide-title{
  margin-bottom:7px;
  font-size:13px;
  font-weight:900;
}

.extreme-page .ext-intro-guide-desc,
.sea-page-shell .ext-intro-guide-desc,
.cc-area-shell .ext-intro-guide-desc,
.people-risk-shell .people-intro-guide-desc{
  margin:0;
  font-size:11px;
  line-height:1.65;
}

@media (max-width: 1100px){
  .extreme-page .ext-intro-main,
  .sea-page-shell .ext-intro-main,
  .cc-area-shell .ext-intro-main,
  .people-risk-shell .people-intro-main{
    grid-template-columns:1fr;
    gap:18px;
  }
  .extreme-page .ext-intro-guide-grid,
  .sea-page-shell .ext-intro-guide-grid,
  .cc-area-shell .ext-intro-guide-grid,
  .extreme-page.realestate-page .ext-intro-guide-grid,
  .people-risk-shell .people-intro-guide-grid{
    grid-template-columns:1fr;
  }
}