/* 공통 사이드바, 모바일 메뉴, 로그인 UI: 홈 디자인 기준 */
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;padding:26px 16px;background:#fff;border-right:1px solid #e2ebf5;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-logo{display:block;padding:0 12px 30px}.sidebar-logo img{display:block;width:100%;max-width:180px;height:auto;object-fit:contain}
.menu-label{margin:0;padding:0 14px 14px;color:#94a3b8;font-size:12px;font-weight:bold}
.sidebar-nav{display:flex;flex-direction:column;gap:7px}
.sidebar-nav > a,.sidebar-nav > .sidebar-parent{display:flex;align-items:center;gap:13px;width:100%;padding:14px 15px;border:0;border-radius:12px;background:transparent;color:#475569;font-family:inherit;font-size:15px;font-weight:bold;text-align:left;text-decoration:none;cursor:pointer}
.sidebar-nav > a:hover,.sidebar-nav > a.active,.sidebar-nav > .sidebar-parent:hover{background:#eaf4ff;color:#2584e9}
.nav-icon{width:23px;flex-shrink:0;font-size:19px;text-align:center;display:flex;align-items:center;justify-content:center}.nav-icon img{width:23px;height:23px;object-fit:contain}
.nav-text{flex:1;min-width:0}.sidebar-parent .arrow{margin-left:auto;color:#94a3b8;font-size:17px}
.sidebar-submenu{display:flex;flex-direction:column;gap:3px;padding:3px 0 10px 38px}.sidebar-submenu[hidden]{display:none!important}
.sidebar-nav .sidebar-submenu > a{display:block;width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:#475569;font-size:13px;font-weight:normal;text-align:left;text-decoration:none}
.sidebar-nav .sidebar-submenu > a:hover,.sidebar-nav .sidebar-submenu > a.active{background:#eaf4ff;color:#2584e9}.sidebar-nav .sidebar-submenu > a.active{font-weight:bold}
.sidebar-footer{margin-top:auto;padding-top:25px;color:#94a3b8;text-align:center;font-size:11px}
.page{margin-left:240px;min-height:100vh}.topbar{position:sticky;top:0;z-index:90;height:75px;display:flex;align-items:center;justify-content:flex-end;padding:0 35px;background:rgba(255,255,255,.96);border-bottom:1px solid #e2ebf5;backdrop-filter:blur(10px)}
.topbar .login-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:8px;background:#2584e9;color:#fff;font-size:12px;font-weight:bold;text-decoration:none}.topbar .login-btn:hover{background:#176ec8;color:#fff}
#loginArea{display:flex;align-items:center;gap:10px;position:relative}.member-nickname{font-size:13px;font-weight:700;color:#334155;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-trigger{display:flex;align-items:center;justify-content:center;width:36px!important;height:36px!important;padding:0!important;border:1px solid #e2ebf5;border-radius:50%!important;background:#edf4fb;cursor:pointer;overflow:hidden;color:#64748b}.profile-trigger img{display:block;width:100%;height:100%;object-fit:cover}.profile-fallback{font-size:21px;line-height:1}
.profile-popup{position:absolute;right:0;top:calc(100% + 14px);width:260px;max-width:calc(100vw - 30px);padding:14px;background:#fff;border:1px solid #e2ebf5;border-radius:18px;box-shadow:0 12px 30px #1e293b26;z-index:200}.profile-popup[hidden]{display:none!important}
.popup-user{display:flex;align-items:center;gap:11px;padding:5px 3px 15px;border-bottom:1px solid #edf2f7}.popup-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#edf4fb;flex-shrink:0}.popup-avatar-fallback{width:46px;height:46px;border-radius:50%;background:#edf4fb;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:25px;flex-shrink:0}.popup-name{font-weight:bold;color:#263548;overflow-wrap:anywhere}.popup-subtitle{font-size:12px;color:#94a3b8;margin-top:4px}
.topbar .popup-action{display:flex;align-items:center;gap:10px;width:100%;padding:12px 8px;border:0;background:transparent;text-decoration:none;text-align:left;color:#334155;font:inherit;font-size:13px;cursor:pointer;border-radius:9px}.popup-action:hover{background:#f1f7fd}.topbar .popup-action.logout{color:#dc2626}.topbar .popup-action.disabled{color:#94a3b8}.profile-popup form{margin:0}
.mobile-menu-button,.sidebar-close,.sidebar-overlay{display:none}
@media(max-width:1100px) and (min-width:701px){.sidebar{width:200px}.page{margin-left:200px}}
@media(max-width:700px){
 body{overflow-x:hidden}.page{margin-left:0;min-width:0}.topbar{height:60px;padding:0 14px;gap:12px;justify-content:space-between}
 .mobile-menu-button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:1px solid #dbe7f5;border-radius:10px;background:#fff;color:#2584e9;font-size:23px;cursor:pointer}
 .sidebar{width:min(290px,85vw);padding:22px 16px;z-index:310;transform:translateX(-105%);transition:transform .25s ease;box-shadow:8px 0 30px rgba(0,0,0,.08)}
 body.mobile-menu-open .sidebar{transform:translateX(0)}
 .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:300;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
 body.mobile-menu-open .sidebar-overlay{opacity:1;visibility:visible}body.mobile-menu-open{overflow:hidden}
 .sidebar-logo{padding:0 45px 22px 12px}.sidebar-logo img{max-width:165px}
 .sidebar-close{display:flex;position:absolute;right:14px;top:20px;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:9px;background:#eef5fd;color:#475569;font-size:24px;cursor:pointer}
 .menu-label,.nav-text,.sidebar-footer{display:block}.sidebar-nav > a,.sidebar-nav > .sidebar-parent{justify-content:flex-start;padding:12px 14px;gap:12px;font-size:14px}.sidebar-parent .arrow{display:block}.sidebar-submenu{padding:3px 0 9px 38px}.sidebar-nav .sidebar-submenu > a{padding:9px 12px;font-size:13px;text-align:left;overflow-wrap:normal}
 .member-nickname{max-width:100px}.profile-popup{right:0}
}

/* 아래는 새 통합 디자인 덮어쓰기 규칙 */
/* 쥐동아리 공통 사이드바 디자인 (2026-10-11) */
/* 모든 페이지의 기존 콘텐츠 스타일은 변경하지 않음 */
/* 홈 디자인: 상위/하위 메뉴 구분을 살린 가독성 개선 */
@media (min-width:1101px){
  .sidebar{width:286px!important;padding:24px 18px!important}
  .page{margin-left:286px!important}
  .sidebar-logo{padding:0 4px 26px!important;display:flex!important;align-items:center;justify-content:center;min-height:114px}
  .sidebar-logo img{width:100%!important;max-width:252px!important;height:auto!important;max-height:none!important}
  .menu-label{padding:2px 15px 14px!important;font-size:11px!important;letter-spacing:.12em!important;color:#8190a4!important}
  .sidebar-nav{gap:5px!important}
  .sidebar-nav > a,.sidebar-nav > .sidebar-parent{
    display:flex!important;align-items:center!important;gap:12px!important;
    padding:13px 14px!important;font-size:15px!important;font-weight:750!important;
    color:#263a55!important;border-radius:11px!important;line-height:1.45!important;
    background:transparent!important;
  }
  .sidebar-nav > a:hover,.sidebar-nav > a.active,
  .sidebar-nav > .sidebar-parent:hover{background:#eaf4ff!important;color:#1672ce!important}
  .sidebar-nav > a .nav-icon,.sidebar-nav > .sidebar-parent .nav-icon{width:24px!important;font-size:20px!important;flex:0 0 24px!important}
  .sidebar-nav > a .nav-icon img,.sidebar-nav > .sidebar-parent .nav-icon img{width:24px!important;height:24px!important}
  .sidebar-nav > .sidebar-parent .arrow{font-size:14px!important;color:#8190a4!important}
  .sidebar-nav > .sidebar-submenu{
    display:flex;flex-direction:column;gap:2px!important;
    margin:0 0 7px 25px!important;padding:3px 0 5px 17px!important;
    border-left:1px solid #e5edf7!important;
  }
  .sidebar-nav > .sidebar-submenu[hidden]{display:none!important}
  .sidebar-nav > .sidebar-submenu > a{
    display:block!important;width:100%!important;padding:9px 11px!important;
    font-size:13px!important;font-weight:500!important;line-height:1.45!important;
    color:#586c84!important;border-radius:8px!important;
    background:transparent!important;text-decoration:none!important;
  }
  .sidebar-nav > .sidebar-submenu > a:hover,
  .sidebar-nav > .sidebar-submenu > a.active{
    background:#edf5ff!important;color:#1672ce!important;
  }
  .sidebar-nav > .sidebar-submenu > a.active{font-weight:700!important}

}

@media (min-width:701px) and (max-width:1100px){
 .sidebar{width:220px!important;padding:22px 12px!important}
 .page{margin-left:220px!important}
 .sidebar-logo{padding:0 5px 22px!important;display:flex!important;justify-content:center!important}
 .sidebar-logo img{width:100%!important;max-width:196px!important;height:auto!important}
 .sidebar-nav > a,.sidebar-nav > .sidebar-parent{font-size:14px!important;color:#263a55!important;font-weight:750!important;padding:12px 11px!important}
 .sidebar-nav > .sidebar-submenu{margin-left:23px!important;padding-left:13px!important;border-left:1px solid #e5edf7!important}
 .sidebar-nav > .sidebar-submenu > a{font-size:13px!important;color:#536780!important;padding:9px 7px!important}
 .sidebar-nav > .sidebar-submenu > a.active{font-weight:700!important;color:#1672ce!important;background:#edf5ff!important}
}
@media (max-width:700px){
 /* 기존 모바일 슬라이드 메뉴를 그대로 사용하며 글자 가독성만 보강 */
 .sidebar-nav > a,.sidebar-nav > .sidebar-parent{color:#263a55!important}
 .sidebar-nav .sidebar-submenu > a{color:#536780!important}
 .sidebar-nav .sidebar-submenu > a.active{color:#1672ce!important;background:#edf5ff!important;font-weight:700!important}
}

/* PC/태블릿: 모바일 전용 사이드바 닫기 버튼 강제 숨김 */
@media (min-width:701px){
  .sidebar .sidebar-close,
  #sidebarClose,
  .sidebar-close {display:none!important;}
}