/* 배경 이미지 슬라이드쇼 스타일 */

/* 배경 컨테이너 */
.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;  /* 가장 뒤에 */
    overflow: hidden;
}

/* 각 배경 이미지 */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;  /* 상단 고정, 좌우 중앙 */
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;  /* 페이드 효과 1.5초 */
}

/* 활성화된 배경 이미지 */
.bg-image.active {
    opacity: 1;
}

/* 각 배경 이미지 설정 */
/* 배경 이미지는 HTML에서 인라인 스타일로 설정됩니다 (컨텍스트 경로 지원) */
.bg-image-1 { }
.bg-image-2 { }
.bg-image-3 { }
.bg-image-4 { }

/* 배경 위에 반투명 오버레이 (선택사항) */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);  /* 살짝 어둡게 */
    z-index: -1;
}

/* 반응형 미디어 쿼리 */

/* 모바일 (767px 이하) - 배경 이미지 최적화 */
@media (max-width: 767px) {
    .bg-image {
        background-size: cover;
        background-position: center center;  /* 모바일에서는 중앙 정렬 */
    }
    
    .background-overlay {
        background-color: rgba(0, 0, 0, 0.3);  /* 모바일에서는 조금 더 어둡게 */
    }
}