/* Header Logo Styles */

/* 로고 섹션 기본 스타일 */
.logo-section {
    display: flex;
    align-items: center;
    margin-left: -30px;
}

.logo {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

/* 로고 이미지 기본 스타일 */
.logo-image {
    width: 195px;
    height: 35px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* 기본 로고 (logo_fixed.png) */
.logo-image.default-logo {
    opacity: 1;
}

/* 호버 로고 (logo.png) - 기본적으로 숨김 */
.logo-image.hover-logo {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* 메인페이지에서만 메가메뉴 호버 시 로고 변경 */
body:not(.sub-page) .nav-item:hover~.logo-section .logo-image.default-logo,
body:not(.sub-page) .mega-dropdown:hover~.logo-section .logo-image.default-logo {
    opacity: 0;
}

body:not(.sub-page) .nav-item:hover~.logo-section .logo-image.hover-logo,
body:not(.sub-page) .mega-dropdown:hover~.logo-section .logo-image.hover-logo {
    opacity: 1;
}

/* 메인페이지에서만 메가메뉴가 열려있을 때 로고 변경 */
body:not(.sub-page) .main-header:hover .logo-image.default-logo {
    opacity: 0;
}

body:not(.sub-page) .main-header:hover .logo-image.hover-logo {
    opacity: 1;
}

/* 서브페이지에서는 logo.png만 표시 */
body.sub-page .logo-image.default-logo {
    opacity: 0;
}

body.sub-page .logo-image.hover-logo {
    opacity: 1;
}

/* 섹션 3, 4에서는 logo.png 사용 */
body.section3-active .logo-image.default-logo,
body.section4-active .logo-image.default-logo {
    opacity: 0;
}

body.section3-active .logo-image.hover-logo,
body.section4-active .logo-image.hover-logo {
    opacity: 1;
}

/* Footer 로고 스타일 */
.footer-logo img {
    height: 35px;
    width: auto;
}

/* 반응형 디자인 */
@media (max-width: 900px) {

    /* 모바일에서 로고 위치 조정 - 기본 margin-left 오버라이드 */
    .logo-section {
        margin-left: 20px !important;
        /* -30px를 40px로 변경하여 우측으로 70px 이동 */
    }
}

@media (max-width: 768px) {
    .logo-image {
        width: 156px;
        height: 28px;
    }

    .footer-logo img {
        height: 30px;
    }

    /* 태블릿에서 로고 위치 더 조정 */
    .logo-section {
        margin-left: 30px !important;
        /* 더 우측으로 이동 */
    }
}

@media (max-width: 480px) {
    .logo-image {
        width: 117px;
        height: 21px;
    }

    .footer-logo img {
        height: 25px;
    }

    /* 작은 모바일에서 로고 위치 최대 조정 */
    .logo-section {
        margin-left: 30px !important;
        /* 최대한 우측으로 이동 */
    }
}