@charset "UTF-8";
@import "../component/output.css";


:root {
  /*공통 최소 너비*/
  --min-width: 1900px;
  --side-panel-width: 578px;
  --header-height: 80px;
  --bottom-panel-height: 317px;
  /*색상*/
  --bg-panel-primary: #123452;
  --bg-panel-secondary: #1E4F7A;
  --bg-panel-alert: #17294F;
  --bg-panel-success:linear-gradient(to top, #23407E, #1C2F56);
  /*패널*/
  --panel-padding: 14px;
  --panel-z-index: 9999;
  --side-panel-width: 578px;
  --bottom-panel-height: 317px;
}

/* ygjung */
/*스킵*/
#skip {
	position: relative;
	z-index: 999;
}
#skip a {
	position: absolute;
	top: -4.2rem;
	left: 0;
	height: 4.2rem;
	width: 100%;
	line-height: 4.2rem;
	font-size: 1.4rem;
	color: var(--krds-light-color-text-basic-inverse);
	background: var(--krds-color-high-contrast-information-80);
	text-align: center;
	transition: all 0.4s ease;
	z-index: 1000;
}

#skip a:focus,
#skip a:active {
  top: 0;
}
/* //-ygjung */


/* layout */
#wrapmap {
	position: relative;
  height: 100%;
  min-width: 320px;
	box-sizing: border-box;
	word-break: keep-all;
  overflow: hidden;
	font-size: 1.3rem;
}

#headermap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--bg-panel-primary);
	height: 100%;
}

#container {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #dedede;
}

/***패널***/
#leftWrap, #rightWrap {
  position: absolute;
  top: 0;
  width: 49.6rem;
  height: calc(100% - 5.2rem);
  transition: transform 0.7s ease;
  z-index: 99;
}

#leftWrap {
  left: 7.5rem;
  transform: translateX(0);
}

#leftWrap.closed {
  transform: translateX(-100%);
}

#rightWrap {
  right: 0;
  transform: translateX(0);
}

#rightWrap.closed {
  transform: translateX(100%);
}

#left_panel,
#right_panel {
  width: 100%;
  height: 100%;
}

#left_panel,
#right_panel {
  position: absolute;
  top: 0;
  width: 49.6rem;
  height: 100%;
  max-height: calc(100% - 5.2rem);
  overflow-y: auto;
  box-sizing: border-box;
}

#left_panel {
  left: 0;
}

#right_panel {
  right: 0;
}

#right_panel {
  display: flex;
  flex-direction: column;
}

#right_panel > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .panel--cont {
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .krds-tab-area.layer {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .tab-conts-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .tab-conts.active {
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .map-table-container {
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .map-table-container .map-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

#right_panel .panel-forest {
  flex: 1 1 auto;
  min-height: 0;
}

#right_panel .panel-forest > .map-table-wrap {
  flex: 1 1 0;
  min-height: 0;
/*   max-height: none; */
}

#right_panel .panel-forest > .search-section-map {
  flex: 0 0 auto;
}

#right_panel .panel-forest > div:not(.search-section-map):not(.map-table-wrap) {
  display: contents;
}

#right_panel .panel-forest > div:not(.search-section-map):not(.map-table-wrap) > div:last-child {
  display: contents;
}

#right_panel .panel-forest > div:not(.search-section-map):not(.map-table-wrap) > * + * {
  margin-top: 1.6rem;
}

#right_panel .panel-forest > div:not(.search-section-map):not(.map-table-wrap) > div:last-child > * + * {
  margin-top: 1.6rem;
}
#right_panel .panel-forest > div > h2.panel_tit {
  margin-top: 1.6rem;
}

/* 패널 기본 상태 */
#rightWrap {
  position: absolute;
  right: -49.6rem; 
  top: 5.2rem;
  width: 49.6rem;
  height: 100%;
  transition: right 0.5s ease;
  z-index: 99;
}

/* 패널 열림 상태 */
#rightWrap.open {
  right: 0;
}

#leftWrap {
  position: absolute;
  left: -42.1rem; 
  top: 5.2rem;
  width: 49.6rem;
  height: 100%;
  transition: left 0.5s ease;
  z-index: 99;
}

/* 열림 상태 */
#leftWrap.open {
  left: 7.5rem;
}

.side-wrap {
  position: absolute;
  top: 5.2rem;
  bottom: 0;
  width: calc(var(--side-panel-width) + 32px); /* 패널 + 버튼 너비 */
  z-index: 9999;
  transition: left 0.4s ease, right 0.4s ease;
}

/* 왼쪽 래퍼 */
.side-wrap.left {
  left: 0;
  display: flex;
  flex-direction: row;
}

/* 오른쪽 래퍼 */
.side-wrap.right {
  right: 0;
  display: flex;
  flex-direction: row-reverse;

}

/*패널*/
.panel_tit{
  align-self: flex-start;
  display: inline-block;
}

.panel--cont {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.panel-toggle.left,
.panel-toggle.right {
  width: 32px;
  height: 42px;
  background-color: var(--bg-panel-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/*열기/닫기 버튼*/
.panel-toggle {
  position: absolute;
  z-index: 10000;
  width: 32px;
  height: 42px;
  background-color: var(--bg-panel-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-toggle::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  margin: auto;
}

.panel-toggle.right {
  right: 49.6rem;
  top: 50%;
  border-radius: .6rem 0 0 .6rem;
}


.panel-toggle.right::before {
  transform: rotate(45deg);
}

.panel-toggle.left {
  left: 49.6rem;
  top: 50%;
  border-radius: 0 .6rem .6rem 0;
}

.panel-toggle.left::before {
  transform: rotate(-135deg);
}

.panel-toggle.bottom {
  position: absolute;
  top: auto;
  bottom: var(--bottom-panel-height);
  width: 42px;
  height: 32px;
  border-radius: 6px 6px 0 0;
  background-color: var(--bg-panel-primary);
  border: none;
}

#left_panel > section,
#right_panel > section {
  display: flex;
  flex-direction: column;
	gap: 1.6rem;
}


.layout-section {
  background-color: #fff;
  z-index: var(--panel-z-index);
  padding: 14px;
}



.map-level {
	display: flex;
	align-items: center;
	gap: .8rem;
}


/***header***/
.headermap-inner{
  box-sizing: border-box;
  height: 100%;
	width: 7.5rem;
	color: var(--krds-light-color-text-bolder-inverse);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	font-size: 1.5rem;
}

.heademap-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.heademap-list > button {
	height: 10rem;
}

.heademap-list > button.active {
  color: var(--krds-light-color-text-secondary);
  background: var(--krds-light-color-background-gray-subtle);
}
.maphome {
	height: 5.2rem;
	width: 100%;
}

.maphome > span {
	display: none;
}

.heademap-list > button::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	display: inline-block;
}

.maphome::before {
	content: '';
	width: 3rem;
	height: 3rem;
	display: inline-block;
	background: url(../../images/map/home.svg)center center no-repeat;
}

/*왼쪽메뉴*/
.forestfires01::before {
	background: url(../../images/map/emergency_W.svg)center center no-repeat;
}

.forestfires02::before {
	background: url(../../images/map/spread_W.svg)center center no-repeat;
}

.forestfires03::before {
	background: url(../../images/map/analytics_W.svg)center center no-repeat;
}

.forestfires04::before {
	background: url(../../images/map/search_W.svg)center center no-repeat;
}

.forestfires05::before {
	background: url(../../images/map/map_warning_W.svg)center center no-repeat;
}

.forestfires06::before {
	background: url(../../images/map/map_east_W.svg)center center no-repeat;
}

.forestfires01.active::before {
	background: url(../../images/map/emergency.svg)center center no-repeat;
}

.forestfires02.active::before {
	background: url(../../images/map/spread.svg)center center no-repeat;
}

.forestfires03.active::before {
	background: url(../../images/map/analytics.svg)center center no-repeat;
}

.forestfires04.active::before {
	background: url(../../images/map/search.svg)center center no-repeat;
}

.forestfires05.active::before {
	background: url(../../images/map/map_warning.svg)center center no-repeat;
}

.forestfires06.active::before {
	background: url(../../images/map/map_east.svg)center center no-repeat;
}

/***상단메뉴***/
.topcontents {
	position: absolute;
  top: 0;
  left: 7.5rem;
  right: 0;
  min-width: calc(100% - 7.5rem);
	height: 5.2rem;
  z-index: 99;
  display: flex;
  align-items: stretch;
	justify-content: space-between;
  overflow: hidden;
  background: var(--bg-panel-secondary);
	color: #fff;
}

.topcontents-layout{
	padding: .4rem 0rem;
	position: relative;
}

.hamburger {
  width: 5.2rem;
  background: #123452;
}

.hamburger > button {
  width: 100%;
  height: 100%;
}

.hamburger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  pointer-events: none;
  border-radius: 50%;
  background: #fff url(../../images/component/icon/ico_menu.svg) no-repeat center / contain;
  background-size: 1.8rem;
}

.search-group::before,
.time-group::before,
.date-group > button::before,
.result-group::before,
.weather-group::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.2rem;
  transform: translate(0.55rem, -50%);
  width: 3rem;
  height: 3rem;
  pointer-events: none;
  border-radius: 50%;
}

.search-group > button,
.date-group > button,
.time-group > button,
.result-group > button,
.weather-group > button {
  padding: 0rem 1.6rem 0rem 5.6rem;
  height: 100%;
}

/*검색레이어,날짜선택 시간석택*/
.search-group,
.result-group,
.weather-group {
	background: #A6A6A6;
}

.date-group{
	background: var(--bg-panel-alert);
}

.time-group {
	background: #068668;
}
.time-group.out {
  position: absolute;
  top: 6.4rem;
  right: 50%;
  z-index: 96;
  height: 5.2rem;
  display: flex;
  color: #fff;
  align-items: center;
  transform: translateX(50%);
  border-radius: 1.2rem;
  padding-right: 1.8rem;
  background-color: rgba(166, 166, 166, 0.5);
}

.time-group > div,
.date-group > div  {
	display: flex;
	gap: 1.2rem;
}

.date-group > div > button,
.time-group > div > button,
.result-group > div > button  {
	background: #fff;
	width: 7rem;
	padding: .4rem;
	color: #1a1a1a;
	text-align: center;
	border-radius: .8rem;
}

.date-list > button.active,
.time-list > button.active {
  background:#FF802B;
  color: #fff;
}

.date-group .date-list {
  max-width: 0;      
  overflow: hidden;          
  transition: max-width 0.6s ease; 
}
.date-group.open .date-list {
  max-width: calc(5 * 8rem + 4 * 0.4rem);
  padding: 0rem 1.4rem;
}


.search-group::before {
  background:#fff url(../../images/component/icon/ico_sch.svg) no-repeat center / contain;
  background-size: 2.4rem;
}
.date-group > button::before {
	background: #fff url(../../images/component/icon/ico_calendar.svg) no-repeat center / contain;
  background-size: 2.4rem;
}
.time-group::before {
	background: #fff url(../../images/component/icon/ico_time.svg) no-repeat center / contain;
  background-size: 2.4rem;
}
.result-group::before {
	background:#fff url(../../images/component/icon/ico_result.svg) no-repeat center / contain;
  background-size: 1.6rem;
}

.weather-group::before {
	background:#fff url(../../images/component/icon/ico_multi.svg) no-repeat center / contain;
  background-size: 2rem;
}

/*결과패널버튼*/
#leftToggleBtn.active,
.search-group.active {
  background-color: #00808F;
  color: #fff;
}

/*검색레이어버튼*/
#rightToggleBtn.active,
.result-group.active {
  background-color: #23BCC7;
  color: #fff;
}

/*검색레이어*/
.topcontents-left,
.topcontents-right {
 display: flex;
 align-items: stretch;
}

.topcontents-left > div,
.todaytext {
	display: flex;
	align-items: center;
}

.topcontents-center {
  display: none;
}
.todaytext {
  padding-right: 1.6rem;
}


.temperature-wrap {
  border: .1rem solid var(--krds-light-color-border-gray-light);
  border-radius: .8rem;
  text-align: center;
  padding: .8rem 1.6rem;
}

.temperature-wrap > h2 {
  padding-bottom: .8rem;
  position: relative;
}


:root {
  --risk-color-attention: #b0d6ff;  /* 관심 */
  --risk-color-caution: #fff9da;    /* 주의 */
  --risk-color-warning: #ffebd4;    /* 경계 */
  --risk-color-severe: #ffdddd;     /* 심각 */
	--risk-color-attention-second: #0177f5;  /* 관심 */
  --risk-color-caution-second: #ffdb0f;    /* 주의 */
  --risk-color-warning-second: #ff9720;    /* 경계 */
  --risk-color-severe-second: #ff0d0d;     /* 심각 */
}

.temperature-list {
  display: flex;
  gap: .8rem;
  padding: 1.2rem;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(circle, rgba(166,166,166,0.7) 50%, transparent 51%);
  background-size: .4rem .1rem; /* 가로 간격(8px) / 세로 높이(4px) */
  background-repeat: repeat-x;
}

.temperature-list > li {
  padding: .8rem 1.2rem;
  font-size: 1.6rem;
  width: calc(100% / 2);
  border-radius: .8rem;
  border: .1rem solid var(--krds-light-color-border-gray-light);
}

.temperature-list > li:nth-child(1) {
  background-color: var(--risk-color-caution);
  border-color: var(--risk-color-caution-second);
  font-weight: 600;
}

.temperature-list > li:nth-child(2) {
  font-weight: 600;
  color: #3C5799;
}


.search {
  display: inline-flex;
  background-color: #344976;
  border-radius: 8px;
  width: 100%;
  justify-content: center;
  padding: 12px 8px;
}


/***인덱스맵***/
.index-map {
  width: 18.6rem;
  border: .1rem solid #838383;
  border-radius: .8rem;
  background: #fff;
  overflow: hidden;
	position: absolute;
	z-index: 90;
	right: 6.4rem;
	top: 7.6rem;
	padding: .8rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

/* 상단 영역 */
.index-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 지도 미리보기 */
.index-map-preview {
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  border-radius: 0.4rem;
  margin: 0 0.4rem;
  overflow: hidden;
  position: relative;
}

.index-map-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.index-map-preview .ol-overviewmap {
	width: 100%;
	height: 100%;
	left:0;
	bottom: 0;
}

.index-map-preview .ol-overviewmap .ol-overviewmap-map{
	border:none;
	width: 100%;
	height: 100%;
}

.index-map-preview .ol-overviewmap .ol-overviewmap-box {
	border: 1px solid rgba(255,0,0,0.9);
    background: rgba(255,0,0,0.15);
}

/* 축척 드롭다운 */
.index-map-scale {
  padding: 0.3rem 0.4rem 0.5rem;
}

.index-map-scale select {
  width: 100%;
  border: .1rem solid #c9ced3;
  border-radius: 0.4rem;
  background: #eaf0f6;
  padding: 0.3rem 0.5rem;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.8rem;
}

/* 동해안맵 */
.east-map {
	width: 30rem;
	border: .1rem solid #838383;
	border-radius: .8rem;
	background: #fff;
	overflow: hidden;
	position: absolute;
	z-index: 90;
	right: 25.5rem;
	top: 7.6rem;
	padding: .8rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

/* 상단 영역*/
.east-map-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 지도 미리보기 */
.east-map-preview {
	background: #e0e0e0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 35rem;
	border-radius: 0.4rem;
	margin: 0 0.4rem;
	overflow: hidden;
	position: relative;
}

.east-map-preview img {
  width: 100%;
  height: auto;
  display: block;
}

/*인덱스 버튼*/
.copy-btn {
  background: url(../../images/map/copy.svg) center center no-repeat;
	width: 1.8rem;
	height: 1.8rem;
}


/* 탭 */
.maptab {
	--krds-tab--button-size-height: 4rem !important;
	--krds-tab--full-button-size-height: 4rem !important;
}


.krds-tab-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-gap-7);
  width: 100%;
}
@media (max-width: 767px) {
  .krds-tab-area-map {
    gap: var(--krds-gap-8);
  }
}

.tab {
  --krds-tab--button-size-height: var(--krds-size-height-7);
  --krds-tab--button-size-min-width: 6.4rem;
  --krds-tab--button-pc-font-size: var(--krds-pc-font-size-heading-xsmall);
  --krds-tab--button-mobile-font-size: var(--krds-mobile-font-size-heading-xsmall);
  --krds-tab--gap: var(--krds-gap-3);
  --krds-tab--full-button-size-height: var(--krds-size-height-8);
  --krds-tab--full-button-pc-font-size: var(--krds-pc-font-size-heading-small);
  --krds-tab--full-button-mobile-font-size: var(--krds-mobile-font-size-heading-small);
  --krds-tab--line-button-padding: var(--krds-padding-2);
  --krds-tab--fill-button-padding: var(--krds-padding-3);
  --krds-tab--fill-button-radius: var(--krds-radius-medium2);
  --krds-tab--conts-padding-top: var(--krds-padding-10);
  --krds-tab--mobile-button-trigger-size-height: var(--krds-size-height-7);
  --krds-tab--mobile-button-trigger-padding-x: var(--krds-padding-6);
  --krds-tab--mobile-button-trigger-radius: var(--krds-radius-medium1);
  --krds-tab--button-color-action: var(--krds-light-color-action-secondary);
  --krds-tab--button-color-action-hover: var(--krds-light-color-action-secondary-hover);
  --krds-tab--button-color-action-pressed: var(--krds-light-color-action-secondary-pressed);
  --krds-tab--button-color-border: var(--krds-light-color-action-secondary);
  --krds-tab--button-color-text: var(--krds-light-color-text-subtle);
  --krds-tab--button-color-text-disabled: var(--krds-light-color-text-disabled);
  --krds-tab--fill-button-color-action-active: var(--krds-light-color-action-secondary-active);
  --krds-tab--fill-button-color-border: var(--krds-light-color-border-gray);
  --krds-tab--fill-button-color-border-active: var(--krds-light-color-action-secondary-active);
  --krds-tab--fill-button-color-text: var(--krds-light-color-text-inverse-static);
  --krds-tab--line-button-color-border: var(--krds-light-color-border-gray);
  --krds-tab--line-button-color-line-active: var(--krds-light-color-action-secondary-active);
  --krds-tab--line-button-color-text-active: var(--krds-light-color-text-secondary);
  --krds-tab--mobile-button-trigger-color-text: var(--krds-light-color-text-inverse-static);
  --krds-tab--mobile-button-trigger-color-action: var(--krds-light-color-action-secondary-active);
}
.tab > ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-tab--gap);
  overflow-x: auto;
  width: 100%;
}
.tab li,
.tab .btn-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: relative;
  white-space: nowrap;
}
.tab .btn-tab {
  width: 100%;
  height: var(--krds-tab--button-size-height);
  background-color: var(--krds-tab--button-color-action);
  border: 1px solid var(--krds-tab--button-color-border);
  font-size: var(--krds-tab--button-pc-font-size);
  color: var(--krds-tab--button-color-text);
  font-weight: var(--krds-font-weight-bold);
  transition: var(--krds-transition-base);
}
@media (max-width: 767px) {
  .tab .btn-tab {
    font-size: var(--krds-tab--button-mobile-font-size);
  }
}
.tab .btn-tab:not(:disabled):hover {
  background-color: var(--krds-tab--button-color-action-hover);
  transition: var(--krds-transition-base);
}
.tab .btn-tab:not(:disabled):active {
  background-color: var(--krds-tab--button-color-action-pressed);
  transition: var(--krds-transition-base);
}
.tab .btn-tab:focus {
  box-shadow: var(--krds-box-shadow-outline-inset);
  outline-offset: -0.4rem;
}
.tab .btn-tab[disabled] {
  color: var(--krds-tab--button-color-text-disabled);
  cursor: default;
}
.tab li {
  flex-grow: 0;
}
.tab.full {
  width: 100%;
}
.tab.full .btn-tab {
  height: var(--krds-tab--full-button-size-height);
  padding: 0;
  font-size: var(--krds-tab--full-button-pc-font-size);
}
@media (max-width: 767px) {
  .tab.full .btn-tab {
    font-size: var(--krds-tab--full-button-mobile-font-size);
  }
}
.tab.full > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
  width: 100%;
  gap: 0;
  border-radius: .8rem;
}
.tab.full > ul > li {
  flex: 1 1 0px;
  min-width: 0;
}
.tab.fill .btn-tab {
  padding: 0 var(--krds-tab--fill-button-padding);
  border-radius: var(--krds-tab--fill-button-radius);
}
.tab.fill .btn-tab:focus {
  box-shadow: inset 0 0 0 0.6rem var(--krds-light-color-border-primary);
  outline-offset: -0.4rem;
}
.tab.fill .active .btn-tab {
  background-color: var(--krds-tab--fill-button-color-action-active);
  border-color: var(--krds-tab--fill-button-color-border-active) !important;
  color: var(--krds-tab--fill-button-color-text);
}
.tab.fill.full .btn-tab {
  border-color: var(--krds-tab--fill-button-color-border);
}
.tab.fill.full > ul > li + li .btn-tab {
  border-left: none;
}
.tab.fill.full > ul > li .btn-tab {
  border-radius: 0;
}
.tab.fill.full > ul > li:first-of-type .btn-tab {
  border-top-left-radius: var(--krds-tab--fill-button-radius);
  border-bottom-left-radius: var(--krds-tab--fill-button-radius);
}
.tab.fill.full > ul > li:last-of-type .btn-tab {
  border-top-right-radius: var(--krds-tab--fill-button-radius);
  border-bottom-right-radius: var(--krds-tab--fill-button-radius);
}
.tab.line .btn-tab {
  min-width: var(--krds-tab--button-size-min-width);
  padding: 0 var(--krds-tab--line-button-padding);
}

.tab.line .active .btn-tab {
  color: var(--krds-light-color-text-inverse-static);
	background-color: var(--krds-light-color-action-secondary-active);
}

.tab-conts-wrap {
  width: 100%;
}

.tab-conts {
  display: none;
  margin-top: var(--krds-tab--conts-padding-top);
}
.tab-conts.active {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
}

@media (max-width: 767px) {
  .tab-conts.active {
    gap: var(--krds-padding-8);
  }
  .tab.fill.full .btn-tab {
    border-color: var(--krds-tab--fill-button-color-border);
    padding: 0 var(--krds-padding-5);
    border-width: 0;
  }
  .tab.fill.full > ul {
    gap: var(--krds-gap-3);
    flex-wrap: nowrap;
  }
  .tab.fill.full > ul > li {
    width: fit-content;
    flex: none;
  }
  .tab.fill.full > ul > li .btn-tab {
    border-radius: var(--krds-tab--fill-button-radius);
  }
}

.sch-map{
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 1.6rem;
	background: var(--krds-light-color-background-white);
	border-radius: .8rem;
	font-size: 1.5rem;
}

.sch-map .button-list {
	padding-top: 0;
}

.sch-map .button-list > button {
	width: 100%;

}

.krds-check-area.layer {
  width: 100%;
}

.krds-form-check.layer {
  width: calc(100% / 2);
  font-size: 1.5rem;
}

/***form-group***/
.form-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.form-group.label.public {
  width: calc(100% - 30rem);
}

.form-conts,
.calendar-conts {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.input-group.range.set {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.input-group input {
  width: 100%;
}

.search .form-conts .form-select,
.cont_tit .form-select {
  height: 24px;
}

.form-select {
  position: relative;
  width: 175px;
  height: 40px;
  background-image: url(../images/ico_angle.svg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center right 0.9rem;
  border-style: solid;
  color: #464C53;
  transition: 0.4s ease-in-out;
  border-radius: 6px;
}

/*** 레이어목록  ***/
/*투명도 조절*/
.layer-button-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .8rem;
}

.layer-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  cursor: pointer;
  background-color: #fff;
  border: .1rem solid #256ef4;
  color: #0b50d0;
}

.layer-control:hover {
  background: #ecf2fe;
}

.layer-control.active {
  background: #d8e5fd;
}

.layer-control span, .layer-control span label{
  color: #1e63ff;
  font-weight: 500;
  font-size: 1.4rem;
  white-space: nowrap;
}

.layer-control input[type="range"] {
  flex: 1;
  cursor: pointer;
  accent-color: #1e63ff;
  display: none;
}

.layer-control.active input[type="range"] {
  display: block;
}

.layer-control {
  position: relative;
  padding-left: 2rem; 
  cursor: pointer;
  height: 6.5rem;
}

.layer-control.active::before {
  content: attr(data-order);
  position: absolute;
  left: -2%;
  top: 19%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #1e63ff;
  color: #fff;
  text-align: center;
  line-height: 3rem;
  font-size: 1.2rem;
  font-weight: bold;
}




/*지도버튼*/
.map-btnlist {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 7.6rem;
	right: 2rem;
	z-index: 90;
	font-size: 1.3rem;
}

.legend-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: absolute;
	bottom: 3.2rem;
	right: 2rem;
	z-index: 90;
	font-size: 1.3rem;
	gap: .8rem;
}

.map-btnbox {
	display: flex;
}

.map-btnbox-top{
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.map-btnbox-top span {
	display: none;
}

.map-btnbox-top > div,
.map-btnbox-bottom > div {
	width: 3.2rem;
	background: #fff;
	border-radius: .8rem;
	border: .1rem solid #838383;
	display: flex;
	flex-direction: column;
}

.map-btnbox-legend {
	background: #fff;
	border-radius: .8rem;
	border: .1rem solid #838383;
	display: flex;
	flex-direction: column;
	padding: .8rem;
}


.map-btnbox-bottom > div {
	background: #1E4F7A;
	color: #fff;
}


.map-btnbox-top > div > button,
.map-btnbox-bottom > div >button {
	height: 3.2rem;
} 


.map-btnbox-legend {
  transform: scaleY(0); 
  transform-origin: bottom;
  transition: transform 0.4s ease;
  overflow: hidden;       
}

.legend-list.open .map-btnbox-legend {
  transform: scaleY(1);
}


.btn_pluss {
	background: url(../../images/map/map_pluss.svg)center center no-repeat;
}
.btn_minus {
	background: url(../../images/map/map_minus.svg)center center no-repeat;
}
.btn_all {
	background: url(../../images/map/map_all.svg)center center no-repeat;
}
.btn_ruler {
	background: url(../../images/map/map_ruler.svg)center center no-repeat;
}
.btn_area {
	background: url(../../images/map/map_area.svg)center center no-repeat;
}
.btn_sync {
	background: url(../../images/map/map_sync.svg)center center no-repeat;
}.btn_down {
	background: url(../../images/map/map_down.svg)center center no-repeat;
}

.fire-risk-legend {
  display: inline-block;
  font-family: "Pretendard", sans-serif;
  color: #000;
}

.fire-risk-legend h4 {
  margin: 0 0 0.4rem 0;
  font-size: 1rem;
  font-weight: 600;
}

/* 색상 막대 */
.fire-risk-legend .color-bar{
  width: 20rem;
  height: 1rem;
  border-radius: 0.2rem;
  margin-bottom: 0.3rem;
}

/* 현재산불위험지도 */
.fire-risk-legend .color-bar.crntFfdIdxlayer{
	background-image: linear-gradient(
	    to right,
	    #ff0000 0%,
	    #ff0000 10%,
	    #ffaa00 10%,
	    #ffaa00 20%,
	    #ffd37f 20%,
	    #ffd37f 30%,
	    #ffff73 30%,
	    #ffff73 40%,
	    #d3ffbe 40%,
	    #d3ffbe 50%,
	    #a3ff73 50%,
	    #a3ff73 60%,
	    #00c5ff 60%,
	    #00c5ff 70%,
	    #0084a8 70%,
	    #0084a8 80%,
	    #004da8 80%,
	    #004da8 90%,
	    #002673 90%,
	    #002673 100%
	);
}

/* 산불위험등급 */
.fire-risk-legend .color-bar.dtlFfdInfolayer,
.fire-risk-legend .color-bar.gbFfdInfolayer,
.fire-risk-legend .color-bar.gwFfdInfolayer {
	background-image: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 25%,
    #ff9900 25%,
    #ff9900 50%,
    #ffff00 50%,
    #ffff00 75%,
    #0000ff 75%,
    #0000ff 100%
  );
}

/* 대형산불위험지도 */
.fire-risk-legend .color-bar.bfirelayer {
	background-image: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 50%,
    #ffff00 50%,
    #ffff00 100%
  );
}

/* 소나무림 */
.fire-risk-legend .color-bar.pineForestlayer {
	background-image: linear-gradient(
    to right,
    #008000 0%,
    #008000 100%
  );
}

/* 산불취약지도 */
.fire-risk-legend .color-bar.weakarealayer {
	background-image: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 25%,
    #ff9900 25%,
    #ff9900 50%,
    #ffff00 50%,
    #ffff00 75%,
    #ffffff 75%,
    #ffffff 100%
  );
}

/* 기온 */
.fire-risk-legend .color-bar.t1hlayer {
  background-image: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 10%,
    #ff7300 10%,
    #ff7300 20%,
    #ffbb00 20%,
    #ffbb00 30%,
    #ffff00 30%,
    #ffff00 40%,
    #d0ff6b 40%,
    #d0ff6b 50%,
    #91ffb8 50%,
    #91ffb8 60%,
    #00ffff 60%,
    #00ffff 70%,
    #38a9ff 70%,
    #38a9ff 80%,
    #365eff 80%,
    #007eff 90%,
    #0000ff 90%,
    #0000ff 100%
  );
}

/* 강수량 */
.fire-risk-legend .color-bar.rnelayer {
	background-image: linear-gradient(
    to right,
    #0000e0 0%,
    #0000e0 11%,
    #3420e6 11%,
    #3420e6 22%,
    #5136eb 22%,
    #5136eb 33%,
    #674ced 33%,
    #674ced 44%,
    #7e63f2 44%,
    #7e63f2 55%,
    #917af5 55%,
    #917af5 66%,
    #a796fa 66%,
    #a796fa 77%,
    #bab1fc 77%,
    #bab1fc 88%,
    #ccccff 88%,
    #ccccff 100%
  );
}

/* 실효습도 */
.fire-risk-legend .color-bar.ehlayer {
	background-image: linear-gradient(
    to right,
    #0b2c7a 0%,
    #0b2c7a 25%,
    #0ec441 25%,
    #0ec441 50%,
    #f7d707 50%,
    #f7d707 75%,
    #c2523c 75%,
    #c2523c 100%
  );
}

/* 상대습도 */
.fire-risk-legend .color-bar.rhlayer {
	background-image: linear-gradient(
    to right,
    #0b2c7a 0%,
    #0b2c7a 20%,
    #1ba87c 20%,
    #1ba87c 40%,
    #7bed00 40%,
    #7bed00 60%,
    #f0b411 60%,
    #f0b411 80%,
    #c2523c 80%,
    #c2523c 100%
  );
}

/* 평균풍속 */
.fire-risk-legend .color-bar.wmeanlayer {
  background-image: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 20%,
    #ffaa00 20%,
    #ffaa00 40%,
    #ffff00 40%,
    #ffff00 60%,
    #55ff00 60%,
    #55ff00 80%,
    #0070ff 80%,
    #0070ff 100%
  );
}

/* 고도 */
.fire-risk-legend .color-bar.altitudelayer {
  background-image: linear-gradient(
    to right,
    #61150d 0%,
    #61150d 10%,
    #7a391b 10%,
    #7a391b 20%,
    #915d2c 20%,
    #915d2c 30%,
    #a88640 30%,
    #a88640 40%,
    #c2b659 40%,
    #c2b659 50%,
    #b5bd5B 50%,
    #b5bd5B 60%,
    #849c44 60%,
    #849c44 70%,
    #5b7d31 70%,
    #5b7d31 80%,
    #356120 80%,
    #356120 90%,
    #104510 90%,
    #104510 100%
  );
}

/* 공원 */
.fire-risk-legend .color-bar.parklayer {
  background-image: linear-gradient(
    to right,
    #9CEF3C 0%,
    #9CEF3C 33.33%,
    #3E721C 33.33%,
    #3E721C 66.66%,
    #6ECA31 66.66%,
    #6ECA31 100%
  );
}

/* 사면방향 */
.fire-risk-legend .color-bar.directionlayer {
  background-image: linear-gradient(
    to right,
    #005ce6 0%,
    #005ce6 10%,
    #00c5ff 10%,
    #00c5ff 20%,
    #73ffdf 20%,
    #73ffdf 30%,
    #ffa77f 30%,
    #ffa77f 40%,
    #e60000 40%,
    #e60000 50%,
    #ffa77f 50%,
    #ffa77f 60%,
    #ffff00 60%,
    #ffff00 70%,
    #00c5ff 70%,
    #00c5ff 80%,
    #005ce6 80%,
    #005ce6 90%,
    #b0b0b0 90%,
    #b0b0b0 100%
  );
}

/* 임상 */
.fire-risk-legend .color-bar.fmilayer {
  background-image: linear-gradient(
    to right,
    #1f5d03 0%,
    #1f5d03 33.33%,
    #53f33e 33.33%,
    #53f33e 66.66%,
    #ffaa00 66.66%,
    #ffaa00 100%
  );
}

/* 숫자 라벨 */
.fire-risk-legend .labels {
  display: flex;
  justify-content: space-between;
  width: 20rem;
  font-size: 0.85rem;
}


.layer-sch {
  display: flex;
}

.maplayer-button::before {
  content: '';
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	background: url(../../images/map/map.svg)center center no-repeat;
}

.trans-button {
  width: 100%;
}

.trans-button >input {
  width: 100%;
}

.trans-button::before {
  content: '';
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	background: url(../../images/map/filter.svg)center center no-repeat;
}

.map-table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.6rem;  /* 테이블 사이 간격 */
}


.panel_tit {
  flex: 0 0 auto;
}


/*지도 테이블*/
.map-table-wrap {
	--map-table--data-thead-th-padding: var(--krds-padding-3);
	--map-table--data-thead-th-padding-sides:var(--krds-padding-6);
	--map-table--data-thead-pc-font-size: 1.2rem;
	--map-table--data-thead-mobile-font-size: 1.2rem;
	--map-table--data-tbody-pc-font-size: 1.2rem;
	--map-table--data-tbody-mobile-font-size: 1.2rem;
	--map-table--data-tbody-padding: var(--krds-padding-5);
	--map-table--data-tbody-padding-sides: var(--krds-padding-6);
	--map-table--data-border-width: var(--krds-light-border-width-variable-regular);
	--map-table--data-thead-border: var(--krds-light-color-border-secondary-light);
	--map-table--data-thead-surface: var(--krds-light-color-surface-secondary-subtler);
	--map-table--data-thead-color-text: var(--krds-light-color-text-bolder);
	--map-table--data-tbody-color-surface: var(--krds-light-color-surface-white-subtle);
	--map-table--data-tbody-color-divider: var(--krds-light-color-divider-gray-light);
	--map-table--data-tbody-color-text: var(--krds-light-color-text-subtle);
  	width: 100%;
	max-height: 28rem;
  	min-height: 0;
  /* height: 100%; */
	overflow: auto;
	overflow-y: auto;
  flex: 1;
}

.map-table-wrap .tbl.data th,
.map-table-wrap .tbl.data td {
  vertical-align: middle;
}
.map-table-wrap .tbl.data thead th {
  padding: var(--map-table--data-thead-th-padding) var(--map-table--data-thead-th-padding-sides);
  background-color: var(--map-table--data-thead-surface);
  border-bottom: var(--map-table--data-border-width) solid var(--map-table--data-thead-border);
  font-weight: var(--krds-font-weight-bold);
  font-size: var(--map-table--data-thead-pc-font-size);
  color: var(--map-table--data-thead-color-text);
  text-align: left;
}
@media (max-width: 767px) {
  .map-table-wrap .tbl.data thead th {
    font-size: var(--map-table--data-thead-mobile-font-size);
  }
}

/* search-list 레이아웃 */
.search-section-map {
  background-color: var(--krds-light-color-surface-secondary-subtler);
  border-radius: 1rem;
  padding: 1.6rem;
	display: flex;
  flex-direction: column;
	font-size: 1.7rem;
}

.krds-form-select.map {
  height: 4rem;
  padding: 0 var(--krds-form-select--padding-right-medium) 0 var(--krds-form-select--padding-default);
  background-position: center right var(--krds-form-select--padding-default);
  background-size: var(--krds-form-select--icon-size-medium) !important;
  border-radius: var(--krds-form-select--radius-medium);
  font-size: var(--krds-form-select--pc-font-size-medium);
}

.form-tit-map {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.form-tit-map.location{
	width: 6.4rem;
}
.form-conts-map {
	width: 100%;
}

.form-conts-map.left{
	width: calc(100% - 18rem);
}

.form-tit-map.left {
  justify-content: space-between;
}

.form-tit-map.left > span{
  font-size: 1.2rem;
}


@media (max-width: 767px) {
  .krds-form-select.map {
    font-size: var(--krds-form-select--mobile-font-size-medium);
  }
}



.map-table-wrap .tbl.data tbody th,
.map-table-wrap .tbl.data tbody td {
  padding: var(--map-table--data-tbody-padding) var(--map-table--data-tbody-padding-sides);
  background-color: var(--map-table--data-tbody-color-surface);
  border-bottom: var(--map-table--data-border-width) solid var(--map-table--data-tbody-color-divider);
  font-size: var(--map-table--data-tbody-pc-font-size);
  color: var(--map-table--data-tbody-color-text);
  font-weight: var(--krds-font-weight-regular);
  text-align: left;
}
@media (max-width: 767px) {
  .map-table-wrap .tbl.data tbody th,
  .map-table-wrap .tbl.data tbody td {
    font-size: var(--map-table--data-tbody-mobile-font-size);
  }
}
.map-table-wrap.scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.map-table-wrap.scroll .tbl {
  width: 100%;
}

@media (max-width: 767px) {
  .map-table-wrap {
    overflow-x: auto;
    width: calc(100vw - var(--krds-contents-padding-x) * 2);
  }
  #right_panel .map-table-container .map-table-wrap,
  #right_panel .panel-forest .map-table-wrap {
    flex: 0 0 auto;
    height: auto;
    max-height: 28rem;
    overflow-y: auto;
    overflow-x: auto;
  }
  /*
  .map-table-wrap .tbl {
    min-width: 73.2rem;
  }*/
  .map-table-wrap.mob-scroll {
    width: 100%;
  }
  .map-table-wrap.mob-scroll th,
  .map-table-wrap.mob-scroll td {
    white-space: nowrap;
  }
}


/* 지도 관련 영역 이동 애니메이션 */
.index-map,
.east-map,
.map-btnlist,
.legend-list {
  transition: transform 0.5s ease;
}

@media (max-width: 1024px) {
  #headermap {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
  }

  .headermap-inner {
    flex-direction: row; 
    width: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  .topcontents {
    position: relative;
    left: 0;
    top: 0;
    min-width: 0;
  }

  .maphome {
    width: 8rem;
  }

  .heademap-list {
    flex-direction: row;
  }

  .heademap-list > button{
    height: 5.2rem;
    width: calc(100% / 5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  } 

  .panel-toggle.left,
  .panel-toggle.right {
    display: none;
  }

  #rightWrap {
    position: fixed;  
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    right: auto; 
    transition: top 0.5s ease;
  }

  #rightWrap.open {
    top: 5.2rem;
  }

  .topcontents-left .date-group,
  .topcontents-left .time-group {
    display: none !important;
  }

  .topcontents-center {
    display: flex;
  }

  .todaytext {
    position: fixed;      
    bottom: 1.6rem;             
    left: 1.6rem;         
    background: rgba(0,0,0,0.7); 
    color: #fff;          
    padding: 0.6rem 1rem;  
    border-radius: 0.6rem; 
    z-index: 90;          
  }

  .topcontents-center {
    display: flex;
    position: relative;
  }

  .center-list {
    position: fixed;
    top: 10.4rem;
    left: 0;
    width: 100%;
    z-index: 90;
  }

  .weather-group.active {
    background-color: #005bac; /* 클릭 시 색상 변경 */
    color: #fff;
  }

  .center-list {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }

  .center-list.slide-down {
    max-height: 30rem; /* 안에 들어가는 콘텐츠 높이에 맞게 조절 */
    opacity: 1;
  }

  .center-list.slide-up {
    max-height: 0;
    opacity: 0;
  }

  /* topcontents 구조 세로로 정렬 */
  .topcontents {
    display: flex;
  }

  .date-group .date-list,
  .time-group .time-list {
    max-width: 100%;
    justify-content: space-between;
  }

  

  .date-list > button,
  .date-list > button.active {
    width: calc(100% / 5);
  }
  .time-group > div > button {
    width: calc(100% / 8);
  }

  .time-group::before {
    display: none;
  }

  /* 열렸을 때 */
  .date-group.open .date-list {
    max-width: 100%;
    padding: 0rem;
  }

  .time-group.open .time-list {
    max-width: 100%;
    padding: 0rem;
  }

  .date-group > div > button {
    width: calc(100% / 5);
  }

  .search-group,
  .result-group,
  .weather-group {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .topcontents-left,
  .topcontents-right,
  .topcontents-center {
    width: 100%;
  }

  .search-group > button,
  .result-group > button,
  .weather-group > button {
    width: 100%;
  }

}
@media (max-width: 1024px) {
  #leftWrap.fullscreen,
  #rightWrap.fullscreen {
    position: fixed;
    bottom: 0;
    top: inherit;
    left: 0;
    width: 100%;
    height: calc(100% - 5.2rem);
    z-index: 95;
    transition: height 0.3s ease;
  }

  #right_panel,
  #left_panel {
    width: 100%;
    top: 5.2rem;
    max-height: calc(100% - 5.2rem);
  }

  .panel-toggle.left,
  .panel-toggle.right {
    display: none;
  }

  #rightWrap,
  #leftWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; 
    z-index: 97;
  }

  #rightWrap.open,
  #leftWrap.open  {
    display: block; 
  }

  .index-map,
  .east-map,
  .map-btnlist {
    display: none;
  }

  .legend-list {
    position: fixed;
    bottom: 1.6rem;
  }

  .time-group.out {
    display: none;
  }

}

@media (max-width: 767px) {

  .heademap-list > button {
    font-size: 1.2rem;
  }

  .form-group.label.public {
    width: calc(100% - 18rem);
  }

}

@media (max-width: 480px) {
  .search-group > button,
  .date-group > button,
  .time-group > button,
  .result-group > button,
  .weather-group > button {
    padding: 0rem 1rem 0rem 3.2rem;
  }

  .search-group::before,
  .time-group::before,
  .date-group > button::before,
  .result-group::before,
  .weather-group::before {
    left: 0;
  }

}

/* 패널이 열렸을 때 왼쪽으로 이동 */
.index-map.shifted,
.east-map.shifted,
.map-btnlist.shifted,
.legend-list.shifted {
  transform: translateX(-50.6rem);
}

/* ygjung */
#map {width: 100%;height: 100%;}
/* //-ygjung */
.minimap-extent {
    position: absolute;
    border: 2px solid rgba(255,0,0,0.9);
    background: rgba(255,0,0,0.15);
    pointer-events: none; /* 미니맵에서 마우스 이벤트 차단 */
    transform: translate(-50%, -50%); /* center-center positioning */
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}