/* Poppins 폰트 불러오기 */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

        /* [기본 설정] 헤더 */
        header {
            transition: transform 0.4s ease-in-out, background-color 0.3s ease, opacity 0.5s ease;
            background-color: transparent;
            z-index: 110 !important;
        }

        /* 스크롤 다운 시 헤더 은닉 */
        header.header-hidden {
            transform: translateY(-100%);
        }

        header.menu-open,
        header.theme-dark {
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        #main-header {
            border-bottom: 1px solid transparent;
            transition: border-color 0.3s ease;
        }

        /* PC에서 호버 및 메뉴 오픈 시 하단 선 표시 */
        header:hover #main-header,
        header.menu-open #main-header {
            border-bottom: 1px solid #eeeeee !important;
        }

        /* [글자색 및 로고 제어] */
        header.scrolled a[href^="tel:"],
        header.scrolled .nav-link,
        header.scrolled #mobile-menu-btn,
        header.scrolled .mobile-phone-btn,
        header.menu-open a[href^="tel:"],
        header.menu-open .nav-link,
        header.theme-dark a[href^="tel:"],
        header.theme-dark .nav-link,
        header.theme-dark #mobile-menu-btn,
        header.theme-dark .mobile-phone-btn {
            color: #000000 !important;
            text-shadow: none !important;
        }

        /* 모바일 패널이 열렸을 때 헤더 요소들을 흰색으로 강제 변경 */
        header.mobile-panel-open #mobile-menu-btn span {
            background-color: #ffffff !important;
        }

        /* 모바일 패널 열릴 때 헤더 하단선 삭제 및 전화기 숨김 */
        header.mobile-panel-open #main-header {
            border-bottom: none !important;
        }
        header.mobile-panel-open .mobile-phone-btn {
            display: none !important;
        }

        header.section-4-active a[href^="tel:"],
        header.section-4-active .nav-link,
        header.section-4-active #mobile-menu-btn,
        header.section-4-active .mobile-phone-btn,
        header.section-4-active .menu-badge span {
            color: #ffffff !important;
            text-shadow: 0 0 5px rgba(0,0,0,0.2) !important;
        }

        /* 1. 로고 기본 설정 (기본은 흰색/원래색) */
        .logo-img {
            display: block;
            width: 249px;
            height: 44px;
            background-color: #ffffff; /* 초기 로고 색상 (흰색) */

            /* 로고 이미지를 마스크로 설정 */
            -webkit-mask-image: url('../img/logo_n1.png');
            mask-image: url('../img/logo_n1.png');
            -webkit-mask-size: contain;
            mask-image-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;

            /* 기존의 img 태그 source는 투명하게 처리 (마스크 색상만 보이게) */
            object-position: -9999px;
            transition: all 0.3s ease;
        }

        /* 2. 스크롤되거나 메뉴가 열렸을 때 지정하신 #0d2144 적용 */
        header.scrolled .logo-img,
        header.menu-open .logo-img,
        header.theme-dark .logo-img {
            background-color: #0d2144 !important; /* 필터 대신 실제 색상 코드 사용 */
            filter: none !important; /* 기존 필터 제거 */
        }

        /* 3. 모바일 패널이 열렸을 때 로고를 다시 흰색으로 */
        header.mobile-panel-open .logo-img {
            background-color: #ffffff !important;
        }

        /* 4. 특정 섹션(section-4) 활성화 시 로고 색상 처리 */
        header.section-4-active .logo-img {
            background-color: #ffffff !important;
        }

        #dropdown-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 0;
            background: #ffffff;
            z-index: -1;
            transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            overflow: hidden;
        }
        header.menu-open #dropdown-bg {
            height: 300px;
        }

        .menu-badge {
            border: 1px solid rgba(255, 255, 255, 0.4);
            background: transparent;
            transition: all 0.3s ease;
        }
        header.scrolled .menu-badge,
        header.menu-open .menu-badge,
        header.theme-dark .menu-badge,
        header.badge-black .menu-badge {
            border-color: rgba(0, 0, 0, 0.2) !important;
        }

        header.scrolled .menu-badge span,
        header.menu-open .menu-badge span,
        header.theme-dark .menu-badge span,
        header.badge-black .menu-badge span {
            color: #000000 !important;
        }

        .submenu-container {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s ease;
            transform: translateY(-10px);
        }
        header.menu-open .submenu-container {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
            transition: all 0.4s ease 0.1s;
        }

        .menu-col { width: 100px; text-align: center; flex-shrink: 0; position: relative; }
        .nav-link.menu-col { height: 96px; display: flex; align-items: center; justify-content: center; }

        .nav-link { font-size: 16px; font-weight: 400; letter-spacing: -0.02em; }
        .nav-link:hover, .nav-link.active-line { color: #000000 !important; font-weight: 700 !important; }

        .submenu-link { font-size: 13px; color: #666; font-weight: 500; transition: all 0.2s ease; }
        .submenu-link:hover { font-weight: 700 !important; color: #000000 !important; }

        .nav-link::after {
            content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px;
            background-color: #000000; transform: translateX(-50%); transition: width 0.3s ease; z-index: 10;
        }
        .nav-link:hover::after, .nav-link.active-line::after { width: 50px; }

        .logo-area-width { width: 320px; flex-shrink: 0; }
        .badge-area-width {
            /* width: 540px; */
            flex-shrink: 0;
            /* margin-left: -380px; */
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 3rem;
        }
        .nav-gap { gap: 1.5rem; }

        header.header-fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

        /* 햄버거 스팬 기본 설정 */
        #mobile-menu-btn span { display: block; }

        /* ============================================================
           ONLY MOBILE CSS
        ============================================================ */
        @media (max-width: 1024px) {
            /* 모바일에서 헤더 아래 회색선 제거 */
            #main-header,
            header:hover #main-header,
            header.menu-open #main-header,
            header.scrolled #main-header {
                border-bottom: none !important;
            }

            .logo-img {
                width: 240px;
            }

            .mobile-phone-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                font-size: 18px;
                margin-right: 15px;
                color: #fff;
                border: none;
            }

            #mobile-menu-btn i { display: none !important; }

            #mobile-menu-btn {
                display: block;
                position: relative;
                width: 25px;
                height: 16px;
                background: transparent;
                border: none;
                padding: 0;
                cursor: pointer;
                z-index: 150;
                margin-right: 15px;
            }

            #mobile-menu-btn span {
                display: block;
                position: absolute;
                height: 1px;
                width: 100%;
                background: #fff;
                border-radius: 1px;
                opacity: 1;
                left: 0;
                transform: rotate(0deg);
                transition: .25s ease-in-out;
            }

            header.scrolled #mobile-menu-btn span,
            header.theme-dark #mobile-menu-btn span,
            header.menu-open #mobile-menu-btn span {
                background: #000 !important;
            }

            header.mobile-panel-open #mobile-menu-btn span {
                background: #fff !important;
            }

            header.section-4-active #mobile-menu-btn span {
                background: #fff !important;
            }

            #mobile-menu-btn span:nth-child(1) { top: 0px; }
            #mobile-menu-btn span:nth-child(2) { top: 14px; }

            #mobile-menu-btn.open span:nth-child(1) {
                top: 7px;
                transform: rotate(135deg);
            }

            #mobile-menu-btn.open span:nth-child(2) {
                top: 7px;
                transform: rotate(-135deg);
            }

            #mobile-panel {
                width: 100% !important;
                background-color: rgba(0, 0, 0, 0.7) !important;
                color: #ffffff;
                transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                z-index: 100;
                padding-top: 80px;
            }

            .mobile-nav-list {
                padding-top: 20px;
                text-align: center;
            }

            .mobile-nav-item {
                display: block;
                font-size: 22px;
                font-weight: 500;
                padding: 18px 0;
                color: #ffffff !important;
            }

            .mobile-nav-item.active {
                color: #c7b299 !important;
            }

            .mobile-submenu {
                max-height: 0;
                overflow: hidden;
                background: transparent;
                text-align: center;
                transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
                opacity: 0;
            }

            .mobile-submenu.open {
                max-height: 400px;
                opacity: 1;
            }

            .mobile-submenu a {
                display: block;
                padding: 10px 0;
                font-size: 15px;
                color: rgba(255, 255, 255, 0.7) !important;
            }

            .mobile-panel-header { display: none; }
            #mobile-close-btn { display: none !important; }
        }

        @media (max-width: 1024px) {
            /* [추가] 로고가 버튼을 밀어내지 않게 너비 해제 */
            .logo-area-width { width: auto !important; flex: 1; }

            .logo-img {
                width: 180px; /* 로고 크기를 살짝 줄여 공간 확보 */
            }

            .mobile-phone-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                font-size: 18px;
                margin-right: 10px; /* 버튼 사이 간격 좁힘 */
                color: #fff;
                border: none;
            }

            #mobile-menu-btn {
                display: block;
                position: relative;
                width: 25px;
                height: 16px;
                background: transparent;
                border: none;
                padding: 0;
                cursor: pointer;
                z-index: 150;
                margin-right: 0 !important; /* 우측 끝 여백 삭제 */
            }
        }