@charset "UTF-8";
/* GNB — 스크롤을 따라다니는 투명 헤더 (높이 80).
   배경은 깔지 않고 글자색만 바꾼다. 어두운 배경 구간에서는 흰색,
   밝은 배경 구간에서는 검정(.is-on-light). 판정은 js/main.js 가 한다. */

.gnb {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
}

.gnb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.gnb-logo { display: block; }
.gnb-logo img {
    width: 157.143px;
    height: 24px;
    transition: filter .3s ease;
}

.gnb-menu {
    display: flex;
    align-items: center;
    gap: 64px;
    /* 시안: 메뉴 오른쪽 끝이 화면 우측에서 276px → 콘텐츠 우측에서 156px */
    margin-right: 156px;
}

.gnb-menu a {
    font-size: 18px;
    line-height: 24px;
    color: var(--white);
    white-space: nowrap;
    transition: color .3s ease, opacity .2s ease;
}
.gnb-menu a:hover { opacity: .7; }

/* 밝은 배경 위 — 로고는 단색 흰 워드마크라 반전만으로 검정이 된다 */
.gnb.is-on-light .gnb-menu a { color: var(--ink); }
.gnb.is-on-light .gnb-logo img { filter: invert(1); }

/* 배경이 깔린 형 GNB (시안 PC_GNB_bg / MO_GNB_bg).
   브랜드·공지처럼 히어로 없이 흰 바탕으로 시작하는 페이지가 쓴다.
   흰색 20% 를 얹고 뒤를 흐린다. 글자색은 그대로 배경 톤을 따라간다 —
   푸터(검정) 위에서는 흰 글자여야 읽힌다.
   ⚠️ 페이지 이름이 아니라 '어떤 GNB 인지'로 이름을 붙였다.
      쓰는 페이지가 늘어도 클래스를 새로 만들지 않는다. */
.has-gnb-bg .gnb {
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
    .gnb-menu a,
    .gnb-logo img { transition: none; }
}

/* ============================================================
   모바일 (≤768) — 시안 183:751 / 183:1137 기준 390 폭
   ============================================================ */
.gnb-toggle,
.mo-menu { display: none; }

@media (max-width: 768px) {
    .gnb { height: 60px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
    .gnb-inner { width: 100%; max-width: none; padding: 0 24px 0 24px; }

    .gnb-logo img { width: 130.953px; height: 20px; }

    /* 메뉴 나열은 감추고 햄버거를 쓴다 */
    .gnb-menu { display: none; }

    .gnb-toggle {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;      /* 시안 x330 ~ 370 */
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    /* 선 두 개짜리 아이콘. 가운데 선을 span 으로, 위/아래를 가상요소로 그린다 */
    .gnb-toggle span,
    .gnb-toggle span::before {
        position: absolute;
        left: 9px;
        width: 22px;
        height: 2px;
        background: var(--white);
        transition: background-color .3s ease;
    }
    .gnb-toggle span { top: 15px; }
    .gnb-toggle span::before { content: ""; left: 0; top: 10px; }

    /* 밝은 배경 구간에서는 검정으로 — 메뉴 글자와 같은 규칙 */
    .gnb.is-on-light .gnb-toggle span,
    .gnb.is-on-light .gnb-toggle span::before { background: var(--ink); }
}

/* ---- 모바일 전체화면 메뉴 ---- */
@media (max-width: 768px) {
    /* 판이 통째로 떨어지는 게 아니라, 헤더에서 아래로 펼쳐진다.
       clip 으로 위에서부터 드러내면 로고 → 메뉴 순서로 나타나 읽는 순서와 맞는다.
       visibility 를 같이 다루는 이유 — 닫혀 있는 동안 포커스가 잡히면 안 되기
       때문이다. 닫을 때는 다 걷힌 뒤에 감춘다. */
    .mo-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: #fff;
        overflow-y: auto;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path .5s cubic-bezier(.22, 1, .36, 1),
                    visibility 0s linear .5s;
    }
    .mo-menu.is-open {
        visibility: visible;
        clip-path: inset(0 0 0 0);
        transition: clip-path .5s cubic-bezier(.22, 1, .36, 1),
                    visibility 0s;
    }

    /* 항목은 살짝 내려오면서 차례로 들어온다 — 펼쳐지는 결을 따라가게 */
    .mo-menu-list a {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .3s ease, transform .3s ease;
    }
    .mo-menu.is-open .mo-menu-list a { opacity: 1; transform: none; }
    .mo-menu.is-open .mo-menu-list a:nth-child(1) { transition-delay: .10s; }
    .mo-menu.is-open .mo-menu-list a:nth-child(2) { transition-delay: .16s; }
    .mo-menu.is-open .mo-menu-list a:nth-child(3) { transition-delay: .22s; }
    .mo-menu.is-open .mo-menu-list a:nth-child(4) { transition-delay: .28s; }
    .mo-menu.is-open .mo-menu-list a:nth-child(5) { transition-delay: .34s; }

    @media (prefers-reduced-motion: reduce) {
        .mo-menu { transition: visibility 0s; }
        .mo-menu-list a,
        .mo-menu.is-open .mo-menu-list a { transition: none; transition-delay: 0s; }
    }

    .mo-menu-head {
        position: relative;
        width: 100%;
        max-width: none;
        height: 60px;
        padding: 0 24px;
    }
    .mo-menu-logo {
        position: absolute;
        top: 20px;
        left: 24px;
        display: block;
    }
    .mo-menu-logo img { width: 130.953px; height: 20px; filter: invert(1); }

    .mo-menu-close {
        position: absolute;
        top: 10px;
        right: 20px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    /* X — 선 두 개를 겹쳐 돌린다 */
    .mo-menu-close span,
    .mo-menu-close span::before {
        content: "";
        position: absolute;
        top: 19px;
        left: 9px;
        width: 22px;
        height: 2px;
        background: var(--ink);
    }
    .mo-menu-close span { transform: rotate(45deg); }
    .mo-menu-close span::before { top: 0; left: 0; transform: rotate(-90deg); }

    .mo-menu-list {
        display: flex;
        flex-direction: column;
        gap: 48px;              /* 시안 간격 75 - 글자 높이 27 */
        padding: 30px 20px 0;   /* 첫 항목 상단 90 = 60(헤더) + 30 */
    }
    .mo-menu-list a {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
        color: var(--ink);
    }

    /* 메뉴가 열린 동안 뒤 페이지는 스크롤되지 않게 */
    body.is-menu-open { overflow: hidden; }
}