/* ===== 자주묻는질문 애니메이션 CSS ===== */

/* 기본 애니메이션 클래스 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 메인 섹션 - 메인 타이틀만 애니메이션 */
.faq_main_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.faq_main_title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ 섹션 1 - 배경은 그대로, 컨텐츠만 올라오는 애니메이션 */
.faq_section1_container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

.faq_section1_container.animate {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ 섹션 1 배경은 애니메이션 없이 기본 상태로 설정 */
.faq_section1 {
    opacity: 1;
    transform: none;
    transition: none;
}

/* FAQ 아코디언 기능 */
.faq_faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.faq_faq_answer.active {
    max-height: 200px; /* 충분한 높이로 설정 */
}

.faq_faq_icon {
    transition: transform 0.3s ease-in-out;
}

.faq_faq_icon.active {
    transform: rotate(180deg);
}

/* 모바일 반응형 애니메이션 조정 */
@media (max-width: 767px) {
    .animate-on-scroll {
        transform: translateY(20px);
    }
}

/* 애니메이션 완료 후 will-change 제거 */
.animate-on-scroll.animate,
.faq_main_title.animate,
.faq_section1_container.animate {
    will-change: auto;
}