@charset "utf-8";

/* ================== Base ================== */

/* Overlay */
.popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  z-index:1000;
  justify-content:center;
  align-items:center;
}

/* Wrapper (닫기버튼 기준) */
.popup-wrapper{
  position:relative;
  max-width:350px;            /* 데스크톱 상한 */
}

/* Content: 카드 제거(이미지만) */
.detail-popup-content{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:center;
  max-width:350px;
  max-height:90vh;            /* 기본 세로 상한 */
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* Swiper */
.swiper-container{
  width:100%;
  height:auto;
  position:relative;
  padding-bottom:0;
}
.swiper-slide{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100% !important;
  margin:0 !important;        /* spaceBetween 보정 */
}

/* Image */
.popup-image{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:90vh !important; /* 기본 세로 상한 */
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

/* Pagination */
.swiper-pagination{
  position:absolute;
  bottom:12px !important;
  left:0;
  width:100%;
  text-align:center;
  z-index:20;
}
.swiper-pagination-bullet{
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:1px solid #999; opacity:1; margin:0 4px;
}
.swiper-pagination-bullet-active{ background:#333; }

/* Close (팝업 상단 우측 ‘바로 위’) */
#aiPopup .popup-close-fab{
  position:absolute;
  top:0;
  right:0;
  transform: translateY(calc(-100% - 10px)); /* 데스크톱 간격 */
  z-index:2001;
  background:transparent;
  color:#eee;
  border:0;
  padding:6px 7px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#aiPopup .popup-close-fab:active{
  transform: translateY(calc(-100% - 9px));
}

/* ================== Overrides (더 아래 = 더 강함) ================== */

/* 헤드룸(닫기 버튼 공간) 반영: 데스크톱/공통 */
#aiPopup .detail-popup-content{
  max-height: calc(90vh - 40px);     /* 위쪽에 40px 여유 */
}

/* Mobile (<=700px) */
@media (max-width:700px){

  /* 가로폭: vw로 정확히 제어 (최소폭 제한 제거) */
  .popup-wrapper{
    width: 70vw !important;
    max-width: 70vw !important;
    min-width: 0 !important;
  }

  /* 콘텐츠/이미지 세로 상한 축소 */
  #aiPopup .detail-popup-content{
    max-height: calc(72vh - 40px) !important;  /* 72vh 권장 */
    padding:0 !important;
  }
  .popup-image{
    max-height: 68vh !important;               /* 68vh 권장 */
  }

  /* 닫기 버튼 모바일 간격/크기 */
  #aiPopup .popup-close-fab{
    font-size:15px;
    transform: translateY(calc(-100% - 10px));
    top:0px; right:10px;
    padding:7px 5px;
  }
}


/* 마우스 올라갔을 때 밝게 */
#aiPopup .popup-close-fab:hover{
  color:#fff;                         /* 글자 더 밝게 */
  /* 필요시 크기 미세 확대 */
}