@charset "utf-8";

/********************************************************
 Modern UI Design
 - Primary: #3182f6 (Blue)
 - BG: #f2f4f6
 - Card: #ffffff
 - Text: #191f28, #4e5968, #8b95a1, #b0b8c1
 - Radius: 16px card, 12px button, 8px input
 - Shadow: 0 2px 8px rgba(0,0,0,0.04)
 - Font: -apple-system, Pretendard, sans-serif
********************************************************/

/* ===== Base Background (PSD: content area #f7f8fa) ===== */
body {
	background-color: #f7f8fa !important;
}

/* ===== Base Font ===== */
#sbc_sidebar,
#sbc_right_sidebar,
.sbc-topbar {
	font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.3px;
}

/* ============================================================
   Top Navigation Bar (PSD 디자인 - 107px height)
   ============================================================ */
.sbc-topbar {
	background: #fff;
	border-bottom: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
	position: sticky;
	top: 0;
	z-index: 100;
}

.sbc-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
	padding: 0 16px;
}

/* 데스크톱: #nt_body와 동일한 margin + padding으로 콘텐츠 라인 정렬 */
@media (min-width: 769px) {
	.sbc-topbar-inner {
		margin-left: 320px;  /* 좌측 사이드바 너비 */
		margin-right: 360px; /* 우측 사이드바 너비 = .sbc-site-main margin-right */
		padding: 0 max(20px, calc((100vw - 680px - 1000px) / 2));
	}
}

.sbc-topbar-left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.sbc-topbar-logo {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	flex-shrink: 0;
}

.sbc-topbar-logo-icon {
	font-size: 22px;
	line-height: 1;
}

.sbc-topbar-logo-text {
	font-size: 18px;
	font-weight: 800;
	color: #191f28;
	letter-spacing: -0.8px;
}

.sbc-topbar-nav {
	display: flex;
	align-items: stretch;
	gap: 0;
	height: 100%;
	width: 260px;
	flex-shrink: 0;
}

.sbc-topbar-menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 4px;
	padding: 4px 0;
	text-decoration: none !important;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #333;
	letter-spacing: -0.3px;
	transition: color 0.15s;
	white-space: nowrap;
	position: relative;
	height: 100%;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
}

.sbc-topbar-menu-item:hover {
	color: #577bdd; /* PSD exact active color */
}

.sbc-topbar-menu-item.active {
	color: #577bdd; /* PSD exact */
	border-bottom-color: #577bdd;
}

.sbc-topbar-menu-icon-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.sbc-topbar-menu-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

/* 하단 파란 인디케이터 바 - active menu item의 border-bottom으로 대체 */
.sbc-topbar-indicator {
	display: none;
}

.sbc-topbar-center {
	flex: 1;
	min-width: 0;
}

.sbc-topbar-search-form {
	width: 100%;
	max-width: 240px;
}

.sbc-topbar-search-box {
	display: flex;
	align-items: center;
	background: #f5f7fa;
	border-radius: 8px;
	padding: 0 4px 0 12px;
	border: 1.5px solid transparent;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sbc-topbar-search-box:focus-within {
	background: #fff;
	border-color: #3182f6;
	box-shadow: 0 0 0 3px rgba(49,130,246,0.12);
}

.sbc-topbar-search-box input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 6px 0;
	font-family: 'Pretendard', sans-serif;
	font-size: 13px;
	color: #191f28;
	outline: none;
	min-width: 0;
	height: 38px;
	box-sizing: border-box;
}

.sbc-topbar-search-box input::placeholder {
	color: #989ea6;
	font-family: 'Pretendard', sans-serif;
	font-size: 13px;
}

.sbc-topbar-search-box button {
	border: none;
	background: transparent;
	color: #8b95a1;
	font-size: 13px;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 6px;
	transition: all 0.15s;
}

.sbc-topbar-search-box button:hover {
	color: #3182f6;
	background: rgba(49,130,246,0.08);
}

.sbc-topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.sbc-topbar-user {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	padding: 4px 10px 4px 4px;
	border-radius: 10px;
	transition: all 0.15s;
}

.sbc-topbar-user:hover {
	background: #f2f4f6;
}

.sbc-topbar-user-avatar {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: #3182f6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
}

.sbc-topbar-user-name {
	font-size: 13px;
	font-weight: 600;
	color: #191f28;
}

.sbc-topbar-icon-btn {
	width: 36px;
	height: 36px;
	border: none;
	outline: none;
	background: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8b97a8;
	text-decoration: none !important;
	transition: color 0.15s;
	position: relative;
	font-size: 17px;
	cursor: pointer;
	padding: 0;
}

.sbc-topbar-icon-btn:hover {
	color: #3182f6;
}

.sbc-topbar-noti-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #f04452;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 8px;
	min-width: 16px;
	text-align: center;
	line-height: 1.5;
}

/* ---- 프로필 카드 액션 바 (알림/쪽지/내정보) ---- */
/* ---- 헤더 우측 아이콘 그룹 (알림/쪽지/내정보) ---- */
.sbc-user-header-icons {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	margin-left: auto;
	background: #f4f6f8;
	border-radius: 10px;
	padding: 0;
	position: relative;
	top: 2px;
}
.sbc-hicon-divider {
	width: 1px;
	height: 18px;
	background: #d5dae0;
	flex-shrink: 0;
}

.sbc-user-hicon {
	width: 34px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #b0b8c4;
	font-size: 14px;
	text-decoration: none !important;
	transition: all 0.15s;
	position: relative;
}

.sbc-user-hicon:hover {
	background: #edf0f4;
	color: #64748b;
}

.sbc-user-hicon--noti {
	font-size: 17px;
	color: #8b97a8;
	background: none;
	border-radius: 0;
	position: relative;
}
.sbc-user-hicon--memo {
	font-size: 15px;
	color: #8b97a8;
	background: none;
	border-radius: 0;
	position: relative;
}
.sbc-user-hicon--noti .fa-bell {
	display: inline-block;
	transform: rotate(-15deg);
	transform-origin: center center;
}
.sbc-noti-dot,
.sbc-memo-dot {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3b82f6;
	border: 1.5px solid #f4f6f8;
	pointer-events: none;
}
.sbc-user-hicon--noti:hover,
.sbc-user-hicon--memo:hover {
	color: #475569;
	background: #e5e7eb;
	border-radius: 8px;
}
.sbc-user-hicon--noti:active,
.sbc-user-hicon--noti:focus,
.sbc-user-hicon--memo:active,
.sbc-user-hicon--memo:focus {
	color: #8b97a8;
	outline: none;
}
.sbc-user-hicon--noti:hover .sbc-noti-dot {
	border-color: #e5e7eb;
}

.sbc-user-hicon-badge {
	position: absolute;
	top: 1px;
	right: 0px;
	background: #f04452;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	padding: 0 3px;
	border-radius: 6px;
	min-width: 12px;
	text-align: center;
	line-height: 1.5;
	box-shadow: 0 1px 3px rgba(240,68,82,0.4);
}

.sbc-user-hicon-wrap {
	position: relative;
}

/* ---- 내정보 드롭다운 메뉴 ---- */
.sbc-myinfo-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: -6px;
	min-width: 180px;
	background: #fff;
	border: 1px solid #e5e8eb;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.06);
	z-index: 1000;
	padding: 6px 0;
	opacity: 0;
	transform: translateY(-6px);
}

.sbc-myinfo-menu.open {
	display: block;
	animation: bcMyInfoIn 0.18s ease forwards;
}

@keyframes bcMyInfoIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 말풍선 꼬리 */
.sbc-myinfo-menu::after {
	content: '';
	position: absolute;
	top: -6px;
	right: 16px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid #e5e8eb;
	border-top: 1px solid #e5e8eb;
	transform: rotate(45deg);
}

.sbc-myinfo-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #333d4b;
	text-decoration: none !important;
	transition: background 0.12s;
}

.sbc-myinfo-item:hover {
	background: #f7f8fa;
	color: #333d4b;
}

.sbc-myinfo-item i {
	font-size: 14px;
	color: #8b95a1;
	width: 18px;
	text-align: center;
	flex-shrink: 0;
}

.sbc-myinfo-badge {
	margin-left: auto;
	background: #f04452;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 8px;
	min-width: 18px;
	text-align: center;
	line-height: 1.5;
}

.sbc-myinfo-divider {
	height: 1px;
	background: #f2f4f6;
	margin: 4px 0;
}

.sbc-myinfo-logout {
	color: #f04452;
}

.sbc-myinfo-logout:hover {
	background: #fff5f6;
	color: #f04452;
}

.sbc-myinfo-logout i {
	color: #f04452;
}

/* ============================================================
   Left Sidebar Event Banner (PSD 디자인 매칭)
   ============================================================ */
.sbc-event-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #3182f6;
	color: #fff !important;
	padding: 14px 18px;
	border-radius: 12px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.3px;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(49,130,246,0.3);
}

.sbc-event-banner:hover {
	background: #1b64da;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(49,130,246,0.4);
}

.sbc-event-banner-text {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sbc-event-banner-arrow {
	font-size: 16px;
	opacity: 0.8;
	transition: transform 0.15s;
}

.sbc-event-banner:hover .sbc-event-banner-arrow {
	transform: translateX(2px);
}

/* ============================================================
   Right Sidebar Header (PSD 디자인 매칭)
   ============================================================ */
.sbc-right-header {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 20px 20px 0;
	margin-bottom: 0;
}

.sbc-right-header-icon {
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
}

.sbc-right-header-text {
	font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	letter-spacing: -0.3px;
	line-height: 1.2;
}

.sbc-right-header-text .sbc-header-blue {
	color: #2563EB;
}

/* ===== Layout Structure ===== */
.sbc-site-main {
	transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
	.sbc-site-main {
		margin-left: 320px; /* sidebar 320px */
		margin-right: 360px; /* PSD exact: sidebar 360px, content ends at x=1559 */
	}
}

/* ===== Left Sidebar ===== */
#sbc_sidebar {
	position: fixed;
	left: 0;
	top: 0;
	width: 320px;
	min-width: 320px;
	flex: 0 0 320px;
	box-sizing: border-box;
	height: 100vh;
	background: #fff;
	z-index: 400;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	border-right: none;
	box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

/* ===== Sidebar Header (Logo) ===== */
.sbc-sidebar-header {
	padding: 14px 14px 14px;
	margin-bottom: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid rgba(236,239,243,0.6);
}

.sbc-sidebar-header a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	flex: 1;
	min-width: 0;
}

.sbc-sidebar-header .sbc-logo-img {
	max-height: 48px;
	max-width: 200px;
}

.sbc-sidebar-header .sbc-logo-text {
	color: #191f28;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.8px;
}

/* ===== Sidebar Banner ===== */
.sbc-sidebar-banner {
	padding: 0 14px 14px;
	flex-shrink: 0;
	margin-bottom: 0;
	background: #fff;
	border-bottom: 1px solid rgba(236,239,243,0.7);
}

.sbc-sidebar-banner a {
	display: block;
}

.sbc-sidebar-banner img {
	width: 100%;
	height: auto;
	max-height: 65px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ===== Sidebar Body (scrollable) ===== */
.sbc-sidebar-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 14px 8px;
}

.sbc-sidebar-body::-webkit-scrollbar {
	width: 0;
}

/* ===== Menu Section ===== */
.sbc-menu-section {
	background: #fff;
	border-radius: 0;
	margin-bottom: 0;
	margin-top: 0;
	box-shadow: none;
	overflow: visible;
	border: none;
	padding: 14px 0 4px;
	border-bottom: 1px solid #ECEFF3;
}

.sbc-menu-section:first-child {
	padding-top: 12px;
}

.sbc-menu-section:last-child {
	border-bottom: none;
}

/* Section Header */
.sbc-section-header {
	display: flex;
	align-items: center;
	padding: 2px 6px 6px 6px;
	cursor: default;
}

.sbc-section-header .sbc-sh-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	font-size: 15px;
	color: #8b95a1;
	background: none;
	border-radius: 0;
	flex-shrink: 0;
}

.sbc-section-header .sbc-sh-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sbc-sh-icon.sbc-icon-badge {
	width: 22px;
	height: 22px;
	border-radius: 0;
	background: none;
	color: #8b95a1;
	font-size: 14px;
	font-weight: 700;
}

.sbc-section-header .sbc-sh-text {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #1E293B;
	letter-spacing: -0.3px;
	line-height: 22px;
	text-transform: uppercase;
}

/* Sub Menu Items */
.sbc-sub-list {
	list-style: none;
	margin: 0;
	padding: 0 0 2px;
}

.sbc-sub-list li {
	position: relative;
}

.sbc-sub-list li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 8px 9px 38px;
	color: #4B5563;
	text-decoration: none !important;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -0.3px;
	transition: all 0.15s ease;
	position: relative;
	border-radius: 8px;
	line-height: 22px;
}

.sbc-sub-list li a:hover {
	background: #EEF2F7;
	color: #1E293B;
}

/* Sub item dot icon */
.sbc-sub-list li a .sbc-dot {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b0b8c1;
	font-size: 12px;
}

.sbc-sub-list li a .sbc-dot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Right chevron */
.sbc-sub-list li a .sbc-chevron {
	margin-left: auto;
	color: #d1d6db;
	font-size: 12px;
	flex-shrink: 0;
	transition: transform 0.15s;
}

.sbc-sub-list li a:hover .sbc-chevron {
	transform: translateX(2px);
	color: #8b95a1;
}

/* Single menu (no sub) */
.sbc-menu-single {
	padding-bottom: 0;
}

.sbc-single-link {
	text-decoration: none !important;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 16px;
}

.sbc-single-link:hover {
	background: #f2f4f6;
}

/* Sub list separator line */
.sbc-sub-line {
	padding: 3px 5px 3px 42px;
}

.sbc-sub-line span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #b0b8c1;
	border-bottom: 1px solid #f2f4f6;
	padding-bottom: 3px;
}

/* Depth 2 sub list */
.sbc-sub-list-depth2 {
	padding: 0 0 3px;
}

.sbc-sub-list-depth2 li a {
	padding-left: 58px !important;
	font-size: 13px !important;
	color: #8b95a1;
}

/* Active sub item */
.sbc-sub-list li.active > a {
	color: #1a2332;
	font-weight: 600;
	background: #E0E6ED;
	border-radius: 8px;
}

.sbc-sub-list li.active > a .sbc-dot {
	color: #4e5968;
}

/* ===== Highlighted Section ===== */
.sbc-menu-highlight {
	background: #F7F8FA;
	border-radius: 10px;
	margin-top: 8px;
	margin-bottom: 0;
	box-shadow: none;
	border: none;
}

/* PSD: only 3px gap between consecutive highlights */
.sbc-menu-highlight + .sbc-menu-highlight {
	margin-top: 3px;
}

/* 먹튀정보 및 신고 - 고객센터와 동일 배경 */
.sbc-menu-highlight.sbc-hl-danger {
	background: #F7F8FA;
}

.sbc-menu-highlight.sbc-hl-danger .sbc-hl-text {
	color: #333333;
}

.sbc-menu-highlight.sbc-hl-danger .sbc-hl-icon {
	color: #8b95a1;
}

.sbc-menu-highlight.sbc-hl-danger .sbc-highlight-link:hover {
	background: rgba(221,68,68,0.04);
}

.sbc-menu-highlight.sbc-hl-danger .sbc-highlight-link:hover .sbc-hl-icon {
	animation: bcShake 0.4s ease;
	color: #e05555;
}

.sbc-menu-highlight.sbc-hl-danger .sbc-highlight-link:hover .sbc-hl-icon img {
	filter: drop-shadow(0 0 3px rgba(224,85,85,0.4));
}

@keyframes bcShake {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(-12deg); }
	40% { transform: rotate(10deg); }
	60% { transform: rotate(-6deg); }
	80% { transform: rotate(4deg); }
}

.sbc-menu-highlight .sbc-highlight-link {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	text-decoration: none !important;
	transition: all 0.15s ease;
	border-radius: 10px;
}

.sbc-menu-highlight .sbc-highlight-link:hover {
	background: rgba(0,0,0,0.03);
}

.sbc-menu-highlight .sbc-hl-icon {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	font-size: 17px;
	color: #8b95a1;
	background: none;
	border-radius: 0;
	flex-shrink: 0;
}

.sbc-menu-highlight .sbc-hl-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sbc-menu-highlight .sbc-hl-text {
	font-size: 15px;
	font-weight: 600;
	color: #4e5968;
	letter-spacing: -0.3px;
	line-height: 20px;
}

.sbc-menu-highlight .sbc-hl-chevron {
	margin-left: auto;
	color: #b0b8c1;
	font-size: 14px;
}

/* ===== Bottom section ===== */
.sbc-menu-bottom {
	border-top: none;
}

.sbc-menu-bottom .sbc-section-header {
	padding-bottom: 10px;
}

/* ===== Sidebar Footer ===== */
.sbc-sidebar-footer {
	padding: 10px 16px;
	flex-shrink: 0;
	background: #fff;
	border-top: 1px solid #e5e8eb;
}

.sbc-sidebar-footer .sbc-stats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbc-sidebar-footer .sbc-stats li {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	font-size: 12px;
	color: #8b95a1;
}

.sbc-sidebar-footer .sbc-stats li span:last-child {
	color: #4e5968;
	font-weight: 600;
}

/* ===== Tablet/Small Desktop: 우측 사이드바 숨김 ===== */
@media (max-width: 1400px) {
	#sbc_right_sidebar {
		transform: translateX(100%);
		z-index: 1100;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	#sbc_right_sidebar.open {
		transform: translateX(0);
	}
	.sbc-site-main {
		margin-right: 0 !important;
	}
	.sbc-topbar-inner {
		margin-right: 0 !important;
		padding: 0 max(20px, calc((100vw - 320px - 1000px) / 2));
	}
}

/* ===== 하단 탭바 네비게이션 ===== */
.sbc-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 56px;
	background: #fff;
	border-top: 1px solid #e5e8eb;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
	z-index: 1050;
	padding-bottom: env(safe-area-inset-bottom);
}

.sbc-bottom-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
	max-width: 480px;
	margin: 0 auto;
}

.sbc-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 1;
	height: 100%;
	text-decoration: none !important;
	color: #8b95a1;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.3px;
	transition: color 0.15s;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sbc-bottom-nav-item i {
	font-size: 20px;
	line-height: 1;
}

.sbc-bottom-nav-item span {
	line-height: 1;
}

.sbc-bottom-nav-item:hover,
.sbc-bottom-nav-item.active {
	color: #3182f6;
}

@media (max-width: 1400px) {
	.sbc-bottom-nav {
		display: block;
	}
	/* 하단 탭바 높이만큼 본문 여백 */
	.sbc-site-main #nt_body {
		padding-bottom: 64px;
	}
}

/* ===== 패널 오버레이 ===== */
.sbc-panel-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 1060;
	backdrop-filter: blur(2px);
}

.sbc-panel-overlay.show {
	display: block;
}

/* ===== 패널 공통 닫기 버튼 ===== */
.sbc-panel-close {
	width: 36px;
	height: 36px;
	border: none;
	background: #f2f4f6;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: #4e5968;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	flex-shrink: 0;
}

.sbc-panel-close:hover {
	background: #e5e8eb;
	color: #191f28;
}

/* ===== 내정보 바텀시트 ===== */
.sbc-myinfo-panel {
	position: fixed;
	bottom: 56px;
	left: 0;
	right: 0;
	max-height: 70vh;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
	z-index: 1070;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	padding-bottom: env(safe-area-inset-bottom);
	visibility: hidden;
	pointer-events: none;
}

.sbc-myinfo-panel.open {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

.sbc-myinfo-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #f2f4f6;
}

.sbc-myinfo-panel-title {
	font-size: 17px;
	font-weight: 800;
	color: #191f28;
	letter-spacing: -0.3px;
}

.sbc-myinfo-panel-body {
	overflow-y: auto;
	max-height: calc(70vh - 60px);
	padding: 0 0 16px;
}

/* 내정보 패널 프로필 */
.sbc-mp-profile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 20px 16px;
}

.sbc-mp-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #3182f6;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbc-mp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbc-mp-avatar span {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.sbc-mp-info {
	min-width: 0;
}

.sbc-mp-nick {
	font-size: 16px;
	font-weight: 700;
	color: #191f28;
	letter-spacing: -0.3px;
}

.sbc-mp-level {
	font-size: 12px;
	color: #8b95a1;
	margin-top: 2px;
}

.sbc-mp-money {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	margin: 0 16px;
	background: #f7f8fa;
	border-radius: 10px;
}

.sbc-mp-money-label {
	font-size: 13px;
	color: #6b7684;
}

.sbc-mp-money-amount {
	font-size: 15px;
	font-weight: 700;
	color: #191f28;
}

.sbc-mp-menu {
	padding: 8px 0;
	margin-top: 8px;
	border-top: 1px solid #f2f4f6;
}

.sbc-mp-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 500;
	color: #333d4b;
	text-decoration: none !important;
	transition: background 0.12s;
}

.sbc-mp-menu-item:hover {
	background: #f7f8fa;
}

.sbc-mp-menu-item i {
	color: #8b95a1;
	width: 18px;
	text-align: center;
}

.sbc-mp-badge {
	margin-left: auto;
	background: #f04452;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 10px;
	line-height: 1.4;
}

.sbc-mp-menu-logout {
	color: #8b95a1;
	border-top: 1px solid #f2f4f6;
	margin-top: 4px;
	padding-top: 13px;
}

.sbc-mp-login-msg {
	text-align: center;
	padding: 40px 20px;
	color: #8b95a1;
}

.sbc-mp-login-msg i {
	font-size: 32px;
	margin-bottom: 12px;
	display: block;
}

.sbc-mp-login-msg a {
	color: #3182f6;
	font-weight: 600;
}

/* ===== 채팅 바텀시트 ===== */
.sbc-chat-panel {
	position: fixed;
	bottom: 56px;
	left: 0;
	right: 0;
	height: 65vh;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
	z-index: 1070;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom);
	visibility: hidden;
	pointer-events: none;
}

.sbc-chat-panel.open {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

.sbc-chat-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 10px;
	border-bottom: 1px solid #f2f4f6;
	flex-shrink: 0;
}

.sbc-chat-panel-title {
	font-size: 17px;
	font-weight: 800;
	color: #191f28;
	letter-spacing: -0.3px;
}

.sbc-chat-panel-title i {
	margin-right: 6px;
	color: #3182f6;
}

.sbc-chat-panel-body {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 채팅 패널 내부 채팅 스타일 오버라이드 */
.sbc-chat-panel-body .sbc-chat-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sbc-chat-panel-body .sbc-chat-messages {
	flex: 1;
	overflow-y: auto;
}

.sbc-chat-panel-body .sbc-chat-header {
	flex-shrink: 0;
}

.sbc-chat-panel-body .sbc-chat-input {
	flex-shrink: 0;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
	#sbc_sidebar {
		transform: translateX(-100%);
		z-index: 1100;
		width: 320px;
	}

	#sbc_sidebar.open {
		transform: translateX(0);
	}

	.sbc-site-main {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#sbc_sidebar_overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.4);
		z-index: 1099;
		backdrop-filter: blur(2px);
	}

	#sbc_sidebar_overlay.show {
		display: block;
	}
}

@media (min-width: 769px) {
	#sbc_sidebar_overlay {
		display: none !important;
	}

	.sbc-mobile-toggle {
		display: none !important;
	}
}

/* Mobile Toggle */
.sbc-mobile-toggle {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1050;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: #fff;
	border: none;
	color: #191f28;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all 0.15s;
}

.sbc-mobile-toggle:active {
	transform: scale(0.95);
	background: #f2f4f6;
}

/* Mobile sidebar close button */
.sbc-sidebar-close {
	display: none;
}

@media (max-width: 768px) {
	.sbc-sidebar-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: none;
		background: #f2f4f6;
		border-radius: 50%;
		color: #8b95a1;
		font-size: 14px;
		cursor: pointer;
		margin-left: auto;
		transition: all 0.15s;
	}

	.sbc-sidebar-close:active {
		background: #e5e8eb;
	}
}

/* ===== Right Sidebar ===== */
#sbc_right_sidebar {
	position: fixed;
	right: 0;
	top: 0;
	width: 360px;
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 400;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-left: none;
	box-shadow: -2px 0 8px rgba(0,0,0,0.06);
}

/* shrink-0: 프로필 영역은 고정 높이 */
.sbc-right-inner {
	flex: 0 0 auto;
	overflow: hidden;
}

#sbc_right_sidebar .sbc-user-panel {
	max-width: 100%;
	box-shadow: none;
}

@media (max-width: 768px) {
	#sbc_right_sidebar {
		display: none;
	}
}

/* ============================================================
   Right Sidebar - Profile Card
   ============================================================ */
.sbc-profile-card {
	background: #fff;
}

/* ---- Upper: Profile Info ---- */
.sbc-profile-upper {
	padding: 14px 16px 10px;
	background: #fff;
	position: relative;
}

.sbc-profile-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	position: relative;
}

.sbc-profile-avatar-wrap {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: -2px;
	padding-bottom: 5px;
}

.sbc-profile-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbc-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.sbc-profile-avatar-icon {
	font-size: 18px;
	color: #94a3b8;
}

/* 레벨 배지 — 프로필 하단 겹침 */
.sbc-profile-avatar-wrap > .xp-icon {
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 0.8px 1px rgba(0,0,0,0.15));
}
.sbc-profile-avatar-wrap > .xp-icon img {
	height: 15px;
	width: auto;
	display: block;
}

.sbc-profile-identity {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	position: relative;
	top: 2px;
}

.sbc-profile-name-row {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
}
.sbc-myinfo-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #b0b8c4;
	text-decoration: none !important;
	border-radius: 6px;
	transition: all 0.15s;
	flex-shrink: 0;
}
.sbc-myinfo-btn:hover {
	color: #475569;
	background: #e9ecf0;
}

.sbc-profile-nick {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
	margin-bottom: 5px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.sbc-profile-grade {
	display: inline-flex;
	align-items: center;
	padding: 2.5px 7px;
	background: #eef1f6;
	border-radius: 10px;
	font-family: var(--font-number);
	font-size: 10px;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.5px;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
}

/* ---- Level Bar: single inline row ---- */
.sbc-profile-level {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-bottom: 0;
	position: relative;
	top: 4px;
}

.sbc-profile-level-label {
	font-family: var(--font-number);
	font-size: 11.5px;
	font-weight: 700;
	color: #475569;
	letter-spacing: 0.3px;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 38px;
}

.sbc-profile-level-track {
	flex: 1;
	height: 4px;
	background: rgba(0,0,0,0.06);
	border-radius: 2px;
	overflow: hidden;
}

.sbc-profile-level-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	border-radius: 2px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 4px;
}

.sbc-profile-level-pct {
	font-family: var(--font-number);
	font-size: 11.5px;
	font-weight: 600;
	color: #94a3b8;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 28px;
	text-align: right;
}

/* ---- Money Row ---- */
.sbc-profile-money {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	position: relative;
}

.sbc-profile-money-info {
	display: flex;
	align-items: baseline;
	gap: 0;
	background: #f4f6f8;
	border-radius: 10px;
	padding: 7px 14px;
	flex: 1;
}

.sbc-profile-money-amount {
	margin-left: auto;
}

.sbc-profile-money-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
}

.sbc-profile-money-amount {
	font-family: var(--font-number);
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.5px;
}

.sbc-profile-money-unit {
	font-family: var(--font-number);
	font-size: 13px;
	font-weight: 500;
	color: #4b5563;
	margin-left: 6px;
}

.sbc-profile-charge-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	background: #dce4f5;
	border: none;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	text-decoration: none !important;
	transition: all 0.18s;
	white-space: nowrap;
	flex-shrink: 0;
}

.sbc-profile-charge-btn:hover {
	background: #3b5bbe;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(75,107,206,0.25);
}

/* ---- Lower: Quick Menu ---- */
.sbc-profile-lower {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	padding: 10px 0 2px;
}

.sbc-profile-menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	text-decoration: none !important;
	transition: background 0.15s, transform 0.15s;
	padding: 7px 10px;
	border-radius: 10px;
	background: #f4f6f8;
}

.sbc-profile-menu-item:hover {
	transform: translateY(-1px);
}

.sbc-profile-menu-icon {
	width: 24px;
	height: 24px;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: all 0.18s;
	flex-shrink: 0;
	background: none !important;
}

.sbc-profile-menu-icon--bookmark,
.sbc-profile-menu-icon--check,
.sbc-profile-menu-icon--memo,
.sbc-profile-menu-icon--user {
	color: #3b82f6;
}

/* 호버: 아이콘 색상 진하게 */
.sbc-profile-menu-item:hover .sbc-profile-menu-icon--bookmark,
.sbc-profile-menu-item:hover .sbc-profile-menu-icon--check,
.sbc-profile-menu-item:hover .sbc-profile-menu-icon--memo,
.sbc-profile-menu-item:hover .sbc-profile-menu-icon--user {
	color: #2563eb;
}

/* 호버: 카드 배경색 */
.sbc-profile-menu-item:hover {
	background: #eff6ff;
}

.sbc-profile-menu-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
}

/* ===== Login Card (금융앱 스타일) ===== */
.sbc-login-card {
	padding: 20px 20px 16px;
	border-bottom: 1px solid #E5E7EB;
}

.sbc-login-card-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 16px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	letter-spacing: -0.3px;
}

.sbc-login-card-title .sbc-header-blue {
	color: #2563EB;
}

.sbc-login-input {
	width: 100%;
	padding: 0 12px;
	background: #F3F4F6;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #111827;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 13px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	margin-bottom: 8px;
	height: 42px;
}

.sbc-login-input::placeholder {
	color: #9CA3AF;
}

.sbc-login-input:focus {
	border-color: #2563EB;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.06);
}

.sbc-login-submit {
	width: 100%;
	padding: 0;
	height: 44px;
	background: #2563EB;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-top: 12px;
}

.sbc-login-submit:hover {
	background: #1d4ed8;
}

.sbc-login-submit:active {
	transform: scale(0.98);
}

/* ---- Login utility row ---- */
.sbc-login-utils {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	padding: 0;
}

.sbc-login-utils label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #6B7280;
	cursor: pointer;
}

.sbc-login-utils label input[type="checkbox"] {
	width: 14px;
	height: 14px;
	accent-color: #2563EB;
	margin: 0;
}

.sbc-login-utils a {
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #9CA3AF !important;
	text-decoration: none !important;
	transition: color 0.15s;
}

.sbc-login-utils a:hover {
	color: #2563EB !important;
}

/* ---- Account creation footer ---- */
.sbc-login-footer {
	text-align: center;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #F3F4F6;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 13px;
	color: #9CA3AF;
}

.sbc-login-footer a {
	color: #2563EB !important;
	font-weight: 600;
	text-decoration: none !important;
}

.sbc-login-footer a:hover {
	text-decoration: underline !important;
}

/* ===== User Panel (Legacy - kept for compatibility) ===== */
.sbc-user-panel {
	background: #fff;
	border-radius: 16px;
	border: none;
	padding: 20px;
	max-width: 360px;
	width: 100%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ===== Mini Chat ===== */
.sbc-chat-wrap {
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: #F3F4F6;
	position: relative;
}

/* ============================================================
   Chat Header with Tabs (PSD Design)
   ============================================================ */
.sbc-chat-header {
	padding: 0 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f0f1f3;
	border-bottom: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
	background: #fff;
	position: relative;
	z-index: 2;
}

.sbc-chat-tabs {
	display: flex;
	align-items: center;
	gap: 0;
}

.sbc-chat-tab {
	padding: 13px 14px 11px;
	border: none;
	background: none;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #94a3b8;
	letter-spacing: -0.3px;
	cursor: pointer;
	position: relative;
	transition: color 0.15s;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.sbc-chat-tab:hover {
	color: #64748b;
}

.sbc-chat-tab.active {
	color: #1e293b;
	font-weight: 700;
}


.sbc-chat-header-right {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* 채팅 규정 팝업 */
.sbc-chat-rules-popup {
	position: absolute;
	top: 100%;
	left: 12px;
	right: 12px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	z-index: 10;
	padding: 16px;
	margin-top: 4px;
}
.sbc-chat-rules-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.sbc-chat-rules-header span {
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}
.sbc-chat-rules-header button {
	border: none;
	background: none;
	font-size: 20px;
	color: #94a3b8;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
}
.sbc-chat-rules-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sbc-chat-rules-list li {
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 12.5px;
	color: #4b5563;
	line-height: 1.6;
	padding: 4px 0;
	padding-left: 14px;
	position: relative;
}
.sbc-chat-rules-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #d1d5db;
}

.sbc-chat-clear {
	border: none;
	background: none;
	color: #94a3b8;
	font-size: 12px;
	cursor: pointer;
	padding: 5px 8px;
	border-radius: 8px;
	transition: all 0.15s;
}

.sbc-chat-clear:hover {
	background: #f1f5f9;
	color: #64748b;
}

.sbc-chat-info-btn {
	border: none;
	background: none;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: background 0.15s;
}

.sbc-chat-info-btn:hover {
	background: #f1f5f9;
}

.sbc-chat-info-btn svg path {
	fill: #94a3b8;
}

/* ============================================================
   Unread Message Badge (PSD Design)
   ============================================================ */
.sbc-unread-badge-wrap {
	height: 0;
	overflow: visible;
	text-align: center;
	position: relative;
	z-index: 5;
	pointer-events: none;
}

.sbc-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 20px;
	background: #666a76;
	color: #fff;
	font-family: 'Noto Sans KR', "Pretendard", -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 400;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	pointer-events: auto;
	transform: translateY(-100%);
	margin: 0 auto;
}

.sbc-unread-badge:hover {
	background: #555960;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 메시지 영역 */
.sbc-chat-messages {
	flex: 1 1 0px;
	overflow-y: auto;
	padding: 10px 14px 8px;
	min-height: 0;
	background: #fff;
}

.sbc-chat-messages::-webkit-scrollbar {
	width: 3px;
}

.sbc-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.sbc-chat-messages::-webkit-scrollbar-thumb {
	background: #d1d6db;
	border-radius: 3px;
}

/* 빈 상태 */
.sbc-chat-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 16px;
	text-align: center;
}

.sbc-chat-empty-icon {
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, #e8f3ff 0%, #f0e6ff 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #3182f6;
	margin-bottom: 12px;
}

.sbc-chat-empty p {
	font-size: 14px;
	font-weight: 700;
	color: #4e5968;
	margin: 0 0 4px;
}

.sbc-chat-empty span {
	font-size: 12px;
	color: #b0b8c1;
}

/* 말풍선 스타일 */
.sbc-chat-bubble {
	display: flex;
	align-items: flex-start;
	padding: 5px 0;
	gap: 8px;
}

.sbc-chat-anim {
	animation: chatSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes chatSlideIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.sbc-chat-avatar-wrap {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	padding-bottom: 5px;
}
.sbc-chat-avatar-wrap .sbc-chat-lvl {
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: 13px;
	width: auto;
	display: block;
	filter: drop-shadow(0 0.8px 1px rgba(0,0,0,0.15));
}
.sbc-chat-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e2e8f0;
	color: #94a3b8;
	font-size: 15px;
	flex-shrink: 0;
	overflow: hidden;
}
.sbc-chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbc-chat-body {
	flex: 1;
	min-width: 0;
}

.sbc-chat-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}

.sbc-chat-nick {
	font-family: "Pretendard", -apple-system, sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #374151;
	letter-spacing: -0.2px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.sbc-chat-time {
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 11px;
	color: #94a3b8;
}

.sbc-chat-text {
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 13px;
	color: #475569;
	line-height: 1.45;
	word-break: break-word;
	background: #F5F7FA;
	padding: 6px 10px;
	border-radius: 4px 14px 14px 14px;
	display: inline-block;
	max-width: 100%;
}

/* 시스템 메시지 */
.sbc-chat-system {
	text-align: center;
	font-size: 11px;
	color: #8b95a1;
	background: #f2f4f6;
	border-radius: 20px;
	padding: 6px 14px;
	margin: 10px 0;
	font-weight: 500;
}

.sbc-chat-system i {
	margin-right: 4px;
}

/* 입력 영역 */
.sbc-chat-input {
	padding: 8px 10px;
	flex-shrink: 0;
	position: relative;
	background: #fff;
	box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
}

.sbc-chat-input-bar {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sbc-chat-input-row {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #F5F7FA;
	border: 1px solid transparent;
	border-radius: 14px;
	height: 44px;
	padding: 0 8px 0 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sbc-chat-input-bar.is-focused .sbc-chat-input-row,
.sbc-chat-input-bar.has-text .sbc-chat-input-row {
	border-color: rgba(37,99,235,0.45);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.sbc-chat-addon {
	border: none;
	background: none;
	color: #B0B8C1;
	padding: 4px;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s;
}

.sbc-chat-addon svg path {
	fill: currentColor;
}

.sbc-chat-addon:hover {
	color: #6B7280;
}

.sbc-chat-input-row input {
	flex: 1;
	padding: 0;
	border: none;
	background: transparent;
	font-family: "Pretendard", -apple-system, sans-serif;
	font-size: 14px;
	outline: none;
	color: #1e293b;
	min-width: 0;
	height: 100%;
}

.sbc-chat-input-row input::placeholder {
	color: #9CA3AF;
}

/* ---- Send Button: 기본 숨김 → focus/텍스트 시 등장 ---- */
.sbc-send-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 0;
	border: none;
	border-radius: 14px;
	background: #E5E7EB;
	color: #9CA3AF;
	cursor: default;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 기본: 숨김 */
	opacity: 0;
	transform: translateX(6px) scale(0.92);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sbc-send-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.sbc-send-btn svg path {
	fill: currentColor;
}

/* 활성: focus 또는 텍스트 있을 때 */
.sbc-chat-input-bar.is-focused .sbc-send-btn,
.sbc-chat-input-bar.has-text .sbc-send-btn {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
	background: #2563EB;
	color: #fff;
	cursor: pointer;
}

.sbc-chat-input-bar.is-focused .sbc-send-btn:hover,
.sbc-chat-input-bar.has-text .sbc-send-btn:hover {
	filter: brightness(0.93);
}

.sbc-chat-input-bar.is-focused .sbc-send-btn:active,
.sbc-chat-input-bar.has-text .sbc-send-btn:active,
.sbc-send-btn.sbc-sending {
	transform: scale(0.98);
}

.sbc-send-btn.sbc-sending {
	opacity: 0.6;
	pointer-events: none;
}

/* 이모지 피커 */
.sbc-emoji-picker {
	display: none;
	padding: 8px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	position: absolute;
	bottom: 56px;
	left: 12px;
	right: 12px;
	z-index: 10;
	flex-wrap: wrap;
	gap: 2px;
}

.sbc-emoji-picker.show {
	display: flex;
}

.sbc-emoji-item {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	border-radius: 10px;
	transition: all 0.1s;
}

.sbc-emoji-item:hover {
	background: #f2f4f6;
	transform: scale(1.15);
}

/* 로그인 유도 */
.sbc-chat-login-msg {
	padding: 20px 16px;
	text-align: center;
	font-size: 13px;
	color: #94a3b8;
	border-top: 1px solid #E5E7EB;
	flex-shrink: 0;
	font-weight: 500;
	background: #fff;
}

.sbc-chat-login-icon {
	width: 40px;
	height: 40px;
	background: #f2f4f6;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #b0b8c1;
	margin: 0 auto 10px;
}

.sbc-chat-login-msg a {
	color: #3182f6;
	font-weight: 700;
	text-decoration: none;
}

/* ===== Loader Override ===== */
#nt_loader {
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#nt_loader .loader {
	display: none !important;
}

/* ===== Sidebar Search ===== */
.sbc-sidebar-search {
	padding: 0 12px 8px;
	flex-shrink: 0;
	background: #fff;
}

.sbc-search-box {
	display: flex;
	align-items: center;
	background: #f2f4f6;
	border-radius: 12px;
	padding: 0 14px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1.5px solid transparent;
}

.sbc-search-box:focus-within {
	background: #fff;
	border-color: #3182f6;
	box-shadow: 0 0 0 3px rgba(49,130,246,0.12);
}

.sbc-search-box i {
	color: #b0b8c1;
	font-size: 14px;
	margin-right: 10px;
	flex-shrink: 0;
}

.sbc-search-box:focus-within i {
	color: #3182f6;
}

.sbc-search-box input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 0;
	font-size: 13px;
	color: #191f28;
	outline: none;
	min-width: 0;
}

.sbc-search-box input::placeholder {
	color: #b0b8c1;
}

/* ===== Nariya Override ===== */
@media (min-width: 769px) {
	.sbc-site-main .wrapper {
		max-width: 100%;
	}

	.sbc-site-main #nt_sticky_wrap.me-sticky {
		left: 320px;
		right: 360px;
		width: calc(100% - 680px);
	}
}

@media (min-width: 769px) and (max-width: 1400px) {
	.sbc-site-main #nt_sticky_wrap.me-sticky {
		right: 0;
		width: calc(100% - 320px);
	}
}

/* =========================================================
   모던 스타일 Main Content Area - COMPLETE OVERRIDE
   ========================================================= */

/* 전체 배경 & 폰트 (PSD: 메인 컨텐츠 배경 #f7f8fa) */
.sbc-site-main,
.sbc-site-main .wrapper,
.sbc-site-main .wrapper.wided {
	background: #f7f8fa !important;
	font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.3px;
}

/* ======= 헤더 전체 숨김 (사이드바에 로고/메뉴/검색 있음) ======= */
.sbc-site-main #nt_header {
	display: none !important;
}

/* ======= 본문 영역 ======= */
.sbc-site-main #nt_body {
	background: #f7f8fa;
	padding: 14px 20px 0;
}

.sbc-site-main #nt_body > * {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.sbc-site-main .nt-body {
	min-height: calc(100vh - 76px); /* PSD: 75px nav + 1px border */
}

/* ======= 인덱스 메인 컨테이너 ======= */
.sbc-site-main .nt-container,
.sbc-site-main .nt-container.pt-0 {
	padding-top: 0 !important;
}
@media (min-width: 769px) {
	.sbc-site-main #nt_body > .nt-container:first-child {
		margin-top: -20px;
	}
}

/* ======= 위젯 섹션 제목 (h3.h3 + hr.hr) ======= */
.sbc-site-main h3.h3 {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #191f28 !important;
	letter-spacing: -0.5px !important;
	border: none !important;
	padding: 16px 20px 0 !important;
	margin: 0 !important;
}

.sbc-site-main h3.h3 a {
	color: #191f28 !important;
	text-decoration: none !important;
}

.sbc-site-main h3.h3 .more-plus {
	color: #b0b8c1 !important;
	font-size: 14px !important;
}

.sbc-site-main h3.h3 .float-right {
	color: #b0b8c1 !important;
}

/* hr.hr 컬러바 완전 제거 */
.sbc-site-main hr.hr {
	height: 0 !important;
	margin: 0 !important;
	border: none !important;
	display: none !important;
}

.sbc-site-main hr.hr::before,
.sbc-site-main hr.hr::after {
	display: none !important;
	content: none !important;
}

/* ======= 위젯 카드 래퍼 ======= */
.sbc-site-main .mt-3.mb-4,
.sbc-site-main .mt-3.mb-4.mb-md-5 {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 0 20px 16px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 12px !important;
}

/* h3 + hr + .mt-3 을 하나의 카드로 묶기 위한 카드 배경 */
.sbc-site-main .na-col > h3.h3 {
	background: #fff;
	border-radius: 16px 16px 0 0;
	margin-bottom: 0 !important;
	padding-bottom: 12px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	position: relative;
	z-index: 1;
}

.sbc-site-main .na-col > h3.h3 + hr.hr {
	display: none !important;
}

.sbc-site-main .na-col > h3.h3 + hr.hr + .mt-3 {
	border-radius: 0 0 16px 16px !important;
	margin-top: -2px !important;
	position: relative;
	z-index: 0;
}

/* row 안의 위젯도 카드화 */
.sbc-site-main .row.na-row > .na-col > h3.h3 {
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ======= 캐러셀/슬라이더 ======= */
.sbc-site-main #header_carousel {
	margin-bottom: 16px !important;
	border-radius: 16px;
	overflow: hidden;
}

.sbc-site-main #header_carousel .owl-carousel,
.sbc-site-main #header_carousel .owl-stage-outer {
	border-radius: 16px;
}

.sbc-site-main .owl-carousel .item img,
.sbc-site-main #header_carousel img {
	border-radius: 16px;
}

/* Owl 네비 모던 스타일 */
.sbc-site-main .owl-slider .owl-carousel .owl-nav button {
	border: none !important;
	background: #fff !important;
	color: #4e5968 !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
	padding: 6px 10px !important;
	margin: 0 3px !important;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbc-site-main .owl-slider .owl-carousel .owl-nav button:hover {
	background: #3182f6 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(49,130,246,0.3) !important;
}

/* ======= 게시글 리스트 ======= */
.sbc-site-main .na-table,
.sbc-site-main .table {
	font-size: 15px;
}

.sbc-site-main .na-table .na-item,
.sbc-site-main .na-list .na-line {
	border-bottom: 1px solid #f2f4f6 !important;
	transition: background 0.1s;
}

.sbc-site-main .na-table .na-item:hover,
.sbc-site-main .na-list li:hover {
	background: #f8f9fa;
}

.sbc-site-main .na-table a,
.sbc-site-main .na-list a {
	color: #4e5968 !important;
	text-decoration: none !important;
}

.sbc-site-main .na-table a:hover,
.sbc-site-main .na-list a:hover {
	color: #191f28 !important;
}

/* 리스트 아이템 */
.sbc-site-main .na-list li {
	border-bottom: 1px solid #f2f4f6;
	line-height: 2.2 !important;
}

.sbc-site-main .na-list .na-subject {
	font-size: 15px;
	color: #4e5968;
	font-weight: 500;
}

/* ======= 썸네일/갤러리 ======= */
.sbc-site-main .na-item img,
.sbc-site-main .na-round {
	border-radius: 12px !important;
}

/* ======= 안내 alert 숨김 ======= */
.sbc-site-main .alert.alert-dismissible {
	display: none !important;
}

/* ======= 버튼 ======= */
.sbc-site-main .btn {
	border-radius: 10px !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sbc-site-main .btn-primary {
	background: #3182f6 !important;
	border-color: #3182f6 !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
}

.sbc-site-main .btn-primary:hover,
.sbc-site-main .btn-primary:focus {
	background: #1b64da !important;
	border-color: #1b64da !important;
	box-shadow: 0 4px 12px rgba(49,130,246,0.3) !important;
}

.sbc-site-main .btn-outline-primary {
	color: #3182f6 !important;
	border-color: #3182f6 !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
	background: transparent !important;
}

.sbc-site-main .btn-outline-primary:hover {
	background: #3182f6 !important;
	color: #fff !important;
}

.sbc-site-main .btn-secondary,
.sbc-site-main .btn-default {
	background: #f2f4f6 !important;
	border: none !important;
	color: #4e5968 !important;
	border-radius: 12px !important;
}

.sbc-site-main .btn-secondary:hover,
.sbc-site-main .btn-default:hover {
	background: #e5e8eb !important;
	color: #191f28 !important;
}

.sbc-site-main .btn-danger {
	background: #f04452 !important;
	border-color: #f04452 !important;
	border-radius: 12px !important;
}

.sbc-site-main .btn-lg {
	border-radius: 14px !important;
	padding: 12px 20px !important;
	font-size: 16px !important;
}

/* ======= 입력 필드 ======= */
.sbc-site-main .form-control {
	border-radius: 12px !important;
	border: 1.5px solid #e5e8eb !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	background: #f2f4f6 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	color: #191f28 !important;
}

.sbc-site-main .form-control:focus {
	border-color: #3182f6 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(49,130,246,0.12) !important;
}

.sbc-site-main .form-control::placeholder {
	color: #b0b8c1 !important;
}

.sbc-site-main .input-group {
	border-radius: 12px;
	overflow: hidden;
}

.sbc-site-main .input-group .form-control {
	border-radius: 12px 0 0 12px !important;
}

.sbc-site-main .input-group-append .btn {
	border-radius: 0 12px 12px 0 !important;
}

.sbc-site-main select.form-control {
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b95a1' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 32px !important;
}

/* ======= 카드/패널 ======= */
.sbc-site-main .card,
.sbc-site-main .panel {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	overflow: hidden;
}

.sbc-site-main .card-header {
	background: #fff !important;
	border-bottom: 1px solid #f2f4f6 !important;
	font-weight: 700;
	color: #191f28;
}

.sbc-site-main .card-body {
	background: #fff;
}

/* ======= 풋터 ======= */
/* Gnuboard 기본 풋터 숨김 - se-footer로 대체 */
.sbc-site-main #nt_footer {
	display: none !important;
}

/* ======= 페이지네이션 ======= */
.sbc-site-main .pagination .page-link {
	border: none !important;
	border-radius: 10px !important;
	color: #4e5968 !important;
	font-weight: 600;
	margin: 0 2px;
	padding: 8px 12px;
	background: transparent;
	transition: all 0.15s;
}

.sbc-site-main .pagination .page-item.active .page-link {
	background: #3182f6 !important;
	color: #fff !important;
}

.sbc-site-main .pagination .page-link:hover {
	background: #e8f3ff !important;
	color: #3182f6 !important;
}

/* ======= 배지 ======= */
.sbc-site-main .badge {
	border-radius: 6px !important;
	font-weight: 600;
	padding: 3px 8px;
}

.sbc-site-main .badge-primary {
	background: #3182f6 !important;
}

.sbc-site-main .badge-danger {
	background: #f04452 !important;
}

.sbc-site-main .badge-success {
	background: #00b894 !important;
}

.sbc-site-main .badge-warning {
	background: #ffc107 !important;
	color: #191f28 !important;
}

/* ======= 컬러 오버라이드 ======= */
.sbc-site-main .text-primary {
	color: #3182f6 !important;
}

.sbc-site-main .bg-primary {
	background-color: #3182f6 !important;
}

.sbc-site-main .bg-light {
	background-color: #f2f4f6 !important;
}

.sbc-site-main .border-primary {
	border-color: #3182f6 !important;
}

.sbc-site-main .text-muted {
	color: #8b95a1 !important;
}

/* ======= 드롭다운 ======= */
.sbc-site-main .dropdown-menu {
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
	padding: 6px !important;
	overflow: hidden;
}

.sbc-site-main .dropdown-item {
	border-radius: 10px !important;
	font-size: 14px;
	padding: 8px 14px !important;
	color: #4e5968;
	transition: all 0.1s;
}

.sbc-site-main .dropdown-item:hover {
	background: #f2f4f6 !important;
	color: #191f28;
}

/* ======= 페이지 타이틀 ======= */
.sbc-site-main #nt_title {
	background: #fff !important;
	border-bottom: 1px solid #e5e8eb;
}

.sbc-site-main #nt_title .page-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #191f28 !important;
	letter-spacing: -0.6px;
}

.sbc-site-main .na-title {
	background: #fff !important;
	border: none !important;
	border-bottom: 1px solid #e5e8eb !important;
}

.sbc-site-main .breadcrumb {
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sbc-site-main .breadcrumb-item a {
	color: #8b95a1 !important;
}

.sbc-site-main .breadcrumb-item.active {
	color: #3182f6 !important;
}

/* ======= 게시판 페이지 ======= */
.sbc-site-main .board-wrap,
.sbc-site-main .bo-list-wrap {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	padding: 20px;
	border: none !important;
}

.sbc-site-main .bo-head {
	border-radius: 16px;
	overflow: hidden;
}

/* 게시판 테이블 */
.sbc-site-main .bo-table {
	border: none !important;
}

.sbc-site-main .bo-table thead th {
	background: #f8f9fa !important;
	border: none !important;
	color: #8b95a1 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 12px !important;
}

.sbc-site-main .bo-table tbody td {
	border-bottom: 1px solid #f2f4f6 !important;
	border-top: none !important;
	padding: 12px !important;
	font-size: 15px;
	color: #4e5968;
}

.sbc-site-main .bo-table tbody tr:hover td {
	background: #f8f9fa;
}

.sbc-site-main .bo-table a {
	color: #4e5968 !important;
}

.sbc-site-main .bo-table a:hover {
	color: #191f28 !important;
}

/* 검색 바 (게시판 내부) */
.sbc-site-main .bo-search select,
.sbc-site-main .bo-search input {
	border-radius: 10px !important;
}

/* ======= 사이드 위젯 ======= */
.sbc-site-main .outlogin {
	background: #fff !important;
	border-radius: 16px !important;
	padding: 16px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	border: none !important;
}

/* ======= 회원가입/로그인 폼 ======= */
.sbc-site-main .mbskin {
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 32px 24px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.sbc-site-main .mbskin h2,
.sbc-site-main .mbskin .h2 {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #191f28 !important;
	letter-spacing: -0.6px;
	text-align: center;
	margin-bottom: 24px !important;
}

.sbc-site-main .mbskin .form-control {
	background: #f2f4f6 !important;
	border: 1.5px solid transparent !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
}

.sbc-site-main .mbskin .form-control:focus {
	border-color: #3182f6 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(49,130,246,0.12) !important;
}

.sbc-site-main .mbskin label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4e5968 !important;
	margin-bottom: 6px !important;
}

.sbc-site-main .mbskin .btn-primary {
	width: 100%;
	padding: 14px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 14px !important;
	margin-top: 8px;
}

.sbc-site-main .mbskin .btn-secondary,
.sbc-site-main .mbskin .btn-default {
	border-radius: 12px !important;
	font-weight: 600 !important;
}

.sbc-site-main .mbskin table {
	border: none !important;
}

.sbc-site-main .mbskin td,
.sbc-site-main .mbskin th {
	border: none !important;
	padding: 6px 0 !important;
	vertical-align: middle;
}

.sbc-site-main .mbskin th {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4e5968 !important;
	white-space: nowrap;
	width: 90px;
}

/* ======= 알림/토스트 ======= */
.sbc-site-main .alert {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	font-size: 14px;
	padding: 16px 20px !important;
}

.sbc-site-main .alert-info {
	background: #e8f3ff !important;
	color: #3182f6 !important;
}

.sbc-site-main .alert-success {
	background: #e6f9f0 !important;
	color: #00b894 !important;
}

.sbc-site-main .alert-danger {
	background: #ffeaec !important;
	color: #f04452 !important;
}

.sbc-site-main .alert-warning {
	background: #fff8e6 !important;
	color: #f59f00 !important;
}

/* ======= 탭/네비게이션 ======= */
.sbc-site-main .nav-tabs {
	border-bottom: 2px solid #f2f4f6 !important;
}

.sbc-site-main .nav-tabs .nav-link {
	border: none !important;
	color: #8b95a1 !important;
	font-weight: 600;
	padding: 10px 16px !important;
	border-radius: 0 !important;
	transition: all 0.15s;
}

.sbc-site-main .nav-tabs .nav-link.active,
.sbc-site-main .nav-tabs .nav-link:hover {
	color: #3182f6 !important;
	border-bottom: 2px solid #3182f6 !important;
	background: transparent !important;
}

/* ======= 테이블 일반 ======= */
.sbc-site-main table.table {
	border: none !important;
}

.sbc-site-main table.table thead th {
	background: #f8f9fa !important;
	border: none !important;
	color: #8b95a1;
	font-size: 13px;
	font-weight: 600;
}

.sbc-site-main table.table td {
	border-color: #f2f4f6 !important;
	font-size: 14px;
	color: #4e5968;
}

/* ======= 스크롤바 커스텀 ======= */
.sbc-site-main ::-webkit-scrollbar {
	width: 6px;
}

.sbc-site-main ::-webkit-scrollbar-track {
	background: transparent;
}

.sbc-site-main ::-webkit-scrollbar-thumb {
	background: #d1d6db;
	border-radius: 3px;
}

.sbc-site-main ::-webkit-scrollbar-thumb:hover {
	background: #8b95a1;
}

/* ======= 모달 ======= */
.sbc-site-main .modal-content {
	border: none !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
	overflow: hidden;
}

.sbc-site-main .modal-header {
	border-bottom: 1px solid #f2f4f6 !important;
	padding: 18px 24px !important;
}

.sbc-site-main .modal-title {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #191f28 !important;
}

.sbc-site-main .modal-body {
	padding: 20px 24px !important;
}

.sbc-site-main .modal-footer {
	border-top: 1px solid #f2f4f6 !important;
	padding: 14px 24px !important;
}

/* ======= 모던 스타일 링크 ======= */
.sbc-site-main a {
	transition: color 0.1s;
}

/* ======= Rank badge 스타일 ======= */
.sbc-site-main .na-rank-red,
.sbc-site-main .rank-red {
	background: #f04452 !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	padding: 2px 6px !important;
}

/* ======= Sideview (회원정보 팝업) ======= */
.sbc-site-main .sv_wrap .sv_on {
	border-radius: 12px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
	border: none !important;
}

/* ======= 반응형 메인 조정 ======= */
@media (min-width: 769px) {
	.sbc-site-main .row.na-row {
		margin: 0 -6px;
	}

	.sbc-site-main .row.na-row > .na-col {
		padding: 0 6px;
	}
}

/* ==========================================================
   BOT SETTINGS PANEL (Admin Only)
   ========================================================== */

/* Settings button in chat header */
.sbc-bot-settings-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
}

.sbc-bot-settings-btn:hover {
	opacity: 1;
	background: #f1f5f9;
}

/* ============================================================
   Chat Admin: Hover Action Buttons
   ============================================================ */
.sbc-chat-bubble {
	position: relative;
}
.sbc-chat-admin-actions {
	position: absolute;
	top: 2px;
	right: 0;
	display: flex;
	gap: 2px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	background: rgba(255,255,255,0.95);
	border-radius: 8px;
	padding: 2px 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sbc-chat-bubble:hover .sbc-chat-admin-actions {
	opacity: 1;
	pointer-events: auto;
}
.sbc-admin-act-btn {
	width: 26px;
	height: 26px;
	border: none;
	background: none;
	color: #94a3b8;
	font-size: 12px;
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	padding: 0;
}
.sbc-admin-act-btn:hover {
	background: #f1f5f9;
	color: #475569;
}
.sbc-admin-act-btn.sbc-admin-act-danger:hover {
	background: #fef2f2;
	color: #ef4444;
}

/* ============================================================
   Chat Admin: Hidden Message
   ============================================================ */
.sbc-chat-bubble.sbc-chat-hidden .sbc-chat-text {
	color: #94a3b8;
	font-style: italic;
}
.sbc-chat-bubble.sbc-chat-hidden .sbc-chat-avatar-wrap {
	opacity: 0.5;
}
.sbc-chat-hidden-badge {
	font-size: 10px;
	color: #ef4444;
	background: #fef2f2;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: -0.2px;
	margin-right: 4px;
}

/* ============================================================
   Chat Admin: Modal Dialogs
   ============================================================ */
.sbc-admin-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sbc-admin-modal {
	background: #fff;
	border-radius: 16px;
	width: 340px;
	max-width: 90vw;
	box-shadow: 0 8px 32px rgba(0,0,0,0.15);
	overflow: hidden;
}
.sbc-admin-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #f1f5f9;
}
.sbc-admin-modal-header span {
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
}
.sbc-admin-modal-header button {
	border: none;
	background: none;
	font-size: 22px;
	color: #94a3b8;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.sbc-admin-modal-body {
	padding: 20px;
}
.sbc-admin-modal-target {
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	color: #475569;
	margin: 0 0 16px;
}
.sbc-admin-modal-target strong {
	color: #1e293b;
}
.sbc-admin-modal-warning {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 12px 14px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 12px;
	color: #dc2626;
	margin-bottom: 16px;
	line-height: 1.5;
}
.sbc-admin-modal-warning i {
	margin-right: 6px;
}
.sbc-admin-modal-field {
	margin-bottom: 14px;
}
.sbc-admin-modal-field:last-child {
	margin-bottom: 0;
}
.sbc-admin-modal-field label {
	display: block;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 6px;
}
.sbc-admin-modal-field input[type="number"],
.sbc-admin-modal-field input[type="text"],
.sbc-admin-modal-field select,
.sbc-admin-modal-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	color: #1e293b;
	outline: none;
	transition: border-color 0.15s;
	box-sizing: border-box;
}
.sbc-admin-modal-field input:focus,
.sbc-admin-modal-field select:focus,
.sbc-admin-modal-field textarea:focus {
	border-color: #3182f6;
	box-shadow: 0 0 0 3px rgba(49,130,246,0.1);
}
.sbc-admin-preset-btns {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.sbc-admin-preset-btns button {
	padding: 6px 12px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	border-radius: 8px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 12px;
	color: #475569;
	cursor: pointer;
	transition: all 0.15s;
}
.sbc-admin-preset-btns button:hover {
	background: #3182f6;
	color: #fff;
	border-color: #3182f6;
}
.sbc-admin-modal-footer {
	display: flex;
	gap: 8px;
	padding: 16px 20px;
	border-top: 1px solid #f1f5f9;
	justify-content: flex-end;
}
.sbc-admin-modal-cancel {
	padding: 10px 18px;
	border: 1px solid #e2e8f0;
	background: #fff;
	border-radius: 10px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.15s;
}
.sbc-admin-modal-cancel:hover {
	background: #f1f5f9;
}
.sbc-admin-modal-unban {
	padding: 10px 18px;
	border: 1px solid #f59e0b;
	background: #fffbeb;
	border-radius: 10px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #d97706;
	cursor: pointer;
	transition: all 0.15s;
	margin-right: auto;
}
.sbc-admin-modal-unban:hover {
	background: #fef3c7;
}
.sbc-admin-modal-confirm {
	padding: 10px 18px;
	border: none;
	background: #3182f6;
	border-radius: 10px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: all 0.15s;
}
.sbc-admin-modal-confirm:hover {
	filter: brightness(0.93);
}
.sbc-admin-modal-confirm.sbc-admin-modal-danger {
	background: #ef4444;
}
.sbc-admin-modal-confirm.sbc-admin-modal-danger:hover {
	background: #dc2626;
}
.sbc-chat-system-danger {
	background: #fef2f2 !important;
	color: #dc2626 !important;
}

/* ============================================================
   Chat Admin: Settings Dropdown Menu
   ============================================================ */
.sbc-admin-menu-wrap {
	position: relative;
}
.sbc-admin-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	z-index: 20;
	min-width: 150px;
	padding: 6px;
	overflow: hidden;
}
.sbc-admin-dropdown button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border: none;
	background: none;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.12s;
	white-space: nowrap;
	text-align: left;
}
.sbc-admin-dropdown button:hover {
	background: #f3f4f6;
}
.sbc-admin-dropdown button i {
	width: 16px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
}

/* ============================================================
   Chat Admin: Member Search in Modal
   ============================================================ */
.sbc-admin-search-wrap {
	position: relative;
}
.sbc-admin-search-results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 10;
	max-height: 200px;
	overflow-y: auto;
	margin-top: 4px;
}
.sbc-admin-search-item {
	padding: 10px 14px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	color: #1e293b;
	cursor: pointer;
	transition: background 0.12s;
}
.sbc-admin-search-item:hover {
	background: #f1f5f9;
}
.sbc-admin-search-item:not(:last-child) {
	border-bottom: 1px solid #f1f5f9;
}
.sbc-admin-search-empty {
	padding: 12px 14px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 12px;
	color: #94a3b8;
	text-align: center;
}

/* ============================================================
   Chat Blind: 채팅창 가리기
   ============================================================ */
.sbc-chat-blind-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(255,255,255,0.65);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.sbc-chat-blind-overlay span {
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	color: #64748b;
}
.sbc-chat-blind-overlay button {
	padding: 8px 20px;
	border: 1px solid #e2e8f0;
	background: #fff;
	border-radius: 10px;
	font-family: 'Pretendard', -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #3182f6;
	cursor: pointer;
	transition: all 0.15s;
}
.sbc-chat-blind-overlay button:hover {
	background: #f0f7ff;
	border-color: #3182f6;
}

/* ===== 채팅 팝업 배너 ===== */
.sbc-chat-popup-banner {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	margin: 0;
	background: #f4f5f7;
	border-bottom: 1px solid #e9ebee;
	font-size: 12px;
	font-weight: 500;
	color: #4a5568;
	line-height: 1.5;
	flex-shrink: 0;
}
.sbc-chat-popup-banner > i {
	flex-shrink: 0;
	font-size: 13px;
	color: #94a3b8;
}
.sbc-chat-popup-text {
	flex: 1;
	word-break: break-word;
}
.sbc-popup-char-count {
	display: block;
	text-align: right;
	font-size: 11px;
	color: #94a3b8;
	margin-top: 4px;
}
.sbc-popup-period-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sbc-popup-period-row span {
	color: #94a3b8;
	flex-shrink: 0;
}
.sbc-popup-period-row input[type="datetime-local"] {
	flex: 1;
	min-width: 0;
	padding: 8px 8px;
	font-size: 12px;
}

/* Dropdown divider */
.sbc-admin-dropdown-divider {
	height: 1px;
	background: #f1f5f9;
	margin: 4px 6px;
}

/* Panel overlay */
.sbc-bot-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 100;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0;
}

.sbc-bot-panel.open {
	transform: translateX(0);
}

/* Panel header */
.sbc-bot-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #f8f9fb;
	border-bottom: 1px solid #eef0f3;
	flex-shrink: 0;
}

.sbc-bot-panel-title {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sbc-bot-panel-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: #8b95a1;
	padding: 4px 8px;
	border-radius: 6px;
	transition: all 0.15s;
}

.sbc-bot-panel-close:hover {
	background: #eef0f3;
	color: #4e5968;
}

/* Panel body (scrollable) */
.sbc-bot-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
}

/* Section */
.sbc-bot-section {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f2f4f6;
}

.sbc-bot-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.sbc-bot-section-title {
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 10px;
	letter-spacing: -0.2px;
}

/* Row */
.sbc-bot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	min-height: 32px;
}

.sbc-bot-row:last-child {
	margin-bottom: 0;
}

.sbc-bot-row > label {
	font-size: 13px;
	font-weight: 500;
	color: #4e5968;
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.sbc-bot-row-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sbc-bot-row-label strong {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}

/* Status badge */
.sbc-bot-status-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #f2f4f6;
	color: #8b95a1;
}

.sbc-bot-status-badge.sbc-bot-on {
	background: #e6f9f0;
	color: #00b894;
}

.sbc-bot-status-badge.sbc-bot-off {
	background: #ffeaec;
	color: #f04452;
}

.sbc-bot-status-info {
	margin-top: 4px;
}

.sbc-bot-status-info small {
	font-size: 11px;
	color: #b0b8c1;
}

/* Toggle switch */
.sbc-bot-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.sbc-bot-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sbc-bot-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #d1d6db;
	border-radius: 24px;
	transition: all 0.2s;
}

.sbc-bot-toggle-slider::before {
	content: '';
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: 50%;
	transition: all 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.sbc-bot-toggle input:checked + .sbc-bot-toggle-slider {
	background: #2370f9;
}

.sbc-bot-toggle input:checked + .sbc-bot-toggle-slider::before {
	transform: translateX(20px);
}

.sbc-bot-toggle-sm {
	width: 36px;
	height: 20px;
}

.sbc-bot-toggle-sm .sbc-bot-toggle-slider::before {
	height: 14px;
	width: 14px;
}

.sbc-bot-toggle-sm input:checked + .sbc-bot-toggle-slider::before {
	transform: translateX(16px);
}

/* Range row */
.sbc-bot-range-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #8b95a1;
}

/* Small number input */
.sbc-bot-input-sm {
	width: 52px;
	height: 30px;
	border: 1.5px solid #e5e8eb;
	border-radius: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	outline: none;
	background: #F7F8FA;
	-moz-appearance: textfield;
}

.sbc-bot-input-sm::-webkit-outer-spin-button,
.sbc-bot-input-sm::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sbc-bot-input-sm:focus {
	border-color: #2370f9;
	background: #fff;
}

/* Slider */
.sbc-bot-slider {
	-webkit-appearance: none;
	width: 100px;
	height: 6px;
	border-radius: 3px;
	background: #e5e8eb;
	outline: none;
}

.sbc-bot-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #2370f9;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(35,112,249,0.3);
}

.sbc-bot-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #2370f9;
	cursor: pointer;
	border: none;
	box-shadow: 0 1px 4px rgba(35,112,249,0.3);
}

.sbc-bot-slider-val {
	font-size: 13px;
	font-weight: 700;
	color: #2370f9;
	min-width: 24px;
	text-align: right;
}

/* Bot user list */
.sbc-bot-user-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-height: 160px;
	overflow-y: auto;
	padding: 2px 0;
}

.sbc-bot-user-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.1s;
	font-size: 12px;
	background: #f8f9fb;
	border: 1px solid #eef0f3;
	width: calc(50% - 2px);
	box-sizing: border-box;
}

.sbc-bot-user-item:hover {
	background: #eef4ff;
	border-color: #cfe0ff;
}

.sbc-bot-user-item input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: #2370f9;
	flex-shrink: 0;
}

.sbc-bot-user-nick {
	font-weight: 600;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sbc-bot-user-id {
	display: none;
}

/* Category list */
.sbc-bot-cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sbc-bot-cat-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 9999px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	background: #f2f4f6;
	border: 1px solid #e5e8eb;
	color: #4e5968;
	transition: all 0.1s;
}

.sbc-bot-cat-item:hover {
	background: #eef4ff;
	border-color: #cfe0ff;
}

.sbc-bot-cat-item input {
	width: 13px;
	height: 13px;
	margin: 0;
	accent-color: #2370f9;
}

.sbc-bot-cat-item input:checked + span {
	color: #2370f9;
	font-weight: 600;
}

/* Panel footer */
.sbc-bot-panel-footer {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #eef0f3;
	background: #f8f9fb;
	flex-shrink: 0;
}

.sbc-bot-btn {
	flex: 1;
	height: 38px;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s;
}

.sbc-bot-btn-save {
	background: #2370f9;
	color: #fff;
}

.sbc-bot-btn-save:hover {
	background: #1b5fd9;
}

.sbc-bot-btn-save.sbc-bot-btn-done {
	background: #00b894;
}

.sbc-bot-btn-reset {
	background: #f2f4f6;
	color: #4e5968;
}

.sbc-bot-btn-reset:hover {
	background: #e5e8eb;
}

/* Bot status row specific */
.sbc-bot-status-row {
	padding-bottom: 4px;
}

/* ============================================================
   DARK MODE — html.dark-mode
   사이드바, 탑바, 프로필, 채팅, 하단네비
   ============================================================ */

/* --- 탑바 --- */
html.dark-mode .sbc-topbar {
	background: #1e1f23;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
html.dark-mode .sbc-topbar-search-box {
	background: rgba(255,255,255,0.06);
	border-color: transparent;
}
html.dark-mode .sbc-topbar-search-box:focus-within {
	background: rgba(255,255,255,0.08);
	border-color: rgba(96,165,250,0.4);
	box-shadow: 0 0 0 2px rgba(96,165,250,0.1);
}
html.dark-mode .sbc-topbar-search-box input,
html.dark-mode .sbc-topbar-search-box input:focus {
	background: transparent !important;
	color: #e5e7eb;
	box-shadow: none;
}
html.dark-mode .sbc-topbar-search-box input::placeholder {
	color: #6b7280;
}
html.dark-mode .sbc-topbar-search-box button,
html.dark-mode .sbc-topbar-search-box button:hover,
html.dark-mode .sbc-topbar-search-box button:focus,
html.dark-mode .sbc-topbar-search-box button:active {
	background: transparent !important;
	color: #6b7280;
	box-shadow: none;
	border: none;
	filter: none;
}
html.dark-mode .sbc-topbar-search-box button:hover {
	color: #9ca3af;
}
html.dark-mode .sbc-topbar-icon-btn {
	color: #9ca3af;
}
html.dark-mode .sbc-topbar-icon-btn:hover {
	background: #2c2d32;
	color: #60a5fa;
}

/* --- 좌측 사이드바 --- */
html.dark-mode #sbc_left_sidebar,
html.dark-mode #sbc_sidebar {
	background: #1a1b1e;
}
html.dark-mode .sbc-sidebar-body {
	background: #1a1b1e;
}
html.dark-mode .sbc-sidebar-body a {
	color: #d1d5db;
}
html.dark-mode .sbc-sidebar-body a:hover {
	color: #fff;
	background: rgba(255,255,255,0.05);
}
html.dark-mode .sbc-sidebar-body .active > a,
html.dark-mode .sbc-sidebar-body a.active {
	color: #60a5fa;
}
html.dark-mode .sbc-sidebar-logo {
	border-bottom-color: #2c2d32;
}

/* --- 좌측 사이드바 헤더(로고) & 배너 --- */
html.dark-mode .sbc-sidebar-header {
	background: #1a1b1e;
	border-bottom-color: #2c2d32;
}
html.dark-mode .sbc-sidebar-header .sbc-logo-text {
	color: #e5e7eb;
}
html.dark-mode .sbc-sidebar-banner {
	background: #1a1b1e;
	border-bottom-color: #2c2d32;
}

/* --- 우측 사이드바 --- */
html.dark-mode #sbc_right_sidebar {
	background: #1e1f23;
}
html.dark-mode .sbc-right-inner {
	background: #1e1f23;
}

/* --- 프로필 카드 --- */
html.dark-mode .sbc-profile-card {
	background: #25262b;
}
html.dark-mode .sbc-profile-upper {
	background: #25262b;
}
html.dark-mode .sbc-profile-nick {
	color: #f3f4f6;
}
html.dark-mode .sbc-myinfo-btn {
	color: #6b7280;
}
html.dark-mode .sbc-myinfo-btn:hover {
	color: #e5e7eb;
	background: rgba(255,255,255,0.1);
}
html.dark-mode .sbc-profile-grade {
	background: #3a3b40;
	color: #9ca3af;
}
html.dark-mode .sbc-profile-level-label {
	color: #9ca3af;
}
html.dark-mode .sbc-profile-level-track {
	background: rgba(255,255,255,0.08);
}
html.dark-mode .sbc-profile-level-pct {
	color: #6b7280;
}
html.dark-mode .sbc-profile-money-info {
	background: #2c2d32;
}
html.dark-mode .sbc-profile-money-label {
	color: #6b7280;
}
html.dark-mode .sbc-profile-money-amount {
	color: #f3f4f6;
}
html.dark-mode .sbc-profile-money-unit {
	color: #6b7280;
}
html.dark-mode .sbc-profile-charge-btn {
	background: #2a3452;
	color: #8babf0;
}
html.dark-mode .sbc-profile-charge-btn:hover {
	background: #3b5bbe;
	color: #fff;
}
html.dark-mode .sbc-profile-lower {
	background: #25262b;
}
html.dark-mode .sbc-profile-menu-item {
	background: #2c2d32;
}
html.dark-mode .sbc-profile-menu-item:hover {
	background: #1e2a3a;
}
html.dark-mode .sbc-profile-menu-item:hover .sbc-profile-menu-icon--bookmark,
html.dark-mode .sbc-profile-menu-item:hover .sbc-profile-menu-icon--check,
html.dark-mode .sbc-profile-menu-item:hover .sbc-profile-menu-icon--memo,
html.dark-mode .sbc-profile-menu-item:hover .sbc-profile-menu-icon--user {
	color: #93bbfd;
}
html.dark-mode .sbc-profile-menu-label {
	color: #9ca3af;
}
html.dark-mode .sbc-profile-menu-icon--bookmark,
html.dark-mode .sbc-profile-menu-icon--check,
html.dark-mode .sbc-profile-menu-icon--memo,
html.dark-mode .sbc-profile-menu-icon--user {
	color: #60a5fa;
}
html.dark-mode .sbc-profile-menu-icon--noti {
	background: #33281e;
	color: #f59e0b;
}

/* 알림/쪽지 아이콘 */
html.dark-mode .sbc-user-header-icons {
	background: #2c2d32;
}
html.dark-mode .sbc-hicon-divider {
	background: #3a3b40;
}
html.dark-mode .sbc-user-hicon--noti,
html.dark-mode .sbc-user-hicon--memo {
	background: none;
	color: #9ca3af;
}
html.dark-mode .sbc-user-hicon--noti:hover,
html.dark-mode .sbc-user-hicon--memo:hover {
	background: #3a3b40;
	color: #e5e7eb;
}
html.dark-mode .sbc-noti-dot,
html.dark-mode .sbc-memo-dot {
	border-color: #2c2d32;
}

/* --- 로그인 카드 --- */
html.dark-mode .sbc-login-card {
	background: #25262b;
}
html.dark-mode .sbc-login-card-title {
	color: #e5e7eb;
}
html.dark-mode .sbc-login-card input {
	background: #2c2d32;
	border-color: #3a3b40;
	color: #e5e7eb;
}

/* --- 채팅 --- */
html.dark-mode .sbc-chat-wrap {
	background: #1a1b1e;
}
html.dark-mode .sbc-chat-header {
	background: #25262b;
	border-top-color: #333638;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
html.dark-mode .sbc-chat-tab {
	color: #9ca3af;
}
html.dark-mode .sbc-chat-tab.active {
	color: #f3f4f6;
}
html.dark-mode .sbc-chat-tab.active::after {
	background: #60a5fa;
}
html.dark-mode .sbc-chat-messages {
	background: #1a1b1e;
}
html.dark-mode .sbc-chat-messages::-webkit-scrollbar-thumb {
	background: #3a3b40;
}
html.dark-mode .sbc-chat-messages::-webkit-scrollbar-track {
	background: #1a1b1e;
}
html.dark-mode .sbc-chat-bubble {
	border-bottom-color: #2c2d32;
}
html.dark-mode .sbc-chat-avatar {
	background: #2c2d32;
	color: #6b7280;
	border-color: #3a3b40;
}
html.dark-mode .sbc-chat-nick {
	color: #9ca3af;
}
html.dark-mode .sbc-chat-text {
	background: #2c2d32;
	color: #e5e7eb;
}
html.dark-mode .sbc-chat-time {
	color: #4b5563;
}
html.dark-mode .sbc-chat-system {
	background: #25262b;
	color: #6b7280;
}
html.dark-mode .sbc-chat-input {
	background: #1a1b1e;
	box-shadow: none;
	border-top: 1px solid rgba(255,255,255,0.04);
}
html.dark-mode .sbc-chat-input-row {
	background: rgba(255,255,255,0.06);
	border: none;
}
html.dark-mode .sbc-chat-input-bar.is-focused .sbc-chat-input-row,
html.dark-mode .sbc-chat-input-bar.has-text .sbc-chat-input-row {
	border: none;
	box-shadow: 0 0 0 1.5px rgba(96,165,250,0.35);
}
html.dark-mode .sbc-chat-addon,
html.dark-mode .sbc-chat-addon:hover,
html.dark-mode .sbc-chat-addon:focus,
html.dark-mode .sbc-chat-addon:active {
	background: transparent !important;
	border: none;
	box-shadow: none;
	filter: none;
	color: #6b7280;
}
html.dark-mode .sbc-chat-addon:hover {
	color: #9ca3af;
}
html.dark-mode .sbc-chat-input-row input,
html.dark-mode .sbc-chat-input-row input:focus {
	background: transparent !important;
	border: none;
	box-shadow: none;
	filter: none;
	color: #e5e7eb;
}
html.dark-mode .sbc-send-btn {
	background: #3a3b40;
	color: #6b7280;
}
html.dark-mode .sbc-chat-input-bar.is-focused .sbc-send-btn,
html.dark-mode .sbc-chat-input-bar.has-text .sbc-send-btn {
	background: #2563eb;
	color: #fff;
}
html.dark-mode .sbc-chat-input-bar.is-focused .sbc-send-btn:hover,
html.dark-mode .sbc-chat-input-bar.has-text .sbc-send-btn:hover {
	filter: brightness(1.1);
}
html.dark-mode .sbc-chat-empty {
	color: #6b7280;
}
html.dark-mode .sbc-chat-empty-icon {
	background: linear-gradient(135deg, #2c2d32 0%, #25262b 100%);
}
html.dark-mode .sbc-chat-bubble.sbc-chat-hidden {
	background: rgba(255,255,255,0.02);
}
html.dark-mode .sbc-chat-hidden-badge {
	background: #3a3b40;
	color: #9ca3af;
}

/* --- 채팅 관리 --- */
html.dark-mode .sbc-chat-admin-actions {
	background: #2c2d32;
}
html.dark-mode .sbc-admin-act-btn {
	color: #9ca3af;
}
html.dark-mode .sbc-admin-act-btn:hover {
	background: #3a3b40;
	color: #e5e7eb;
}
html.dark-mode .sbc-chat-blind-overlay {
	background: rgba(26,27,30,0.85);
}

/* --- 하단 네비 --- */
html.dark-mode .sbc-bottom-nav {
	background: #1e1f23;
	border-top-color: #333638;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}
html.dark-mode .sbc-bottom-nav-item {
	color: #6b7280;
}
html.dark-mode .sbc-bottom-nav-item.active {
	color: #60a5fa;
}

/* --- 내정보/채팅 패널 --- */
html.dark-mode .sbc-panel-overlay {
	background: rgba(0,0,0,0.6);
}
html.dark-mode .sbc-myinfo-panel {
	background: #1e1f23;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
html.dark-mode .sbc-myinfo-panel-header {
	background: #25262b;
	border-bottom-color: #333638;
}
html.dark-mode .sbc-myinfo-panel-title {
	color: #e5e7eb;
}
html.dark-mode .sbc-mp-nick {
	color: #f3f4f6;
}
html.dark-mode .sbc-mp-level {
	color: #9ca3af;
}
html.dark-mode .sbc-mp-money {
	background: #2c2d32;
}
html.dark-mode .sbc-mp-money-label {
	color: #9ca3af;
}
html.dark-mode .sbc-mp-money-amount {
	color: #f3f4f6;
}
html.dark-mode .sbc-mp-menu-item {
	color: #d1d5db;
	border-bottom-color: #2c2d32;
}
html.dark-mode .sbc-mp-menu-item:hover {
	background: #25262b;
}
html.dark-mode .sbc-mp-menu-logout {
	color: #ef4444;
}
html.dark-mode .sbc-chat-panel {
	background: #1e1f23;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
html.dark-mode .sbc-chat-panel-header {
	background: #25262b;
	border-bottom-color: #333638;
}
html.dark-mode .sbc-chat-panel-title {
	color: #e5e7eb;
}

/* --- 스크롤 탑 버튼 --- */
html.dark-mode .ts-scroll-top {
	background: #2c2d32;
	color: #9ca3af;
	border-color: #3a3b40;
}
html.dark-mode .ts-scroll-top:hover {
	background: #3a3b40;
	color: #e5e7eb;
}

/* --- 탑바 텍스트/아이콘 보완 --- */
html.dark-mode .sbc-topbar-logo-text {
	color: #e5e7eb;
}
html.dark-mode .sbc-topbar-menu-item {
	color: #d1d5db;
}
html.dark-mode .sbc-topbar-user-name {
	color: #e5e7eb;
}
html.dark-mode .sbc-user-hicon {
	color: #6b7280;
}
html.dark-mode .sbc-user-hicon:hover {
	background: rgba(255,255,255,0.06);
	color: #d1d5db;
}

/* --- 좌측 사이드바 메뉴 hover/active 보완 --- */
html.dark-mode .sbc-single-link:hover {
	background: rgba(255,255,255,0.05);
}
html.dark-mode .sbc-sub-list li a {
	color: #9ca3af;
}
html.dark-mode .sbc-sub-list li a .sbc-dot {
	color: #4b5563;
}
html.dark-mode .sbc-sub-list li a .sbc-chevron {
	color: #4b5563;
}
html.dark-mode .sbc-sub-list li a:hover {
	background: rgba(255,255,255,0.05);
	color: #e5e7eb;
}
html.dark-mode .sbc-sub-list li a:hover .sbc-chevron {
	color: #6b7280;
}
html.dark-mode .sbc-sub-list li.active > a {
	color: #60a5fa;
	background: rgba(96,165,250,0.1);
}
html.dark-mode .sbc-menu-section {
	background: transparent;
	border-bottom-color: #2c2d32;
}
html.dark-mode .sbc-section-header .sbc-sh-text {
	color: #e5e7eb;
}
html.dark-mode .sbc-section-header .sbc-sh-icon {
	color: #6b7280;
}
html.dark-mode .sbc-sh-icon.sbc-icon-badge {
	color: #6b7280;
}
html.dark-mode .sbc-sub-line span {
	color: #6b7280;
	border-bottom-color: #333638;
}
html.dark-mode .sbc-sub-list-depth2 li a {
	color: #6b7280;
}
html.dark-mode .sbc-sub-list li.active > a .sbc-dot {
	color: #60a5fa;
}
html.dark-mode .sbc-menu-highlight {
	background: #25262b;
}
html.dark-mode .sbc-menu-highlight.sbc-hl-danger {
	background: #25262b;
}
html.dark-mode .sbc-menu-highlight .sbc-highlight-link:hover {
	background: rgba(255,255,255,0.04);
}
html.dark-mode .sbc-menu-highlight .sbc-hl-icon {
	color: #6b7280;
}
html.dark-mode .sbc-menu-highlight .sbc-hl-text {
	color: #d1d5db;
}
html.dark-mode .sbc-menu-highlight .sbc-hl-chevron {
	color: #4b5563;
}

/* --- 내정보 드롭다운 메뉴 보완 --- */
html.dark-mode .sbc-myinfo-menu {
	background: #25262b;
	border-color: #3a3b40;
}
html.dark-mode .sbc-myinfo-menu::after {
	background: #25262b;
	border-color: #3a3b40;
}
html.dark-mode .sbc-myinfo-item {
	color: #d1d5db;
}
html.dark-mode .sbc-myinfo-item:hover {
	background: rgba(255,255,255,0.05);
}
html.dark-mode .sbc-myinfo-item i {
	color: #6b7280;
}
html.dark-mode .sbc-myinfo-divider {
	background: #333638;
}
html.dark-mode .sbc-myinfo-logout:hover {
	background: rgba(239,68,68,0.1);
}

/* --- 채팅 유틸 버튼 보완 --- */
html.dark-mode .sbc-chat-clear:hover,
html.dark-mode .sbc-chat-info-btn:hover {
	background: rgba(255,255,255,0.06);
}
html.dark-mode .sbc-emoji-item:hover {
	background: rgba(255,255,255,0.06);
}
html.dark-mode .sbc-emoji-picker {
	background: #25262b;
	border-color: #3a3b40;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* --- 봇 컴포넌트 --- */
html.dark-mode .sbc-bot-status-badge {
	background: #2c2d32;
	color: #6b7280;
}
html.dark-mode .sbc-bot-status-badge.sbc-bot-on {
	background: rgba(0,184,148,0.12);
	color: #34d399;
}
html.dark-mode .sbc-bot-status-badge.sbc-bot-off {
	background: rgba(240,68,82,0.12);
	color: #f87171;
}
html.dark-mode .sbc-bot-user-nick {
	color: #e5e7eb;
}
html.dark-mode .sbc-bot-cat-item {
	background: #2c2d32;
	border-color: #3a3b40;
	color: #d1d5db;
}
html.dark-mode .sbc-bot-cat-item:hover {
	background: rgba(59,130,246,0.1);
	border-color: rgba(59,130,246,0.3);
}
html.dark-mode .sbc-bot-btn-reset {
	background: #2c2d32;
	color: #9ca3af;
}
html.dark-mode .sbc-bot-panel-footer {
	background: #1e1f23;
	border-top-color: #333638;
}

/* ============================================================
   다크모드 보완 — 사이드바 누락 오버라이드
   ============================================================ */

/* --- 사이드바 푸터 --- */
html.dark-mode .sbc-sidebar-footer {
	background: #1a1b1e;
	border-top-color: #333638;
}
html.dark-mode .sbc-sidebar-footer .sbc-stats li {
	color: #6b7280;
}
html.dark-mode .sbc-sidebar-footer .sbc-stats li span:last-child {
	color: #d1d5db;
}

/* --- 패널 닫기 버튼 --- */
html.dark-mode .sbc-panel-close {
	background: #2c2d32;
	color: #9ca3af;
}
html.dark-mode .sbc-panel-close:hover {
	background: #3a3b40;
	color: #e5e7eb;
}

/* --- 내정보 패널 보완 --- */
html.dark-mode .sbc-mp-menu {
	border-top-color: #2c2d32;
}
html.dark-mode .sbc-mp-menu-item i {
	color: #6b7280;
}
html.dark-mode .sbc-mp-login-msg {
	color: #6b7280;
}
html.dark-mode .sbc-mp-login-msg a {
	color: #60a5fa;
}
html.dark-mode .sbc-myinfo-logout {
	color: #f87171;
}

/* --- 탑바 헤더 아이콘 --- */
html.dark-mode .sbc-user-hicon {
	color: #6b7280;
}
html.dark-mode .sbc-user-hicon:hover {
	background: rgba(255,255,255,0.06);
	color: #d1d5db;
}

/* --- 채팅 규칙 팝업 --- */
html.dark-mode .sbc-chat-rules-header span {
	color: #e5e7eb;
}
html.dark-mode .sbc-chat-rules-header button {
	color: #6b7280;
}
html.dark-mode .sbc-chat-rules-list li {
	color: #9ca3af;
}
html.dark-mode .sbc-chat-rules-list li::before {
	background: #4b5563;
}

/* --- 채팅 기타 --- */
html.dark-mode .sbc-chat-clear {
	color: #6b7280;
}
html.dark-mode .sbc-chat-empty-icon {
	color: #60a5fa;
}
html.dark-mode .sbc-chat-empty p {
	color: #d1d5db;
}
html.dark-mode .sbc-chat-empty span {
	color: #6b7280;
}
html.dark-mode .sbc-chat-input-row input::placeholder {
	color: #6b7280;
}

/* --- 채팅 로그인 메시지 --- */
html.dark-mode .sbc-chat-login-msg {
	border-top-color: #333638;
	color: #6b7280;
}
html.dark-mode .sbc-chat-login-icon {
	background: #2c2d32;
	color: #6b7280;
}
html.dark-mode .sbc-chat-login-msg a {
	color: #60a5fa;
}

/* --- 사이드바 검색박스 --- */
html.dark-mode .sbc-search-box {
	background: rgba(255,255,255,0.06);
}
html.dark-mode .sbc-search-box:focus-within {
	background: rgba(255,255,255,0.08);
	border-color: rgba(96,165,250,0.4);
	box-shadow: 0 0 0 3px rgba(96,165,250,0.1);
}
html.dark-mode .sbc-search-box i {
	color: #6b7280;
}
html.dark-mode .sbc-search-box:focus-within i {
	color: #60a5fa;
}
html.dark-mode .sbc-search-box input {
	color: #e5e7eb;
}
html.dark-mode .sbc-search-box input::placeholder {
	color: #6b7280;
}

/* --- 프로필 아바타 --- */
html.dark-mode .sbc-profile-avatar {
	background: #2c2d32;
}
html.dark-mode .sbc-profile-avatar-icon {
	color: #6b7280;
}

/* --- 로그인 카드 (우측 사이드바) --- */
html.dark-mode .sbc-login-card {
	border-bottom-color: #333638;
}
html.dark-mode .sbc-login-card-title .sbc-header-blue {
	color: #60a5fa;
}
html.dark-mode .sbc-login-input::placeholder {
	color: #6b7280;
}
html.dark-mode .sbc-login-input:focus {
	border-color: #60a5fa;
}
html.dark-mode .sbc-login-utils label {
	color: #9ca3af;
}
html.dark-mode .sbc-login-utils a {
	color: #6b7280 !important;
}
html.dark-mode .sbc-login-utils a:hover {
	color: #60a5fa !important;
}
html.dark-mode .sbc-login-footer {
	border-top-color: #333638;
	color: #6b7280;
}
html.dark-mode .sbc-login-footer a {
	color: #60a5fa !important;
}

/* --- 메뉴 하이라이트 danger 보완 --- */
html.dark-mode .sbc-menu-highlight.sbc-hl-danger .sbc-hl-text {
	color: #d1d5db;
}