/* 현재 이미지의 원본 크기를 넘지 않고 화면 안에서 가로·세로를 함께 축소한다. */
.page-main .popup-page .main-popup {
  justify-content: stretch;
}

.page-main .popup-page .main-popup .main-popup-panel {
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  max-width: 100%;
  --popup-image-max-height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: min(var(--popup-image-width, 400px), 100%, calc(var(--popup-image-max-height) * var(--popup-image-ratio, 1)));
}

.page-main .popup-page .main-popup .popup-swiper {
  min-height: 0;
  height: auto;
}

.page-main .popup-page .main-popup .popup-swiper .swiper-slide,
.page-main .popup-page .main-popup .main-popup-link {
  height: auto;
}

/* wrapper 높이는 Swiper autoHeight가 현재 슬라이드 기준으로 갱신한다. */
.page-main .popup-page .main-popup .main-popup-link > img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
}

@media (min-width: 769px) {
  .page-main .popup-page .main-popup .main-popup-panel {
    max-width: 360px;
  }
}

@media (max-width: 768px) {
  .page-main .popup-page .main-popup .main-popup-panel {
    --popup-image-max-height: calc(100dvh - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top));
  }

  .page-main .popup-page .main-popup .main-popup-link > img {
    max-height: calc(100dvh - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
  }

  .page-main .popup-page .main-popup .main-popup-foot {
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}