/* ======================================= */
/* 기본 및 공통 스타일 (Base & Common) */
/* ======================================= */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Pretendard', sans-serif;
    /* height: 100%; 와 position: relative; 는 스크롤 페이지에서는 불필요하므로 삭제합니다. */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 헤더 (Header) */

header {
    position: fixed; /* absolute에서 fixed로 변경하여 스크롤해도 상단에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    transition: background-color 0.3s; /* 스크롤 시 배경색 변경을 위함 (선택) */
}

header nav.desktop-menu { display: block; }
#mobile-menu { display: none; } /* 모바일 메뉴는 기본적으로 숨김 */
.hamburger-menu { display: none; }

/* 헤더 내비게이션, 로고 등은 기존 스타일 유지 */
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }
nav a { color: #e0e0e0; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 1px; transition: color 0.3s ease; }
nav a:hover { color: #5ea6ff; }
.logo img { height: 80px; transition: transform 0.4s ease; }
.logo img:hover { transform: scale(1.05); }

.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
/* 스크롤바 숨기기 */
.snap-container::-webkit-scrollbar {
    display: none;
}

.snap-container {
    scrollbar-width: none;
}

.snap-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
/* --- 1. 비디오 섹션 --- */
.video-section {
    position: relative; /* 자식 요소인 overlay-text의 기준점 */
    width: 100%;
    overflow: hidden;
    margin: 0 auto;   /* 컨테이너 중앙 정렬 */
    max-height: 100vh;
    /* 동영상 크기 조절의 핵심: 화면 비율 설정 */
    aspect-ratio: 21 / 9; /* 16:9 비율 (원하면 21 / 9 등으로 변경) */
}

.video-section .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: -1;
}

.video-section .overlay-text {
    /* 텍스트가 비디오 위에 잘 보이도록 z-index 추가 */
    position: absolute;
    top: 45%;
    z-index: 1;
}

.video-section .overlay-text h1 {
    font-size: 48px;
    color: #ffffff;
    margin-bottom: 20px;
}

/* 어두운 오버레이 효과 */
.video-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgb(255, 255, 255);
    animation: fadeIn 3s ease-in-out;;
}

/* --- 2, 3, 4. 텍스트 섹션 --- */
.h2-section, .h3-section, .h4-section {
    padding: 60px 20px;
}
.h2-section h2, .h3-section h3, .h4-section h4 {
    font-size: 36px;
    margin-bottom: 20px;
}
.h2-section p, .h3-section p, .h4-section p {
    font-size: 15px;
    color: #a0a0a0;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}
.h3-section { background-color: #f0f0f0; color: #1a1a1a; }
.h3-section p { color: #333; }

/* --- 5. 마지막 섹션 (푸터 포함) --- */
.contact-section {
    justify-content: space-between; /* 내용을 위(문의하기)와 아래(푸터)로 분산 */
    padding: 150px 20px;
    position: relative; /* 자식 요소의 위치 기준 */
}
.contact-section h1 { font-size: 36px; top: 45%; }
.contact-section .social-icons1 {font-size: 50px; color: #ffffff;}

footer {
    position: static; /* position 관련 속성 모두 제거하여 자연스럽게 배치 */
    width: 100%;
    max-width: 1100px; /* 푸터 내용 최대 너비 */
    background-color: transparent; /* 섹션 배경색을 따름 */
    color: #a0a0a0;
    padding: 20px 0; /* 상하 여백만 줌 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.social-icons a, .footer-nav a { color: #a0a0a0; margin: 0 1px; text-decoration: none; transition: color 0.3s; }
.social-icons a:hover, .footer-nav a:hover { color: #ffffff; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }

/* ======================================= */
/* 모바일 반응형 (Media Queries) */
/* ======================================= */

@media (max-width: 768px) {
    header {
        padding: 15px 20px;
        justify-content: center;
    }
    /* PC 메뉴 숨기고, 햄버거 메뉴 보이기 */
    header nav.desktop-menu {
        display: none; 
    }
    #mobile-menu {
        display: none;
    }
    .is-active {
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #000000;
        opacity: 0.7;
        padding: 15px 0;
        animation: fadeIn 1s
    }
    @keyframes fadeIn{
        from { opacity: 0; }
        to { opacity: 0.7; }
    }
    .is-active ul {
        flex-direction: column;
        align-items: center;
    }

    .is-active ul {
        flex-direction: column;
        align-items: center;
    }
    .is-active ul li a{
        color: white;
        padding: 10px 20px;
        font-size: 18px;
        display: block;
    }
    .hamburger-menu {
        position: absolute;
        top: 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .hamburger-menu .bar {
        width: 25px;
        height: 3px;
        background-color: #ffffff;
    }
    .logo {
        position: static; /* 모바일에서는 중앙 정렬을 위해 static으로 변경 */
        transform: none;
        left: auto;
    }
    .logo img {
        height: 50px;
    }
    .h2-section h2, .h3-section h3, .h4-section h4, .contact-section h1, .video-section .overlay-text h1 {
        font-size: 26px;
    }
    .h2-section p, .h3-section p, .h4-section p {
        font-size: 14px;
    }
    footer {
        margin-top: 60px;
        font-size: 12px;
    }
    .footer-nav{
        margin : 3px 0;
    }
    .footer-top {
        flex-direction: column;
        gap: 20px;
        font-size: 12px;
    }
}