@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

.sound_only {
    display: none;
}

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

h1, h2, h3, h4, h5, h6 {
    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 애니메이션 - 재사용 가능한 클래스 */
    .fadein-up {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: all 1s 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(100px) !important;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .fadein-right.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
    }
    
    /* FadeIn Left 애니메이션 - 왼쪽에서 들어오면서 fadein */
    .fadein-left {
    opacity: 0 !important;
    transform: translateX(-100px) !important;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .fadein-left.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; }
    
    .fadein-left[data-delay="0"] { transition-delay: 0s !important; }
    .fadein-left[data-delay="100"] { transition-delay: 0.1s !important; }
    .fadein-left[data-delay="200"] { transition-delay: 0.2s !important; }
    .fadein-left[data-delay="300"] { transition-delay: 0.3s !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; }    
    
    
    /* ===== 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 1s 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; }
        




/* 검색창 focus 시 파란색 outline 제거 및 border 색상 변경 */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
    outline: none;
    box-shadow: none;
    border-color: #E57750 !important;
}

input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="password"]:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #E57750 !important;
}

/* 셀렉트박스 focus 시 파란색 outline 제거 및 border 색상 변경 */
select:focus {
    outline: none;
    box-shadow: none;
    border-color: #E57750 !important;
}

select:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #E57750 !important;
}


/* 체크박스 체크 시 색상 변경 */
input[type="checkbox"] {
    accent-color: #E57750 !important;
}

input[type="checkbox"]:checked {
    accent-color: #E57750 !important;
    background-color: #E57750 !important;
    border-color: #E57750 !important;
}

/* 커스텀 체크박스 스타일링 (더 세밀한 제어) */
input[type="checkbox"]:checked::before {
    background-color: #E57750 !important;
}

input[type="checkbox"]:checked::after {
    border-color: #E57750 !important;
}

/* 텍스트 줄 제한 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}