/* ========================================
   krewpick 플랫폼 - Common Base Styles
   KOKI ROSE PREMIUM THEME (Koki Inspired)
   ======================================== */

@font-face {
	font-family: 'Pretendard';
	src: url('/static/fonts/Pretendard-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('/static/fonts/Pretendard-Bold.woff2') format('woff2');
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
}

/* ----------------------------------------
   1. CSS Variables (Koki 로즈핑크 테마)
   ---------------------------------------- */
:root {
	/* Primary Colors - 로즈핑크 브랜드 색상 (Koki) */
	--bs-primary: #FF007F;
	--bs-primary-rgb: 255, 0, 127;
	--primary-color: #FF007F;
	--primary-dark: #D4006B;
	--primary-light: rgba(255, 0, 127, 0.1);
	--primary-hover: #FF4DA6;
	--primary-active: #D4006B;

	/* Secondary Colors (Koki Dark Plum) */
	--bs-secondary: #392540;
	--bs-secondary-rgb: 57, 37, 64;

	/* Status Colors (Koki 스타일) */
	--bs-success: #2bc155;
	--bs-success-rgb: 43, 193, 85;
	--success: #2bc155;
	--success-light: rgba(43, 193, 85, 0.1);

	--bs-info: #2F4CDD;
	--bs-info-rgb: 47, 76, 221;
	--info: #2F4CDD;
	--info-light: rgba(47, 76, 221, 0.1);

	--bs-warning: #ffb800;
	--bs-warning-rgb: 255, 184, 0;
	--warning: #ffb800;
	--warning-light: rgba(255, 184, 0, 0.1);

	--bs-danger: #f35757;
	--bs-danger-rgb: 243, 87, 87;
	--danger: #f35757;
	--danger-light: rgba(243, 87, 87, 0.1);

	/* Background Colors (Koki Light) */
	--bs-body-bg: #f6f6f6;
	--bg-main: #f6f6f6;
	--bg-secondary: #ffffff;
	--bg-card: #ffffff;
	--bg-light: #f6f6f6;
	--bg-hover: #f0f0f0;
	--card-bg: #ffffff;

	/* Text Colors (Koki 스타일) */
	--bs-body-color: #475569;
	--bs-heading-color: #1f2937;
	--text-primary: #1f2937;
	--text-dark: #1f2937;
	--text-secondary: #475569;
	--text-gray: #475569;
	--text-muted: #64748b;
	--text-light: #94a3b8;

	/* Gray Scale (Koki) */
	--bs-gray-100: #f6f6f6;
	--bs-gray-200: #EEEEEE;
	--bs-gray-300: #d7dae3;
	--bs-gray-400: #c8c8c8;
	--bs-gray-500: #a1a1a1;
	--bs-gray-600: #7e7e7e;
	--bs-gray-700: #5b5b5b;
	--bs-gray-800: #3e4954;
	--bs-gray-900: #3d4465;

	/* Border (Koki) */
	--border-color: #EEEEEE;
	--border-primary: rgba(255, 0, 127, 0.3);
	--bs-border-radius: 0.75rem;
	--bs-border-radius-sm: 0.5rem;
	--bs-border-radius-lg: 0.75rem;
	--bs-border-radius-xl: 1rem;
	--border-radius: 0.75rem;
	--border-radius-lg: 0.75rem;

	/* Shadows (Koki 스타일 - 더 부드러운 그림자) */
	--shadow-sm: none;
	--shadow: none;
	--shadow-lg: none;
	--card-shadow: none;

	/* Transition */
	--transition: all 0.5s ease-in-out;
	--transition-fast: all 0.2s ease;

	/* Font */
	--bs-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	--font-sans: var(--bs-font-family);
}

/* ----------------------------------------
   2. Reset & Base Styles
   ---------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--bs-font-family);
	background: var(--bg-main);
	color: var(--bs-body-color);
	min-height: 100vh;
	line-height: 1.5;
	font-size: 0.875rem;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

body :where(*):not(i):not(code):not(kbd):not(pre):not(samp):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.product-money-text):not(.amount):not(.amount-text):not(.sales-amount):not(.price-sale):not(.price-supply):not(.supply-price):not(.sale-price):not(.stock-count):not(.commission-rate):not(.rank-badge):not(.product-qty):not(.product-rank-qty) {
	font-family: var(--bs-font-family) !important;
	letter-spacing: 0 !important;
	-webkit-font-smoothing: auto !important;
	-moz-osx-font-smoothing: auto !important;
}

body :where(input, button, select, textarea) {
	font-family: var(--bs-font-family) !important;
	letter-spacing: 0 !important;
}

body :where(code, kbd, pre, samp, .code, .monospace) {
	font-family: 'SF Mono', 'Cascadia Mono', 'Consolas', 'Malgun Gothic', monospace !important;
}

body :where(.fa, .fas, .far, .fal, .fa-solid, .fa-regular) {
	font-family: "Font Awesome 6 Free" !important;
}

body :where(.fab, .fa-brands) {
	font-family: "Font Awesome 6 Brands" !important;
}

/* PC web app typography floor */
.app-layout :where(
	.card,
	.dashboard-card,
	.stat-card,
	.table-container,
	.data-table,
	.modal,
	.modal-container,
	.modal-body,
	.modal-footer,
	.search-card,
	.form-control,
	.dropdown-menu,
	.bulk-dropdown-menu,
	.toast,
	.alert,
	.popup,
	.popover,
	.page-header,
	.sidebar,
	.top-header
) {
	font-family: var(--bs-font-family) !important;
	letter-spacing: 0 !important;
	-webkit-font-smoothing: auto !important;
	-moz-osx-font-smoothing: auto !important;
}

.app-layout :where(
	.data-table th,
	.data-table td,
	table th,
	table td,
	.table-info,
	.pagination-btn,
	.pagination-ellipsis,
	.form-label,
	.search-label,
	label,
	.card-subtitle,
	.dashboard-card-subtitle,
	.modal-body,
	.modal-body p,
	.modal-body li,
	.modal-body td,
	.modal-body th,
	.modal-footer .btn,
	.bulk-dropdown-item,
	.dropdown-item,
	.badge,
	[class*="badge-"],
	.member-action-btn,
	.btn,
	.order-product-seller,
	.order-product-meta,
	.product-meta,
	.stat-change,
	.group-card-footer span,
	.monitor-section span,
	.table-list-container span,
	.table-list-header span,
	.product-name-cell,
	.product-qty,
	.product-brand,
	.product-category,
	.usage-reason,
	.channel-info,
	.channel,
	.inf-channel-sales,
	.naver-card-category,
	.channel-handle,
	.influencer-handle,
	.product-rank-qty,
	.selling,
	.influencer-name,
	.center-location,
	.label,
	.settings-section-subtitle,
	.health-card-desc,
	.health-card-threshold,
	.metric-trend,
	.step-desc,
	.period-days,
	.supplier-logistics-name,
	.metric-status,
	.process-time,
	.last-update-bar,
	.mkt-status,
	.ws-btn-apply,
	.group-card-version,
	.health-card-pass,
	.section-status,
	.editor-action-btn,
	.form-help,
	.sql-toggle-btn,
	.slow-query-sql,
	.naver-card-brand,
	.btn-sm,
	small,
	.text-muted,
	.text-gray
) {
	font-size: 13px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}

.app-layout :where(.data-table th, table th, .form-label, .search-label, label, .badge, [class*="badge-"]) {
	font-weight: 600 !important;
}

.app-layout :where(.table-info, .card-subtitle, .dashboard-card-subtitle, small, .text-muted, .text-gray) {
	font-weight: 500 !important;
	color: var(--text-muted) !important;
}

.app-layout :where(.modal-body, .modal-body p, .modal-body li, .modal-body td) {
	color: var(--text-secondary) !important;
}

.app-layout :where(.data-table td, table td) :where(div, span, a, button):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.member-action-btn):not(.btn):not(.btn-sm):not(.badge):not([class*="badge"]):not(.status-badge):not(.grade-badge):not(.member-type-badge):not(.signup-provider-badge):not(.product-complete-badge):not(.product-meta):not(.product-money-text):not(.amount):not(.amount-text),
.app-layout :where(.subcategory-item-info, .legend-item, .inf-channel-header-text, .experience-type-content, .ms-product-card .card-actions) :where(div, span, p, button, a):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands),
.app-layout :where(#profileGrade) {
	font-size: 13px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}

.app-layout :where(
	.stat-label,
	.metric-chip,
	.grade-criteria-label,
	.status-badge,
	.notice-type-badge,
	.read-badge,
	.faq-count,
	.profile-primary-channel-badge,
	.influencer-badge,
	.channel-link,
	.user-account,
	[class*="-label"],
	[class*="-meta"],
	[class*="-badge"],
	[class*="-chip"]
):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.status-badge):not(.grade-badge):not(.member-type-badge):not(.signup-provider-badge):not(.product-complete-badge):not(.product-meta) {
	font-size: 13px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}

.app-layout :where(
	[style*="font-size: 9px"],
	[style*="font-size:9px"],
	[style*="font-size: 10px"],
	[style*="font-size:10px"],
	[style*="font-size: 11px"],
	[style*="font-size:11px"],
	[style*="font-size: 12px"],
	[style*="font-size:12px"]
):not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.data-table *):not(.table *) {
	font-size: 13px !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
}

a {
	text-decoration: none;
	color: var(--primary-color);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--primary-hover);
}

/* ----------------------------------------
   3. Layout
   ---------------------------------------- */
.app-layout {
	display: flex;
	min-height: 100vh;
}

.main-content {
	margin-left: 18rem !important;
	margin-right: 0 !important;
	width: calc(100% - 18rem) !important;
	padding: 6.5rem 40px 40px 40px !important;
	padding-top: calc(6.5rem + 30px) !important;
	overflow-y: auto;
	background: var(--bg-main);
	transition: all .2s ease !important;
	min-height: 100vh;
}

@media only screen and (max-width: 1400px) {
	.main-content {
		margin-left: 16rem !important;
		width: calc(100% - 16rem) !important;
	}
}

/* 사이드바 접힌 상태 (Koki menu-toggle) */
body:has(.sidebar.collapsed) .main-content {
	margin-left: 5.7rem !important;
	width: calc(100% - 5.7rem) !important;
}

body:has(.sidebar.collapsed) .top-header {
	padding-left: 5.7rem;
}

.container {
	max-width: none;
	width: 100%;
}

/* 컨테이너 숨김 처리 */
#header-container,
#sidebar-container {
	display: contents !important;
}

/* ----------------------------------------
   4. Page Title & Header (Metronic Style)
   ---------------------------------------- */
.page-title {
	font-size: 1.5rem;
	margin-bottom: 1.5rem !important;
	font-weight: 600;
	color: var(--text-primary);
}

/* page-header는 헤더바 타이틀로 대체되어 숨김 처리 */
.page-header {
	display: none !important;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
}

.header h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.header h1 i {
	color: var(--primary-color);
	font-size: 22px;
}

.header p {
	margin: 0;
	color: var(--text-muted);
	font-size: 13px;
}

/* ----------------------------------------
   5. Button Styles (Metronic 스타일)
   ---------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: var(--transition);
	white-space: nowrap;
	text-decoration: none;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

/* Primary Button - 로즈핑크 (Koki) */
.btn-primary {
	background: var(--primary-color);
	color: #ffffff;
	box-shadow: none;
}

.btn-primary:hover {
	background: var(--primary-hover);
	box-shadow: none;
	color: #ffffff;
}

/* Light Primary Button */
.btn-light-primary {
	background: var(--primary-light);
	color: var(--primary-color);
}

.btn-light-primary:hover {
	background: rgba(255, 0, 127, 0.15);
	color: var(--primary-dark);
}

/* Success Button */
.btn-success {
	background: var(--success);
	color: #ffffff;
	box-shadow: none;
}

.btn-success:hover {
	background: #14a347;
	box-shadow: none;
	color: #ffffff;
}

.btn-light-success {
	background: var(--success-light);
	color: var(--success);
}

.btn-light-success:hover {
	background: rgba(23, 198, 83, 0.15);
}

/* Excel Download Button - 초록색 */
.btn-excel {
	background: #16a34a;
	color: #ffffff;
	box-shadow: none;
}

.btn-excel:hover {
	background: #15803d;
	box-shadow: none;
	color: #ffffff;
}

.btn-excel i {
	font-size: 14px;
}

/* Excel Upload Button - 연두색 */
.btn-excel-upload {
	background: #84cc16;
	color: #ffffff;
	box-shadow: none;
}

.btn-excel-upload:hover {
	background: #65a30d;
	box-shadow: none;
	color: #ffffff;
}

/* Danger Button */
.btn-danger {
	background: var(--danger);
	color: #ffffff;
	box-shadow: none;
}

.btn-danger:hover {
	background: #d91e4a;
	box-shadow: none;
	color: #ffffff;
}

.btn-light-danger {
	background: var(--danger-light);
	color: var(--danger);
}

.btn-light-danger:hover {
	background: rgba(248, 40, 90, 0.15);
}

/* Warning Button (Yellow) */
.btn-warning {
	background: var(--warning);
	color: #000000;
	box-shadow: none;
}

.btn-warning:hover {
	background: #daa900;
	box-shadow: none;
}

.btn-light-warning {
	background: var(--warning-light);
	color: #b45309;
}

/* Orange Button */
.btn-orange {
	background: #FF007F;
	color: #ffffff;
	box-shadow: none;
}

.btn-orange:hover {
	background: #D4006B;
	color: #ffffff;
	box-shadow: none;
}

.btn-light-warning:hover {
	background: rgba(246, 192, 0, 0.15);
}

/* Purple Button */
.btn-purple {
	background: #D4006B;
	color: #ffffff;
	box-shadow: none;
}

.btn-purple:hover {
	background: #D4006B;
	color: #ffffff;
	box-shadow: none;
}

/* Info Button */
.btn-info {
	background: var(--info);
	color: #ffffff;
	box-shadow: none;
}

.btn-info:hover {
	background: #0b6dd9;
	box-shadow: none;
	color: #ffffff;
}

/* Brand Accent Button */
.btn-sky {
	background: #FF007F;
	color: #ffffff;
	box-shadow: none;
}

.btn-sky:hover {
	background: #FF007F;
	box-shadow: none;
	color: #ffffff;
}

.btn-light-info {
	background: var(--info-light);
	color: var(--info);
}

.btn-light-info:hover {
	background: rgba(27, 132, 255, 0.15);
}

/* Secondary/Light Button */
.btn-secondary,
.btn-light {
	background: var(--bg-light);
	color: var(--text-gray);
	border: 1px solid var(--border-color);
}

.btn-secondary:hover,
.btn-light:hover {
	background: var(--bg-hover);
	color: var(--text-dark);
}

/* Neutral action buttons: reset, modal close/cancel */
:root {
	--neutral-action: #6b7280;
	--neutral-action-hover: #4b5563;
}

button[onclick*="reset"].btn,
button[onclick*="Reset"].btn,
.search-actions .btn-orange,
.modal-footer .btn-secondary,
.modal-footer .modal-btn-cancel,
.modal-footer .btn-modal-cancel,
.modal-btn-cancel,
.btn-modal-cancel {
	background: var(--neutral-action) !important;
	background-image: none !important;
	border-color: var(--neutral-action) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

button[onclick*="reset"].btn:hover,
button[onclick*="reset"].btn:focus,
button[onclick*="reset"].btn:active,
button[onclick*="Reset"].btn:hover,
button[onclick*="Reset"].btn:focus,
button[onclick*="Reset"].btn:active,
.search-actions .btn-orange:hover,
.search-actions .btn-orange:focus,
.search-actions .btn-orange:active,
.modal-footer .btn-secondary:hover,
.modal-footer .btn-secondary:focus,
.modal-footer .btn-secondary:active,
.modal-footer .modal-btn-cancel:hover,
.modal-footer .modal-btn-cancel:focus,
.modal-footer .modal-btn-cancel:active,
.modal-footer .btn-modal-cancel:hover,
.modal-footer .btn-modal-cancel:focus,
.modal-footer .btn-modal-cancel:active,
.modal-btn-cancel:hover,
.modal-btn-cancel:focus,
.modal-btn-cancel:active,
.btn-modal-cancel:hover,
.btn-modal-cancel:focus,
.btn-modal-cancel:active {
	background: var(--neutral-action-hover) !important;
	background-image: none !important;
	border-color: var(--neutral-action-hover) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

/* Outline Buttons */
.btn-outline-primary {
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.btn-outline-primary:hover {
	background: var(--primary-color);
	color: #ffffff;
}

/* Button Sizes */
.btn-sm {
	padding: 6px 12px;
	font-size: 12px;
	border-radius: 6px;
}

.btn-lg {
	padding: 14px 28px;
	font-size: 15px;
	border-radius: 10px;
}

/* Icon Only Button */
.btn-icon {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 8px;
}

.btn-icon.btn-sm {
	width: 32px;
	height: 32px;
}

/* ----------------------------------------
   6. Card Styles (공통 라운딩 카드)
   ---------------------------------------- */
.card {
	background: var(--card-bg);
	border-radius: 0.75rem;
	border: 0rem solid transparent;
	box-shadow: none;
	transition: var(--transition);
	margin-bottom: 1.875rem;
}

/* Enhanced Table Card */
.table-card-enhanced {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	background: var(--card-bg);
	box-shadow: none;
}

.table-card-enhanced .table-container {
	border: none !important;
	box-shadow: none;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.table-card-enhanced .data-table {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.card:hover {
	box-shadow: none;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
}

.card-title {
	font-size: 19px;
	font-weight: 700;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.card-title i {
	color: var(--primary-color);
}

.card-subtitle {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
}

.card-body {
	padding: 1.875rem;
}

.card-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border-color);
	background: var(--bg-light);
	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* Card Toolbar */
.card-toolbar {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Card Actions Link */
.card-action {
	font-size: 12px;
	font-weight: 500;
	color: var(--primary-color);
	text-decoration: none;
	display: flex;
	align-items: center;
	transition: var(--transition);
}

.card-action:hover {
	color: var(--primary-hover);
}

/* ----------------------------------------
   7. Form Controls (Enhanced Metronic 스타일)
   ---------------------------------------- */
.form-control {
	width: 100%;
	padding: 11px 16px;
	background: var(--card-bg);
	border: 1px solid var(--bs-gray-300);
	border-radius: 8px;
	color: var(--text-dark);
	font-size: 13px;
	font-weight: 500;
	transition: var(--transition);
	box-shadow: none;
}

.form-control:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: none;
}

.form-control::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}

.form-control:disabled {
	background: var(--bg-light);
	cursor: not-allowed;
	opacity: 0.7;
}

/* Form Control Sizes */
.form-control-sm {
	padding: 8px 12px;
	font-size: 12px;
}

.form-control-lg {
	padding: 14px 18px;
	font-size: 15px;
}

/* Select - appearance:none만 (화살표는 form.css에서 통일 관리) */
select.form-control {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
}

/* ----------------------------------------
   App Toast (admin/supplier PC)
   ---------------------------------------- */
@keyframes slideInRight {
	from {
		transform: translateX(16px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}

	to {
		transform: translateX(16px);
		opacity: 0;
	}
}

body[data-page] .toast-container,
body:has(.app-layout) > .toast-container {
	position: fixed !important;
	top: auto !important;
	right: 32px !important;
	bottom: 32px !important;
	left: auto !important;
	z-index: 120000 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 10px !important;
	pointer-events: none !important;
}

body[data-page] .toast-container .toast,
body:has(.app-layout) > .toast-container .toast {
	pointer-events: auto !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-width: 360px !important;
	max-width: min(520px, calc(100vw - 64px)) !important;
	padding: 18px 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 18px !important;
	background: #FF4DA6 !important;
	box-shadow: none;
	animation: slideInRight 0.24s ease-out !important;
	overflow: hidden !important;
	color: #ffffff !important;
}

body[data-page] .toast-container .toast::before,
body:has(.app-layout) > .toast-container .toast::before {
	content: none !important;
}

body[data-page] .toast-container .toast.success,
body:has(.app-layout) > .toast-container .toast.success {
	background: #FF4DA6 !important;
}

body[data-page] .toast-container .toast.error,
body:has(.app-layout) > .toast-container .toast.error {
	background: #FF4DA6 !important;
}

body[data-page] .toast-container .toast.warning,
body:has(.app-layout) > .toast-container .toast.warning {
	background: #FF4DA6 !important;
}

body[data-page] .toast-container .toast.info,
body:has(.app-layout) > .toast-container .toast.info {
	background: #FF4DA6 !important;
}

body[data-page] .toast .toast-content,
body:has(.app-layout) > .toast-container .toast .toast-content {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

body[data-page] .toast .toast-title,
body:has(.app-layout) > .toast-container .toast .toast-title {
	margin: 0 0 3px !important;
	color: #ffffff !important;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}

body[data-page] .toast .toast-message,
body:has(.app-layout) > .toast-container .toast .toast-message {
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 14px !important;
	font-weight: 650 !important;
	line-height: 1.45 !important;
	word-break: keep-all !important;
}

body[data-page] .toast .toast-icon,
body:has(.app-layout) > .toast-container .toast .toast-icon {
	flex: 0 0 auto !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #ffffff !important;
	font-size: 19px !important;
}

body[data-page] .toast .toast-close,
body:has(.app-layout) > .toast-container .toast .toast-close {
	flex: 0 0 auto !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: rgba(255, 255, 255, 0.78) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	transition: background 0.16s ease, color 0.16s ease !important;
}

body[data-page] .toast .toast-close:hover,
body:has(.app-layout) > .toast-container .toast .toast-close:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}

@media (max-width: 640px) {
	body[data-page] .toast-container,
	body:has(.app-layout) > .toast-container {
		right: 14px !important;
		bottom: 14px !important;
		left: 14px !important;
		align-items: stretch !important;
	}

	body[data-page] .toast-container .toast,
	body:has(.app-layout) > .toast-container .toast {
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* ----------------------------------------
   App Custom Select (admin/supplier PC)
   ---------------------------------------- */
.app-layout .ds-custom-select,
.modal .ds-custom-select,
.modal-overlay .ds-custom-select {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: 100%;
	vertical-align: middle;
	font-family: var(--bs-font-family) !important;
	letter-spacing: 0 !important;
}

.app-layout .ds-custom-select--form-control,
.app-layout .search-card .ds-custom-select,
.app-layout .search-row .ds-custom-select,
.modal .ds-custom-select--form-control,
.modal-overlay .ds-custom-select--form-control {
	width: 100%;
}

.app-layout .search-col .ds-custom-select {
	margin-top: auto;
}

.app-layout .card-toolbar .ds-custom-select {
	width: auto;
}

.app-layout .card-toolbar .ds-custom-select--table-pagesize {
	margin-left: auto;
	min-width: 100px;
}

.app-layout .ds-custom-select--table-pagesize {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
	flex: 0 0 100px;
}

.app-layout .ds-custom-select-native,
.modal .ds-custom-select-native,
.modal-overlay .ds-custom-select-native {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.app-layout .ds-custom-select-toggle,
.modal .ds-custom-select-toggle,
.modal-overlay .ds-custom-select-toggle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-width: 120px;
	height: 40px;
	padding: 8px 34px 8px 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #333;
	box-shadow: none;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.app-layout .ds-custom-select-toggle::after,
.modal .ds-custom-select-toggle::after,
.modal-overlay .ds-custom-select-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 12px;
	height: 12px;
	transform: translateY(-50%);
	background: no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF007F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	transition: transform 0.16s ease;
}

.app-layout .ds-custom-select.is-open .ds-custom-select-toggle::after,
.modal .ds-custom-select.is-open .ds-custom-select-toggle::after,
.modal-overlay .ds-custom-select.is-open .ds-custom-select-toggle::after {
	transform: translateY(-50%) rotate(180deg);
}

.app-layout .ds-custom-select-toggle:hover,
.modal .ds-custom-select-toggle:hover,
.modal-overlay .ds-custom-select-toggle:hover {
	border-color: rgba(255, 0, 127, 0.45);
	box-shadow: none;
}

.app-layout .ds-custom-select.is-open .ds-custom-select-toggle,
.app-layout .ds-custom-select-toggle:focus,
.modal .ds-custom-select.is-open .ds-custom-select-toggle,
.modal .ds-custom-select-toggle:focus,
.modal-overlay .ds-custom-select.is-open .ds-custom-select-toggle,
.modal-overlay .ds-custom-select-toggle:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: none;
}

.app-layout .ds-custom-select.is-disabled .ds-custom-select-toggle,
.modal .ds-custom-select.is-disabled .ds-custom-select-toggle,
.modal-overlay .ds-custom-select.is-disabled .ds-custom-select-toggle {
	background: var(--bs-gray-100);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 0.72;
	box-shadow: none;
}

.app-layout .ds-custom-select--table-pagesize .ds-custom-select-toggle {
	min-width: 100px;
	height: 38px;
	padding: 7px 30px 7px 12px;
	font-size: 13px;
	font-weight: 600;
}

.app-layout .ds-custom-select--table-pagesize .ds-custom-select-menu {
	right: 0 !important;
	left: auto !important;
	width: 100px !important;
	min-width: 100px !important;
	max-width: 100px !important;
}

.app-layout .ds-custom-select--table-pagesize .ds-custom-select-option {
	padding-right: 12px !important;
	padding-left: 12px !important;
}

.app-layout .ds-custom-select--sm .ds-custom-select-toggle,
.modal .ds-custom-select--sm .ds-custom-select-toggle,
.modal-overlay .ds-custom-select--sm .ds-custom-select-toggle {
	min-width: 90px;
	height: 34px;
	padding: 6px 30px 6px 12px;
	font-size: 12.5px;
}

.app-layout .ds-custom-select-label,
.modal .ds-custom-select-label,
.modal-overlay .ds-custom-select-label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-layout .ds-custom-select-menu,
.modal .ds-custom-select-menu,
.modal-overlay .ds-custom-select-menu,
body .app-layout .bulk-dropdown-menu {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	min-width: 160px !important;
	max-height: 280px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #ddd !important;
	border-radius: 6px !important;
	box-shadow: none;
	z-index: 1200 !important;
}

.app-layout .ds-custom-select-menu,
.modal .ds-custom-select-menu,
.modal-overlay .ds-custom-select-menu {
	width: 100% !important;
}

body .app-layout .bulk-dropdown-menu {
	width: max-content !important;
}

.app-layout .ds-custom-select-menu,
.modal .ds-custom-select-menu,
.modal-overlay .ds-custom-select-menu {
	display: none;
}

.app-layout .ds-custom-select.is-open .ds-custom-select-menu,
.modal .ds-custom-select.is-open .ds-custom-select-menu,
.modal-overlay .ds-custom-select.is-open .ds-custom-select-menu {
	display: block;
}

.app-layout .ds-custom-select-option,
.modal .ds-custom-select-option,
.modal-overlay .ds-custom-select-option,
body .app-layout .bulk-dropdown-item {
	display: block !important;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	padding: 8px 16px !important;
	border: 0 !important;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	color: #333 !important;
	background: transparent !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-align: left;
	text-decoration: none !important;
	outline: none;
	white-space: nowrap;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.app-layout .ds-custom-select-option:hover,
.app-layout .ds-custom-select-option.is-active,
.modal .ds-custom-select-option:hover,
.modal .ds-custom-select-option.is-active,
.modal-overlay .ds-custom-select-option:hover,
.modal-overlay .ds-custom-select-option.is-active,
body .app-layout .bulk-dropdown-item:hover,
body .app-layout .bulk-dropdown-item:focus {
	background: #fdeaf2 !important;
	color: #FF007F !important;
}

.app-layout .ds-custom-select-option.is-selected,
.modal .ds-custom-select-option.is-selected,
.modal-overlay .ds-custom-select-option.is-selected {
	background: transparent !important;
	color: #333 !important;
	font-weight: 600 !important;
}

.app-layout .ds-custom-select-option.is-selected:hover,
.app-layout .ds-custom-select-option.is-selected.is-active,
.modal .ds-custom-select-option.is-selected:hover,
.modal .ds-custom-select-option.is-selected.is-active,
.modal-overlay .ds-custom-select-option.is-selected:hover,
.modal-overlay .ds-custom-select-option.is-selected.is-active {
	background: #fdeaf2 !important;
	color: #FF007F !important;
}

.app-layout .ds-custom-select-option.is-disabled,
.modal .ds-custom-select-option.is-disabled,
.modal-overlay .ds-custom-select-option.is-disabled {
	color: #cbd5e1 !important;
	cursor: not-allowed;
	background: transparent !important;
}

.app-layout .ds-custom-select-optgroup,
.modal .ds-custom-select-optgroup,
.modal-overlay .ds-custom-select-optgroup {
	padding: 8px 12px 4px;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Form Label */
.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 6px;
}

.form-label .required {
	color: var(--danger);
	margin-left: 2px;
}

/* Form Group */
.form-group {
	margin-bottom: 1rem;
}

/* Form Help Text */
.form-text {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
}

/* Input Group */
.input-group {
	display: flex;
	gap: 8px;
}

.input-group .form-control {
	flex: 1;
}

/* Search Input */
.search-input {
	position: relative;
}

.search-input input {
	padding-left: 14px;
}

.search-input i {
	display: none;
}

/* ----------------------------------------
   8. Badge Styles (Metronic 스타일)
   ---------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
}

.badge-primary {
	background: var(--primary-light);
	color: var(--primary-color);
}

.badge-success,
.badge-light-success {
	background: var(--success-light);
	color: var(--success);
}

.badge-danger,
.badge-light-danger {
	background: var(--danger-light);
	color: var(--danger);
}

.badge-warning,
.badge-light-warning {
	background: var(--warning-light);
	color: #b45309;
}

.badge-info,
.badge-light-info {
	background: var(--info-light);
	color: var(--info);
}

.badge-light-primary {
	background: var(--primary-light);
	color: var(--primary-color);
}

.badge-secondary {
	background: var(--bg-light);
	color: var(--text-gray);
}

/* ----------------------------------------
   9. Avatar Styles
   ---------------------------------------- */
.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	flex-shrink: 0;
}

.avatar.bg-primary {
	background: var(--primary-color);
}

.avatar.bg-success {
	background: var(--success);
}

.avatar.bg-info {
	background: var(--info);
}

.avatar.bg-warning {
	background: var(--warning);
	color: #000;
}

.avatar.bg-danger {
	background: var(--danger);
}

.avatar-group {
	display: flex;
	align-items: center;
}

.avatar-group .avatar {
	margin-left: -10px;
	border: 2px solid var(--card-bg);
}

.avatar-group .avatar:first-child {
	margin-left: 0;
}

/* ----------------------------------------
   10. Alert Styles
   ---------------------------------------- */
.alert {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-lg);
	margin-bottom: 1.25rem;
	border: 1px solid;
}

.alert-primary {
	background: var(--primary-light);
	border-color: rgba(255, 0, 127, 0.2);
	color: var(--primary-dark);
}

.alert-success {
	background: var(--success-light);
	border-color: rgba(23, 198, 83, 0.2);
	color: #059669;
}

.alert-danger {
	background: var(--danger-light);
	border-color: rgba(248, 40, 90, 0.2);
	color: #dc2626;
}

.alert-warning {
	background: var(--warning-light);
	border-color: rgba(246, 192, 0, 0.2);
	color: #b45309;
}

.alert-info {
	background: var(--info-light);
	border-color: rgba(27, 132, 255, 0.2);
	color: #D4006B;
}

/* ----------------------------------------
   11. Utility Classes
   ---------------------------------------- */

/* Text Colors */
.text-primary {
	color: var(--primary-color) !important;
}

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

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

.text-warning {
	color: #B47D00 !important;
}

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

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

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

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

.text-white {
	color: #ffffff !important;
}

/* Background Colors */
.bg-primary {
	background: var(--primary-color) !important;
}

.bg-success {
	background: var(--success) !important;
}

.bg-danger {
	background: var(--danger) !important;
}

.bg-warning {
	background: var(--warning) !important;
}

.bg-info {
	background: var(--info) !important;
}

.bg-light {
	background: var(--bg-light) !important;
}

.bg-white {
	background: #ffffff !important;
}

.bg-light-primary {
	background: var(--primary-light) !important;
}

.bg-light-success {
	background: var(--success-light) !important;
}

.bg-light-danger {
	background: var(--danger-light) !important;
}

.bg-light-warning {
	background: var(--warning-light) !important;
}

.bg-light-info {
	background: var(--info-light) !important;
}

/* Font Weight */
.fw-bold {
	font-weight: 700 !important;
}

.fw-bolder {
	font-weight: 800 !important;
}

.fw-semibold {
	font-weight: 600 !important;
}

.fw-medium {
	font-weight: 500 !important;
}

.fw-normal {
	font-weight: 400 !important;
}

/* Font Size */
.fs-1 {
	font-size: 1.75rem !important;
}

.fs-2 {
	font-size: 1.5rem !important;
}

.fs-3 {
	font-size: 1.25rem !important;
}

.fs-4 {
	font-size: 1.1rem !important;
}

.fs-5 {
	font-size: 1rem !important;
}

.fs-6 {
	font-size: 0.875rem !important;
}

.fs-7 {
	font-size: 0.8125rem !important;
}

.fs-8 {
	font-size: 0.75rem !important;
}

.fs-2x {
	font-size: 2rem !important;
}

.fs-3x {
	font-size: 2.5rem !important;
}

/* Spacing - Margin */
.m-0 {
	margin: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: 0.25rem !important;
}

.mt-2 {
	margin-top: 0.5rem !important;
}

.mt-3 {
	margin-top: 0.75rem !important;
}

.mt-4 {
	margin-top: 1rem !important;
}

.mt-5 {
	margin-top: 1.25rem !important;
}

.mt-6 {
	margin-top: 1.5rem !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 0.25rem !important;
}

.mb-2 {
	margin-bottom: 0.5rem !important;
}

.mb-3 {
	margin-bottom: 0.75rem !important;
}

.mb-4 {
	margin-bottom: 1rem !important;
}

.mb-5 {
	margin-bottom: 1.25rem !important;
}

.mb-6 {
	margin-bottom: 1.5rem !important;
}

.me-1 {
	margin-right: 0.25rem !important;
}

.me-2 {
	margin-right: 0.5rem !important;
}

.me-3 {
	margin-right: 0.75rem !important;
}

.me-4 {
	margin-right: 1rem !important;
}

.ms-1 {
	margin-left: 0.25rem !important;
}

.ms-2 {
	margin-left: 0.5rem !important;
}

.ms-3 {
	margin-left: 0.75rem !important;
}

.ms-auto {
	margin-left: auto !important;
}

/* Spacing - Padding */
.p-0 {
	padding: 0 !important;
}

.p-3 {
	padding: 0.75rem !important;
}

.p-4 {
	padding: 1rem !important;
}

.p-5 {
	padding: 1.25rem !important;
}

.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.py-3 {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

.py-4 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

.px-3 {
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
}

.px-4 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

/* Display */
.d-flex {
	display: flex !important;
}

.d-block {
	display: block !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-inline-flex {
	display: inline-flex !important;
}

.d-none {
	display: none !important;
}

/* Flexbox */
.flex-row {
	flex-direction: row !important;
}

.flex-column {
	flex-direction: column !important;
}

.flex-wrap {
	flex-wrap: wrap !important;
}

.flex-nowrap {
	flex-wrap: nowrap !important;
}

.flex-grow-1 {
	flex-grow: 1 !important;
}

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

.flex-stack {
	justify-content: space-between;
	align-items: center;
}

.flex-center {
	justify-content: center;
	align-items: center;
}

.align-items-start {
	align-items: flex-start !important;
}

.align-items-center {
	align-items: center !important;
}

.align-items-end {
	align-items: flex-end !important;
}

.justify-content-start {
	justify-content: flex-start !important;
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-end {
	justify-content: flex-end !important;
}

/* ----------------------------------------
   Confirm/Alert Modal Styles
   ---------------------------------------- */
#confirmModal,
#alertModal {
	z-index: 999999 !important;
}

.confirm-dialog {
	text-align: center;
	padding: 10px;
}

.confirm-dialog i {
	font-size: 48px;
	margin-bottom: 16px;
}

.confirm-dialog.warning i {
	color: #f59e0b;
}

.confirm-dialog.success i {
	color: #10b981;
}

.confirm-dialog.danger i {
	color: #ef4444;
}

.confirm-dialog.info i {
    color: #FF007F;
}

/* --- Logout confirm modal (리뉴얼) --- */
#confirmModal.confirm-modal--logout .modal-header {
    display: none;
}

#confirmModal.confirm-modal--logout .modal-container {
    border-radius: 20px;
    overflow: hidden;
}

#confirmModal.confirm-modal--logout .confirm-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 40px 32px 20px;
}

#confirmModal.confirm-modal--logout .confirm-dialog-icon {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FF007F 0%, #FF4DA6 100%);
    border: none;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(255, 0, 127, 0.25);
}

#confirmModal.confirm-modal--logout .confirm-dialog-icon-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 0, 127, 0.15);
    animation: logoutRingPulse 2s ease-in-out infinite;
}

@keyframes logoutRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.06); opacity: 1; }
}

#confirmModal.confirm-modal--logout .confirm-dialog-icon i {
    margin: 0;
    font-size: 32px;
    color: #ffffff;
}

#confirmModal.confirm-modal--logout .confirm-dialog-message {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

#confirmModal.confirm-modal--logout .confirm-dialog-sub {
    margin: 10px 0 0;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
    letter-spacing: 0;
}

#confirmModal.confirm-modal--logout .modal-footer--logout {
    padding: 8px 32px 32px;
    gap: 10px;
}

#confirmModal.confirm-modal--logout .modal-footer--logout .btn {
    flex: 1;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.2s ease;
}

#confirmModal.confirm-modal--logout .modal-footer--logout .btn-secondary {
    background: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
    color: #64748b !important;
}

#confirmModal.confirm-modal--logout .modal-footer--logout .btn-secondary:hover {
    background: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

#confirmModal.confirm-modal--logout .modal-footer--logout .btn-primary {
    background: linear-gradient(135deg, #FF007F 0%, #e6006f 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 0, 127, 0.3);
}

#confirmModal.confirm-modal--logout .modal-footer--logout .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 0, 127, 0.4);
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
	margin-top: 24px;
}

.justify-content-between {
	justify-content: space-between !important;
}

.gap-1 {
	gap: 0.25rem !important;
}

.gap-2 {
	gap: 0.5rem !important;
}

.gap-3 {
	gap: 0.75rem !important;
}

.gap-4 {
	gap: 1rem !important;
}

.gap-5 {
	gap: 1.25rem !important;
}

/* Business Number Style */
.business-number {
	color: var(--text-dark);
	font-size: 13px;
	font-weight: 500;
	font-weight: 500;
	font-family: var(--bs-font-family);
	display: block;
	text-align: center;
}

/* Border Radius */
.rounded {
	border-radius: var(--border-radius) !important;
}

.rounded-1 {
	border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
	border-radius: var(--border-radius) !important;
}

.rounded-3 {
	border-radius: var(--border-radius-lg) !important;
}

.rounded-circle {
	border-radius: 50% !important;
}

/* Shadows */
.shadow-sm {
	box-shadow: none;
}

.shadow {
	box-shadow: none;
}

.shadow-lg {
	box-shadow: none;
}

/* Width/Height */
.w-100 {
	width: 100% !important;
}

.h-100 {
	height: 100% !important;
}

/* Position */
.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important;
}

/* Overflow */
.overflow-hidden {
	overflow: hidden !important;
}

.overflow-auto {
	overflow: auto !important;
}

/* ----------------------------------------
   12. Responsive
   ---------------------------------------- */
@media (max-width: 1199px) {
	.main-content {
		margin-left: 0 !important;
		width: 100% !important;
		padding: 6rem 20px 20px 20px !important;
	}
}

@media (max-width: 768px) {
	.page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.card-toolbar {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ----------------------------------------
   13. 공통 푸터 스타일 (컴팩트 버전)
   ---------------------------------------- */
.main-footer {
	background: #FF007F;
	color: #ffffff;
	padding: 16px 0;
	margin-top: 40px;
	width: 100%;
	clear: both;
	border-radius: 12px;
	margin-bottom: 20px;
}

/* main-content 내부에 있는 푸터 스타일 */
.main-content .main-footer {
	margin-left: 0;
	width: 100%;
	margin-right: 0;
}

.footer-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 푸터 상단: 로고 + SNS */
.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-logo .footer-wordmark {
	display: block;
	width: 132px;
	height: auto;
	filter: brightness(0) invert(1);
}

.footer-sns {
	display: flex;
	gap: 10px;
}

.footer-sns a {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 13px;
	transition: all 0.3s;
}

.footer-sns a:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* 푸터 중단: 메뉴/회사정보/CS/BANK - 한 줄 배치 */
.footer-middle {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 14px 0 10px;
	gap: 30px;
}

.footer-info-section {
	flex: 1;
	min-width: 0;
}

.footer-menu {
	margin-bottom: 8px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 500;
	transition: color 0.2s;
}

.footer-menu a:hover {
	color: #ffffff;
}

.footer-menu .divider {
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.3);
}

.footer-menu .privacy strong {
	color: #ffffff;
}

.footer-company-info p {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 2px;
	line-height: 1.6;
}

.footer-company-info p span {
	margin-right: 12px;
}

.footer-company-info p strong {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.footer-company-info .hosting {
	margin-top: 4px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.5);
}

.footer-copyright {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright p {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

.footer-copyright strong {
	color: #ffffff;
}

/* 오른쪽: CS/BANK - 가로 배치 */
.footer-service-section {
	display: flex;
	gap: 30px;
	flex-shrink: 0;
	align-items: flex-start;
}

.footer-cs,
.footer-bank {
	min-width: 120px;
}

.footer-cs h4,
.footer-bank h4 {
	font-size: 10px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.footer-cs .cs-number {
	font-size: 18px;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 4px;
}

.footer-cs .cs-time {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 2px;
}

.footer-bank .bank-account {
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 3px;
}

.footer-bank .bank-name {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2px;
}

.footer-bank .bank-holder {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.7);
}

/* 푸터 반응형 */
@media (max-width: 1024px) {
	.app-layout .main-footer {
		margin-left: 0;
		width: 100%;
	}

	.footer-middle {
		flex-direction: column;
		gap: 16px;
	}

	.footer-service-section {
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
}

@media (max-width: 768px) {
	.footer-container {
		padding: 0 16px;
	}

	.footer-top {
		flex-direction: column;
		gap: 10px;
	}

	.footer-company-info p span {
		display: block;
		margin-right: 0;
	}

	.footer-service-section {
		flex-direction: column;
		gap: 16px;
	}
}