        /* 페이드 트랜지션 효과를 위한 스타일 */
        .fade-image {
            transition: opacity 1s ease-in-out; /* 1초 동안 부드러운 페이드 효과 */
            position: absolute; /* 모든 이미지를 겹치게 배치 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 초기에는 모두 숨김 */
        }
        /* 애니메이션 컨테이너의 크기 및 중앙 정렬 */
        .animation-container {
            height: 46px;
            overflow: hidden;
            position: relative;                        
        }
        /* 이미지 스타일 조정 */
        .animation-container img {
            object-fit: contain; /* 이미지가 컨테이너에 맞게 조정되도록 */
        }
        @media (min-width:640px){
            .animation-container{
                height:90px;
            }
        }

    /* Sub-element Fade Up */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
      will-change: opacity, transform;
    }
    .fade-up.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Section 4 타이틀 좌우 슬라이드 모션 */
    .slide-from-left {
      opacity: 0;
      transform: translateX(-100px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .slide-from-right {
      opacity: 0;
      transform: translateX(100px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .slide-from-left.active, .slide-from-right.active {
      opacity: 1;
      transform: translateX(0);
    }
    
    /* Stagger delay classes */
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    .delay-700 { transition-delay: 700ms; }
    .delay-1200 { transition-delay: 1200ms; }

    /* Custom Accordion smooth transition */
    .accordion-content, .notice-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out;
      opacity: 0;
    }
    .accordion-content.open, .notice-content.open {
      opacity: 1;
    }    

    /* 섹션 6 후기 카드: 가운데(활성) 카드는 크고 위로, 양옆 카드는 작고 아래로 */
    .review-swiper .swiper-slide { width: 18rem; }
    @media (min-width: 768px) { .review-swiper .swiper-slide { width: 22rem; } }
    .review-card {
      background: #e7e6f7;
      transform: translateY(1.5rem) scale(.82);
      transition: transform .5s ease, background-color .5s ease, box-shadow .5s ease;
    }
    .review-swiper .swiper-slide-active .review-card {
      background: #fff;
      transform: none;
      box-shadow: 2px 4px 10px rgba(0,0,0,.18);
    }
    /* 양옆 카드는 후기 3줄까지만, 가운데 카드는 전체 노출 */
    .review-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .review-swiper .swiper-slide-active .review-text,
    .review-swiper.measuring .review-text { -webkit-line-clamp: unset; }
    @media (prefers-reduced-motion: reduce) {
      .review-card { transition: none; }
    }


    /* 섹션 7 학습 관리 롤링: 도트를 이미지 아래에 배치 */
    .feed-swiper-pagination { position: static; margin-top: 1rem; text-align: center; }
    .feed-swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px; }
    .feed-swiper-pagination .swiper-pagination-bullet-active { background: #2823aa; }