/* 1. Global & Layout */
body {
    margin: 0; padding: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 100vh; background-color: white; overflow-x: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-wrapper, .menu-container {
    display: flex; flex-direction: column; align-items: center; width: 100%;
}
.main-wrapper { gap: 15px; }
.menu-container { gap: 5px; margin: 0 auto; }

.header-logo { height: auto; max-height: 40px; width: auto; object-fit: contain; }

/* 2. Logo Hover Interaction (배경색 변경 포함) */
body:has(.logo-link:hover) { background-color: #0000bd; } /* 로고 호버 시에만 배경 변경 */

body:has(.logo-link:hover) .logo-hover-img { display: block; }
body:has(.logo-link:hover) footer,
body:has(.logo-link:hover) .sns-icons a { color: white !important; }

.logo-hover-img, .popup-img {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
}
.logo-hover-img { width: 60%; }
.popup-img { width: 70%; }

/* 3. Menu Hover Interaction (배경은 흰색 유지, 글자색 전체 변경) */
/* 메뉴 컨테이너에 호버가 일어날 때 내부의 모든 hover-text를 흰색으로 */
.menu-container:has(.hover-text:hover) .hover-text {
    color: white !important;
}

/* 현재 호버 중인 메뉴에만 밑줄 표시 */
.hover-text:hover { text-decoration: underline !important; }
.hover-text:hover .popup-img { display: block; }

/* 메뉴 호버 시 SNS 아이콘 색상 변경 (흰색 배경에서 흰색 글씨는 안 보이므로 필요시 조정) */
body:has(.hover-text:hover) .sns-icons a { color: white !important; }

/* 로고 교체 로직 */
.white-logo { display: none; }
.main-wrapper:has(.hover-text:hover) .default-logo { display: none; }
.main-wrapper:has(.hover-text:hover) .white-logo { display: inline-block; }

/* 4. Basic Styles & Elements */
.hover-text {
    position: relative; font-size: 30px; letter-spacing: 1px; font-weight: 300;
    color: black; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.hover-text:link, .hover-text:visited { color: black; }

.sns-icons { position: fixed; bottom: 45px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 101; }
.sns-icons a { color: black; text-decoration: none; transition: opacity 0.3s; }
.sns-icons a:hover { opacity: 0.5; }

footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #888; letter-spacing: 1px; z-index: 100; }


@media (max-width: 768px) {
    .default-logo, .white-logo { display: none !important; } 
    .mobile-logo { display: inline-block !important; }      
    body:has(.logo-link:hover) { 
        background-color: white !important; 
    }
    body.bg-black { 
        background-color: black !important; 
    }
    body:has(.logo-link:hover) .logo-hover-img { 
        display: none !important; 
    }
    .hover-text.all-white {
        color: white !important;
    }
    
    .header-logo { max-height: 130px; }
    .menu-container { flex-direction: column; width: 100%; }
    .hover-text { font-size: 20px; width: fit-content; padding: 5px 0; }
    .hover-text.is-tapped { text-decoration: underline !important; }
    .hover-text.is-tapped .popup-img { display: block !important; }
    .popup-img { width: 90% !important; }
    footer { width: 100%; left: 0; bottom: 10px; text-align: center; transform: none; font-size: 10px; }
    }


.mobile-logo { display: none; }