/**
 * =========================================================
 * 파일명 : drawer.css
 * 위치 : /www/assets/css/layout
 * ---------------------------------------------------------
 * 목적
 * - JP Engine 공통 Mobile Drawer
 * =========================================================
 */

/* =========================================================
 * Backdrop
 * ========================================================= */

.drawer-backdrop{

    position:fixed;
    inset:0;

    z-index:calc(var(--drawer-z-index) - 1);

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:var(--transition);

}

/* =========================================================
 * Drawer
 * ========================================================= */

.drawer{

    position:fixed;

    top:0;
    left:0;

    z-index:var(--drawer-z-index);

    width:var(--drawer-width);
    max-width:85vw;

    height:100dvh;

    display:flex;
    flex-direction:column;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    background:var(--color-background);

    box-shadow:var(--shadow-md);

    transform:translateX(-100%);

    transition:var(--transition);

    padding-bottom:env(safe-area-inset-bottom);

}

/* =========================================================
 * Open
 * ========================================================= */

.drawer.is-open{

    transform:translateX(0);

}

.drawer-backdrop.is-open{

    opacity:1;
    visibility:visible;

}

/* =========================================================
 * Header
 * ========================================================= */

.drawer-header{

    display:flex;
    align-items:center;

    gap:12px;

    height:72px;

    padding:0 20px;

    border-bottom:1px solid var(--color-border);

}

.drawer-logo{

    display:block;

    width:auto;
    height:30px;

}

.drawer-region{

    flex:1;
    min-width:0;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    font-size:18px;
    font-weight:700;

    color:var(--color-text-primary);

}

/* =========================================================
 * Building List
 * ========================================================= */

.drawer-buildings{

    display:flex;
    flex-direction:column;

    gap:8px;

    padding:20px;

    border-bottom:1px solid var(--color-border);

}

.drawer-title{

    margin-bottom:4px;

    font-size:12px;
    font-weight:700;

    letter-spacing:.08em;

    color:var(--color-text-secondary);

    text-transform:uppercase;

}

.drawer-building{

    display:flex;
    align-items:center;

    min-height:46px;

    padding:0 14px;

    border-radius:10px;

    text-decoration:none;

    color:var(--color-text-primary);

    transition:var(--transition-fast);

}

.drawer-building:hover{

    background:var(--color-surface);

}

.drawer-building.active{

    background:var(--color-brand);

    color:#fff;

}

.drawer-building-name{

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    font-size:15px;
    font-weight:600;

}

/* =========================================================
 * Navigation
 * ========================================================= */

.drawer-nav{

    display:flex;
    flex-direction:column;

    padding:12px 0;

}

.drawer-link{

    display:flex;
    align-items:center;

    min-height:48px;

    padding:0 20px;

    text-decoration:none;

    color:var(--color-text-primary);

    transition:var(--transition-fast);

}

.drawer-link:hover{

    background:var(--color-surface);

}

.drawer-link:focus-visible{

    outline:2px solid var(--color-primary);

    outline-offset:-2px;

}

/* =========================================================
 * Desktop
 * ========================================================= */

@media (min-width:992px){

    .drawer,
    .drawer-backdrop{

        display:none;

    }

}