@charset "UTF-8";
/**
 * 에어커맨드 글래스모피즘 오버라이드 (공통)
 *
 * core_context_menu.css 위에 얹어서 사용합니다.
 * 적용: 레이아웃 JSP에 <link> 한 줄 추가
 *   <link rel="stylesheet" href="/static/common/aircommand/aircommand-glass.css">
 */

/* ===== 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(251,146,60,0.35) 0%, rgba(251,146,60,0.12) 100%) !important;
  background-color: transparent !important;
  backdrop-filter: blur(var(--ac-blur)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--ac-blur)) saturate(1.6) !important;
  border: 0 !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: #fb923c !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. 아이콘 · pill 크기
   =========================================================== */
/* 우측 버튼(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: #b6533a !important;
  border: 0 !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;
}

/* 아이콘 통합 — 서비스별 core_context_menu.css 차이 무시 */
.map-context-half-item .pos-1 .map-context-half-icon {
  background-image: url('ico/ico-common-01.svg') !important;
}
.map-context-half-item .pos-2 .map-context-half-icon {
  background-image: url('ico/ico-common-02.svg') !important;
}
.map-context-half-button.pos-3::before {
  background-color: #b6533a !important;
  background-image: url('ico/ico-common-03.svg') !important;
}
.map-context-half-item .pos-4 .map-context-half-icon {
  background-image: url('ico/ico-common-04.svg') !important;
}
.map-context-half-item .pos-5 .map-context-half-icon {
  background-image: url('ico/ico-common-05.svg') !important;
}

.map-context-half-item:nth-child(3) .map-context-half-button::before {
  border: 0 !important;
}

/* ===========================================================
   6. 호버
   =========================================================== */
.map-context-half-item:hover .map-context-half-button-inner {
  background: linear-gradient(135deg, rgba(251,146,60,0.45) 0%, rgba(251,146,60,0.18) 100%) !important;
  border: 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 16px rgba(251,146,60,0.2), inset 0 1px 0 rgba(255,255,255,0.25) !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: 0 !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: #ffffff !important;
}

.map-context-half-item.active .map-context-half-icon {
  border: 0 !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. 핀 이미지 글로우 + 펄스
   =========================================================== */
.map-context-pin-image-area {
  background: linear-gradient(135deg, rgba(251,146,60,0.30) 0%, rgba(251,146,60,0.10) 100%) !important;
  backdrop-filter: blur(12px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-top-color: rgba(255,255,255,0.35) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), 0 0 16px rgba(251,146,60,0.1), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transform: scale(0.8) !important;
  overflow: visible !important;
}

.map-context-pin-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 원본 48x48 → 1/3 확대: 64x64, top도 비례 조정 */
  width: 64px !important;
  height: 64px !important;
  top: -57px !important;
}

/* 기존 JSP DOM: .map-context-pin-image > img — 아이콘 자체가 구슬 디자인이므로 그대로 표시 */
.map-context-pin-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.map-context-pin-image-area::before {
  display: none !important;
}

/* 기존 JSP DOM용 pinlet — .ac-pinlet-glass 없을 때 ::after로 대체 */
.map-context-pin-image-area::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -45px;
  width: 100px;
  height: 125px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 40% at 35% 25%, rgba(255,255,255,0.7) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(220,220,225,0.5) 45%, rgba(200,200,205,0.6) 100%);
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  border: 0;
  border-radius: 0;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.1),
    0 4px 12px rgba(0,0,0,0.2);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: url('/static/sgp_thm/images/common/ico/ico-pinlet-marker.svg');
  mask-image: url('/static/sgp_thm/images/common/ico/ico-pinlet-marker.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.map-context-pin-image-area.no-glass {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.map-context-pin-image-area.no-glass::after {
  display: none !important;
}
.map-context-pin-image-area.no-glass .map-context-pin-image {
  top: -25px !important;
}
.map-context-menu-wrapper.half.marker-active .map-context-pin-image-area.no-glass img {
  animation: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)) !important;
}

.ac-pinlet-glass {
  position: absolute;
  left: 50%;
  bottom: -45px;
  width: 100px;
  height: 125px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 40% at 35% 25%, rgba(255,255,255,0.7) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(220,220,225,0.5) 45%, rgba(200,200,205,0.6) 100%);
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  border: 0;
  border-radius: 0;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.6),
    inset 0 -3px 6px rgba(0,0,0,0.1),
    0 4px 12px rgba(0,0,0,0.2);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: url('/static/sgp_thm/images/common/ico/ico-pinlet-marker.svg');
  mask-image: url('/static/sgp_thm/images/common/ico/ico-pinlet-marker.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 핀 글로우 펄스 (진동 대체) */
.map-context-menu-wrapper.half.marker-active .map-context-pin-image img {
  animation: pinPulse 2s ease-in-out 0.5s infinite !important;
}

@keyframes pinPulse {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(251,146,60,0.3)); }
  50%      { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 28px rgba(251,146,60,0.7)) drop-shadow(0 0 48px rgba(251,146,60,0.25)); }
}

/* ===========================================================
   12. 인천 CI 랜드마크 (.ac-landmark DOM이 있는 페이지에서만 동작)
   =========================================================== */
.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));
}

/* 260323 */
#airCommand  {
	touch-action: none;
	-ms-touch-action: none;
}