@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');


.sound_only {
    display: none;
}

body {
    font-family: 'Pretendard', sans-serif;
    color: #212121;
}


/* ===== 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 애니메이션 - 재사용 가능한 클래스 */
    .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 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-up[data-delay="900"] { transition-delay: 0.9s !important; }
    .fadein-up[data-delay="1000"] { transition-delay: 1s !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; }
        
    
    
    /* 체크박스 기본 스타일 */
    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        border: 1px solid #212121;
        background-color: #ffffff;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }

    /* 체크박스 호버 상태 */
    input[type="checkbox"]:hover {
        border-color: #093A6C;
    }

    /* 체크박스 포커스 상태 */
    input[type="checkbox"]:focus {
        outline: none;
        border-color: #093A6C;
        box-shadow: 0 0 0 3px rgba(9, 58, 108, 0.1);
    }

    /* 체크박스 선택된 상태 */
    input[type="checkbox"]:checked {
        background-color: #093A6C;
        border-color: #093A6C;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M2 6l3 3 5-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
    }

    /* 체크박스 비활성화 상태 */
    input[type="checkbox"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }