@charset "utf-8";

/* CSS 변수 정의 */
:root { --white: #ffffff; --primary: #99815f; --text-color5: #ffffff; --fs-p3: 16px; --lh-p3: 1.5; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* basic-N1 [SDm3E2tokm] */
.basic-N1 { position: relative; top: -100%; left: 0; width: 100%; z-index: 200; transition: 0.3s; background-color: var(--white); }
.basic-N1.header-top-active { position: fixed; top: 0; }
.basic-N1 .header-dim { display: none; position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(17, 17, 17, 0.7); }

/* basic-N2 [eRM3E35mi7] - 수정된 부분 */
.basic-N2.no-transition { transition: none !important; animation: none !important; }
.basic-N2 { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; transition: all 0.15s ease; background-color: transparent; }
.basic-N2.header-top-active{backdrop-filter: blur(10px); background-color: rgb(0 0 0 / 70%); z-index: 1000; }

/* 호버 시 배경 dim 처리 - 수정됨 */
.basic-N2.header-hover { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); z-index: 999; }

/* 스크롤 시 헤더 변화 - 수정됨 */
.basic-N2.scrolled { padding: 5px 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); min-height: 50px; }
.basic-N2.scrolled .header-title { display: none; }
.basic-N2.scrolled .header-container { padding: 5px 80px; }
.basic-N2.scrolled .header-gnblist { margin-top: 0; }
.basic-N2.scrolled .submenu-background { top: 50px; }
/* 스크롤 + 호버 시 배경 유지 - 수정됨 */
.basic-N2.scrolled.header-hover { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); }

/* 헤더 내부 구조 변경 */
.basic-N2 .header-inner { position: relative; width: 100%; background: transparent; }
.basic-N2 .header-container { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 20px 80px 0; max-width: 1400px; margin: 0 auto; }

/* 로고를 상단 중앙에 배치 */
.basic-N2 .header-title { margin-bottom: 20px; transition: all 0.15s ease; }
.basic-N2 .header-title a { display: block; width: 206px; height: 38px; }
.basic-N2 .header-title img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1);}
.basic-N2.header-hover .header-title img { filter: brightness(0) invert(1); }

/* 메뉴를 로고 아래에 배치 */
.basic-N2 .header-right { width: 100%; position: relative; }
.basic-N2 .header-gnblist { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.basic-N2 .header-gnbitem { position: relative; }
.basic-N2 .header-gnblink { display: block; padding: 15px 25px; font-size: 16px; line-height: 1.5; font-weight: 500; text-align: center; white-space: nowrap; color: #fff; text-decoration: none; transition: color 0.15s; }
.basic-N2.header-hover .header-gnblink {color:#fff;}
.basic-N2.scrolled .header-gnblink {color:#fff;}
.basic-N2 .header-gnblink:hover { color: #f0f0f0; }
.basic-N2 .header-gnblink span { position: relative; }
.basic-N2 .header-gnblink span::after { content: ''; position: absolute; bottom: -5px; left: 0; height: 2px; width: 100%; background-color: #fff; transition: 0.15s; transform: scaleX(0); }
.basic-N2 .header-gnbitem:hover .header-gnblink span::after { transform: scaleX(1); }
.basic-N2 .header-mobile-top { display: none; }
.basic-N2 .header-utils { display: none; }

/* 서브메뉴 전체 배경 영역 - 수정됨 */
.submenu-background { position: fixed; top: 132px; left: 0; width: 100vw; height: 40vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: all 0.15s ease; z-index: 998; }

/* 스크롤 시 서브메뉴 배경 높이 조정 - 추가됨 */
.basic-N2.scrolled .submenu-background { top: 74px; height: 40vh; }

/* 개별 서브메뉴 드롭다운 */
.submenu-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: transparent; opacity: 0; visibility: hidden; transition: all 0.15s ease; z-index: 1001; min-width: 200px; height: 400px; overflow: hidden; }

/* 서브메뉴가 표시될 때 배경도 함께 표시 */
.header-gnblist:hover .submenu-background { opacity: 1; visibility: visible; }
.header-gnblist:hover .submenu-dropdown { opacity: 1; visibility: visible; }

.mega-menu-list { list-style: none; padding: 20px; margin: 0; text-align: center; height: 100%; overflow-y: auto; }
.mega-menu-list li { margin-bottom: 8px; text-align: center; }
.mega-menu-list a { display: block; padding: 5px 0; color: white; text-decoration: none; font-size: 14px; transition: color 0.15s; white-space: normal; word-wrap: break-word; }
.mega-menu-list a:hover { color: #f0f0f0; }

/* 전체 서브메뉴가 함께 나타나는 효과 */
.submenu-dropdown:nth-child(2) { transition-delay: 0.05s; }
.submenu-dropdown:nth-child(3) { transition-delay: 0.1s; }
.submenu-dropdown:nth-child(4) { transition-delay: 0.15s; }
.submenu-dropdown:nth-child(5) { transition-delay: 0.2s; }
.submenu-dropdown:nth-child(6) { transition-delay: 0.25s; }
.submenu-dropdown:nth-child(7) { transition-delay: 0.3s; }
.submenu-dropdown:nth-child(8) { transition-delay: 0.35s; }
.submenu-dropdown:nth-child(9) { transition-delay: 0.4s; }

/* 반응형 디자인 - 모바일 */
@media (max-width: 1200px) {
    /* Body 스크롤 제어 */
    body.mobile-menu-open { overflow: hidden !important; }

    /* 기본 헤더 레이아웃 변경 */
    .basic-N2 .header-container { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 15px 20px !important; height: auto !important; }
    .basic-N2.scrolled .header-container { padding: 10px 20px !important; }
    .basic-N2 .header-title { margin-bottom: 0 !important; }
    .basic-N2 .header-title a { width: 150px !important; height: 28px !important; }
    
    /* 기존 메뉴를 모바일 사이드바로 변환 - 매우 강력한 우선순위 */
    .basic-N2 .header-right,
    .basic-N2.scrolled .header-right,
    .basic-N2.header-hover .header-right { 
        position: fixed !important; 
        top: 0 !important; 
        right: -100% !important; 
        width: 300px !important; 
        height: 100vh !important; 
        background: rgba(255,255,255,0.9); 
        backdrop-filter: blur(10px) !important; 
        z-index: 1001 !important; 
        transition: right 0.3s ease !important; 
        overflow-y: auto !important; 
        padding-top: 80px !important;
        display: block !important;
    }
    
    .basic-N2 .header-right.mobile-active,
    .basic-N2.scrolled .header-right.mobile-active,
    .basic-N2.header-hover .header-right.mobile-active { 
        right: 0 !important; 
    }
    
    /* 기존 메뉴 리스트를 세로형으로 변경 */
    .basic-N2 .header-gnblist,
    .basic-N2.scrolled .header-gnblist,
    .basic-N2.header-hover .header-gnblist { 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: flex-start !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        list-style: none !important; 
    }
    
    .basic-N2 .header-gnbitem,
    .basic-N2.scrolled .header-gnbitem,
    .basic-N2.header-hover .header-gnbitem { 
        position: relative !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
    }
    
    .basic-N2 .header-gnblink,
    .basic-N2.scrolled .header-gnblink,
    .basic-N2.header-hover .header-gnblink { 
        display: block !important; 
        padding: 10px 15px !important; 
        font-size: 16px !important; 
        text-align: left !important; 
        position: relative !important; 
        color: black !important; 
        text-decoration: none !important; 
        white-space: normal !important; 
        line-height: 1.5 !important;
        font-weight: 500 !important;
    }
    
    .basic-N2 .header-gnblink:hover,
    .basic-N2.scrolled .header-gnblink:hover,
    .basic-N2.header-hover .header-gnblink:hover { 
        background: rgba(255, 255, 255, 0.1) !important; 
        color: black; 
    }
    
    /* 서브메뉴가 있는 링크에 화살표 추가 */
    .basic-N2 .header-gnblink span,
    .basic-N2.scrolled .header-gnblink span,
    .basic-N2.header-hover .header-gnblink span { 
        position: relative !important; 
    }
    
    .basic-N2 .header-gnblink span::after,
    .basic-N2.scrolled .header-gnblink span::after,
    .basic-N2.header-hover .header-gnblink span::after { 
		left: initial;
        content: '▶' !important; 
        position: absolute !important; 
        right: -20px !important; 
        top: 55% !important; 
        transform: translateY(-50%) !important; 
        font-size: 10px !important; 
        transition: transform 0.3s ease !important; 
        background: none !important; 
        height: auto !important; 
        width: auto !important; 
        color: 	#b7a391;
    }
    
    .basic-N2 .header-gnbitem.submenu-open .header-gnblink span::after,
    .basic-N2.scrolled .header-gnbitem.submenu-open .header-gnblink span::after,
    .basic-N2.header-hover .header-gnbitem.submenu-open .header-gnblink span::after { 
        transform: translateY(-50%) rotate(90deg) !important; 
    }
    
    /* 기존 서브메뉴를 아코디언으로 변경 */
    .submenu-dropdown,
    .basic-N2 .submenu-dropdown,
    .basic-N2.scrolled .submenu-dropdown,
    .basic-N2.header-hover .submenu-dropdown { 
        position: static !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
        transform: none !important; 
        background: rgba(255, 255, 255, 0.05) !important; 
        max-height: 0 !important; 
        overflow: hidden !important; 
        transition: max-height 0.3s ease !important; 
        z-index: auto !important; 
        min-width: auto !important; 
        height: auto !important; 
        left: auto !important;
        top: auto !important;
    }
    
    .submenu-dropdown.mobile-active,
    .basic-N2 .submenu-dropdown.mobile-active,
    .basic-N2.scrolled .submenu-dropdown.mobile-active,
    .basic-N2.header-hover .submenu-dropdown.mobile-active { 
        max-height: 500px !important; 
    }
    
    /* 메가메뉴 리스트 스타일 변경 */
    .mega-menu-list,
    .basic-N2 .mega-menu-list,
    .basic-N2.scrolled .mega-menu-list,
    .basic-N2.header-hover .mega-menu-list { 
        padding: 0 !important; 
        text-align: left !important; 
        height: auto !important; 
        overflow-y: visible !important; 
        margin: 0 !important; 
        list-style: none !important; 
    }
    
    .mega-menu-list li,
    .basic-N2 .mega-menu-list li,
    .basic-N2.scrolled .mega-menu-list li,
    .basic-N2.header-hover .mega-menu-list li { 
        margin-bottom: 0 !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
        text-align: left !important; 
    }
    
    .mega-menu-list a,
    .basic-N2 .mega-menu-list a,
    .basic-N2.scrolled .mega-menu-list a,
    .basic-N2.header-hover .mega-menu-list a { 
        display: block !important; 
        padding: 10px 25px 10px 40px !important; 
        font-size: 14px !important; 
        color: black !important; 
        text-decoration: none !important; 
        transition: all 0.3s ease !important; 
        white-space: normal !important; 
        word-wrap: break-word !important; 
    }
    
    .mega-menu-list a:hover,
    .basic-N2 .mega-menu-list a:hover,
    .basic-N2.scrolled .mega-menu-list a:hover,
    .basic-N2.header-hover .mega-menu-list a:hover { 
        color: black !important; 
        background: rgba(255, 255, 255, 0.1) !important; 
    }
    
    /* 서브메뉴 배경 숨김 */
    .submenu-background { display: none !important; }
    
    /* 햄버거 버튼 */
    .mobile-menu-toggle { display: block !important; position: relative !important; width: 30px !important; height: 24px !important; cursor: pointer !important; z-index: 1002 !important; }
	.mobile-menu-toggle.active span { background:black !important; }
    .mobile-menu-toggle span { display: block !important; position: absolute !important; height: 3px !important; width: 100% !important; background: #fff !important; border-radius: 2px !important; opacity: 1 !important; left: 0 !important; transform: rotate(0deg) !important; transition: 0.25s ease-in-out !important; }
    .mobile-menu-toggle span:nth-child(1) { top: 0px !important; }
    .mobile-menu-toggle span:nth-child(2) { top: 10px !important; }
    .mobile-menu-toggle span:nth-child(3) { top: 20px !important; }
    
    /* 햄버거 버튼 활성화 시 X 모양 */
    .mobile-menu-toggle.active span:nth-child(1) { top: 10px !important; transform: rotate(135deg) !important; }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0 !important; left: -60px !important; }
    .mobile-menu-toggle.active span:nth-child(3) { top: 10px !important; transform: rotate(-135deg) !important; }
    
    /* 모바일 메뉴 오버레이 */
    .mobile-menu-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; }
    .mobile-menu-overlay.active { opacity: 1 !important; visibility: visible !important; }
}

/* PC에서는 모바일 요소 숨기기 */
@media (min-width: 1201px) {
    .mobile-menu-toggle { display: none; }
    .mobile-menu-overlay { display: none; }
}

@media (max-width: 1200px) {
    .basic-N2 .header-container { padding: 20px 40px 0; }
    .basic-N2.scrolled .header-container { padding: 5px 40px; }
    .submenu-dropdown { min-width: 180px; }
    .submenu-background { top: 120px; 40vh; }
    .basic-N2.scrolled .submenu-background { top: 50px; height: 40vh; }
}

@media (max-width: 768px) {
    .basic-N2 .header-gnblist { flex-wrap: wrap; gap: 0px; }
    .basic-N2 .header-gnblink { padding: 10px 15px; font-size: 14px; }
    .submenu-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; min-width: auto; }
    .mega-menu-list { padding: 10px 0; text-align: left; }
    .header-gnblist:hover .submenu-dropdown { opacity: 1; }
    .submenu-background { position: relative; width: 100%; top: 0; height: auto; }
}