.xe-widget-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.my-custom-bg-wrap {
    width: 100% !important;
    background-color: {$bg_color}; /* 관리자 설정 배경 */
    padding: 20px 0;
    overflow: hidden;
}

.square-swiper-container-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 20px 50px; /* 좌우 화살표 버튼을 위한 여백 */
    box-sizing: border-box;
    background-color: {$bg_color};
}

.mySquareSwiper {
    width: 100%;
    height: 100%;
    padding-bottom: 40px; /* 하단 점(Pagination)을 위한 여백 */
}

/* 개별 슬라이드(배너 1개) 스타일 */
.mySquareSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: relative;
    aspect-ratio: 1 / 1; /* 1:1 정방형 비율 유지 */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 개별 배너에 그림자 부여 */
    transition: transform 0.3s ease;
}

.mySquareSwiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.mySquareSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.mySquareSwiper .swiper-slide:hover img {
    transform: scale(1.05);
}

/* --- 세련된 글래스모피즘 네비게이션(화살표) 디자인 --- */
.square-swiper-container-wrapper .swiper-button-next, 
.square-swiper-container-wrapper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85); /* 반투명 배경 */
    backdrop-filter: blur(4px); /* 유리 효과 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-top: -22px; /* 세로 중앙 정렬을 위해 높이의 절반을 올림 */
    z-index: 10;
}

/* 기본 Swiper 폰트 아이콘 제거 */
.square-swiper-container-wrapper .swiper-button-next::after,
.square-swiper-container-wrapper .swiper-button-prev::after {
    content: ''; 
}

/* 깔끔한 SVG 화살표 아이콘 삽입 */
.square-swiper-container-wrapper .swiper-button-prev {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
}

.square-swiper-container-wrapper .swiper-button-next {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    right: 0;
}

/* 마우스 호버(Hover) 시 살짝 커지며 파란색 포인트 효과 */
.square-swiper-container-wrapper .swiper-button-prev:hover,
.square-swiper-container-wrapper .swiper-button-next:hover {
    background-color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

.square-swiper-container-wrapper .swiper-button-prev:hover {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}

.square-swiper-container-wrapper .swiper-button-next:hover {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* 하단 점(Pagination) 스타일 설정 */
.mySquareSwiper .swiper-pagination-bullet {
    background-color: #000000;
    opacity: 0.2;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

.mySquareSwiper .swiper-pagination-bullet-active {
    opacity: 0.6;
    width: 16px;
    border-radius: 4px;
}