/**
 * Navigation Variant Presets — 4 distinct header layouts
 * 2026-07-01: Classic | Two-Row | Compact Bar | Hero Overlay
 * 
 * 각 variant는 테마 CSS 변수를 활용하여 10가지 테마 모두에 자동 적용됩니다.
 * 모바일에서는 모든 variant가 햄버거 메뉴로 동작합니다.
 */

/* ============================================
   VARIANT 1: Classic (기본, 기존 스타일 유지)
   - Single row: logo + menu inline
   - 현재 사이트 기본 레이아웃
   ============================================ */
.site-header.is-nav-variant-classic {
    /* 기존 스타일 유지, 추가 스타일 불필요 */
}

/* ============================================
   VARIANT 2: Two-Row (2단 헤더) 그라데이션 애니메이션
   ============================================ */
@keyframes two-row-gradient-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   VARIANT 2: Two-Row (2단 헤더)
   - 1단: 로고 + 제목 + 부제 (가운데 정렬)
   - 2단: 메뉴 (중앙) + 로그인 버튼 (우측)
   - 흐르는 그라데이션 애니메이션
   ============================================ */

/* 헤더 자체에 흐르는 그라데이션 애니메이션 적용 */
.site-header.is-nav-variant-two-row {
    background: linear-gradient(
        -45deg,
        var(--site-header-bg),
        color-mix(in srgb, var(--site-header-bg) 75%, #ffffff),
        color-mix(in srgb, var(--site-header-bg) 85%, #000000),
        color-mix(in srgb, var(--site-header-bg) 70%, #ffffff)
    ) !important;
    background-size: 400% 400% !important;
    animation: two-row-gradient-flow 8s ease infinite;
}

/* CSS Grid로 2단 레이아웃 구성:
   행1: brand (전체 너비)
   행2: nav(좌측flex) + login(우측) */
.site-header.is-nav-variant-two-row .site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "brand brand"
        "nav   login";
    padding: 0;
    gap: 0;
}

/* site-header-left를 투명 래퍼로 처리 */
.site-header.is-nav-variant-two-row .site-header-left {
    display: contents;
}

/* 1단: 로고 + 제목 + 부제 영역 (가운데 정렬) */
.site-header.is-nav-variant-two-row .site-brand {
    grid-area: brand;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 1.5rem 1.25rem 1rem;
    border: none;
    gap: 0.5rem;
    background: transparent;
    /* 1단 하단에 반투명 구분선 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 로고 중앙 정렬 */
.site-header.is-nav-variant-two-row .site-logo-link {
    display: flex;
    justify-content: center;
    width: auto;
}

/* 로고가 있어도 텍스트 표시 */
.site-header.is-nav-variant-two-row .site-brand:has(.site-logo-link) .site-brand-text {
    display: block !important;
}

.site-header.is-nav-variant-two-row .site-brand-text {
    width: 100%;
    text-align: center;
}

.site-header.is-nav-variant-two-row .site-brand-text h1 {
    font-size: 1.5rem;
    margin: 0.3rem 0 0;
}

.site-header.is-nav-variant-two-row .site-brand-text p {
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
    opacity: 0.9;
}

/* 햄버거 버튼 2단에서 숨김 (PC 1001px 이상만) */
@media (min-width: 1001px) {
    .site-header.is-nav-variant-two-row .site-nav-toggle {
        display: none !important;
    }
}

/* 2단 메뉴 영역 (PC 전용, 모바일은 햄버거로 전환) */
@media (min-width: 1001px) {
    .site-header.is-nav-variant-two-row .site-nav {
        grid-area: nav;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0.7rem 1.25rem 0.9rem;
        margin: 0;
        background: transparent;
    }

    .site-header.is-nav-variant-two-row .site-nav-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* 2단 우측: 로그인 버튼 */
    .site-header.is-nav-variant-two-row .site-header-right {
        grid-area: login;
        display: flex !important;
        align-items: center;
        padding: 0.7rem 1.25rem 0.9rem;
        background: transparent;
    }
}


/* ============================================
   VARIANT 3: Compact Bar (상단바형)
   - Top thin bar: contact info, social, login
   - Main nav: logo + menu
   - 실용적인 비즈니스 레이아웃
   ============================================ */
.site-header.is-nav-variant-compact-bar {
    position: relative;
}

/* 상단 컨택트 바 - 2026-07-01: 실제 콘텐츠 표시, 테마 대응 */
.site-header-topbar {
    background: var(--site-header-bg, #475569);
    border-bottom: 1px solid var(--site-border, rgba(0, 0, 0, 0.1));
    font-size: 0.8125rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    /* 어두운 배경일 때 약간 밝게 */
    filter: brightness(0.95);
}

/* 다크 테마 전용 상단바 스타일 */
[data-theme="dark"] .site-header-topbar,
[data-theme="charcoal"] .site-header-topbar {
    /* 어두운 테마는 헤더보다 약간 더 밝게 */
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.site-header-topbar-inner {
    max-width: var(--site-content-max-width, 1200px);
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.site-header-topbar-left,
.site-header-topbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-header-topbar-left::after {
    content: '';
    width: 1px;
    height: 18px;
    background: var(--site-border, rgba(0, 0, 0, 0.2));
    margin: 0 0.5rem;
}

/* 다크 테마 구분선 */
[data-theme="dark"] .site-header-topbar-left::after,
[data-theme="charcoal"] .site-header-topbar-left::after {
    background: rgba(255, 255, 255, 0.2);
}

.site-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.2s;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.site-topbar-link:hover {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.1);
}

/* 다크 테마 호버 */
[data-theme="dark"] .site-topbar-link:hover,
[data-theme="charcoal"] .site-topbar-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.site-topbar-link i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.site-topbar-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    color: #ffffff !important;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.site-topbar-auth-link:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* 다크 테마 로그인 버튼 */
[data-theme="dark"] .site-topbar-auth-link,
[data-theme="charcoal"] .site-topbar-auth-link {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .site-topbar-auth-link:hover,
[data-theme="charcoal"] .site-topbar-auth-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.site-topbar-auth-link--primary {
    background: var(--site-accent, #2563eb);
    border-color: var(--site-accent, #2563eb);
    color: var(--site-accent-contrast, #ffffff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.site-topbar-auth-link--primary:hover {
    background: var(--site-accent, #1d4ed8);
    border-color: var(--site-accent, #1d4ed8);
    color: var(--site-accent-contrast, #ffffff);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}

.site-topbar-auth-link i {
    font-size: 0.8rem;
}

.site-header.is-nav-variant-compact-bar .site-header-inner {
    padding: 0.75rem 1.25rem;
}

.site-header.is-nav-variant-compact-bar .site-header-brand {
    font-size: 0.9em;
}

.site-header.is-nav-variant-compact-bar .site-nav > ul > li > a {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* ============================================
   VARIANT 4: Hero Overlay (투명 오버레이)
   - 케이스 1: 배경이미지 있는 페이지 → 투명, 스크롤 시 불투명
   - 케이스 2: 타이틀 있음 + 배경이미지 없음 → 즉시 불투명 (.is-opaque)
   - 케이스 3: 타이틀 없음 → 즉시 불투명 (.is-opaque)
   - JS(site-nav.js)가 .is-scrolled / .is-opaque 클래스를 제어
   ============================================ */
.site-header.is-nav-variant-hero-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    /* color는 투명 상태 기본값 (흰색 텍스트) */
    color: #ffffff;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.site-header.is-nav-variant-hero-overlay .site-header-inner {
    padding: 1.5rem 1.25rem;
}

/* ── 투명 상태 공통 스타일 ────────────────── */
.site-header.is-nav-variant-hero-overlay .site-brand-text h1,
.site-header.is-nav-variant-hero-overlay .site-brand-text p,
.site-header.is-nav-variant-hero-overlay .site-nav-link,
.site-header.is-nav-variant-hero-overlay .site-title-link {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.site-header.is-nav-variant-hero-overlay .site-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

/* ── 투명 상태: 헤더 우측 영역 + 로그인 버튼 ────────
   .site-header-right 의 background: var(--site-header-bg) 가
   테마색으로 보이지 않도록 transparent 로 덮어씀
   ─────────────────────────────────────────────── */
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-header-right {
    background: transparent;
}

/* 로그인 버튼(--primary): 흰색 테두리·배경 고정 */
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-auth-link--primary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-auth-link--primary:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.8);
}

/* 일반 인증 링크(로그인 상태 등): 흰색 텍스트 */
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-auth-link {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-auth-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
}

/* 투명 상태 헤더 하단에 그라데이션 그림자 (가독성) */
.site-header.is-nav-variant-hero-overlay::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* ── 불투명 상태: 스크롤 후(.is-scrolled) 또는 즉시(.is-opaque) ── */
.site-header.is-nav-variant-hero-overlay.is-scrolled,
.site-header.is-nav-variant-hero-overlay.is-opaque {
    background: var(--site-header-bg);
    color: var(--site-header-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* 불투명 시 그라데이션 그림자 제거 */
.site-header.is-nav-variant-hero-overlay.is-scrolled::after,
.site-header.is-nav-variant-hero-overlay.is-opaque::after {
    opacity: 0;
}

/* 불투명 시 텍스트 색상 복원 — var(--site-header-text) 대신 inherit 사용
   테마별 --site-header-text 가 올바르게 설정되지 않은 경우에도
   .site-header { color: var(--site-header-text) } 를 상속받아 정확한 테마색 적용 */
.site-header.is-nav-variant-hero-overlay.is-scrolled .site-brand-text h1,
.site-header.is-nav-variant-hero-overlay.is-scrolled .site-brand-text p,
.site-header.is-nav-variant-hero-overlay.is-scrolled .site-nav-link,
.site-header.is-nav-variant-hero-overlay.is-scrolled .site-title-link,
.site-header.is-nav-variant-hero-overlay.is-opaque .site-brand-text h1,
.site-header.is-nav-variant-hero-overlay.is-opaque .site-brand-text p,
.site-header.is-nav-variant-hero-overlay.is-opaque .site-nav-link,
.site-header.is-nav-variant-hero-overlay.is-opaque .site-title-link {
    color: inherit;
    text-shadow: none;
}

.site-header.is-nav-variant-hero-overlay.is-scrolled .site-nav-link:hover,
.site-header.is-nav-variant-hero-overlay.is-opaque .site-nav-link:hover {
    background: var(--site-header-hover-bg, rgba(0,0,0,0.08));
}

/* ── 서브메뉴 스타일 (투명 상태) ─────────────────────────────
   - 서브메뉴 자체는 페이지 surface 색상 그대로 유지
   - 부모 메뉴 hover 배경을 반투명 흰색으로 고정하여 헤더가 하얗게 보이지 않도록 방지
   ─────────────────────────────────────────────────────────── */

/* 투명 상태 부모 메뉴 hover — themes.css의 --site-header-hover-bg 덮어쓰기 */
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque)
  .site-nav-item.has-children:hover > .site-nav-item-row > .site-nav-link,
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque)
  .site-nav-item.has-children.is-submenu-open > .site-nav-item-row > .site-nav-link {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff;
}

/* 투명 상태 서브메뉴 — 반투명 다크 배경으로 overlay 분위기 유지 */
.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-nav-submenu {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    color: #ffffff;
}

.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-nav-submenu .site-nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.site-header.is-nav-variant-hero-overlay:not(.is-scrolled):not(.is-opaque) .site-nav-submenu .site-nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Hero overlay: hero-bar 없는 일반 페이지는 fixed 헤더 아래부터 시작
   (hero-bar 있는 페이지·게시판은 site-pages.css에서 padding-top: 0 으로 리셋) */
.is-nav-variant-hero-overlay ~ .site-main,
.is-nav-variant-hero-overlay ~ main {
    padding-top: 80px;
}

/* 페이지·게시판 타이틀 영역: fixed 헤더 높이만큼 내부 상단 패딩 추가하여
   텍스트가 헤더에 가리지 않도록 함 (site-main의 padding-top이 0이므로 직접 보상) */
.is-nav-variant-hero-overlay ~ .site-main > .page-shell:first-child > .board-hero.page-hero--bar,
.is-nav-variant-hero-overlay ~ .site-main > .board-shell:first-child > .board-hero.page-hero--bar,
.is-nav-variant-hero-overlay ~ .site-main > .board-shell--pixel:first-child > .board-hero.page-hero--bar {
    padding-top: 80px;
    box-sizing: border-box;
}

/* 배경이미지 있는 경우: site-main이 이미 0이므로 margin-top 불필요
   padding-top은 위 규칙에서 이미 80px 적용됨 */

/* ============================================
   RESPONSIVE: 태블릿 패딩 미세 조정 (768px 이하)
   - 햄버거/nav 제어는 1000px 블록에서 처리
   - 여기서는 compact-bar / hero-overlay 간격만 조정
   ============================================ */
@media (max-width: 768px) {
    /* Compact Bar: 상단바 폰트 축소 */
    .site-header-topbar {
        font-size: 0.75rem;
    }

    .site-topbar-link,
    .site-topbar-auth-link {
        padding: 0.3rem 0.6rem;
    }

    .site-topbar-link i,
    .site-topbar-auth-link i {
        font-size: 0.85rem;
        margin: 0;
    }

    .site-header-topbar-left,
    .site-header-topbar-right {
        gap: 0.75rem;
    }
}

/* ============================================
   RESPONSIVE: 태블릿 + 모바일 (1000px 이하)
   - JS MOBILE_MQ(max-width:1000px) 와 일치
   - 모든 variant 햄버거 메뉴로 전환
   ============================================ */
@media (max-width: 1000px) {
    /* Two-Row: 1단으로 전환 */
    .site-header.is-nav-variant-two-row .site-header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    .site-header.is-nav-variant-two-row .site-header-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
    }

    .site-header.is-nav-variant-two-row .site-brand {
        grid-area: unset;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        padding: 0;
        background: none;
        border-bottom: none;
        gap: 0.75rem;
        width: auto;
    }

    .site-header.is-nav-variant-two-row .site-logo-link {
        justify-content: flex-start;
        width: auto;
    }

    .site-header.is-nav-variant-two-row .site-brand-text {
        text-align: left;
        width: auto;
    }

    .site-header.is-nav-variant-two-row .site-brand-text h1 {
        font-size: 1.15rem;
        margin: 0;
    }

    .site-header.is-nav-variant-two-row .site-brand-text p {
        font-size: 0.78rem;
        margin: 0.15rem 0 0;
    }

    .site-header.is-nav-variant-two-row .site-header-right {
        display: none !important;
        padding: 0;
    }

    /* Compact Bar: 상단바 텍스트 숨김, 아이콘만 */
    .site-header-topbar-inner {
        padding: 0.35rem 1rem;
        gap: 0.5rem;
    }

    .site-header-topbar-left {
        flex: 1;
        gap: 0.5rem;
        overflow-x: auto;
    }

    .site-header-topbar-right {
        gap: 0.5rem;
    }

    /* 태블릿/모바일: 이메일 숨김 */
    .site-topbar-link:not([href^="tel"]) {
        display: none;
    }

    .site-topbar-link span,
    .site-topbar-auth-link span {
        display: none;
    }

    .site-header.is-nav-variant-compact-bar .site-header-inner {
        padding: 0.75rem 1rem;
    }

    /* Hero Overlay */
    .site-header.is-nav-variant-hero-overlay .site-header-inner {
        padding: 0.75rem 1rem;
    }

    .is-nav-variant-hero-overlay ~ .site-main,
    .is-nav-variant-hero-overlay ~ main {
        padding-top: 60px;
    }

    .is-nav-variant-hero-overlay ~ .site-main > .page-shell:first-child > .board-hero.page-hero--bar,
    .is-nav-variant-hero-overlay ~ .site-main > .board-shell:first-child > .board-hero.page-hero--bar,
    .is-nav-variant-hero-overlay ~ .site-main > .board-shell--pixel:first-child > .board-hero.page-hero--bar {
        padding-top: 60px;
    }

    /* ── 모든 variant 공통: 햄버거 표시 + nav 드로어 ── */
    .site-header .site-nav-toggle {
        display: inline-flex !important;
    }

    .site-header .site-nav {
        display: none !important;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--site-header-bg, #ffffff);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        z-index: 999;
        padding: 0;
    }

    .site-header .site-nav.is-open {
        display: block !important;
    }

    .site-header .site-nav > ul {
        flex-direction: column;
    }

    /* 대메뉴 아이템 구분선 */
    .site-header .site-nav .site-nav-list > .site-nav-item {
        border-bottom: 1px solid var(--site-header-border, rgba(0, 0, 0, 0.08));
    }

    /* 메뉴 행(아이콘+링크+토글버튼) 좌우 여백 */
    .site-header .site-nav .site-nav-item-row {
        display: flex;
        align-items: center;
        padding: 0 1.25rem;
    }

    /* 메뉴 링크 세로 여백 + 전체 너비 */
    .site-header .site-nav .site-nav-item-row .site-nav-link {
        display: flex;
        flex: 1;
        padding: 0.9rem 0;
        color: var(--site-header-text, #1a1a1a);
        font-size: 0.95rem;
        white-space: normal;
    }

    /* 서브메뉴 토글 버튼 */
    .site-header .site-nav .site-nav-submenu-toggle {
        display: flex;
        padding: 0.5rem;
        color: var(--site-header-text, #1a1a1a);
        opacity: 0.7;
    }

    /* 서브메뉴 들여쓰기 */
    .site-header .site-nav .site-nav-submenu {
        background: rgba(0, 0, 0, 0.04);
    }

    .site-header .site-nav .site-nav-submenu .site-nav-item-row {
        padding: 0 1.25rem 0 2.25rem;
    }

    .site-header .site-nav .site-nav-submenu .site-nav-link {
        padding: 0.65rem 0;
        font-size: 0.88rem;
        opacity: 0.85;
    }

    /* Hero Overlay: 메뉴 열림 시 불투명 배경 */
    .site-header.is-nav-variant-hero-overlay .site-nav.is-open {
        background: var(--site-header-bg, #ffffff);
    }
}

/* ============================================
   DESKTOP: 햄버거 메뉴 토글 숨김 (1001px 이상)
   themes.css 기본값(display:none)을 명시적 강화
   ============================================ */
@media (min-width: 1001px) {
    .site-nav-toggle {
        display: none !important;
    }
}