/*
 * [Givia Responsive Image] 에디터에서 반응형이미지 감추기(에디터용) 토글에 따라 반대편 뷰포트 이미지를 감추거나 흐리게 처리
 * - .givia-hide-opposite-image: 감추기 ON (display:none)
 * - OFF: filter로 흐리게
 * - 데스크탑/모바일/태블릿 모두 지원
 */

/* 감추기 ON: 반대편 뷰포트 이미지를 완전히 감춤 */
/* 데스크탑에서 모바일용 이미지 감추기 */
body.elementor-device-desktop.is-eye-image .elementor-hidden-desktop,
body[data-elementor-device-mode="desktop"].is-eye-image .elementor-hidden-desktop,
.elementor-editor-wp-page body.elementor-device-desktop.is-eye-image .elementor-hidden-desktop {
    display: none !important;
}

/* 태블릿에서 태블릿 전용 이미지 감추기 */
body.elementor-device-tablet.is-eye-image .elementor-hidden-tablet,
body[data-elementor-device-mode="tablet"].is-eye-image .elementor-hidden-tablet,
.elementor-editor-wp-page body.elementor-device-tablet.is-eye-image .elementor-hidden-tablet {
    display: none !important;
}

/* 모바일에서 PC용 이미지 감추기 */
body.elementor-device-mobile.is-eye-image .elementor-hidden-mobile,
body[data-elementor-device-mode="mobile"].is-eye-image .elementor-hidden-mobile,
.elementor-editor-wp-page body.elementor-device-mobile.is-eye-image .elementor-hidden-mobile {
    display: none !important;
}

/* 감추기 OFF: 반대편 뷰포트 이미지를 흐리게(흑백) 표시 */
/* 데스크탑에서 모바일용 이미지 흐리게 */
body.elementor-device-desktop:not(.is-eye-image) .elementor-hidden-desktop,
.elementor-editor-wp-page body.elementor-device-desktop:not(.is-eye-image) .elementor-hidden-desktop {
    filter: opacity(.4) saturate(0) !important;
}

/* 태블릿에서 태블릿 전용 이미지 흐리게 */
body.elementor-device-tablet:not(.is-eye-image) .elementor-hidden-tablet,
.elementor-editor-wp-page body.elementor-device-tablet:not(.is-eye-image) .elementor-hidden-tablet {
    filter: opacity(.4) saturate(0) !important;
}

/* 모바일에서 PC용 이미지 흐리게 */
body.elementor-device-mobile:not(.is-eye-image) .elementor-hidden-mobile,
.elementor-editor-wp-page body.elementor-device-mobile:not(.is-eye-image) .elementor-hidden-mobile {
    filter: opacity(.4) saturate(0) !important;
}

/* 반응형 이미지 컨테이너 */
.borom-responsive-image-container {
    position: relative;
    display: block;
    width: 100%;
}

.borom-responsive-image-container img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    /* 자연스러운 이미지 비율 유지 */
}

.borom-responsive-image-container picture {
    display: block;
    width: 100%;
}