/* Map Select Panel Styles */




#map-select-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 280px;
  max-height: calc(100vh - 40px);
  background: transparent;
  border-radius: 0;
  color: white;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: visible;
  gap: 10px;
}

@media screen and (max-width: 1200px) {
  #map-select-panel {
    max-height: calc(70vh - 40px);
  }
}


/* 탭 */
#map-tabs {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 10px;
  background: transparent;
}

.map-tab {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  background-color: transparent;
  /* 이미지 비율 유지 (가로로 긴 이미지) */
  aspect-ratio: 4 / 1;
  filter: brightness(0.5);
}

/* 배경 이미지는 JavaScript에서 동적으로 설정됨 */

.map-tab span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
}

.map-tab:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.map-tab.active {
  filter: brightness(1.2);
  transform: scale(1.05);
}

/* active 상태가 아닐 때 호버 효과 */
.map-tab:not(.active):hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* active 상태일 때 호버 효과 */
.map-tab.active:hover {
  transform: scale(1.08);
  filter: brightness(1.3);
}

.map-tab[data-map-id="palace"] {
  scale: 125%;
}

/* 메멘토스 탭 이미지 크기 조정 */
.map-tab[data-map-id="mementoes"] {
  background-size: 90%;
}

/* 팰리스 탭 글씨 위치 - 아래로 1% 이동 */
.map-tab[data-map-id="palace"] span {
  transform: translate(-50%, calc(-50% + 10%)) rotate(-5deg);
  
}

/* 메멘토스 탭 글씨 위치 - 왼쪽으로 5% 이동 */
.map-tab[data-map-id="mementoes"] span {
  transform: translate(calc(-50% - 30%), -50%) rotate(1deg);
  font-size: 20px;
}

/* 메멘토스 탭 호버 효과 */
.map-tab[data-map-id="mementoes"]:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* 카테고리 드롭다운 */
#category-select-container {
  padding: 15px 10px;
  border-bottom: 1px solid #333;
}

/* 커스텀 카테고리 드롭다운 */
.custom-category-select {
  position: relative;
  width: 100%;
  margin-top: 10px;
  z-index: 2000;
}

.selected-category-option {
  width: 100%;
  padding: 10px 0px;
  padding-right: 10px; /* 화살표 공간 확보 */
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s ease;
  position: relative;
}

.selected-category-option:hover {
  background: #2a2a2a;
}

.selected-category-option .category-icon {
  width: auto;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.selected-category-option span {
  flex: 1;
  min-width: 0; /* 텍스트 오버플로우 방지 */
}

.dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.2s ease;
}

.custom-category-select:has(.category-options-container[style*="block"]) .dropdown-arrow::before {
  transform: rotate(180deg);
}

.category-options-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #1a1a1a;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: none;
}

.category-option {
  padding: 10px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
  font-size: 16px;
  font-weight: 600;
}

.category-option:hover {
  background: #2a2a2a;
}

.category-option .category-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.category-option span {
  flex: 1;
}

/* 맵 리스트 컨테이너 */
#map-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-top: 10px;
}

#map-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 맵 아이템 스타일 - 배경과 텍스트 분리 */
.map-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  margin-bottom: 0;
  overflow: visible;
}


/* 맵 아이템 배경 폴리곤 (검정) - 맨 뒤 */
.map-item-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000cc;
  z-index: 1;
  pointer-events: none;
}

/* 각 맵 아이템 배경에 서로 다른 폴리곤 모양 적용 (0-2%, 98-100% 범위 내) */
.map-item:nth-child(1) .map-item-bg {
  clip-path: polygon(0% 2%, 99% 11%, 95% 95%, 2% 94%);
}

.map-item:nth-child(2) .map-item-bg {
  clip-path: polygon(1% 1%, 98% 10%, 96% 96%, 1% 95%);
}

.map-item:nth-child(3) .map-item-bg {
  clip-path: polygon(0% 2%, 100% 9%, 98% 97%, 2% 94%);
}

.map-item:nth-child(4) .map-item-bg {
  clip-path: polygon(2% 0%, 98% 11%, 96% 95%, 0% 96%);
}

.map-item:nth-child(5) .map-item-bg {
  clip-path: polygon(0% 1%, 99% 8%, 97% 98%, 2% 99%);
}

.map-item:nth-child(6) .map-item-bg {
  clip-path: polygon(1% 2%, 98% 10%, 95% 95%, 2% 97%);
}

.map-item:nth-child(7) .map-item-bg {
  clip-path: polygon(0% 1%, 100% 11%, 96% 96%, 1% 94%);
}

.map-item:nth-child(8) .map-item-bg {
  clip-path: polygon(2% 2%, 98% 9%, 98% 97%, 0% 95%);
}

.map-item:nth-child(9) .map-item-bg {
  clip-path: polygon(0% 2%, 99% 8%, 95% 98%, 2% 95%);
}

.map-item:nth-child(10) .map-item-bg {
  clip-path: polygon(1% 0%, 98% 12%, 96% 95%, 0% 96%);
}

/* 10개 이상인 경우 반복 */
.map-item:nth-child(n+11) .map-item-bg {
  clip-path: polygon(0% 2%, 99% 11%, 95% 95%, 2% 94%);
}

.map-item:hover .map-item-bg {
  background-color: rgb(33, 33, 33);
}

.map-item.active {
  position: relative;
}

/* 활성화된 메뉴의 빨간 폴리곤 레이어 - 패널에 추가되고 RAF로 위치 추적 */
.red-polygon-layer {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.75);
  animation: subtle-liquid 2s infinite linear;
  z-index: 1001;
  pointer-events: none;
  /* 검정 배경(1) < 빨간 폴리곤(1001) < 글씨(1002) */
}

/* 서브메뉴용 빨간 폴리곤 - 흰색 배경에서 더 진하게 */
.red-polygon-layer--sub {
  background-color: rgba(255, 0, 0, 0.85);
}


.map-item span {
  position: relative;
  z-index: 1002;
  color: #ffffff;
  font-weight: normal;
}

.map-item.active span {
  font-weight: 600;
  /* 글씨가 빨간 폴리곤 위에 오도록 (z-index: 1002) */
}

.map-item span {
  font-size: 14px;
  margin-left: 10px;
}

.map-item.has-submaps {
  padding-right: 50px;
}

.map-item-toggle {
  position: absolute;
  right: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 1003;
  pointer-events: none;
}

.map-item-toggle::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #aaa;
}

.map-item.expanded .map-item-toggle {
  transform: rotate(90deg);
}

/* 하위 메뉴 리스트 - 하위 메뉴에 붙어있고 가로폭 3%~96% */
.map-sub-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, margin-top 0.3s ease-in-out, padding 0.3s ease-in-out, background 0.3s ease-in-out;
  background: transparent;
  width: 89%;
  margin-left: 5%;
  margin-top: 0;
  padding: 0;
  display: block;
  /* position을 제거하여 stacking context를 만들지 않음 */
}

.map-item.expanded + .map-sub-list,
.map-sub-item.expanded + .map-sub-list {
  max-height: 2000px;
  margin-top: -10px;
  background: rgb(188 188 188);
  padding: 8px;
  border-radius: 0px;
  overflow: visible;
}

/* 하위 맵 아이템 - 연한 회색 배경, 활성화 시 빨간 폴리곤 */
.map-sub-item {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 48px;
  color: #1e1e1e;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  margin-bottom: 4px;
  border-radius: 2px;
  overflow: visible;
}

.map-sub-item:last-child {
  margin-bottom: 0;
}

.map-sub-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.map-sub-item.active {
  background-color: transparent;
  color: #ffffff;
  position: relative;
  z-index: 1002;
  /* 빨간 폴리곤(1001)보다 높게 설정 */
}

/* 활성화된 하위 메뉴의 빨간 폴리곤 레이어는 .red-polygon-layer 클래스로 공통 스타일 사용 */

.map-sub-item.active span {
  position: relative;
  z-index: 1003;
  font-weight: 600;
  /* 글씨가 빨간 폴리곤 위에 오도록 */
  transform: translateZ(0);
}

.map-sub-item span {
  position: relative;
  z-index: 1003;
  font-size: 13px;
  margin-left: 0;
  color: #111;
  transform: translateZ(0);
}

.map-sub-item.has-submaps {
  padding-right: 50px;
}

/* 활성 애니메이션 */
@keyframes subtle-liquid {
  0% { clip-path: polygon(0% 2%, 99% 9%, 94% 99%, 4% 94%);}
  10% { clip-path: polygon(1% 1%, 98% 7%, 93% 100%, 5% 95%);}
  20% { clip-path: polygon(-1% 3%, 100% 5%, 95% 98%, 3% 93%);}
  30% { clip-path: polygon(0% 3%, 98% 2%, 93% 96%, 5% 95%);}
  40% { clip-path: polygon(1% 1%, 99% -1%, 95% 98%, 4% 93%);}
  50% { clip-path: polygon(0% 0%, 100% 2%, 93% 100%, 3% 95%);}
  60% { clip-path: polygon(-1% 3%, 98% 1%, 94% 98%, 5% 94%);}
  70% { clip-path: polygon(1% 2%, 99% -1%, 95% 96%, 4% 95%);}
  80% { clip-path: polygon(0% 1%, 100% 2%, 93% 98%, 3% 93%);}
  90% { clip-path: polygon(-1% 3%, 98% 4%, 94% 100%, 5% 95%);}
  100% { clip-path: polygon(0% 2%, 99% 7%, 94% 99%, 4% 94%);}
}

/* 반응형 - 1200px 이하에서 모바일 UI */
@media screen and (max-width: 1200px) {
  /* 모바일에서 맵 선택 패널 숨김 (바텀시트로만 동작) */
  #map-select-panel {
    display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    padding: 0;
  }

  /* 바텀시트 모드 */
  #map-select-panel.mobile-bottomsheet {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }

  #map-select-panel.mobile-bottomsheet .bottomsheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
  }

  /* 탭 스타일 조정 */
  #map-select-panel.mobile-bottomsheet #map-tabs {
    flex-direction: row;
    padding: 0;
    gap: 8px;
  }

  #map-select-panel.mobile-bottomsheet .map-tab {
    flex: 1;
    aspect-ratio: 3 / 1;
    font-size: 14px;
  }

  #map-select-panel.mobile-bottomsheet .map-tab[data-map-id="palace"] {
    scale: 100%;
  }

  #map-select-panel.mobile-bottomsheet .map-tab[data-map-id="palace"] span {
    transform: translate(-50%, calc(-50% + 5%)) rotate(-5deg);
    font-size: 14px;
  }

  #map-select-panel.mobile-bottomsheet .map-tab[data-map-id="mementoes"] {
    background-size: 80%;
  }

  #map-select-panel.mobile-bottomsheet .map-tab[data-map-id="mementoes"] span {
    transform: translate(calc(-50% - 20%), -50%) rotate(1deg);
    font-size: 14px;
  }

  /* 카테고리 드롭다운 - 빨간 폴리곤보다 위에 */
  #map-select-panel.mobile-bottomsheet #category-select-container {
    padding: 12px 0;
    border-bottom: none;
    position: relative;
    z-index: 2010;
  }

  #map-select-panel.mobile-bottomsheet .custom-category-select {
    z-index: 2010;
  }

  #map-select-panel.mobile-bottomsheet .selected-category-option {
    font-size: 16px;
    padding: 12px;
  }

  #map-select-panel.mobile-bottomsheet .selected-category-option .category-icon {
    height: 36px;
  }

  #map-select-panel.mobile-bottomsheet .category-options-container {
    max-height: 200px;
    z-index: 2011;
  }

  /* 맵 리스트 */
  #map-select-panel.mobile-bottomsheet #map-list-container {
    max-height: calc(70vh - 200px);
    overflow-y: auto;
    margin-top: 8px;
    padding: 0;
    padding-bottom: 100px; /* 하단 플로팅 버튼과 겹치지 않도록 */
  }

  #map-select-panel.mobile-bottomsheet .map-item {
    padding: 10px 16px;
  }

  #map-select-panel.mobile-bottomsheet .map-item span {
    font-size: 13px;
    margin-left: 8px;
  }

  #map-select-panel.mobile-bottomsheet .map-sub-item {
    padding: 10px 16px 10px 40px;
  }

  #map-select-panel.mobile-bottomsheet .map-sub-item span {
    font-size: 12px;
  }

  #map-select-panel.mobile-bottomsheet .map-sub-list {
    width: 92%;
    margin-left: 4%;
  }

  /* 모바일 z-index 순서: 배경(1) < 빨간 폴리곤(2) < 글씨(3) */
  /* map-item에 z-index를 설정하면 stacking context가 생성되어 문제 발생 */

  #map-select-panel.mobile-bottomsheet .map-item-bg {
    z-index: 1;
  }

  #map-select-panel.mobile-bottomsheet .red-polygon-layer {
    z-index: 2;
  }

  #map-select-panel.mobile-bottomsheet .map-item span {
    position: relative;
    z-index: 3;
  }

  #map-select-panel.mobile-bottomsheet .map-sub-item span {
    position: relative;
    z-index: 3;
  }

  #map-select-panel.mobile-bottomsheet .map-item-toggle {
    z-index: 3;
  }
}