/* ==========================================
   MOBILE ONLY
========================================== */

.mobile-header,
.mobile-menu{
    display:none;
}

@media (max-width:768px){

/* 기존 헤더 숨김 */

.site-header .header-inner,
.site-header .nav{
    display:none;
}

/* 모바일 헤더 */

.mobile-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    position:sticky;
    top:0;

    height:64px;
    padding:0 18px;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    z-index:1000;
}

/* 로고 */

.mobile-logo{
    height:42px;
}

/* 햄버거 */

.menu-btn{

    background:none;
    border:none;

    color:#7a0d52;

    font-size:34px;

    padding:0;

    width:auto;

    cursor:pointer;
}

/* 슬라이드 메뉴 */

.mobile-menu{

    display:block;

    position:fixed;

    top:64px;
    left:-280px;

    width:260px;
    height:100vh;

    background:white;

    transition:left .35s ease;

    box-shadow:5px 0 25px rgba(0,0,0,.15);

    z-index:999;
}

/* 열렸을 때 */

.mobile-menu.open{

    left:0;
}

/* 메뉴 */

.mobile-menu a{

    display:block;

    padding:18px 22px;

    color:#444;

    text-decoration:none;

    font-size:18px;

    border-bottom:1px solid #eee;

    transition:.2s;
}

.mobile-menu a:hover{

    background:#f7f7f7;

    color:#7a0d52;
}

/* 로그아웃 버튼 */

.mobile-menu .logout-btn{

    width:calc(100% - 40px);

    margin:20px;

    padding:12px;

    border-radius:8px;
}

}