* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: black; /* 배경색 */
}

.Top-line {
    display: grid; /* 격자정렬 */
    grid-template-columns: 1fr auto 1fr; /* 3칸배치 */
    align-items: center; /* 세로중앙 */
    min-height: 60px;
    margin-top: -10px; /* 위로이동 */
}

.left {
    display: flex; /* 가로정렬 */
    align-items: center; /* 세로중앙 */
    justify-content: flex-start; /* 왼쪽정렬 */
}

.center {
    text-align: center; /* 글자가운데 */
}

.right {
    display: flex; /* 가로정렬 */
    justify-content: flex-end; /* 오른쪽정렬 */
    align-items: center; /* 세로중앙 */
    gap: 20px; /* 간격 */
    margin-right: 35px; /* 오른쪽여백 */
    height: 60px; /* 높이 */
}

#Logo {
    max-width: 130px; /* 최대크기 */
    transition: 0.3s ease; /* 부드럽게 */
    cursor: pointer; /* 손모양 */
}

#Logo:hover { 
    transform: scale(1.05); /* 크기증가 */
    opacity: 0.85; /* 투명도 */
}

.Top-line h1 {
    color: white; /* 글자색 */
    font-family: "Gravitas One", serif; /* 폰트 */
    font-size: 45px; /* 글자크기 */
    letter-spacing: 5px; /* 자간 */
    line-height: 60px; /* 줄높이 */
    margin: 0 0 0 1px; /* 여백 */
    font-weight: 400; /* 두께 */
}

@media (max-width: 1300px) { /* 반응형 */

    .center {
        display: none; /* 숨기기 */
    }

    .Top-line {
        grid-template-columns: 1fr 1fr;
    }

}

.nav-link {
    color: rgba(255,255,255,0.85); /* 글자색 */
    text-decoration: none; /* 밑줄제거 */
    font-family: "Oswald", sans-serif; /* 폰트 */
    font-size: 20px; /* 글자크기 */
    letter-spacing: 2px; /* 자간 */
}

.nav-link:hover { opacity: 0.6; } /* 투명도 */

.menu-group { 
    display: flex; 
    gap: 30px; /* 간격 */
}

.sns-group {
    display: flex;
    gap: 20px; /* 간격 */
    margin-left: 10px; /* 왼쪽여백 */
    height: 60px; /* 높이 */
    align-items: center; /* 세로중앙 */
    margin-top: 7px; /* 위여백 */
}

.right img { width: 32px; } /* 아이콘크기 */

#Youtube { transform: scale(1.1); } 
#instagram { transform: scale(0.95); }

.Main-Video {
    position: relative;
    width: 100%; /* 전체너비 */
    height: 100vh; /* 화면높이 */
    overflow: hidden; /* 넘침숨김 */
}

#bg-video {
    position: absolute;
    width: 100%; /* 전체너비 */
    height: 100%; /* 전체높이 */
    object-fit: cover; /* 꽉채움 */
    z-index: -1; /* 뒤로 */
}

.Cinematic-Footer {
    display: flex; /* 가로정렬 */
    align-items: center; /* 세로중앙 */
    padding: 20px 40px; /* 안쪽여백 */
    background: rgb(29,29,29); /* 배경색 */
    border-top: 1px solid rgba(188,191,194,0.2); /* 위선 */
    font-family: "Oswald", sans-serif; /* 폰트 */
    color: rgba(188,191,194,0.7); /* 글자색 */
    letter-spacing: 2px; /* 자간 */
}

.footer-left,
.footer-center,
.footer-right {
    flex: 1; /* 공간분배 */
}

.footer-left { 
    font-size: 14px; /* 글자크기 */
}

.footer-center {
    display: flex; /* 가로정렬 */
    align-items: center; /* 세로중앙 */
    justify-content: center; /* 가운데 */
    gap: 12px; /* 간격 */
}

.footer-right {
    font-size: 13px; /* 글자크기 */
    text-align: right; /* 오른쪽정렬 */
}

.footer-center img { 
    width: 18px; /* 아이콘크기 */
}

.footer-center a {
    text-decoration: none; /* 밑줄제거 */
    color: rgb(188,191,194); /* 글자색 */
    font-size: 16px; /* 글자크기 */
}

.footer-center a:hover { 
    opacity: 0.6; /* 투명도 */
}

@media (max-width: 768px) { /* 모바일 */

    .Top-line {
        display: flex;
        align-items: center; 
        padding: 0 22px 0 0; /* 안쪽여백 */
        margin-top: 0;
        min-height: 55px; /* 최소높이 */
    }

    .left {
        flex: 1; 
        display: flex;
        justify-content: flex-start;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        margin-right: 0;
        gap: 12px; /* 간격 */
    }

    .menu-group {
        gap: 18px; /* 간격 */
    }

    .nav-link {
        font-size: 15px; /* 글자축소 */
        letter-spacing: 1px; /* 자간축소 */
    }

    #Logo {
        max-width: 80px; /* 로고축소 */
    }

    .right img {
        width: 20px; /* 아이콘축소 */
    }

    .Cinematic-Footer {
        flex-direction: column;
        align-items: center; /* 가운데 */
        padding: 9px 15px; /* 여백 */
        gap: 6px; /* 간격 */
        background: #000; /* 배경색 */
    }

    .footer-left,
    .footer-center {
        flex: none; 
        font-size: 12px; /* 글자크기 */
        text-align: center; /* 가운데 */
    }

    .footer-right { 
        display: none;
    }

    .footer-center img { 
        width: 16px; /* 아이콘축소 */
    }

    .footer-center a { 
        font-size: 12px; /* 글자 크기 */
    }
}