/* =========================================================================
   모바일 레이어 팝업 슬라이더  (/common/css/MobilePopupSlider.css)
   - 992px 미만에서만 표시, 슬라이더가 켜지면 기존 .LayerPopup 은 숨김
   - 위치/크기는 기존 모바일 레이어 팝업과 동일 (top 20vh, left 5vw, width 90vw)
   ========================================================================= */
.m-popup-slider { display: none; }

@media (max-width: 991.98px) {
    html.m-popup-on .LayerPopup { display: none !important; }

    .m-popup-slider.is-open {
        display: block;
        position: fixed;
        top: 20vh;
        left: 5vw;
        width: 90vw;
        z-index: 10000;
        background: #f5f6f8;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    }
}

/* 상단 바 : 하루동안 이창 열지 않기 + 닫기 */
.m-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 3px 0 12px;
}
.m-popup-head label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 44px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.m-popup-head input { margin: 0; width: 16px; height: 16px; }
.m-popup-close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.m-popup-close span {
    position: absolute;
    top: 8px; left: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #a3abb7;
}
.m-popup-close span::before,
.m-popup-close span::after {
    content: "";
    position: absolute;
    top: 13px; left: 7px;
    width: 14px; height: 2px;
    background: #fff;
    transform: rotate(45deg);
}
.m-popup-close span::after { transform: rotate(-45deg); }

/* 슬라이드 : 폭 100%, 높이는 이미지 원본 비율 (autoHeight) */
.m-popup-swiper { position: relative; background: #fff; }
.m-popup-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.m-popup-swiper .swiper-slide a { display: block; width: 100%; }
.m-popup-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    /* 화면보다 긴 이미지는 잘리지 않게 비율 유지한 채 축소 */
    max-height: calc(80vh - 100px);
    object-fit: contain;
}
.m-popup-html { width: 100%; max-height: calc(80vh - 100px); overflow: auto; }
.m-popup-html img { max-width: 100%; height: auto; }

/* 좌우 버튼 */
.m-popup-prev,
.m-popup-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
}
.m-popup-prev { left: 6px; }
.m-popup-next { right: 6px; }
.m-popup-prev::before,
.m-popup-next::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    border-top: 2px solid #1a2233;
    border-left: 2px solid #1a2233;
}
.m-popup-prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.m-popup-next::before { transform: translate(-70%, -50%) rotate(135deg); }

/* 1 / 2 표시 */
.m-popup-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(20, 26, 34, .72);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
}
.m-popup-count b { font-weight: 700; }

/* 점 인디케이터 */
.m-popup-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
}
.m-popup-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 4px;
    background: #b7bfca;
    opacity: 1;
    transition: width .2s;
}
.m-popup-dots .swiper-pagination-bullet-active { width: 20px; background: #1b2f55; }

/* 팝업이 1개만 남으면 슬라이더 요소 숨김 */
.m-popup-slider.is-single .m-popup-prev,
.m-popup-slider.is-single .m-popup-next,
.m-popup-slider.is-single .m-popup-count,
.m-popup-slider.is-single .m-popup-dots { display: none; }

/* 모바일 가로모드 : 화면 높이가 낮으므로 높이 기준으로 크기를 잡고 화면 가운데 표시
   (100px = 상단 바 50 + 점 인디케이터 30 + 위아래 여백 20) */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 600px) {
    .m-popup-slider.is-open {
        top: 50%;
        left: 50%;
        width: 90vw;
        width: min(90vw, calc(100vh - 100px));
        width: min(90vw, calc(100dvh - 100px));
        transform: translate(-50%, -50%);
    }
    .m-popup-swiper .swiper-slide img,
    .m-popup-html {
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
    }
}