/* Legacy-like popup overlay - z-index를 더 높게 설정 */
#pop-black { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.9); 
  display: none; 
  align-items: center; 
  justify-content: center; 
  z-index: 99999; /* 매우 높은 값으로 변경 */
}
#pop-black.is-open { display: flex; }
#pop-black .pop.frame.video { 
  width: min(90vw, 1280px); 
  aspect-ratio: 16 / 9; 
  background: #000; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative;
  z-index: 100000; /* 더 높은 값 */
}
#pop-black .iframe-wrap { width: 100%; height: 100%; }
#pop-black .video-area { width: 100%; height: 100%; }
/* YouTube Popup (legacy-like) */
.youtube-popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 10000; pointer-events: none; }
.youtube-popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.youtube-popup-overlay { position: absolute; inset: 0; }
.youtube-popup-content { position: relative; width: min(90vw, 1280px); aspect-ratio: 16 / 9; background: #000; display: flex; align-items: center; justify-content: center; }
.youtube-popup-content .iframe-wrap { width: 100%; height: 100%; }
.youtube-popup-content .iframe-wrap .video-area { width: 100%; height: 100%; }
.youtube-popup-close { position: absolute; top: -40px; right: 0; width: 40px; height: 40px; background: transparent; border: none; color: #fff; font-size: 36px; cursor: pointer; }
/* Base Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 16px; }
body { margin: 0; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; overflow: hidden; }

/* Fixed Top Nav - fixed at top */
.navbar { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  width: 100vw; 
  height: 8vh; 
  z-index: 100; 
  display: block; 
  pointer-events: none; 
  overflow: visible; /* 드롭다운(공유 바) 잘림 방지 */
}

.navbar-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible; /* 드롭다운/슬라이더 잘림 방지 */
}

.navbar-background img {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.navbar-content {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2vw;
  pointer-events: auto;
  overflow: visible; /* 내부 요소 드롭다운 노출 보장 */
}

.navbar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.navbar-left img {
  height: auto;
  max-height: 3.5vh; /* 네비 높이에 맞춘 최대 높이만 제한 */
  width: auto; /* 폭 자동 → 원본 비율 유지 */
  flex-shrink: 0; /* 플렉스 수축 방지(가로로 눌림 방지) */
  display: block; /* 인라인 이미지 줄 간격 영향 제거 */
  object-fit: contain; /* 원본 비율 유지 */
}

.navbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-menu {
  display: flex;
  gap: 3vw;
  align-items: center;
}

.menu-item {
  color: #ffffff;
  text-decoration: none;
  font-family: 'SUITE', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  transition: color 0.3s ease;
  cursor: pointer;
  position: relative;
  padding-bottom: 0px; /* 가로선을 위한 공간 확보 */
  text-align: center; /* 텍스트 중앙정렬 */
  display: block; /* text-align이 적용되도록 */
}

.menu-item:hover,
.menu-item.active {
  color: rgb(255, 222, 150);
}

/* 슬라이딩 가로선 컨테이너 */
.navbar-menu {
  display: flex;
  gap: 3vw;
  align-items: center;
  position: relative;
}

/* 슬라이딩 가로선 */
.menu-slider {
  position: absolute;
  bottom: -50%;
  height: 3px;
  width: 100px;
  background-color: rgb(255, 222, 150);
  transition: left 0.3s ease;
  z-index: 3;
  border-radius: 2px;
}

.navbar-right {
  flex: 0 0 auto;
  display: flex;
  gap: 0.8vw;
  align-items: center;
}

/* Share panel wrapper to anchor the dropdown under the share icon */
.share-wrapper {
  position: relative;
  display: inline-block;
}

/* Hidden by default; toggled via JS */
.share-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  display: none;
  pointer-events: auto;
  z-index: 4;
}

.share-panel.is-open {
  display: block;
}

.share-panel-img {
  display: block;
  width: 46px; /* 이미지 실제 폭에 맞게 필요시 수정 */
  height: auto;
}

/* Copy success toast (appears next to the copy button) */
.share-panel .share-toast {
  position: absolute;
  left: 56px; /* 패널 이미지(46px) 오른쪽 여백 포함 위치 */
  top: 6px; /* 상단(복사 버튼 영역)에 맞춰 노출 */
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: 'SUITE', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-weight: 600;
  font-size: 1.25rem; /* 메뉴바 폰트 크기와 동일 */
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
  z-index: 1;
}

.share-panel .share-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Three vertical hotspots overlaying the image */
.share-hotspot {
  position: absolute;
  left: 0;
  width: 100%;
  height: 32%;
}

.share-copy { top: 4%; }
.share-facebook { top: 36%; }
.share-x { top: 68%; }

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vh;
  transition: opacity 0.3s ease;
}

.social-icon:hover {
  opacity: 0.8;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* One Page Scroll Layout */
.op-container { position: relative; width: 100%; height: 100vh; }
.op-container .op-inner { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.op-section { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.section-layer.media, .section-layer.content { position: absolute; inset: 0; }
/* .section-layer.media img, .section-layer.media video { width: 100%; height: 100%; object-fit: contain; } */
/* Section 1 video - cover with center alignment */
.section-1 .section-layer.media video { 
  width: 100vw; 
  height: 100vh;  
  position: relative;
  object-fit: cover; 
  object-position: bottom;
}
/* Section 3, 4 & 5 background images - cover */
.section-3 .section-layer.media .bg,
.section-4 .section-layer.media img,
.section-5 .section-layer.media img { 
  object-fit: cover !important;
  object-position: center center;
}
.section-3 .section-layer.media { position: absolute; z-index: 94; }
.section-3 .section-layer.media .bg { 
  position: absolute; 
  inset: 0; 
  opacity: 1; 
  transition: opacity .2s ease;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center;
}
.section-3 .section-layer.media .bg-off { opacity: 1; }
.section-3.is-arcanium .section-layer.media .bg-arcanium { opacity: 1; }
.section-3.is-aestheria .section-layer.media .bg-aestheria { opacity: 1; }
/* Circle images for hover effects - Base styles */
.section-3 .section-layer.media .circle { 
  position: absolute; 
  opacity: 0; 
  transition: opacity .2s ease;
  object-fit: contain;
}

/* Arcanium Group - Fixed as single image unit */
.section-3 .arcanium-group {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: min(35vw, 60vh);
  height: min(35vw, 60vh);
  top: 5vh;
  left: 25vw;
  z-index: 1;
  transform-origin: top left;
  contain: layout style paint;
  overflow: visible;
}

/* 그룹 내 기본 이미지 스타일 */
.section-3 .arcanium-group .universe {
  position: absolute;
  /* 반응형 때문에 이미지가 늘어나는 것을 방지 */
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  /* 부모의 크기를 정확히 따르도록 */
  display: block;
}

/* Arcanium Icon - 개별 위치 조정 가능 */
.section-3 .arcanium-group .arcanium-icon {
  top: 40%;
  left: 15%;
  width: 20%;
  height: 20%;
  z-index: 2;
  object-fit: contain;
  object-position: center center;
}

/* Arcanium Name Tag - 개별 위치 조정 가능 */
.section-3 .arcanium-group .arcanium-nametag {
  top: -14%;
  left: 22.5%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  object-position: center center;
}

/* Arcanium Off Circle - 개별 위치 조정 가능 */
.section-3 .arcanium-group .arcanium-off-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 1;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

/* Arcanium On Circle - 개별 위치 조정 가능 */
.section-3 .arcanium-group .arcanium-on-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

/* Mantarion Group - Fixed as single image unit */
.section-3 .mantarion-group {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: min(35vw, 60vh);
  height: min(35vw, 60vh);
  top: 40vh;
  left: 10vw;
  z-index: 1;
  transform-origin: top left;
  contain: layout style paint;
  overflow: visible;
}

/* 그룹 내 기본 이미지 스타일 */
.section-3 .mantarion-group .universe {
  position: absolute;
  /* 반응형 때문에 이미지가 늘어나는 것을 방지 */
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  /* 부모의 크기를 정확히 따르도록 */
  display: block;
}

/* Mantarion Icon - 개별 위치 조정 가능 */
.section-3 .mantarion-group .mantarion-icon {
  top: 40%;
  left: 15%;
  width: 20%;
  height: 20%;
  z-index: 2;
  object-fit: contain;
  object-position: center center;
}

/* Mantarion Name Tag - 개별 위치 조정 가능 */
.section-3 .mantarion-group .mantarion-nametag {
  top: 30%;
  left: 23%;
  width: 80%;
  height: 80%;
  z-index: 3;
  object-fit: contain;
  object-position: center center;
}

/* Mantarion Off Circle - 개별 위치 조정 가능 */
.section-3 .mantarion-group .mantarion-off-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 1;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

/* Mantarion On Circle - 개별 위치 조정 가능 */
.section-3 .mantarion-group .mantarion-on-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

/* Aestheria Group - Fixed as single image unit */
.section-3 .aestheria-container {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: min(35vw, 60vh);
  height: min(35vw, 60vh);
  top: 35vh;
  left: 55vw;
  z-index: 1;
  transform-origin: top left;
  contain: layout style paint;
  overflow: visible;
}

/* 그룹 내 기본 이미지 스타일 */
.section-3 .aestheria-container .universe {
  position: absolute;
  /* 반응형 때문에 이미지가 늘어나는 것을 방지 */
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  /* 부모의 크기를 정확히 따르도록 */
  display: block;
}

.section-3 .aestheria-container .aestheria-nametag {
  top: 19%;
  left: 14.5%;
  width: 80%;
  height: 80%;
  z-index: 3;
  object-fit: contain;
  object-position: center center;
}

.section-3 .aestheria-container .aestheria-off-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 1;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

.section-3 .aestheria-container .aestheria-on-circle {
  top: 30%;
  left: 5%;
  width: 40%;
  height: 40%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: contain;
  object-position: center center;
}

/* OFF Circle Images - Default visible state */
.section-3 .section-layer.media .circle-arcanium-off { 
  opacity: 1;
  width: 100.1vw;
  height: 100.1vh;
  object-fit: contain;
}
.section-3 .section-layer.media .circle-aestheria-off { 
  opacity: 1;
  width: 100.1vw;
  height: 100.1vh;
  object-fit: contain;
}

/* ON Circle Images - Hover state with animation */
.section-3 .section-layer.media .circle-arcanium-on { 
  top: 39.25vh; 
  left: 6.15vw; 
  width: 23.95vw; 
  height: 23.95vh;
  object-fit: contain;
}
.section-3 .section-layer.media .circle-aestheria-on { 
  top: 55.85vh; 
  left: 63.75vw; 
  width: 10.95vw; 
  height: 10.95vh;
  object-fit: contain;
}

/* Responsive adjustments - Group scales as single unit */
@media (max-width: 8px) {
  .section-3 .section-layer.media .circle-arcanium-off,
  .section-3 .section-layer.media .circle-aestheria-off {
    width: 100vw;
    height: 100vh;
  }
  
  /* Arcanium group scales as a single unit - no individual scaling */
  /* Note: 크기는 clamp로 이미 제어되고 있어서 transform scale 불필요 */
  /* .section-3 .arcanium-group {
    transform: scale(0.8);
  } */
  
  /* Aestheria elements responsive scaling */
  .section-3 .aestheria-nametag,
  .section-3 .aestheria-off-circle,
  .section-3 .aestheria-on-circle {
    width: clamp(8vw, 20vw, 20vw) !important;
    height: clamp(8vh, 20vh, 20vh) !important;
  }
  
  /* s3-02 hotspot sync with aestheria elements */
  /* .section-3 .s3-hotspot.s3-02 {
    left: 54.9vw !important;
    top: 51vh !important;
    width: clamp(8vw, 20vw, 20vw) !important;
    height: clamp(8vh, 20vh, 20vh) !important;
  } */
  
  .section-3 .section-layer.media .circle-arcanium-on { 
    top: 39.25vh; 
    left: 6.15vw; 
    width: clamp(15vw, 23.95vw, 25vw); 
    height: clamp(15vh, 23.95vh, 25vh);
  }
  
  .section-3 .section-layer.media .circle-aestheria-on { 
    top: 55.85vh; 
    left: 63.75vw; 
    width: clamp(8vw, 10.95vw, 12vw); 
    height: clamp(8vh, 10.95vh, 12vh);
  }
}

@media (max-width: 1024px) {
  /* Arcanium group scales as a single unit */
  /* Note: 크기는 clamp로 이미 제어되고 있어서 transform scale 불필요 */
  /* .section-3 .arcanium-group {
    transform: scale(0.4);
  } */
  
  /* Aestheria elements responsive scaling */
  .section-3 .aestheria-nametag,
  .section-3 .aestheria-off-circle,
  .section-3 .aestheria-on-circle {
    width: clamp(5vw, 8vw, 9vw) !important;
    height: clamp(5vh, 8vh, 9vh) !important;
  }
  
  /* s3-02 hotspot sync with aestheria elements */
  .section-3 .s3-hotspot.s3-02 {
    left: 54.9vw !important;
    top: 51vh !important;
    width: clamp(5vw, 8vw, 9vw) !important;
    height: clamp(5vh, 8vh, 9vh) !important;
  }
  
  .section-3 .section-layer.media .circle-arcanium-on { 
    width: clamp(10vw, 18vw, 20vw); 
    height: clamp(10vh, 18vh, 20vh);
  }
  
  .section-3 .section-layer.media .circle-aestheria-on { 
    width: clamp(5vw, 8vw, 9vw); 
    height: clamp(5vh, 8vh, 9vh);
  }
}

/* State transitions */
.section-3.is-arcanium .section-layer.media .circle-arcanium-off { opacity: 0; }
.section-3.is-arcanium .section-layer.media .circle-arcanium-on { 
  opacity: 1; 
  animation: rotate 10s linear infinite;
}

/* Arcanium Group State transitions - s3-01 hotspot hover */
.section-3.is-arcanium .arcanium-group .arcanium-off-circle { 
  opacity: 0; 
}
.section-3.is-arcanium .arcanium-group .arcanium-on-circle { 
  opacity: 1; 
  animation: rotate 10s linear infinite;
}
.section-3.is-aestheria .section-layer.media .circle-aestheria-off { opacity: 0; }
.section-3.is-aestheria .section-layer.media .circle-aestheria-on { 
  opacity: 1; 
  animation: rotate 10s linear infinite;
}

/* Aestheria State transitions - s3-02 hotspot hover */
.section-3.is-aestheria .aestheria-off-circle { 
  opacity: 0; 
}
.section-3.is-aestheria .aestheria-on-circle { 
  opacity: 1; 
  animation: rotate 10s linear infinite;
}

/* Mantarion State transitions - s3-03 hotspot hover */
.section-3.is-mantarion .mantarion-group .mantarion-off-circle { 
  opacity: 0; 
}
.section-3.is-mantarion .mantarion-group .mantarion-on-circle { 
  opacity: 1; 
  animation: rotate 10s linear infinite;
}

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.section-layer.content { display: flex; align-items: center; justify-content: center; padding-top: 0; }
.section-layer.content.center { flex-direction: column; gap: 24px; }
/* hotspot strip: 1920x110 reference, responsive scale */
.hotspot-strip { position: fixed; top: 0; width: 100vw; height: calc(100vw * (100/1920)); z-index: 90; pointer-events: none; display: flex; align-items: center; justify-content: space-between; }
.hotspot-strip .hotspot-group { position: relative; height: 100%; display: grid; align-items: center; gap: 0; pointer-events: none; }

.hotspot-strip .hotspot { display: block; width: 100%; height: 100%; pointer-events: auto; text-decoration: none; }
/* group layout: 3 independent blocks horizontally spaced with gaps */
.hotspot-strip .group-1 { width: 15%; grid-template-columns: 1fr; }
.hotspot-strip .hotspot-gap-1 { height: 100%; width: 5%; flex-shrink: 0; }
.hotspot-strip .group-2 { width: 60%; grid-template-columns: repeat(5, 1fr); }
.hotspot-strip .hotspot-gap-2 { height: 100%; width: 6%; flex-shrink: 0; }
.hotspot-strip .group-3 { width: 12%; grid-template-columns: repeat(3, 1fr); }
.hotspot-strip .hotspot-gap-3 { height: 100%; width: 2%; flex-shrink: 0; }
/* anchor hit-area visual debugging (commented)
.hotspot { outline: 1px dashed rgba(255,255,255,0.25); }
*/

/* Section 1 specifics */
.section-1 .section-layer.content { position: relative; }
.section-1 .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 0%); z-index: 1; width: 100vw; height: auto; }
.section-1 .play-btn { 
  position: absolute; 
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; 
  text-decoration: none;
  transition: none; /* 애니메이션 제거 */
}

.section-1 .play-btn:hover {
  opacity: 1; /* 호버 시 추가 효과 제거 */
  transform: translate(-50%, -50%); /* scale 제거 */
}

.section-1 .play-btn-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  transition: none; /* 애니메이션 제거 */
}

/* Section 2 specifics */
.section-2 .section-layer.media { position: absolute; z-index: 1; }
.section-2 .char-bg { 
  width: 100vw; 
  height: 100vh; 
  object-fit: cover; 
  object-position: center center;
}
.section-2 .section-layer.content { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 2;
  width: 100%;
  height: 100%;
}
.section-2 .char-voice-hotspot {
  position: absolute;
  top: 30vh;
  left: 6vw;
  width: 10vw;
  height: 10vh;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  display: block;
}

.section-2 .char-list { 
  left: 7.5%; 
  top: 55%; 
  transform: translateY(-50%); 
  z-index: 3; 
  width: 5vw; 
  height: auto; 
  pointer-events: none; 
}
.section-2 .char-illust { 
  position: absolute; 
  bottom: 0;
  right: 0;
  height: 100vh;
  z-index: 2; 
  object-fit: cover;
  /* Gradient overlay for left 40% transparency */
  /* mask: linear-gradient(to right, transparent 0%, transparent 50%, black 60%, black 100%);
  -webkit-mask: linear-gradient(to right, transparent 0%, transparent 50%, black 60%, black 100%); */
}

/* Character image animation states */
.section-2 .char-illust.slide-out {
  transform: translateX(0) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

.section-2 .char-illust.slide-in {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: all 0.8s ease-in-out !important;
}

.section-2 .char-illust.slide-in.active {
  transform: translateX(0) !important;
  opacity: 1 !important;
  transition: all 0.8s ease-in-out !important;
}

/* Character Info Container */
.character-info-container {
  position: absolute;
  transform: translate(-73%, -80%);
  width: 29vw;
  height: 17vh;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25%;
}

/* Character Info Elements */
.character-info-container .char-title,
.character-info-container .char-line,
.character-info-container .char-info {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateX(-20%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Character Info Animation States */
.character-info-container .char-title.animate {
  opacity: 1;
  transform: translateX(0);
}

.character-info-container .char-line.animate {
  opacity: 1;
  transform: translateX(0);
}

.character-info-container .char-info.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Character Info Fade Out States */
.character-info-container .char-title.fade-out {
  opacity: 0 !important;
  transform: translateX(0) !important;
  transition: opacity 0.3s ease-out !important;
}

.character-info-container .char-line.fade-out {
  opacity: 0 !important;
  transform: translateX(0) !important;
  transition: opacity 0.3s ease-out !important;
}

.character-info-container .char-info.fade-out {
  opacity: 0 !important;
  transform: translateX(0) !important;
  transition: opacity 0.3s ease-out !important;
}

/* Character List Container */
.character-list-container {
  position: absolute;
  transform: translate(-41.5vw, 13%);
  width: 10%;
  height: calc(1000 / 1080 * 100vh);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Character List */
.character-list {
  width: 10vw;
  height: 64vh;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  display: flex;
  flex-direction: column;
}

.character-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Character Item */
.character-item {
  width: 45%;
  height: 16.75%;
  cursor: pointer;
  border-radius: 50%;
  overflow: visible;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
  position: relative;
}

.character-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-item:hover {
  border-color: rgba(255, 255, 255, 0.5);
  z-index: 10;
}

.character-item.active {
  border-color: transparent;
  box-shadow: none;
  z-index: 10;
}

/* Scroll Buttons */
.char-scroll-btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.char-scroll-btn img {
  width: 2vw;
}


/* Section 3 specifics */
.section-3 .map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; object-fit: cover; }
.section-3 .pin { position: absolute; left: 51%; top: 44%; width: clamp(18px, 1.4vw, 36px); height: auto; animation: pulse 1.6s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }

/* Section 3 independent hotspots (two separate objects) */
.section-3 .section-layer.content { z-index: 95; }
.section-3 .s3-hotspot { position: absolute; top: 50%; transform: translateY(-50%); z-index: 96; pointer-events: none; }
.section-3.is-mantarion-open .s3-hotspot.s3-01,
.section-3.is-mantarion-open .s3-hotspot.s3-02 { visibility: hidden; pointer-events: none; }

/* 기본적으로 .s3-hotspot 내부의 .hotspot 앵커에만 클릭 전달 */
.section-3 .s3-hotspot .hotspot { pointer-events: auto; }
.section-3 .s3-hotspot.s3-01 {
  left: 25vw;
  top: 30vh;
  transform: translateY(-50%);
  display: block;
  width: 30vw;
  height: 35vh;
  border-radius: 999px;
  text-decoration: none;
  z-index: 4;
}
.section-3 .s3-hotspot.s3-02 {     
  left: 57vw;
  top: 67vh;
  transform: translateY(-50%);
  display: block;
  width: 25vw;
  height: 25vh;
  border-radius: 999px;
  text-decoration: none;
  z-index: 4;
}
.section-3 .s3-hotspot.s3-03 {    
  left: 10vw;
  top: 73vh;
  transform: translateY(-50%);
  display: block;
  width: 30vw;
  height: 35vh;
  border-radius: 999px;
  text-decoration: none;
  z-index: 4;
}
.section-3 .s3-hotspot.s3-02-01 { left: 38vw; top: 45vh; transform: translateY(-50%); display: block; width: 18vw; height: 28vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-02 { left: 17vw; top: 61vh; transform: translateY(-50%); display: block; width: 16vw; height: 32vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-03 { left: 63vw; top: 34vh; transform: translateY(-50%); display: block; width: 22vw; height: 24vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-04 { left: 56vw; top: 70vh; transform: translateY(-50%); display: block; width: 19vw; height: 31vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-05 { left: 35.5vw; top: 73vh; transform: translateY(-50%); display: block; width: 4vw; height: 12vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-06 { left: 48vw; top: 77vh; transform: translateY(-50%); display: block; width: 4vw; height: 12vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-07 { left: 81vw; top: 62vh; transform: translateY(-50%); display: block; width: 4vw; height: 12vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-08 { left: 34vw; top: 35vh; transform: translateY(-50%); display: block; width: 4vw; height: 12vh; border-radius: 999px; text-decoration: none; z-index: 7; }
.section-3 .s3-hotspot.s3-02-09 { left: 54vw; top: 29vh; transform: translateY(-50%); display: block; width: 4vw; height: 12vh; border-radius: 999px; text-decoration: none; z-index: 7; }

/* Arcanium sub-hotspots (s3-01-01~03) - 개별 위치 조절 가능 */
.section-3 .s3-hotspot.s3-01-01 { 
  left: 8.2vw; 
  top: 34.5vh; 
  transform: translateY(-50%); 
  display: none; 
  width: 8vw; 
  height: 8vw; 
  border-radius: 50%; 
  text-decoration: none; 
  z-index: 97; 
}

.section-3 .s3-hotspot.s3-01-02 { 
  left: 8.2vw; 
  top: 52vh; 
  transform: translateY(-50%); 
  display: none; 
  width: 8vw; 
  height: 8vw; 
  border-radius: 50%; 
  text-decoration: none; 
  z-index: 97; 
}

.section-3 .s3-hotspot.s3-01-03 { 
  left: 8.2vw; 
  top: 68.5vh; 
  transform: translateY(-50%); 
  display: block; 
  width: 8vw; 
  height: 8vw; 
  border-radius: 50%; 
  text-decoration: none; 
  z-index: 97; 
}

/* 개별 위치 조절을 위한 추가 클래스들 */
.section-3 .s3-hotspot.s3-01-01.position-1 { left: 10vw; top: 25vh; }
.section-3 .s3-hotspot.s3-01-01.position-2 { left: 20vw; top: 35vh; }
.section-3 .s3-hotspot.s3-01-01.position-3 { left: 15vw; top: 30vh; }

.section-3 .s3-hotspot.s3-01-02.position-1 { left: 10vw; top: 40vh; }
.section-3 .s3-hotspot.s3-01-02.position-2 { left: 20vw; top: 50vh; }
.section-3 .s3-hotspot.s3-01-02.position-3 { left: 15vw; top: 45vh; }

.section-3 .s3-hotspot.s3-01-03.position-1 { left: 10vw; top: 55vh; }
.section-3 .s3-hotspot.s3-01-03.position-2 { left: 20vw; top: 65vh; }
.section-3 .s3-hotspot.s3-01-03.position-3 { left: 15vw; top: 60vh; }

/* 크기 조절을 위한 클래스들 */
.section-3 .s3-hotspot.s3-01-01.size-small { width: 3vw; height: 3vw; }
.section-3 .s3-hotspot.s3-01-01.size-medium { width: 4vw; height: 4vw; }
.section-3 .s3-hotspot.s3-01-01.size-large { width: 5vw; height: 5vw; }

.section-3 .s3-hotspot.s3-01-02.size-small { width: 3vw; height: 3vw; }
.section-3 .s3-hotspot.s3-01-02.size-medium { width: 4vw; height: 4vw; }
.section-3 .s3-hotspot.s3-01-02.size-large { width: 5vw; height: 5vw; }

.section-3 .s3-hotspot.s3-01-03.size-small { width: 3vw; height: 3vw; }
.section-3 .s3-hotspot.s3-01-03.size-medium { width: 4vw; height: 4vw; }
.section-3 .s3-hotspot.s3-01-03.size-large { width: 5vw; height: 5vw; }

/* Arcanium popup이 열릴 때 sub-hotspots 표시 */
.section-3.is-arcanium-open .s3-hotspot.s3-01-01,
.section-3.is-arcanium-open .s3-hotspot.s3-01-02,
.section-3.is-arcanium-open .s3-hotspot.s3-01-03 { display: block; }
.section-3 .s3-hotspot .hotspot { display: block; width: 100%; height: 100%; border-radius: 999px; text-decoration: none; pointer-events: auto; }
/* Hide s3-01, s3-02 when map popup is open */
.section-3.is-map-open .s3-hotspot.s3-01,
.section-3.is-map-open .s3-hotspot.s3-02 { visibility: hidden; pointer-events: none; }
/* Show s3-02-01~09 only when map popup is open */
.section-3 .s3-hotspot.s3-02-01,
.section-3 .s3-hotspot.s3-02-02,
.section-3 .s3-hotspot.s3-02-03,
.section-3 .s3-hotspot.s3-02-04,
.section-3 .s3-hotspot.s3-02-05,
.section-3 .s3-hotspot.s3-02-06,
.section-3 .s3-hotspot.s3-02-07,
.section-3 .s3-hotspot.s3-02-08,
.section-3 .s3-hotspot.s3-02-09 { visibility: hidden; pointer-events: none; }
.section-3.is-map-open .s3-hotspot.s3-02-01,
.section-3.is-map-open .s3-hotspot.s3-02-02,
.section-3.is-map-open .s3-hotspot.s3-02-03,
.section-3.is-map-open .s3-hotspot.s3-02-04,
.section-3.is-map-open .s3-hotspot.s3-02-05,
.section-3.is-map-open .s3-hotspot.s3-02-06,
.section-3.is-map-open .s3-hotspot.s3-02-07,
.section-3.is-map-open .s3-hotspot.s3-02-08,
.section-3.is-map-open .s3-hotspot.s3-02-09 { visibility: visible; pointer-events: auto; }
/* Optional debug outline
.section-3 .s3-hotspot .hotspot { outline: 1px dashed rgba(255,255,255,0.25); }
*/

/* Section 3 popups */
.section-3 .s3-popup { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%) scale(0.98); 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .25s ease, transform .25s ease; 
}
.section-3 .s3-popup img { 
  width: 100vw; 
  height: 100vh; 
  display: block; 
  object-fit: cover; 
  object-position: center center; 
}
.section-3 .s3-popup.is-open { 
  opacity: 1; 
  transform: translate(-50%, -50%) scale(1); 
  pointer-events: auto; 
}
.section-3 .popup-map { z-index: 5; }
.section-3 .popup-arcanium { z-index: 96; }
/* Hover overlay images */
.section-3 .s3-hover-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 6; }
.section-3 .s3-hover-overlay img { width: 100vw; height: 100vh; display: block; object-fit: cover; }
.section-3 .s3-hover-overlay.is-visible { opacity: 1; }

.section-3 .popup-hq { z-index: 8; }
.section-3 .popup-niost { z-index: 8; }
.section-3 .popup-airgate { z-index: 8; } 
.section-3 .popup-commercial { z-index: 8; }
.section-3 .popup-park { z-index: 8; }
.section-3 .popup-mart { z-index: 8; }
.section-3 .popup-gameroom { z-index: 8; }
.section-3 .popup-kitchen { z-index: 8; }
.section-3 .popup-office { z-index: 8; }

/* Section 3 close button - 기본적으로 숨김 */
.section-3 .s3-close-btn { 
  position: absolute; 
  top: 29vh; 
  right: 12vw; 
  width: 3vw; 
  height: 7vh; 
  z-index: 1000; 
  display: none; 
  text-decoration: none; 
  pointer-events: auto;
}

.section-3 .s3-landmark-close-btn { 
  position: absolute;
  top: 29vh;
  right: 12vw;
  width: 3vw;
  height: 7vh;
  z-index: 1000;
  display: none;
  text-decoration: none;
  pointer-events: auto;
}

.section-3 .s3-pin-close-btn { 
  position: absolute;
  top: 25vh;
  right: 12vw;
  width: 5vw;
  height: 9vh;
  z-index: 1000;
  display: none;
  text-decoration: none;
  pointer-events: auto;
}

/* 추가 닫기 버튼 그룹 제어: 모든 팝업의 -02 버튼을 한 번에 조절 */
.section-3 .s3-close-btn[data-id$="-02"],
.section-3 .s3-landmark-close-btn[data-id$="-02"],
.section-3 .s3-pin-close-btn[data-id$="-02"] {
  position: absolute;
  top: 6vh;
  left: 0;
  width: 100vw;
  height: 21vh;
  z-index: 1000;
  display: none;
  text-decoration: none;
  pointer-events: auto;
}

/* 추가 닫기 버튼 그룹 제어: 모든 팝업의 -03 버튼을 한 번에 조절 */
.section-3 .s3-close-btn[data-id$="-03"],
.section-3 .s3-landmark-close-btn[data-id$="-03"],
.section-3 .s3-pin-close-btn[data-id$="-03"] {
  position: absolute;
  top: 76vh;
  left: 0;
  width: 100vw;
  height: 24vh;
  z-index: 1000;
  display: none;
  text-decoration: none;
  pointer-events: auto;
}

/* 맵 닫기 버튼 - 다른 위치 */
.section-3 .s3-map-close-btn {
  position: absolute;
  top: 10vh;
  left: 2vw;
  width: 10vw;
  height: 6vh;
  z-index: 1000;
  display: none;
  text-decoration: none;
  pointer-events: auto;
}

.section-3 .s3-map-close-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 맵 팝업이 열릴 때 맵 닫기 버튼 표시 (s3-map-close-btn) */
.section-3 .popup-map.is-open .s3-map-close-btn {
  display: block;
}

/* 각 팝업이 열릴 때 해당 팝업의 닫기 버튼만 표시 */
.section-3 .popup-arcanium.is-open .s3-close-btn[data-id^="s3-close-arcanium-btn"],
.section-3 .popup-mantarion.is-open .s3-close-btn[data-id^="s3-close-mantarion-btn"],
.section-3 .popup-hq.is-open .s3-landmark-close-btn[data-id^="s3-close-hq"],
.section-3 .popup-niost.is-open .s3-landmark-close-btn[data-id^="s3-close-niost"],
.section-3 .popup-airgate.is-open .s3-landmark-close-btn[data-id^="s3-close-airgate"],
.section-3 .popup-commercial.is-open .s3-landmark-close-btn[data-id^="s3-close-commercial"],
.section-3 .popup-park.is-open .s3-pin-close-btn[data-id^="s3-close-park"],
.section-3 .popup-mart.is-open .s3-pin-close-btn[data-id^="s3-close-mart"],
.section-3 .popup-gameroom.is-open .s3-pin-close-btn[data-id^="s3-close-gameroom"],
.section-3 .popup-kitchen.is-open .s3-pin-close-btn[data-id^="s3-close-kitchen"],
.section-3 .popup-office.is-open .s3-pin-close-btn[data-id^="s3-close-office"] {
  display: block;
}



/* Map Back Button */
.map-back-btn {
  position: absolute;
  display: none; /* 기본적으로 숨김 */
  z-index: 1001; /* 맵 팝업(z-index: 5)보다 높게 설정 */
  top: 30vh; /* 기본 상단 위치 */
  left: 5vw; /* 기본 좌측 위치 */
  width: 10vw; /* 기본 너비 */
  height: auto; /* 비율 유지 */
  text-decoration: none;
  pointer-events: auto; /* 클릭 가능하도록 설정 */
  transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
}

.map-back-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 172px; /* 최대 너비 제한 */
  max-height: 66px; /* 최대 높이 제한 */
  filter: brightness(0.3) contrast(1.5); /* 더 진한 검정색으로 조정 */
}


.map-back-btn:hover {
  opacity: 0.8;
}

/* 맵 팝업만 열려 있을 때 뒤로가기 버튼 표시 */
body.is-map-only-open .map-back-btn {
  display: block;
}

/* Optional debug outline
.section-3 .s3-close-btn { outline: 1px dashed rgba(255,255,255,0.5); }
*/

/* Section 4 specifics */
.section-4 .grid { position: relative; display: block; }

/* Background Filter Overlay */
.section-4 .section-layer.media .bg-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
  display: block;
}

/* List Background - 하단 배경 */
.section-4 .s4-list-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 20vh; /* 리스트 높이(12vh)에 약간 여유 추가 */
  object-fit: fill;
  z-index: 5;
  pointer-events: none;
  display: block;
}

/* Illust List Background - Illust 탭용 하단 배경 */
.section-4 .s4-illust-list-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  object-fit: fill;
  z-index: 5;
  pointer-events: none;
  display: none; /* 기본적으로 숨김 */
}

/* PV 탭에서만 PV 리스트 배경 표시 */
.section-4.is-pv .s4-list-bg {
  display: block;
}
.section-4.is-pv .s4-illust-list-bg {
  display: none;
}

/* Illust 탭에서만 Illust 리스트 배경 표시 */
.section-4.is-illust .s4-list-bg {
  display: none;
}
.section-4.is-illust .s4-illust-list-bg {
  display: block;
}

/* PV Blur Background */
.section-4 .pv-blur-bg {
  position: absolute;
  top: 5vh;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: blur(20px); /* 블러 효과 */
  z-index: 1;
  pointer-events: none;
}

/* Illust Blur Background */
.section-4 .illust-blur-bg {
  position: absolute;
  top: 5vh;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: blur(20px); /* 블러 효과 */
  z-index: 1;
  pointer-events: none;
}

/* Tab Image - PV/Illust tab selector (버튼만의 정적 이미지) */
.section-4 .grid img[alt="tab"] { 
  position: absolute; 
  left: 10vw; /* 왼쪽에서 2vw 위치 */
  top: 20vh; /* 위에서 5vh 위치 */
  width: auto; /* 비율 유지 */
  height: 15vh; /* 높이 기준 고정 */
  z-index: 10; 
  pointer-events: none; 
  object-fit: contain; /* 비율 유지 */
}

/* PV Content Container - main content display */
.section-4 .grid .pv-content-container { 
  position: absolute;
  left: 50%;
  top: 17.5vh;
  transform: translateX(-50%);
  height: 50vh;
  z-index: 7; /* 상단 오버레이보다 위에서 클릭 가능하도록 */
  display: none;
}

.section-4 .grid .pv-content-container img[alt="pv"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: auto; /* 클릭 가능 보장 */
}

/* PV 탭에서만 PV 컨테이너 표시 */
.section-4.is-pv .grid .pv-content-container {
  display: block;
}

/* Illust 탭에서는 PV 컨테이너 숨김 */
.section-4.is-illust .grid .pv-content-container {
  display: none;
}

/* Illust Images - main content display */
.section-4 .grid .illust-image-container { 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 35%);
  transform-origin: center center;
  width: 487w;
  z-index: 8;
  display: none;
}

/* Illust 탭에서만 Illust 컨테이너 표시 - active 클래스가 있는 것만 */
.section-4.is-illust .grid .illust-image-container.active {
  display: block;
}

/* Illust 탭이 아닐 때는 모든 일러스트 컨테이너 숨김 */
.section-4:not(.is-illust) .grid .illust-image-container {
  display: none !important;
}

/* PV 탭에서는 Illust 컨테이너 숨김 */
.section-4.is-pv .grid .illust-image-container {
  display: none;
}

.section-4 .grid .illust-image-container .illust-image {
  height: 50vh;
  /* transform: translateX(11.5%); */
  object-fit: contain;
  display: block;
  z-index: 1;
  position: static;
}

.section-4 .grid .illust-image-container .illust-overlay {
  display: none; /* 오버레이 기능 제거 */
}

/* Illust Text - 컨테이너 내부에 배치 */
.illust-image-container .illust-text {
  position: absolute;
  bottom: -67%;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 9;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 활성화된 Illust의 텍스트만 표시 */
.illust-image-container.active .illust-text {
  opacity: 1;
}


/* PV Content List */
.pv-content-list-container {
  position: absolute;
  left: 50%;
  top: 83.5vh;
  transform: translateX(-50%);
  width: auto;
  height: 12vh;
  z-index: 12; /* PV arrows/nav use z-index: 6; ensure list is above */
  display: none; /* 기본적으로 숨김 */
  overflow: hidden; /* 리스트가 컨테이너를 넘치지 않도록 숨김 */
}

/* PV 탭에서만 PV 리스트 표시 */
.section-4.is-pv .pv-content-list-container {
  display: block;
}

/* Illust 탭에서는 PV 리스트 숨김 */
.section-4.is-illust .pv-content-list-container {
  display: none;
}

.pv-content-list {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.pv-content-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.pv-content-item {
  flex-shrink: 0;
  width: 22vh; /* 240:140 비율에 맞춘 폭 (10vh × 12/7) */
  height: 12vh;
  cursor: default; /* 기본값, 아래 not(.disabled) 규칙에서 override */
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  position: relative;
  display: block;
  contain: layout;
}

.pv-content-item:not(.disabled) {
  cursor: pointer;
  pointer-events: auto;
}

.pv-content-item.disabled {
  pointer-events: none;
  cursor: default;
}

/* PV Base Image */
.pv-content-item .pv-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* cover → contain으로 변경하여 원본 비율 유지 */
  display: block;
  z-index: 1;
  /* 강제로 이미지 새로고침 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  pointer-events: none; /* 부모에 클릭 전달 */
}

/* PV Filter Overlay */
.pv-content-item .pv-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 2;
  transition: opacity 0.3s ease;
  opacity: 0; /* 기본적으로 숨김 */
  pointer-events: none; /* 투명 오버레이가 클릭 가로채지 않도록 */
}

.pv-content-item.active .pv-filter {
  opacity: 1; /* 선택된 아이템만 표시 */
}


/* 클릭 기능 제거로 호버 및 선택 효과 비활성화 */

/* Section 4 two-column hotspot overlay - 위아래 배치 */
.section-4 .s4-01-select { 
  position: absolute; 
  left: 10vw; 
  top: 20vh; 
  width: 10vw; 
  height: 15vh; 
  display: grid; 
  grid-template-columns: 1fr; /* 1열 */
  grid-template-rows: 1fr 1fr; /* 2행, 각각 50% */
  z-index: 3; 
}
.section-4 .s4-01-select a { 
  display: block; 
  width: 100%; 
  height: 100%; 
  text-decoration: none; 
}
.section-4 .s4-01-select .s4-pv { 
  grid-row: 1 / 2; /* 위쪽 */
}
.section-4 .s4-01-select .s4-illust { 
  grid-row: 2 / 3; /* 아래쪽 */
}

/* Section 4 PV Navigation Arrows (Visual Only) */
.s4-pv-arrows {
  position: absolute;
  top: 90vh;
  left: 50%;
  transform: translate(calc(-50% + var(--arrow-offset-x)), calc(-50% + var(--arrow-offset-y)));
  width: 70vw;
  display: none; /* 기본적으로 숨김 */
  justify-content: center;
  align-items: center;
  z-index: 6; /* 화살표 이미지는 핫스팟보다 위에 */
  pointer-events: none; /* 클릭 이벤트 비활성화 */
  
  /* 미세조정을 위한 변수들 - 필요시 수정 가능 */
  --arrow-offset-x: 0px; /* 좌우 조정 (양수: 오른쪽, 음수: 왼쪽) */
  --arrow-offset-y: 0px; /* 상하 조정 (양수: 아래, 음수: 위) */
}

.section-4.is-pv .s4-pv-arrows {
  display: flex; /* PV 탭 선택 시 표시 */
}

/* 화살표 이미지 공통 스타일 */
.s4-pv-arrow-normal,
.s4-illust-arrow-normal {
  display: block;
  width: 70vw;
  height: 8.5vh; /* PV/Illust 이미지와 동일한 높이 */
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Section 4 Illust Navigation Arrows (Visual Only) */
.s4-illust-arrows {
  position: absolute;
  top: 45vh;
  left: 50vw;
  transform: translate(calc(-50% + var(--arrow-offset-x)), calc(-50% + var(--arrow-offset-y)));
  width: auto;
  height: auto;
  display: none; /* 기본적으로 숨김 */
  justify-content: center;
  align-items: center;
  z-index: 6;
  pointer-events: none;
  
  /* 미세조정을 위한 변수들 - 필요시 수정 가능 */
  --arrow-offset-x: 0px; /* 좌우 조정 (양수: 오른쪽, 음수: 왼쪽) */
  --arrow-offset-y: 0px; /* 상하 조정 (양수: 아래, 음수: 위) */
}

.section-4.is-illust .s4-illust-arrows {
  display: flex; /* Illust 탭 선택 시 표시 */
}

/* Arrow hover effects will be handled by JavaScript */

/* Section 4 PV Navigation Hotspots (Clickable Areas) */
.s4-pv-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5; /* 핫스팟은 화살표보다 아래 */
  pointer-events: auto; /* 클릭 이벤트 활성화 */
}

.s4-pv-prev,
.s4-pv-next {
  text-decoration: none;
  /* 크기와 위치는 직접 조절 가능 */
}

.s4-pv-prev, .s4-pv-next, .s4-illust-prev, .s4-illust-next {
  width: 12vw; /* 버튼 고정 너비 */
  height: 100%;
}

.s4-gap {
  width: 20px; /* 기본값, JS에서 동적으로 변경됨 */
height: 100%;
transition: width 0.3s ease; /* 너비 변화 시 부드러운 전환 */
}

/* Section 4 middle nav hotspots - PV와 Illust 분리 */

/* PV Nav 위치 */
.section-4 .s4-pv-nav {
  position: absolute;
  left: 50vw;
  top: 90vh;
  transform: translate(-50%, -50%);
  width: 55vw;
  height: 14vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 6;
  pointer-events: auto;
  visibility: hidden;
}

/* Illust Nav 위치 (PV와 다른 위치) */
.section-4 .s4-illust-nav {
  position: absolute;
  left: 50vw;
  top: 45vh; /* PV와 다른 위치 */
  transform: translate(-50%, -50%);
  width: 55vw;
  height: 14vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 6;
  pointer-events: auto;
  visibility: hidden;
}

.section-4 .s4-pv-nav .s4-pv-prev,
.section-4 .s4-pv-nav .s4-pv-next,
.section-4 .s4-illust-nav .s4-illust-prev,
.section-4 .s4-illust-nav .s4-illust-next {
  display: block;
  flex-shrink: 0;
  pointer-events: auto;
  text-decoration: none;
}

.section-4 .s4-pv-nav .s4-gap,
.section-4 .s4-illust-nav .s4-gap {
  flex-shrink: 0;
  pointer-events: none;
}

/* 각 탭에서 해당 nav만 표시 */
.section-4.is-pv .s4-pv-nav {
  visibility: visible;
}
.section-4.is-illust .s4-illust-nav {
  visibility: visible;
}

/* Section 5 background image */
.section-5 .section-layer.media .bg {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center;
}

/* Section 5 specifics */
.section-5 .news { 
  width: 60vw; 
  height: auto; 
  transform-origin: center center;
  transform: translate(0%, 5%);
}
/* Section 5 footer reveal band */
.section-5 .footer-reveal { position: absolute; left: 0; bottom: -270px; width: 100%; height: 270px; background: #fff; z-index: 1; }
/* When revealed, slide layers up by 270px so band shows */
.section-5.is-footer-revealed .section-layer { transform: translateY(-270px); transition: transform .35s ease; }

/* Floating Manta Icon - Section 1 only */
.section-1 .floating-manta-icon {
  position: absolute;
  right: 2vw;
  bottom: 2vh;
  width: 240px;
  height: auto;
  z-index: 50; /* 팝업보다 낮은 z-index */
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto;
}

.section-1 .floating-manta-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.section-1 .floating-manta-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* AGF 2025 Popup */
.agf-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99998; /* YouTube popup보다는 낮지만 다른 요소보다는 높게 */
  pointer-events: none;
}

.agf-popup.is-open {
  display: flex;
  pointer-events: auto;
}

.agf-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.agf-popup-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.agf-popup-content img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.agf-popup-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.agf-popup-close:hover {
  opacity: 0.7;
}

/* 모바일에서도 플로팅 아이콘 표시 (크기 조정) */
@media (max-width: 767px) {
  .floating-manta-icon {
    width: 160px; /* 모바일에서는 조금 더 작게 */
    right: 3vw;
    bottom: 3vh;
  }
}

/* 1920x1080 최적화 기준 레이아웃 보정 */
/* @media (min-width: 1600px) and (min-height: 900px) {
  .navbar { height: 100vh; }
  .section-layer.content { padding-top: 0; }
} */

/* 4K(3840x2160) 대응 업스케일 */
/* @media (min-width: 2560px) and (min-height: 1440px) {
  html { font-size: 18px; }
  .navbar { height: 100vh; }
  .section-layer.content { padding-top: 0; }
} */

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Popup image fade animation */
.section-3 .popup-arcanium img,
.section-3 .popup-mantarion img {
  transition: opacity 0.3s ease-in-out;
}

.section-3 .popup-arcanium img.fade-out,
.section-3 .popup-mantarion img.fade-out {
  opacity: 0;
}

.section-3 .popup-arcanium img.fade-in,
.section-3 .popup-mantarion img.fade-in {
  opacity: 1;
}