@charset "UTF-8";
/**
 * @Class Name  : map-main.css
 * @Description : 
 * @author      : ShinYoung, Kim
 * @since       : 2025. 09. 23
 * @version 1.0
 *
 *
 * @Modification Information
 * 개정일자			     개정자                  개정내용
 * ------------------ ----------- --------------------------
 * 2025. 09. 23        ShinYoung, Kim         최초생성
 *
 *
 * Copyright 2025. 올포랜드 INC.All rights reserved.
 */


		#popup0 ,#popup3 , #popup4 ,#popup5 ,#popup6 {
			display: none!important;
		}
		
		
/* ========== 지도 래퍼 ========== */
.map-wrapper {  position: relative;  flex: 1;  display: flex;  overflow: hidden;  width: 100%;  height: 100%;}

/* ========== 지도 영역 (기본: 단일 지도 모드) ========== */
.map-area {  position: relative;  flex: 1 1 0%;  background: #0a162b; width: 100%;  height: 100%; overflow: hidden;}
.map-area-second {  position: relative;  flex: 1 1 0%;  background: #0a162b;  display: none; width:100%;  height: 100%; overflow: hidden;}
#cesiumContainer,#cesiumContainer2 {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  overflow: hidden;}

/* 연도별 비교용 지도 화면 라벨 (화면 1 / 화면 2) - 레이어 헤더 색상과 통일 */
.map-screen-label {  position: absolute;  top: 10px;  left: 50%;  transform: translateX(-50%);  z-index: 1500;  padding: 10px 28px;  border-radius: 18px;  background: var(--krds-color-light-gray-95);  color: var(--krds-light-color-text-basic-inverse);  font-size: 18px;  font-weight: 600;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);  pointer-events: none;  display: none; }

/* 화면1/화면2 각각 25% / 75% 지점에 위치 */
.map-screen-label.screen-1 { left: 25%; }
.map-screen-label.screen-2 { left: 75%; }

/* 연도별 비교(compare-mode)일 때만 화면 라벨 표시 */
.map-wrapper.compare-mode .map-screen-label { display: inline-flex; align-items: center; justify-content: center; }

/* ========== 지도 영역 (연도별 비교 스와이프 모드) ========== */
.map-wrapper.compare-mode {  position: relative;  display: block; }
.map-wrapper.compare-mode #mapArea1,
.map-wrapper.compare-mode #mapArea2 {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  flex: none; }
.map-wrapper.compare-mode #mapArea1 {  z-index: 2;  display: block;  clip-path: inset(0 50% 0 0);  /* 기본 50:50 */ }
.map-wrapper.compare-mode #mapArea2 {  z-index: 1;  display: block; }
.map-wrapper.compare-mode #swipeHandle {  z-index: 3; }
/* 카드 상세 팝업 */
#cardDetailPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  padding: 20px;
  display: none; /* 초기에는 숨김 */
  animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

#cardDetailPopup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

#cardDetailPopup .popup-body {
  margin-top: 20px;
  text-align: center;
}

#cardDetailPopup .popup-body .link-btn {
  background: #0078ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}

#cardDetailPopup .popup-body .link-btn:hover {
  background: #005fcc;
}

#cardDetailPopup .popup-logo {
  margin-top: 16px;
  width: 140px;
  opacity: 0.8;
}

#cardDetailPopup .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #555;
  cursor: pointer;
}		
#floatingInfo {
  position: fixed;          /* absolute도 가능하지만 fixed 권장 */
  z-index: 9999;            /* Cesium 위로 강제 */
}
/* ===== 에어커멘드 상세 플로팅 카드(길찾기, 거리뷰, 연관검색) ===== */
.map-icons {background: #fff;border-radius: 10px;padding: 8px 20px;display: flex;justify-content: center;align-items: center;gap: 10px;margin-bottom: 10px;}
.map-icon {width: 38px;height: 38px;cursor: pointer;transition: transform 0.2s ease;}
.map-icon:hover { transform: scale(1.2); }
.btn-close-floating {background: #2a7df7;border: none;color: #fff;padding: 6px 18px;border-radius: 6px;cursor: pointer;font-weight: 600;font-size: 13px;transition: background 0.2s ease;}
.btn-close-floating:hover { background: #1f5fd4; }



/* 반응형: 작은 화면 (1200px 이하) */
@media screen and (max-width: 1200px) {
	.asdie-modal-dialog:not(.hidden) {
		width: 100% !important;
		left: auto !important;
	}
	
	.asdie-modal-dialog .modal-content .modal-conts .conts-area .chart-list,
	.asdie-modal-dialog .modal-content .modal-conts .conts-area .chart-list .chart-item .chart {
		width: 100%;
	}
}

	

/* 숨김 상태 */
.hidden {
  display: none;
}

.visual-options {
  position: absolute;
  top: 10px;
  left: 20px;
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  padding: 8px 12px;
  z-index: 2000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.visual-options select {
  margin-left: 8px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}