@charset "UTF-8";
/**
 * @Class Name  : map-main.css
 * @Description : 인천 인천 100선 지도 스타일
 * @author      : Jinju, Lee
 * @since       : 2025. 12. 05
 * @version 1.1
 *
 * @Modification Information
 * 개정일자              개정자                  개정내용
 * ------------------ ----------- --------------------------
 * 2025. 12. 05       Jinju, Lee         최초생성
 *
 * Copyright 2025. 올포랜드 INC. All rights reserved.
 */

/* ========== 에어커맨드 (Air Command) ========== */
.map_layout {
	background: #000;
}
.viewer-title {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 0.8em;
	z-index: 10;
}

#container {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2열 */
	width: 100%;
	height: 100%;
}

#cesiumContainer40 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.white{color:white;}

@media screen and (min-width: 1200px) {
	#infoPanelTab1 {
		width: 470px;
		height: 800px;
	}
}
.krds-modal :focus {
	outline: none;
	box-shadow: none;
}
#infoPanelTab1 {
	height: 100vh;
}


.modal-header {
	flex: 0 0 auto;
}
#tab03Content,
#tab04Content {
	position: relative;
}
/* 지도분할/지도비교일 때 사이드바 열림 */
.map_sidebar:has(.map_sidebar_toggle[aria-expanded="true"]) ~ #tab03Content.compare-mode,
.map_sidebar:has(.map_sidebar_toggle[aria-expanded="true"]) ~ #tab04Content.compare-mode {
	margin-left: 340px;
	width: calc(100% - 340px);
}

/* 지도분할/지도비교일 때 사이드바 닫힘 */
.map_sidebar:has(.map_sidebar_toggle[aria-expanded="false"]) ~ #tab03Content.compare-mode,
.map_sidebar:has(.map_sidebar_toggle[aria-expanded="false"]) ~ #tab04Content.compare-mode {
	margin-left: 0;
	width: 100%;
}

#floatingScroll {
	flex: 1;
	overflow-y: auto;
}
.floating-top-btn{
	position: sticky;
	padding:10px;
	text-align:center;
	background-color: #000;
}
/* pdf패널 */
#pdfPanelTab1 {
  width: 410px;
  display: none;
}
/* 지도비교 */
.compare-map-container {
	position: relative;
}

.compare-year-badge {
	position: absolute;
	top: 16px;
	z-index: 20;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}

.compare-year-badge.left {
	left: 16px;
}

.compare-year-badge.right {
	right: 16px;
}

/*모바일 */
@media screen and (max-width: 1200px) {
	#legendAreaTab2, #legendEraTab2 {
		display: none !important;
	}
	#floatingChartScroll, #floatingChartScroll .conts-area,
		#floatingInfoChartBody, #cardList20, #cardList20 .chart-item,
		#cardList20 .list-plant, #chartContainer, #chartContainer2 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	#myBarChart, #myBarChart2 {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	#floatingScroll {
		overflow-y: auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-y pan-x;
	}
	#floatingScroll .conts-area, #floatingInfo2Body {
		width: 100%;
		box-sizing: border-box;
	}
	.list-maping {
		width: 100vw;
		height: 70vh;
	}
	.mobile-fix .modal-dialog.medium-w380 {
		width: 95vw !important;
		max-width: 95vw;
		margin: 5vh auto !important;
	}
	.mobile-fix .modal-dialog.medium-w380 .modal-content {
		height: auto;
		max-height: 90vh; 
		padding: 1rem;
		overflow-y: auto;
	}
	#cardList20,#cardListTab2 {
		height: auto;
	}
}