@charset "UTF-8";
/**
 * @Class Name  : map-main.css
 * @Description : 인천 건축상 수상작 지도 스타일
 * @author      : HyeonBin, Kang
 * @since       : 2025. 10. 14
 * @version 1.1
 *
 * @Modification Information
 * 개정일자              개정자                  개정내용
 * ------------------ ----------- --------------------------
 * 2025. 10. 14       HyeonBin, Kang         최초생성
 *
 * Copyright 2025. 올포랜드 INC. All rights reserved.
 */

/* ========== 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 { width: 100% !important; margin: 0 auto !important;}
.slider > .thumb.right { right: 25%; transform: translate(-10px, -4px) !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;}

/* ========== 플로팅 정보 카드 ========== */
.floating {position: absolute; transform: translate(-50%, -100%); pointer-events: auto; z-index: 2; width: 420px;    max-width: 90%;}
.floating.hidden {display: none;}
.floating .floating-body {background: rgba(42, 42, 42, 0.8);    border-radius: 12px;    color: #fff;    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);    overflow: hidden;    display: flex;    flex-direction: column;}
.floating .floating-header {width: 100%;    display: flex;    justify-content: space-between;    align-items: center;    padding: 16px 20px;    background: #000;}
.floating .f-title {font-size: 16px;    font-weight: 700;    color: #fff;    text-align: left;}
.floating .f-close {background: none;    border: none;    color: #fff;    font-size: 24px;    font-weight: 400;    cursor: pointer;    line-height: 1;    padding: 0;    width: 24px;    height: 24px;    display: flex;    align-items: center;    justify-content: center;    transition: 0.2s;}
.floating .f-close:hover {opacity: 0.7;}
.floating .f-thumb-wrapper {position: relative;    width: 100%;    height: 0;    padding-bottom: 50%;    margin-top: 12px;    background: transparent;    overflow: hidden;}
.floating .f-thumb {position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-size: contain;    background-repeat: no-repeat;    background-position: center;    background-color: transparent;}
.floating .slide-btn {position: absolute;    top: 50%;    transform: translateY(-50%);    width: 34px;    height: 34px;    border: none;    border-radius: 50%;    background: rgba(255, 255, 255);    color: #000;    font-size: 18px;    font-weight: 700;    cursor: pointer;    z-index: 2;    transition: 0.2s;    display: flex;    align-items: center;    justify-content: center;}
.floating .slide-btn:hover {background: rgba(253, 234, 234, 0.8);}
.floating .slide-btn.prev {left: 12px;}
.floating .slide-btn.next {right: 12px;}
.floating .f-text {width: 100%;    padding: 20px;    display: flex;    flex-direction: column;    gap: 12px;}
.floating .f-info-table {width: 100%;    background: #000000;    border: 1px solid rgba(42, 42, 42, 0.8);    border-radius: 8px;   padding: 16px;    color: #fff;    display: flex;    flex-direction: column;    gap: 12px;}
.floating .f-info-row {display: flex;    justify-content: flex-start;    align-items: flex-start;    font-size: 14px;    line-height: 1.6;}
.floating .f-info-row .label {font-weight: 400;    color: #999;    min-width: 100px;    flex-shrink: 0;}
.floating .f-info-row .value {color: #fff;    font-weight: 400;    flex: 1;    word-break: break-word;}
.floating .arrow {width: 0;    height: 0;    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-top: 12px solid #1a1a1a;    position: absolute;    left: 50%;    transform: translateX(-50%);    bottom: -12px;    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));}

/* ===== 에어커멘드 상세 플로팅 카드(길찾기, 거리뷰, 연관검색) ===== */
.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));}

/* ========== 접힘 상태 숨김 처리 ========== */
.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 screen and (max-width: 1200px) {
    .floating { position: fixed !important;  top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 100000 !important; width: 90%; max-width: 90%; height: auto; max-height: 90vh; overflow-y: auto; box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.5); }
    .floating .floating-body { border-radius: 12px; height: auto; }
    .floating .f-thumb-wrapper { padding-bottom: 40%; }
    .floating .f-text { padding: 16px; }
    .floating .f-info-table { padding: 12px; }
    .floating .f-info-row { font-size: 13px; }
    .floating .f-info-row .label { min-width: 80px; }
    .modal-back.in { z-index: 1; }
    .floating { z-index: 2; }
}

/* ========== 인쇄 스타일 ========== */
@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;  position: absolute;  width: var(--size);  height: var(--size);  pointer-events: none;  display: none;  z-index: 2;}
.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);}
.air-command-button[data-action="detail"] {  --start: 180deg;  --sweep: 45deg;  --angle: 200deg;  --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: 245deg;  --color: var(--c-blue);  clip-path: polygon(    50% 50%,    6.7% 6.7%,    50% 0%   );}
.air-command-button[data-action="route"] {  --start: 270deg;  --sweep: 45deg;  --angle: 295deg;  --color: var(--c-green);  clip-path: polygon(    50% 50%,    50% 0%,    93.3% 6.7%  );}
.air-command-button[data-action="street"] {  --start: 315deg;  --sweep: 45deg;  --angle: 340deg;  --color: var(--c-yellow);  clip-path: polygon(    50% 50%,    93.3% 6.7%,    100% 50%  );}
.air-command-button[data-action="search"] {  --start: 0deg;  --sweep: 90deg;  --angle: 380deg;  --color: var(--color-bg-darker);  clip-path: polygon(    50% 50%,    100% 50%,    100% 100%);}
/*.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;}