@charset "utf-8";

/****************** 메인 공통 ******************/
/* 흰 배경 위 "글자"에 쓰는 파랑 — 메인 파랑(#1D86E8)은 대비 3.73:1 로 낮아 글자에는 이 색을 쓴다 (5.54:1) */
:root { --primary-txt: #1668C2; }
/* 최대 사이즈 1920px, 좌우 패딩 140px (컨텐츠 최대 1640px) */
#wrap.main { background-color: #EBF5FF; }
#wrap.main .inner-padding { max-width: none; margin: 0 auto; }
#wrap.main .line { display: block; }
#wrap.main .header .gnb-box { display: none; }


/****************** 1. 메인비주얼 (Hero) ******************/
.main-vi { position: relative; background: #EBF5FF; padding: 30px 40px; background: url("../img/main/bg-vis02.png") no-repeat right top; }
.main-vi .vi-inner { display: flex; align-items: center; justify-content: flex-start; gap: 30px; }
.main-vi .hero-text {  }
.main-vi .hero-text .hero-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-left:20px; font-size: 18px; color: #000; margin-bottom: 12px; }
.main-vi .hero-text .hero-badge::before { content:""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background-color: #0F4AB7; border-radius: 100%; opacity: 0.1; }
.main-vi .hero-text .hero-badge::after { content:""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background-color: var(--primary500); border-radius: 100%; }
.main-vi .hero-text .hero-tit { font-size: 48px; line-height: 1.2; font-weight: 400; color: #000; word-break: keep-all; margin: 0; letter-spacing: -2px; }
.main-vi .hero-text .hero-tit strong span { font-weight: 400; }
.main-vi .hero-text .hero-tit .point { color: var(--primary500); }
.main-vi .hero-text .hero-desc { margin-top: 34px; font-size: 16px; line-height: 1.6; color: #757575; word-break: keep-all; }

/* 3D 그래픽 일러스트 */
.main-vi .hero-graphic { display: flex; align-items: center; justify-content: center; }
.main-vi .hero-graphic img { margin-left:-150px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(37, 99, 235, 0.12)); }

/* 데이터 출처 카드 */
.main-vi .data-source-card { display: flex; align-items: center; gap:40px; flex-shrink: 0; background: #fff; border-radius: 5px; padding: 40px 45px; margin-left: auto; }
.main-vi .data-source-card .data-box {  }
.main-vi .data-source-card .data-box .ds-tag { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: #000; letter-spacing: 0.5px; }
.main-vi .data-source-card .data-box .ds-tit { font-size: 28px; font-weight: 700; color: #000; margin: 6px 0 16px 0; }
.main-vi .data-source-card .data-box .ds-desc { font-size: 16px; color: #757575; line-height: 1.5; word-break: keep-all; letter-spacing: -0.16px; }
.main-vi .data-source-card .ds-list { display: flex; flex-direction: column; gap: 16px; }
.main-vi .data-source-card .ds-list .ds-item { display: flex; align-items: center; gap:4px; background: #fff; text-decoration: none; }
.main-vi .data-source-card .ds-list .ds-item .ds-logo { display: flex; align-items: center; justify-content: center; width: 130px; height: 40px; border: 1px solid #C7DCFD; border-radius: 5px; transition: all 0.2s; }
.main-vi .data-source-card .ds-list .ds-item:hover .ds-logo { border: 1px solid var(--primary500); }
.main-vi .data-source-card .ds-list .ds-item .ds-logo img { width: 90px; max-width: 100%; }
.main-vi .data-source-card .ds-list .ds-item .ds-name { font-size: 16px; color: #000; margin-left:6px; }
.main-vi .data-source-card .ds-list .ds-item .ico-ext { font-size: 16px; color: #000; }
.main-vi .data-source-card .ds-list .ds-item:first-child .ds-logo img { width: 80px; max-width: 100%; }


/****************** 2. 메인내용 (대시보드) ******************/
.main-content { padding: 0 40px 80px; }

/* 대시보드 카드 컨테이너 */
.dashboard-card { background: #fff; border-radius: 5px; overflow: hidden; margin-bottom: 32px; }

/* 상단 4대 메인 탭바 (GNB와 연동) */
.dashboard-main-tabs { display: flex; width: 100%; background: #F8F9FB; }
.dashboard-main-tabs .tab-item { flex: 1 1 auto; min-width: 0; }
.dashboard-main-tabs .tab-item button { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; color: #555; border: none; cursor: pointer; transition: all 0.2s; text-align: center; white-space: nowrap; padding: 0 40px; }
.dashboard-main-tabs .tab-item:last-child button { border-right: none; }
.dashboard-main-tabs .tab-item.active button { background-color: var(--primary900); color: #fff; font-weight: 600; }
.dashboard-main-tabs .tab-item:not(.active) button:hover { background-color: #E5E5E5; }
.dashboard-main-tabs .tab-item:not(.active) button:focus-visible { background-color: #E5E5E5; }

/* 스와이퍼 슬라이드 */
.dashboard-swiper { width: 100%; position: relative; }
.dashboard-swiper .swiper-slide { background: #fff; }

/* 서브 탭바 */
.subtabs-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E5E5E5; }
.subtabs-bar .subtabs-select-wrap { display: none; }
.subtabs-bar .subtabs-list { flex-grow: 1; display: flex; align-items: center; flex-wrap: wrap; }
.subtabs-bar .subtabs-list li { flex-grow: 1; }
/* 탭이 1~2개면 33.3%씩, 3개 이상은 flex-grow로 균등 분배 */
.subtabs-bar .subtabs-list li:only-child,
.subtabs-bar .subtabs-list li:first-child:nth-last-child(2),
.subtabs-bar .subtabs-list li:first-child:nth-last-child(2) ~ li { flex: 0 0 33.333%; }
.subtabs-bar .subtabs-list .subtab-item button { width: 100%; height: 60px; padding: 8px 16px; font-size: 18px; font-weight: 400; color: #757575; background: transparent; border: none; cursor: pointer; position: relative; transition: all 0.2s; }
.subtabs-bar .subtabs-list .subtab-item button::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--primary500); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform .3s ease; }
.subtabs-bar .subtabs-list .subtab-item.active button { color: var(--primary-txt); font-weight: 600; }
.subtabs-bar .subtabs-list .subtab-item.active button::after { transform: scaleX(1); }
.subtabs-bar .subtabs-list .subtab-item:not(.active) button:hover { color: var(--primary-txt); }
.subtabs-bar .subtabs-list .subtab-item:not(.active) button:focus-visible { color: var(--primary-txt); }

/* 서브 탭 패널 */
.subpanel { display: none; padding:40px; }
.subpanel.active { display: block; }

/* 서브 패널 레이아웃: 좌측(KPI + 차트) / 우측(시·군·구 지역) */
.dash-layout { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); gap: 20px; align-items: stretch; }
.dash-main,
.dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; border:1px solid #ddd; border-radius: 5px; padding:20px; }
.dash-side > .chart-card:first-child { flex: 1 1 auto; }
.dash-main { border:none; padding:0; }
/* 세로(행) 간격 50 · 가로(열) 간격 20 으로 통일 */
.dash-main { gap: 50px; }

/* 3개 KPI 요약 카드 */
.kpi-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi-cards-grid .kpi-card { display: flex; align-items: center; gap: 16px; padding: 30px 20px; background: #F3F7FD; border-radius: 8px; }
.kpi-cards-grid .kpi-card .kpi-icon { width: 56px; height: 56px; border-radius: 50%; background: #E3ECFB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 23px; color: var(--primary500); }
/* 남은 폭을 기준으로 숫자 크기를 줄여 카드 밖으로 넘치지 않게 (container query) */
.kpi-cards-grid .kpi-card .kpi-info { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; container-type: inline-size; }
.kpi-cards-grid .kpi-card .kpi-info .kpi-label { font-size: 16px; font-weight: 400; color: #000; word-break: keep-all; }
.kpi-unit { display: inline-block; } /* 줄이 바뀌면 단위(억원)가 통째로 다음 줄로 */
.kpi-cards-grid .kpi-card .kpi-info .kpi-val { display: inline-flex; align-items: center; font-size: 24px; font-size: clamp(16px, 14cqi, 24px); font-weight: 700; color: #000; margin-top: 2px; line-height: 1.25; word-break: keep-all; }
.kpi-cards-grid .kpi-card .kpi-info .kpi-val.text-industry { font-size: 24px; }
/* 전기대비 증감 (증가: 빨강 ▲ / 감소: 파랑 ▼) */
.kpi-cards-grid .kpi-card .kpi-info .kpi-val.is-up { color: #e5484d; }
.kpi-cards-grid .kpi-card .kpi-info .kpi-val.is-down { color: #2563eb; }
.kpi-val .ico-trend { margin-left: 4px; font-size: 22px; }

/* 차트 카드 그리드 */
.chart-grid { display: grid; row-gap: 50px; column-gap: 20px; }
.chart-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-grid > * { min-width: 0; }
.chart-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chart-card { display: flex; flex-direction: column; min-width: 0; }
.chart-card > .map-box,
.chart-card > .crisis-body,
.chart-card > .summary-body,
.chart-card > .chart-grid { flex: 1 1 auto; }
/* 제목(좌) / 안내문구·버튼(우) 한 줄 배치 */
.chart-sec-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 34px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #E5E5E5; }
/* 제목·단위·출처는 글자 기준선(baseline)에 맞추고, 아이콘만 세로 중앙 */
.chart-sec-header .title-group { display: flex; align-items: baseline; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; gap: 4px 10px; } /* 출처가 길면 줄바꿈 (영역 밖으로 넘치지 않게) */
.chart-sec-header .title-group .badge-bar { align-self: center; }
/* 타이틀 블릿 (겹친 두 개의 라운드 도형) */
.chart-sec-header .title-group .badge-bar { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.chart-sec-header .title-group .badge-bar::before { content:""; position: absolute; left: 0; top: 0; display: block; width: 8px; height: 15px; background-color: #053CA1; transform: rotate(45deg); border-radius: 50px; }
.chart-sec-header .title-group .badge-bar::after { content:""; position: absolute; left: 6px; top: 0; display: block; width: 8px; height: 15px; background-color: var(--primary600); transform: rotate(45deg); border-radius: 50px; }
.chart-sec-header .title-group .sec-title { font-size: 20px; font-weight: 600; line-height: 1.4; color: #000; }
.chart-sec-header .title-group .sec-title small { font-size: 16px; font-weight: 400; color: #757575; }
.chart-sub-tit small { font-size: 13px; font-weight: 500; color: #757575; }
.chart-sec-header .title-group .sec-source { font-size: 16px; font-weight: 400; color: #757575; word-break: keep-all; }
.chart-sec-header .warn-notice { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; color: #E02020; word-break: keep-all; }
.chart-sec-header .warn-notice .ico-warn { flex-shrink: 0; font-size: 20px; }
/* 출처 상세 보기 (아이콘 + 툴팁) — 출처 문구와 아이콘은 한 덩어리로 */
.chart-sec-header .title-group .src-group { display: block; min-width: 0; } /* 글자처럼 흐르게 → 줄이 바뀌어도 ⓘ 아이콘이 마지막 글자 뒤에 붙는다 */
.chart-sec-header .title-group .src-group .src-info { vertical-align: middle; margin-left: 4px; }
.src-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; font-size: 18px; color: #757575; background: none; border: 0; cursor: pointer; }
.src-info:hover, .src-info[aria-expanded="true"] { color: var(--primary500); }
.src-info:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; border-radius: 50%; }
.src-tip { position: absolute; z-index: 30; left: 0; top: calc(100% + 10px); width: max-content; max-width: 460px; padding: 16px 18px; color: #fff; background: #4A5568; border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); }
.src-tip::before { content: ""; position: absolute; top: -6px; left: 24px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
/* 카드(overflow:hidden) 아래로 잘릴 때는 위쪽으로 펼친다 */
.src-tip.is-up { top: auto; bottom: calc(100% + 10px); }
.src-tip.is-up::before { top: auto; bottom: -6px; }
.src-tip .src-tip-tit { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.src-tip ul { display: flex; flex-direction: column; gap: 4px; }
.src-tip li { font-size: 13px; line-height: 1.5; color: #E2E8F0; word-break: keep-all; }
.title-group { position: relative; }
.chart-sec-header .btn-more { display: flex; gap: 4px; align-items: center; margin-left: auto; font-size: 15px; font-weight: 500; color: #757575; }
.chart-sec-header .btn-more:hover,
.chart-sec-header .btn-more:focus-visible { color: var(--primary500); }
.chart-sub-tit { margin-bottom: 14px; font-size: 14px; font-weight: 600; color: #334155; }
.chart-note { margin: -4px 0 8px; font-size: 12px; color: #94a3b8; }

/* ECharts 영역 (높이 지정 필수) */
.echart { width: 100%; height: 300px; }
.echart.h-lg { height: 340px; }
.echart.sm { height: 260px; }
.echart.donut { height: 250px; }
/* 도넛 묶음: 한 차트에 여러 도넛 (라벨이 옆 칸까지 넘어가도 잘리지 않음) */
.echart.donut-group { height: 300px; } /* 첫 값일 뿐, 실제 높이는 줄 수에 맞춰 스크립트가 지정 */
.donut-grid { gap: 8px; }

/* 지도 (우측 하단: 선택 지역 / 연도 / 초기화) */
.map-box { position: relative; padding: 16px 24px; background: #F5F9FE; border-radius: 10px; }
.map-box .echart.map { height: 400px; }
.crisis-body .echart.map { height: 320px; }
.map-box .map-controls { position: absolute; right: 24px; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.map-box .map-controls .map-actions { display: flex; align-items: center; gap: 10px; }
.map-box .map-controls .current-region-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; color: #000; }
.map-box .map-controls .current-region-badge i { font-size: 18px; font-weight: 400; }
/* 선택 전에는 지역명 영역 전체를 숨김 (위 display 지정이 [hidden] 기본값보다 우선하므로 별도 지정) */
.map-box .map-controls .current-region-badge[hidden] { display: none; }
/* 버튼·셀렉트 기본 스타일은 공통(.dash-btn / .dash-select)으로 통일, 지도 영역은 여백만 조정 */
.map-box .dash-select { padding: 0 44px 0 18px; }
.map-box .select-wrap::after { right: 16px; font-size: 22px; }

.region-rank-list { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.region-rank-list .rank-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 5px 0; font: inherit; text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.region-rank-list .rank-item:hover .rank-name,
.region-rank-list .rank-item.active .rank-name { font-weight: 600; }
.region-rank-list .rank-item:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }
.region-rank-list .rank-item .rank-name { flex-shrink: 0; width: 100px; font-size: 16px; font-weight: 400; color: #000; white-space: nowrap; }
.region-rank-list .rank-item .rank-bar-wrap { display: block; flex-grow: 1; height: 16px; background: #F2F6FB; border-radius: 8px; overflow: hidden; }
.region-rank-list .rank-item .rank-bar-wrap .rank-bar { display: block; min-width: 16px; height: 100%; border-radius: 8px; background: #E4F2FB; transition: width 0.6s ease, background-color 0.2s; }
/* 순위별 색상 (지도 단계 색상과 동일) / 선택 지역: 초록 */
.region-rank-list .rank-item:nth-child(1) .rank-bar { background-color: #173F82; }
.region-rank-list .rank-item:nth-child(2) .rank-bar { background-color: #1D55A8; }
.region-rank-list .rank-item:nth-child(3) .rank-bar { background-color: #2A6CC4; }
.region-rank-list .rank-item:nth-child(4) .rank-bar { background-color: #2F7FD9; }
.region-rank-list .rank-item:nth-child(5) .rank-bar { background-color: #3A8EE3; }
.region-rank-list .rank-item:nth-child(6) .rank-bar { background-color: #63B0EF; }
.region-rank-list .rank-item:nth-child(7) .rank-bar { background-color: #8CCAF5; }
.region-rank-list .rank-item:nth-child(8) .rank-bar { background-color: #B6DCF5; }
.region-rank-list .rank-item:nth-child(9) .rank-bar { background-color: #CDE6F8; }
.region-rank-list .rank-item:nth-child(10) .rank-bar { background-color: #D6EAF9; }
.region-rank-list .rank-item:nth-child(n+11) .rank-bar { background-color: #DDEEFA; }
.region-rank-list .rank-item.active .rank-bar { background-color: #52B135; }
.region-rank-list .rank-item .rank-val { flex-shrink: 0; min-width: 72px; text-align: right; font-size: 16px; font-weight: 400; color: #000; }

/* 지역별 표 (지원현황) */
.region-table-wrap { max-height: 340px; margin-top: 20px; overflow-y: auto; background: #fff; border: 1px solid var(--stat-line); border-radius: 8px; }
/* 더 있는 줄이 잘린 것처럼 보이지 않도록 스크롤 막대를 항상 표시 */
.region-table-wrap { scrollbar-width: thin; scrollbar-color: #C4CDD9 #F1F5F9; }
.region-table-wrap::-webkit-scrollbar { width: 8px; }
.region-table-wrap::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 8px; }
.region-table-wrap::-webkit-scrollbar-thumb { background: #C4CDD9; border-radius: 8px; }
.region-table-wrap:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }
.region-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.region-table th { position: sticky; top: 0; padding: 9px 14px; font-weight: 600; color: #334155; text-align: left; background: #f1f5f9; border-bottom: 1px solid #E5E5E5; }
.region-table td { padding: 8px 14px; color: #334155; border-bottom: 1px solid #f1f5f9; }
.region-table th:last-child,
.region-table td:last-child { text-align: right; }
.region-table td:last-child { font-weight: 700; color: #1e293b; }
.region-table tbody tr:last-child td { border-bottom: 0; }
/* 지도에 마우스를 올린 지역 줄 표시 (표 ↔ 지도 연동) */
.region-table tbody tr:hover td,
.region-table tbody tr.is-hover td { background: #E8F3FF; }
.region-table tbody tr.is-hover td:last-child { color: var(--primary600); }
/* DataTables 기본값 덮어쓰기 (플러그인 파일은 수정하지 않음) */
.region-table-wrap .region-table thead th { padding: 9px 14px; border-bottom: 1px solid var(--stat-line); }
.region-table-wrap .region-table.no-footer { border-bottom: 0; }
.region-table-wrap .region-table td { border-bottom: 1px solid #f1f5f9; }

/* 공통 폼 컨트롤 (대시보드) */
/* 셀렉트 + 리믹스아이콘 화살표(ri-arrow-drop-down-line) */
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap::after { content: "\ea50"; font-family: 'remixicon'; position: absolute; top: 50%; right: 8px; font-size: 20px; line-height: 1; color: #333; pointer-events: none; transform: translateY(-50%); }
.dash-select { height: 42px; padding: 0 30px 0 10px; font-size: 16px; color: #000; background: #fff; border: 1px solid #333; border-radius: 8px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.dash-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; font-size: 16px; color: #000; white-space: nowrap; background: #fff; border: 1px solid #333; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.dash-btn i { font-size: 15px; }
.dash-btn:hover { background: #f1f5f9; color: #0f172a; }
.dash-btn.primary { color: #fff; background: var(--primary500); border-color: var(--primary500); }
.dash-btn.primary:hover { background: var(--primary600); border-color: var(--primary600); color: #fff; }
.dash-select:focus-visible,
.dash-btn:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }

/* 소멸/위기대응 지역 */
/* 셀렉트·조회 버튼은 한 덩어리로 움직인다 (자리가 모자라면 셋이 함께 아래 줄 오른쪽으로) */
.filter-inline { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin-left: auto; }
.crisis-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; padding: 20px; background: #f8fafc; border: 1px solid #edf2f7; border-radius: 10px; }
/* 칸 안의 차트 캔버스가 이전 크기를 유지해 칸을 넓히지 않도록 (창을 줄일 때 차트가 안 줄어들던 원인) */
.crisis-body > * { min-width: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: 12px; color: #475569; }
.map-legend li { display: flex; align-items: center; gap: 6px; }
.map-legend .dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px; }
.map-legend .dot.lv1,
.map-legend .dot.good { background: #1aa9e8; }
.map-legend .dot.lv2 { background: #b5e04b; }
.map-legend .dot.lv3 { background: #f4d10f; }
.map-legend .dot.lv4 { background: #e8962e; }
.map-legend .dot.lv5,
.map-legend .dot.warn { background: #ee5fa7; }
/* 소멸위험지수 기준 안내 */
.crisis-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin-top: 14px; padding: 12px 16px; background: #fff; border: 1px solid #CFE3F7; border-radius: 6px; }
.crisis-note li { position: relative; padding-left: 10px; font-size: 13px; line-height: 1.5; color: #475569; word-break: keep-all; }
.crisis-note li::before { content: ""; position: absolute; top: 9px; left: 0; width: 3px; height: 3px; background: #94a3b8; border-radius: 50%; }
.crisis-note b { font-weight: 600; color: #1e293b; }

/* 통계 섹션 (경제 통계 · 사업투자) */
.stat-sections { display: grid; row-gap: 50px; column-gap: 20px; }
.stat-sections.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-sections.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stat-section { display: flex; flex-direction: column; min-width: 0; }
.stat-section.span-full { grid-column: 1 / -1; }
.stat-section > .chart-card,
.stat-section > .chart-grid { flex: 1 1 auto; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 30px; padding: 14px 16px; background: #F8FAFC; border-radius: 8px; } /* 테두리 없이 배경만 → 상자 겹침 줄임 */
.filter-bar .filter-item { display: flex; align-items: center; gap: 8px; }
/* 항목명은 선택값(16px)보다 작고 굵게 → 이름과 값이 구분되게 */
.filter-bar .filter-item label { font-size: 14px; font-weight: 500; color: #555; white-space: nowrap; }
/* 조회 기간 표시: 버튼처럼 보이지 않게 테두리·배경 없이, 안내 문구(지도 클릭 안내)와 같은 붉은 글자 + ! 아이콘 */
.filter-bar .period-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; line-height: 1; color: #E02020; white-space: nowrap; }
.filter-bar .period-badge i { font-size: 15px; }
.filter-bar .filter-btns { display: flex; gap: 6px; margin-left: auto; }

/* 보기 기준 라디오 + 업종분류 선택 (세부 산업현황) */
.filter-bar-detail { row-gap: 14px; }
.filter-bar-detail .filter-view { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.filter-bar-detail .radio-item { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #555; white-space: nowrap; cursor: pointer; }
.filter-bar-detail .radio-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary500); cursor: pointer; }
.filter-bar-detail .radio-item:has(input:checked) { color: var(--primary600); font-weight: 500; }
.filter-bar-detail .dash-select:disabled { color: #9aa5b1; background: #F5F6F8; border-color: #cbd5e1; cursor: default; }
.filter-bar-detail .filter-ksic { gap: 12px; }
.filter-bar-detail .filter-label { font-size: 14px; font-weight: 500; color: #555; white-space: nowrap; }
.chip-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 36px; padding: 0 14px; font-size: 15px; color: #555; background: #fff; border: 1px solid #cbd5e1; border-radius: 18px; cursor: pointer; transition: all 0.2s; }
.chip:hover { border-color: var(--primary500); color: var(--primary600); }
.chip.active { color: #fff; background: var(--primary500); border-color: var(--primary500); }
.chip:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }

/* 통계 표 (세부 산업현황 · 품목별 수출 현황) */
:root { --stat-line: #E5E5E5; } /* 표 안 가로·세로 구분선 색 (한 곳에서 관리) */
.stat-table-wrap { overflow: auto; border: 1px solid #E5E5E5; border-radius: 8px; }
.stat-table-wrap:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }
.stat-table { width: 100% !important; border-collapse: collapse; font-size: 14px; }
.stat-table th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; font-weight: 600; color: #333; text-align: center; white-space: nowrap; background: #F3F7FD; border-bottom: 1px solid var(--stat-line); }
.stat-table td { padding: 11px 14px; color: #333; text-align: right; border-bottom: 1px solid var(--stat-line); }
.stat-table td:first-child { text-align: left; word-break: keep-all; }
.stat-table tbody tr:last-child td { border-bottom: 0; }
.stat-table tbody tr:hover td { background: #F7FBFF; }
/* DataTables 플러그인 덮어쓰기
   - 플러그인(jquery.dataTables.css)이 main.css 뒤에 오고 선택자도 더 구체적이라(table.dataTable …)
     여백과 선색(#111)이 플러그인 값으로 적용됩니다. 플러그인 파일은 수정하지 않고
     .stat-table-wrap 을 앞에 붙여 우선순위만 높여 되돌립니다. */
.stat-table-wrap .stat-table thead th,
.stat-table-wrap .stat-table thead td { padding: 12px 14px; border-bottom: 1px solid var(--stat-line); }
.stat-table-wrap .stat-table.no-footer { border-bottom: 0; } /* 플러그인이 넣는 검은 하단선 제거 */
.stat-table-wrap .stat-table-wide thead th,
.stat-table-wrap .stat-table-wide thead td { padding: 8px 4px; }
/* 가로·세로 구분선을 같은 색으로 통일
   (마지막 열만 제외하고 오른쪽에 선 → rowspan 머리글에도 선이 끊기지 않고 이어집니다) */
.stat-table-wrap .stat-table th:not(:last-child),
.stat-table-wrap .stat-table td:not(:last-child) { border-right: 1px solid var(--stat-line); }
/* 개발 시 API로 행을 넣어도 동일하게 보이도록 위치(nth-child) 기준으로도 지정 */
.stat-table .col-hs2,
#exportItemTable tbody td:nth-child(1) { width: 70px; text-align: center; }
.stat-table .col-item,
#exportItemTable tbody td:nth-child(2) { max-width: 420px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 제목 옆 외부 링크 (산업분류연계표 바로가기) */
.link-ext { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: #555; text-decoration: underline; word-break: keep-all; }
.link-ext:hover, .link-ext:focus-visible { color: var(--primary-txt); text-decoration: underline; }
.link-ext i { font-size: 16px; }
/* 열이 많은 표(세부 산업현황): 기존 시스템과 동일하게 폭 100% 고정 배치 */
.stat-table-wide { width: 100%; table-layout: fixed; font-size: 11px; }
.stat-table-wide th { padding: 8px 4px; white-space: normal; word-break: keep-all; } /* 연도는 두 줄로 표시 */
.stat-table-wide td { padding: 8px 4px; white-space: nowrap; }
.stat-table-wide thead tr:first-child th { font-size: 13px; }
.stat-table-wide th.col-name,
.stat-table-wide td.col-name,
.stat-table-wide tbody tr > *:first-child { width: 5.5%; overflow: hidden; text-overflow: ellipsis; }
.stat-table-wide thead th.col-name { text-align: center; } /* 항목 · 업종명 머리글은 가운데 */
.stat-table-wide tbody td.col-name,
.stat-table-wide tbody tr > *:first-child { text-align: left; }
/* 가로 스크롤 안내 (1199px 이하에서만 노출) */
/* 가로 스크롤 안내: 표가 실제로 영역보다 넓을 때만 스크립트가 .is-show 를 붙여 표시 */
.table-scroll-hint { display: none; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; font-size: 13px; color: #757575; }
.table-scroll-hint.is-show { display: flex; }
.table-scroll-hint i { font-size: 16px; color: var(--primary500); }
.stat-table-wide .th-year th { font-weight: 400; color: #555; }
/* 정렬 가능한 열 표시 (DataTables) */
/* th 는 이미 sticky(=위치 기준)라 position 을 다시 지정하지 않습니다. 지정하면 열 고정이 풀립니다. */
.stat-table thead th.sorting,
.stat-table thead th.sorting_asc,
.stat-table thead th.sorting_desc,
.region-table thead th.sorting,
.region-table thead th.sorting_asc,
.region-table thead th.sorting_desc { cursor: pointer; }
/* 정렬 화살표는 머리글 글자 바로 옆에 (칸이 넓을 때 화살표만 칸 끝에 떨어져 보이지 않게) */
.stat-table thead th.sorting::after,
.stat-table thead th.sorting_asc::after,
.stat-table thead th.sorting_desc::after,
.region-table thead th.sorting::after,
.region-table thead th.sorting_asc::after,
.region-table thead th.sorting_desc::after { content: "\ea4c"; display: inline-block; margin-left: 4px; font-family: 'remixicon'; font-size: 13px; font-weight: 400; line-height: 1; vertical-align: -1px; color: #B7C2D0; }
/* 열이 아주 좁은 세부 산업현황 표만 칸 오른쪽 끝에 고정 (글자 옆에 두면 연도가 줄바꿈됨) */
.stat-table-wide thead th.sorting,
.stat-table-wide thead th.sorting_asc,
.stat-table-wide thead th.sorting_desc { padding-right: 16px; }
.stat-table-wide thead th.sorting::after,
.stat-table-wide thead th.sorting_asc::after,
.stat-table-wide thead th.sorting_desc::after { position: absolute; top: 50%; right: 2px; margin-left: 0; transform: translateY(-50%); }
.region-table thead th.sorting_asc::after,
.stat-table thead th.sorting_asc::after { content: "\ea78"; color: var(--primary500); }
.region-table thead th.sorting_desc::after,
.stat-table thead th.sorting_desc::after { content: "\ea4e"; color: var(--primary500); }

/* 지원현황 요약 (총 등록 기업수 + 연도별) */
.summary-body { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; }
.summary-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 16px; text-align: center; background: #F3F7FD; border-radius: 8px; }
.summary-kpi .kpi-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; font-size: 23px; color: var(--primary500); background: #E3ECFB; border-radius: 50%; }
.summary-kpi .kpi-label { font-size: 16px; font-weight: 400; color: #000; }
.summary-kpi .kpi-val { font-size: 32px; font-weight: 700; line-height: 1.2; color: #000; }
.summary-kpi .kpi-val small { margin-left: 2px; font-size: 18px; font-weight: 600; }

/* 차트 기준 전환 토글 (총 / 평균) */
/* 초기화 · 조회 버튼과 같은 모양으로 통일 */
.chart-toggle { display: inline-flex; gap: 6px; }
.chart-toggle button { height: 34px; padding: 0 14px; font-size: 14px; color: #000; white-space: nowrap; background: #fff; border: 1px solid #333; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chart-toggle button:hover { background: #f1f5f9; }
.chart-toggle button[aria-pressed="true"] { color: #fff; background: var(--primary500); border-color: var(--primary500); }
.chart-toggle button[aria-pressed="true"]:hover { background: var(--primary600); border-color: var(--primary600); }
.chart-toggle button:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }

/* 슬라이드 2: 충북 주력산업 */
/* 산업 카드: 클릭하면 아래 상세(산업정의 · 산업범위 · 연도별 현황)가 해당 산업으로 바뀐다 */
.industry-guide { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 15px; color: #555; word-break: keep-all; }
.industry-guide i { flex-shrink: 0; font-size: 18px; color: var(--primary500); }
.industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.industry-grid > li { display: flex; min-width: 0; }
.industry-card { display: flex; flex-direction: column; width: 100%; padding: 24px 20px; text-align: left; background: #F3F7FD; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.industry-card:hover { border-color: var(--primary200); }
.industry-card:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }
.industry-card.active { background: #fff; border-color: #333; } /* 셀렉트 박스(.dash-select)와 같은 테두리 색 */
.industry-card .ind-icon { width: 48px; height: 48px; border-radius: 50%; background: #E3ECFB; color: var(--primary500); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 24px; transition: background 0.2s, color 0.2s; }
.industry-card.active .ind-icon { color: #fff; background: var(--primary500); }
.industry-card .ind-tit { display: block; min-height: 2.7em; margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.35; color: #000; word-break: keep-all; }
.industry-card.active .ind-tit { color: var(--primary600); }
.industry-card .ind-stats-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; border-top: 1px solid #DCE5F2; padding-top: 14px; }
.industry-card .ind-stats-list .ind-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.industry-card .ind-stats-list .ind-stat-row .label { color: #555; white-space: nowrap; }
.industry-card .ind-stats-list .ind-stat-row .label small { font-size: 12px; color: #757575; }
.industry-card .ind-stats-list .ind-stat-row .val { font-size: 16px; font-weight: 500; color: #000; }
/* 산업정의 */
.industry-def { position: relative; padding: 20px 24px 20px 72px; font-size: 16px; line-height: 1.7; color: #333; word-break: keep-all; background: #F3F7FD; border-radius: 8px; }
.industry-def::before { content: "\ec51"; position: absolute; top: 18px; left: 22px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: 'remixicon'; font-size: 18px; line-height: 1; color: #fff; background: var(--primary500); border-radius: 50%; } /* 앞머리 아이콘(따옴표) — 마크업 추가 없이 CSS 로만 표시 */
/* 산업범위(KSIC) 표 · 연도별 표 */
.stat-table.tbl-ksic td { text-align: left; }
.stat-table.tbl-ksic td.col-code { width: 12%; font-weight: 500; text-align: center; white-space: nowrap; }
.stat-table.tbl-center td,
.stat-table.tbl-center td:first-child { text-align: center; }
/* 차트 묶음 바로 아래에 오는 표 · 조회 조건과의 간격 */
.chart-grid + .filter-bar,
.chart-grid + .table-scroll-hint.is-show,
.chart-grid + .table-scroll-hint:not(.is-show) + .stat-table-wrap { margin-top: 30px; }
.stat-table-wrap.is-scroll-y { max-height: 420px; } /* 비교 현황 표: '전체' 연도 선택 시 세로 스크롤 */


/****************** 3. 공지사항 / 게시판 섹션 (DataTables 카드형) ******************/
.notice-board-card { background: #fff; border-radius: 5px; padding: 20px 40px; width: 100%; margin-top: 30px; }
.notice-board-card .board-tabs-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E5E5E5; margin-bottom: 24px; }
.notice-board-card .board-tabs-bar .board-tabs-list { flex-grow: 1; display: flex; align-items: center; }
.notice-board-card .board-tabs-bar .board-tabs-list li { flex-grow: 1; }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item button { width: 100%; height: 50px; padding: 10px 14px; font-size: 16px; font-weight: 400; color: #757575; background: transparent; border: none; cursor: pointer; position: relative; transition: all 0.2s; text-align: center; }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item button::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: var(--primary500); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform .3s ease; }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item.active button { color: var(--primary-txt); font-weight: 600; }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item.active button::after { transform: scaleX(1); }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item:not(.active) button:hover { color: var(--primary-txt); }
.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item:not(.active) button:focus-visible { color: var(--primary-txt); }
.notice-board-card .board-tab-pane { display: none; }
.notice-board-card .board-tab-pane.active { display: block; }
.notice-board-card .notice-cards-table { width: 100% !important; border: none !important; border-collapse: collapse !important; margin: 0 !important; }
.notice-board-card .notice-cards-table thead { display: none !important; }
.notice-board-card .notice-cards-table tbody { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; margin-bottom: 28px !important; border: none !important; }
.notice-board-card .notice-cards-table tbody tr { display: block !important; border: none !important; background: transparent !important; }
.notice-board-card .notice-cards-table tbody td { display: block !important; padding: 0 !important; border: none !important; height: 100% !important; }
.notice-board-card .notice-card { display: flex; flex-direction: column; justify-content: space-between; height: 162px; padding: 20px; border-radius: 5px; text-decoration: none; transition: all 0.2s; border:1px solid #E5E5E5; }
.notice-board-card .notice-card:hover { border-color: var(--primary500); background: #F7FBFF; border: 1px solid #DAE6F1; }
.notice-board-card .notice-card:focus-visible { border-color: var(--primary500); background: #F7FBFF; border: 1px solid #DAE6F1; }
.notice-board-card .notice-card .card-tit { font-size: 18px; font-weight: 500; color: #141414; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.notice-board-card .notice-card .card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.notice-board-card .notice-card .card-bottom .card-date { font-size: 15px; color: #757575; }
.notice-board-card .notice-card .card-bottom .card-file-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--primary-txt); }
.notice-board-card .notice-card .card-bottom .card-file-badge .ph { font-size: 18px; }
.notice-board-card table.dataTable.no-footer { border-bottom: none !important; }
.notice-board-card .dataTables_wrapper { padding: 0 !important; position: relative; }
.notice-board-card .dataTables_wrapper .dataTables_paginate { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 auto !important; float: none !important; text-align: center !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 100% !important; font-size: 16px !important; font-weight: 400 !important; color: #757575 !important; background: transparent !important; border: none !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; box-shadow: none !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button i { font-size: 18px !important; line-height: 1 !important; display: inline-block !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) { background: #e5e5e5 !important; color: #0f172a !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button.current, .notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--primary500) !important; color: #fff !important; font-weight: 600 !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #cbd5e1 !important; cursor: default !important; opacity: 0.4 !important; background: transparent !important; border: none !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate > span { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
.notice-board-card .dataTables_wrapper .dataTables_paginate .ellipsis { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 32px !important; line-height: 1 !important; color: #757575 !important; padding: 0 4px !important; margin: 0 !important; }
.notice-board-card .arrow-left-double-line::before { font-family: 'remixicon' !important; content: "\f2e3"; }
.notice-board-card .arrow-left-s-line::before { font-family: 'remixicon' !important; content: "\ea64"; }
.notice-board-card .arrow-right-s-line::before { font-family: 'remixicon' !important; content: "\ea6e"; }
.notice-board-card .arrow-right-double-line::before { font-family: 'remixicon' !important; content: "\f2e5"; }


/****************** 반응형 미디어 쿼리 ******************/
@media only screen and (max-width: 1700px) {
	.main-vi { padding: 30px 50px; }
}
@media only screen and (max-width: 1500px) {
	.main-vi { padding:60px 30px; }
	.main-vi .hero-graphic img { margin-left: -130px; width: 420px; }
	.main-vi .data-source-card { padding: 30px 32px; gap: 28px; }

	.main-content { padding: 0 30px 80px; }
}

@media only screen and (max-width: 1400px) {
	.main-vi .hero-graphic img { margin-left: -130px; width: 380px; }
	.main-vi .data-source-card { padding: 30px 32px; gap: 28px; }
}

@media only screen and (max-width: 1340px) {
	.main-vi .vi-inner { gap: 20px; }
	.main-vi .hero-graphic img { margin-left: -100px; width: 300px; }
	.main-vi .hero-text .hero-tit { font-size: 40px; line-height: 1.2; font-weight: 400; color: #000; word-break: keep-all; margin: 0; letter-spacing: -2px; }
}

@media only screen and (max-width: 1200px) {
	.main-vi .hero-text .hero-desc { margin-top:14px; }

	.main-vi .hero-graphic { display: none !important; }
	.main-vi .hero-text br { display: none; }
	.main-vi .vi-inner { flex-direction: column; align-items: stretch; gap: 24px; }
	.main-vi .data-source-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 32px; margin-left: 0; }
	.main-vi .data-source-card .data-box { flex: 1 1 auto; }
	.main-vi .data-source-card .ds-list { flex-shrink: 0; }
	.dash-layout { grid-template-columns: 1fr; gap: 50px; } /* 위아래로 쌓이면 블록 간격(50)과 동일 */
	/* 좌우 구분용 테두리는 위아래로 쌓이면 필요 없으므로 제거 */
	.dash-side { padding: 0; border: 0; border-radius: 0; }
	.chart-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-sections.cols-2-1 { grid-template-columns: 1fr; }
	.industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.industry-card .ind-tit { min-height: 0; }
	.industry-card .ind-tit br { display: none; }
	.notice-board-card .notice-cards-table tbody { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 통계 표: 좁은 화면에서는 가로 스크롤 + 업종명(첫 열) 고정 */
@media only screen and (max-width: 1199px) {
	.stat-table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
	/* 셀 고정 시 테두리가 어긋나지 않도록 border-collapse 를 분리 방식으로 */
	.stat-table-wide { table-layout: auto; min-width: 960px; font-size: 12px; border-collapse: separate; border-spacing: 0; }
	.stat-table-wide th,
	.stat-table-wide td { padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--stat-line); }
	.stat-table-wide thead th { border-bottom: 1px solid var(--stat-line); }
	.stat-table-wide th.col-name,
	.stat-table-wide td.col-name,
	.stat-table-wide tbody tr > *:first-child { position: sticky; left: 0; z-index: 2; width: auto; min-width: 84px; background: #fff; }
	.stat-table-wide thead th.col-name { z-index: 3; background: #F3F7FD; }
	.stat-table-wide tbody tr:hover th.col-name,
	.stat-table-wide tbody tr:hover > *:first-child { background: #F7FBFF; }
	.stat-table:not(.stat-table-wide) { min-width: 620px; }
}

@media only screen and (max-width: 1023px) {
	.main-content { padding: 0 20px 60px; }
	#wrap.main .main-content .inner-padding {padding:0;}
	.link-banner .banner-inner {padding:0;}
	.main-vi { padding: 50px 0; }
	.main-vi .vi-inner { flex-direction: column; align-items: stretch; gap: 20px; }
	.main-vi .hero-text .hero-tit { font-size: 36px; }
	.main-vi .hero-graphic { display: none !important; }
	.dashboard-main-tabs .tab-item button { font-size: 16px; height: 48px; }
	.subtabs-bar .subtabs-list .subtab-item button { font-size: 16px; }
	.stat-sections.cols-2 { grid-template-columns: 1fr; }
	#panel-crisis > .chart-grid { grid-template-columns: 1fr; }
	.chart-grid.cols-3 { grid-template-columns: 1fr; } /* 태블릿: 3열 차트는 좁아서 범례·축이 겹치므로 한 줄씩 */
	.industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media only screen and (max-width: 767px) {
	.main-vi { padding: 40px 0; background-size: 240px auto; }
	.main-vi .hero-text .hero-badge { font-size: 15px; margin-bottom: 8px; }
	.main-vi .hero-text .hero-tit { font-size: 28px; line-height: 1.3; }
	.main-vi .hero-text .hero-desc { font-size: 14px; margin-top: 10px; }
	.main-vi .hero-graphic { display: none !important; }
	.main-vi .data-source-card { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 24px; margin-left: 0; }
	.main-vi .data-source-card .data-box { width: 100%; }
	.main-vi .data-source-card .data-box .ds-tit { font-size: 22px; margin: 4px 0 10px 0; }
	.main-vi .data-source-card .data-box .ds-desc { font-size: 14px; line-height: 1.45; word-break: keep-all; }
	.main-vi .data-source-card .data-box .ds-desc br { display: none; }
	.main-vi .data-source-card .ds-list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.main-vi .data-source-card .ds-list .ds-item { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 4px; text-align: center; }
	.main-vi .data-source-card .ds-list .ds-item .ds-logo { flex: 0 0 100%; width: 100%; height: 40px; }
	.main-vi .data-source-card .ds-list .ds-item .ds-name { font-size: 14px; margin-left: 0; white-space: nowrap; }
	.main-vi .data-source-card .ds-list .ds-item .ico-ext { font-size: 14px; display: inline-flex; align-items: center; }

	.main-content { padding: 0 15px 50px; }
	.dashboard-card { margin-bottom: 24px; }
	.dashboard-main-tabs { flex-wrap: wrap; }
	.dashboard-main-tabs .tab-item { flex: 0 0 50%; }
	.dashboard-main-tabs .tab-item button { font-size: 14px; height: 46px; }
	
	.subtabs-bar { display: block; border-bottom: none; padding: 15px 15px 0; }
	.subtabs-bar .subtabs-list { display: none; }
	.subtabs-bar .subtabs-select-wrap { display: block; width: 100%; }
	.subtabs-bar .subtabs-select-wrap .select-wrap { display: block; width: 100%; }
	.subtabs-bar .subtabs-select-wrap .select-wrap::after { right: 16px; font-size: 22px; color: var(--primary500); }
	.subtabs-bar .subtabs-select { width: 100%; height: 46px; padding: 0 44px 0 16px; font-size: 15px; font-weight: 600; color: #1e293b; background: #f8fafc; border: 1.5px solid var(--primary500); border-radius: 6px; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
	
	.subpanel { padding: 40px 16px 40px; } /* 위 40px = 블록 사이 간격과 동일 → 제목 위 여백 통일 */
	.kpi-cards-grid { grid-template-columns: 1fr; gap: 10px; }
	.kpi-cards-grid .kpi-card { padding: 14px 16px; gap: 12px; border-radius: 8px; }
	.kpi-cards-grid .kpi-card .kpi-icon { width: 42px; height: 42px; }
	.kpi-cards-grid .kpi-card .kpi-info .kpi-val { font-size: 20px; }
	
	/* 모바일 세로 간격 40px 로 통일 */
	.dash-layout { gap: 40px; }
	.dash-main,
	.dash-side { gap: 40px; }
	.chart-grid { row-gap: 40px; }
	.chart-grid.cols-2,
	.chart-grid.cols-3,
	.chart-grid.cols-4 { grid-template-columns: 1fr; }
	.stat-sections { row-gap: 40px; column-gap: 20px; }
	/* 필터: 항목명(+기간 태그)을 셀렉트 위에 두는 폼 형태, 버튼은 아래에 반반 */
	.filter-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
	.filter-bar .filter-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
	.filter-bar .filter-item label { font-size: 13px; }
	.filter-bar .filter-item .select-wrap { display: flex; flex: 0 0 100%; width: 100%; }
	.filter-bar .filter-item .dash-select { width: 100%; }
	.filter-bar .filter-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 2px 0 0; }
	.filter-bar .filter-btns .dash-btn { width: 100%; }
	.filter-bar-detail .filter-view { display: grid; grid-template-columns: 1fr; gap: 8px; }
	.filter-bar-detail .filter-view .select-wrap { display: flex; width: 100%; }
	.filter-bar-detail .filter-view .dash-select { width: 100%; }
	.filter-bar .filter-item.filter-ksic { gap: 6px; }
	/* 제목 줄 안의 셀렉트·조회는 한 줄을 채우게 */
	.chart-sec-header .filter-inline { width: 100%; }
	.chart-sec-header .filter-inline .select-wrap { flex: 1 1 0; display: flex; }
	.chart-sec-header .filter-inline .dash-select { width: 100%; }
	.crisis-body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.crisis-note { grid-template-columns: 1fr; gap: 4px; }
	.summary-body { grid-template-columns: 1fr; }

	.chart-sec-header { flex-wrap: wrap; }
	.chart-sec-header .warn-notice { margin-left: 0; text-align: left; }
	.chart-sec-header .title-group .sec-title { font-size: 18px; }
	.chart-sec-header .title-group .sec-source,
	.chart-sec-header .warn-notice { font-size: 14px; }
	.chart-sec-header .warn-notice .ico-warn { width: 18px; height: 18px; font-size: 12px; }
	.echart { height: 260px; }
	.echart.h-lg { height: 280px; }
	/* 모바일: 폭이 넓어지면 도넛도 같이 커지도록 고정 높이 대신 비율 사용 */
	.echart.donut { height: auto; aspect-ratio: 4 / 3; max-height: 360px; }

	.map-box { padding: 16px; }
	.map-box .echart.map { height: 320px; }
	.map-box .map-controls { position: static; align-items: stretch; gap: 10px; margin-top: 16px; }
	.map-box.map-overlay .map-controls .current-region-badge { justify-content: center; font-size: 16px; }
	.map-box .map-controls .map-actions > * { flex: 1 1 0; }
	.map-box .map-actions .select-wrap { display: flex; }
	.map-box .map-actions .select-wrap .dash-select { width: 100%; }
	/* 모바일: 셀렉트·버튼 높이 34px 로 통일 (지도 위 컨트롤 포함) */
	.dash-select,
	.dash-btn { height: 34px; font-size: 14px; }
	.dash-btn { padding: 0 14px; }
	.select-wrap::after { font-size: 18px; }
	.map-box.map-overlay .dash-select,
	.map-box.map-overlay .dash-btn { height: 34px; font-size: 14px; }
	.region-rank-list .rank-item { gap: 10px; }
	.region-rank-list .rank-item .rank-name { width: 92px; font-size: 14px; }
	.region-rank-list .rank-item .rank-val { min-width: 60px; font-size: 14px; }
	.region-table-wrap { max-height: 240px; }

	.notice-board-card { padding: 16px 16px 24px; margin-top: 20px; }
	.notice-board-card .board-tabs-bar { border-bottom: none; margin-bottom: 16px; }
	.notice-board-card .board-tabs-bar .board-tabs-list { flex-wrap: wrap; }
	.notice-board-card .board-tabs-bar .board-tabs-list li { flex: 1 0 auto; border-bottom: 1px solid #E5E5E5; }
	.notice-board-card .board-tabs-bar .board-tabs-list li:nth-child(-n+3) { flex-basis: 25%; }
	.notice-board-card .board-tabs-bar .board-tabs-list li:nth-child(n+4) { flex-basis: 50%; }
	.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item button { height: 42px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
	.notice-board-card .notice-cards-table tbody { grid-template-columns: 1fr !important; }
	.notice-board-card .notice-card { height: auto; padding: 16px 14px; }
	.notice-board-card .notice-card .card-tit { font-size: 15px; }
	.notice-board-card .notice-card .card-bottom .card-date { font-size: 13px; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button { width: 32px !important; height: 32px !important; font-size: 13px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button i { font-size: 14px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate { gap: 4px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate > span { gap: 4px !important; }
}

@media only screen and (max-width: 480px) {
	.main-vi { padding: 30px 0; background-size: 180px auto; }
	.main-vi .hero-text .hero-tit { font-size: 23px; letter-spacing: -0.5px; }
	.main-vi .hero-graphic { display: none !important; }
	.main-vi .data-source-card { width: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 16px; margin-left: 0; }
	.main-vi .data-source-card .data-box { width: 100%; }
	.main-vi .data-source-card .data-box .ds-tag { font-size: 13px; }
	.main-vi .data-source-card .data-box .ds-tit { font-size: 19px; margin: 3px 0 8px 0; }
	.main-vi .data-source-card .data-box .ds-desc { font-size: 12.5px; line-height: 1.4; word-break: keep-all; }
	.main-vi .data-source-card .data-box .ds-desc br { display: none; }
	.main-vi .data-source-card .ds-list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.main-vi .data-source-card .ds-list .ds-item { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; text-align: center; }
	.main-vi .data-source-card .ds-list .ds-item .ds-logo { flex: 0 0 100%; width: 100%; height: 34px; }
	.main-vi .data-source-card .ds-list .ds-item .ds-logo img { max-width: 85%; max-height: 22px; }
	.main-vi .data-source-card .ds-list .ds-item .ds-name { font-size: 12px; margin-left: 0; white-space: nowrap; }
	.main-vi .data-source-card .ds-list .ds-item .ico-ext { font-size: 12px; display: inline-flex; align-items: center; }
	.dashboard-main-tabs .tab-item button { font-size: 13px; height: 44px; padding: 0 6px; }
	.subtabs-bar { padding: 15px 12px 0; }
	.subtabs-bar .subtabs-select { height: 44px; font-size: 14px; padding: 0 36px 0 14px; }
	.subpanel { padding: 40px 12px 32px; }
	
	
	.map-box { padding: 14px 10px; }
	.industry-grid { grid-template-columns: 1fr; gap: 10px; }
	.industry-card { padding: 16px 14px; }
	.industry-card .ind-icon { width: 40px; height: 40px; margin-bottom: 10px; font-size: 20px; }
	.industry-card .ind-tit { margin-bottom: 10px; font-size: 17px; }
	.industry-guide { font-size: 14px; }
	.industry-def { padding: 14px 14px 14px 52px; font-size: 15px; }
	.industry-def::before { top: 14px; left: 14px; width: 28px; height: 28px; font-size: 15px; }
}

@media only screen and (max-width: 360px) {
	.main-vi .hero-text .hero-badge { font-size: 12px; padding-left: 16px; margin-bottom: 6px; }
	.main-vi .hero-text .hero-badge::before { width: 10px; height: 10px; }
	.main-vi .hero-text .hero-badge::after { width: 5px; height: 5px; left: 2.5px; }
	.main-vi .hero-text .hero-tit { font-size: 20px; letter-spacing: -0.5px; line-height: 1.25; }
	.main-vi .hero-text .hero-desc { font-size: 12px; line-height: 1.4; margin-top: 6px; }
	.main-vi .hero-graphic { display: none !important; }
	.main-vi .data-source-card { width: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 14px 10px; gap: 12px; margin-left: 0; }
	.main-vi .data-source-card .data-box { width: 100%; }
	.main-vi .data-source-card .data-box .ds-tag { font-size: 11px; }
	.main-vi .data-source-card .data-box .ds-tit { font-size: 16.5px; margin: 2px 0 5px 0; }
	.main-vi .data-source-card .data-box .ds-desc { font-size: 11px; line-height: 1.35; word-break: keep-all; }
	.main-vi .data-source-card .data-box .ds-desc br { display: none; }
	.main-vi .data-source-card .ds-list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.main-vi .data-source-card .ds-list .ds-item { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 2px; text-align: center; }
	.main-vi .data-source-card .ds-list .ds-item .ds-logo { flex: 0 0 100%; width: 100%; height: 30px; }
	.main-vi .data-source-card .ds-list .ds-item .ds-logo img { max-width: 80%; max-height: 18px; }
	.main-vi .data-source-card .ds-list .ds-item .ds-name { font-size: 10px; margin-left: 0; letter-spacing: -0.04em; white-space: nowrap; }
	.main-vi .data-source-card .ds-list .ds-item .ico-ext { font-size: 10px; display: inline-flex; align-items: center; }
	
	.dashboard-main-tabs .tab-item button { font-size: 12px; height: 42px; padding: 0 4px; }
	.subtabs-bar { padding: 14px 10px 0; }
	.subtabs-bar .subtabs-select { height: 40px; font-size: 13px; padding: 0 32px 0 12px; }
	.subpanel { padding: 40px 8px 24px; }
	
	.kpi-cards-grid { gap: 10px; }
	.kpi-cards-grid .kpi-card { padding: 12px 10px; gap: 10px; }
	.kpi-cards-grid .kpi-card .kpi-icon { width: 36px; height: 36px; font-size: 20px; }
	.kpi-cards-grid .kpi-card .kpi-info .kpi-label { font-size: 12px; }
	.kpi-cards-grid .kpi-card .kpi-info .kpi-val { font-size: 18px; }
	.kpi-cards-grid .kpi-card .kpi-info .kpi-val.text-industry { font-size: 15px; }
	
	
	.map-box { padding: 12px 8px; }
	.map-box .map-controls { gap: 6px; }
	.map-box .map-controls .current-region-badge { font-size: 14px; gap: 4px; }
	.map-box .dash-select,
	.map-box .dash-btn { height: 34px; font-size: 13px; padding: 0 12px; }
	.map-box .dash-select { padding-right: 30px; }
	.map-box .select-wrap::after { right: 10px; font-size: 18px; }
	
	.region-rank-list .rank-item { padding: 4px 4px; gap: 6px; }
	.region-rank-list .rank-item .rank-name { width: 72px; font-size: 11px; }
	.region-rank-list .rank-item .rank-val { min-width: 44px; font-size: 11px; }
	
	.industry-card { padding: 14px 10px; }
	.industry-card .ind-tit { font-size: 16px; }
	
	.notice-board-card { padding: 12px 10px 20px; }
	.notice-board-card .board-tabs-bar .board-tabs-list .board-tab-item button { height: 40px; padding: 0 8px; font-size: 13px; }
	.notice-board-card .notice-card { padding: 14px 10px; min-height: 110px; }
	.notice-board-card .notice-card .card-tit { font-size: 14px; }
	.notice-board-card .notice-card .card-bottom .card-date { font-size: 12px; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button { width: 28px !important; height: 28px !important; font-size: 12px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate .paginate_button i { font-size: 12px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate { gap: 2px !important; }
	.notice-board-card .dataTables_wrapper .dataTables_paginate > span { gap: 2px !important; }
}

/* ===== 상세보기 레이어 팝업 ===== */
/* 사이트맵·로그인 팝업과 같은 등장 효과 (딤 페이드 + 패널 살짝 확대) */
.dash-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.dash-modal.on { opacity: 1; visibility: visible; }
.dash-modal-dim { position: absolute; inset: 0; }
.dash-modal-panel { position: relative; display: flex; flex-direction: column; width: min(1400px, 100%); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); /* 바깥 여백 40px × 2 */ background: #fff; border: 1px solid var(--gray-dd); border-radius: 5px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); transform: scale(0.97) translateY(18px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.dash-modal.on .dash-modal-panel { transform: scale(1) translateY(0); }
.dash-modal-panel:focus { outline: none; }
.dash-modal-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 40px 20px 40px; }
.dash-modal-tit { font-size: 22px; font-weight: 600; color: #000; }
.dash-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 22px; color: #555; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.dash-modal-close:hover { color: #000; background: #f1f5f9; }
.dash-modal-close:focus-visible { outline: 2px solid var(--primary500); outline-offset: 2px; }
.dash-modal-body { min-height: 0; padding: 20px 40px 40px 40px; overflow-y: auto; } /* min-height:0 이 없으면 내용이 길 때 스크롤 대신 팝업 밖으로 넘친다 */
.dash-modal-body .modal-table-tit { margin-bottom: 10px; font-size: 16px; font-weight: 600; color: #333; }
.dash-modal-body .stat-table-wrap + .modal-table-tit { margin-top: 28px; }
/* 상세보기 팝업 표: 기존 시스템처럼 가운데 정렬 (긴 품목명·업종명 열은 왼쪽 유지) */
.dash-modal-body .stat-table td,
.dash-modal-body .stat-table td:first-child { text-align: center; }
.dash-modal-body .stat-table td.col-item,
.dash-modal-body .stat-table .col-name { text-align: left; }
@media only screen and (max-width: 767px) {
	.dash-modal { padding: 30px; }
	.dash-modal-panel { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); } /* 바깥 여백 30px × 2 */
	.dash-modal-head { padding: 18px 18px 12px; }
	.dash-modal-tit { font-size: 18px; }
	.dash-modal-body { padding: 0 18px 18px; }
}

/* ===== 게시글 상세 레이어 팝업 ===== */
/* 제목 영역: 큰 제목 + 항목명(굵게)/값(회색) 한 줄, 아래 구분선 */
/* 제목이 길어도 제목+본문이 함께 스크롤되고, 닫기 버튼은 제자리에 고정 */
.board-modal .dash-modal-panel { overflow: hidden; }
.board-modal .board-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.board-modal .dash-modal-close { position: absolute; top: 36px; right: 36px; z-index: 2; background: #fff; }
.board-modal .dash-modal-head { align-items: flex-start; padding: 40px 88px 24px 40px; border-bottom: 1px solid #E5E5E5; }
.board-modal .board-head-text { min-width: 0; }
.board-modal .dash-modal-tit { font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #111; word-break: keep-all; }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 36px; font-size: 16px; }
.board-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.board-meta-item + .board-meta-item::before { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 14px; background: #CCC; }
.board-meta dt { font-weight: 600; color: #333; }
.board-meta dd { font-weight: 400; color: #757575; }
.board-modal .dash-modal-body { overflow: visible; padding: 40px; }
/* 요약 정보 (사업공고) */
.board-info { display: grid; margin-bottom: 32px; border-top: 1px solid #333; }
.board-info-row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); border-bottom: 1px solid #E5E5E5; }
.board-info-row dt { padding: 14px 16px; font-size: 16px; font-weight: 600; color: #333; background: #F3F7FD; } /* 다른 표 머리글과 같은 색 */
.board-info-row dd { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; padding: 14px 16px; font-size: 16px; color: #333; word-break: break-word; }
.board-info-sub { color: #757575; }
.board-info a { color: var(--primary600); text-decoration: underline; }
/* 본문 */
.board-files-tit { margin-bottom: 12px; font-size: 17px; font-weight: 700; color: #111; }
.board-detail-body { font-size: 16px; line-height: 1.8; color: #333; }
.board-detail-body p { margin-top: 16px; word-break: keep-all; }
/* 세로로 긴 이미지가 영역을 벗어나지 않도록 */
.board-detail-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* 첨부파일: 파일마다 테두리 상자 */
.board-files { margin-top: 40px; padding-top: 40px; border-top: 1px solid #E5E5E5; }
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-item { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 16px; font-size: 16px; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 5px; transition: all .3s ease; }
.file-item:hover, .file-item:focus-visible { color: var(--primary600); border-color: var(--primary500); background: #F7FBFF; }
.file-item > .ph-file-text { flex-shrink: 0; font-size: 20px; color: #757575; }
/* 파일명이 길어도 넘치지 않게 줄바꿈 */
.file-item .file-name { min-width: 0; word-break: break-all; }
.file-item .file-ico { flex-shrink: 0; margin-left: auto; font-size: 20px; color: var(--primary500); }
@media only screen and (max-width: 767px) {
	.board-modal .dash-modal-head { padding: 20px 60px 16px 18px; }
	.board-modal .dash-modal-close { top: 14px; right: 12px; }
	.board-modal .dash-modal-tit { font-size: 19px; }
	.board-meta { font-size: 14px; }
	.board-modal .dash-modal-body { padding: 20px 18px; }
	.board-info-row { grid-template-columns: 1fr; }
	.board-info-row dt { padding: 10px 14px; font-size: 14px; }
	.board-info-row dd { padding: 10px 14px; font-size: 15px; }
	.board-detail-body,
	.file-item { font-size: 15px; }
}