@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'Bahnschrift';
    src: local('Bahnschrift');
    font-weight: normal;
    font-style: normal;
}

/*font-semi-condensed 옵션*/
.font-semi-condensed { font-stretch: semi-condensed; }

.sound_only {
    display: none;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
}


/* ===== FADEIN 애니메이션 - 공통 사용 가능 ===== */

/* FadeIn 애니메이션 - 이동 없음 */
.fadein {
    opacity: 0 !important;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .fadein.show {
    opacity: 1 !important;
    }
    
    /* FadeIn Up 애니메이션 - Tailwind 변수를 활용해 기존 transform과 합성 */
    .fadein-up {
        opacity: 0 !important;
        transform: translateY(40px) !important;
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .fadein-up.show {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    

    /* FadeIn Left 애니메이션 */
    .fadein-left {
        opacity: 0 !important;
        transform: translateX(60px) !important;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
    .fadein-left.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
    }

    
    /* FadeIn Right 애니메이션 */
    .fadein-right {
    opacity: 0 !important;
    transform: translateX(-60px) !important;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .fadein-right.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
    }
    
    /* 애니메이션 지연 시간 */
    .fadein-up[data-delay="0"] { transition-delay: 0s !important; }
    .fadein-up[data-delay="100"] { transition-delay: 0.1s !important; }
    .fadein-up[data-delay="200"] { transition-delay: 0.2s !important; }
    .fadein-up[data-delay="300"] { transition-delay: 0.3s !important; }
    .fadein-up[data-delay="400"] { transition-delay: 0.4s !important; }
    .fadein-up[data-delay="500"] { transition-delay: 0.5s !important; }
    .fadein-up[data-delay="600"] { transition-delay: 0.6s !important; }
    .fadein-up[data-delay="700"] { transition-delay: 0.7s !important; }
    .fadein-up[data-delay="800"] { transition-delay: 0.8s !important; }
    

    .fadein-left[data-delay="0"] { transition-delay: 0s !important; }
    .fadein-left[data-delay="100"] { transition-delay: 0.2s !important; }
    .fadein-left[data-delay="200"] { transition-delay: 0.2s !important; }
    .fadein-left[data-delay="300"] { transition-delay: 0.4s !important; }
    .fadein-left[data-delay="400"] { transition-delay: 0.4s !important; }
    .fadein-left[data-delay="500"] { transition-delay: 0.5s !important; }
    .fadein-left[data-delay="600"] { transition-delay: 0.6s !important; }
    .fadein-left[data-delay="700"] { transition-delay: 0.7s !important; }
    .fadein-left[data-delay="800"] { transition-delay: 0.8s !important; }
    
    .fadein-right[data-delay="0"] { transition-delay: 0s !important; }
    .fadein-right[data-delay="100"] { transition-delay: 0.2s !important; }
    .fadein-right[data-delay="200"] { transition-delay: 0.2s !important; }
    .fadein-right[data-delay="300"] { transition-delay: 0.4s !important; }
    .fadein-right[data-delay="400"] { transition-delay: 0.4s !important; }
    .fadein-right[data-delay="500"] { transition-delay: 0.5s !important; }
    .fadein-right[data-delay="600"] { transition-delay: 0.6s !important; }
    .fadein-right[data-delay="700"] { transition-delay: 0.7s !important; }
    .fadein-right[data-delay="800"] { transition-delay: 0.8s !important; }
    
    /* ===== SLIDE UP 애니메이션 - 아래에서 위로 밀어올리듯 드러나는 효과 ===== */
    
    /* SlideUp 애니메이션 - 아래에 완전히 숨겨져 있다가 위로 올라오는 효과 */
    .slide-up {
        overflow: hidden !important;
        position: relative !important;
        height: auto !important;
    }
    
    .slide-up > div {
        transform: translateY(calc(100% + 10px)) !important;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .slide-up.show > div {
        transform: translateY(0) !important;
    }
    
    /* SlideUp 애니메이션 지연 시간 */
    .slide-up[data-delay="0"] { transition-delay: 0s !important; }
    .slide-up[data-delay="100"] { transition-delay: 0.1s !important; }
    .slide-up[data-delay="200"] { transition-delay: 0.2s !important; }
    .slide-up[data-delay="300"] { transition-delay: 0.3s !important; }
    .slide-up[data-delay="400"] { transition-delay: 0.4s !important; }
    .slide-up[data-delay="500"] { transition-delay: 0.5s !important; }
    .slide-up[data-delay="600"] { transition-delay: 0.6s !important; }
    .slide-up[data-delay="700"] { transition-delay: 0.7s !important; }
    .slide-up[data-delay="800"] { transition-delay: 0.8s !important; }
    .slide-up[data-delay="900"] { transition-delay: 0.9s !important; }
    .slide-up[data-delay="1000"] { transition-delay: 1s !important; }
    .slide-up[data-delay="2000"] { transition-delay: 2s !important; }
    .slide-up[data-delay="3000"] { transition-delay: 3s !important; }
    
    /* ===== SCALE IN 애니메이션 - 중앙부터 크기 커지는 효과 ===== */
    
    /* ScaleIn 애니메이션 - 중앙부터 크기 커지는 효과 */
    .scale-in {
        opacity: 0 !important;
        transform: scale(0.3) !important;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .scale-in.show {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
   
    
    /* ScaleIn 애니메이션 지연 시간 */
    .scale-in[data-delay="0"] { transition-delay: 0s !important; }
    .scale-in[data-delay="100"] { transition-delay: 0.1s !important; }
    .scale-in[data-delay="200"] { transition-delay: 0.2s !important; }
    .scale-in[data-delay="300"] { transition-delay: 0.3s !important; }
    .scale-in[data-delay="400"] { transition-delay: 0.4s !important; }
    .scale-in[data-delay="500"] { transition-delay: 0.5s !important; }
    .scale-in[data-delay="600"] { transition-delay: 0.6s !important; }
    .scale-in[data-delay="700"] { transition-delay: 0.7s !important; }
    .scale-in[data-delay="800"] { transition-delay: 0.8s !important; }
    .scale-in[data-delay="900"] { transition-delay: 0.9s !important; }
    .scale-in[data-delay="1000"] { transition-delay: 1s !important; }
    
    /* ===== 드롭다운 메뉴 - 메뉴 위에 마우스가 있을 때도 열려있도록 ===== */
    .dropdown-menu:hover .dropdown-content,
    .dropdown-menu .dropdown-content:hover {
        opacity: 1 !important;
        visibility: visible !important;
    }