@charset "UTF-8";
/**
 * 에어커맨더 글래스모피즘 오버라이드
 * BAS 항공영상지도 전용 (sgp/bas/main.do)
 */

/* ===== Variables ===== */
:root {
  --ac-primary: #3b82f6;
  --ac-primary-bright: #60a5fa;
  --ac-glass-border: rgba(255,255,255,0.25);
  --ac-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
  --ac-blur: 1.3px;
  --ac-blur-active: 1.7px;
  --ac-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ac-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===========================================================
   1. wrapper 투명화
   =========================================================== */
.map-context-menu-wrapper.half {
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

/* ===========================================================
   2. button 투명 (위치만 담당)
   =========================================================== */
.map-context-half-button {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: 0.8s var(--ac-spring) !important;
  transition-property: top, left, right, bottom, transform !important;
}

/* ===========================================================
   3. button-inner → 유리 pill (비활성: 투명)
   =========================================================== */
.map-context-half-button-inner,
.map-context-half-item .map-context-half-button-inner {
  width: 3.6rem !important;
  height: 3.8rem !important;
  overflow: visible !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 100%) !important;
  background-color: transparent !important;
  backdrop-filter: blur(var(--ac-blur)) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(var(--ac-blur)) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-top-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 16px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: min-width 0.5s ease-in-out !important;
  transition-property: min-width !important;
}

/* ===========================================================
   4. 텍스트
   =========================================================== */
.map-context-half-button-text {
  font-size: 1.4rem !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.4) !important;
}

/* ===========================================================
   5. 아이콘
   =========================================================== */
/* 우측 버튼(pos-4,5) 텍스트 위치 */
.map-context-half-item:nth-child(4) .map-context-half-button-text,
.map-context-half-item:last-child .map-context-half-button-text {
  margin-left: 3.8rem !important;
}
/* 좌측 버튼(pos-1,2) 텍스트 위치 */
.map-context-half-item:nth-child(1) .map-context-half-button-text,
.map-context-half-item:nth-child(2) .map-context-half-button-text {
  margin-right: 3.8rem !important;
}
/* pill 크기 (pos-3 제외) */
.map-context-half-item .map-context-half-button-inner {
  min-width: 12rem !important;
}
.map-context-half-item .pos-3 .map-context-half-button-inner {
  min-width: 10rem !important;
}

.map-context-half-item .map-context-half-icon {
  width: 4.8rem !important;
  height: 4.8rem !important;
  background-color: var(--krds-color-light-secondary-70) !important;
}
.map-context-half-button.pos-1 .map-context-half-icon,
.map-context-half-button.pos-2 .map-context-half-icon {
  right: 0px !important;
}
.map-context-half-button.pos-4 .map-context-half-icon,
.map-context-half-button.pos-5 .map-context-half-icon {
  left: 0px !important;
}

/* ===========================================================
   6. 호버
   =========================================================== */
.map-context-half-item:hover .map-context-half-button-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 100%) !important;
  border-color: rgba(255,255,255,0.35) !important;
  border-top-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 16px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.map-context-half-item:hover .map-context-half-icon {
  box-shadow: 0 2px 14px rgba(59,130,246,0.6) !important;
}

/* ===========================================================
   7. Active (활성: 불투명)
   =========================================================== */
.map-context-half-item.active .map-context-half-button-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 100%) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid var(--ac-glass-border) !important;
  border-top-color: rgba(255,255,255,0.35) !important;
  box-shadow: var(--ac-shadow), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.05) !important;
  transform: translateY(-53%) !important;
}

/* pos-3(거리뷰)는 원래 top:-53px + translateX(-50%) 구조 → 별도 처리 */
.map-context-half-item.active .pos-3 .map-context-half-button-inner {
  transform: translateX(-50%) translateY(-3px) !important;
}

.map-context-half-item.active .map-context-half-button-text {
  color: #fb923c !important
}

.map-context-half-item.active .map-context-half-icon {
  border-color: rgba(255,255,255,0.5) !important;
  animation: iconPulse 1.5s ease-in-out infinite;
}

.map-context-half-item.active .map-context-half-button {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 2px 16px rgba(59,130,246,0.7); }
  50%      { box-shadow: 0 2px 22px rgba(59,130,246,0.9), 0 0 6px rgba(59,130,246,0.4); }
}

/* ===========================================================
   8. 서브메뉴 팝업
   =========================================================== */
.map-context-popup {
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-top-color: rgba(255,255,255,0.32) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.map-context-popup::after { border-top-color: rgba(255,255,255,0.15) !important; }
.map-context-popup-link { color: rgba(255,255,255,0.9) !important; }
.map-context-popup-link:hover { color: var(--ac-primary-bright) !important; }

/* ===========================================================
   9. 툴팁
   =========================================================== */
.map_context_tooltip {
  background-color: rgba(10,16,32,0.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--ac-glass-border) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.9) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.map_context_tooltip::before { border-left-color: rgba(10,16,32,0.92) !important; }
.map_context_tooltip::after  { border-left-color: rgba(10,16,32,0.92) !important; }
.map_context_tooltip.top::before { border-top-color: rgba(10,16,32,0.92) !important; border-left-color: transparent !important; }
.map_context_tooltip.bottom::after { border-bottom-color: rgba(10,16,32,0.92) !important; border-left-color: transparent !important; }
.map_context_tooltip.left::before { border-right-color: rgba(10,16,32,0.92) !important; border-left-color: transparent !important; }

/* ===========================================================
   10. 주소 타이틀
   =========================================================== */
.map-context-menu-title {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-top-color: rgba(255,255,255,0.3) !important;
  border-radius: 1.2rem !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.map-context-menu-wrapper.half.marker-active .map-context-menu-title {
  animation: titleBounce 0.6s var(--ac-spring) 0.3s both;
}
@keyframes titleBounce {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ===========================================================
   11. 핀 이미지 글로우 + 펄스
       → 공통 aircommand-glass.css 의 주황 pinPulse 사용
   =========================================================== */

/* ===========================================================
   12. 인천 CI 랜드마크 (실제 DOM: .ac-landmark)
       half-con 안에 배치, 핀 이미지 뒤에서 등장
   =========================================================== */
.map-context-half-con {
  position: relative !important;
}

.ac-landmark {
  position: absolute;
  left: 50%;
  top: -100px;
  width: 140px;
  height: 140px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}

.ac-landmark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 28px rgba(0,112,189,0.5)) drop-shadow(0 0 10px rgba(0,167,172,0.3));
}

/* path 단계별 등장: 1(파란) → 2(초록 작은) → 3(초록 큰) */
.ac-landmark svg path:nth-child(2),
.ac-landmark svg path:nth-child(3) {
  opacity: 0;
}

.marker-active .ac-landmark {
  animation: acLandmarkReveal 0.5s ease-out 0.5s forwards;
}

.marker-active .ac-landmark svg path:nth-child(2) {
  animation: acPathReveal 0.3s ease-out 1.3s forwards;
}

.marker-active .ac-landmark svg path:nth-child(3) {
  animation: acPathReveal 0.3s ease-out 1.7s forwards;
}

@keyframes acLandmarkReveal {
  0%   { opacity: 0; }
  100% { opacity: 0.8; }
}

@keyframes acPathReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* wrapper pseudo 비활성 */
.map-context-menu-wrapper.half::before,
.map-context-menu-wrapper.half::after {
  display: none !important;
}

/* ===========================================================
   13. context-in 모달
   =========================================================== */
.krds-modal[class*=context-in] .modal-content {
  background: rgba(15,22,40,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--ac-glass-border) !important;
  box-shadow: var(--ac-shadow) !important;
}

/* ===========================================================
   14. fade-circle 강화
   =========================================================== */
.fade-circle:after {
  filter: drop-shadow(0 0 18px rgba(0,112,189,0.25));
}