/*
 * sbox 화면 스타일
 * 연한 파란 배경, 남색 글자, 흰 카드, 절제된 파란 버튼(sdoor 테마 색·간격을 sbox 이름으로 옮김).
 * 고객 화면은 --sbox-brand 로 가맹 브랜드 대표색을 덮어쓸 수 있다.
 */
:root {
	--sbox-bg: #f2f8ff;
	--sbox-surface: #ffffff;
	--sbox-soft: #e9f4ff;
	--sbox-hover: #d9ecff;
	--sbox-border: #d6e6f5;
	--sbox-text: #263f59;
	--sbox-muted: #617890;
	--sbox-blue: #1468c5;
	--sbox-blue-hover: #0e55a3;
	--sbox-accent: #0b579f;
	--sbox-input: #ffffff;
	--sbox-brand: var(--sbox-blue);
	--sbox-radius: 10px;
	--sbox-nav-h: 64px;
	color-scheme: light;
}

html[data-sbox-theme="dark"] {
	--sbox-bg: #111d2c;
	--sbox-surface: #1b2b3f;
	--sbox-soft: #243b55;
	--sbox-hover: #2a4969;
	--sbox-border: #3b536e;
	--sbox-text: #e4effb;
	--sbox-muted: #b0c4db;
	--sbox-blue: #236aba;
	--sbox-blue-hover: #1a599e;
	--sbox-accent: #9dd1ff;
	--sbox-input: #142337;
	color-scheme: dark;
}

html,
body {
	background: var(--sbox-bg);
	color: var(--sbox-text);
	font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sbox-text);
}

a:not(.btn):not(.dropdown-item):not(.list-group-item):not(.card) {
	color: var(--sbox-accent);
}

.text-muted {
	color: var(--sbox-muted) !important;
}

/* ───────── Bootstrap 구성요소 색 ───────── */

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
	background: var(--sbox-surface);
	color: var(--sbox-text);
	border-color: var(--sbox-border);
}

.card-header {
	background: var(--sbox-soft);
	border-bottom: 1px solid var(--sbox-border);
	color: var(--sbox-text);
}

.modal-header,
.modal-footer {
	border-color: var(--sbox-border);
}

.modal-header {
	background: var(--sbox-soft);
}

.modal-title {
	font-weight: 700;
	font-size: 1.1rem;
}

.modal-content .close {
	color: var(--sbox-text);
	text-shadow: none;
	opacity: .8;
}

.modal-dialog-scrollable .modal-body {
	overscroll-behavior: contain;
}

.dropdown-item {
	color: var(--sbox-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--sbox-hover);
	color: var(--sbox-accent);
}

.dropdown-divider {
	border-color: var(--sbox-border);
}

.form-control,
.custom-select {
	background-color: var(--sbox-input);
	border-color: var(--sbox-border);
	color: var(--sbox-text);
}

.form-control:focus,
.custom-select:focus {
	background-color: var(--sbox-input);
	border-color: var(--sbox-accent);
	color: var(--sbox-text);
	box-shadow: 0 0 0 .2rem rgba(69, 150, 231, .2);
}

.form-control::placeholder {
	color: var(--sbox-muted);
	opacity: 1;
}

.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
	background-color: var(--sbox-soft);
	color: var(--sbox-muted);
}

input[type="color"].form-control {
	padding: .2rem .4rem;
	max-width: 120px;
}

.custom-control-label::before {
	background-color: var(--sbox-input);
	border-color: var(--sbox-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--sbox-blue);
	border-color: var(--sbox-blue);
}

.invalid-feedback:empty {
	display: none !important;
}

.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-feedback {
	display: block;
}

.btn-primary {
	background: var(--sbox-blue);
	border-color: var(--sbox-blue);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background: var(--sbox-blue-hover);
	border-color: var(--sbox-blue-hover);
	color: #fff;
}

.btn-outline-primary {
	color: var(--sbox-accent);
	border-color: var(--sbox-accent);
	background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background: var(--sbox-blue);
	border-color: var(--sbox-blue);
	color: #fff;
}

.btn-secondary {
	background: var(--sbox-soft);
	border-color: var(--sbox-border);
	color: var(--sbox-text);
}

.btn-secondary:hover {
	background: var(--sbox-hover);
	border-color: var(--sbox-border);
	color: var(--sbox-text);
}

.btn-link {
	color: var(--sbox-accent);
}

.btn:disabled {
	cursor: not-allowed;
}

.table {
	color: var(--sbox-text);
}

.table thead th {
	background: var(--sbox-soft);
	color: var(--sbox-text);
	border-color: var(--sbox-border);
	white-space: nowrap;
	font-weight: 600;
}

.table td,
.table th {
	border-color: var(--sbox-border);
	vertical-align: middle;
}

.table-hover tbody tr:hover {
	background: var(--sbox-hover);
	color: var(--sbox-text);
}

html[data-sbox-theme="dark"] .sbox-admin .table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--sbox-soft);
}

html[data-sbox-theme="dark"] .sbox-admin .table-hover tbody tr:hover {
	background-color: var(--sbox-hover);
}

html[data-sbox-theme="dark"] .alert-success { background: #143e33; color: #bcf1d7; border-color: #357a60; }
html[data-sbox-theme="dark"] .alert-danger { background: #4d2531; color: #ffced9; border-color: #955063; }
html[data-sbox-theme="dark"] .alert-warning { background: #4a3c17; color: #ffe8a8; border-color: #8a6f2a; }
html[data-sbox-theme="dark"] .alert-info { background: #173a52; color: #c4e6ff; border-color: #2f6a92; }
html[data-sbox-theme="dark"] .alert-secondary { background: var(--sbox-soft); color: var(--sbox-text); border-color: var(--sbox-border); }

.sbox-badge {
	font-weight: 600;
	padding: .35em .6em;
	border-radius: .3rem;
}

.badge-secondary {
	background: var(--sbox-soft);
	color: var(--sbox-muted);
}

.badge-primary {
	background: var(--sbox-brand);
}

.sbox-pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ───────── 상태 표시 ───────── */

.sbox-state {
	padding: 28px 16px;
	text-align: center;
	color: var(--sbox-muted);
}

.sbox-empty {
	border: 1px dashed var(--sbox-border);
	border-radius: var(--sbox-radius);
	background: var(--sbox-surface);
	margin-bottom: 16px;
}

.sbox-error {
	color: #b23a48;
}

html[data-sbox-theme="dark"] .sbox-error {
	color: #ffb3c0;
}

.sbox-demo-banner {
	position: sticky;
	top: 0;
	z-index: 1050;
	padding: 6px 12px;
	background: #fff3cd;
	color: #6b4e00;
	border-bottom: 1px solid #f0d77b;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

/* ───────── 고객 화면 ───────── */

.sbox-customer {
	min-height: 100vh;
	padding-bottom: calc(var(--sbox-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
}

.sbox-skip:focus {
	position: absolute;
	z-index: 2000;
	padding: 8px 12px;
	background: var(--sbox-surface);
}

.sbox-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--sbox-surface);
	border-bottom: 1px solid var(--sbox-border);
}

.sbox-demo-banner + .sbox-header {
	top: 31px;
}

.sbox-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 640px;
	min-height: 56px;
	margin: 0 auto;
	padding: 8px 16px;
}

.sbox-brand,
.sbox-brand:hover {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--sbox-text) !important;
}

.sbox-brand-text {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--sbox-brand);
}

.sbox-brand-logo {
	max-height: 36px;
	max-width: 180px;
	width: auto;
	object-fit: contain;
}

.sbox-header-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--sbox-text) !important;
	font-size: 1.1rem;
}

.sbox-main {
	max-width: 640px;
	margin: 0 auto;
	padding: 16px;
}

.sbox-customer .btn-primary {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
}

.sbox-customer .btn-primary:hover,
.sbox-customer .btn-primary:focus {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
	filter: brightness(.92);
}

.sbox-customer .btn-outline-primary {
	color: var(--sbox-brand);
	border-color: var(--sbox-brand);
}

.sbox-customer .btn-outline-primary:hover {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
	color: #fff;
}

.sbox-customer .btn {
	min-height: 44px;
	border-radius: 8px;
}

.sbox-customer .btn-sm {
	min-height: 36px;
}

.sbox-customer .form-control,
.sbox-customer .custom-select {
	min-height: 46px;
	font-size: 16px;
	border-radius: 8px;
}

.sbox-customer textarea.form-control {
	min-height: 0;
}

.sbox-page-title {
	margin: 4px 0 12px;
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--sbox-text);
	overflow-wrap: anywhere;
}

.sbox-page-lead {
	color: var(--sbox-muted);
	margin-bottom: 16px;
}

.sbox-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	font-size: 14px;
	text-decoration: none;
}

.sbox-card {
	margin-bottom: 16px;
	border: 1px solid var(--sbox-border);
	border-radius: var(--sbox-radius);
	box-shadow: 0 2px 10px rgba(18, 61, 100, .05);
}

.sbox-card .card-body {
	padding: 20px;
}

.sbox-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 14px;
}

.sbox-card-active {
	border-color: var(--sbox-brand);
	box-shadow: 0 0 0 2px var(--sbox-soft);
}

.sbox-card-muted {
	background: var(--sbox-soft);
}

.sbox-card-blocked {
	opacity: .85;
	border-color: #e3a4ad;
}

.sbox-section-title {
	margin: 24px 0 12px;
	font-size: 1.05rem;
	font-weight: 700;
}

.sbox-subtitle {
	margin: 14px 0 8px;
	font-size: .95rem;
	font-weight: 700;
}

.sbox-kv {
	display: grid;
	grid-template-columns: minmax(92px, 32%) minmax(0, 1fr);
	gap: 6px 12px;
	margin: 0 0 12px;
}

.sbox-kv dt {
	font-weight: 600;
	color: var(--sbox-muted);
	font-size: 14px;
}

.sbox-kv dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.sbox-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sbox-links {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	font-size: 14px;
}

.sbox-search {
	margin-bottom: 16px;
}

.sbox-office-card {
	display: block;
	text-decoration: none !important;
	color: var(--sbox-text) !important;
	transition: border-color .15s ease;
}

a.sbox-office-card:hover,
a.sbox-office-card:focus {
	border-color: var(--sbox-brand);
}

.sbox-office-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 8px;
	overflow-wrap: anywhere;
}

.sbox-office-meta {
	margin: 0 0 4px;
	color: var(--sbox-muted);
	font-size: 14px;
}

.sbox-office-meta .fas {
	width: 16px;
	text-align: center;
	color: var(--sbox-brand);
}

.sbox-chevron {
	color: var(--sbox-muted);
}

.sbox-office-context {
	margin: -6px 0 10px;
	color: var(--sbox-muted);
	font-weight: 600;
}

.sbox-product-list {
	margin: 0;
}

.sbox-product {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--sbox-border);
}

.sbox-product:first-child {
	border-top: 0;
}

.sbox-product-buy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

.sbox-price {
	font-weight: 800;
	font-size: 1.05rem;
	white-space: nowrap;
}

.sbox-area-title {
	margin: 16px 0 8px;
	font-size: .95rem;
	font-weight: 700;
	color: var(--sbox-muted);
}

.sbox-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.sbox-resource {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 8px 4px;
	border: 1px solid var(--sbox-border);
	border-radius: 8px;
	background: var(--sbox-surface);
	color: var(--sbox-text);
	cursor: pointer;
}

.sbox-resource:hover:not(:disabled),
.sbox-resource:focus-visible {
	border-color: var(--sbox-brand);
	outline: none;
}

.sbox-resource.active {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
	color: #fff;
}

.sbox-resource:disabled {
	background: var(--sbox-soft);
	color: var(--sbox-muted);
	cursor: not-allowed;
	text-decoration: line-through;
}

.sbox-resource-label {
	font-weight: 700;
}

.sbox-resource-state {
	font-size: 11px;
}

.sbox-total-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	margin: 8px 0;
	border-top: 1px solid var(--sbox-border);
	font-size: 1.05rem;
}

.sbox-total-line strong {
	font-size: 1.2rem;
}

.sbox-line-items {
	margin: 0 0 8px;
}

.sbox-line-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sbox-border);
}

.sbox-points {
	padding: 14px;
	margin: 8px 0 12px;
	border-radius: 8px;
	background: var(--sbox-soft);
}

.sbox-point-balance {
	font-size: 2rem;
	font-weight: 800;
}

.sbox-ledger {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: var(--sbox-surface);
	color: var(--sbox-text);
}

.sbox-door-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
	margin-bottom: 8px;
}

.sbox-door {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 92px !important;
	white-space: normal;
}

.sbox-door .fas {
	font-size: 1.4rem;
}

.sbox-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	margin: 0 -16px 16px;
	padding: 0 16px 4px;
	-webkit-overflow-scrolling: touch;
}

.sbox-tabs a,
.sbox-chip-nav a {
	flex-shrink: 0;
	padding: 8px 14px;
	border: 1px solid var(--sbox-border);
	border-radius: 999px;
	background: var(--sbox-surface);
	color: var(--sbox-text) !important;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.sbox-tabs a.active {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
	color: #fff !important;
}

.sbox-chip-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sbox-timer {
	font-variant-numeric: tabular-nums;
	font-size: 1.15rem;
}

.sbox-order-status {
	margin-bottom: 12px;
}

.sbox-order-status .sbox-badge {
	font-size: .95rem;
}

.sbox-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	justify-content: space-around;
	height: calc(var(--sbox-nav-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--sbox-surface);
	border-top: 1px solid var(--sbox-border);
	box-shadow: 0 -4px 16px rgba(18, 61, 100, .06);
}

.sbox-bottom-nav a {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	max-width: 128px;
	color: var(--sbox-muted) !important;
	font-size: 12px;
	text-decoration: none;
}

.sbox-bottom-nav a .fas {
	font-size: 1.15rem;
}

.sbox-bottom-nav a.active {
	color: var(--sbox-brand) !important;
	font-weight: 700;
}

.sbox-demo-card {
	border-style: dashed;
}

/* ───────── 브랜드 블록(고객 홈·관리자 미리보기 공용) ───────── */

.sbox-block {
	margin-bottom: 16px;
}

.sbox-block-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.sbox-hero {
	padding: 32px 22px;
	border-radius: 14px;
	background: var(--sbox-brand);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .12));
	color: #fff;
}

.sbox-hero-title {
	margin: 0 0 8px;
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff !important;
	overflow-wrap: anywhere;
}

.sbox-hero-sub {
	margin: 0 0 18px;
	opacity: .92;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.sbox-hero-btn {
	color: var(--sbox-brand) !important;
	font-weight: 700;
}

.sbox-notice {
	padding: 14px 16px;
	border-radius: var(--sbox-radius);
	border: 1px solid;
}

.sbox-notice-info {
	background: #e8f3ff;
	border-color: #b8d9fb;
	color: #17406b;
}

.sbox-notice-warning {
	background: #fff6e0;
	border-color: #f1d189;
	color: #6b4a00;
}

.sbox-notice-title {
	font-weight: 700;
	margin-bottom: 6px;
}

.sbox-contact-list li {
	margin-bottom: 6px;
}

.sbox-contact-list .fas {
	width: 18px;
	color: var(--sbox-brand);
}

.sbox-branch-list .sbox-card:last-child {
	margin-bottom: 0;
}

/* ───────── 관리자 레이아웃 ───────── */

.sbox-admin {
	min-height: 100vh;
}

.sbox-admin-shell {
	display: flex;
	min-height: 100vh;
}

.sbox-admin-sidebar {
	flex: 0 0 248px;
	width: 248px;
	background: var(--sbox-surface);
	border-right: 1px solid var(--sbox-border);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.sbox-admin-brand {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 10px 18px;
	border-bottom: 1px solid var(--sbox-border);
}

/* 공식 CI(투명 SVG) 하나로 라이트/다크 공용 */
.sbox-admin-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sbox-text) !important;
	text-decoration: none !important;
}

.sbox-admin-brand .sbox-ci {
	width: auto;
	height: 42px;
	flex: 0 0 auto;
}

.sbox-admin-brand-text {
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
}

.sbox-sidebar-close {
	display: none;
}

.sbox-admin-nav {
	list-style: none;
	margin: 0;
	padding: 8px 0 24px;
}

.sbox-nav-header {
	padding: 16px 20px 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sbox-muted);
	letter-spacing: .02em;
}

.sbox-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 8px 20px;
	color: var(--sbox-text) !important;
	text-decoration: none !important;
	border-left: 3px solid transparent;
}

.sbox-nav-link .fas {
	width: 18px;
	text-align: center;
	color: var(--sbox-muted);
}

.sbox-nav-link:hover,
.sbox-nav-link:focus {
	background: var(--sbox-hover);
	color: var(--sbox-accent) !important;
}

.sbox-nav-item.active > .sbox-nav-link {
	background: var(--sbox-hover);
	border-left-color: var(--sbox-blue);
	color: var(--sbox-accent) !important;
	font-weight: 700;
}

.sbox-nav-item.active > .sbox-nav-link .fas {
	color: var(--sbox-accent);
}

.sbox-admin-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sbox-admin-topbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 8px 20px;
	background: var(--sbox-surface);
	border-bottom: 1px solid var(--sbox-border);
}

.sbox-demo-banner ~ .sbox-admin-shell .sbox-admin-topbar,
.sbox-demo-banner ~ .sbox-admin-shell .sbox-admin-sidebar {
	top: 31px;
}

.sbox-demo-banner ~ .sbox-admin-shell .sbox-admin-sidebar {
	height: calc(100vh - 31px);
}

.sbox-sidebar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
}

.sbox-hamburger,
.sbox-hamburger::before,
.sbox-hamburger::after {
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--sbox-accent);
	position: relative;
	content: "";
}

.sbox-hamburger::before {
	position: absolute;
	top: -7px;
}

.sbox-hamburger::after {
	position: absolute;
	top: 7px;
}

.sbox-office-picker {
	display: flex;
	align-items: center;
	min-width: 0;
	color: var(--sbox-accent);
}

.sbox-office-picker .custom-select {
	min-width: 180px;
	max-width: 340px;
}

.sbox-topbar-right {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.sbox-topbar-right .btn-link {
	color: var(--sbox-text);
	text-decoration: none;
}

.sbox-admin-user {
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.sbox-admin-content {
	padding: 24px;
	min-width: 0;
}

.sbox-admin-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.sbox-admin-title {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.sbox-admin-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sbox-admin-actions .custom-select-sm {
	width: auto;
	min-width: 140px;
}

.sbox-admin-card {
	margin-bottom: 20px;
	border: 1px solid var(--sbox-border);
	border-radius: 8px;
	overflow: hidden;
}

.sbox-admin-card > .card-header {
	gap: 10px;
	min-height: 52px;
	padding: 10px 16px;
}

.sbox-admin-card-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.sbox-admin-card > .card-body {
	padding: 16px;
}

.sbox-table {
	margin-bottom: 0;
	font-size: 14px;
}

.sbox-table td {
	overflow-wrap: anywhere;
}

.sbox-row-link {
	cursor: pointer;
}

.sbox-row-link:focus {
	outline: 2px solid var(--sbox-accent);
	outline-offset: -2px;
}

.sbox-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}

.sbox-stats {
	margin: 0 -6px;
	row-gap: 12px;
}

.sbox-stats > [class*="col-"] {
	padding: 0 6px;
}

.sbox-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--sbox-border);
	border-radius: 8px;
	background: var(--sbox-soft);
	color: var(--sbox-text) !important;
	text-decoration: none !important;
}

a.sbox-stat:hover,
a.sbox-stat:focus {
	border-color: var(--sbox-accent);
}

.sbox-stat-label {
	font-size: 13px;
	color: var(--sbox-muted);
}

.sbox-stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sbox-setup {
	margin: 0;
}

.sbox-setup-item {
	padding: 8px 0;
	border-bottom: 1px solid var(--sbox-border);
}

.sbox-setup-item:last-child {
	border-bottom: 0;
}

.sbox-kv-admin {
	grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
	margin-bottom: 16px;
}

.sbox-modal-section {
	margin: 22px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sbox-border);
	font-size: 1rem;
	font-weight: 700;
}

.sbox-modal .modal-body > .sbox-modal-section:first-child {
	margin-top: 0;
}

.sbox-disabled-box {
	padding: 12px 14px;
	border: 1px dashed var(--sbox-border);
	border-radius: 8px;
	background: var(--sbox-soft);
}

.sbox-check-list {
	max-height: 220px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--sbox-border);
	border-radius: 6px;
	background: var(--sbox-input);
}

.sbox-sms-body {
	padding: 12px;
	border-radius: 6px;
	background: var(--sbox-soft);
	color: var(--sbox-text);
	font-family: inherit;
}

/* 브랜드 편집기 */
.sbox-block-card {
	margin-bottom: 12px;
	border: 1px solid var(--sbox-border);
}

.sbox-block-card > .card-header {
	padding: 8px 12px;
}

.sbox-editor-toolbar {
	gap: 8px;
}

.sbox-editor-toolbar .custom-select-sm {
	width: auto;
}

.sbox-logo-preview {
	display: flex;
	align-items: center;
	min-height: 64px;
	margin-bottom: 12px;
	padding: 10px;
	border: 1px dashed var(--sbox-border);
	border-radius: 6px;
}

.sbox-logo-preview img {
	max-height: 56px;
	max-width: 100%;
}

.sbox-preview-frame {
	max-width: 420px;
	margin: 0 auto;
	border: 1px solid var(--sbox-border);
	border-radius: 18px;
	overflow: hidden;
	background: #f2f8ff;
	color: #263f59;
	--sbox-text: #263f59;
	--sbox-muted: #617890;
	--sbox-surface: #ffffff;
	--sbox-border: #d6e6f5;
	--sbox-soft: #e9f4ff;
}

.sbox-preview-frame .btn-primary {
	background: var(--sbox-brand);
	border-color: var(--sbox-brand);
}

.sbox-preview-frame .btn-outline-primary {
	color: var(--sbox-brand);
	border-color: var(--sbox-brand);
}

.sbox-preview-frame a:not(.btn) {
	color: var(--sbox-brand);
}

.sbox-preview-header {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 8px 14px;
	background: #fff;
	border-bottom: 1px solid #d6e6f5;
}

.sbox-preview-body {
	padding: 14px;
}

.sbox-preview-body .card,
.sbox-preview-body .sbox-empty {
	background: #fff;
	color: #263f59;
}

.sbox-preview-phone {
	padding: 12px 0;
}

@media (min-width: 1200px) {
	.sbox-sticky-card {
		position: sticky;
		top: 80px;
	}
}

/* 관리자 로그인 */
.sbox-admin-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	background: var(--sbox-bg);
	background-image: radial-gradient(circle at 20% 10%, var(--sbox-soft), transparent 55%);
}

.sbox-login-card {
	width: 100%;
	max-width: 400px;
	border: 1px solid var(--sbox-border);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(18, 61, 100, .18);
}

.sbox-login-card .card-body {
	padding: 28px;
}

.sbox-login-logo {
	text-align: center;
	margin-bottom: 8px;
}

.sbox-login-logo .sbox-ci {
	width: auto;
	height: 80px;
}

/* 로그인 화면만: 창고 사진 배경 + 불투명 카드 + 공식 오렌지 버튼 */
.sbox-admin-login-page .sbox-admin-login {
	background: linear-gradient(rgba(17, 29, 44, .22), rgba(17, 29, 44, .22)),
		url("../img/sbox-login-background.png") center / cover no-repeat,
		var(--sbox-bg);
}

html[data-sbox-theme="dark"] .sbox-admin-login-page .sbox-admin-login {
	background: linear-gradient(rgba(17, 29, 44, .38), rgba(17, 29, 44, .38)),
		url("../img/sbox-login-background.png") center / cover no-repeat,
		var(--sbox-bg);
}

.sbox-admin-login-page .sbox-login-card {
	background: var(--sbox-surface);
	box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}

.sbox-admin-login-page [data-theme-toggle] {
	color: var(--sbox-text);
}

.sbox-admin-login-page .btn-primary {
	background: #d1401f;
	border-color: #d1401f;
}

.sbox-admin-login-page .btn-primary:hover,
.sbox-admin-login-page .btn-primary:focus,
.sbox-admin-login-page .btn-primary:active,
.sbox-admin-login-page .btn-primary:not(:disabled):not(.disabled):active {
	background: #b3361a;
	border-color: #b3361a;
}

.sbox-admin-login-page .btn-primary:focus,
.sbox-admin-login-page .btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 .2rem rgba(224, 74, 41, .4);
}

@media (max-width: 400px) {
	.sbox-admin-login-page .sbox-admin-login {
		padding: 16px 12px;
	}

	.sbox-admin-login-page .sbox-login-card .card-body {
		padding: 22px 18px;
	}
}

@media (max-height: 640px) {
	.sbox-admin-login-page .sbox-admin-login {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.sbox-login-logo .sbox-ci {
		height: 60px;
	}

	.sbox-admin-login-page .sbox-login-title {
		margin-bottom: 12px;
	}
}

.sbox-login-title {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--sbox-muted);
	margin-bottom: 20px;
}

/* 데모 결제창 */
.sbox-demo-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff3cd;
	color: #6b4e00;
	font-size: 12px;
	font-weight: 700;
}

.sbox-demo-pg {
	padding-bottom: 24px;
}

.sbox-demo-choice {
	text-align: left;
	padding: 14px 16px;
	margin-bottom: 10px;
}

/* ───────── 반응형 ───────── */

@media (max-width: 991.98px) {
	.sbox-admin-sidebar {
		position: fixed;
		top: 0 !important;
		bottom: 0;
		left: 0;
		z-index: 1045;
		width: 280px;
		max-width: calc(100vw - 64px);
		height: 100vh !important;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .2s ease, visibility .2s ease;
	}

	.sbox-admin-sidebar.open {
		transform: translateX(0);
		visibility: visible;
	}

	.sbox-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 8px;
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		color: var(--sbox-text);
		font-size: 26px;
	}

	.sbox-sidebar-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1040;
		background: rgba(0, 0, 0, .4);
	}

	.sbox-sidebar-backdrop[hidden] {
		display: none !important;
	}

	.sbox-sidebar-toggle {
		display: inline-flex;
	}

	.sbox-admin-topbar {
		padding: 8px 12px;
		gap: 8px;
	}

	.sbox-office-picker .custom-select {
		min-width: 0;
		max-width: 46vw;
	}

	.sbox-admin-content {
		padding: 16px 12px 24px;
	}

	.sbox-admin .btn,
	.sbox-admin .custom-select,
	.sbox-admin .form-control {
		min-height: 40px;
	}

	.sbox-admin-user {
		max-width: 90px;
	}
}

@media (max-width: 575.98px) {
	.sbox-admin table.dataTable > tbody > tr:not(.child) > td {
		white-space: nowrap;
	}

	.sbox-kv,
	.sbox-kv-admin {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.sbox-card .card-body {
		padding: 16px;
	}

	.sbox-hero {
		padding: 26px 18px;
	}

	.sbox-hero-title {
		font-size: 1.35rem;
	}

	.sbox-modal .modal-dialog {
		margin: .5rem;
	}

	.sbox-office-picker .fas {
		display: none;
	}
}

/* ───────────── 관리자 목록(DataTables) ───────────── */

/* 목록 상단 버튼(신규 등록 등)과 표 사이 간격 */
.sbox-admin-content .dt-buttons {
	margin-bottom: .5rem;
}

.sbox-admin-content .dt-buttons .btn + .btn {
	margin-left: .25rem;
}

/* 표 아래 건수 선택·페이지 이동 */
.sbox-admin-content .dataTables_wrapper .dataTables_length,
.sbox-admin-content .dataTables_wrapper .dataTables_paginate {
	margin-top: .5rem;
}

.sbox-admin-content .dataTables_wrapper .dataTables_length {
	float: left;
}

.sbox-admin-content .dataTables_wrapper .dataTables_length select {
	width: auto;
	display: inline-block;
}

.sbox-admin-content .dataTables_wrapper .dataTables_processing {
	top: 3rem;
}

/* 행 안 상세 열기 링크 */
.sbox-admin-content table.dataTable a.btnForm,
.sbox-admin-content table.dataTable a[class^="btn"][data-idx] {
	cursor: pointer;
}

[data-sbox-theme="dark"] .dataTables_wrapper .page-link,
[data-sbox-theme="dark"] .dataTables_wrapper .custom-select,
[data-sbox-theme="dark"] .dataTables_wrapper .form-control {
	background-color: var(--sbox-soft);
	color: var(--sbox-text);
	border-color: var(--sbox-border);
}

[data-sbox-theme="dark"] .dataTables_wrapper .page-item.disabled .page-link {
	opacity: .5;
}

/* 겹친 모달: 아래 모달은 흐리게 두고 위 모달만 조작한다(z-index 는 sbox-common.js 가 정한다). */
.modal-backdrop.sbox-stacked + .modal-backdrop.sbox-stacked {
	opacity: .3;
}

/* 권한에 맞지 않는 관리자 메뉴·영역 숨김. 화면 상태용 d-none 과 분리한다. */
.sbox-role-hidden {
	display: none !important;
}