/* ========== 장자기독학교 학교소개 페이지 라이트 모드 애니메이션 ========== */

/* 기본 spotlight 설정 - 이미지만 표시 */
.spotlight {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
}

.spotlight .image {
    width: 100% !important;
    max-width: 1200px !important;
    padding: 0 2rem !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

.spotlight .content {
    display: none !important;
}

.spotlight .image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
    transition: transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease !important;
    filter: brightness(1) contrast(1.1) !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
}

/* 순서별 좌우 교차 - 강제 적용 */
/* 1. 장자학교란 - 왼쪽 */
#jangjahak .spotlight {
    flex-direction: row !important;
}

/* 2. 비전 - 오른쪽 */
#vision .spotlight {
    flex-direction: row-reverse !important;
}

/* 3. 이사장 - 왼쪽 */
#chairman .spotlight {
    flex-direction: row !important;
}

/* 4. 학교장 - 오른쪽 */
#principal .spotlight {
    flex-direction: row-reverse !important;
}

/* 섹션별 배경색 - 이미지 배경색과 통일 (흰색) */
#jangjahak,
#chairman,
#vision,
#principal {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 메인 헤더 스타일 개선 - 이미지 크기에 맞춤 (여백 없이) */
#intro-header {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}

#intro-header .spotlight {
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

#intro-header .spotlight .image {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

#intro-header .spotlight .image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* 헤더 이미지는 페이드인 효과만 적용 (좌우 이동 없음) - 데스크톱만 */
@media screen and (min-width: 981px) {
    #intro-header .spotlight:not(.animate) .image {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }

    #intro-header.animate .spotlight .image {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    /* 콘텐츠 섹션 애니메이션 - 데스크톱만 */
    .spotlight:not(.animate) .image {
        opacity: 0 !important;
    }

    /* 왼쪽에서 오는 이미지들 */
    #jangjahak .spotlight:not(.animate) .image,
    #chairman .spotlight:not(.animate) .image {
        transform: translateX(-100px) !important;
    }

    /* 오른쪽에서 오는 이미지들 */
    #vision .spotlight:not(.animate) .image,
    #principal .spotlight:not(.animate) .image {
        transform: translateX(100px) !important;
    }

    .spotlight.animate .image {
        opacity: 1 !important;
        transform: translateX(0) !important;
        transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* 각 섹션별 개별 딜레이 적용 */
    #jangjahak.animate .spotlight .image { transition-delay: 0.1s !important; }
    #vision.animate .spotlight .image { transition-delay: 0.2s !important; }
    #chairman.animate .spotlight .image { transition-delay: 0.3s !important; }
    #principal.animate .spotlight .image { transition-delay: 0.4s !important; }
}

/* 모바일/태블릿 - 애니메이션 없이 항상 표시 */
@media screen and (max-width: 980px) {
    #intro-header .spotlight .image,
    #intro-header .spotlight:not(.animate) .image,
    #intro-header.animate .spotlight .image,
    .spotlight .image,
    .spotlight:not(.animate) .image,
    .spotlight.animate .image {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }
    
    .spotlight .image img {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 이미지 호버 효과 - 모두 제거 */
.spotlight:hover .image img {
    transform: none !important;
    filter: brightness(1) contrast(1.1) !important;
    box-shadow: none !important;
}

/* 그라디언트 오버레이 효과 - 제거 */
.spotlight .image::before {
    display: none !important;
}

/* ========== 반응형 디자인 ========== */

/* 태블릿 (980px 이하) */
@media screen and (max-width: 980px) {
    .spotlight {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .spotlight .image {
        max-width: 900px !important;
        padding: 0 1rem !important;
        margin: 0 !important;
    }
    
    /* 헤더는 화면 꽉 차게 유지 */
    #intro-header .spotlight .image {
        max-width: 100% !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    #intro-header .spotlight .image img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    /* 모바일에서도 좌우 교차 유지 */
    #jangjahak .spotlight {
        flex-direction: row !important;
    }
    
    #vision .spotlight {
        flex-direction: row-reverse !important;
    }
    
    #chairman .spotlight {
        flex-direction: row !important;
    }
    
    #principal .spotlight {
        flex-direction: row-reverse !important;
    }
}

/* 모바일 (736px 이하) */
@media screen and (max-width: 736px) {
    .spotlight {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        display: block !important;
    }
    
    .spotlight .image {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
    }
    
    .spotlight .image img {
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .spotlight:hover .image img {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* 섹션 간격도 제거 */
    #jangjahak,
    #vision,
    #chairman,
    #principal {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
    
    /* 헤더는 모바일에서도 화면 꽉 차게 유지 - 여백 최소화 */
    #intro-header {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #intro-header .spotlight {
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    
    #intro-header .spotlight .image {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
    }
    
    #intro-header .spotlight .image img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        display: block !important;
    }
    
    /* 헤더 이미지는 호버 효과 없음 */
    #intro-header .spotlight:hover .image img {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* 모바일에서도 좌우 교차 유지 */
    #jangjahak .spotlight {
        flex-direction: row !important;
    }
    
    #vision .spotlight {
        flex-direction: row-reverse !important;
    }
    
    #chairman .spotlight {
        flex-direction: row !important;
    }
    
    #principal .spotlight {
        flex-direction: row-reverse !important;
    }
}

/* 작은 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .spotlight {
        display: block !important;
    }
    
    .spotlight .image {
        display: block !important;
    }
    
    .spotlight .image img {
        display: block !important;
    }
}

/* 접근성: 모션 민감성 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
    .spotlight .image,
    .spotlight .image img {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .spotlight .image {
        opacity: 1 !important;
    }

    .spotlight .image::before {
        display: none !important;
    }
}