/* ========================================
   SECTION 01: 상단 유틸바 + 헤더 + 네비게이션
   ✦ 딥 네이비 + 블루 프리미엄 헤더
======================================== */

/* ───── Util Bar (다크) ───── */
.util-bar {
    background: var(--dark);
    border-bottom: 1px solid rgba(85,58,231,.1);
    height: 38px;
    display: flex; align-items: center;
    font-size: 16px; color: rgba(255,255,255,.45);
}
.util-bar .container { display: flex; justify-content: space-between; align-items: center; }
.util-left { display: flex; gap: 16px; align-items: center; }
.util-left i { font-size: 16px; color: var(--point); }
.util-divider { color: rgba(255,255,255,.15); font-size: 16px; }
.util-right { display: flex; gap: 16px; align-items: center; }
.util-right a { color: rgba(255,255,255,.45); font-size: 16px; font-weight: 500; }
.util-right a:hover { color: var(--point-light); }
.util-highlight { color: var(--point) !important; font-weight: 600; }
.util-signup {
    background: var(--point);
    color: var(--dark) !important;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 17px;
}
.util-signup:hover { background: var(--point-light); }

/* ───── Header ───── */
.main-header {
    background: rgba(10,22,40,.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(85,58,231,.08);
    position: sticky; top: 0; z-index: 1000;
    transition: var(--transition);
}
.main-header.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,.15);
    border-bottom-color: transparent;
}
.header-inner { display: flex; align-items: center; height: 72px; gap: 32px; }

/* ───── Logo ───── */
.logo { flex-shrink: 0; }
.logo a { display: flex; align-items: center; gap: 12px; }
.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.logo-main { display: block; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.logo-sub { display: block; font-size: 17px; font-weight: 500; color: var(--point); letter-spacing: .3px; margin-top: 1px; }

/* ───── GNB ───── */
.gnb { flex: 1; display: flex; justify-content: center; }
.gnb-list { display: flex; }
.gnb-item { position: relative; }
.gnb-link {
    display: flex; align-items: center;
    padding: 24px 22px;
    font-size: 17px; font-weight: 500; color: rgba(255,255,255,.7);
    position: relative;
    transition: var(--transition);
}
.gnb-link::after {
    content: '';
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background: var(--point);
    border-radius: 2px 2px 0 0;
    transition: width .3s ease;
}
.gnb-link:hover { color: #fff; }
.gnb-link:hover::after { width: 70%; }

/* ───── Mega Menu ───── */
.mega-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 400px;
    background: var(--dark-2);
    border: 1px solid rgba(85,58,231,.1);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,.3);
    padding: 8px;
    opacity: 0; visibility: hidden;
    transition: var(--transition); z-index: 100;
}
.gnb-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-inner { display: flex; }
.mega-col { flex: 1; padding: 16px 20px; }
.mega-col + .mega-col { border-left: 1px solid rgba(255,255,255,.06); }
.mega-col h4 {
    font-size: 16px; font-weight: 700; color: var(--point);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.mega-col li { margin-bottom: 1px; }
.mega-col a {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 12px; font-size: 16px; color: rgba(255,255,255,.6);
    border-radius: var(--radius-xs); font-weight: 500;
    transition: var(--transition);
}
.mega-col a:hover { background: rgba(85,58,231,.1); color: var(--point-light); padding-left: 16px; }
.dot-new { width: 6px; height: 6px; background: var(--point); border-radius: 50%; display: inline-block; }

/* ───── Header Actions ───── */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 16px; color: rgba(255,255,255,.5);
    position: relative; transition: var(--transition);
}
.header-btn:hover { background: rgba(255,255,255,.08); color: var(--point); }
.cart-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px;
    background: var(--point); color: var(--dark);
    font-size: 9px; font-weight: 700;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.btn-mobile-menu { display: none; width: 40px; height: 40px; position: relative; }
.btn-mobile-menu span {
    display: block; width: 20px; height: 2px;
    background: #fff; border-radius: 2px;
    position: absolute; left: 50%; transform: translateX(-50%);
    transition: var(--transition);
}
.btn-mobile-menu span:nth-child(1) { top: 14px; }
.btn-mobile-menu span:nth-child(2) { top: 20px; }
.btn-mobile-menu span:nth-child(3) { top: 26px; }

/* ───── Search Overlay ───── */
.search-overlay {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--dark-2);
    border-top: 1px solid rgba(85,58,231,.08);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    padding: 28px 0;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: var(--transition); z-index: 99;
}
.search-overlay.active { opacity: 1; visibility: visible; transform: translateY(0); }
.search-box {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 60px;
    padding: 6px 6px 6px 28px;
    transition: var(--transition);
}
.search-box:focus-within { border-color: var(--point); box-shadow: 0 0 0 4px rgba(85,58,231,.1); }
.search-input { flex: 1; border: none; background: none; outline: none; font-size: 16px; font-family: var(--font); color: #fff; }
.search-input::placeholder { color: rgba(255,255,255,.35); }
.search-submit {
    width: 46px; height: 46px;
    background: var(--point);
    color: var(--dark); border-radius: 50%;
    font-size: 17px; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-primary);
}
.search-close { width: 46px; height: 46px; color: rgba(255,255,255,.4); font-size: 18px; display: flex; align-items: center; justify-content: center; }
.search-tags { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-left: 28px; font-size: 17px; color: rgba(255,255,255,.35); font-weight: 500; }
.search-tags a { padding: 5px 14px; background: rgba(255,255,255,.06); border-radius: 20px; font-size: 17px; color: rgba(255,255,255,.5); font-weight: 500; }
.search-tags a:hover { background: rgba(85,58,231,.15); color: var(--point-light); }