/* ===================================
   Banner Block Skin: peek
   중앙 본 배너 + 양옆 인접 슬라이드 살짝 노출
   =================================== */

/* 100vw 가 세로 스크롤바 너비를 포함하여 발생하는 가로 스크롤 차단.
   clip 은 sticky 포지셔닝을 깨지 않으며, 미지원 브라우저는 hidden 폴백 */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

.block-banner--peek {
    width: 100%;
    /* 본 배너 너비 — 필요 시 페이지/관리자에서 이 변수만 override */
    --peek-slide-width: 1200px;
}

/* 뷰포트 전체로 확장 (부모 컨테이너 패딩 무시) */
.block-banner--peek .block-banner__viewport {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

/* Swiper 자체는 overflow:visible 로 양옆 슬라이드 노출 */
.block-banner--peek .mublo-item-layout.swiper {
    overflow: visible;
}

/* 슬라이드 너비: 본 배너 = --peek-slide-width(기본 1200px),
   화면이 좁으면 좌우 여백(80px)을 남긴 viewport 너비로 축소 */
.block-banner--peek .swiper-slide {
    width: min(var(--peek-slide-width), calc(100vw - 80px));
    height: auto;
}

.block-banner--peek .block-banner__inner {
    border-radius: 16px;
    overflow: hidden;
}

.block-banner--peek .block-banner__link {
    display: block;
    width: 100%;
    height: 100%;
}

.block-banner--peek .block-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PC/MO 이미지 전환 */
.block-banner--peek .block-banner__image--mo {
    display: none;
}

/* 모바일: 100vw 단일 슬라이드, 보더라운드 제거 */
@media (max-width: 768px) {
    .block-banner--peek .swiper-slide {
        width: 100vw;
        max-width: 100vw;
    }

    .block-banner--peek .block-banner__inner {
        border-radius: 0;
    }

    .block-banner--peek .block-banner__item--has-mo .block-banner__image--pc {
        display: none;
    }
    .block-banner--peek .block-banner__item--has-mo .block-banner__image--mo {
        display: block;
    }
}