/* =========================================================
   hp-pop (layer popup) - Swiper area fixed size only
   - Breakpoints: <787 mobile / 787~1199 tablet / >=1200 pc
   - Fixed size applies to IMAGE(Swiper) area only
   - Pagination overlays on image (no black strip line)
   ========================================================= */

/* =============== 1) Tokens (EDIT HERE) ================== */
:root{
  /* Swiper (image area) fixed sizes */
  --hp-pop-sw-w-m: 304px;
  --hp-pop-sw-h-m: 228px;

  --hp-pop-sw-w-t: 600px;
  --hp-pop-sw-h-t: 450px;

  --hp-pop-sw-w-p: 800px;
  --hp-pop-sw-h-p: 600px;

  /* Panel look */
  --hp-pop-radius-m: 14px;
  --hp-pop-radius: 16px;

  /* Overlay pagination look */
  --hp-pop-page-pad: 10px;
  --hp-pop-page-gap: 6px;

  /* Actions area */
  --hp-pop-actions-pad: 12px;
  --hp-pop-btn-h: 42px;
  --hp-pop-btn-radius: 10px;
}

/* =============== 2) Base / overlay ================== */
.hp-pop, .hp-pop * { box-sizing: border-box; }
.hp-pop[hidden] { display:none !important; }

.hp-pop{
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.hp-pop__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}

/* =========================================================
   Panel
   - panel은 "내용 높이만큼" 커짐 (auto height)
   - 중앙 정렬 유지
   ========================================================= */
.hp-pop__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

  border-radius: var(--hp-pop-radius);
  overflow:hidden;
  background:#111;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);

  /* ✅ 세로 스택 */
  display:flex;
  flex-direction: column;
}

/* 모바일 radius만 조금 줄임 */
@media (max-width:786px){
  .hp-pop__panel{ border-radius: var(--hp-pop-radius-m); }
}

/* =========================================================
   3) Swiper (IMAGE AREA) - fixed size by breakpoint
   - 이 영역만 고정(W/H)
   ========================================================= */
.hp-pop-swiper{
  position: relative; /* pagination overlay 기준 */
  background:#000;
  overflow:hidden;

  /* ✅ 모바일 기본값 */
  width: var(--hp-pop-sw-w-m);
  height: var(--hp-pop-sw-h-m);
}

/* ✅ 모바일(0~786): 300x400 (혹은 네가 바꾼 400x300을 토큰에서 수정) */
@media (max-width:786px){
  .hp-pop-swiper{
    width: var(--hp-pop-sw-w-m);
    height: var(--hp-pop-sw-h-m);
  }
}

/* ✅ 태블릿(787~1199): 600x450 */
@media (min-width:787px) and (max-width:1199px){
  .hp-pop-swiper{
    width: var(--hp-pop-sw-w-t);
    height: var(--hp-pop-sw-h-t);
  }
}

/* ✅ PC(1200~): 800x600 */
@media (min-width:1200px){
  .hp-pop-swiper{
    width: var(--hp-pop-sw-w-p);
    height: var(--hp-pop-sw-h-p);
  }
}

/* Swiper 내부가 고정 높이를 제대로 채우도록 */
.hp-pop-swiper .swiper-wrapper,
.hp-pop-swiper .swiper-slide{
  height: 100%;
}

.hp-pop-swiper .swiper-slide{ width:100%; }

/* ✅ 이미지: 왜곡 없이 cover (필요 시 크롭) */
.hp-pop-swiper img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   4) Pagination (OVERLAY)
   - 기존처럼 아래에 배경(#111) 깔지 않음 → 이미지에 라인 안 생김
   - 필요하면 점 뒤에 살짝 어두운 그라데이션/배경도 가능(현재는 최소)
   ========================================================= */
.hp-pop-pagination{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;

  display:flex;
  justify-content:center;
  gap: var(--hp-pop-page-gap);

  /* ✅ 배경 제거: 라인/띠 방지 */
  background: transparent;
  padding: var(--hp-pop-page-pad);

  /* ✅ 이미지 위에서 보이게 */
  z-index: 2;

  /* ✅ 점 가독성(너무 튀면 삭제 가능) */
  /* backdrop-filter: blur(2px); */
}

/* Swiper 기본 bullet */
.hp-pop-pagination .swiper-pagination-bullet{
  width:6px; height:6px; border-radius:999px;
  background: rgba(255,255,255,.45);
  opacity:1;
}
.hp-pop-pagination .swiper-pagination-bullet-active{
  background: rgba(255,255,255,.95);
}

/* =========================================================
   5) Actions (below image)
   - panel 높이는 여기까지 포함해서 "자동"으로 늘어남
   ========================================================= */
.hp-pop__actions{
  display:flex;
  gap:10px;
  padding: var(--hp-pop-actions-pad);
  background:#111;
}

.hp-pop__btn{
  flex:1;
  height: var(--hp-pop-btn-h);
  border-radius: var(--hp-pop-btn-radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.hp-pop__btn--ghost{ background: transparent; }