/* ── CJ 모바일 순차 팝업 스타일 ── */

.site-popup-cj_mobile {
  --popup-open-duration: 0.28s;
  --popup-close-duration: 0.22s;
  --popup-item-open-duration: 0.24s;
  --popup-item-close-duration: 0.22s;

  position: fixed !important;
  z-index: 9999 !important;
  width: 80% !important;
  top: 12% !important;
  left: 10% !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  pointer-events: auto;
  animation: cjMobileFadeIn 0.28s ease-out both;
}

.site-popup-wrap:has(.site-popup-cj_mobile) .popup-dim {
  display: block;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  animation: cjMobileDimFadeIn 0.28s ease-out both;
}

/* 닫기 애니메이션 */
.site-popup-wrap.is-closing .site-popup-cj_mobile {
  animation: cjMobileFadeOut 0.22s ease forwards;
}

.site-popup-wrap.is-closing:has(.site-popup-cj_mobile) .popup-dim {
  animation: cjMobileDimFadeOut 0.22s ease forwards;
}

/* 팝업 아이템 (순차 표시) */
.site-popup-cj_mobile .site-popup-items {
  position: relative;
  width: 100%;
}

.site-popup-cj_mobile .site-popup-item {
  position: relative;
  width: 100%;
}

.site-popup-cj_mobile .site-popup-item.is-entering {
  animation: cjMobileItemIn 0.24s ease-out both;
}

.site-popup-cj_mobile .site-popup-item.is-leaving {
  animation: cjMobileItemOut 0.22s ease both;
}

/* 이미지 */
.site-popup-cj_mobile .site-popup-image {
  position: relative;
  width: 100%;
}

.site-popup-cj_mobile .site-popup-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 링크 영역 */
.site-popup-cj_mobile .site-popup-link-area {
  position: absolute;
  display: block;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: none;
}

/* X 닫기 버튼 */
.site-popup-cj_mobile .cj-mobile-xbtn {
  position: absolute;
  width: 8vw;
  height: 8vw;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  cursor: pointer;
}

.site-popup-cj_mobile .cj-mobile-xbtn span {
  width: 5.5vw;
  height: 0.5vw;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgb(43, 43, 43);
}

.site-popup-cj_mobile .cj-mobile-xbtn span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-popup-cj_mobile .cj-mobile-xbtn span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 기본 컨트롤 숨김 */
.site-popup-cj_mobile .site-popup-control {
  display: none;
}

/* ── 태블릿 이상 ── */
@media (min-width: 641px) {
  .site-popup-cj_mobile {
    width: 360px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .site-popup-cj_mobile .cj-mobile-xbtn {
    width: 36px;
    height: 36px;
  }

  .site-popup-cj_mobile .cj-mobile-xbtn span {
    width: 24px;
    height: 2px;
  }
}

/* ── 애니메이션 ── */
@keyframes cjMobileFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cjMobileFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

@keyframes cjMobileDimFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cjMobileDimFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes cjMobileItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cjMobileItemOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}