body, html {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
             background-color: #000000;
             color: #ffffff;
             font-family: 'Pretendard', sans-serif;
             overflow-x: hidden; /* 가로 스크롤 방지 */
             position: relative; /* 푸터 absolute positioning 기준 */
         }
 
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 25px 50px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeIn 1s ease-out;
            z-index: 10; /* 푸터보다 위에 표시 */
        }

        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);
        }

        .slogan {
            font-size: 48px;
            font-weight: 700;
            margin: 0 0 30px 0;
            letter-spacing: -1px;
        }

        .description {
            font-size: 17px;
            color: #ffffff;
            line-height: 1.7;
            font-weight: 400;
            max-width: 650px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            header {
                padding: 20px;
                flex-direction: column;
                gap: 20px;
            }

            .logo img {
                order: -1;
                height: 40px;
            }

            nav ul {
                gap: 20px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .slogan {
                font-size: 32px;
            }

            .description {
                font-size: 16px;
                padding: 0 20px;
            }
            main {
                padding-bottom: 220px; /* 모바일 푸터 높이 고려 */
            }
        }

        /* --- 푸터 스타일 --- */
        footer {
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #000000; /* 푸터 배경색 */
            color: #a0a0a0;
            padding: 30px 50px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            font-size: 14px;
            animation: fadeIn 1s ease-out;
        }

        .footer-top {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .social-icons a {
            color: #a0a0a0;
            font-size: 18px;
            margin: 0 10px;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .social-icons a:hover {
            color: #ffffff;
        }

        .footer-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        .footer-nav a {
            color: #a0a0a0;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-nav a:hover {
            color: #ffffff;
        }

        .contact-info {
            text-align: center;
        }

        .copyright {
            font-size: 12px;
            margin-top: 15px;
        }

        /* --- 모바일 푸터 스타일 --- */
        @media (max-width: 768px) {
            footer {
                padding: 20px;
                align-items: flex-start;
                gap: 10px;
            }
            .footer-top {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            .footer-nav ul {
                flex-wrap: wrap;
                gap: 10px;
            }
            .contact-info {
                text-align: left;
            }
            .social-icons a {
                margin: 0 5px;
                font-size: 16px;
            }
        }
   /* style.css 파일 */

/* logo_style.css */

main {
    width: 100%;
    /* main 태그는 단순한 영역 표시 역할만 하도록 비워둡니다. */
    /* 개별 페이지의 여백은 각 섹션에서 직접 처리합니다. */
    padding: 80px 0; /* 위아래 여백을 추가해 콘텐츠를 중앙으로 보냅니다. */
    box-sizing: border-box;
}

.image-overlay-container {
    position: relative; /* 자식 요소인 overlay-text의 기준점 */
    width: 100%;

    margin: 0 auto;    /* 컨테이너 중앙 정렬 */
    
    /* 동영상 크기 조절의 핵심: 화면 비율 설정 */
    aspect-ratio: 21 / 9; /* 16:9 비율 (원하면 21 / 9 등으로 변경) */
    margin-top: 130px; /* 상단 여백 추가 */
    border-radius: 12px;
    overflow: hidden; /* 둥근 모서리 밖으로 동영상이 나가지 않게 함 */
}

/* ★★★ 가장 중요한 수정: img가 아닌 video를 직접 스타일링 ★★★ */
.image-overlay-container video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율을 유지하면서 컨테이너를 꽉 채움 */
}

.overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 2; /* 텍스트가 오버레이보다 위에 오도록 함 */
}

/* 텍스트 가독성을 위한 반투명 오버레이 */
.overlay-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: inherit;
    z-index: -1; /* 텍스트보다 뒤에 위치 */
}

.overlay-text .slogan {
    margin-bottom: 20px;
}

.overlay-text .description {
    max-width: 600px;
}

/* 모바일 반응형 스타일 (기존 코드 유지) */
@media (max-width: 768px) {
    main {
        padding: 40px 15px;
    }
    .overlay-text .slogan {
        font-size: 32px;
    }
    .overlay-text .description {
        font-size: 16px;
    }
}