/* ============================================ 0) 공통 토큰: 레이아웃(모드 무관) ============================================ */ :root { /* Layout */ --header-height: 50px; /* ▼ 60px → 50px */ --radius-xl: 30px; --radius-lg: 18px; --radius-md: 12px; /* Dropdown radius (Bootstrap) */ --bs-dropdown-border-radius: 30px; /* ▼ 헤더 효과/애니 공통화 (블러 강화) */ --header-blur: 34px; /* 원본 유지 */ --header-sat: 220%; /* 원본 유지 */ --header-anim-dur: 16s; --header-anim-timing: ease-in-out; /* 메뉴 라운드 공통(다크 포함) */ --menu-radius: 26px; --menu-radius-inner: 18px; --menu-pad-y: 9px; --menu-pad-x: 9px; --menu-max-h: clamp(260px, calc(100dvh - var(--header-height) - 90px), 720px); /* ========================================================= [PERF] 경량화 스케일 (✅ 여기만 조절하면 전역 blur/sat가 줄어듦) - 기본값: 시각 유지하면서 체감 성능 개선 - 더 가볍게: html.perf-lite 클래스 추가 ========================================================= */ --perf-blur-mult: .55; /* 1.0 = 원본(무거움), 0.55 = 경량 */ --perf-sat-mult: .75; /* 계산된 값(사용용) */ --bf-header-blur: calc(var(--header-blur) * var(--perf-blur-mult)); --bf-header-sat: calc(var(--header-sat) * var(--perf-sat-mult)); } /* ✅ 초경량 모드(선택): */ html.perf-lite{ --perf-blur-mult: .35; --perf-sat-mult: .65; } /* 모바일에서는 더 줄여서 렌더링 부담 감소 */ @media (max-width: 991.98px){ :root{ --perf-blur-mult: .42; --perf-sat-mult: .70; --bf-header-blur: calc(var(--header-blur) * var(--perf-blur-mult)); --bf-header-sat: calc(var(--header-sat) * var(--perf-sat-mult)); } } /* ============================================ 0-1) 라이트 모드 변수 (전체 배경 = 순수 화이트) ============================================ */ :root[color-theme='light'] { /* 페이지 배경/표면 = 완전 화이트 */ --surface-bg: #ffffff; --surface-elevated: #ffffff; --surface-item: #ffffff; --surface-border: rgba(15, 23, 42, 0.08); /* Text → 다크 텍스트 */ --text-primary: #0f172a; /* slate-900 */ --text-secondary: #475569; /* slate-600 */ --text-muted: #94a3b8; /* slate-400 */ /* Accent (로즈 유지, 화이트 톤에 맞춰 소프트) */ --accent-main: #fb7185; /* rose-400 */ --accent-main-2: #be123cff; /* rose-700 */ --accent-soft: rgba(244,63,94,.12); /* Shadow (밝은 면에 맞춘 소프트 섀도우) */ --shadow-soft: 0 12px 36px rgba(2, 6, 23, 0.08); --shadow-strong: 0 24px 80px rgba(2, 6, 23, 0.12); /* Header 전용 그림자 */ --header-shadow-soft: 0 12px 32px rgba(2, 6, 23, 0.10); --header-shadow-strong: 0 26px 90px rgba(2, 6, 23, 0.14); /* ------- 메뉴 전용 토큰 (화이트 + 유리감 위해 반투명 톤) ------- */ --menu-bg: rgba(255,255,255,.92); --menu-border: rgba(15,23,42,.10); --menu-border-strong: rgba(244,63,94,.18); /* ✅ 흰색 외곽선 제거: inset 흰색 라인 삭제 */ --menu-shadow: 0 22px 80px rgba(15,23,42,.12), 0 0 0 1px rgba(2,6,23,.05); --menu-item-bg: rgba(255,255,255,.96); --menu-item-border: rgba(15,23,42,.06); --menu-item-hover: rgba(255,255,255,1); --menu-item-active: rgba(255,255,255,1); --menu-text: #0f172a; --menu-text-sub: rgba(15,23,42,.72); /* 드롭다운 스크롤 컬러 (화이트에 맞춘 그레이) */ --dd-scroll-track: rgba(226,232,240,.8); --dd-scroll-thumb: rgba(148,163,184,.75); --dd-scroll-thumb-hover: rgba(100,116,139,.9); /* ============================================ Liquid Glass tokens (Light) ============================================ */ --glass-bg: rgba(255,255,255,.90); --glass-stroke: rgba(15,23,42,.10); --glass-inner-stroke: rgba(15,23,42,.08); --glass-shadow: 0 26px 80px rgba(2,6,23,.10); --glass-glow: 0 0 0 1px rgba(2,6,23,.05); --glass-blur: 28px; /* 원본 유지(실제 적용은 perf 스케일로 감소) */ --glass-sat: 170%; --glass-bg-strong: rgba(255,255,255,.94); --glass-shadow-strong: 0 34px 110px rgba(2,6,23,.14); } /* ============================================ 0-2) 다크 모드 변수 ============================================ */ :root[color-theme='dark'] { --surface-bg: radial-gradient(circle at top left, #111827 0%, #020617 45%, #020617 100%); --surface-elevated: rgba(15, 23, 42, 0.92); --surface-item: rgba(15, 23, 42, 0.92); --surface-border: rgba(148, 163, 184, 0.20); --text-primary: #e5e7eb; --text-secondary: #9ca3af; --text-muted: #6b7280; --accent-main: #8b5cf6; --accent-main-2: #491a82ff; --accent-soft: rgba(139, 92, 246, 0.18); --shadow-soft: 0 22px 52px rgba(0, 0, 0, 0.72); --shadow-strong: 0 32px 90px rgba(0, 0, 0, 0.92); --header-shadow-soft: 0 18px 36px rgba(0, 0, 0, 0.78); --header-shadow-strong: 0 34px 90px rgba(0, 0, 0, 0.92); --menu-radius: 26px; --menu-radius-inner: 18px; --menu-pad-y: 9px; --menu-pad-x: 9px; --menu-bg: radial-gradient(circle at 12% 0%, rgba(139,92,246,.30), transparent 55%), radial-gradient(circle at 92% 6%, rgba(56,189,248,.22), transparent 58%), radial-gradient(circle at 50% 110%, rgba(236,72,153,.18), transparent 58%), linear-gradient(135deg, rgba(15,23,42,.90), rgba(17,24,39,.88), rgba(2,6,23,.94)); /* ❌ 원본에 :root에 backdrop-filter가 들어가 있었는데(무의미/비용 가능성) 제거 */ --menu-border: rgba(148,163,184,.20); --menu-border-strong: rgba(56,189,248,.30); --menu-shadow: 0 30px 100px rgba(0,0,0,.86), 0 0 0 1px rgba(2,6,23,.78), inset 0 0 0 1px rgba(148,163,184,.14); --menu-item-bg: rgba(255,255,255,.08); --menu-item-border: rgba(148,163,184,.12); --menu-item-hover: linear-gradient(135deg, rgba(56,189,248,.24), rgba(139,92,246,.18), rgba(236,72,153,.12)); --menu-item-active: linear-gradient(135deg, rgba(56,189,248,.30), rgba(139,92,246,.22)); --menu-text: #eef2ff; --menu-text-sub: rgba(229,231,235,.84); --dd-scroll-track: rgba(2,6,23,.55); --dd-scroll-thumb: rgba(56,189,248,.40); --dd-scroll-thumb-hover: rgba(139,92,246,.58); /* Liquid Glass (Dark) */ --glass-bg: radial-gradient(1200px 800px at 10% -10%, rgba(56,189,248,.22), transparent 55%), radial-gradient(900px 700px at 95% 0%, rgba(139,92,246,.20), transparent 58%), radial-gradient(1000px 900px at 50% 110%, rgba(236,72,153,.14), transparent 58%), linear-gradient(135deg, rgba(17,24,39,.88), rgba(2,6,23,.92)); --glass-stroke: rgba(148,163,184,.20); --glass-inner-stroke: rgba(148,163,184,.16); --glass-shadow: 0 34px 110px rgba(0,0,0,.86); --glass-glow: 0 0 0 1px rgba(2,6,23,.70); --glass-blur: 32px; --glass-sat: 230%; --glass-bg-strong: radial-gradient(1200px 800px at 12% -8%, rgba(56,189,248,.28), transparent 55%), radial-gradient(900px 700px at 92% 6%, rgba(139,92,246,.24), transparent 58%), radial-gradient(1000px 900px at 50% 110%, rgba(236,72,153,.18), transparent 58%), linear-gradient(130deg, rgba(15,23,42,.94), rgba(2,6,23,.98)); --glass-shadow-strong: 0 42px 120px rgba(0,0,0,.94); } /* ============================================ 1) 헤더 / 네비게이션 바 ============================================ */ #hd .navbar { position: sticky; top: 0; z-index: 1040; height: var(--header-height); /* ✅ 경량화: blur/sat를 스케일 적용 */ backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); -webkit-backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); border-bottom: 1px solid var(--surface-border); box-shadow: var(--header-shadow-soft); isolation: isolate; overflow: visible; margin: 6px 10px 0; padding-inline: 14px; border-radius: 999px; } /* 라이트 헤더 = 화이트 + 글래스광 은은 */ :root[color-theme='light'] #hd .navbar { background: rgba(255,255,255,.94); border-bottom-color: rgba(15, 23, 42, 0.08); box-shadow: var(--header-shadow-soft); } :root[color-theme='dark'] #hd .navbar { background: rgba(10,24,64,0.90); border-bottom-color: rgba(148, 163, 184, 0.25); box-shadow: var(--header-shadow-soft); } /* 헤더 아래쪽 타원형 그림자 */ #hd .navbar::after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-20px; width:76%; height:40px; border-radius:999px; background: radial-gradient(ellipse at center, rgba(15,23,42,0.10), transparent 70%); filter: blur(16px); /* ✅ 경량화: 20px → 16px */ opacity:.8; pointer-events:none; z-index:-1; } :root[color-theme='dark'] #hd .navbar::after { background: radial-gradient(ellipse at center, rgba(15,23,42,0.9), transparent 70%); } #hd .navbar .container, #hd .navbar .container-fluid { padding-block: 0.1rem; position: relative; z-index: 1; } /* 브랜드(로고 텍스트) */ #hd .navbar-brand { font-weight: 750; letter-spacing: .04em; color: var(--text-primary) !important; display: inline-flex; align-items: center; gap: .4rem; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(15,23,42,.12); } /* 브랜드 옆 pill 라벨 */ #hd .navbar-brand::after { content:"LIVE"; display:inline-flex; align-items:center; justify-content:center; padding:.1rem .46rem; border-radius:999px; margin-left:.15rem; background: radial-gradient(circle at 0 0, #f97316, var(--accent-main)); box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 8px 18px rgba(99,102,241,.25); } :root[color-theme='dark'] #hd .navbar-brand::after { box-shadow: 0 0 18px rgba(139, 92, 246, .9), 0 0 0 1px rgba(255,255,255,.35); } /* ============================================ 2) 상단 메뉴 텍스트 / 호버 (pill) ============================================ */ #hd .navbar-nav .nav-link { position: relative; font-weight: 600; padding: .32rem .9rem; margin: 0 .14rem; border-radius: 999px; box-shadow: 0 0 0 0 rgba(148,163,253,0); transform: translateY(0); transition: color .18s ease-out, background-color .18s ease-out, transform .16s ease-out, box-shadow .2s ease-out; color: var(--text-secondary); } #hd .navbar-nav .nav-link:hover, #hd .navbar-nav .nav-link:focus { background-color: var(--accent-soft); transform: translateY(-1px); /* ✅ 경량화: 그림자 조금 축소 */ box-shadow: 0 8px 18px rgba(15,23,42,.08), 0 0 0 1px rgba(148,163,253,.14); color: var(--text-primary); } /* 활성 메뉴 */ #hd .navbar-nav .nav-link.active, #hd .navbar-nav .show > .nav-link { color: var(--text-primary); background: rgba(255,255,255,1); box-shadow: 0 10px 22px rgba(15,23,42,.10), 0 0 0 1px rgba(148,163,253,.18); transform: translateY(-1px); } :root[color-theme='dark'] #hd .navbar-nav .nav-link { color: var(--text-muted); } :root[color-theme='dark'] #hd .navbar-nav .nav-link:hover, :root[color-theme='dark'] #hd .navbar-nav .nav-link:focus { color: #e5e7eb; } /* ============================================ 3) 드롭다운 — 라이트: 화이트 글래스 / 다크: 오로라 글래스 ============================================ */ #hd .dropdown-menu { background: var(--menu-bg) !important; border: 1px solid var(--menu-border) !important; border-radius: var(--menu-radius) !important; box-shadow: var(--menu-shadow) !important; padding: var(--menu-pad-y) var(--menu-pad-x) !important; /* ✅ 경량화: 드롭다운 blur/sat 스케일 적용 */ backdrop-filter: blur(calc(28px * var(--perf-blur-mult))) saturate(calc(180% * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(28px * var(--perf-blur-mult))) saturate(calc(180% * var(--perf-sat-mult))) !important; min-width: 0; width: max-content; display: inline-block; max-height: var(--menu-max-h) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform-origin: top center; opacity: 0; transform: translateY(6px) scale(.97); pointer-events: none; transition: opacity .18s ease-out, transform .2s ease-out, box-shadow .22s ease-out; z-index: 1050; } #hd .dropdown-menu::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(115deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.26) 25%, rgba(255,255,255,0) 55%); mix-blend-mode: screen; opacity:.45; } #hd .dropdown-menu::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; /* ✅ 흰색 외곽선 제거: inset 흰색 라인 삭제 */ box-shadow: 0 0 0 1px var(--menu-border-strong); opacity:.6; } /* show/is-open */ #hd .dropdown-menu.show, #hd .navbar .dropdown.is-open > .dropdown-menu, #hd #gnb .dropdown.is-open > .dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; animation: jellyDropY .45s cubic-bezier(.23, 1.52, .32, 1); } #hd .dropdown-menu:hover { box-shadow: var(--shadow-strong); transform: translateY(0) scale(1.01); /* ✅ 경량화: 1.02 → 1.01 */ } /* 드롭다운 아이템 */ #hd .dropdown-item{ color: var(--menu-text) !important; border-radius: var(--menu-radius-inner) !important; padding: 10px 12px !important; margin: 4px 0 !important; background: var(--menu-item-bg) !important; border: 1px solid var(--menu-item-border) !important; box-shadow: none !important; transform: translateY(0); transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } #hd .dropdown-item span{ position:relative; padding-left:12px; } #hd .dropdown-item span::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), var(--accent-main)); box-shadow: 0 0 8px rgba(244,63,94,.20); opacity:.9; } #hd .dropdown-item small{ color: var(--menu-text-sub) !important; opacity:.95; } #hd .dropdown-item:hover, #hd .dropdown-item:focus{ background: rgba(255,255,255,1) !important; border-color: rgba(244,63,94,.16) !important; transform: translateY(-1px); /* ✅ 흰색 외곽선 제거 */ box-shadow: 0 10px 18px rgba(15,23,42,.08) !important; } #hd .dropdown-item.active, #hd .dropdown-item.active:hover, #hd .dropdown-item.active:focus{ background: rgba(255,255,255,1) !important; border-color: rgba(244,63,94,.22) !important; /* ✅ 흰색 외곽선 제거 */ box-shadow: 0 12px 22px rgba(15,23,42,.10) !important; } #hd .dropdown-divider{ border-top: 1px solid rgba(148,163,184,.22) !important; opacity:.9 !important; margin:10px 0 !important; } /* 가운데 메인 드롭다운 카드 */ #hd .dropdown-menu.main-bg{ background: var(--menu-bg) !important; border: 1px solid var(--menu-border) !important; border-radius: var(--menu-radius) !important; box-shadow: var(--menu-shadow) !important; padding: var(--menu-pad-y) var(--menu-pad-x) !important; max-height: var(--menu-max-h) !important; overflow-y: auto !important; overflow-x: hidden !important; /* ✅ 경량화 동일 적용 */ backdrop-filter: blur(calc(28px * var(--perf-blur-mult))) saturate(calc(180% * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(28px * var(--perf-blur-mult))) saturate(calc(180% * var(--perf-sat-mult))) !important; } #hd .dropdown-menu.main-bg.show { animation: jellyMainCard .5s cubic-bezier(.23, 1.52, .32, 1); } #hd .dropdown-menu.main-bg .dropdown-item{ background: var(--menu-item-bg) !important; border: 1px solid var(--menu-item-border) !important; color: var(--menu-text) !important; } #hd .dropdown-menu.main-bg .dropdown-item:hover, #hd .dropdown-menu.main-bg .dropdown-item:focus{ background: rgba(255, 0, 0, 0.34) !important; color: var(--menu-text) !important; } /* ============================================ 4) 서브 드롭다운(2단/3단) — 데스크톱: 스택형 ============================================ */ @media (min-width: 992px){ #hd .dropdown-menu .dropdown > .dropdown-menu{ position: static !important; left:auto !important; top:auto !important; display: none; opacity:1 !important; transform:none !important; pointer-events:auto !important; margin: 6px 0; padding: 6px; border-radius: max(14px, calc(var(--menu-radius) - 10px)) !important; border: 1px solid var(--surface-border); background: rgba(255,255,255,.94); /* ✅ 경량화 */ backdrop-filter: blur(calc(20px * var(--perf-blur-mult))) saturate(calc(150% * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(20px * var(--perf-blur-mult))) saturate(calc(150% * var(--perf-sat-mult))); box-shadow: none; border-left: 3px solid rgba(244,63,94,.18); } :root[color-theme='dark'] #hd .dropdown-menu .dropdown > .dropdown-menu{ background: rgba(15,23,42,.55); border-left-color: rgba(129,140,248,.45); } #hd .dropdown-menu .dropdown.is-open > .dropdown-menu, #hd .dropdown-menu .dropdown.show > .dropdown-menu{ display:block; } #hd .dropdown-menu .dropdown > .dropdown-menu .dropdown-item{ padding: .40rem .85rem; border-radius: 14px; margin: 2px 0; } #hd .dropdown-menu .dropdown > .dropdown-menu .dropdown > .dropdown-menu{ margin-left: 8px; border-left-width: 3px; } } /* ============================================ 5) 모바일 (햄버거 내부) ============================================ */ @media (max-width: 991.98px) { #hd .navbar{ backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); -webkit-backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); } #hd .navbar-collapse{ position:absolute; top: var(--header-height); left:0; right:0; margin-top:0; max-width:100vw; border-radius: 0 0 24px 24px; padding: .6rem .8rem .9rem; background: rgba(255,255,255,.96); box-shadow: 0 22px 60px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.06); /* ✅ 경량화 */ backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(170% * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(170% * var(--perf-sat-mult))); overflow-y: auto; max-height: calc(100vh - var(--header-height) - 6px); z-index:1045; } :root[color-theme='dark'] #hd .navbar-collapse{ background: rgba(15,23,42,.78); box-shadow: 0 24px 70px rgba(0,0,0,.85), 0 0 0 1px rgba(148,163,253,.35); /* ✅ 경량화 */ backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(190% * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(190% * var(--perf-sat-mult))); } /* ✅ 모바일 드롭다운: 기본은 숨김, show일 때만 표시 */ #hd .navbar-collapse .dropdown-menu, #hd .navbar-collapse .dropdown-menu .dropdown-menu{ position: static; transform: none !important; box-shadow: none; margin-top: .3rem; width: 100%; border-radius: 18px !important; opacity: 1; pointer-events: auto; min-width: 0; /* ✅ 여기! 항상 보이게(display:block) → 기본 숨김 */ display: none !important; background: transparent; border: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #hd .navbar-collapse .dropdown-menu.show, #hd .navbar-collapse .dropdown-menu .dropdown-menu.show{ display: block !important; } /* ✅ 햄버거 안 1단 메뉴: 세로 1줄 → 가로 + 줄바꿈 */ #hd .navbar-collapse .navbar-nav{ flex-direction: row !important; flex-wrap: wrap !important; gap: .28rem .35rem; align-items: center; justify-content: flex-start; width: 100%; margin: 0; } #hd .navbar-collapse .navbar-nav .nav-item{ flex: 0 0 auto !important; width: auto !important; } /* ✅ 기존 width:100% 제거 → 가로 배치 */ #hd .navbar-collapse .navbar-nav .nav-link{ width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; border-radius: 14px; padding: .5rem .8rem; margin: 0 !important; } /* ✅ 햄버거 내부 dropdown-item 색상(기존 유지, 스코프만 navbar-collapse로) */ #hd .navbar-collapse .dropdown-menu .dropdown-item, #hd .navbar-collapse .dropdown-menu .dropdown-item span, #hd .navbar-collapse .dropdown-menu .dropdown-item small{ color: var(--text-primary) !important; } :root[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-item, :root[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-item span, :root[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-item small{ color: #e5e7eb !important; } } /* ============================================ 6) 그누보드 gnb(1단/2단) ============================================ */ #gnb_1dul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; } #gnb_1dul .gnb_1dli { position:relative; } /* 1단 메뉴 pill */ #gnb_1dul .gnb_1da { display:inline-flex; align-items:center; justify-content:center; padding:.45rem .35rem; border-radius:0; font-weight:650; color: var(--text-primary); text-decoration:none; white-space:nowrap; letter-spacing:.01em; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateY(0); transition: color .18s ease-out, transform .18s ease-out; } #gnb_1dul .gnb_1da:hover{ background: transparent !important; color: var(--accent-main); box-shadow: none !important; transform: none; } :root[color-theme='dark'] #gnb_1dul .gnb_1da{ background: transparent !important; box-shadow: none !important; color: var(--text-primary); } /* 2단 서브메뉴 컨테이너 */ .gnb_2dul{ position:absolute; top:100%; left:10px; margin-top:.4rem; padding:10px 10px !important; border-radius: var(--menu-radius) !important; border:1px solid var(--menu-border) !important; box-shadow: var(--menu-shadow) !important; background: var(--menu-bg) !important; min-width:160px; width:max-content; display:inline-block; white-space:nowrap; list-style:none; opacity:0; transform: translateY(6px) scale(.97); pointer-events:none; transition: opacity .18s ease-out, transform .2s ease-out, box-shadow .22s ease-out; max-height: var(--menu-max-h) !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* ✅ 경량화: 서브도 스케일 */ backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(170% * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(24px * var(--perf-blur-mult))) saturate(calc(170% * var(--perf-sat-mult))); } #gnb .gnb_1dli:hover > .gnb_2dul, #gnb .gnb_1dli.is-open > .gnb_2dul, #gnb .gnb_1dli.show > .gnb_2dul, #gnb .gnb_1dli.on > .gnb_2dul, .gnb_2dul[style*="display: block"]{ opacity:1 !important; transform: translateY(0) scale(1) !important; pointer-events:auto !important; animation: jellyDropSub .42s cubic-bezier(.23, 1.52, .32, 1); } .gnb_2dli{ margin:3px 0; } .gnb_2dul .gnb_2da{ display:flex; align-items:center; justify-content:flex-start; gap:.48rem; padding:10px 12px !important; margin:4px 0 !important; border-radius: var(--menu-radius-inner) !important; text-indent:0 !important; height:auto !important; line-height:1.5 !important; overflow:visible !important; white-space:nowrap; font-weight:500; text-decoration:none; color: var(--menu-text) !important; background: var(--menu-item-bg) !important; border:1px solid var(--menu-item-border) !important; transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .gnb_2dul .gnb_2da:hover{ background: rgba(255, 0, 0, 0.23) !important; border-color: rgba(244,63,94,.16) !important; transform: translateY(-1px); box-shadow: 0 12px 22px rgba(255, 255, 255, 0.1) !important; } :root[color-theme='dark'] .gnb_2dul{ border-color: rgba(148,163,184,.55); box-shadow: 0 26px 70px rgba(0,0,0,.90); } :root[color-theme='dark'] .gnb_2dul .gnb_2da{ color:#e5e7eb !important; } /* 모바일 gnb */ @media (max-width: 991.98px){ #gnb_1dul{ flex-direction:column; gap:.1rem; } #gnb_1dul .gnb_1dli{ width:100%; } #gnb_1dul .gnb_1da{ width:100%; justify-content:space-between; padding:.55rem .8rem; } .gnb_2dul{ position: static; margin-top:.12rem; margin-left:20px; width:90%; border-radius: 18px !important; box-shadow:none; border:none; /* ✅ 경량화(모바일 서브) */ backdrop-filter: blur(calc(14px * var(--perf-blur-mult))) saturate(calc(130% * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(14px * var(--perf-blur-mult))) saturate(calc(130% * var(--perf-sat-mult))); background: rgba(255,255,255,.96); overflow:hidden; max-height:0; opacity:0; pointer-events:none; transform: translateY(-4px); transition: max-height .28s ease, opacity .2s ease, transform .22s ease; } .gnb_2dul[style*="display: block"]{ max-height:100%; opacity:1; pointer-events:auto; transform: translateY(0); } .gnb_2dul .gnb_2da{ padding: 9px 18px; } :root[color-theme='dark'] .gnb_2dul{ background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(17,24,39,.99)); } :root[color-theme='dark'] .gnb_2dul .gnb_2da{ color:#e5e7eb !important; } } /* ============================================ 7) 헤더 Glass 반사 + 로고 애니메이션 ============================================ */ #hd .navbar::before{ content:""; position:absolute; inset:2px 10px 6px; border-radius:999px; background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,.50)); background-blend-mode: normal; background-size: 100% 100%; background-position: center; border: 1px solid rgba(203,213,225,.35); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.10), inset 0 0 0 1px rgba(203,213,225,.14); /* ✅ 경량화 */ backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); -webkit-backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); opacity:.98; pointer-events:none; z-index:-1; animation: headerSheen var(--header-anim-dur) var(--header-anim-timing) infinite alternate; } :root[color-theme='dark'] #hd .navbar::before{ background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.86)); background-blend-mode: normal; background-size: 100% 100%; background-position: center; border: 1px solid rgba(148,163,184,.65); box-shadow: 0 0 0 1px rgba(15,23,42,.9), 0 22px 60px rgba(0,0,0,.9), inset 0 0 0 1px rgba(148,163,184,.28); /* ✅ 경량화 */ backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); -webkit-backdrop-filter: blur(var(--bf-header-blur)) saturate(var(--bf-header-sat)); animation: headerSheen var(--header-anim-dur) var(--header-anim-timing) infinite alternate; } /* ✅ 흰색 외곽선 제거: 추가 1px 라인 삭제 */ #hd .navbar{ box-shadow: var(--header-shadow-strong) !important; } @keyframes headerSheen{ 0%,50%,100%{ background-position: center; } } /* 로고 float */ #logo img{ animation: logoFloat 7s ease-in-out infinite; transform-origin: center center; transition: transform .35s ease-out; filter: none; box-shadow: none; } #logo:hover img{ animation-play-state: paused; transform: translateY(-4px) scale(1.10) rotate(-1deg); } /* ============================================ 8) Jelly 애니메이션 ============================================ */ @keyframes jellyDropY{ 0%{ opacity:0; transform: translateY(10px) scale(.8,1.15); } 40%{ opacity:1; transform: translateY(-2px) scale(1.05,.95); } 70%{ transform: translateY(0) scale(.97,1.03); } 100%{ transform: translateY(0) scale(1,1); } } @keyframes jellyDropSub{ 0%{ opacity:0; transform: translateY(8px) scale(.85,1.12); } 40%{ opacity:1; transform: translateY(-1px) scale(1.04,.96); } 70%{ transform: translateY(0) scale(.98,1.02); } 100%{ transform: translateY(0) scale(1,1); } } @keyframes jellyMainCard{ 0%{ opacity:0; transform: translateY(12px) scale(.8,1.18); } 35%{ opacity:1; transform: translateY(-2px) scale(1.06,.94); } 70%{ transform: translateY(0) scale(.97,1.03); } 100%{ transform: translateY(0) scale(1,1); } } @keyframes jellyPill{ 0%{ transform: translateY(0) scale(1,1); } 40%{ transform: translateY(-2px) scale(1.06,.95); } 80%{ transform: translateY(-1px) scale(.98,1.03); } 100%{ transform: translateY(-1px) scale(1,1); } } #hd .navbar-nav .nav-link:hover, #hd .navbar-nav .nav-link:focus{ animation: jellyPill .32s cubic-bezier(.23,1.52,.32,1); } #gnb_1dul .gnb_1da:hover{ animation: jellyPill .32s cubic-bezier(.23,1.52,.32,1); } /* ✅ 경량화: 움직임 최소 선호 시 애니메이션 OFF */ @media (prefers-reduced-motion: reduce){ #hd .navbar::before, #logo img, #hd .dropdown-menu.show, #hd .dropdown-menu.main-bg.show, #gnb .gnb_1dli:hover > .gnb_2dul, #gnb .gnb_1dli.is-open > .gnb_2dul, #gnb .gnb_1dli.show > .gnb_2dul, #gnb .gnb_1dli.on > .gnb_2dul, .gnb_2dul[style*="display: block"], #hd .navbar-nav .nav-link:hover, #hd .navbar-nav .nav-link:focus, #gnb_1dul .gnb_1da:hover{ animation: none !important; } } /* ============================================ 9) Dropdown 스크롤바 리컬러 (Bootstrap dropdown만) ============================================ */ #hd .dropdown-menu, #hd .dropdown-menu.main-bg{ scrollbar-width: thin; scrollbar-color: var(--dd-scroll-thumb) var(--dd-scroll-track); } #hd .dropdown-menu::-webkit-scrollbar, #hd .dropdown-menu.main-bg::-webkit-scrollbar{ width: 12px; } #hd .dropdown-menu::-webkit-scrollbar-track, #hd .dropdown-menu.main-bg::-webkit-scrollbar-track{ background: var(--dd-scroll-track); border-radius: 999px; } #hd .dropdown-menu::-webkit-scrollbar-thumb, #hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb{ background: var(--dd-scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } #hd .dropdown-menu::-webkit-scrollbar-thumb:hover, #hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb:hover{ background: var(--dd-scroll-thumb-hover); } /* ============================================ 10) Dropdown scroll hint (스크롤 힌트) ============================================ */ #hd .dropdown-menu[data-dd-scrollable="1"], #hd .dropdown-menu.main-bg[data-dd-scrollable="1"]{ padding-top: calc(var(--menu-pad-y, 10px) + 24px) !important; padding-bottom: calc(var(--menu-pad-y, 10px) + 24px) !important; } #hd .dropdown-menu .dd-more-hint{ position: absolute; left:10px; right:10px; height:22px; display:flex; align-items:center; justify-content:center; gap:8px; pointer-events:none; user-select:none; z-index:60; font-size:11px; font-weight:800; letter-spacing:.08em; opacity:0; transition: opacity .18s ease, transform .18s ease; } #hd .dropdown-menu .dd-more-hint__txt{ opacity:.82; } #hd .dropdown-menu .dd-more-hint__ico{ width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.85); /* ✅ 흰색 외곽선(내곽선) 제거 */ box-shadow: 0 10px 20px rgba(15, 23, 42, .10); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[color-theme='dark'] #hd .dropdown-menu .dd-more-hint__ico{ background: rgba(2,6,23,.28); box-shadow: 0 12px 24px rgba(0,0,0,.60), inset 0 0 0 1px rgba(148,163,184,.14); } #hd .dropdown-menu .dd-more-hint--top{ top:6px; transform: translateY(-6px); } #hd .dropdown-menu .dd-more-hint--bottom{ bottom:6px; transform: translateY(6px); } #hd .dropdown-menu[data-dd-scrollable="1"] .dd-more-hint{ opacity:.92; transform: translateY(0); } #hd .dropdown-menu[data-dd-at-top="1"] .dd-more-hint--top{ opacity:0 !important; transform: translateY(-8px) !important; } #hd .dropdown-menu[data-dd-at-bottom="1"] .dd-more-hint--bottom{ opacity:0 !important; transform: translateY(8px) !important; } /* 모바일에서는 힌트 여백 축소 */ @media (max-width: 991.98px){ #hd .dropdown-menu .dd-more-hint{ display:none !important; } #hd .dropdown-menu[data-dd-scrollable="1"], #hd .dropdown-menu.main-bg[data-dd-scrollable="1"]{ padding-top: var(--menu-pad-y, 10px) !important; padding-bottom: var(--menu-pad-y, 10px) !important; } } /* ============================================ 11) 낮은 창 높이에서 컴팩트화 ============================================ */ @media (max-height: 760px){ #hd .navbar{ margin: 4px 8px 0; box-shadow: var(--header-shadow-soft); } #hd .navbar-nav .nav-link{ padding: .28rem .78rem; } :root{ --menu-radius: 20px; --menu-radius-inner: 16px; --menu-pad-y: 9px; --menu-pad-x: 9px; --menu-max-h: clamp(220px, calc(100dvh - var(--header-height) - 120px), 520px); } #hd .dropdown-item{ padding: 9px 11px !important; } .gnb_2dul .gnb_2da{ padding: 9px 11px !important; } } /* ============================================ 12) Liquid Glass 유틸리티 (카드/버튼/입력/배지) ============================================ */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow), var(--glass-glow); /* ✅ 경량화 */ backdrop-filter: blur(calc(var(--glass-blur) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); transition: box-shadow .2s ease, transform .18s ease, background .2s ease, border-color .2s ease; } .glass-strong { background: var(--glass-bg-strong); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow-strong), var(--glass-glow); } .glass::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glass-inner-stroke); } .glass:hover { transform: translateY(-2px); } .glass-card { padding: 16px; border-radius: var(--radius-xl); } .glass-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; font-weight: 700; letter-spacing:.02em; background: var(--glass-bg); border: 1px solid var(--glass-stroke); box-shadow: 0 10px 24px rgba(0,0,0,.10), var(--glass-glow); /* ✅ 경량화 */ backdrop-filter: blur(calc((var(--glass-blur) - 6px) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc((var(--glass-blur) - 6px) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); color: var(--text-primary); transition: transform .15s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .glass-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.16), var(--glass-glow); /* ✅ 경량화 */ } .glass-btn:active { transform: translateY(0); } .glass-input { width: 100%; padding: .65rem .9rem; border-radius: 14px; background: var(--glass-bg); color: var(--text-primary); border: 1px solid var(--glass-stroke); outline: none; box-shadow: inset 0 1px 0 var(--glass-inner-stroke), var(--glass-glow); /* ✅ 경량화 */ backdrop-filter: blur(calc((var(--glass-blur) - 8px) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); -webkit-backdrop-filter: blur(calc((var(--glass-blur) - 8px) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .glass-input::placeholder { color: var(--text-muted); } .glass-input:focus { border-color: var(--accent-main); box-shadow: 0 0 0 3px rgba(244,63,94,.22), var(--glass-glow); } .glass-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.22rem .6rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid rgba(244,63,94,.36); box-shadow: 0 6px 14px rgba(15,23,42,.14), inset 0 0 0 1px var(--glass-inner-stroke); font-weight: 700; font-size: .85rem; } /* 접근성: 투명감 감소 선호시 */ @media (prefers-reduced-transparency: reduce) { .glass, .glass-strong, .glass-btn, .glass-input, #hd .navbar, #hd .navbar::before, #hd .dropdown-menu, #hd .dropdown-menu.main-bg, #gnb_1dul .gnb_1da, .gnb_2dul{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ============================================ 12-1) Light mode — 글래스 효과 “켜짐” ============================================ */ :root[color-theme='light'] .glass, :root[color-theme='light'] .glass-strong, :root[color-theme='light'] .glass-btn, :root[color-theme='light'] .glass-input, :root[color-theme='light'] .glass::after { backdrop-filter: blur(calc(var(--glass-blur) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--perf-blur-mult))) saturate(calc(var(--glass-sat) * var(--perf-sat-mult))) !important; } :root[color-theme='light'] .glass { background: var(--glass-bg) !important; border-color: var(--glass-stroke) !important; box-shadow: var(--glass-shadow) !important; } :root[color-theme='light'] .glass::after { box-shadow: inset 0 0 0 1px var(--glass-inner-stroke) !important; } :root[color-theme='light'] .glass-strong { background: var(--glass-bg-strong) !important; border-color: var(--glass-stroke) !important; box-shadow: var(--glass-shadow-strong) !important; } :root[color-theme='light'] .glass-btn { background: var(--glass-bg) !important; border-color: var(--glass-stroke) !important; box-shadow: 0 10px 24px rgba(2,6,23,.12) !important; } :root[color-theme='light'] .glass-btn:hover { box-shadow: 0 14px 34px rgba(2,6,23,.16) !important; } :root[color-theme='light'] .glass-input { background: var(--glass-bg) !important; border-color: var(--glass-stroke) !important; box-shadow: inset 0 1px 0 var(--glass-inner-stroke), var(--glass-glow) !important; } :root[color-theme='light'] .glass-input:focus { box-shadow: 0 0 0 3px var(--accent-soft), var(--glass-glow) !important; } :root[color-theme='light'] .glass-badge { background: linear-gradient(135deg, var(--accent-soft), transparent) !important; border-color: rgba(244,63,94,.26) !important; box-shadow: 0 8px 18px rgba(2,6,23,.12), inset 0 0 0 1px var(--glass-inner-stroke) !important; } /* ========================================================= [ADD] 햄버거(모바일) 전용 배경 토큰 + 라이트/다크 오버라이드 ========================================================= */ :root{ --ham-blur: 24px; --ham-sat-light: 170%; --ham-sat-dark: 200%; --ham-border-light: rgba(15,23,42,.06); --ham-border-dark: rgba(148,163,253,.35); /* 폴백 기본값 */ --ham-bg-light: rgba(255,255,255,.96); --ham-bg-dark: radial-gradient(1200px 800px at 12% -8%, rgba(56,189,248,.22), transparent 55%), radial-gradient(900px 700px at 92% 6%, rgba(139,92,246,.20), transparent 58%), linear-gradient(130deg, rgba(15,23,42,.92), rgba(2,6,23,.98)); } :root[color-theme='light']{ --ham-bg-light: rgba(255,255,255,.96); } :root[color-theme='dark']{ --ham-bg-dark: radial-gradient(1200px 800px at 10% -10%, rgba(56,189,248,.24), transparent 55%), radial-gradient(900px 700px at 92% 6%, rgba(139,92,246,.22), transparent 58%), linear-gradient(130deg, rgba(15,23,42,.94), rgba(2,6,23,.98)); } @media (max-width: 991.98px){ :root[color-theme='light'] #hd .navbar-collapse{ background: var(--ham-bg-light) !important; box-shadow: 0 22px 60px rgba(15,23,42,.10), 0 0 0 1px var(--ham-border-light) !important; /* ✅ 경량화 */ backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; } :root[color-theme='dark'] #hd .navbar-collapse{ background: var(--ham-bg-dark) !important; box-shadow: 0 28px 80px rgba(0,0,0,.90), 0 0 0 1px var(--ham-border-dark) !important; /* ✅ 경량화 */ backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; } /* 선택: 상단 은은한 유리광 */ #hd .navbar-collapse::before{ content:""; position:absolute; inset:0 0 auto 0; height:56px; border-radius: 0 0 24px 24px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)); mix-blend-mode: screen; } :root[color-theme='dark'] #hd .navbar-collapse::before{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); mix-blend-mode: normal; } } /* ========================================================= [FIX OVERRIDE] 햄버거/모바일 배경 테마 동기화(우선순위 강화) ========================================================= */ @media (max-width: 991.98px){ html[color-theme='light'] #hd .navbar-collapse, body[color-theme='light'] #hd .navbar-collapse{ background: var(--ham-bg-light) !important; box-shadow: 0 22px 60px rgba(15,23,42,.10), 0 0 0 1px var(--ham-border-light) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; } html[color-theme='dark'] #hd .navbar-collapse, body[color-theme='dark'] #hd .navbar-collapse{ background: var(--ham-bg-dark) !important; box-shadow: 0 28px 80px rgba(0,0,0,.90), 0 0 0 1px var(--ham-border-dark) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; } html[color-theme='light'] #hd .navbar .navbar-collapse.collapse.show, body[color-theme='light'] #hd .navbar .navbar-collapse.collapse.show{ background: var(--ham-bg-light) !important; } html[color-theme='dark'] #hd .navbar .navbar-collapse.collapse.show, body[color-theme='dark'] #hd .navbar .navbar-collapse.collapse.show{ background: var(--ham-bg-dark) !important; } html[color-theme='light'] .offcanvas, body[color-theme='light'] .offcanvas{ background: var(--ham-bg-light) !important; box-shadow: 0 22px 60px rgba(15,23,42,.10), 0 0 0 1px var(--ham-border-light) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; } html[color-theme='dark'] .offcanvas, body[color-theme='dark'] .offcanvas{ background: var(--ham-bg-dark) !important; box-shadow: 0 28px 80px rgba(0,0,0,.90), 0 0 0 1px var(--ham-border-dark) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; } html[color-theme='light'] .gnb_mo, body[color-theme='light'] .gnb_mo{ margin-top:50px; background: var(--ham-bg-light) !important; box-shadow: 0 22px 60px rgba(15,23,42,.10), 0 0 0 1px var(--ham-border-light) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-light) * var(--perf-sat-mult))) !important; } html[color-theme='dark'] .gnb_mo, body[color-theme='dark'] .gnb_mo{ margin-top:50px; background: var(--ham-bg-dark) !important; box-shadow: 0 28px 80px rgba(0,0,0,.90), 0 0 0 1px var(--ham-border-dark) !important; backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; -webkit-backdrop-filter: blur(calc(var(--ham-blur) * var(--perf-blur-mult))) saturate(calc(var(--ham-sat-dark) * var(--perf-sat-mult))) !important; } html[color-theme='light'] #hd .navbar-collapse::before, body[color-theme='light'] #hd .navbar-collapse::before{ background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)); mix-blend-mode: screen; } html[color-theme='dark'] #hd .navbar-collapse::before, body[color-theme='dark'] #hd .navbar-collapse::before{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); mix-blend-mode: normal; } } /* ========================================= FIX: #hd_wrapper 상단 고정 ========================================= */ #hd_qnb{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 20000 !important; } :root[color-theme='light'] #hd_qnb{ background: radial-gradient(circle at 50% 40%, rgba(172, 40, 40, 0.92) 0%, rgba(255, 0, 0, 0.92) 35%, rgba(255, 255, 255, 0.96) 72%, rgba(255, 255, 255, 0.98) 100% ) !important; } :root[color-theme='dark'] #hd_qnb{ background: radial-gradient(circle at 50% 40%, rgba(44, 15, 106, 0.92) 0%, rgba(54, 12, 144, 0.92) 35%, rgba(55, 8, 112, 0.96) 72%, rgba(36, 3, 120, 0.98) 100% ) !important; } #hd_wrapper{ position: fixed !important; top: 20px !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 20000 !important; } :root[color-theme='light'] #hd_wrapper{ border-radius:10px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 35%, rgba(255, 255, 255, 0.96) 72%, rgba(255, 255, 255, 0.98) 100% ) !important; } :root[color-theme='dark'] #hd_wrapper{ border-radius:10px; background: radial-gradient(circle at 50% 40%, rgba(44, 15, 106, 0.92) 0%, rgba(54, 12, 144, 0.92) 35%, rgba(55, 8, 112, 0.96) 72%, rgba(36, 3, 120, 0.98) 100% ) !important; } /* 드롭다운 잘림 방지 (wrapper 고정 시 필수) */ #hd_wrapper, #hd{ overflow: visible !important; } /* 본문이 헤더 밑으로 깔리지 않게 */ body{ padding-top: calc(var(--header-height) + 12px) !important; } /* ✅ 모바일에서는 헤더 top 공백 제거 (#hd_wrapper top:20px 제거) */ @media (max-width: 991.98px){ #hd_wrapper{ top: 0 !important; } } /* ========================================================= FIX: 768~991 구간 → 햄버거 버튼 우측 정렬 ========================================================= */ @media (min-width: 768px) and (max-width: 991px){ /* ✅ 래퍼는 숨기지 말고 살려둔다 */ #gnb > .d-none.d-md-block{ display: block !important; } /* ✅ UL은 살아있어야 우측 정렬 가능 */ #gnb_1dul{ display: flex !important; justify-content: flex-end !important; /* ✅ 우측 */ align-items: center !important; padding: 6px 10px !important; margin: 0 !important; list-style: none; } /* ✅ 첫번째 li(버튼 들어있는 li)만 보이게 */ #gnb_1dul > li{ display: none !important; } #gnb_1dul > li:first-child{ display: flex !important; justify-content: flex-end !important; /* ✅ 우측 */ align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ✅ 버튼 보이게 */ #gnb_1dul > li:first-child .gnb_menu_btn{ display: inline-flex !important; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,0); color: var(--text-primary); position: relative; z-index: 30001; cursor: pointer; } /* ✅ 아이콘 크기 */ #gnb_1dul > li:first-child .gnb_menu_btn svg, #gnb_1dul > li:first-child .gnb_menu_btn i{ font-size: 22px; width: 22px; height: 22px; line-height: 1; } /* ✅ 전체메뉴 레이어 z-index */ #gnb_all, #gnb_all_bg{ z-index: 30000 !important; } } /* ========================================================= [FIX] GNB 3단/4단 드롭다운 출력 보정 - 기존 header.css가 2단 중심이라 .dropdown-submenu를 열지 못하는 문제 수정 - overflow-x:hidden 때문에 오른쪽으로 펼쳐지는 3/4단이 잘리는 문제 수정 - 2단 메뉴가 1단 오른쪽/중앙에서 시작하지 않도록 위치 보정 ========================================================= */ #hd, #hd_wrapper, #gnb, #gnb > div, #gnb_1dul, #gnb_1dul .gnb_1dli, #gnb_1dul .dropdown, #gnb_1dul .dropdown-submenu { overflow: visible !important; } #hd #gnb .dropdown-menu, #hd #gnb .dropdown-menu.main-bg, #gnb_1dul .gnb_2dul, #gnb_1dul .gnb_3dul, #gnb_1dul .gnb_4dul { scrollbar-width: thin; scrollbar-color: var(--dd-scroll-thumb) var(--dd-scroll-track); } #gnb_1dul > .dropdown > .gnb_2dul, #gnb_1dul > .gnb_1dli > .gnb_2dul { left: -28px !important; right: auto !important; top: 100% !important; margin-top: 0 !important; transform: none !important; } #hd #gnb > #gnb_1dul > .dropdown:hover > .dropdown-menu, #gnb_1dul > .dropdown:hover > .dropdown-menu, #hd #gnb .dropdown.is-open > .dropdown-menu, #hd #gnb .dropdown-submenu.is-open > .dropdown-menu, #gnb_1dul .dropdown.is-open > .dropdown-menu, #gnb_1dul .dropdown-submenu.is-open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } #hd #gnb > #gnb_1dul > .dropdown:hover > .dropdown-menu, #hd #gnb > #gnb_1dul > .dropdown.is-open > .dropdown-menu, #gnb_1dul > .dropdown:hover > .dropdown-menu, #gnb_1dul > .dropdown.is-open > .dropdown-menu { display: flex !important; flex-direction: column !important; } #hd #gnb .dropdown-submenu, #gnb_1dul .dropdown-submenu { position: relative !important; } #hd #gnb .dropdown-submenu > .dropdown-menu, #gnb_1dul .dropdown-submenu > .dropdown-menu { position: absolute !important; top: 0 !important; left: 100% !important; right: auto !important; margin-top: 0 !important; margin-left: 0 !important; min-width: 210px !important; width: max-content !important; z-index: 40000 !important; } #hd #gnb .dropdown-submenu > .dropdown-menu::before, #gnb_1dul .dropdown-submenu > .dropdown-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; } #hd #gnb .dropdown-submenu > .dropdown-toggle::after, #gnb_1dul .dropdown-submenu > .dropdown-toggle::after { float: right; margin-top: .45em; transform: rotate(-90deg); } #hd #gnb .gnb_3dul, #hd #gnb .gnb_4dul, #gnb_1dul .gnb_3dul, #gnb_1dul .gnb_4dul { border-radius: var(--menu-radius) !important; background: var(--menu-bg) !important; border: 1px solid var(--menu-border) !important; box-shadow: var(--menu-shadow) !important; padding: var(--menu-pad-y) var(--menu-pad-x) !important; max-height: min(52dvh, 480px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #hd #gnb .gnb_3da, #hd #gnb .gnb_4da, #gnb_1dul .gnb_3da, #gnb_1dul .gnb_4da { display: flex !important; align-items: center; justify-content: flex-start; gap: .48rem; padding: 10px 12px !important; margin: 4px 0 !important; border-radius: var(--menu-radius-inner) !important; color: var(--menu-text) !important; background: var(--menu-item-bg) !important; border: 1px solid var(--menu-item-border) !important; text-decoration: none !important; white-space: nowrap !important; } #hd #gnb .gnb_3da:hover, #hd #gnb .gnb_4da:hover, #gnb_1dul .gnb_3da:hover, #gnb_1dul .gnb_4da:hover { background: rgba(255, 0, 0, 0.23) !important; border-color: rgba(244,63,94,.16) !important; } @media (max-width: 991.98px), (hover: none) and (pointer: coarse) { #hd #gnb .dropdown-submenu > .dropdown-menu, #gnb_1dul .dropdown-submenu > .dropdown-menu { position: static !important; left: auto !important; top: auto !important; width: 100% !important; min-width: 100% !important; margin: .25rem 0 0 0 !important; padding-left: 10px !important; border-left: 3px solid rgba(244,63,94,.18) !important; } #hd #gnb .dropdown-submenu.show > .dropdown-menu, #hd #gnb .dropdown-submenu.on > .dropdown-menu, #hd #gnb .dropdown-submenu.is-open > .dropdown-menu, #gnb_1dul .dropdown-submenu.show > .dropdown-menu, #gnb_1dul .dropdown-submenu.on > .dropdown-menu, #gnb_1dul .dropdown-submenu.is-open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } } /* ========================================================= [FIX] 모바일/터치 기기 메뉴 작동 안정화 - 터치 기기에서 :hover가 붙어서 드롭다운이 닫히지 않거나 show 상태와 충돌하는 문제를 차단 - Bootstrap .show 상태만 실제 메뉴로 표시 - 모바일에서 열린 드롭다운은 1줄 전체 폭으로 펼쳐 터치 영역 확보 - 그누보드 gnb 2단 메뉴는 JS가 여는 상태만 표시 ========================================================= */ @media (max-width: 991.98px), (hover: none) and (pointer: coarse){ /* 헤더/메뉴 레이어가 부모 overflow 때문에 잘리지 않게 고정 */ #hd, #hd_wrapper, #hd .navbar, #hd .navbar .container, #hd .navbar .container-fluid, #gnb, #gnb_1dul, #gnb_1dul .gnb_1dli{ overflow: visible !important; } /* 모바일 햄버거 접힘/펼침 상태 우선순위 보강 */ #hd .navbar-collapse.collapse:not(.show){ display: none !important; visibility: hidden !important; pointer-events: none !important; } #hd .navbar-collapse.collapse.show, #hd .navbar-collapse.collapsing{ display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 30020 !important; } /* 열린 상태가 아닌 드롭다운은 어떤 상위 스타일보다 우선해서 숨김 */ #hd .navbar .dropdown:not(.show):not(.is-open) > .dropdown-menu:not(.show), #hd .dropdown-menu .dropdown:not(.show):not(.is-open) > .dropdown-menu:not(.show), #hd #gnb .dropdown:not(.show):not(.is-open) > .dropdown-menu:not(.show){ display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; animation: none !important; } /* 모바일 Bootstrap 드롭다운은 기본 숨김 */ #hd .navbar-collapse .dropdown-menu, #hd .navbar-collapse .dropdown-menu .dropdown-menu{ position: static !important; inset: auto !important; float: none !important; transform: none !important; animation: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: .35rem 0 0 !important; } /* .show가 붙은 메뉴만 실제 표시 */ #hd .navbar-collapse .dropdown-menu.show, #hd .navbar-collapse .show > .dropdown-menu{ display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; max-height: calc(100dvh - var(--header-height) - 120px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* 열린 1단 드롭다운은 한 줄 전체 폭으로 펼쳐 하위 메뉴 터치 영역 확보 */ #hd .navbar-collapse .navbar-nav .nav-item.dropdown.show{ flex: 1 0 100% !important; width: 100% !important; min-width: 100% !important; } #hd .navbar-collapse .navbar-nav .nav-item.dropdown.show > .nav-link, #hd .navbar-collapse .navbar-nav .nav-item.dropdown.show > .dropdown-toggle{ width: 100% !important; justify-content: space-between !important; } /* 2단/3단 드롭다운 들여쓰기만 유지하고 터치 폭은 전체 확보 */ #hd .navbar-collapse .dropdown-menu .dropdown-menu.show{ margin-left: 0 !important; padding-left: 6px !important; border-left: 3px solid rgba(244,63,94,.18) !important; } :root[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-menu.show, html[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-menu.show, body[color-theme='dark'] #hd .navbar-collapse .dropdown-menu .dropdown-menu.show{ border-left-color: rgba(129,140,248,.45) !important; } /* 터치 대상 최소 높이 확보 */ #hd .navbar-toggler, #gnb_1dul .gnb_menu_btn, #hd .navbar-collapse .nav-link, #hd .navbar-collapse .dropdown-item, #gnb_1dul .gnb_1da, .gnb_2dul .gnb_2da{ min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #hd .navbar-toggler, #gnb_1dul .gnb_menu_btn{ position: relative; z-index: 30030 !important; cursor: pointer; } /* 그누보드 gnb: 모바일에서는 JS로 열린 상태만 표시 */ #gnb .gnb_1dli:not(.is-open):not(.show):not(.on):not(.active) > .gnb_2dul:not([style*="display: block"]){ max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-4px) !important; animation: none !important; } .gnb_2dul[style*="display: block"], .gnb_2dul.show, .gnb_2dul.on, #gnb_1dul .gnb_1dli.show > .gnb_2dul, #gnb_1dul .gnb_1dli.on > .gnb_2dul, #gnb_1dul .gnb_1dli.active > .gnb_2dul{ display: block !important; max-height: 65dvh !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } /* 전체메뉴 레이어가 헤더 뒤에 깔리는 문제 방지 */ #gnb_all, #gnb_all_bg, .gnb_mo, .offcanvas{ z-index: 30000 !important; } } /* ========================================================= [FIX] 768~991px 구간: 메뉴 버튼 위치/표시 안정화 - 기존 first-child 의존을 보완 - .gnb_menu_btn이 첫 번째 li가 아니어도 버튼이 살아있게 처리 ========================================================= */ @media (min-width: 768px) and (max-width: 991px){ #gnb_1dul > li:has(.gnb_menu_btn){ display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } #gnb_1dul > li:has(.gnb_menu_btn) .gnb_menu_btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ========================================================= [FINAL GUARD] GNB 4-depth menu final priority - 이 파일 뒤쪽 모바일/드롭다운 안정화 규칙이 3/4단 표시를 다시 덮지 않게 최종 고정 ========================================================= */ #hd #gnb #gnb_1dul, #hd #gnb #gnb_1dul li { overflow: visible !important; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul { left: -28px !important; right: auto !important; transform: none !important; } #hd #gnb #gnb_1dul .dropdown-submenu { position: relative !important; } #hd #gnb #gnb_1dul .dropdown-submenu > .dropdown-menu { position: absolute !important; top: 0 !important; left: 100% !important; right: auto !important; display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; max-height: min(52dvh, 480px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-width: 210px !important; z-index: 40000 !important; } #hd #gnb #gnb_1dul > .dropdown:hover > .dropdown-menu, #hd #gnb #gnb_1dul .dropdown.is-open > .dropdown-menu, #hd #gnb #gnb_1dul .dropdown-submenu.is-open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } #hd #gnb #gnb_1dul > .dropdown:hover > .dropdown-menu, #hd #gnb #gnb_1dul > .dropdown.is-open > .dropdown-menu { display: flex !important; flex-direction: column !important; } /* ========================================================= [FINAL FIX] GNB 2-depth scroll priority - 앞쪽 3/4단 표시 보정 규칙이 2단 스크롤을 다시 제거하지 않도록 최종 고정 - 2단 메뉴는 화면 높이를 넘으면 메뉴 내부에서 세로 스크롤 ========================================================= */ #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul, #gnb_1dul > .dropdown > .gnb_2dul, #gnb_1dul > .gnb_1dli > .gnb_2dul { box-sizing: border-box !important; max-height: min(72dvh, calc(100dvh - var(--header-height) - 36px), 720px) !important; padding: 9px 16px 9px 9px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--dd-scroll-thumb) var(--dd-scroll-track); } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar, #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar, #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar { width: 8px; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar-thumb, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar-thumb, #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar-thumb, #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--dd-scroll-thumb); background-clip: padding-box; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar-track, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar-track, #gnb_1dul > .dropdown > .gnb_2dul::-webkit-scrollbar-track, #gnb_1dul > .gnb_1dli > .gnb_2dul::-webkit-scrollbar-track { border-radius: 999px; background: var(--dd-scroll-track); } @media (max-width: 991.98px), (hover: none) and (pointer: coarse) { #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul, #gnb_1dul > .dropdown > .gnb_2dul, #gnb_1dul > .gnb_1dli > .gnb_2dul, .gnb_2dul[style*="display: block"], .gnb_2dul.show, .gnb_2dul.on, #gnb_1dul .gnb_1dli.show > .gnb_2dul, #gnb_1dul .gnb_1dli.on > .gnb_2dul, #gnb_1dul .gnb_1dli.active > .gnb_2dul { max-height: min(58dvh, calc(100dvh - var(--header-height) - 96px), 520px) !important; padding: 9px 16px 9px 9px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable; } } /* ========================================================= [FINAL FIX] GNB 2-depth scroll + 3/4-depth visible - 스크롤 컨테이너(.gnb_2dul) 밖으로 absolute 3단을 펼치면 브라우저가 잘라내므로 3/4단은 2단 스크롤 영역 안에서 아래로 펼쳐지게 고정 - 2단 메뉴 자체는 계속 내부 스크롤 유지 ========================================================= */ @media (min-width: 992px) and (hover: hover) and (pointer: fine) { #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul, #gnb_1dul > .dropdown > .gnb_2dul, #gnb_1dul > .gnb_1dli > .gnb_2dul { width: max-content !important; min-width: 280px !important; max-width: min(400px, calc(100vw - 32px)) !important; max-height: min(72dvh, calc(100dvh - var(--header-height) - 36px), 720px) !important; padding: 9px 16px 9px 9px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu, #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu, #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu { position: static !important; overflow: visible !important; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-menu, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-menu, #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-menu, #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; display: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; max-height: none !important; margin: 4px 0 8px 12px !important; padding: 8px 8px 8px 10px !important; border-left: 3px solid rgba(244,63,94,.20) !important; overflow: visible !important; transform: none !important; box-shadow: none !important; } :root[color-theme='dark'] #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-menu, :root[color-theme='dark'] #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-menu, :root[color-theme='dark'] #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-menu, :root[color-theme='dark'] #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-menu { border-left-color: rgba(129,140,248,.42) !important; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu.is-open > .dropdown-menu, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu.is-open > .dropdown-menu, #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu.is-open > .dropdown-menu, #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu.is-open > .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-toggle::after, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-toggle::after, #gnb_1dul > .dropdown > .gnb_2dul .dropdown-submenu > .dropdown-toggle::after, #gnb_1dul > .gnb_1dli > .gnb_2dul .dropdown-submenu > .dropdown-toggle::after { transform: rotate(0deg) !important; } } /* ========================================================= [FINAL FIX ver3] 메인 hover + 내부 +/- 버튼 + 물방울 튕김 - 메인메뉴는 hover로 2단 표시 - 2단 안의 서브메뉴는 .is-open 상태만 표시 - 2단 메뉴는 기존보다 왼쪽/넓게 고정 ========================================================= */ #hd #gnb #gnb_1dul > .dropdown > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli > .gnb_2dul, #gnb_1dul > .dropdown > .gnb_2dul, #gnb_1dul > .gnb_1dli > .gnb_2dul { box-sizing: border-box !important; left: -28px !important; min-width: 280px !important; width: 280px !important; max-width: min(400px, calc(100vw - 32px)) !important; padding: 9px 16px 9px 9px !important; scrollbar-gutter: stable; } #hd #gnb #gnb_1dul > .dropdown:hover > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli:hover > .gnb_2dul, #gnb_1dul > .dropdown:hover > .gnb_2dul, #gnb_1dul > .gnb_1dli:hover > .gnb_2dul, #hd #gnb #gnb_1dul > .dropdown.is-open > .gnb_2dul, #hd #gnb #gnb_1dul > .gnb_1dli.is-open > .gnb_2dul, #gnb_1dul > .dropdown.is-open > .gnb_2dul, #gnb_1dul > .gnb_1dli.is-open > .gnb_2dul { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; animation: gnbWaterBubbleOpen .46s cubic-bezier(.16, 1.28, .32, 1) both !important; } #hd #gnb #gnb_1dul .dropdown-submenu:hover:not(.is-open) > .dropdown-menu, #gnb_1dul .dropdown-submenu:hover:not(.is-open) > .dropdown-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #gnb_1dul .gnb_submenu_toggle, #gnb_all .gnb_submenu_toggle { flex: 0 0 30px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; align-self: center !important; margin: 6px 26px 6px 4px !important; border: 1px solid rgba(255,255,255,.34) !important; border-radius: 10px !important; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.95), rgba(255,255,255,.18) 34%, transparent 60%), linear-gradient(135deg, #2563eb, #7c3aed) !important; color: #fff !important; font-size: 15px !important; box-shadow: 0 6px 12px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.46) !important; } #gnb_1dul .gnb_menu_item_line, #gnb_all .gnb_all_menu_item_line { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; } #gnb_1dul .gnb_2dul .dropdown-submenu > .gnb_menu_item_line { position: relative !important; align-items: center !important; min-height: 54px !important; padding-right: 60px !important; } #gnb_1dul .gnb_2dul .dropdown-submenu > .gnb_menu_item_line > .gnb_submenu_toggle { position: absolute !important; top: 50% !important; right: 16px !important; margin: 0 !important; transform: translateY(-50%) !important; z-index: 2 !important; } #gnb_1dul .gnb_2dul .dropdown-submenu > .gnb_menu_item_line > .dropdown-item { display: flex !important; align-items: center !important; min-height: 44px !important; } #gnb_1dul .gnb_submenu_toggle:hover, #gnb_1dul .gnb_submenu_toggle:focus, #gnb_all .gnb_submenu_toggle:hover, #gnb_all .gnb_submenu_toggle:focus { background: radial-gradient(circle at 32% 18%, rgba(255,255,255,1), rgba(255,255,255,.22) 36%, transparent 62%), linear-gradient(135deg, #1d4ed8, #9333ea) !important; transform: translateY(-1px) scale(1.04) !important; box-shadow: 0 9px 16px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.55) !important; } #gnb_1dul .gnb_2dul .dropdown-submenu > .gnb_menu_item_line > .gnb_submenu_toggle:hover, #gnb_1dul .gnb_2dul .dropdown-submenu > .gnb_menu_item_line > .gnb_submenu_toggle:focus { transform: translateY(-50%) scale(1.04) !important; } #gnb_1dul .is-open > .gnb_menu_item_line > .gnb_submenu_toggle, #gnb_all .is-open > .gnb_all_menu_item_line > .gnb_submenu_toggle { background: radial-gradient(circle at 32% 18%, rgba(255,255,255,.96), rgba(255,255,255,.18) 36%, transparent 62%), linear-gradient(135deg, #ef4444, #f97316) !important; box-shadow: 0 9px 16px rgba(239,68,68,.24), inset 0 1px 0 rgba(255,255,255,.48) !important; } #hd #gnb .gnb_3dul, #gnb_1dul .gnb_3dul, #gnb_1dul > .dropdown > .gnb_2dul > .dropdown-submenu > .gnb_3dul { border: 0 !important; border-left: 0 !important; } #hd #gnb .gnb_3da, #gnb_1dul .gnb_3da, #gnb_1dul .gnb_3dul > .gnb_3dli > .gnb_menu_item_line > .gnb_3da { border: 0 !important; border-left: 0 !important; } #hd #gnb .gnb_3da:hover, #gnb_1dul .gnb_3da:hover, #gnb_1dul .gnb_3dul > .gnb_3dli > .gnb_menu_item_line > .gnb_3da:hover, #gnb_1dul .gnb_3dul > .gnb_3dli > .gnb_menu_item_line > .gnb_3da:focus { border-color: transparent !important; } #gnb_1dul .dropdown.is-closing > .dropdown-menu, #gnb_1dul .dropdown-submenu.is-closing > .dropdown-menu { animation: gnbWaterBubbleClose .28s ease-in both !important; } #gnb_1dul .dropdown.is-open > .dropdown-menu::after, #gnb_1dul .dropdown.is-closing > .dropdown-menu::after, #gnb_1dul .dropdown-submenu.is-open > .dropdown-menu::after, #gnb_1dul .dropdown-submenu.is-closing > .dropdown-menu::after { animation: gnbWaterDropBounce .52s ease-out both !important; } @keyframes gnbWaterBubbleOpen { 0% { opacity: 0; transform: translateY(-10px) scale(.84, .92); filter: blur(1px) saturate(.92); border-radius: 28px; } 48% { opacity: 1; transform: translateY(5px) scale(1.05, .96); filter: blur(0) saturate(1.1); border-radius: 20px; } 74% { transform: translateY(-2px) scale(.98, 1.03); border-radius: 16px; } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); } } @keyframes gnbWaterBubbleClose { 0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 36% { opacity: .88; transform: translateY(3px) scale(1.02, .96); } 100% { opacity: 0; transform: translateY(-9px) scale(.88, .92); filter: blur(1px) saturate(.9); } } @keyframes gnbWaterDropBounce { 0% { opacity: 0; transform: translateY(-8px) scale(.22); } 30% { opacity: .95; transform: translateY(2px) scale(1.26, .78); } 56% { opacity: .72; transform: translateY(-3px) scale(.84, 1.15); } 100% { opacity: 0; transform: translateY(8px) scale(.52); } }