/* ================================================================
   팝업 - 위에서 아래로 슬라이드 오버레이
   데스크탑: 최대 4개 나란히 | 모바일: 스와이퍼
================================================================ */

/* ── 전체 패널 (풀스크린 오버레이) ────────────────────────── */
.xet-popup-panel {
  position: fixed;
  inset: 0;
  top: -100vh;           /* 기본: 화면 위에 숨김 */
  z-index: 9500;
  background: rgba(0, 0, 0, 0.78);
  display: none;         /* JS가 is-visible 추가 전까지 숨김 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Step 1: display 활성화 */
.xet-popup-panel.is-visible {
  display: flex;
}

/* Step 2: 슬라이드 다운 */
.xet-popup-panel.is-open {
  top: 0;
  transition: top 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── 팝업 중앙 컨테이너 ────────────────────────────────────── */
.popup-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ── 닫기 버튼 행 ──────────────────────────────────────────── */
.popup-close-row {
  text-align: center;
  margin-bottom: 10px;
}

.popup-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.9;
}

.popup-close-btn:hover {
  opacity: 1;
}

/* ── 팝업 카드 (흰 배경) ───────────────────────────────────── */
.popup-card {
  background: #fff;
  overflow: hidden;
  max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ── 데스크탑: 4개 나란히 (20% 축소) ──────────────────────── */
.popup-desktop {
  display: none;
}

@media (min-width: 769px) {
  .popup-card {
    max-width: 76vw; /* 95vw × 0.8 = 20% 축소 */
  }

  .popup-desktop {
    display: flex;
    align-items: flex-start;
  }

  .popup-mobile {
    display: none !important;
  }
}

.popup-desktop__item {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid #e0e0e0;
}

.popup-desktop__item:last-child {
  border-right: none;
}

.popup-desktop__item a {
  display: block;
}

.popup-desktop__item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh; /* 78vh × 0.8 = 20% 축소 */
  object-fit: contain;
}

/* ── 모바일: 스와이퍼 (흰 여백 없음 - autoHeight) ─────────── */
.popup-mobile {
  display: block;
  width: 88vw;
  max-width: 420px;
  /* 고정 height 제거 → autoHeight로 이미지 크기에 맞춤 */
}

.popup-mobile .swiper-slide {
  height: auto;
  background: #fff;
}

.popup-mobile .swiper-slide a {
  display: block;
  width: 100%;
}

.popup-mobile .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh; /* 너무 길어지는 경우 제한 */
  object-fit: cover; /* 위아래 여백 없이 채움 */
}

/* ── 모바일 네비게이션 (← 1 | 4 →) ────────────────────────── */
.popup-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 0 8px;
  background: #fff;
  border-top: 1px solid #eee;
}

.popup-nav-btn {
  background: transparent;
  border: none;
  font-size: 17px;
  color: #444;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.popup-nav-btn:hover {
  color: #000;
}

.popup-fraction {
  font-size: 13px;
  color: #555;
  min-width: 36px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ── 오늘 하루 보지않기 ────────────────────────────────────── */
.popup-noshow-btn {
  display: inline-block;
  margin-top: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  letter-spacing: 0.04em;
}

.popup-noshow-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}