@charset "UTF-8";
/*
 * 산업 지원 권역 지도 — 시설·장비·연구과제 목록 검색 폼 오른쪽 (TK-346)
 * 마크업 : WEB-INF/jsp/egovframework/bmip/usersys/indst/inc/rgnMap.jspf
 * 스크립트 : js/egovframework/bmip/usersys/indst/indst-rgn-map.js
 * 색은 다크모드(:root[data-theme="dark"])가 바꾸는 공용 변수를 쓴다. 건수 색(파랑 단계)만 고정.
 */

/* 검색 조건(+검색 버튼) | 지도 상자 배치 — 1024 미만은 위아래로.
   지도 상자가 조건 상자보다 키가 커서, 검색 버튼을 조건 상자 바로 아래에 둔다(왼쪽 열) */
.indst_srch_row{display:flex;flex-direction:column;gap:1.6rem}
.indst_srch_row > .indst_srch_cond{min-width:0}
@media (min-width:1024px){
	.indst_srch_row{flex-direction:row;align-items:flex-start}
	.indst_srch_row > .indst_srch_cond{flex:1 1 auto}
	.indst_srch_row > .indst_rgn_map{flex:0 0 32rem}
}
@media (min-width:1280px){
	.indst_srch_row > .indst_rgn_map{flex-basis:34rem}
}

.indst_rgn_map{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem 1.6rem 1.4rem;background-color:var(--color-gray05);border:1px solid var(--color-gray20);border-radius:.6rem}
.indst_rgn_map .rgn_map_head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.indst_rgn_map .rgn_map_tit{font-size:1.6rem;font-weight:var(--fws-semibold);color:var(--color-gray90)}
.indst_rgn_map .rgn_map_total{font-size:1.4rem;color:var(--color-gray60);white-space:nowrap}
.indst_rgn_map .rgn_map_desc{margin:0;font-size:1.3rem;line-height:1.4;color:var(--color-gray60)}

.indst_rgn_map .rgn_map_box{position:relative;width:100%;max-width:28rem;margin:0 auto}
.indst_rgn_map .rgn_map_svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-family-base)}

/* 시·도 — 채움 색은 스크립트가 건수로 넣는다(fill 속성). 0건만 회색 */
.indst_rgn_map .rgn{stroke:var(--color-gray00);stroke-width:.8;stroke-linejoin:round;cursor:pointer;transition:opacity .15s,filter .15s;outline:none}
.indst_rgn_map .rgn.is_zero{fill:var(--color-gray20)}
.indst_rgn_map .rgn.is_hover{filter:brightness(.9)}
.indst_rgn_map.has_on .rgn:not(.is_on){opacity:.45}
.indst_rgn_map.has_on .rgn.is_hover{opacity:1}
.indst_rgn_map .rgn.is_on{fill:var(--color-secondary)}
.indst_rgn_map .rgn_sel_line{fill:none;stroke:var(--color-secondary);stroke-width:2;stroke-linejoin:round;pointer-events:none}
.indst_rgn_map .rgn_hover_line{fill:none;stroke:var(--color-gray90);stroke-width:1.4;stroke-linejoin:round;pointer-events:none}
.indst_rgn_map .rgn_inset{fill:none;stroke:var(--color-gray40);stroke-width:.8;stroke-dasharray:3 2}

/* 건수 배지 */
.indst_rgn_map .rgn_leaders line{stroke:var(--color-gray60);stroke-width:.8}
.indst_rgn_map .rgn_leaders circle{fill:var(--color-gray60)}
.indst_rgn_map .rgn_badge{cursor:pointer}
.indst_rgn_map .rgn_badge rect{fill:rgba(20,28,45,.82)}
.indst_rgn_map .rgn_badge text{fill:#fff;font-size:10.5px;font-weight:600;letter-spacing:-.01em}
.indst_rgn_map .rgn_badge.is_hover rect{fill:rgba(0,0,0,.95)}
.indst_rgn_map .rgn_badge.is_on rect{fill:#fff;stroke:var(--color-secondary);stroke-width:1.4}
.indst_rgn_map .rgn_badge.is_on text{fill:var(--color-secondary)}
.indst_rgn_map.has_on .rgn_badge:not(.is_on):not(.is_hover){opacity:.7}

/* 툴팁 */
.indst_rgn_map .rgn_map_tip{position:absolute;z-index:5;left:0;top:0;padding:.6rem 1rem;background-color:var(--color-gray00);border:1px solid var(--color-gray30);border-radius:.4rem;box-shadow:0 .2rem .8rem rgba(0,0,0,.12);font-size:1.3rem;line-height:1.4;white-space:nowrap;color:var(--color-gray90);pointer-events:none}
.indst_rgn_map .rgn_map_tip[hidden]{display:none}
.indst_rgn_map .rgn_map_tip strong{font-weight:var(--fws-semibold)}
.indst_rgn_map .rgn_map_tip .num{color:var(--color-point-blue);font-weight:var(--fws-semibold)}
.indst_rgn_map .rgn_map_tip .pct{color:var(--color-gray60)}

/* 범례·지도 밖 지역(전국)·선택 해제 */
.indst_rgn_map .rgn_map_foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.indst_rgn_map .rgn_map_legend{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;color:var(--color-gray60)}
.indst_rgn_map .rgn_map_legend .bar{display:block;width:7rem;height:.8rem;border-radius:.4rem;background:linear-gradient(90deg,rgb(222,235,250),rgb(12,76,158))}
.indst_rgn_map .rgn_map_chips{display:flex;flex-wrap:wrap;gap:.6rem}
.indst_rgn_map .rgn_chip{display:inline-flex;align-items:center;gap:.4rem;height:3rem;padding:0 1.2rem;border:1px solid var(--color-gray30);border-radius:1.5rem;background-color:var(--color-gray00);font-size:1.3rem;color:var(--color-gray90);cursor:pointer}
.indst_rgn_map .rgn_chip .num{font-style:normal;font-weight:var(--fws-semibold);color:var(--color-point-blue)}
.indst_rgn_map .rgn_chip.is_on{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff}
.indst_rgn_map .rgn_chip.is_on .num{color:#fff}
.indst_rgn_map .rgn_chip.reset{color:var(--color-gray70)}
.indst_rgn_map .rgn_chip[hidden]{display:none}
.indst_rgn_map .rgn_chip:focus-visible,
.indst_rgn_map .rgn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.indst_rgn_map .rgn_map_data{display:none}

/* 다크모드 — 조건 상자(.option_wrap)와 같은 토큰(content.css :root[data-theme="dark"] .option_wrap) */
:root[data-theme="dark"] .indst_rgn_map{background-color:var(--color-gray-blue100);border-color:transparent}
:root[data-theme="dark"] .indst_rgn_map .rgn_map_tit{color:var(--color-text-title)}
:root[data-theme="dark"] .indst_rgn_map .rgn_map_total,
:root[data-theme="dark"] .indst_rgn_map .rgn_map_desc,
:root[data-theme="dark"] .indst_rgn_map .rgn_map_legend{color:var(--color-text-sub)}
:root[data-theme="dark"] .indst_rgn_map .rgn{stroke:var(--color-gray-blue100)}
:root[data-theme="dark"] .indst_rgn_map .rgn.is_zero{fill:var(--color-gray80)}
:root[data-theme="dark"] .indst_rgn_map .rgn_hover_line{stroke:var(--color-gray05)}
:root[data-theme="dark"] .indst_rgn_map .rgn_inset{stroke:var(--color-gray60)}
:root[data-theme="dark"] .indst_rgn_map .rgn_leaders line{stroke:var(--color-gray40)}
:root[data-theme="dark"] .indst_rgn_map .rgn_leaders circle{fill:var(--color-gray40)}
:root[data-theme="dark"] .indst_rgn_map .rgn_map_tip{background-color:var(--color-gray100);border-color:var(--color-gray80);color:var(--color-text-title)}
:root[data-theme="dark"] .indst_rgn_map .rgn_chip{background-color:var(--color-gray100);border-color:var(--color-gray80);color:var(--color-text-body)}
:root[data-theme="dark"] .indst_rgn_map .rgn_chip.is_on{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff}