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

/* 레이아웃: top, left, bottom */
/* ========== CSS 변수 (색상 팔레트) ========== */
:root {--color-primary:#2a7df7;--color-primary-hover:#1f6be0;--color-primary-light:#a8c6ff;--color-bg-dark:#081222;--color-bg-darker:#0a1628;--color-bg-panel:#1a2747;--color-bg-light:#f1f5fe;--color-border:#1b2c4e;--color-border-light:#28406f;--color-text-light:#e9f2ff;--color-text-muted:#cfe0ff;--color-text-dark:#111;--color-badge-gold:#b987ff;--color-badge-blue:#2a7df7;--color-badge-orange:#ff8c1a;--color-floating-bg:#5a6d9c;--topbar-height:56px;--bottombar-height:40px;--panel-width:360px;--panel-collapsed-width:8px;}


/* ========== 기본 레이아웃 ========== */
html, body {height: 100%; margin: 0; font-family: 'Noto Sans KR', Inter, Arial, sans-serif; color: var(--color-text-dark); overflow: hidden;}

/* ========== 메인 컨테이너 ========== */
.container {position:fixed;left:0;right:0;top:48px; bottom:32px;display:flex;}

/* ========== 시계열 필터 ========== */
.middle,
.middle .markers {width: 100% !important;}
.title-wrap.center {text-align: center !important;margin-bottom: 16px !important;}
.title-wrap.center .title-sub {font-size: 14px !important;color: #fff !important;}
.slider > .thumb.right {right: 25%;-webkit-transform: translate(0px, -4px);transform: translate(-10px, -4px) !important;}
.slider {width: 250px !important;margin: 0 auto !important;}

/* ========== 비교 탭 ========== */
.compare-info {padding:20px;text-align:center;color:var(--color-text-light);}
.compare-info p {margin:10px 0;}

/* ========== 지도 래퍼 ========== */
.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; }

/* ========== 스와이프 핸들 ========== */
.swipe-handle {  position: absolute;  left: 50%;  top: 0;  bottom: 0;  width: 40px;  margin-left: -20px;  cursor: ew-resize;  z-index: 1000;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  user-select: none;  pointer-events: auto;}
.swipe-handle.hidden {  display: none !important;}
.swipe-line {  width: 3px;  flex: 1;  background: linear-gradient(    to bottom,    transparent 0%,    var(--krds-color-light-gray-95) 20%,    var(--krds-color-light-gray-95) 80%,    transparent 100%  );  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);  pointer-events: none;}
.swipe-icon {  display: flex;  align-items: center;  justify-content: center;  width: 40px;  height: 60px;  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  border-radius: 20px;  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);  color: white;  font-size: 12px;  gap: 2px;  transition: transform 0.2s ease, box-shadow 0.2s ease;  cursor: grab;}
.swipe-handle:active .swipe-icon {  cursor: grabbing;}
.swipe-handle:hover .swipe-icon {  transform: scale(1.1);  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);}
.swipe-icon .arrow-left,
.swipe-icon .arrow-right {  font-size: 10px;  opacity: 0.7;  pointer-events: none;}
.swipe-icon .handle-dot {  font-size: 8px;  opacity: 0.9;  pointer-events: none;}
/* ===== 드래그 중 스타일 ===== */
.swipe-handle.dragging {  opacity: 1;}
.swipe-handle.dragging .swipe-icon {  background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%);  box-shadow: 0 8px 25px rgba(42, 125, 247, 0.6);  cursor: grabbing;}

/* ========== 단일/듀얼 카드 래퍼 전환 ========== */
#singleCardWrapper {  display: flex;  flex-direction: column;  flex: 1;  overflow: hidden; padding:20px 0px}
#singleCardWrapper.hidden {  display: none;}
#dualCardWrapper {  display: flex;  flex-direction: column;  flex: 1;  overflow: hidden;}
#dualCardWrapper.hidden {  display: none;}

/* 연도별 비교 탭 전용 레이아웃 (좌측 패널 위/아래 반반 분할) */
.map_sidebar.compare-mode .tab-conts-wrap {  overflow: hidden; }
.map_sidebar.compare-mode #연도별비교 {  display: flex;  flex-direction: column;  height: 100%; }
.map_sidebar.compare-mode #연도별비교 .search_area.sect {  flex-shrink: 0; }
.map_sidebar.compare-mode #dualCardWrapper {  flex: 1;  min-height: 0; }

/* ========== 듀얼 카드 섹션 (화면1/화면2) ========== */
.dual-section {  flex: 1;  display: flex;  flex-direction: column;  min-height: 0; }

/* 좌측 패널의 화면1/2 헤더를 레이어 헤더 색상과 통일 */
.dual-header {  display: flex;  justify-content: space-between;  align-items: center;  padding: 12px 14px;  background: var(--krds-color-light-gray-95);  border-bottom: 1px solid var(--color-border);  flex-shrink: 0;}

.dual-title { font-size: 15px;  font-weight: 700;  color: var(--krds-light-color-text-basic-inverse);}
.dual-count {  font-size: 14px;  font-weight: 600;  color: var(--krds-light-color-text-subtle-inverse);}
.dual-cards {  flex: 1;  overflow-y: auto;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;  min-height: 0;  background: var(--krds-color-light-gray-95);}
.dual-cards::-webkit-scrollbar {  width: 6px;}
.dual-cards::-webkit-scrollbar-thumb {  background-color: rgba(209, 214, 224, 0.8);  border-radius: 4px;}
.dual-cards::-webkit-scrollbar-track {  background-color: rgba(15, 25, 45, 0.6);}

/* 빈 결과 메시지 */
.empty-message {text-align:center;padding:40px 20px;color:var(--color-primary-light);}
.empty-message p {margin:8px 0;}

/* 연도별비교 탭 활성화 시 */
.tab#tabCompare.active ~ .map-area {  flex: 1;}
.screen2-header,.screen2-cards {  display: none;}
.screen2-header.active,.screen2-cards.active {  display: block;}
#singleHeader.hidden {  display: none;}
/* 요약정보 */
.simple-panel {  position: fixed;  left: 400px; /* leftPanel 너비만큼 */  top: 60px; /* topbar 높이만큼 */  width: 320px;  height: calc(100vh - 100px);  background:  rgba(42, 42, 42, 0.8);  border-radius: 8px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  z-index: 100;  overflow-y: auto;  transition: transform 0.3s ease, opacity 0.3s ease;}
.simple-panel.hidden {  transform: translateX(-100%);  opacity: 0;  pointer-events: none;}
.simple-header {  display: flex;  justify-content: space-between;  align-items: center;  padding: 20px;  border-bottom: 1px solid rgba(42, 125, 247, 0.2);}
.simple-header h3 {  margin: 0;  color: #fff;  font-size: 16px;  font-weight: 600;}
.close-btn {  background: none;  border: none;  color: #a8c6ff;  font-size: 24px;  cursor: pointer;  padding: 0;  width: 30px;  height: 30px;  display: flex;  align-items: center;  justify-content: center;}
.close-btn:hover {  color: #fff;}
.simple-body {  padding: 20px;}
.simple-thumb {  width: 100%;  height: 200px;  background-size: cover;  background-position: center;  border-radius: 8px;  margin-bottom: 20px;  background-color: rgba(42, 125, 247, 0.1);}
.simple-info .info-item {  display: flex;  padding: 12px 0;  border-bottom: 1px solid rgba(42, 125, 247, 0.1);}
.simple-info .info-item:last-child {  border-bottom: none;}
.simple-info .label {  min-width: 80px;  color: #a8c6ff;  font-size: 13px;  font-weight: 500;}
.simple-info .value {  flex: 1;  color: #fff;  font-size: 14px;}


/* font */
/* flex align */
/* flex justify-content */
/* flex direction*/
/* flex row */
/* flex */
/* scrollbar mixin */
.header-logo-text {
  font-size: 1.7rem !important;
}

.header .header_inner .header_logo .logo-link .logo {
  gap: 0 var(--krds-padding-2);
}

.header .header_inner .header_logo .logo-link .logo > img {
  width: 1.7rem;
}

.traffic_list ul {
  display: flex;
  flex-direction: column;
  gap: var(--krds-gap-3);
}
.traffic_list ul .traffic_conditions {
  width: 100%;
}
.traffic_list ul .traffic_conditions .conditions_btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--krds-gap-2);
}
.traffic_list ul .traffic_conditions .icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--krds-radius-xsmall1);
  background-color: var(--krds-light-color-text-bolder);
  display: flex;
  align-items: center;
  justify-content: center;
}
.traffic_list ul .traffic_conditions .conditions_box {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
}
.traffic_list ul .traffic_conditions .conditions_box.error {
  background-color: var(--krds-light-color-element-danger);
}
.traffic_list ul .traffic_conditions .conditions_box.caution {
  background-color: #D2761A;
}
.traffic_list ul .traffic_conditions .conditions_box.normal {
  background-color: var(--krds-color-light-information-40);
}
.traffic_list ul .traffic_conditions .txt {
  font-size: var(--krds-pc-font-size-body-xsmall);
  font-weight: 400;
  color: var(--krds-light-color-text-basic-inverse);
  width: calc(100% - 4.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
/*# sourceMappingURL=sys_sea.css.map */


/* ===== 에어커멘드 상세 플로팅 카드(길찾기, 거리뷰, 연관검색) ===== */
.floating-link {position: absolute;transform: translate(-50%, -100%);pointer-events: auto;z-index: 2500;width: 200px;background: rgba(42, 42, 42, 0.8);border-radius: 12px;color: #fff;box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);text-align: center;}
.floating-link.hidden { display: none; }
.floating-link .floating-body {padding: 12px;display: flex;flex-direction: column;align-items: center;}
.floating-link .floating-header {width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.floating-link .f-title {font-size: 15px;font-weight: 700;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.floating-link .f-close {background: none;border: none;color: #fff;font-size: 22px;font-weight: 700;cursor: pointer;line-height: 1;transition: 0.2s;}
.floating-link .f-close:hover { transform: scale(1.1); color: #ffdfdf; }
.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; }
.floating-link .arrow {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 12px solid var(--color-floating-bg);position: absolute;left: 50%;transform: translateX(-50%);bottom: -12px;filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));}


/* ========== 하단바 ==========
.bottombar {position:fixed;left:0;right:0;bottom:0;height:var(--bottombar-height);z-index:20;display:flex;align-items:center;justify-content:space-between;background:#0e1a31;color:var(--color-primary-light);padding:0 14px;border-top:1px solid var(--color-border);font-size:13px;}
*/
/* ========== 접힘 상태 숨김 처리 ========== */
.left-panel.collapsed .left-header .title,.left-panel.collapsed .left-header .tab-group,.left-panel.collapsed .filters,.left-panel.collapsed .award-header,.left-panel.collapsed .cards {display:none!important;}

/* ========== 반응형 ========== */
@media (max-width:768px){.topbar .search-wrap input{width:180px;}.left-panel{width:100%;max-width:320px;}.toggle{left:320px;}}



/* 반응형: 작은 화면 (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%;
	}
}

/* ========== 인쇄 스타일 ========== */
@media print{.topbar,.bottombar,.toggle,.left-panel{display:none;}.map-area{position:static;}}

/* =======   에어커맨드 (Air Command) == */
.air-command {  --size: 200px;  --thickness: 55px;  --c-light-blue: #a8c9f5;  --c-blue: #7da8f0;  --c-green: #6dd4a8;  --c-yellow: #ffc976;  --c-green-blue: #818ff8;  --c-purple: #8080c0;  --c-pink: #f2a6df; position: absolute;  width: var(--size);  height: var(--size);  pointer-events: none;  display: none;  z-index: 2 !important;}
.air-command.active {  display: block;  animation: airCommandFadeIn 0.25s ease-out;}
@keyframes airCommandFadeIn {  from {    opacity: 0;    transform: scale(0.85);  }  to {    opacity: 1;    transform: scale(1);  }}
.air-command-center {  position: absolute;  top: 50%;  left: 50%;  width: 25%;  height: 25%;  transform: translate(-50%, -50%);  border-radius: 50%;  background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);  opacity: 0.9;  display: flex;  align-items: center;  justify-content: center;  overflow: hidden;  cursor: pointer;  pointer-events: auto;  z-index: 5;}
.air-command-center img {  width: 100%;  height: 100%;  object-fit: contain; background-repeat: no-repeat;}
.air-command-button {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  border: none;  padding: 0;  border-radius: 50%;  background: var(--color);  opacity: 0.9;  -webkit-mask: radial-gradient(    circle at 50% 50%,    transparent calc(50% - var(--thickness)),    #000 calc(50% - var(--thickness))  );  mask: radial-gradient(    circle at 50% 50%,    transparent calc(50% - var(--thickness)),    #000 calc(50% - var(--thickness))  );  cursor: pointer;  pointer-events: auto;  transition: transform 0.2s ease, filter 0.2s ease;  z-index: 1;}
.air-command-button:hover {  transform: scale(1.03);  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));}
.air-command-button-label {  position: absolute;  left: 50%;  top: 50%;  --r: calc(var(--size) / 2 - var(--thickness) / 2 - 8px);  transform:    translate(-50%, -50%)    rotate(var(--angle))    translate(var(--r))    rotate(calc(var(--angle) * -1));  color: #fff;  font-size: 11px;  font-weight: 700;  white-space: nowrap;  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);}
/* 버튼 위치 (8방향) */

.air-command-button {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  border: none;  padding: 0;  border-radius: 50%;  background: var(--color);  opacity: 0.9;  -webkit-mask: radial-gradient(    circle at 50% 50%,    transparent calc(50% - var(--thickness)),    #000 calc(50% - var(--thickness))  );  mask: radial-gradient(    circle at 50% 50%,    transparent calc(50% - var(--thickness)),    #000 calc(50% - var(--thickness))  );  cursor: pointer;  pointer-events: auto;  transition: transform 0.2s ease, filter 0.2s ease;  z-index: 1;}
.air-command-button:hover {  transform: scale(1.03);  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));}
.air-command-button-label {  position: absolute;  left: 50%;  top: 50%;  --r: calc(var(--size) / 2 - var(--thickness) / 2 - 8px);  transform:    translate(-50%, -50%)    rotate(var(--angle))    translate(var(--r))    rotate(calc(var(--angle) * -1));  color: #fff;  font-size: 11px;  font-weight: 700;  white-space: nowrap;  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);}
.air-command-button[data-action="detail"] {  --start: 180deg;  --sweep: 45deg;  --angle: 202.5deg;  --color: var(--c-light-blue);  clip-path: polygon(    50% 50%,    0% 50%,   6.7% 6.7%   );}
.air-command-button[data-action="drone"] {  --start: 225deg;  --sweep: 45deg;  --angle: 247.5deg;  --color: var(--c-blue);  clip-path: polygon(    50% 50%,    6.7% 6.7%,    50% 0%   );}
.air-command-button[data-action="street"] {  --start: 270deg;  --sweep: 45deg;  --angle: 292.5deg;  --color: var(--c-green);  clip-path: polygon(    50% 50%,    50% 0%,    93.3% 6.7%  );}
.air-command-button[data-action="route"] {  --start: 315deg;  --sweep: 45deg;  --angle: 337.5deg;  --color: var(--c-yellow);  clip-path: polygon(    50% 50%,    93.3% 6.7%,    100% 50%  );}
/* 연관검색 */
.air-command-button[data-action="search"] {  --start: 0deg;
  --sweep: 45deg;
  --angle: 22.5deg;
  --color: var(--c-purple);
  clip-path: polygon(
    50% 50%,
    100% 50%,
    93.3% 93.3%
  );}
/*.air-command-button[data-action="disabled"] {  --start: 0deg;  --sweep: 90deg;  --angle: 45deg;  --color: #d0d0d0;  clip-path: polygon(    50% 50%,    100% 50%,    100% 100%,    50% 100%  );  pointer-events: none;  cursor: default;}*/
.air-command-button[data-action="disabled"]:hover {  transform: scale(1);  filter: none;}



/* ===== 시설물 등록 패널 ===== */
#facility-modal {
  position: fixed;
  top: 64px;                 /* 상단 공통 헤더 아래 */
  left: 360px;               /* 좌측 검색 패널 옆 */
  width: 420px;
  max-height: calc(100vh - 100px);
  background: #1f1f1f;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: none;
  z-index: 3000;
}

/* 열렸을 때 */
#facility-modal.show {
  display: block;
}

/* ===== 내부 ===== */
#facility-modal .modal {
  padding: 20px;
  color: #fff;
}

/* 헤더 */
#facility-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#facility-modal h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

#facility-modal .close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
}

/* 바디 */
#facility-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#facility-modal label {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 4px;
}

#facility-modal input,
#facility-modal select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #2b2b2b;
  color: #fff;
  font-size: 13px;
}

/* footer */
#facility-modal .modal-footer {
  margin-top: 40px;
}

#facility-modal .btn-primary {
  width: 100%;
  height: 42px;
  background: #5865f2;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 768px) {
  #facility-modal.modal-overlay {
    left: 0;
    width: 100%;
    align-items: flex-end;
    background-color: rgba(0, 0, 0, 0.4);
  }

  #facility-modal .modal {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    background-color: #1e1e1e; /* 확실하게 */
  }

  #facility-modal .modal-header h2 {
    font-size: 16px;
  }

  #facility-modal .modal-body {
    gap: 12px;
  }

  #facility-modal .modal-footer {
    margin-top: 20px;
  }
}