@charset "utf-8";

:root {
  --g:#00E5A0; --b:#3B8BFF;
  --grad:linear-gradient(135deg,#00E5A0,#00C8D4 50%,#3B8BFF);
  --d1:#060D1A; --d2:#0C1628; --d3:#111E35; --card:#0F1D32;
  --br:rgba(0,229,160,0.15); --tx:#E8F0FF; --mu:rgba(232,240,255,0.55);
}

/* ── 사이드바 박스 ── */
#nt_sidebar { top:0; width:300px; height:100%; position:fixed; z-index:1000; background:var(--d1); box-shadow:0 0 40px rgba(0,0,0,0.6); }
#nt_sidebar .sidebar-content { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
#nt_sidebar .sidebar-content::-webkit-scrollbar { width:4px; }
#nt_sidebar .sidebar-content::-webkit-scrollbar-track { background:var(--d2); }
#nt_sidebar .sidebar-content::-webkit-scrollbar-thumb { background:rgba(0,229,160,0.3); border-radius:4px; }

/* ── 헤더 ── */
#nt_sidebar_header { background:var(--d2); border-bottom:1px solid var(--br); padding:16px 20px; }
#nt_sidebar_header h3 { margin:0; font-size:1.1rem; font-weight:800; }
#nt_sidebar_header a { color:var(--g); text-decoration:none; font-family:'Outfit',sans-serif; }
#nt_sidebar_header .sidebar-close { color:var(--mu); transition:color .2s; }
#nt_sidebar_header .sidebar-close:hover { color:var(--g); }

/* ── 아이콘 그리드 ── */
.sidebar-icon { display:grid; grid-template-columns:repeat(4,1fr); background:var(--d2); border-bottom:1px solid var(--br); margin:0; padding:0; list-style:none; }
.sidebar-icon li { border-right:1px solid var(--br); }
.sidebar-icon li:last-child { border-right:none; }
.sidebar-icon li a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:14px 8px; color:var(--mu); text-decoration:none; font-size:0.72rem; transition:all .2s; }
.sidebar-icon li a:hover { background:rgba(0,229,160,0.07); color:var(--g); }
.sidebar-icon i { font-size:18px; }

/* ── 멤버 버튼 그룹 ── */
.bm-sb-btnrow { display:grid; gap:1px; background:var(--br); border-top:1px solid var(--br); border-bottom:1px solid var(--br); }
.bm-sb-btnrow.col3 { grid-template-columns:repeat(3,1fr); }
.bm-sb-btnrow.col2 { grid-template-columns:repeat(2,1fr); }
.bm-sb-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 8px; background:var(--d2); color:var(--mu); font-size:0.83rem; font-weight:600; text-decoration:none; transition:all .2s; border:none; cursor:pointer; font-family:'Noto Sans KR',sans-serif; position:relative; }
.bm-sb-btn:hover { background:rgba(0,229,160,0.08); color:var(--g); }
.bm-sb-btn.primary { background:var(--grad); color:#060D1A; font-weight:700; }
.bm-sb-btn.primary:hover { opacity:.88; color:#060D1A; }

/* ── 알림 배지 ── */
.nt-noti-label { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; background:var(--grad); border-radius:100px; padding:0 5px; }
.nt-noti-label .nt-noti-cnt { font-size:0.7rem; font-weight:700; color:#060D1A; }
.nt-noti-label.d-none { display:none !important; }

/* ── 섹션 공통 ── */
.sidebar-list { }
.sidebar-list h5 { padding:14px 20px; margin:0; font-weight:700; color:var(--tx); font-size:0.9rem; border-top:1px solid var(--br); background:var(--d2); display:flex; align-items:center; gap:8px; }
.sidebar-list h5 a { color:var(--mu); font-size:0.75rem; font-weight:500; margin-left:auto; text-decoration:none; }
.sidebar-list h5 a:hover { color:var(--g); }
.sidebar-list ul { list-style:none; padding:0; margin:0; background:var(--d1); }
.sidebar-list ul.off { display:none; }
.sidebar-list li { position:relative; border-bottom:1px solid rgba(255,255,255,.04); }
.sidebar-list li:last-child { border-bottom:none; }
.sidebar-list li a { display:block; padding:11px 20px; color:var(--mu); font-size:0.86rem; text-decoration:none; transition:all .2s; overflow:hidden; }
.sidebar-list li a:hover { background:rgba(0,229,160,.06); color:var(--g); padding-left:24px; }
.sidebar-list li.active > a { color:var(--g); font-weight:700; }
.sidebar-list .me-a { padding-right:2.5rem; }

/* ── 트리 토글 ── */
.sidebar-list .tree-toggle { position:absolute; z-index:1; top:0; right:0; width:2.5rem; padding:11px 0; text-align:center; cursor:pointer; color:var(--mu); transition:color .2s; }
.sidebar-list .tree-toggle:hover { color:var(--g); }

/* ── 서브메뉴 ── */
.sidebar-list .me-ul1 { background:var(--d2); }
.sidebar-list .me-ul2 { background:var(--d3); }
.sidebar-list .me-li1 .me-a1 { padding-left:2.2rem; }
.sidebar-list .me-li2 .me-a2 { padding-left:3.2rem; }
.sidebar-list .me-line1 .me-a1,
.sidebar-list .me-line2 .me-a2 { background:rgba(0,229,160,.05); color:var(--g); font-weight:700; font-size:0.75rem; letter-spacing:1px; }

/* ── 통계 영역 ── */
.bm-stats-list { padding:16px 20px; border-top:1px solid var(--br); }
.bm-stats-list ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.bm-stats-list li { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; color:var(--mu); }
.bm-stats-list li a { color:var(--mu); text-decoration:none; display:flex; justify-content:space-between; width:100%; }
.bm-stats-list li a:hover { color:var(--g); }
.bm-stats-val { color:var(--tx); font-weight:600; }

/* ── 로그인 폼 ── */
.bm-sb-login { padding:20px; border-bottom:1px solid var(--br); }
.bm-sb-login-switch { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:0.8rem; color:var(--mu); }
.bm-sb-login-switch input { accent-color:var(--g); }
.bm-sb-input-wrap { position:relative; margin-bottom:10px; }
.bm-sb-input-wrap i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--mu); font-size:0.85rem; }
.bm-sb-input { width:100%; padding:10px 12px 10px 34px; background:var(--d3); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:var(--tx); font-size:0.86rem; font-family:'Noto Sans KR',sans-serif; outline:none; transition:border-color .2s; }
.bm-sb-input:focus { border-color:rgba(0,229,160,.45); }
.bm-sb-input::placeholder { color:rgba(232,240,255,.25); }
.bm-sb-login-btn { width:100%; padding:11px; background:var(--grad); color:#060D1A; font-weight:700; font-size:0.9rem; border-radius:10px; border:none; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .3s; margin-top:4px; }
.bm-sb-login-btn:hover { opacity:.88; color:#fff; }
.bm-sb-social { padding:16px 20px 40px; }

/* ── 유저 프로필 ── */
.bm-sb-user { padding:20px; border-bottom:1px solid var(--br); }
.bm-sb-user-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bm-sb-avatar img { width:52px; height:52px; border-radius:50%; border:2px solid rgba(0,229,160,.35); object-fit:cover; }
.bm-sb-user-info { flex:1; }
.bm-sb-user-name { font-size:0.95rem; font-weight:700; color:var(--tx); margin-bottom:3px; }
.bm-sb-user-grade { font-size:0.78rem; color:var(--mu); display:flex; align-items:center; gap:6px; }
.bm-sb-user-grade a { color:var(--g); text-decoration:none; font-weight:600; }
.bm-sb-xp-row { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--mu); margin-bottom:5px; }
.bm-sb-xp-row a { color:var(--mu); text-decoration:none; }
.bm-sb-xp-row a:hover { color:var(--g); }
.bm-sb-progress { height:5px; background:var(--d3); border-radius:100px; overflow:hidden; }
.bm-sb-progress-bar { height:100%; background:var(--grad); border-radius:100px; transition:width .6s ease; }

/* ── 알림 목록 ── */
.bm-noti-item { display:flex; flex-direction:column; gap:3px; padding:11px 20px; border-bottom:1px solid rgba(255,255,255,.04); text-decoration:none; transition:background .2s; }
.bm-noti-item:hover { background:rgba(0,229,160,.06); }
.bm-noti-time { font-size:0.72rem; color:var(--mu); }
.bm-noti-msg { font-size:0.84rem; color:var(--tx); }
.bm-noti-subject { font-size:0.78rem; color:var(--mu); display:flex; align-items:center; gap:4px; }
.bm-noti-empty { padding:20px; text-align:center; font-size:0.84rem; color:var(--mu); }
.bm-noti-memo { display:flex; align-items:center; gap:8px; padding:11px 20px; text-decoration:none; color:var(--g); font-size:0.86rem; font-weight:600; border-bottom:1px solid var(--br); transition:background .2s; }
.bm-noti-memo:hover { background:rgba(0,229,160,.07); }

/* ── 마스크 ── */
#nt_sidebar_mask { display:none; position:fixed; z-index:499; background:rgba(0,0,0,0.75); left:0; top:0; width:100%; height:100%; backdrop-filter:blur(2px); }

/* ── 알림 탭 버튼 ── */
#nt_sidebar_noti { position:fixed; z-index:100; }
@media(min-width:768px) {
  #nt_sidebar { right:-300px; }
  #nt_sidebar_noti { top:40%; right:0; border-top-left-radius:50rem; border-bottom-left-radius:50rem; }
}
@media(max-width:767px) {
  #nt_sidebar { left:-300px; }
  #nt_sidebar_noti { left:0; bottom:25px; border-top-right-radius:50rem; border-bottom-right-radius:50rem; }
}

/* ── 상단/하단 이동 버튼 ── */
#nt_sidebar_move { display:none; position:fixed; width:40px; bottom:20px; right:25px; z-index:2; }
#nt_sidebar_move span { display:block; background:rgba(0,229,160,.15); border:1px solid rgba(0,229,160,.3); color:var(--g); margin:5px 0; text-align:center; border-radius:50%; width:42px; height:42px; line-height:42px; font-size:16px; transition:all .2s; }
#nt_sidebar_move span:hover { background:rgba(0,229,160,.3); }
#nt_sidebar_move .sidebar-move-bottom { display:none; }