/* ===================================
   기본 스크롤 시스템 (스냅 없음)
   =================================== */

/* 전체 페이지 컨테이너 */
#fullpage {
    position: relative;
    width: 100%;
}

/* 스크롤 스무스 효과 */
html {
    scroll-behavior: smooth;
}

/* 섹션 기본 스타일 - 정확히 100vh */
.section {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===================================
   섹션별 높이 정확히 100vh로 통일
   =================================== */

#main-banner {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
}

#project {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

#gird-section {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

#premium {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
}

#unit {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

#overview {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

#form-mail {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* 프리미엄 섹션 내부 조정 */
#premium .premium-section {
    height: 100vh;
    display: flex;
    align-items: center;
}

/* 푸터는 섹션 밖에 위치하지만 스크롤 가능하도록 설정 */
.footer {
    position: relative;
    z-index: 10;
    min-height: 27vh; /* 푸터 영역 최소 높이 설정 */
}

/* 프리미엄 섹션 백그라운드 이미지 스타일 - 빠르고 부드러운 전환 */
.premium-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.premium-background.active {
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 프리미엄 섹션 오버레이 - 배경색 제거하고 어두운 오버레이만 적용 */
.premium-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 어두운 오버레이만 적용 */
    z-index: 1;
}

/* ===================================
   반응형 디자인 (태블릿)
   =================================== */
@media (max-width: 1024px) {
    .section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
}

/* ===================================
   반응형 디자인 (모바일)
   =================================== */
@media (max-width: 768px) {
    .section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
}

/* ===================================
   반응형 디자인 (소형 모바일)
   =================================== */
@media (max-width: 480px) {
    .section {
        height: auto;
        min-height: 100vh;
        max-height: none;
    }
}



