/* ==========================================================================
   홈페이지 팝업 위젯 - 관리자가 등록한 팝업을 첫 화면(인트로 애니메이션 종료 후)에
   중앙 정렬로 띄워준다. public/js/popup-widget.js 에서 이 클래스들을 사용한다.

   [디자인 원칙]
   - 이미지/영상/유튜브 팝업 모두 동일한 팝업 컴포넌트를 사용한다.
     팝업 외곽 비율은 항상 16:9로 통일하고, 위치·크기·닫기 버튼·배경 등
     기본 UI는 콘텐츠 유형과 무관하게 동일하게 보인다.
   - 영상/유튜브: 16:9 영역을 꽉 채운다(cover).
   - 이미지: 원본 비율을 유지한 채 16:9 영역 안에 contain으로 중앙 배치한다.
     찌그러뜨리거나 잘라내지 않는다.
   - 여러 팝업이 등록돼 있어도 화면엔 항상 1개만 뜬다(.popup-unit 1개).
   - 프레임의 실제 가로/세로 픽셀 값은 popup-widget.js의 sizeFrame()이
     16:9를 유지하면서 화면을 넘지 않도록 계산해 인라인 스타일로 지정한다.
   - 제목은 화면에 노출하지 않는다(관리자 CMS 전용). 컨트롤 버튼(다시보지 않기/X)은
     배경 없이 프레임 바로 아래에 배치한다.
   ========================================================================== */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 26, 0.6);
  z-index: 9500;
  opacity: 0;
  transition: opacity .35s ease;
}
.popup-overlay.is-visible { opacity: 1; }

.popup-stack {
  position: fixed;
  inset: 0;
  z-index: 9501;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.popup-unit {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.popup-unit.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.popup-unit.is-closing { opacity: 0; transform: translateY(10px) scale(.97); }

/* ---- 16:9 프레임: 이미지/영상/유튜브 공통 외곽 ---- */
.popup-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 14, 26, 0.35);
}
/* 이미지 팝업: 흰 배경(레터박스 여백) - 원본 비율 유지한 이미지 주변 여백 색 */
.popup-frame--image { background: #fff; }
/* 영상/유튜브: 검정 배경(어차피 cover로 꽉 채워서 대부분 안 보임) */
.popup-frame--video, .popup-frame--youtube { background: #000; }

/* ---- 이미지 슬라이드: 원본 비율 유지(contain), 잘리거나 늘어나지 않음 ---- */
.popup-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.popup-slide.is-current { opacity: 1; pointer-events: auto; }
.popup-slide a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.popup-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* ---- 영상/유튜브: 16:9 영역을 꽉 채운다 ---- */
.popup-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}
.popup-youtube-frame { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.popup-youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- 이미지 슬라이드 좌우 이동 버튼 + N/전체 카운터(2장 이상일 때만 렌더링됨)
   흰 배경 위에 얹히므로 "다시보지 않기"와 같은 톤의 회색, 배경 없는 스타일로 표시한다 ---- */
.popup-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8b93a5;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease;
}
.popup-nav-btn:hover { color: #1a2233; }
.popup-nav-prev { left: 8px; }
.popup-nav-next { right: 8px; }

.popup-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  background: transparent;
  color: #8b93a5;
  font-size: 12px;
  letter-spacing: .02em;
}

/* ---- 공용 하단 컨트롤: 배경 없이, 프레임 바로 아래 ---- */
.popup-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.popup-dismiss-today {
  border: none;
  background: transparent;
  color: #c9cedb;
  font-size: 13px;
  padding: 4px 2px;
}
.popup-dismiss-today:hover { color: #fff; text-decoration: underline; }
.popup-close-btn {
  border: none;
  background: transparent;
  color: #aab2c2;
  font-size: 15px;
  line-height: 1;
  padding: 4px 2px;
}
.popup-close-btn:hover { color: #fff; }

@media (max-width: 560px) {
  .popup-stack { padding: 16px; }
  .popup-nav-btn { width: 30px; height: 30px; font-size: 19px; }
  .popup-nav-prev { left: 4px; }
  .popup-nav-next { right: 4px; }
  .popup-counter { font-size: 11px; right: 10px; bottom: 8px; }
}