/* 전체 레이아웃 */
#header, #mo_header, .control-mobile-menu,
#topCont, #gnb, .lnb, #lnb, .left_menu { display:none !important; }

#g5_before_content_wrap { display:none !important; }


/* 왼쪽 카드 — main.php #left_card와 동일한 스타일 */
#menu_btn{
    position:fixed;
    right:10px;
    top:10px;
    width:20px;
    height:20px;
    background-color:white;
    border-radius:50%;
    cursor:pointer;
    z-index:99999;
    display:none;
}
#menu_left_card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* BGM 텍스트 길이에 관계없이 너비 고정 */
    width: 250px;
    box-sizing: border-box;
    margin: 0 auto;
}

#menu_left_card:not(#left_panel #menu_left_card){
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid #d8d8d8;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    z-index: 9000;
    box-sizing: border-box;
}

#menu_left_card::-webkit-scrollbar { width: 4px; }
#menu_left_card::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1); border-radius:2px; }

/* 로고 */
#menu_logo {
    text-align:center; padding:24px 20px 20px;
    display:flex; align-items:center; justify-content:center;
    min-height:80px; text-decoration:none;
}
#menu_logo .main-logo-img  { max-width:140px; max-height:100px; object-fit:contain; display:block; }
#menu_logo .main-logo-text { font-size:17px; font-weight:700; color:#222; }

/* 메뉴 */
#menu_nav { padding:0 20px 16px; flex:1; }
#menu_nav ul { list-style:none; margin:0; padding:0; }
#menu_nav li a {
    display:flex; align-items:center; gap:10px;
    padding:7px 0; color:#222; text-decoration:none;
    font-size:14px; letter-spacing:0.02em; transition:color .15s;
}
#menu_nav li a:hover { color:#aaa; }
#menu_nav .menu-heart { font-size:13px; }

/* 로그인 */
#menu_auth {
    padding:10px 20px 14px;
    border-top:1px solid rgba(0,0,0,0.07);
    font-size:12px;
}
.menu-auth-logged .menu-user { color:#777; font-size:11px; display:block; margin-bottom:6px; }
.menu-auth-links { display:flex; gap:6px; flex-wrap:wrap; }
.menu-auth-links a {
    font-size:11px; padding:3px 8px; border-radius:3px;
    border:1px solid #ddd; color:#555; text-decoration:none; transition:background .12s;
}
.menu-auth-links a:hover { background:#f0f0f0; }
.menu-login-form { display:flex; flex-direction:column; gap:5px; }
.menu-idpw { display:flex; gap:4px; }
.menu-idpw input {
    flex:1; min-width:0; height:28px; padding:0 6px;
    border:1px solid #ccc; border-radius:4px; font-size:12px;
    background:rgba(255,255,255,0.7); box-sizing:border-box;
}
.menu-btn-row { display:flex; gap:4px; margin-top:4px; }
.menu-btn-row button, .menu-btn-row a {
    flex:1; height:26px; border:none; border-radius:4px;
    font-size:11px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:opacity .15s;
}
.menu-btn-row button:hover, .menu-btn-row a:hover { opacity:.75; }

/* BGM */
#menu_bgm {
    background:#2b2b2b; padding:7px 14px 9px; color:#fff;
    border-radius:0 0 14px 14px; flex-shrink:0;
}
#menu_bgm_info { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:5px; }
#menu_bgm_cur,#menu_bgm_total { font-family:monospace; font-size:10px; color:#888; flex-shrink:0; min-width:30px; }
#menu_bgm_total { text-align:right; }
#menu_bgm_meta  { flex:1; display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:0 4px; min-width:0; }
#menu_bgm_title  { font-size:10px; color:#bbb; width:100%; overflow:hidden; white-space:nowrap; text-align:center; }
#menu_bgm_artist { font-size:9px; color:#777; width:100%; overflow:hidden; white-space:nowrap; text-align:center; }
#menu_bgm_controls { display:flex; align-items:center; justify-content:center; gap:18px; }
#menu_bgm_controls button { background:none; border:none; color:#999; cursor:pointer; padding:4px; transition:color .15s; line-height:0; display:flex; align-items:center; }
#menu_bgm_controls button:hover { color:#fff; }
#menu_bgm_play { color:#fff !important; font-size:13px !important; letter-spacing:-3px; }

@media (max-width: 700px){
    #menu_btn:not(#left_panel #menu_btn){
        display:block;
    }
    #menu_left_card,#menu_left_card:not(#left_panel #menu_left_card){
        z-index:99999;
    }
    #left_panel {z-index:99999;}
    #menu_left_card:not(#left_panel #menu_left_card){
        left:initial;
        right:10px;
        top:40px;
        transform:translateX(250px);
        -webkit-transform:translateX(250px);
        -moz-transform:translateX(250px);
        -ms-transform:translateX(250px);
        -o-transform:translateX(250px);
    }
     #menu_left_card.open:not(#left_panel #menu_left_card){
        transform:translateX(0);
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
        -ms-transform:translateX(0);
        -o-transform:translateX(0);
     }
     
}