@charset "utf-8";
/* ============================================================
   top.css
   대상: header-1.html ~ header-4.html (상단메뉴 1~4)
   포함 영역:
   - 사이트 헤더 공통 구조 (.site-header, .nav-*)
   - 헤더 Type 1~4 변형 (.site-header--type1 ~ --type4)
   - 헤더 시안 토글 패널 (시안 단계 전용)
   - 헤더 관련 반응형
   ============================================================ */

/* === 사이트 헤더 공통 === */
/* ============================================================
   사이트 헤더 / 푸터
   - Type 1 : 2단 라이트 (1단 로고+유틸+버튼 / 2단 GNB 중앙)
   ============================================================ */
.site-header {position: relative; background: #fff; z-index: 70;}

/* 1단 — 로고 + 유틸리티 + 버튼 */
.site-header-top {background: #fff;}
.site-header-top .inner {display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 40px;}

/* 로고 (이미지 / 텍스트 fallback 모두 지원) */
.site-header-logo {display: flex; align-items: center; gap: 10px; line-height: 1;}
.site-header-logo-img {display: block; height: 40px; width: auto;}
.site-header-logo .logo-sub {font-size: 13px; font-weight: 600; color: var(--c-text-sub); letter-spacing: -.2px;}
.site-header-logo .logo-mark {font-size: 34px; font-weight: 800; color: var(--c-primary); letter-spacing: -.8px;}

/* 우측 유틸리티 + 버튼 — 시니어 디자인 (Font Awesome 아이콘) */
.site-header-util {display: flex; align-items: center; gap: 2px; height: 36px;}
.site-header-util .util-link {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--c-text-sub); letter-spacing: -.2px; border-radius: var(--radius-s); transition: color .18s ease, background .18s ease;}
.site-header-util .util-link i {font-size: 13px; color: var(--c-text-mute); transition: color .18s ease;}
.site-header-util .util-link:hover {color: var(--c-primary); background: rgba(41, 98, 255, .04);}
.site-header-util .util-link:hover i {color: var(--c-primary);}

/* 회원가입 버튼 — 회전하는 그라데이션 보더 (스핀 효과) */
.site-header-util .btn-signup {position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; margin-left: 8px; background: transparent; color: var(--c-primary); font-size: 13px; font-weight: 700; letter-spacing: -.2px; border: 0; border-radius: 6px; overflow: hidden; transition: color .25s ease, transform .25s ease;}
.site-header-util .btn-signup::before {content: ""; position: absolute; left: 50%; top: 50%; width: 220%; height: 380%; transform: translate(-50%, -50%) rotate(0deg); background: conic-gradient(from 0deg, var(--c-primary) 0deg, rgba(41, 98, 255, .12) 90deg, var(--c-primary) 180deg, rgba(41, 98, 255, .12) 270deg, var(--c-primary) 360deg); animation: signup-spin 3s linear infinite; z-index: -2;}
.site-header-util .btn-signup::after {content: "" ; position: absolute; inset: 3px; background: #fff; border-radius: 3px; z-index: -1; transition: background .25s ease;}
.site-header-util .btn-signup i {font-size: 12px; color: var(--c-primary);}
.site-header-util .btn-signup:hover::before {animation-duration: 1s;}

@keyframes signup-spin {
	from {transform: translate(-50%, -50%) rotate(0deg);}
	to {transform: translate(-50%, -50%) rotate(360deg);}
}

/* (D) 로그인 버튼 — 그라데이션 + soft shadow + hover lift */
.site-header-util .btn-login {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 18px; margin-left: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -.2px; border-radius: var(--radius-s); background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); box-shadow: 0 2px 8px rgba(41, 98, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .15); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.site-header-util .btn-login i {font-size: 12px;}
.site-header-util .btn-login:hover {transform: translateY(-1px); box-shadow: 0 6px 16px rgba(41, 98, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .2); filter: brightness(1.04);}
.site-header-util .btn-login:active {transform: translateY(0); box-shadow: 0 2px 6px rgba(41, 98, 255, .25);}

/* 사용자 메뉴 (모바일 전용 — 4개 버튼 통합 드롭다운, 햄버거 좌측에 위치) */
.user-menu {position: relative; display: none; align-items: center;}
.user-menu-toggle {width: 36px; height: 36px; border-radius: var(--radius-s); border: 1px solid var(--c-line); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c-text); transition: border-color .18s ease, color .18s ease, background .18s ease;}
.user-menu-toggle:hover, .user-menu.is-open .user-menu-toggle {border-color: var(--c-primary); color: var(--c-primary); background: rgba(41, 98, 255, .04);}
.user-menu-dropdown {position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; padding: 6px 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60;}
.user-menu.is-open .user-menu-dropdown {opacity: 1; visibility: visible; transform: translateY(0);}
.user-menu-dropdown a {display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; transition: color .15s ease, background .15s ease;}
.user-menu-dropdown a i {font-size: 13px; width: 16px; text-align: center; color: var(--c-text-sub); transition: color .15s ease;}
.user-menu-dropdown a:hover {color: var(--c-primary); background: rgba(41, 98, 255, .06);}
.user-menu-dropdown a:hover i {color: var(--c-primary);}

/* 백드롭 (모바일 드로어 오버레이) — PC에서는 항상 숨김 */
.site-header-nav-backdrop {display: none;}

/* 드로어 헤드 (로고 + 닫기 버튼) — PC에서는 숨김 */
.nav-head {display: none;}

/* (E) 센터주소 버튼 — 차콜 + 미세 그라데이션 + hover lift */
.site-header-util .btn-center {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 18px; margin-left: 6px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -.2px; border-radius: var(--radius-s); background: linear-gradient(180deg, #2b3445 0%, #1a1f2e 100%); box-shadow: 0 2px 8px rgba(26, 31, 46, .25), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.site-header-util .btn-center i {font-size: 12px; color: #ff7a59;}
.site-header-util .btn-center:hover {transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 31, 46, .32), inset 0 1px 0 rgba(255, 255, 255, .12); filter: brightness(1.08);}
.site-header-util .btn-center:active {transform: translateY(0); box-shadow: 0 2px 6px rgba(26, 31, 46, .22);}

/* 2단 — GNB 중앙 정렬 + 드롭다운 */
.site-header-nav {border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: #fff;}
.site-header-nav .inner {display: flex; align-items: center; justify-content: center; height: 72px; gap: 56px;}
.site-header-nav .nav-item {position: relative; height: 72px; display: flex; align-items: center;}
.site-header-nav .nav-link {position: relative; display: inline-flex; align-items: center; height: 72px; padding: 0 4px; font-size: 21px; font-weight: 700; color: var(--c-text); transition: color .2s ease;}
.site-header-nav .nav-link::after {content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--c-primary); transition: left .25s ease, right .25s ease;}
.site-header-nav .nav-link:hover, .site-header-nav .nav-link.is-active, .site-header-nav .nav-item:hover .nav-link {color: var(--c-primary);}
.site-header-nav .nav-link:hover::after, .site-header-nav .nav-link.is-active::after, .site-header-nav .nav-item:hover .nav-link::after {left: 0; right: 0;}

/* 드롭다운 박스 */
.site-header-nav .nav-dropdown {position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; padding: 8px 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: 0 12px 32px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 50;}
.site-header-nav .nav-dropdown a {position: relative; display: block; padding: 11px 22px 11px 26px; font-size: 17px; font-weight: 600; color: var(--c-text); white-space: nowrap; transition: color .2s ease, background .2s ease, padding-left .2s ease;}
.site-header-nav .nav-dropdown a::before {content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 16px; background: var(--c-primary); border-radius: 2px; transition: transform .2s ease;}
.site-header-nav .nav-dropdown a:hover {color: var(--c-primary); background: rgba(41, 98, 255, .08); padding-left: 30px; font-weight: 700;}
.site-header-nav .nav-dropdown a:hover::before {transform: translateY(-50%) scaleY(1);}

/* 드롭다운 hover 표시 */
.site-header-nav .nav-item:hover .nav-dropdown, .site-header-nav .nav-item.is-open .nav-dropdown {opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);}

/* 드롭다운 hover 시 1차 메뉴와 끊김 없는 hover bridge */
.site-header-nav .nav-item::after {content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;}

/* 모바일 토글 */
.site-header-mobile-toggle {display: none; width: 40px; height: 40px; border-radius: var(--radius-s); border: 1px solid var(--c-line); background: #fff; align-items: center; justify-content: center; font-size: 20px;}

/* Type 4 — Wide PC: 메가 메뉴 max-width 확장 */
@media (min-width: 1600px) {
	.site-header--type4 .site-header-mega {max-width: 1480px;}
}

/* Type 4 — Small PC: 메가 메뉴 max-width 축소 */
@media (max-width: 1279px) {
	.site-header--type4 .site-header-mega {max-width: 980px;}
}

/* Type 4 모바일 — 1단 다크 + 메가 메뉴 숨김 + 다크 드로어 */
@media (max-width: 1023px) {
	.site-header--type4 .site-header-topbar {display: none;}
	.site-header--type4 .site-header-mega {display: none;}
	.site-header--type4 .site-header-nav {flex: none; height: 100vh; gap: 0;}
	.site-header--type4 .site-header-nav .nav-head {display: flex; background: #0f1729; border-bottom-color: rgba(6, 182, 212, .15);}
	.site-header--type4 .site-header-nav .nav-head-logo img {height: 28px;}
	.site-header--type4 .site-header-nav .nav-close {background: transparent; border-color: rgba(34, 211, 238, .35); color: #fff;}
	.site-header--type4 .site-header-nav .nav-close:hover {border-color: #22d3ee; color: #22d3ee; background: rgba(6, 182, 212, .08);}
	.site-header--type4 .site-header-nav.is-mobile-open {background: #0f1729;}
	.site-header--type4 .site-header-nav .nav-link {color: rgba(255, 255, 255, .85); border-bottom-color: rgba(6, 182, 212, .12); height: 52px; padding: 0 28px;}
	.site-header--type4 .site-header-nav .nav-link::after {display: none;}
	.site-header--type4 .site-header-nav .nav-link:hover, .site-header--type4 .site-header-nav .nav-item.is-open .nav-link {color: #22d3ee; background: rgba(6, 182, 212, .08);}
	.site-header--type4 .site-header-util .btn-login, .site-header--type4 .site-header-util .btn-signup {display: none;}
	/* header-4 모바일 — nav-item 인라인 서브메뉴(아코디언) 다크 톤 (mega는 모바일 숨김이라 여기서 서브메뉴 노출) */
	.site-header--type4 .site-header-nav .nav-dropdown {background: rgba(6, 182, 212, .06);}
	.site-header--type4 .site-header-nav .nav-dropdown a {color: rgba(255, 255, 255, .75); border-bottom-color: rgba(6, 182, 212, .12);}
	.site-header--type4 .site-header-nav .nav-dropdown a::before {background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, .5);}
	.site-header--type4 .site-header-nav .nav-dropdown a:hover {color: #22d3ee; background: rgba(6, 182, 212, .12);}
}

/* header-4 — 데스크톱은 메가메뉴 사용, nav-item 인라인 서브메뉴는 숨김 (모바일에서만 아코디언 노출) */
@media (min-width: 1024px) {
	.site-header--type4 .site-header-nav .nav-dropdown {display: none;}
}

/* Type 3 모바일 — 흰 상단(좌측 로고+우측 토글) + 그린 드로어 */
@media (max-width: 1023px) {
	.site-header--type3 .site-header-top {background: #fff; border-bottom: 1px solid var(--c-line);}
	.site-header--type3 .site-header-top .inner {grid-template-columns: auto 1fr auto; gap: 0; padding-top: 12px; padding-bottom: 12px;}
	.site-header--type3 .site-header-centers {display: none;}
	.site-header--type3 .site-header-logo {justify-self: start; padding: 0;}
	.site-header--type3 .site-header-logo-img {height: 28px;}
	.site-header--type3 .site-header-util {display: none;}

	/* 드로어 — 그린 배경 */
	.site-header--type3 .site-header-nav {background: #1e3a8a; flex: none;}
	.site-header--type3 .site-header-nav .nav-head {background: #1e3a8a; border-bottom-color: rgba(255, 255, 255, .15);}
	.site-header--type3 .site-header-nav .nav-head-logo img {filter: brightness(0) invert(1); height: 28px;}
	.site-header--type3 .site-header-nav .nav-close {background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff;}
	.site-header--type3 .site-header-nav .nav-close:hover {background: #fff; border-color: #fff; color: #1e3a8a;}
	.site-header--type3 .site-header-nav .inner {height: auto;}
	.site-header--type3 .site-header-nav .nav-item {height: auto;}

	/* 1차 메뉴 — 흰 텍스트, 캡슐 효과 해제 */
	.site-header--type3 .site-header-nav .nav-link {height: 52px; padding: 0 28px; border-radius: 0; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); transform: none; box-shadow: none; background: transparent;}
	.site-header--type3 .site-header-nav .nav-link:hover, .site-header--type3 .site-header-nav .nav-item.is-open .nav-link {color: #fff; background: rgba(255, 255, 255, .12); transform: none; box-shadow: none;}

	/* 2차 메뉴 — 짙은 그린 톤 */
	.site-header--type3 .site-header-nav .nav-dropdown {background: rgba(0, 0, 0, .18); border: 0; box-shadow: none;}
	.site-header--type3 .site-header-nav .nav-dropdown a {padding: 11px 28px 11px 44px; color: rgba(255, 255, 255, .8);}
	.site-header--type3 .site-header-nav .nav-dropdown a::before {left: 28px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .5);}
	.site-header--type3 .site-header-nav .nav-dropdown a:hover {color: #fff; background: rgba(255, 255, 255, .14); padding-left: 48px;}
}

@media (max-width: 767px) {
	.site-header--type3 .site-header-logo-img {height: 26px;}
	.site-header--type3 .site-header-nav .nav-link {height: 48px; padding: 0 22px; font-size: 16px;}
	.site-header--type3 .site-header-nav .nav-dropdown a {padding: 10px 22px 10px 38px; font-size: 14px;}
	.site-header--type3 .site-header-nav .nav-dropdown a::before {left: 22px;}
	.site-header--type3 .site-header-nav .nav-dropdown a:hover {padding-left: 42px;}
}

@media (max-width: 479px) {
	.site-header--type3 .site-header-logo-img {height: 24px;}
}

/* Type 2 모바일 — 드로어/토글 다크 톤 적용 */
@media (max-width: 1023px) {
	.site-header--type2 .site-header-nav {flex: none; height: 100vh; gap: 0;}
	.site-header--type2 .site-header-nav .nav-head {display: flex; background: #1a1d3e; border-bottom-color: rgba(255, 255, 255, .08);}
	.site-header--type2 .site-header-nav .nav-head-logo img {height: 28px;}
	.site-header--type2 .site-header-nav .nav-close {background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff;}
	.site-header--type2 .site-header-nav .nav-close:hover {border-color: #fbbf24; color: #fbbf24; background: rgba(255, 255, 255, .04);}
	.site-header--type2 .site-header-nav.is-mobile-open {background: #1a1d3e;}
	.site-header--type2 .site-header-nav .nav-link {color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .06);}
	.site-header--type2 .site-header-nav .nav-link:hover, .site-header--type2 .site-header-nav .nav-item.is-open .nav-link {color: #fbbf24; background: rgba(245, 158, 11, .08);}
	.site-header--type2 .site-header-nav .nav-dropdown {background: rgba(0, 0, 0, .25);}
	.site-header--type2 .site-header-nav .nav-dropdown a {color: rgba(255, 255, 255, .72); padding: 11px 28px 11px 44px;}
	.site-header--type2 .site-header-nav .nav-dropdown a::before {background: linear-gradient(180deg, #f59e0b, #fbbf24); box-shadow: 0 0 8px rgba(251, 191, 36, .5); width: 3px; height: 0; left: 28px; transform: translateY(-50%); transition: height .25s ease;}
	.site-header--type2 .site-header-nav .nav-dropdown a:hover {color: #fbbf24; background: rgba(245, 158, 11, .12); padding-left: 48px; font-weight: 700;}
	.site-header--type2 .site-header-nav .nav-dropdown a:hover::before {height: 18px;}
	.site-header--type2 .site-header-util .btn-login, .site-header--type2 .site-header-util .btn-signup {display: none;}
}

@media (max-width: 1023px) {
	/* 헤더 상단 인너 — 좌측 로고 / 우측에 util+user-menu+햄버거 모임 */
	.site-header-top .inner {gap: 0;}
	/* 모바일 — GNB가 드로어로 숨겨져 헤더 하단 경계가 사라지므로 상단바에 구분선 추가 (서브페이지 컨텐츠 경계) */
	.site-header-top {border-bottom: 1px solid var(--c-line);}
	.site-header-util {gap: 4px; margin-left: auto;}
	.user-menu {display: inline-flex; margin-left: 4px;}
	.site-header-mobile-toggle {display: flex; margin-left: 4px;}
	.site-header-mobile-toggle.is-active {color: var(--c-primary); border-color: var(--c-primary);}

	/* 우측 슬라이드 드로어 (off-canvas) */
	.site-header-nav {position: fixed; top: 0; left: auto; right: 0; bottom: 0; width: 340px; max-width: 86vw; height: 100vh; height: 100dvh; background: #fff; border: 0; border-bottom: 0; box-shadow: none; transform: translateX(100%); transition: transform .38s cubic-bezier(.16, .84, .44, 1), box-shadow .38s ease; z-index: 1000; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: 0;}
	.site-header-nav.is-mobile-open {transform: translateX(0); box-shadow: -14px 0 44px rgba(15, 23, 42, .22);}

	/* ===== 드로어 헤드 — 리디자인 (상단 브랜드 액센트 + 원형 닫기) ===== */
	.nav-head {position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; height: 66px; background: var(--c-bg-soft); border: 0; border-bottom: 1px solid var(--c-line); box-shadow: 0 4px 12px rgba(15, 23, 42, .05); flex-shrink: 0;}
	.nav-head::before {content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary) 0%, #5a35d1 100%);}
	.nav-head-logo {display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden;}
	.nav-head-logo img {display: block; height: auto; max-height: 30px; width: auto; max-width: 100%;}
	.nav-close {width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); font-size: 16px; color: var(--c-text-sub); transition: background .2s ease, color .2s ease, transform .25s ease;}
	.nav-close:hover {background: var(--c-primary); color: #fff; transform: rotate(90deg);}

	/* ===== 리스트 컨테이너 — 풀폭 행 리스트 (UserDev.css의 .site-header .inner 0,2,0 를 이기도록 0,3,0 특이도) ===== */
	.site-header .site-header-nav .inner {flex: 1; flex-direction: column; justify-content: flex-start; align-items: stretch; height: auto; gap: 0; margin: 0; padding: 6px 0 calc(20px + env(safe-area-inset-bottom, 0px)); max-width: 100%; width: 100%; overflow-y: auto;}

	/* ===== 1차 메뉴 — 풀폭 행 + 구분선 + 오른쪽 › 화살표(열림 시 파란 ∨) ===== */
	.site-header-nav .nav-item {height: auto; flex-direction: column; align-items: stretch; border-radius: 0; transition: background .25s ease;}
	.site-header-nav .nav-item.is-open {background: transparent;}
	.site-header-nav .nav-link {position: relative; height: auto; min-height: 50px; padding: 0 18px; justify-content: space-between; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; font-size: 15px; font-weight: 700; letter-spacing: -.3px; color: var(--c-text); transition: background .2s ease, color .2s ease;}
	.site-header-nav .nav-link::after {content: ""; display: block; position: static; width: 8px; height: 8px; background: none; border: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px; opacity: .4; transform: rotate(45deg); transition: transform .32s cubic-bezier(.16, .84, .44, 1), opacity .2s ease;}
	.site-header-nav .nav-link:active {background: rgba(41, 98, 255, .06);}
	.site-header-nav .nav-item.is-open > .nav-link {color: var(--c-primary); border-bottom-color: transparent;}
	.site-header-nav .nav-item.is-open > .nav-link::after {opacity: 1; transform: rotate(135deg);}

	/* ===== 2차 메뉴 — 연한 파란 틴트 블록 + 파란 점 불릿 (즉시 펼침 + 스태거 페이드인) ===== */
	.site-header-nav .nav-item::after {display: none;}
	.site-header-nav .nav-dropdown {position: static; transform: none; min-width: 0; margin: 0; padding: 2px 0 4px; background: rgba(41, 98, 255, .05); border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; display: none;}
	.site-header-nav .nav-item.is-open .nav-dropdown {display: block; transform: none;}
	.site-header-nav .nav-dropdown a {position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 0; padding: 10px 18px 10px 22px; font-size: 14px; font-weight: 500; line-height: 1.35; white-space: normal; word-break: keep-all; color: var(--c-text); border: 0; border-bottom: 1px solid rgba(41, 98, 255, .07); border-radius: 0; transition: color .18s ease, background .18s ease, padding-left .18s ease;}
	.site-header-nav .nav-dropdown a:last-child {border-bottom: 0;}
	.site-header-nav .nav-dropdown a::after {display: none;}
	.site-header-nav .nav-dropdown a::before {content: ""; position: static; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary); transform: none; transition: transform .18s ease;}
	.site-header-nav .nav-item.is-open .nav-dropdown a {animation: navSubIn .34s cubic-bezier(.16, .84, .44, 1) both;}
	.site-header-nav .nav-dropdown a:nth-child(2) {animation-delay: .03s;}
	.site-header-nav .nav-dropdown a:nth-child(3) {animation-delay: .06s;}
	.site-header-nav .nav-dropdown a:nth-child(4) {animation-delay: .09s;}
	.site-header-nav .nav-dropdown a:nth-child(5) {animation-delay: .12s;}
	.site-header-nav .nav-dropdown a:nth-child(n+6) {animation-delay: .15s;}
	.site-header-nav .nav-dropdown a:hover, .site-header-nav .nav-dropdown a:active {color: var(--c-primary); background: rgba(41, 98, 255, .07); padding-left: 26px;}
	.site-header-nav .nav-dropdown a:hover::before, .site-header-nav .nav-dropdown a:active::before {transform: scale(1.5);}
	@keyframes navSubIn {from {opacity: 0; transform: translateY(-7px);} to {opacity: 1; transform: translateY(0);}}

	/* 백드롭 (오버레이) */
	.site-header-nav-backdrop {display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;}
	.site-header-nav-backdrop.is-show {opacity: 1; visibility: visible;}

	/* PC 전용 유틸 항목 숨김 (회원정보는 .user-menu 사람아이콘으로 대체) */
	.site-header-util .util-link, .site-header-util .btn-signup, .site-header-util .btn-login {display: none;}

}

@media (max-width: 767px) {
	.site-header-top .inner {height: 64px; gap: 0;}
	.site-header-logo-img {height: 28px;}
	.site-header-logo .logo-mark {font-size: 24px;}
	.site-header-logo .logo-sub {font-size: 11px;}
	.site-header-util .btn-center {height: 32px; padding: 0 12px; font-size: 12px; margin-left: 4px;}
	.site-header-util .btn-center span {display: none;}
	.user-menu-toggle, .site-header-mobile-toggle {width: 36px; height: 36px; font-size: 16px;}
}

@media (max-width: 479px) {
	.site-header-util .btn-center {display: none;}
}

/* ============================================================
   헤더 4종 변형 (시안용 — 클라이언트 선택 가능)
   .site-header--type1 : 라이트 2단 (로고+유틸 / GNB 중앙) — 현재 디자인
   .site-header--type2 : 1단 컴팩트 (유틸바 숨김)
   .site-header--type3 : 좌측 정렬 미니멀 (GNB 좌측 모음)
   .site-header--type4 : 다크 톤 (전체 다크 배경)
   ============================================================ */

/* Type 1 — 기본 (현재 적용된 라이트 2단) */
.site-header--type1 .site-header-top {display: block;}
.site-header--type1 .site-header-nav {display: flex;}

/* ============================================================
   Type 2 — 다크 1단 컴팩트 (시니어 디자인 / 앰버 포인트)
   ============================================================ */
.site-header--type2 {background: #1a1d3e; box-shadow: 0 2px 16px rgba(0, 0, 0, .25);}
.site-header--type2 .site-header-top {background: #1a1d3e; border-bottom: 1px solid rgba(255, 255, 255, .06);}
.site-header--type2 .site-header-top .inner {height: 76px; gap: 24px; align-items: center;}

/* 로고 — 다크 배경 위 명도 보정 */
.site-header--type2 .site-header-logo {flex-shrink: 0;}
.site-header--type2 .site-header-logo-img {height: 36px;}

/* GNB — 1단 인라인 (상단바 안에 직접 배치) */
.site-header--type2 .site-header-nav {position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 36px; height: 76px; background: transparent; border: 0; box-shadow: none; padding: 0; transform: none; overflow: visible; max-width: none; width: auto;}
.site-header--type2 .site-header-nav .nav-head {display: none;}
.site-header--type2 .nav-item {position: relative; height: 76px; display: flex; align-items: center;}
.site-header--type2 .nav-link {position: relative; display: inline-flex; align-items: center; height: 76px; padding: 0 4px; font-size: 21px; font-weight: 700; color: rgba(255, 255, 255, .82); transition: color .2s ease;}
.site-header--type2 .nav-link::after {content: ""; position: absolute; left: 50%; right: 50%; bottom: 18px; height: 2px; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 2px; transition: left .25s ease, right .25s ease;}
.site-header--type2 .nav-link:hover, .site-header--type2 .nav-item:hover .nav-link, .site-header--type2 .nav-link.is-active {color: #fff;}
.site-header--type2 .nav-link:hover::after, .site-header--type2 .nav-item:hover .nav-link::after, .site-header--type2 .nav-link.is-active::after {left: 0; right: 0;}

/* 드롭다운 — 시니어 카드형 (꼬리표 + 카드 항목 + 우측 화살표 슬라이드) */
.site-header--type2 .nav-dropdown {position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; padding: 8px; background: linear-gradient(180deg, #161a36 0%, #11152a 100%); border: 1px solid rgba(245, 158, 11, .18); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 50;}
.site-header--type2 .nav-dropdown::before {content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #161a36; border-top: 1px solid rgba(245, 158, 11, .18); border-left: 1px solid rgba(245, 158, 11, .18);}
.site-header--type2 .nav-dropdown a {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; padding: 11px 18px; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .82); white-space: nowrap; border-radius: 8px; box-shadow: inset 0 0 0 1px transparent; transition: color .25s ease, background .25s ease, box-shadow .25s ease;}
.site-header--type2 .nav-dropdown a::after {content: "→"; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; color: transparent; transform: translateX(-6px); transition: transform .25s ease, color .25s ease;}
.site-header--type2 .nav-dropdown a:hover {color: #fff; background: linear-gradient(135deg, rgba(245, 158, 11, .28) 0%, rgba(251, 191, 36, .08) 100%); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);}
.site-header--type2 .nav-dropdown a:hover::after {color: #fbbf24; transform: translateX(0);}
.site-header--type2 .nav-item:hover .nav-dropdown, .site-header--type2 .nav-item.is-open .nav-dropdown {opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);}
.site-header--type2 .nav-item::after {content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;}

/* 우측 버튼 영역 */
.site-header--type2 .site-header-util {flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 76px; margin: 0;}
.site-header--type2 .site-header-util .util-link {display: none;}

/* 로그인 — 앰버 그라데이션 + soft glow */
.site-header--type2 .site-header-util .btn-login {height: 38px; margin-left: 0; padding: 0 18px; background: linear-gradient(180deg, #f59e0b 0%, #ea7c08 100%); color: #1a1d3e; font-weight: 800; border-radius: var(--radius-s); box-shadow: 0 2px 10px rgba(245, 158, 11, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.site-header--type2 .site-header-util .btn-login i {color: #1a1d3e;}
.site-header--type2 .site-header-util .btn-login:hover {transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255, 255, 255, .3); filter: brightness(1.06);}

/* 회원가입 — Shine Sweep + Pulse Glow (시니어 효과) */
.site-header--type2 .site-header-util .btn-signup {position: relative; isolation: auto; height: 38px; margin-left: 0; padding: 0 18px; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: var(--radius-s); font-weight: 700; overflow: hidden; box-shadow: 0 0 0 0 rgba(251, 191, 36, .45); animation: signup-amber-pulse 2.6s ease-in-out infinite; transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;}
.site-header--type2 .site-header-util .btn-signup::before {content: ""; display: block; position: absolute; top: 0; left: -120%; width: 75%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(251, 191, 36, .55) 45%, rgba(255, 255, 255, .35) 50%, rgba(251, 191, 36, .55) 55%, transparent 100%); pointer-events: none; transition: left .8s cubic-bezier(.4, 0, .2, 1); z-index: 0;}
.site-header--type2 .site-header-util .btn-signup::after {display: none;}
.site-header--type2 .site-header-util .btn-signup i, .site-header--type2 .site-header-util .btn-signup span {position: relative; z-index: 1;}
.site-header--type2 .site-header-util .btn-signup i {color: rgba(255, 255, 255, .9); transition: color .25s ease;}
.site-header--type2 .site-header-util .btn-signup:hover {background: rgba(251, 191, 36, .08); color: #fbbf24; border-color: #fbbf24; transform: translateY(-1px); animation: none; box-shadow: 0 0 0 4px rgba(251, 191, 36, .18), 0 8px 22px rgba(0, 0, 0, .35);}
.site-header--type2 .site-header-util .btn-signup:hover::before {left: 130%;}
.site-header--type2 .site-header-util .btn-signup:hover i {color: #fbbf24;}

@keyframes signup-amber-pulse {
	0%, 100% {box-shadow: 0 0 0 0 rgba(251, 191, 36, .45);}
	50% {box-shadow: 0 0 0 6px rgba(251, 191, 36, 0);}
}

/* 모바일 토글 */
.site-header--type2 .site-header-mobile-toggle {background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff;}
.site-header--type2 .site-header-mobile-toggle:hover, .site-header--type2 .site-header-mobile-toggle.is-active {border-color: #fbbf24; color: #fbbf24;}

/* user-menu (모바일) */
.site-header--type2 .user-menu-toggle {background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff;}
.site-header--type2 .user-menu-toggle:hover, .site-header--type2 .user-menu.is-open .user-menu-toggle {border-color: #fbbf24; color: #fbbf24; background: rgba(255, 255, 255, .04);}

/* ============================================================
   Type 3 — 흰 상단 + 그린 GNB (시니어 톤 / 라이트→그린 컨트라스트)
   ============================================================ */
.site-header--type3 {background: #fff; position: relative; z-index: 80;}
.site-header--type3 .site-header-top {background: #fff; border-bottom: 0; position: relative; z-index: 2;}
.site-header--type3 .site-header-nav {position: relative; z-index: 1;}
.site-header--type3 .site-header-top .inner {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: auto; padding-top: 20px; padding-bottom: 20px;}

/* 좌측 — 센터 메뉴 (그린 outline pill, hover 시 채움) */
.site-header--type3 .site-header-centers {justify-self: start; display: flex; align-items: center; gap: 6px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;}
.site-header--type3 .center-link {display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: #fff; border: 1.5px solid #1e3a8a; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1e3a8a; white-space: nowrap; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;}
.site-header--type3 .center-link i {font-size: 11px; color: #1e3a8a; transition: color .2s ease;}
.site-header--type3 .center-link:hover {color: #fff; background: #1e3a8a; box-shadow: 0 6px 16px rgba(30, 58, 138, .35); transform: translateY(-1px);}
.site-header--type3 .center-link:hover i {color: #fff;}

/* 가운데 — 로고 (효과 없이 단순 표시) */
.site-header--type3 .site-header-logo {justify-self: center; display: inline-flex; align-items: center; padding: 0; background: transparent; border-radius: 0; box-shadow: none;}
.site-header--type3 .site-header-logo-img {height: 38px;}

/* 우측 — 로그인 + 회원가입 (각 버튼 독립, 그린 배경 톤에 맞춤) */
.site-header--type3 .site-header-util {justify-self: end; display: flex; align-items: center; gap: 8px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; height: auto; margin: 0;}
.site-header--type3 .site-header-util .util-link {display: none;}

/* 로그인 — 그린 채움 (메인 CTA) */
.site-header--type3 .site-header-util .btn-login {height: 38px; margin: 0; padding: 0 20px; border-radius: 999px; background: #1e3a8a; color: #fff; font-weight: 800; box-shadow: 0 2px 10px rgba(30, 58, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
.site-header--type3 .site-header-util .btn-login i {color: #fff;}
.site-header--type3 .site-header-util .btn-login:hover {background: #13286b; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30, 58, 138, .45), inset 0 1px 0 rgba(255, 255, 255, .3);}

/* 회원가입 — 점선 보더 + 호흡 pulse → hover 시 실선 그린 채움 */
.site-header--type3 .site-header-util .btn-signup {position: relative; isolation: auto; height: 38px; margin: 0; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px dashed #1e3a8a; color: #1e3a8a; font-weight: 700; overflow: visible; box-shadow: 0 0 0 0 rgba(30, 58, 138, .45); animation: signup-emerald-breath 2.6s ease-in-out infinite; transition: color .3s ease, background .3s ease, border .3s ease, transform .3s ease, box-shadow .3s ease;}
.site-header--type3 .site-header-util .btn-signup::before, .site-header--type3 .site-header-util .btn-signup::after {display: none;}
.site-header--type3 .site-header-util .btn-signup i {color: #1e3a8a; transition: color .3s ease;}
.site-header--type3 .site-header-util .btn-signup:hover {background: #1e3a8a; border-style: solid; border-color: #1e3a8a; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 58, 138, .3); animation: none;}
.site-header--type3 .site-header-util .btn-signup:hover i {color: #fff;}

@keyframes signup-emerald-breath {
	0%, 100% {box-shadow: 0 0 0 0 rgba(30, 58, 138, .45);}
	50% {box-shadow: 0 0 0 6px rgba(30, 58, 138, 0);}
}

/* 2단 GNB — 그린 배경 + 흰 캡슐 hover */
.site-header--type3 .site-header-nav {background: #1e3a8a; border-top: 0; border-bottom: 0;}
.site-header--type3 .site-header-nav .inner {height: 64px;}
.site-header--type3 .site-header-nav .nav-item {height: 64px;}

/* 1차 메뉴 — 흰 텍스트 + hover 시 흰 캡슐 채움 (Inverted) */
.site-header--type3 .site-header-nav .nav-link {height: 40px; padding: 0 20px; border-radius: 999px; color: #fff; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;}
.site-header--type3 .site-header-nav .nav-link::after {display: none;}
.site-header--type3 .site-header-nav .nav-link:hover, .site-header--type3 .site-header-nav .nav-link.is-active, .site-header--type3 .site-header-nav .nav-item:hover .nav-link {color: #1e3a8a; background: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);}

/* 2차 메뉴 — 흰 박스 + 좌측 그린 dot (탄성 등장) + 텍스트 slide */
.site-header--type3 .site-header-nav .nav-dropdown {background: #fff; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 16px 40px rgba(0, 0, 0, .15);}
.site-header--type3 .site-header-nav .nav-dropdown a {position: relative; display: block; padding: 11px 22px 11px 28px; color: var(--c-text); transition: color .25s ease, background .25s ease, padding-left .25s ease;}
.site-header--type3 .site-header-nav .nav-dropdown a::before {content: ""; position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; background: #1e3a8a; border-radius: 50%; transform: translateY(-50%) scale(0); box-shadow: 0 0 8px rgba(30, 58, 138, .5); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);}
.site-header--type3 .site-header-nav .nav-dropdown a::after {display: none;}
.site-header--type3 .site-header-nav .nav-dropdown a:hover {color: #1e3a8a; background: rgba(30, 58, 138, .08); padding-left: 32px; font-weight: 700;}
.site-header--type3 .site-header-nav .nav-dropdown a:hover::before {transform: translateY(-50%) scale(1);}

/* 모바일 토글 / user-menu — 흰 상단 위 그린 톤 */
.site-header--type3 .site-header-mobile-toggle:hover, .site-header--type3 .site-header-mobile-toggle.is-active {border-color: #1e3a8a; color: #1e3a8a;}
.site-header--type3 .user-menu-toggle:hover, .site-header--type3 .user-menu.is-open .user-menu-toggle {border-color: #1e3a8a; color: #1e3a8a; background: rgba(30, 58, 138, .04);}

/* Type 4 — 다크 톤 강조 */
/* ============================================================
   Type 4 — 다크 Tech / 사이버 톤 + 시안 액센트 + 메가 메뉴
   ============================================================ */
.site-header--type4 {background: linear-gradient(135deg, #0c1929 0%, #0f1729 50%, #0a0f1c 100%); position: relative; z-index: 80;}
.site-header--type4::before {content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(6, 182, 212, .12), transparent 35%), radial-gradient(circle at 85% 100%, rgba(34, 211, 238, .08), transparent 40%); pointer-events: none; z-index: 0;}
.site-header--type4::after {content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(6, 182, 212, .025) 3px 4px); pointer-events: none; z-index: 0;}

/* 상단 Thin Top-bar (Tech 톤 공지 띠) */
.site-header--type4 .site-header-topbar {position: relative; background: rgba(0, 0, 0, .35); border-bottom: 1px solid rgba(6, 182, 212, .15); z-index: 3; backdrop-filter: blur(8px);}
.site-header--type4 .site-header-topbar .inner {display: flex; align-items: center; gap: 14px; height: 36px; font-size: 12px; font-weight: 500;}
.site-header--type4 .topbar-tag {display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: linear-gradient(135deg, #06b6d4, #22d3ee); color: #0f1729; font-size: 10px; font-weight: 800; letter-spacing: 1px; border-radius: 3px;}
.site-header--type4 .topbar-tag i {font-size: 10px;}
.site-header--type4 .topbar-text {flex: 1; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.site-header--type4 .topbar-link {display: inline-flex; align-items: center; gap: 5px; color: #22d3ee; font-weight: 700; transition: color .2s ease, gap .2s ease;}
.site-header--type4 .topbar-link i {font-size: 10px;}
.site-header--type4 .topbar-link:hover {color: #fff; gap: 8px;}

.site-header--type4 .site-header-top {background: transparent; border-bottom: 0; position: relative; z-index: 2;}
.site-header--type4 .site-header-top::after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, .5) 30%, rgba(34, 211, 238, .8) 50%, rgba(34, 211, 238, .5) 70%, transparent 100%); box-shadow: 0 0 12px rgba(34, 211, 238, .35);}
.site-header--type4 .site-header-top .inner {height: 76px; gap: 24px; align-items: center;}

/* 로고 + 라이브 dot */
.site-header--type4 .site-header-logo {flex-shrink: 0; position: relative; display: inline-flex; align-items: center; gap: 8px;}
.site-header--type4 .site-header-logo-img {height: 36px;}
.site-header--type4 .site-header-logo-dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, .8); animation: type4-dot-blink 1.6s ease-in-out infinite;}

@keyframes type4-dot-blink {
	0%, 100% {opacity: 1; transform: scale(1);}
	50% {opacity: .4; transform: scale(.8);}
}

/* 1단 인라인 GNB */
/* 데스크톱 전용 — 가로 nav (모바일 ≤1023은 드로어: 위 @media 블록 + 일반 드로어 규칙 사용) */
@media (min-width: 1024px) {
.site-header--type4 .site-header-nav {position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 36px; height: 76px; background: transparent; border: 0; box-shadow: none; padding: 0; transform: none; overflow: visible; max-width: none; width: auto;}
.site-header--type4 .site-header-nav .nav-head {display: none;}
.site-header--type4 .nav-item {position: relative; height: 76px; display: flex; align-items: center;}
.site-header--type4 .nav-link {position: relative; display: inline-flex; align-items: center; height: 76px; padding: 0 4px; font-size: 21px; font-weight: 700; letter-spacing: .3px; color: rgba(255, 255, 255, .85); transition: color .25s ease;}
.site-header--type4 .nav-link::after {display: none;}
.site-header--type4 .nav-link:hover, .site-header--type4 .nav-item:hover .nav-link, .site-header--type4 .nav-link.is-active, .site-header--type4.is-mega-open .nav-link {color: #22d3ee;}
}

/* 우측 버튼 */
.site-header--type4 .site-header-util {flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 76px; margin: 0;}
.site-header--type4 .site-header-util .util-link {display: none;}

/* 로그인 — 시안 그라데이션 채움 */
.site-header--type4 .site-header-util .btn-login {height: 38px; margin-left: 0; padding: 0 18px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: #0f1729; font-weight: 800; border-radius: var(--radius-s); box-shadow: 0 2px 12px rgba(6, 182, 212, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;}
.site-header--type4 .site-header-util .btn-login i {color: #0f1729;}
.site-header--type4 .site-header-util .btn-login:hover {transform: translateY(-1px); box-shadow: 0 6px 20px rgba(6, 182, 212, .5), inset 0 1px 0 rgba(255, 255, 255, .3); filter: brightness(1.06);}

/* 회원가입 — 시안 outline (스핀 효과 무효화) */
.site-header--type4 .site-header-util .btn-signup {position: relative; isolation: auto; height: 38px; margin-left: 0; padding: 0 18px; background: transparent; color: #fff; border: 1.5px solid rgba(34, 211, 238, .5); border-radius: var(--radius-s); font-weight: 700; box-shadow: none; overflow: visible; animation: none; transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;}
.site-header--type4 .site-header-util .btn-signup::before, .site-header--type4 .site-header-util .btn-signup::after {display: none;}
.site-header--type4 .site-header-util .btn-signup i {color: rgba(34, 211, 238, .9); transition: color .25s ease;}
.site-header--type4 .site-header-util .btn-signup:hover {background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); border-color: transparent; color: #0f1729; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(6, 182, 212, .35);}
.site-header--type4 .site-header-util .btn-signup:hover i {color: #0f1729;}

/* 모바일 토글 */
.site-header--type4 .site-header-mobile-toggle {background: transparent; border-color: rgba(34, 211, 238, .35); color: #fff;}
.site-header--type4 .site-header-mobile-toggle:hover, .site-header--type4 .site-header-mobile-toggle.is-active {border-color: #22d3ee; color: #22d3ee;}
.site-header--type4 .user-menu-toggle {background: transparent; border-color: rgba(34, 211, 238, .35); color: #fff;}
.site-header--type4 .user-menu-toggle:hover, .site-header--type4 .user-menu.is-open .user-menu-toggle {border-color: #22d3ee; color: #22d3ee; background: rgba(6, 182, 212, .08);}

/* header-4 모바일 — 로고 축소 + 햄버거/회원정보 버튼 공간 확보 (좁은 화면에서 찌그러짐 방지) */
@media (max-width: 1023px) {
	/* 드로어(nav)가 .site-header-top(z-index:2) 컨텍스트에 갇혀 backdrop(999)에 덮이던 문제 → top을 backdrop 위로 올려 드로어가 선명하게 표시 */
	.site-header--type4 .site-header-top {z-index: 1001;}
	.site-header--type4 .site-header-top .inner {gap: 0; height: 64px;}
	/* 우측 버튼(회원정보·햄버거)을 오른쪽으로 묶어 배치 — space-between 분산으로 벌어지던 여백 제거 */
	.site-header--type4 .site-header-util {height: auto; margin-left: auto;}
	.site-header--type4 .site-header-logo-img {height: 28px;}
	.site-header--type4 .site-header-mobile-toggle, .site-header--type4 .user-menu-toggle {flex-shrink: 0; width: 38px; height: 38px;}
	.site-header--type4 .site-header-mobile-toggle {margin-left: 10px;}
}
@media (max-width: 479px) {
	.site-header--type4 .site-header-logo-img {height: 24px;}
}

/* 메가 메뉴 (1차 메뉴 hover/click 시 전체 펼침 — 반투명 glassmorphism) */
.site-header--type4 .site-header-mega {position: absolute; top: 100%; left: 50%; right: auto; width: 100%; max-width: 1480px; border-radius: 0 0 14px 14px; overflow: hidden; background: linear-gradient(180deg, rgba(10, 15, 28, .6) 0%, rgba(6, 10, 20, .68) 100%); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(6, 182, 212, .22); border-top: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); transition: opacity .3s ease, transform .3s ease, visibility .3s; z-index: 50; pointer-events: none;}
.site-header--type4.is-mega-open .site-header-mega {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;}
.site-header--type4 .site-header-mega::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, .6) 50%, transparent 100%);}

/* 메가 그리드 — 7컬럼 */
.site-header--type4 .mega-grid {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; padding: 22px 0 26px;}
.site-header--type4 .mega-col-title {color: #22d3ee; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(6, 182, 212, .25); position: relative;}
.site-header--type4 .mega-col-title::after {content: ""; position: absolute; bottom: -1px; left: 0; width: 28px; height: 1px; background: linear-gradient(90deg, #22d3ee, #06b6d4); box-shadow: 0 0 8px rgba(34, 211, 238, .6);}
.site-header--type4 .mega-col-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0;}
.site-header--type4 .mega-col-list a {position: relative; display: flex; align-items: center; padding: 7px 0; color: rgba(255, 255, 255, .78); font-size: 17px; font-weight: 600; transition: color .25s ease, padding-left .25s ease;}
.site-header--type4 .mega-col-list a::before {content: "›"; display: inline-block; width: 0; margin-right: 0; color: #22d3ee; font-weight: 700; opacity: 0; transition: width .25s ease, margin-right .25s ease, opacity .25s ease;}
.site-header--type4 .mega-col-list a:hover {color: #fff; padding-left: 4px;}
.site-header--type4 .mega-col-list a:hover::before {width: 12px; margin-right: 4px; opacity: 1;}


/* ============================================================
   헤더 시안 토글 패널 (시안 단계 전용 — 운영 시 제거)
   ============================================================ */
.header-preview-toggle {position: fixed; top: 12px; right: 16px; z-index: 9999; background: rgba(15, 23, 42, .92); color: #fff; border-radius: 99px; padding: 5px 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); backdrop-filter: blur(6px);}
.header-preview-toggle .header-preview-label {color: rgba(255, 255, 255, .7); font-weight: 600; padding: 0 10px 0 12px; letter-spacing: .2px;}
.header-preview-toggle .header-preview-btn {height: 28px; padding: 0 14px; border-radius: 99px; background: transparent; color: rgba(255, 255, 255, .65); font-weight: 600; font-size: 12px; transition: all .2s;}
.header-preview-toggle .header-preview-btn:hover {color: #fff;}
.header-preview-toggle .header-preview-btn.is-active {background: var(--c-primary); color: #fff;}

@media (max-width: 767px) {
	.header-preview-toggle {top: 8px; right: 8px; padding: 3px 4px;}
	.header-preview-toggle .header-preview-label {display: none;}
	.header-preview-toggle .header-preview-btn {height: 26px; padding: 0 10px; font-size: 11px;}
}