/**
 * NRS Shared - Drawer
 *
 * 모바일 드로어 컴포넌트 CSS.
 *
 * 정책 근거 (단계 6 결정 7-1·7-2, 단계 7 결정 5):
 * - 모바일(폭 640px 이하)에서만 활성
 * - 드로어 폭: 화면 폭의 90%
 * - 외부 어두운 배경(10%) 탭으로 닫기
 * - 슬라이드 방향: left / right
 */

/* 데스크톱에서는 desktop-inline 모드에 한해 인라인 표시. 기본은 안 보임 */
@media (min-width: 641px) {
    .nrs-drawer {
        display: none;
    }
    .nrs-drawer--desktop-inline {
        position: static;
        display: block;
        width: auto;
        height: auto;
    }
    .nrs-drawer--desktop-inline .nrs-drawer__backdrop {
        display: none;
    }
    .nrs-drawer--desktop-inline .nrs-drawer__panel {
        position: static;
        width: 100%;
        height: auto;
        max-width: none;
        box-shadow: none;
        transform: none;
    }
    .nrs-drawer--desktop-inline .nrs-drawer__header {
        display: none; /* 데스크톱은 헤더 숨김 */
    }
    .nrs-drawer-toggle {
        display: none; /* 데스크톱은 토글 버튼 숨김 */
    }
}

/* 모바일 풀스크린 드로어 */
@media (max-width: 640px) {
    .nrs-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        display: block;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .nrs-drawer[hidden] {
        display: none;
    }

    .nrs-drawer.is-open {
        pointer-events: auto;
    }

    .nrs-drawer__backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--nrs-overlay-bg);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: auto;
    }

    .nrs-drawer.is-open .nrs-drawer__backdrop {
        opacity: 1;
    }

    .nrs-drawer__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 90%;
        max-width: 360px;
        background: var(--nrs-bg-primary);
        color: var(--nrs-text-primary);
        box-shadow: var(--nrs-shadow-modal);
        display: flex;
        flex-direction: column;
        transition: transform 0.25s ease;
        pointer-events: auto;
    }

    .nrs-drawer--right .nrs-drawer__panel {
        right: 0;
        transform: translateX(100%);
    }

    .nrs-drawer--left .nrs-drawer__panel {
        left: 0;
        transform: translateX(-100%);
    }

    .nrs-drawer.is-open .nrs-drawer__panel {
        transform: translateX(0);
    }

    .nrs-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 16px;
        border-bottom: 1px solid var(--nrs-border-secondary);
        flex-shrink: 0;
    }

    .nrs-drawer__title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: var(--nrs-text-primary);
    }

    .nrs-drawer__close {
        appearance: none;
        border: none;
        background: transparent;
        color: var(--nrs-text-primary);
        font-size: 24px;
        line-height: 1;
        padding: 8px;
        cursor: pointer;
        border-radius: 4px;
    }

    .nrs-drawer__close:hover {
        background: var(--nrs-bg-hover);
    }

    .nrs-drawer__body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* 드로어 토글 버튼 */
.nrs-drawer-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--nrs-border-primary);
    background: var(--nrs-bg-primary);
    color: var(--nrs-text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}

.nrs-drawer-toggle:hover {
    background: var(--nrs-bg-hover);
}

.nrs-drawer-toggle:focus-visible {
    outline: 2px solid var(--nrs-border-focus);
    outline-offset: 1px;
}

.nrs-drawer-toggle__icon {
    font-size: 16px;
    line-height: 1;
}