/* 통계자료실 > 국내외자료 > 주요현황 페이지 전용 스타일. */
/* .smh_db_data_collections 는 front/cntnts/view_status.jsp 의 CSS 스코프 마커. */

/* 섹션 목차(예산/기관/인력): 우측 하단 플로팅 카드 — '바로가기' 타이틀 + 색점 리스트.
   상단 tab_menu(국내/국외)와 탭이 두 줄로 보이는 문제를 피해 본문 흐름에서 분리.
   항상 scroll_top_btn(right 2rem, bottom 2rem, 5rem 원형) 위쪽 높이에 고정.
   right 2rem 으로 전 구간 버튼과 정렬(≤460px 는 1rem).
   ≥1760px 는 여백 구간이라 위치 고정(드래그 불가), <1760px 는 드래그로 이동 가능(JS). */

.smh_db_data_collections .data_collections_index {
	position: fixed;
	right: 2rem;
	bottom: 8rem;   /* scroll_top_btn 상단(2+5rem) + 1rem 간격 */
	z-index: 100;   /* scroll_top_btn(99) 위 — 드래그로 겹치면 목차가 앞. 가리면 목차를 옮기면 됨 */
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 6px;
	background: #ffffff;
	border: 1px solid #d7dee8;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(23, 62, 99, 0.14);
}
/* 카드 타이틀: 텍스트 옆에 접기/펼치기 토글 버튼(XEIcon, JS 가 주입). 타이틀 클릭도 토글. */
.smh_db_data_collections .data_collections_index .s_index_title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px 6px;
	margin-bottom: 4px;
	border-bottom: 1px solid #eef1f5;
	font-size: 13px;
	font-weight: 700;
	color: #6b7280;
	letter-spacing: 1px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
/* 원형 테두리는 xi-*-circle-o 아이콘 자체가 그리므로 버튼은 투명 처리.
   style.css 의 `.smh_db button { width:100% }` 오버라이드를 위해 크기에 !important 필요. */
.smh_db_data_collections .s_index_toggle {
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #173e63 !important;
	font-size: 17px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
}
.smh_db_data_collections .s_index_toggle:hover {
	color: #4b94c5 !important;
}
/* 접힌 상태: 링크 목록 숨기고 타이틀 pill 만 남김. */
.smh_db_data_collections .data_collections_index.is_collapsed a {
	display: none;
}
.smh_db_data_collections .data_collections_index.is_collapsed .s_index_title {
	margin-bottom: 0;
	padding-bottom: 2px;
	border-bottom: 0;
}
.smh_db_data_collections .data_collections_index a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 5px 0px;
	border-radius: 6px;
	color: #374151;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.smh_db_data_collections .data_collections_index a span {
	letter-spacing: 3px;
}
/* 항목 색점 */
.smh_db_data_collections .data_collections_index a::before {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #002e5e;
}
.smh_db_data_collections .data_collections_index a:hover,
.smh_db_data_collections .data_collections_index a:focus-visible {
	background: #eef4fb;
	color: #173e63;
}
.smh_db_data_collections .data_collections_index a:focus-visible {
	outline: 2px solid #173e63;
	outline-offset: -2px;
}
.smh_db_data_collections .data_collections_anchor {
	scroll-margin-top: 18.8rem;
}

@media all and (max-width: 1100px) {
	.smh_db_data_collections .data_collections_anchor {
		scroll-margin-top: 10rem;
	}
	.smh_db_data_collections .data_collections_index a {
		padding: 4px 0px;
		font-size: 13px;
	}
}

@media all and (max-width: 460px) {
	.smh_db_data_collections .data_collections_anchor {
		scroll-margin-top: 9rem;
	}
	/* scroll_top_btn 이 right 1rem 으로 붙는 구간이라 가로 정렬만 추종 */
	.smh_db_data_collections .data_collections_index {
		right: 1rem;
	}
}

/* 표별 인터랙티브 블록 wrapper.
   h4·설명 문구는 상위 .collections.detail > .box > .item 이 담당하고,
   .data_collections_section 은 차트 · 슬라이더 · 표 배치와 모바일 재정렬 스코프 역할만 함. */
.smh_db_data_collections .data_collections_section {
	margin-top: 8px;
}
.smh_db_data_collections .s_unit_note {
	font-size: 12px;
	font-weight: 400;
	color: #6b7280;
	margin-left: 6px;
}

.smh_db_data_collections .data_collections_split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	margin-top: 8px;
}

.smh_db_data_collections .data_collections_pane {
	min-width: 0;
	min-height: 140px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #ffffff;
}

/* 좌측 pane: 세로 flex column 으로 출처를 항상 우하단에 붙임. 가로 스크롤은 표 wrap 이 담당.
   ::before 의 margin-top:auto 와 출처의 margin-top:auto 가 남는 세로 공간을 반씩 나눠
   제목+표 블록이 pane 세로 가운데(출처 제외 영역 기준)에 오도록 함. */
.smh_db_data_collections .data_collections_table_pane {
	display: flex;
	flex-direction: column;
}
.smh_db_data_collections .data_collections_table_pane::before {
	content: "";
	margin-top: auto;
}
.smh_db_data_collections .data_collections_table_pane .data_collections_table_wrap {
	overflow-x: auto;
}
.smh_db_data_collections .s_table_source {
	margin-top: auto;   /* 남는 세로 공간을 위쪽에 부여해 출처를 pane 하단으로 밀어냄 */
	padding-top: 8px;
	text-align: right;
	font-size: 12px;
	color: #6b7280;
}

.smh_db_data_collections .data_collections_chart_pane {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;   /* 차트 콘텐츠를 pane 안 세로 가운데 정렬 (콘텐츠가 pane 높이보다 짧을 때 상단에 붙지 않도록) */
}

/* === 연도 슬라이더 === */
/* 좌·우 스텝 버튼 + 슬라이더 wrapper. wrapper 가 margin 담당, 안쪽 slider 는 flex 로 늘어남. */
.smh_db_data_collections .s_slider_wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 50px 20px 120px;
}
.smh_db_data_collections .s_slider_wrap .data_collections_slider {
	flex: 1;
	margin: 0 15px;   /* pip 라벨이 잘리지 않도록 좌·우 내부 여백만 */
}
/* style.css:3605 의 `.smh_db button { width:100% }` 을 오버라이드하기 위해 !important 필요. */
.smh_db_data_collections .s_slider_btn {
	flex: 0 0 36px;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	max-width: 36px;
	padding: 0 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #173e63 !important;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.smh_db_data_collections .s_slider_btn svg {
	width: 14px;
	height: 14px;
	display: block;   /* inline SVG 는 baseline 정렬 → block 로 강제해 완전 센터 */
}
.smh_db_data_collections .s_slider_btn:hover:not(:disabled) {
	background: #173e63 !important;
	border-color: #173e63 !important;
	color: #ffffff !important;
}
.smh_db_data_collections .s_slider_btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* #yearSlider 자체에 .noUi-target 클래스가 붙으므로 compound selector 로 지정. */
.smh_db_data_collections .data_collections_slider {
	margin: 40px 60px 90px;
}
.smh_db_data_collections .data_collections_slider.noUi-target {
	background: #dbeafe;
	border: none;
	box-shadow: none;
	height: 4px;
	border-radius: 2px;
}
.smh_db_data_collections .data_collections_slider .noUi-connect,
.smh_db_data_collections .data_collections_slider .noUi-connects {
	background: transparent;
	box-shadow: none;
}
.smh_db_data_collections .data_collections_slider .noUi-marker-normal,
.smh_db_data_collections .data_collections_slider .noUi-marker-large {
	width: 12px;
	height: 12px;
	background: #ffffff;
	border: 2px solid #6ea8d1;
	border-radius: 50%;
	transform: translateX(-50%);
	top: -8px;   /* 트랙(4px) 중심 정렬: -(마커높이/2) - (pips오프셋/2) = -6 - 2 = -8 */
	margin-left: 0;
	cursor: pointer;
}
/* 점 주변까지 커서·클릭 반응 영역 확장 (투명 오버레이, 클릭 target 은 마커 본체로 유지됨). */
.smh_db_data_collections .data_collections_slider .noUi-marker-normal::after,
.smh_db_data_collections .data_collections_slider .noUi-marker-large::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.smh_db_data_collections .data_collections_slider .noUi-value-horizontal {
	font-size: 13px;
	color: #374151;
	font-weight: 500;
	padding-top: 14px;
	transform: translate(-50%, 0);
	top: 10px;
	cursor: pointer;
}
/* 현재 선택 연도 강조: 하단 라벨을 말풍선 형태(남색 배경 + 흰 글자 + 위쪽 꼬리)로 표시.
   기본 라벨은 padding-top 14px 로 점과 간격을 두므로, 말풍선은 그만큼 top 을 내리고
   실제 padding 으로 배경을 채워 글자 위치를 기본 라벨과 동일하게 유지. */
.smh_db_data_collections .data_collections_slider .noUi-value.s_pip_active {
	color: #ffffff;
	background: #173e63;
	font-weight: 600;
	padding: 3px 10px 4px;
	border-radius: 4px;
	top: 21px;
}
.smh_db_data_collections .data_collections_slider .noUi-value.s_pip_active::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #173e63;
}
.smh_db_data_collections .data_collections_slider .noUi-pips-horizontal {
	padding: 0;
	height: 44px;
	top: 100%;
}
.smh_db_data_collections .data_collections_slider .noUi-handle {
	width: 22px;
	height: 22px;
	right: -11px !important;
	top: -10px !important;
	border-radius: 50%;
	background: #173e63;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 6px rgba(23, 62, 99, 0.35);
	cursor: pointer;
}
.smh_db_data_collections .data_collections_slider .noUi-handle:before,
.smh_db_data_collections .data_collections_slider .noUi-handle:after {
	display: none;
}

/* === 좌측 표 === */
.smh_db_data_collections .data_collections_pane_title {
	position: relative;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #111827;
	text-align: center;
}
/* 단위 표기: 제목 아래 우측 정렬 별도 줄. absolute 우하단 고정은 제목이 길어지면
   (특히 모바일·좁은 pane 2단 구간) 제목 텍스트와 겹치므로 정적 배치로 전환. */
.smh_db_data_collections .data_collections_pane_title .s_unit_note {
	display: block;
	text-align: right;
	margin: 2px 0 0;
	line-height: 1.2;
}
/* 제목 내 보조 문구 (예: 기준 연도 안내) — 단위 표기와 동일 톤, 제목과 같은 줄 유지. */
.smh_db_data_collections .data_collections_pane_title .s_title_note {
	font-size: 12px;
	font-weight: 400;
	color: #6b7280;
	margin-left: 2px;
	word-break: keep-all;
}
.smh_db_data_collections .data_collections_table_wrap {
	max-height: 590px;
	overflow-y: auto;
}
.smh_db_data_collections .data_collections_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.smh_db_data_collections .data_collections_table th,
.smh_db_data_collections .data_collections_table td {
	border-bottom: 1px solid #e5e7eb;
	padding: 6px 8px;
}
.smh_db_data_collections .data_collections_table th + th,
.smh_db_data_collections .data_collections_table td + td {
	border-left: 1px solid #f0f2f5;
}
.smh_db_data_collections .data_collections_table th {
	background: #f8f9fc;
	font-weight: 600;
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 1;
}
.smh_db_data_collections .data_collections_table td {
	text-align: center;
}
.smh_db_data_collections .data_collections_table td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.smh_db_data_collections .data_collections_table tr.row_total {
	background: #eef4ff;
	font-weight: 600;
}
/* 표별 상하 간격: 행 수가 적은 표(2·4)는 크게, 표 3 은 중간 — 우측 차트와 pane 높이 균형용.
   모바일 1단(≤760px)에서는 공통 기본값(6px)으로 복귀. */
.smh_db_data_collections .data_collections_table.t2_table th, .smh_db_data_collections .data_collections_table.t2_table td,
.smh_db_data_collections .data_collections_table.t4_table th, .smh_db_data_collections .data_collections_table.t4_table td {
	padding: 16px 8px;
}
.smh_db_data_collections .data_collections_table.t3_table th, .smh_db_data_collections .data_collections_table.t3_table td {
	padding: 9px 8px;
}
@media (max-width: 760px) {
	.smh_db_data_collections .data_collections_table.t2_table th, .smh_db_data_collections .data_collections_table.t2_table td,
	.smh_db_data_collections .data_collections_table.t3_table th, .smh_db_data_collections .data_collections_table.t3_table td,
	.smh_db_data_collections .data_collections_table.t4_table th, .smh_db_data_collections .data_collections_table.t4_table td {
		padding: 6px 8px;
	}
}

/* 표 5 전용: 4 컬럼 계층형 라벨 (라벨 3 + 값 1). 선택 연도 1개 값만 표시. */
.smh_db_data_collections .data_collections_table.t5_table {
	table-layout: fixed;
}
.smh_db_data_collections .data_collections_table.t5_table td,
.smh_db_data_collections .data_collections_table.t5_table th {
	border: 1px solid #e5e7eb;
	vertical-align: middle;
}
.smh_db_data_collections .data_collections_table.t5_table td.num {
	text-align: right;
	padding: 6px 10px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* lvl_top: 상근인력 합계 (최상위, 라벨 3칸 병합) */
.smh_db_data_collections .data_collections_table.t5_table td.lvl_top {
	letter-spacing: 1px;
	background: #dbeafe;
	font-weight: 700;
	text-align: center;
	padding: 10px 8px;
}

/* lvl1: '정신건강/전문인력' (rowspan 7, 2줄 라벨) */
.smh_db_data_collections .data_collections_table.t5_table td.lvl1 {
	letter-spacing: 2px;
	background: #eaf1fb;
	font-weight: 600;
	text-align: center;
	padding: 8px 4px;
	white-space: nowrap;
}
/* lvl2: '정신건강/전문요원' (rowspan 5, 중간 계층, 2줄 라벨) */
.smh_db_data_collections .data_collections_table.t5_table td.lvl2 {
	letter-spacing: 2px;
	background: #f2f6fc;
	font-weight: 600;
	text-align: center;
	padding: 8px 4px;
	white-space: nowrap;
}
/* lvl2_flat: '합계' · '정신과전문의' — 세로 계층 없이 가로 (colspan 2) */
.smh_db_data_collections .data_collections_table.t5_table td.lvl2_flat {
	background: #f7fafc;
	text-align: center;
	padding: 6px 10px;
}
.smh_db_data_collections .data_collections_table.t5_table td.lvl2_bold {
	font-weight: 600;
	background: #eef4fb;
}
/* lvl3: 정신건강전문요원 하위 (소계/간호사/사회복지사/임상심리사/작업치료사) */
.smh_db_data_collections .data_collections_table.t5_table td.lvl3 {
	background: #ffffff;
	text-align: center;
	padding: 6px 10px;
}
.smh_db_data_collections .data_collections_table.t5_table td.lvl3_bold {
	font-weight: 600;
	background: #f8fafc;
}
/* lvl_flat: 기타(비전문요원) 계층 라벨 (전공의/간호사/…/기타) — 라벨 3칸 병합 */
.smh_db_data_collections .data_collections_table.t5_table td.lvl_flat {
	background: #ffffff;
	text-align: center;
	padding: 6px 10px;
}

/* === 우측 요약 카드 + 지도 === */
.smh_db_data_collections .data_collections_summary_card {
	text-align: center;
	padding: 8px 0 12px;
	border-bottom: 1px solid #f3f4f6;
	margin-bottom: 8px;
}
.smh_db_data_collections .data_collections_summary_card .s_year {
	font-size: 17px;
	color: #6b7280;
}
.smh_db_data_collections .data_collections_summary_card .s_value {
	font-size: 34px;
	font-weight: 700;
	color: #173e63;
	line-height: 1.15;
	margin-top: 2px;
}
.smh_db_data_collections .data_collections_summary_card .s_value .s_unit {
	font-size: 18px;
	font-weight: 500;
	margin-left: 3px;
	color: #374151;
}
.smh_db_data_collections .data_collections_summary_card .s_label {
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
}
.smh_db_data_collections .data_collections_map_wrap {
	position: relative;
	height: 480px;
}
.smh_db_data_collections .data_collections_map_wrap canvas {
	max-width: 100%;
}
/* 지도 범례 (국내 시·도 지도 + 국외 세계지도 공용 가로 칩 리스트) */
.smh_db_data_collections .s_map_legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	justify-content: center;
	font-size: 12px;
	color: #374151;
	margin-bottom: 6px;
}
.smh_db_data_collections .s_map_legend .s_legend_item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.smh_db_data_collections .s_map_legend .s_legend_chip {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 2px;
	vertical-align: -1px;
}
/* 국내 시·도 지도(.data_collections_map_wrap 직속)에서는 범례를 지도 우하단 오버레이 카드로 표시.
   국외 세계지도(.data_collections_map_world)의 상단 가로 범례에는 영향 없음. */
.smh_db_data_collections .data_collections_map_wrap > .s_map_legend {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	margin-bottom: 0;
	padding: 6px 9px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

/* === 진행 바 (표 2·4 우측 pane) === */
.smh_db_data_collections .s_year_hero {
	font-size: 20px;
	color: #6b7280;
	text-align: center;
	padding-bottom: 20px;
	margin: 4px 0 16px;
	line-height: 1;
	border-bottom: 1px solid #f3f4f6;
}
.smh_db_data_collections .s_progress_row {
	display: grid;
	grid-template-columns: 110px 1fr 150px;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.smh_db_data_collections .s_progress_label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	text-align: right;
	line-height: 1.3;
}
.smh_db_data_collections .s_progress_bar_wrap {
	position: relative;
	height: 26px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
}
.smh_db_data_collections .s_progress_bar {
	height: 100%;
	border-radius: 999px;
	transition: width 0.4s ease-out;
}
.smh_db_data_collections .s_progress_value {
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.smh_db_data_collections .s_progress_value .s_progress_unit {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	margin-left: 3px;
}
.smh_db_data_collections .s_insight_box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 12px 16px;
	background: #eff6ff;
	border: 1px solid #dbeafe;
	border-radius: 8px;
	font-size: 13px;
	color: #374151;
}
.smh_db_data_collections .s_insight_box .s_insight_icon {
	font-size: 16px;
	flex: 0 0 auto;
}

/* 좁은 우측 pane 대응 */
@media (max-width: 900px) {
	.smh_db_data_collections .s_progress_row {
		grid-template-columns: 90px 1fr 120px;
		gap: 8px;
	}
	.smh_db_data_collections .s_progress_value {
		font-size: 18px;
	}
	.smh_db_data_collections .s_year_hero {
		font-size: 20px;
	}
}

/* 모바일: 세로 스택. 사이트 공통 모바일 경계(style.css 760px)와 동일 기준.
   .data_collections_section 을 flex column 으로 만들고, 안의 .data_collections_split 을 display:contents 로 투명화해
   자식(차트·표) 들을 section 의 flex 흐름에 편입 → 슬라이더가 표·차트 사이 순서로 들어감. */
@media (max-width: 760px) {
	.smh_db_data_collections .data_collections_section {
		display: flex;
		flex-direction: column;
	}
	.smh_db_data_collections .data_collections_section .data_collections_split {
		display: contents;
	}
	.smh_db_data_collections .data_collections_section .data_collections_chart_pane { order: 1; }
	/* 슬라이더는 sliderPoint 마운트 후 .s_slider_wrap 으로 감싸지므로 wrapper 를 대상으로 순서 지정. */
	.smh_db_data_collections .data_collections_section > .s_slider_wrap,
	.smh_db_data_collections .data_collections_section > .data_collections_slider { order: 2; }
	.smh_db_data_collections .data_collections_section > .s_slider_wrap { margin: 30px 20px 60px; }
	.smh_db_data_collections .data_collections_section .data_collections_table_pane { order: 3; }
}

/* === 국외 페이지 (view_status_overseas.jsp) === */
/* 표 1·4: 2단 병렬 국가 표 — 좌우 쌍 사이 굵은 구분선 */
.smh_db_data_collections .data_collections_table.o1_table td:nth-child(2) {
	border-right: 2px solid #d6dae0;
}
.smh_db_data_collections .data_collections_table.o1_table td.cell_total {
	background: #f3f6fa;
	font-weight: 700;
}
/* 표 3: '구분' 열만 좁게 두고 나머지 3개 값 열은 균등 폭. */
.smh_db_data_collections .data_collections_table.o3_table {
	table-layout: fixed;
}
.smh_db_data_collections .data_collections_table.o3_table th {
	word-break: keep-all;
}
.smh_db_data_collections .data_collections_table.o3_table th:first-child {
	width: 22%;
}
/* 표 2·3·4·5 상하 간격: 우측 차트와 pane 높이 균형용. 모바일 1단(≤760px)은 공통 기본값 복귀. */
.smh_db_data_collections .data_collections_table.o2_table th, .smh_db_data_collections .data_collections_table.o2_table td,
.smh_db_data_collections .data_collections_table.o3_table th, .smh_db_data_collections .data_collections_table.o3_table td {
	padding: 14px 8px;
}
.smh_db_data_collections .data_collections_table.o4_table th, .smh_db_data_collections .data_collections_table.o4_table td,
.smh_db_data_collections .data_collections_table.o5_table th, .smh_db_data_collections .data_collections_table.o5_table td {
	padding: 10px 8px;
}
@media (max-width: 760px) {
	.smh_db_data_collections .data_collections_table.o2_table th, .smh_db_data_collections .data_collections_table.o2_table td,
	.smh_db_data_collections .data_collections_table.o3_table th, .smh_db_data_collections .data_collections_table.o3_table td,
	.smh_db_data_collections .data_collections_table.o4_table th, .smh_db_data_collections .data_collections_table.o4_table td,
	.smh_db_data_collections .data_collections_table.o5_table th, .smh_db_data_collections .data_collections_table.o5_table td {
		padding: 6px 8px;
	}
}
/* 세계지도 캔버스 영역 (국외 전용) — 국내 시·도 지도용 .data_collections_map_wrap(480px) 과 완전 분리된
   독립 클래스. 세계지도는 납작한 비율이라 낮은 확정 높이 사용.
   flex column + 내부 .s_map_canvas 로 캔버스 부모 높이를 (wrap - 범례) 로 한정.
   Chart.js responsive 는 캔버스의 '부모' 크기만 보므로, 범례가 형제로 있으면
   캔버스가 컨테이너를 뚫고 내려가는 문제(표 4 뉴질랜드 잘림)가 생김. */
.smh_db_data_collections .data_collections_map_world {
	position: relative;
	/* min-height(불확정 높이)를 쓰면 내부 .s_map_canvas(flex:1) 높이가 캔버스 크기와 순환
	   참조로 불안정하게 커져 지도 위아래에 빈 공간이 생김. 확정 height 필요.
	   기준: 데스크톱 pane 폭(~544px)에서 세계지도 실제 그리기 높이(~283px) + 여유. */
	height: 340px;
	display: flex;
	flex-direction: column;
}
@media (max-width: 760px) {
	.smh_db_data_collections .data_collections_map_world {
		height: 220px;   /* 1단 모바일: 좁은 폭에서의 지도 실제 높이에 맞춰 축소 */
	}
}
/* 표 4 아·태 지도(mercator): 세계 전도보다 세로로 긴 비율 + 콜아웃 10개가 지도 주변에
   배치되므로 세계지도 공통 높이로는 겹침이 심해짐. 별도 높이 유지. */
.smh_db_data_collections .data_collections_map_world.s_map_ap {
	height: 380px;
}
@media (max-width: 760px) {
	.smh_db_data_collections .data_collections_map_world.s_map_ap {
		height: 300px;
	}
}
.smh_db_data_collections .data_collections_map_world canvas {
	max-width: 100%;
}
.smh_db_data_collections .data_collections_map_world .s_map_canvas {
	position: relative;
	flex: 1;
	min-height: 0;
}
/* 표 2·3 요약 카드: Global 값 미니바 (지역 패널과 동일 형식) */
.smh_db_data_collections .s_card_bars {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
	text-align: left;
}
.smh_db_data_collections .s_card_bar_row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #374151;
}
.smh_db_data_collections .s_card_bar_row .s_cb_label {
	min-width: 170px;
}
.smh_db_data_collections .s_card_bar_row .s_cb_value {
	min-width: 76px;
	font-weight: 700;
	color: #111827;
	text-align: right;
}
.smh_db_data_collections .s_card_bar_row .s_cb_value .s_unit {
	font-weight: 400;
	font-size: 12px;
	color: #6b7280;
}
.smh_db_data_collections .s_card_bar_row .s_cb_bar {
	position: relative;
	width: 90px;
	height: 8px;
	border-radius: 4px;
	background: #e5e7eb;
	overflow: hidden;
}
.smh_db_data_collections .s_card_bar_row .s_cb_bar > span {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 4px;
}
/* 표 6: 한국어 단어 단위 줄바꿈 + 전체 세로 가운데 정렬 */
.smh_db_data_collections .data_collections_table.o6_table th,
.smh_db_data_collections .data_collections_table.o6_table td {
	vertical-align: middle;
	word-break: keep-all;
}