@charset "utf-8";

/*
  컬러 팔레트 (레퍼런스 이미지 기반)
  --sb-bg-1   : #4A2E18  (메인 브라운)
  --sb-bg-2   : #3A2210  (딥 브라운)
  --sb-gold   : #C8956A  (구리/골드 포인트)
  --sb-gold-lt: #E8C090  (밝은 골드)
  --sb-text-1 : #F5EAD8  (크림 화이트 - 주 텍스트)
  --sb-text-2 : #C8A880  (웜 베이지 - 보조 텍스트)
  --sb-text-3 : #8A7060  (뮤트 브라운 - 서브 텍스트)
  --sb-line   : rgba(200,149,106,.2)  (구분선)
*/

/* ── 사이드바 전체 ───────────────────────────────────── */
#nt_sidebar {
	top: 0; width: 300px; height: 100%;
	position: fixed; z-index: 500;
	background: linear-gradient(160deg, #4A2E18 0%, #3A2210 60%, #2E1A0C 100%);
	box-shadow: -6px 0 32px rgba(0,0,0,.55);
	display: flex; flex-direction: column;
}
#nt_sidebar .sidebar-content {
	height: 100%; overflow-y: auto; overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
#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: rgba(200,149,106,.3); border-radius: 2px; }

/* ── 헤더 ────────────────────────────────────────────── */
#nt_sidebar_header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 16px; height: 54px;
	background: linear-gradient(90deg, #2E1A0C 0%, #3D2414 100%);
	border-bottom: 1px solid rgba(200,149,106,.25);
	flex-shrink: 0;
}
#nt_sidebar_header .sb-logo img { max-height: 32px; width: auto; filter: brightness(1.1); }
#nt_sidebar_header .sb-close {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 7px;
	background: rgba(200,149,106,.12);
	border: 1px solid rgba(200,149,106,.22);
	color: #C8A880; font-size: 13px;
	transition: all .15s; cursor: pointer; text-decoration: none;
}
#nt_sidebar_header .sb-close:hover { background: rgba(200,149,106,.28); color: #F5EAD8; }

/* ── 텔레그램 배너 ──────────────────────────────────── */
#nt_sidebar .side-telegram { padding: 12px 12px 0; }
#nt_sidebar .side-telegram a img { width: 100%; border-radius: 10px; display: block; }

/* ── 액션 버튼 바 ─────────────────────────────────── */
.sb-action-bar { display: flex; gap: 5px; padding: 10px 12px 0; }
.sb-action-bar .sb-btn {
	flex: 1; display: inline-flex; align-items: center; justify-content: center;
	gap: 5px; height: 38px; border-radius: 8px;
	font-size: .75rem; font-weight: 700; letter-spacing: .01em;
	text-decoration: none; border: none; cursor: pointer;
	transition: all .15s; white-space: nowrap; padding: 0 8px;
}
.sb-btn--primary {
	background: linear-gradient(135deg, #C8956A 0%, #8B5E3A 100%);
	color: #FFF5E8 !important;
	box-shadow: 0 2px 10px rgba(139,94,58,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
.sb-btn--primary:hover { background: linear-gradient(135deg, #DCA878 0%, #9B6E4A 100%); color: #fff !important; }
.sb-btn--ghost {
	background: rgba(200,149,106,.1);
	color: #C8A880 !important;
	border: 1px solid rgba(200,149,106,.22);
}
.sb-btn--ghost:hover { background: rgba(200,149,106,.22); color: #F5EAD8 !important; }
.sb-btn--danger {
	background: rgba(180,60,60,.14);
	color: #F0A0A0 !important;
	border: 1px solid rgba(180,60,60,.22);
}
.sb-btn--danger:hover { background: rgba(180,60,60,.25); color: #FFB8B8 !important; }

/* ── 로그인 폼 ──────────────────────────────────────── */
.sb-login-box {
	margin: 10px 12px 0;
	background: rgba(0,0,0,.2);
	border: 1px solid rgba(200,149,106,.2);
	border-radius: 10px; padding: 14px;
}
.sb-input-group { position: relative; margin-bottom: 8px; }
.sb-input-group i {
	position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	color: #7A6050; font-size: .8rem; pointer-events: none;
}
.sb-login-box input[type="text"],
.sb-login-box input[type="password"] {
	width: 100%; height: 40px; padding: 0 10px 0 32px;
	background: rgba(200,149,106,.08);
	border: 1px solid rgba(200,149,106,.22);
	border-radius: 8px; color: #F5EAD8;
	font-size: .82rem; box-sizing: border-box; outline: none;
	transition: border-color .15s, background .15s;
}
.sb-login-box input::placeholder { color: #6A5040; }
.sb-login-box input:focus { border-color: rgba(200,149,106,.6); background: rgba(200,149,106,.12); }
.sb-auto-login {
	display: flex; align-items: center; gap: 6px;
	margin-bottom: 10px; font-size: .74rem; color: #8A7060;
}
.sb-auto-login input[type="checkbox"] { accent-color: #C8956A; width: 13px; height: 13px; }
.sb-login-btn {
	width: 100%; height: 40px;
	background: linear-gradient(135deg, #C8956A 0%, #8B5E3A 100%);
	color: #FFF5E8; font-size: .84rem; font-weight: 700;
	border: none; border-radius: 8px; cursor: pointer;
	transition: all .15s;
	box-shadow: 0 2px 8px rgba(139,94,58,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.sb-login-btn:hover { background: linear-gradient(135deg, #DCA878 0%, #9B6E4A 100%); }

/* ── 회원 정보 박스 ──────────────────────────────────── */
.sb-user-box {
	margin: 10px 12px 0;
	background: rgba(0,0,0,.18);
	border: 1px solid rgba(200,149,106,.2);
	border-radius: 10px; padding: 14px;
}
.sb-user-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-user-avatar img {
	width: 48px; height: 48px; border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(200,149,106,.4);
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sb-user-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-size: .9rem; font-weight: 700; color: #F5EAD8; margin-bottom: 3px; }
.sb-lv-icon-wrap { display: inline-flex; align-items: center; line-height: 0; }
.sb-lv-icon-wrap .sb-mb-icon,
.sb-lv-icon-wrap .sb-lv-icon,
.sb-lv-icon-wrap img { max-height: 1.15rem; width: auto; height: auto; vertical-align: middle; }
.sb-user-grade { font-size: .72rem; color: #C8956A; font-weight: 600; }

/* 경험치 바 */
.sb-xp-wrap { margin-top: 8px; }
.sb-xp-meta { display: flex; justify-content: space-between; font-size: .68rem; color: #8A7060; margin-bottom: 4px; }
.sb-xp-meta a { color: #A08070; text-decoration: none; }
.sb-xp-bar { height: 5px; background: rgba(0,0,0,.25); border-radius: 3px; overflow: hidden; }
.sb-xp-fill { height: 100%; background: linear-gradient(90deg, #8B5E3A, #C8956A, #E8C090); border-radius: 3px; transition: width .4s ease; }

/* 통계 그리드 */
.sb-user-stats {
	display: flex; border-radius: 8px; overflow: hidden;
	border: 1px solid rgba(200,149,106,.18); margin-top: 10px;
}
.sb-user-stat { flex: 1; text-align: center; padding: 9px 4px; background: rgba(0,0,0,.15); border-right: 1px solid rgba(200,149,106,.1); }
.sb-user-stat:last-child { border-right: none; }
.sb-user-stat a { text-decoration: none; display: block; }
.sb-stat-label { font-size: .64rem; color: #B09080; letter-spacing: .02em; margin-bottom: 3px; }
.sb-stat-val { font-size: .84rem; font-weight: 700; color: #E8C890; }
.sb-stat-badge { display: inline-block; font-size: .62rem; font-weight: 700; color: #F08060; background: rgba(220,100,60,.18); border-radius: 8px; padding: 1px 5px; margin-left: 2px; }

/* 회원 메뉴 */
.sb-member-menu { margin: 8px 12px 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(200,149,106,.18); }
.sb-member-menu a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 14px; font-size: .81rem; color: #D4C0A8;
	text-decoration: none; border-bottom: 1px solid rgba(200,149,106,.1);
	background: rgba(0,0,0,.12); transition: background .15s, color .15s;
}
.sb-member-menu a:last-child { border-bottom: none; }
.sb-member-menu a:hover { background: rgba(200,149,106,.15); color: #F5EAD8; }
.sb-member-menu-left { display: flex; align-items: center; gap: 9px; }
.sb-member-menu-left i { color: #7A6050; font-size: .8rem; width: 14px; text-align: center; transition: color .15s; }
.sb-member-menu a:hover .sb-member-menu-left i { color: #C8956A; }

/* 입점 승인 회원 — 광고등록/광고수정만 메인 CTA 색(다른 메뉴와 확실히 구분) */
.sb-member-menu a.sb-member-menu-ad {
	background: linear-gradient(135deg, #C8956A 0%, #8B5E3A 55%, #6B4423 100%);
	color: #FFF8F0 !important;
	font-weight: 800;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	border-left: none;
	box-shadow:
		0 2px 12px rgba(139, 94, 58, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.sb-member-menu a.sb-member-menu-ad .sb-member-menu-left i {
	color: #FFF5E6;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.sb-member-menu a.sb-member-menu-ad > .fa-angle-right {
	color: rgba(255, 248, 240, 0.95) !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.sb-member-menu a.sb-member-menu-ad:hover {
	background: linear-gradient(135deg, #DCA878 0%, #A66E48 50%, #8B5E3A 100%);
	color: #fff !important;
	box-shadow:
		0 3px 16px rgba(200, 149, 106, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.sb-member-menu a.sb-member-menu-ad:hover .sb-member-menu-left i { color: #fff; }
.sb-member-menu a.sb-member-menu-ad:hover > .fa-angle-right { color: #fff !important; }

/* ── 사이드바 네비 메뉴 ────────────────────────────── */
#nt_sidebar .sidebar-list { padding: 6px 12px 24px; }
#nt_sidebar .border-top { border-top: 1px solid rgba(200,149,106,.2) !important; }
#nt_sidebar .sidebar-list ul { list-style: none; margin: 0; padding: 0; border: none !important; }
#nt_sidebar .sidebar-list ul.off { display: none; }

#nt_sidebar .sidebar-list h5 {
	padding: 14px 2px 8px; margin: 0;
	font-size: .62rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: #9A8070; border-top: none !important;
}

/* 대메뉴 li */
#nt_sidebar .sidebar-list .me-ul > .me-li {
	display: flex; flex-wrap: wrap; align-items: stretch;
	background: rgba(200,149,106,.07);
	border: 1px solid rgba(200,149,106,.14);
	border-radius: 8px; margin-bottom: 5px;
	overflow: hidden; transition: background .15s;
	box-shadow: 0 1px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
#nt_sidebar .sidebar-list .me-ul > .me-li:hover { background: rgba(200,149,106,.13); }

/* 텍스트 링크 */
#nt_sidebar .sidebar-list .me-ul > .me-li > .me-a {
	flex: 1; order: 1; min-width: 0;
	display: flex; align-items: center; gap: 9px;
	padding: 13px 14px; font-size: .86rem; font-weight: 600;
	color: #F0E4D0; text-decoration: none; transition: color .15s;
}
#nt_sidebar .sidebar-list .me-ul > .me-li > .me-a .fa-fw { color: #8A7060; font-size: .8rem; transition: color .15s; }
#nt_sidebar .sidebar-list .me-ul > .me-li:hover > .me-a { color: #fff; }
#nt_sidebar .sidebar-list .me-ul > .me-li:hover > .me-a .fa-fw { color: #C8956A; }

/* 드롭다운 토글 박스 */
#nt_sidebar .sidebar-list .me-ul > .me-li > .tree-toggle {
	order: 2; position: static; width: 46px; height: auto; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.2);
	border-left: 1px solid rgba(200,149,106,.18);
	color: #8A7060; font-size: .78rem; cursor: pointer;
	transition: background .15s, color .15s;
}
#nt_sidebar .sidebar-list .me-ul > .me-li > .tree-toggle:hover { background: rgba(200,149,106,.25); color: #E8C090; }

/* 서브메뉴 컨테이너 */
#nt_sidebar .sidebar-list .me-ul1 {
	width: 100%; order: 3;
	background: rgba(0,0,0,.22);
	border-top: 1px solid rgba(200,149,106,.12);
}
#nt_sidebar .sidebar-list .me-ul1 > .me-li1 {
	display: flex; flex-wrap: wrap; align-items: stretch;
	border-bottom: 1px solid rgba(200,149,106,.08);
}
#nt_sidebar .sidebar-list .me-ul1 > .me-li1:last-child { border-bottom: none; }
#nt_sidebar .sidebar-list .me-ul1 > .me-li1 > .me-a1 {
	flex: 1; order: 1;
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px 10px 28px; font-size: .8rem;
	color: #C8B8A0; text-decoration: none;
	transition: background .15s, color .15s;
}
#nt_sidebar .sidebar-list .me-ul1 > .me-li1 > .me-a1:hover { background: rgba(200,149,106,.1); color: #F5EAD8; }
#nt_sidebar .sidebar-list .me-ul1 > .me-li1 > .tree-toggle {
	order: 2; position: static; width: 38px; height: auto; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.12); border-left: 1px solid rgba(200,149,106,.1);
	color: #7A6050; font-size: .72rem; cursor: pointer;
	transition: background .15s, color .15s;
}
#nt_sidebar .sidebar-list .me-ul1 > .me-li1 > .tree-toggle:hover { background: rgba(200,149,106,.18); color: #E8C090; }

/* 서브메뉴 2단 */
#nt_sidebar .sidebar-list .me-ul2 { width: 100%; order: 3; background: rgba(0,0,0,.15); }
#nt_sidebar .sidebar-list .me-ul2 > .me-li2 > .me-a2 {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 14px 8px 44px; font-size: .77rem; color: #A09080;
	border-bottom: 1px solid rgba(200,149,106,.06);
	text-decoration: none; transition: background .15s, color .15s;
}
#nt_sidebar .sidebar-list .me-ul2 > .me-li2 > .me-a2:hover { background: rgba(200,149,106,.09); color: #E0D0B8; }

/* 활성 메뉴 */
#nt_sidebar .sidebar-list .me-li.active {
	background: rgba(200,149,106,.18) !important;
	border-color: rgba(200,149,106,.3) !important;
	box-shadow: 0 0 0 1px rgba(200,149,106,.15), 0 2px 8px rgba(0,0,0,.3) !important;
}
#nt_sidebar .sidebar-list .me-li.active > .me-a { color: #E8C090 !important; font-weight: 700; }
#nt_sidebar .sidebar-list .me-li.active > .tree-toggle { background: rgba(200,149,106,.25) !important; color: #E8C090 !important; }
#nt_sidebar .sidebar-list .me-li1.active > .me-a1 { color: #C8956A !important; font-weight: 700; }

/* ── 마스크 ──────────────────────────────────────────── */
#nt_sidebar_mask {
	display: none; position: fixed; z-index: 499;
	background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
	left: 0; top: 0; width: 100%; height: 100%;
	animation: sbMaskIn .2s ease;
}
@keyframes sbMaskIn { from { opacity:0; } to { opacity:1; } }

/* ── 알림 탭 ─────────────────────────────────────────── */
#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; }
}

/* ── 위치 + 트랜지션 ──────────────────────────────────── */
@media (min-width: 768px) {
	#nt_sidebar { right: -320px; transition: right .22s cubic-bezier(.25,.46,.45,.94); }
}
@media (max-width: 767px) {
	#nt_sidebar { width: 100vw; left: -100vw; transition: left .22s cubic-bezier(.25,.46,.45,.94); }
}

/* ── 맨 위로 버튼 ────────────────────────────────────── */
#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,.5); margin:5px 0; text-align:center; border-radius:50%; width:42px; height:42px; line-height:42px !important; font-size:19px; }

/* ── Back to Top ─────────────────────────────────────── */
.eb-backtotop { position:fixed; right:14px; bottom:14px; height:44px; width:44px; cursor:pointer; display:block; border-radius:50% !important; background:linear-gradient(135deg,#C8956A,#8B5E3A); z-index:1003; opacity:0; visibility:hidden; transform:translateY(15px); transition:all .2s linear; box-shadow:0 4px 14px rgba(139,94,58,.5); }
.eb-backtotop.active-progress { opacity:1; visibility:visible; transform:translateY(0); }
.eb-backtotop:after { position:absolute; content:"\f0d8"; font-family:"FontAwesome"; text-align:center; font-size:16px; color:#fff; left:0; top:0; height:44px; width:44px; line-height:28px; cursor:pointer; display:block; z-index:1; }
.eb-backtotop svg path { fill:none; }
.eb-backtotop svg.backtotop-progress path { stroke:rgba(255,255,255,.25); stroke-width:4; }
.eb-backtotop .progress-count { display:block; position:absolute; bottom:6px; left:0; right:0; font-size:10px; text-align:center; color:rgba(255,255,255,.75) !important; }