@charset "UTF-8";

/* ════════════════════════════════════════
           NAV
════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: 120px;
    z-index: 300;
    transition: transform .35s ease, background .25s ease;
}

/* 드롭다운 열렸을 때 흰 배경 */
.nav.open { background: white; }

/* hero 벗어나면 위로 숨김 */
.nav.nav-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}
.nav.nav-hidden ~ .mega-drop { opacity: 0 !important; pointer-events: none !important; }

/* 로고 */
.nav-logo { display: flex; align-items: center; }
.nav-logo img        { width: clamp(140px, 12vw, 220px); transition: opacity .25s; }
/* 기본: 흰 로고 보임 / 어두운 로고 숨김 */
.nav-logo .logo-white { opacity: 1;  position: relative; }
.nav-logo .logo-dark  { opacity: 0;  position: absolute; }
.nav-logo             { position: relative; }
/* 드롭다운 열리면 어두운 로고로 교체 */
.nav.open .nav-logo .logo-white { opacity: 0; }
.nav.open .nav-logo .logo-dark  { opacity: 1; }

/* ── 상단 메뉴 목록 ── */
.nav-links {
    display: flex;
    list-style: none;
    height: 100%;
    align-items: stretch;
}
.nav-links > li {
    position: static;
    display: flex;
    align-items: stretch;
}
.nav-links > li > a {
    display: flex;
    align-items: center;
    padding: 0 clamp(12px, 1.8vw, 36px);
    color: white;
    font-size: clamp(13px, 1.2vw, 22px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
    position: relative;
}
/* hover 밑줄 애니메이션 */
.nav-links > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; right: 50%;
    height: 3px;
    background: #5d3895;
    transition: left .2s, right .2s;
}
.nav-links > li:hover > a::after { left: 16%; right: 16%; }

/* 서브메뉴 링크 hover → 해당 상단 메뉴 밑줄도 활성화 */
.nav:has(.mega-col:nth-child(1) a:hover) .nav-links > li:nth-child(1) > a::after,
.nav:has(.mega-col:nth-child(2) a:hover) .nav-links > li:nth-child(2) > a::after,
.nav:has(.mega-col:nth-child(3) a:hover) .nav-links > li:nth-child(3) > a::after,
.nav:has(.mega-col:nth-child(4) a:hover) .nav-links > li:nth-child(4) > a::after,
.nav:has(.mega-col:nth-child(5) a:hover) .nav-links > li:nth-child(5) > a::after {
    left: 16%; right: 16%;
}

/* 드롭다운 열리면 텍스트 어두운 색으로 */
.nav.open .nav-links > li > a { color: #111; }
.nav-links > li:hover > a { color: #5d3895; }

/* KR/EN */
.nav-lang {
    color: white;
    font-size: clamp(13px, 1.2vw, 22px);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.nav.open .nav-lang span { color: #111; }

/* ════════════════════════════════════════
   MEGA DROPDOWN
════════════════════════════════════════ */
.mega-drop {
    position: fixed;
    top: 120px;
    left: 0; right: 0;
    background: white;
    border-top: 3px solid #DBDBDB;
    box-shadow: 0 12px 40px rgba(0,0,0,.10);
    z-index: 299;
    padding: 28px 0 40px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: transform .35s ease, opacity .25s ease;
}
.mega-drop.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    width: min(1550px, 92%);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 5vw, 80px);
}
.mega-logo { flex-shrink: 0; padding-top: 4px; }
.mega-logo img { width: clamp(110px, 10vw, 200px); }

/* 5개 컬럼 그리드 */
.mega-cols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 3vw, 40px);
}
.mega-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: .4;
    transition: opacity .2s;
}
/* hover된 메뉴에 해당하는 컬럼만 진하게 */
.nav-links > li:nth-child(1):hover ~ .mega-drop .mega-col:nth-child(1),
.nav-links > li:nth-child(2):hover ~ .mega-drop .mega-col:nth-child(2),
.nav-links > li:nth-child(3):hover ~ .mega-drop .mega-col:nth-child(3),
.nav-links > li:nth-child(4):hover ~ .mega-drop .mega-col:nth-child(4),
.nav-links > li:nth-child(5):hover ~ .mega-drop .mega-col:nth-child(5) {
    opacity: 1;
}
.mega-col-title {
    font-size: clamp(13px, 1.1vw, 18px);
    font-weight: 700;
    color: #111;
    padding-bottom: 8px;
    border-bottom: 2px solid #DBDBDB;
    margin-bottom: 10px;
    white-space: nowrap;
}
.mega-col a {
    font-size: clamp(12px, .95vw, 16px);
    font-weight: 500;
    color: rgba(0,0,0,.55);
    text-decoration: none;
    line-height: 2.2;
    white-space: nowrap;
    transition: color .15s;
}
.mega-col a:hover { color: #5d3895; }

/* 서브메뉴 링크 hover → 해당 컬럼 전체 opacity 1 */
.mega-cols:has(.mega-col:nth-child(1) a:hover) .mega-col:nth-child(1),
.mega-cols:has(.mega-col:nth-child(2) a:hover) .mega-col:nth-child(2),
.mega-cols:has(.mega-col:nth-child(3) a:hover) .mega-col:nth-child(3),
.mega-cols:has(.mega-col:nth-child(4) a:hover) .mega-col:nth-child(4),
.mega-cols:has(.mega-col:nth-child(5) a:hover) .mega-col:nth-child(5) {
    opacity: 1;
}

/* ════════════════════════════════════════
   HAMBURGER
════════════════════════════════════════ */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 400;
}
.hamburger span {
    display: block; width: 26px; height: 2px;
    background: white; border-radius: 2px; transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════
   MOBILE MENU (풀스크린 오버레이)
════════════════════════════════════════ */
.mobile-menu {
    display: none;
    position: fixed; inset: 0;
    background: rgba(10,0,40,.97);
    z-index: 350;
    flex-direction: column;
    overflow-y: auto;
    padding: 140px 32px 48px;
}
.mobile-menu.active { display: flex; }

/* 닫기(✕) 버튼 */
.mob-close {
    position: absolute;
    top: 28px; right: 28px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    transition: background .2s;
}
.mob-close:hover { background: rgba(255,255,255,.2); }
.mob-close svg { width: 22px; height: 22px; stroke: white; }

/* 아코디언 아이템 */
.mob-item {
    border-bottom: 1px rgba(255,255,255,.15) solid;
}
.mob-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
}
.mob-top span {
    color: white;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 700;
}
.mob-top .mob-arrow {
    color: rgba(255,255,255,.5);
    font-size: 20px;
    transition: transform .25s;
}
.mob-item.open .mob-arrow { transform: rotate(90deg); }

.mob-sub {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-bottom: 12px;
}
.mob-item.open .mob-sub { display: flex; }
.mob-sub a {
    color: rgba(255,255,255,.65);
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 500;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.mob-sub a:hover { background: rgba(144,0,206,.25); color: white; }

.mob-lang {
    margin-top: 32px;
    font-size: 16px;
    font-weight: 700;
    padding: 0 4px;
}
.mob-lang span {
    cursor: pointer;
    color: rgba(255,255,255,.5);
}
.mob-lang span.active {
    color: white;
}
.mob-lang span[style*="cursor:initial"] {
    color: rgba(255,255,255,.4);
    margin: 0 4px;
}

/* 언어 선택 */
.nav-lang {
    cursor: pointer;
    user-select: none;
}

.nav-lang span {
    cursor: pointer;
    transition: color 0.2s, font-weight 0.2s;
    color: rgba(255,255,255,0.6);
}

.nav-lang span.active {
    color: white;
    font-weight: 700;
}

.nav-lang .divider {
    color: rgba(255,255,255,0.4);
    margin: 0 4px;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-links, .nav-lang { display: none; }
    .mega-drop { opacity: 0 !important; pointer-events: none !important; }
    .hamburger { display: flex; }
}