.banner-container {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.banner-container .carousel {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
}

.banner-container .carousel-inner {
    border-radius: 0.375rem;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
}

.banner-container .carousel-item {
    display: none;
    width: 100%;
    position: relative;
    text-align: center;
    float: none;
}

.banner-container .carousel-item.active {
    display: block;
}

.banner-item-wrapper {
    width: 100%;
    position: relative;
    text-align: center;
}

.banner-container .carousel-item img {
    transition: all 0.5s ease;
    border-radius: 0.375rem;
}

.banner-container.banner-top {    
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.banner-container.banner-bottom {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.banner-item {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
    width: 100%;
}

.banner-item:hover {
    opacity: 0.9;
}

.banner-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    object-fit: contain;
    background-color: #f8f9fa;
    margin: 0 auto;
    transition: all 0.5s ease;
}

/* 전체 너비 배너 */
.banner-width-full {
    width: 100%;
    position: relative;
}

.banner-width-full .banner-image {
    width: 100%;
    border-radius: 0.375rem;
}

/* 컨테이너 너비 배너 */
.banner-width-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.banner-width-container .banner-image {
    width: 100%;
}

/* 사용자 정의 너비 배너 */
.banner-width-custom {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.banner-width-custom .banner-image {
    max-width: 100%;
    width: auto;
}

/* 배너 링크 및 이미지 컨테이너 */
.banner-link {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* 캐러셀 컨트롤 개선 */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    border-radius: 0.375rem;
    margin: 0 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background: linear-gradient(45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 인디케이터 개선 */
.carousel-indicators {
    margin-bottom: 0.5rem;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background-color: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.3);
    transform: scale(1.2);
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .banner-width-full {
        margin-left: calc(-50vw + 50%);
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 8%;
        margin: 0 5px;
    }
    
    .carousel-indicators {
        bottom: -30px;
    }
    
    .carousel-indicators button {
        width: 10px;
        height: 10px;
    }
}

/* 페이드 효과를 위한 추가 스타일 */
.banner-carousel.fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}

.banner-carousel.fade .carousel-item.active {
    opacity: 1;
}

.banner-carousel.fade .carousel-item-next.carousel-item-start,
.banner-carousel.fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
}

.banner-carousel.fade .carousel-item-next,
.banner-carousel.fade .carousel-item-prev,
.banner-carousel.fade .carousel-item.active.carousel-item-start,
.banner-carousel.fade .carousel-item.active.carousel-item-end {
    opacity: 0;
}