@charset "utf-8";

.gnb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.gnb__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: box-shadow .3s;
    z-index: 1;
}

.gnb.is-fixed {
    position: fixed;
}

.gnb.is-fixed .gnb__bg {}

.gnb__inner {
    position: relative;
    z-index: 3;
    /* 오버레이보다 항상 위 : 토글 버튼이 X로 바뀌어도 눌려야 하니까 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: 50px;
}

.gnb__logo {
    letter-spacing: -0.02em;
}

.gnb__menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: right;
    gap: 40px;
    transition-duration: .3s;
}

/* 토글 버튼 : 3줄 -> X 애니메이션 */
.gnb__toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 20px;
}

.gnb__toggle span {
    display: block;
    height: 1px;
    background: #111;
    transition: transform .3s, opacity .3s;
}

.gnb__toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.gnb__toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.gnb__toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ========================
   전체메뉴 오버레이
======================== */
.gnb-overlay {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    /* height: calc(100vh - 90px);  ← 삭제 */
    background: #fff;
    z-index: 2;
    padding: 30px 0;
    /* 상하 여백을 배경이 직접 갖도록 */

    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}

.gnb-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gnb-overlay__cols {
    display: flex;
    justify-content: right;
    gap: 20px;
}

.gnb-overlay__col {
    min-width: 160px;
}

.gnb-overlay__title {
    margin-bottom: 20px;
}

.gnb-overlay__list li+li {
    margin-top: 12px;
}

.gnb-overlay__list a {
    color: #777777;
}

/* 호버 중이거나, 버튼 클릭으로 고정된 상태면 열림 */
.gnb.is-hover .gnb-overlay,
.gnb.is-pinned .gnb-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gnb__menu li>a {
    transition: color .2s;
}
.gnb-overlay__list a:hover,
.gnb__menu li:hover,
.gnb__menu li:hover>a {
    color: var(--color-red);
}