.image-banner-widget {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--ibw-radius, 20px);
    margin: 0px auto;
    background-color: #FFF;
    box-sizing: border-box;
    max-width: 100%;
}

.image-banner-widget .ibw-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-banner-widget .ibw-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.image-banner-widget .ibw-track:active {
    cursor: grabbing;
}

.image-banner-widget .ibw-slide {
    flex-shrink: 0;
    height: 100%;
}

.image-banner-widget .ibw-link {
    display: block;
    width: 100%;
    height: 100%;
}

.image-banner-widget .ibw-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    pointer-events: none;
}

.image-banner-widget .ibw-empty {
    color: #999;
    font-size: 13px;
    padding: 0px 0px;
    margin: 0;
}

/* 좌우 이미지 이동(화살표) 버튼 - 평소에는 숨기고 마우스를 올리면 표시 */
.image-banner-widget .ibw-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.image-banner-widget .ibw-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.55);
}

.image-banner-widget:hover .ibw-nav-btn {
    opacity: 1;
}

.image-banner-widget .ibw-prev {
    left: 10px;
}

.image-banner-widget .ibw-next {
    right: 10px;
}

/* ==================== PC / 모바일 전환 ====================
   PC용, 모바일용 배너를 모두 마크업에 렌더링해두고, 화면 너비에 따라
   보여줄 블록만 CSS로 전환합니다. (서버 UA 판별 대신 CSS로 처리하므로
   페이지 캐시가 걸려 있어도 다른 기기에 잘못된 배너가 보이지 않습니다.) */
.image-banner-widget.ibw-mobile {
    display: none;
}

@media (max-width: 768px) {
    .image-banner-widget.ibw-pc {
        display: none;
    }
    .image-banner-widget.ibw-mobile {
        display: flex;
    }
}

/* ==================== 반응형 안전장치 ====================
   관리자가 PC/모바일 각각에 고정 px 너비/높이를 지정했더라도,
   화면이 좁아지면 비율(--ibw-ratio)을 유지한 채 폭 100%로 줄어들도록 합니다.
   --ibw-ratio가 계산되지 않은 경우(너비/높이가 %, auto 등)는 16:9로 대체합니다. */
@media (max-width: 480px) {
    .image-banner-widget {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: var(--ibw-ratio, 16 / 9);
    }

    .image-banner-widget .ibw-nav-btn {
        width: 30px;
        height: 30px;
    }
}

/* 터치 기기는 마우스 hover가 없으므로, 좌우 이동 버튼을 평소에도 보이게 표시합니다. */
@media (hover: none) {
    .image-banner-widget .ibw-nav-btn {
        opacity: 1;
    }
}