/* 1. 헤더 및 기본 레이아웃 */
#main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: transparent; transition: background-color 0.3s ease; }
#main-header.scrolled { background-color: #fff151}
#main-header.scrolled .logo-link, #main-header.scrolled .nav-menu li a { color: #222 !important; }
#main-header.scrolled .mo-toggle span { background-color: #000 !important; }
#main-header.scrolled .header-inner { padding: 25px 5%; }
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 30px 5%; margin: 0 auto; transition: padding 0.3s ease; }
.main .logo-link, .mo-toggle { color: #fff; }
.logo-link, .mo-toggle { position: relative; z-index: 1001; }
.logo-link { font-size: 1.5rem; font-weight: 700; text-decoration: none; }

/* 2. 데스크탑 메뉴 */
.nav-menu { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-menu li { display: inline-block; position: relative; }
.nav-menu li a { text-decoration: none; font-size: 1.2rem; color: #333; font-weight: 600; transition: color 0.3s ease; padding: 10px 0; white-space: nowrap; word-break: keep-all; }
.nav-menu li a:hover { color: #000; }
.main .nav-menu li a { color: #fff; }
.main .nav-menu li a:hover { color: #fff151; }
body.is-main .nav-menu li a { color: #ffffff; }
body.is-main .nav-menu li a:hover { color: #fff151; }
body.is-sub .nav-menu li a { color: #000000 !important; }
body.is-sub .nav-menu li a:hover { color: #007bff !important; }

/* 3. 햄버거 버튼 (모바일 전용) */
.mo-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer;  }
.mo-toggle span { display: block; height: 3px; width: 100%; background-color: #000; border-radius: 3px; transition: all 0.3s ease; }
.main .mo-toggle span { display: block; height: 3px; width: 100%; background-color: #fff; border-radius: 3px; transition: all 0.3s ease; } 
.mo-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mo-toggle.active span:nth-child(2) { opacity: 0; }
.mo-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* 4. 모바일 전체화면 오버레이 메뉴 & X 닫기 버튼 */
.mo-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(13, 13, 26, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 1000; }
.mo-nav-overlay.active { opacity: 1; visibility: visible; }
.mo-close-btn { position: absolute; top: 25px; right: 5%; background: transparent; border: none; color: #fff; font-size: 3rem; cursor: pointer; transition: color 0.3s; z-index: 1002; line-height: 1; padding: 0; }
.mo-close-btn:hover { color: #fff151; }
.mo-nav-list { list-style: none; text-align: center; padding: 0; margin: 0; }
.mo-nav-list li { margin: 25px 0; transform: translateY(30px); opacity: 0; transition: all 0.4s ease; }
.mo-nav-overlay.active .mo-nav-list li { transform: translateY(0); opacity: 1; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(1) { transition-delay: 0.1s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(2) { transition-delay: 0.15s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(3) { transition-delay: 0.2s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(4) { transition-delay: 0.25s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(5) { transition-delay: 0.3s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(6) { transition-delay: 0.35s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(7) { transition-delay: 0.4s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(8) { transition-delay: 0.45s; }
.mo-nav-overlay.active .mo-nav-list li:nth-child(9) { transition-delay: 0.5s; }
.mo-nav-list li a { text-decoration: none; color: #fff; font-size: 1.8rem; font-weight: 500; transition: color 0.3s; }
.mo-nav-list li a:hover { color: #fff151; }

/* 5. 반응형 미디어 쿼리 설정 */
@media screen and (min-width: 1025px) and (max-width: 1350px) {
     .nav-menu { gap: 15px; }
     .nav-menu li a { font-size: 1.05rem; }
 }
@media screen and (min-width: 1025px) { 
    .mo-nav-overlay { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } 
    .mo-toggle { display: none !important; } 
    .nav-menu { display: flex !important; } 
}

@media screen and (max-width: 1024px) { 
    .nav-menu { display: none !important; } 
    .mo-toggle { display: flex; } 
    .mo-nav-list li a { font-size: 1.5rem; }
 }