/* 랜딩 페이지 전용 스타일 */

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

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    background: white;
    /* opacity: 0; - 이 부분이 화면을 숨기는 원인 */
    transition: opacity 0.3s ease-in-out;
}

/* 온보딩 화면이 활성일 때 */
body.landing-active {
    overflow: hidden;
    background: white;
    margin: 0;
    padding: 0;
}

.landing-container {
    width: 100vw;
    /* 동적 뷰포트 높이 사용 */
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    position: relative;
    background: white;
    overflow: hidden;
}

/* 배경 이미지들 */
.background-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-image {
    width: 100vw;
    /* 동적 뷰포트 높이 사용 */
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.blur-background {
    width: 120vw;
    height: 110vh;
    position: absolute;
    left: -10vw;
    top: -5vh;
    object-fit: cover;
    filter: blur(2px);
    opacity: 0.8;
}

/* 메인 콘텐츠 */
.content {
    position: relative;
    z-index: 10;
    /* 동적 뷰포트 높이 사용 */
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
}

.main-title {
    position: absolute;
    left: 4vw;
    top: 46vh;
    color: white;
    font-size: max(48px, min(16vw, 64px));
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.description {
    position: absolute;
    left: 5.3vw;
    top: 54vh;
    color: white;
    font-size: max(10px, min(3vw, 11.3px));
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.start-button {
    position: absolute;
    left: 50%;
    top: 67vh;
    transform: translateX(-50%);
    width: max(120px, min(37vw, 147px));
    height: max(50px, min(7vh, 60px));
    background: #101010;
    border: none;
    color: white;
    font-size: max(18px, min(6vw, 22px));
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* .start-button:hover {
    background: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.start-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
} */

/* 브랜드 로고 - 반응형 */
.brand-logo {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: min(8vw, 30px);
    height: min(4vh, 35px);
}

.logo-elements {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(max(0.5, min(1, 0.8)));
}

.logo-part {
    background: white;
    position: absolute;
}

/* 로고 요소들 - 비율 유지 */
.logo-part-1 {
    width: 9.86px;
    height: 6.82px;
    left: 0.74px;
    top: 23.22px;
}

.logo-part-2 {
    width: 7.07px;
    height: 7.07px;
    left: 18.82px;
    top: 23.09px;
    border-radius: 50%;
}

.logo-part-3 {
    width: 7.07px;
    height: 7.07px;
    left: 11.25px;
    top: 23.09px;
    border-radius: 50%;
}

.logo-part-4 {
    width: 4.08px;
    height: 6.82px;
    left: 26.55px;
    top: 23.22px;
}

.logo-part-5 {
    width: 6.08px;
    height: 7.07px;
    left: 22.68px;
    top: 4.81px;
}

/* 반응형 디자인 */

/* 모바일 세로 모드 */
@media (max-width: 768px) and (orientation: portrait) {
    .main-title {
        top: 45vh;
        font-size: max(36px, min(14vw, 64px));
    }
    
    .description {
        top: 53vh;
        font-size: max(10px, min(2.8vw, 12px));
    }
    
    .start-button {
        top: 65vh;
        width: max(140px, min(40vw, 160px));
        height: max(50px, min(8vh, 60px));
    }
}

/* 가로 모드 또는 태블릿 */
@media (orientation: landscape) or (min-width: 768px) {
    .main-title {
        top: 42vh;
        left: 6vw;
        font-size: max(40px, min(8vw, 64px));
    }
    
    .description {
        top: 50vh;
        left: 6vw;
        font-size: max(11px, min(1.5vw, 14px));
    }
    
    .start-button {
        top: 62vh;
        width: max(140px, min(20vw, 160px));
        height: max(50px, min(6vh, 60px));
    }
    
    .brand-logo {
        bottom: 5vh;
    }
}

/* 아주 작은 화면 */
@media (max-width: 360px) {
    .main-title {
        font-size: max(28px, 12vw);
        top: 44vh;
    }
    
    .description {
        font-size: max(9px, 2.5vw);
        top: 52vh;
    }
    
    .start-button {
        width: min(45vw, 140px);
        font-size: max(16px, 5vw);
    }
}

/* 큰 화면 (데스크탑) */
@media (min-width: 1024px) {
    .main-title {
        font-size: 64px;
        left: 8vw;
    }
    
    .description {
        font-size: 12px;
        left: 8vw;
    }
    
    .start-button {
        width: 160px;
        height: 60px;
        font-size: 22px;
    }
}

/* 로딩 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-title {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.description {
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.start-button {
    animation: fadeInUp 0.8s ease-out 0.9s both;
}