/* Pretendard 폰트 Import */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* Jalnan 폰트 Import */
@font-face {
    font-family: 'Jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    line-height: 1.15;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    font-weight: 400;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
}

/* 공통 타이틀 스타일 */
.title {
    font-size: clamp(30px, 4vw, 75px) !important;
    font-weight: 700;
    color: #191F28;
    line-height: clamp(36px, 5vw, 95px) !important;
    word-break: keep-all;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* 공통 디스크립션 스타일 */
.description {
    font-size: clamp(14px, 2vw, 32px) !important;
    font-weight: 400;
    color: #333D4B;
    word-break: keep-all;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* 작은 텍스트 스타일 */
.small-text {
    font-size: clamp(11px, 1.5vw, 20px) !important;
    font-weight: 300;
    color: #333D4B;
    word-break: keep-all;
    hyphens: auto;
    overflow-wrap: break-word;
    margin-top: -30px;
}

/* 모바일에서는 clamp 대신 고정값 사용 */
@media (max-width: 768px) {
    .title {
        font-size: 40px !important;
        line-height: 48px !important;
        text-align: center !important;
    }
    
    .description {
        font-size: 17px !important;
        text-align: center !important;
    }
    
    .small-text {
        font-size: 14px !important;
        text-align: center !important;
        margin-top: -8px;
    }
    
    .title.large {
        font-size: 35px !important;
        line-height: 45px !important;
        text-align: center !important;
    }
    
    .title.medium {
        font-size: 40px !important;
        line-height: 48px !important;
        text-align: center !important;
    }
}

/* 섹션1 타이틀 (흰색 텍스트) */
.title.white {
    color: #fff !important;
}

/* 섹션1 디스크립션 (흰색 텍스트) */
.description.white {
    color: #fff !important;
}

/* 작은 텍스트 (흰색) */
.small-text.white {
    color: #fff !important;
}

/* 섹션5 타이틀 (흰색 텍스트, 더 큰 크기) */
.title.large {
    font-size: clamp(28px, 4vw, 75px) !important;
    line-height: clamp(35px, 5vw, 95px) !important;
}

/* 섹션3, 섹션4 타이틀 (조금 작은 크기) */
.title.medium {
    font-size: clamp(30px, 4vw, 70px) !important;
}

/* ========== 스크롤 애니메이션 ========== */

/* 초기 상태 (숨김) */
.animate-element {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* 애니메이션 지연 클래스들 */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }
.animate-delay-6 { transition-delay: 0.6s; }

/* 표시 상태 (보임) */
.animate-element.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 좌측에서 나타나는 애니메이션 */
.animate-from-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-from-left.animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 우측에서 나타나는 애니메이션 */
.animate-from-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-from-right.animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 스케일 애니메이션 */
.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-scale.animate-visible {
    opacity: 1;
    transform: scale(1);
}

/* 페이드 애니메이션 */
.animate-fade {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-fade.animate-visible {
    opacity: 1;
}

/* 카드 애니메이션 (스태거 효과) */
.animate-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-card.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 마키 애니메이션 */
.animate-marquee {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-marquee.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 폰 이미지 애니메이션 */
.animate-phone {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-phone.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 섹션5 배경 애니메이션 */
.animate-background {
    opacity: 0;
    transform: scale(1.05);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-background.animate-visible {
    opacity: 1;
    transform: scale(1);
}