.nav-drawer-open,
.nav-drawer__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fstd-fg-muted);
    cursor: pointer;
}

.nav-drawer-open {
    width: 36px;
    height: 36px;
    margin-left: 2px;
    border-radius: 6px;
}

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;                     /* 상담 폼 .csf 와 같은 층(한 번에 하나만 열린다), 알림 .mdl 1100 아래 */
    /* body 직계라 .landing-v2 의 글꼴을 물려받지 못한다. */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* 클래스 규칙의 display 가 UA 의 [hidden] 을 이길 수 있어 못 박는다. */
.nav-drawer[hidden] {
    display: none !important;
}

/* base.css 가 모든 요소의 포커스 윤곽선을 지운다 - 키보드 포커스에서만 되살린다. */
.nav-drawer :focus-visible,
.nav-drawer-open:focus-visible {
    outline: revert;
}

.nav-drawer__dim {
    position: absolute;
    inset: 0;
    background-color: var(--fstd-dim-menu);
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: calc(100% - 54px);
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--fstd-surface);
    border-radius: 8px 0 0 8px;
    transform: translateX(100%);
    transition: transform 200ms ease-in;
}

.nav-drawer.is-open .nav-drawer__dim {
    opacity: 1;
    transition: opacity 250ms ease-out;
}
.nav-drawer.is-open .nav-drawer__panel {
    transform: none;
    transition: transform 250ms ease-out;
}

.nav-drawer__close {
    align-self: flex-end;
    width: 48px;
    height: 48px;
    margin-right: 4px;
    border-radius: 8px;
}

.nav-drawer__nav {
    flex: none;
}

/* 항목 간격은 gap 으로 - 항목 margin 이면 마지막 항목 아래에도 남아 목록이 시안(308)보다 4px 길다. */
.nav-drawer__nav > ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-drawer__item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    font-size: var(--ds-text-lg, 18px);
    font-weight: var(--ds-weight-semibold, 600);
    line-height: var(--ds-lh-label, 24px);
    letter-spacing: -0.36px;
    white-space: nowrap;
    text-decoration: none;
}
/* 항목은 <a> 라 :hover · :active 를 함께 적는다 - base.css 의 a:hover { color: inherit }(0,1,1)가 클래스 하나(0,1,0)를 이긴다. */
.nav-drawer__item,
.nav-drawer__item:hover,
.nav-drawer__item:active {
    color: var(--fstd-fg-heavy);
}

.nav-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding: 16px 16px max(32px, env(safe-area-inset-bottom, 0px));
}

/* .is-open 규칙까지 적어야 특정도에서 이긴다. */
@media (prefers-reduced-motion: reduce) {
    .nav-drawer__dim,
    .nav-drawer.is-open .nav-drawer__dim,
    .nav-drawer__panel,
    .nav-drawer.is-open .nav-drawer__panel {
        transition: none;
    }
}