@charset "utf-8";

:root {
	--sb-bg:        #1c1c1e;
	--sb-bg-head:   #111113;
	--sb-bg-sub:    #1c1c1e;
	--sb-bg-hover:  rgba(255,255,255,0.06);
	--sb-border:    rgba(255,255,255,0.08);
	--sb-text:      #e8e8ea;
	--sb-muted:     #888894;
	--sb-icon:      #888894;
	--sb-accent:    #4a90d9;
	--sb-left-line: rgb(71 183 249);
}

/* ── 컨테이너: width/right/left 원본값 절대 유지 ── */
#nt_sidebar { top:0; width:280px; height:100%; position:fixed; z-index:500; box-shadow:0 0 30px rgba(0,0,0,0.8); }
#nt_sidebar.bg-light { background-color:var(--sb-bg) !important; }
#nt_sidebar .sidebar-content { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; background:var(--sb-bg); }
#nt_sidebar .sidebar-content::-webkit-scrollbar { width:3px; }
#nt_sidebar .sidebar-content::-webkit-scrollbar-track { background:transparent; }
#nt_sidebar .sidebar-content::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }
@media (min-width:768px) { #nt_sidebar { right:-300px; } }
@media (max-width:767px) { #nt_sidebar { left:-300px; } }

/* ── 헤더 ── */
#nt_sidebar_header.bg-primary { background:var(--sb-bg-head) !important; border-bottom:1px solid var(--sb-border); padding:0 16px !important; }
#nt_sidebar_header h3 { display:flex !important; align-items:center; justify-content:space-between; height:52px; margin:0; }
#nt_sidebar_header h3 > a.text-white { color:#fff !important; font-size:17px; font-weight:700; flex:1; }
#nt_sidebar_header .sidebar-close { display:inline-flex !important; align-items:center; justify-content:center; float:none !important; width:34px; height:34px; background:#2a2a2e; border-radius:8px; border:1px solid var(--sb-border); transition:background 0.15s; }
#nt_sidebar_header .sidebar-close i { font-size:14px; color:#aaa !important; }
#nt_sidebar_header .sidebar-close:hover { background:#3a3a3e; }

/* ── 아이콘 바 ── */
#nt_sidebar .sidebar-icon.bg-white,
#nt_sidebar .sidebar-icon { background:var(--sb-bg-head) !important; border-bottom:1px solid var(--sb-border) !important; margin-right:0 !important; }
#nt_sidebar .sidebar-icon li { border-color:var(--sb-border) !important; }
#nt_sidebar .sidebar-icon li a { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 4px !important; color:var(--sb-text) !important; transition:background 0.15s; }
#nt_sidebar .sidebar-icon li a:hover { background:var(--sb-bg-hover) !important; }
#nt_sidebar .sidebar-icon li a i { font-size:18px !important; line-height:1 !important; color:var(--sb-text) !important; }
#nt_sidebar .sidebar-icon li a span.d-block { font-size:10px !important; color:var(--sb-muted) !important; }

/* ── 버튼 (비로그인): 테일윈드 참고사이트 스타일 ── */
.sb-guest-wrap { padding:14px; background:var(--sb-bg-head); border-bottom:1px solid var(--sb-border); display:flex; flex-direction:column; gap:8px; }

/* 로그인: solid 파란 버튼, rounded-lg */
.sb-btn-login { display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 16px !important; font-size:14px !important; font-weight:600 !important; border-radius:8px !important; background:var(--sb-accent) !important; border:none !important; color:#fff !important; transition:opacity 0.15s; text-decoration:none; }
.sb-btn-login:hover { opacity:0.88; color:#fff !important; text-decoration:none; }

/* 회원가입: 테두리 버튼, rounded-lg */
.sb-btn-register { display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 16px !important; font-size:14px !important; font-weight:500 !important; border-radius:8px !important; background:transparent !important; border:1px solid var(--sb-border) !important; color:var(--sb-text) !important; transition:background 0.15s; text-decoration:none; }
.sb-btn-register:hover { background:var(--sb-bg-hover) !important; color:var(--sb-text) !important; text-decoration:none; }

/* ── 버튼 (로그인) ── */
#nt_sidebar .btn-group.w-100 { background:var(--sb-bg-head); border-bottom:1px solid var(--sb-border); }
#nt_sidebar .btn-group .btn-primary { background:var(--sb-bg-head) !important; border-color:var(--sb-border) !important; color:var(--sb-text) !important; padding:13px 6px !important; font-size:14px !important; border-radius:0 !important; transition:background 0.15s; }
#nt_sidebar .btn-group .btn-primary:hover { background:var(--sb-bg-hover) !important; color:#fff !important; }
b.nt-noti-cnt { font-size:10px; background:#e53e3e; color:#fff; padding:1px 5px; border-radius:20px; }

/* ── 메뉴 타이틀 ── */
.sidebar-list h5 { padding:14px 16px 12px !important; margin:0 !important; font-size:13px !important; font-weight:700 !important; color:var(--sb-text) !important; background:var(--sb-bg); border-top:none !important; border-bottom:1px solid var(--sb-border); letter-spacing:0.05em; text-transform:uppercase; }

/* ── 메뉴 공통 ── */
.sidebar-list ul.off { display:none; }
.sidebar-list li { position:relative; }

/* ── 1depth: 참고 사이트처럼 rounded-lg 항목 ── */
.sidebar-list .me-ul { background:var(--sb-bg); padding:6px 8px; }

.sidebar-list .me-a {
	display:flex !important;
	align-items:center;
	gap:12px;
	padding:10px 38px 10px 12px !important;
	font-size:14px;
	font-weight:500;
	border-bottom:none !important;
	border-radius:8px;
	background:transparent;
	color:var(--sb-text) !important;
	transition:background 0.15s;
	text-decoration:none;
	overflow:visible !important;
	margin-bottom:2px;
}
.sidebar-list .me-a:hover { background:var(--sb-bg-hover) !important; color:#fff !important; text-decoration:none; }

/* 1depth 아이콘: h-4 w-4 (16px) */
.sidebar-list .me-a .fa-fw { width:16px; height:16px; font-size:15px; color:var(--sb-icon) !important; flex-shrink:0; text-align:center; display:inline-block !important; }

/* 섹션 구분선: 1depth 항목들 사이 */
.sidebar-list .me-li + .me-li { border-top:none; }
.sidebar-list .me-li { margin-bottom:1px; }

/* tree-toggle: li 기준 absolute이지만 me-a 행 높이(38px) 안에만 위치시킴
   서브메뉴 열려도 me-a 오른쪽 끝에 고정되도록 top을 19px(행높이 절반)로 고정 */
.sidebar-list .tree-toggle { position:absolute !important; top:19px; right:10px; transform:translateY(-50%); margin:0 !important; width:auto !important; padding:6px !important; font-size:11px; color:var(--sb-muted); cursor:pointer; z-index:1; transition:transform 0.2s ease, color 0.15s; }
.sidebar-list .tree-toggle:hover { color:var(--sb-text); }

/* 화살표 회전
   원본 widget.js: ul.tree에 jQuery가 style="display: block" 인라인 세팅
   → :has() + 속성선택자로 CSS만으로 감지 (widget.js 수정 없음)
   → :has() 미지원 브라우저는 active 클래스 기반 fallback */
.sidebar-list li:has(> .me-ul1[style*="block"]) > .tree-toggle,
.sidebar-list li:has(> .me-ul2[style*="block"]) > .tree-toggle { transform:translateY(-50%) rotate(90deg) !important; color:var(--sb-text); }
.sidebar-list .me-li.active > .tree-toggle { transform:translateY(-50%) rotate(180deg); color:var(--sb-text); }
.sidebar-list .me-li1.active > .tree-toggle { transform:translateY(-50%) rotate(180deg); color:var(--sb-text); }

/* 1depth active */
.sidebar-list .me-li.active > .me-a { background:var(--sb-bg-hover); color:#fff !important; font-weight:600; }
.sidebar-list .me-li.active > .me-a .fa-fw { color:var(--sb-accent) !important; }

/* ── 2depth: border-l-2 왼쪽 세로선 + 들여쓰기 ── */
.sidebar-list .me-ul1 { background:transparent; padding:4px 8px 4px 20px; margin-left:8px; border-left:2px solid var(--sb-left-line); }

.sidebar-list .me-a1 {
	display:flex !important;
	align-items:center;
	gap:10px;
	padding:2px 6px !important;
	font-size:13px;
	font-weight:400;
	border-bottom:none !important;
	border-radius:8px;
	background:transparent;
	color:var(--sb-muted) !important;
	transition:background 0.15s, color 0.15s;
	text-decoration:none;
	overflow:visible !important;
	margin-bottom:1px;
}
.sidebar-list .me-a1:hover { background:var(--sb-bg-hover) !important; color:var(--sb-text) !important; text-decoration:none; }

/* 2depth 아이콘: h-3.5 w-3.5 (14px) */
.sidebar-list .me-a1 .fa-fw { width:14px; height:14px; font-size:13px; color:var(--sb-icon) !important; flex-shrink:0; text-align:center; display:inline-block !important; }

.sidebar-list .me-li1.active > .me-a1 { color:var(--sb-text) !important; font-weight:500; }
.sidebar-list .me-line1 .me-a1 { color:#444 !important; font-size:11px; padding-left:12px !important; border-radius:0; }

/* ── 3depth ── */
.sidebar-list .me-ul2 { background:transparent; padding:2px 8px 2px 16px; margin-left:8px; border-left:2px solid rgba(255,255,255,0.06); }

.sidebar-list .me-a2 {
	display:flex !important;
	align-items:center;
	gap:8px;
	padding:7px 12px !important;
	font-size:12px;
	border-bottom:none !important;
	border-radius:6px;
	background:transparent;
	color:#555 !important;
	transition:background 0.15s, color 0.15s;
	text-decoration:none;
	overflow:visible !important;
}
.sidebar-list .me-a2:hover { background:var(--sb-bg-hover) !important; color:var(--sb-muted) !important; text-decoration:none; }
.sidebar-list .me-a2 .fa-fw { width:12px; font-size:12px; color:#555 !important; flex-shrink:0; display:inline-block !important; text-align:center; }
.sidebar-list .me-li2.active > .me-a2 { color:var(--sb-text) !important; }
.sidebar-list .me-line2 .me-a2 { padding-left:12px !important; }

/* ── 로그인 폼 ── */
#sidebar-login .p-3.bg-white,
#sidebar-login .p-3 { background:var(--sb-bg-head) !important; border-bottom:1px solid var(--sb-border) !important; }
#sidebar-login .input-group-text { background:#252528 !important; border-color:var(--sb-border) !important; color:var(--sb-muted) !important; }
#sidebar-login .form-control { background:#252528 !important; border-color:var(--sb-border) !important; color:var(--sb-text) !important; }
#sidebar-login .form-control::placeholder { color:#444; }
#sidebar-login .form-control:focus { border-color:var(--sb-accent) !important; box-shadow:none !important; }
#sidebar-login .custom-control-label { color:var(--sb-muted) !important; }
#sidebar-login .btn-primary { background:var(--sb-accent) !important; border-color:var(--sb-accent) !important; border-radius:8px !important; font-weight:600 !important; }

/* ── 유저 패널 ── */
#sidebar-user .p-3 { background:var(--sb-bg-head) !important; border-bottom:1px solid var(--sb-border) !important; }
#sidebar-user h5, #sidebar-user h5 b, #sidebar-user p { color:var(--sb-text) !important; }
#sidebar-user a { color:var(--sb-text) !important; }
#sidebar-user .progress { background:#252528 !important; }
#sidebar-user .progress-bar { background:var(--sb-accent) !important; }
#sidebar-user .sidebar-list li a { background:transparent; color:var(--sb-text) !important; display:flex; justify-content:space-between; padding:10px 12px; border-radius:8px; border-bottom:none; }
#sidebar-user .sidebar-list li a:hover { background:var(--sb-bg-hover) !important; }

/* ── 마스크 / 알림 / 이동 ── */
#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%; }
#nt_sidebar_noti { position:fixed; z-index:100; }
@media (min-width:768px) { #nt_sidebar_noti { top:40%; right:0; border-top-left-radius:50rem !important; border-bottom-left-radius:50rem !important; } }
@media (max-width:767px) { #nt_sidebar_noti { left:0; bottom:25px; border-top-right-radius:50rem !important; border-bottom-right-radius:50rem !important; } }
#nt_sidebar_move { display:none; position:fixed; width:40px; bottom:20px; right:25px; z-index:2; }
#nt_sidebar_move span { display:block; color:#fff; background:rgba(0,0,0,0.5); margin:5px 0; text-align:center; border-radius:50%; width:42px; height:42px; line-height:42px !important; font-size:19px; }
#nt_sidebar_move .sidebar-move-bottom { display:none; }