/*
 * site-nav.css — 공통 상단 내비게이션(.gnb) 전용 스타일
 * 홈페이지(index.php)와 Q&A 게시판이 함께 사용합니다.
 * 색상·폰트는 반드시 theme.css 의 var(--gnb-*) 토큰 참조만 사용합니다.
 * (index.html 의 .nav 스타일을 이식 — 클래스 충돌 방지를 위해 .gnb-* 로 리네임)
 */

.gnb {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--gnb-bg);
    border-bottom: 1px solid var(--gnb-line);
    backdrop-filter: blur(8px);
}

.gnb-inner {
    max-width: var(--gnb-max-width);
    margin: 0 auto;
    padding: 0 2.5rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 2rem;
}

.gnb-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.gnb-logo-img {
    display: block;
    height: 44px;
    width: auto;
}

.gnb-menu {
    display: flex;
    gap: 2.25rem;
    margin-left: auto;
}

.gnb-link {
    font-size: 13.5px;
    color: var(--gnb-link);
    text-decoration: none;
    font-weight: 400;
    font-family: var(--gnb-font-menu);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.gnb-link:hover {
    color: var(--gnb-accent);
    border-bottom-color: var(--gnb-accent);
}

.gnb-link.is-active {
    color: var(--gnb-accent);
    border-bottom-color: var(--gnb-accent);
}

/* 1차/2차 항목 구분: 세로 헤어라인 + 2차 항목 옅은 톤
   (사이트 전체의 괘선 기반 에디토리얼 언어와 맥락 일치) */
.gnb-divider {
    width: 1px;
    height: 14px;
    background: var(--gnb-line);
    align-self: center;
}

.gnb-link-sub {
    color: var(--gnb-sub);
}

.gnb-link-sub:hover,
.gnb-link-sub.is-active {
    color: var(--gnb-accent);
}

.gnb-link-admin {
    color: var(--gnb-accent);
    font-weight: 500;
}

.gnb-link-archive {
    display: none;
}

.gnb-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    color: var(--gnb-sub);
    border: 1px solid var(--gnb-line);
    padding: 9px 18px;
    border-radius: 2px;
    font-size: 13px;
    font-family: var(--gnb-font-cta);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.gnb-cta:hover {
    border-color: var(--gnb-accent);
    color: var(--gnb-accent);
}

.gnb-cta-arrow {
    font-size: 11px;
    line-height: 1;
    transform: translateY(-1px);
}

/* 모바일 햄버거 토글 (데스크톱 숨김) */
.gnb-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.gnb-toggle-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gnb-ink);
    transition: background 0.2s;
}

.gnb-toggle-icon::before,
.gnb-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--gnb-ink);
    transition: transform 0.2s, top 0.2s;
}

.gnb-toggle-icon::before {
    top: -7px;
}

.gnb-toggle-icon::after {
    top: 7px;
}

.gnb.is-open .gnb-toggle-icon {
    background: transparent;
}

.gnb.is-open .gnb-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.gnb.is-open .gnb-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* 반응형: 모바일 드롭다운 메뉴 */
@media (max-width: 920px) {
    .gnb {
        position: sticky;
    }

    .gnb-inner {
        height: 62px;
        padding: 0 1.5rem;
        position: relative;
    }

    .gnb-toggle {
        display: flex;
    }

    .gnb-cta {
        display: none;
    }

    /* 드롭다운 패널: 페이지(크림)와 확실히 구분되도록 불투명 네이비 + 그림자 */
    .gnb-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        padding: 0;
        background: var(--gnb-panel-bg);
        box-shadow: 0 14px 28px -12px rgba(15, 27, 49, 0.45);
        max-height: calc(100vh - 62px);
        overflow-y: auto;
    }

    .gnb.is-open .gnb-menu {
        display: flex;
    }

    /* 본문(세리프 16px)과 구분되도록 산세리프 + 동일 크기 */
    .gnb-link {
        font-family: var(--gnb-font-cta);
        font-size: 16px;
        font-weight: 500;
        color: var(--gnb-panel-ink);
        padding: 0.95rem 1.5rem;
        border-bottom: none;
        border-left: 3px solid transparent;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .gnb-link + .gnb-link {
        border-top: 1px solid var(--gnb-panel-line);
    }

    /* 데스크톱 전용 세로 구분선은 모바일 패널에서 숨김 —
       숨겨도 DOM에는 남아 인접 셀렉터(.gnb-link + .gnb-link)를 끊으므로
       구분선 바로 다음 링크에 border-top을 별도로 복구한다 */
    .gnb-divider {
        display: none;
    }

    .gnb-divider + .gnb-link {
        border-top: 1px solid var(--gnb-panel-line);
    }

    /* 2차 항목도 모바일 패널 기본색으로 리셋 (아카이브는 아래 .gnb-link-archive 규칙이 이어서 재정의) */
    .gnb-link-sub {
        color: var(--gnb-panel-ink);
    }

    /* 데스크톱용 짙은 초록 hover 는 네이비 위에서 판독 불가 → 밝은 액센트로 */
    .gnb-link:hover,
    .gnb-link:focus-visible {
        color: var(--gnb-panel-accent);
        background: rgba(255, 255, 255, 0.06);
        border-bottom-color: transparent;
    }

    .gnb-link.is-active {
        border-bottom: none;
        border-left-color: var(--gnb-panel-accent);
        color: var(--gnb-panel-accent);
        background: rgba(255, 255, 255, 0.06);
        font-weight: 600;
    }

    .gnb-link-admin {
        color: var(--gnb-panel-accent);
    }

    .gnb-link-archive {
        display: flex;
        font-weight: 500;
        color: var(--gnb-panel-accent);
    }
}