/* PUBLIC DRAWER V1
   로그인/가입 공개화면에서 회원 Drawer와 같은 시각체계를 사용한다.
   기존 페이지 디자인에는 영향을 주지 않도록 Drawer 요소만 한정한다. */
.overlay{
    position:fixed; inset:0; z-index:998;
    background:rgba(6,30,48,.46);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
}
.overlay.open{opacity:1;visibility:visible}
.drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:999;
    width:min(360px,88vw);
    background:#fffdfa;
    box-shadow:-18px 0 48px rgba(6,30,48,.18);
    transform:translateX(105%);
    transition:transform .26s ease;
    overflow-y:auto;
    color:#122334;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
    padding:22px 18px 18px;
    color:#fff;
    background:linear-gradient(145deg,#061e30 0%,#0a3448 58%,#0f7778 100%);
}
.drawer-top{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.drawer-top strong{
    font-size:.82rem;font-weight:900;letter-spacing:.08em;
}
.drawer .close{
    width:34px;height:34px;border:0;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;font-size:1rem;
}
.drawer-user{margin-top:18px}
.drawer-user small{
    display:block;color:#f2dda2;font-size:.69rem;font-weight:900;letter-spacing:.05em;
}
.drawer-user h3{
    margin:4px 0 0;color:#fff;font-size:.91rem;font-weight:900;
}
.drawer-menu{display:block}
.drawer-menu a{
    min-height:54px;padding:0 18px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-bottom:1px solid rgba(6,30,48,.08);
    color:#122334;text-decoration:none;font-size:.80rem;font-weight:850;
    background:#fffdfa;
}
.drawer-menu a:hover{background:#fbf8f1}
.drawer-menu a span:last-child{color:#0f7778;font-size:1rem}
@media (min-width:740px){
    .drawer{width:360px}
    .drawer-head{padding:26px 20px 21px}
    .drawer-menu a{min-height:58px;padding:0 20px}
}