:root {
	--color-text-basic: #171a1c;
	--color-text-subtle: #4b5159;
	--color-text-subtler: #7a8590;
	--color-text-success: #009a28;
	--color-text-danger: #bb0032;
	--color-text-warning: #d99314;
	--color-text-primary: #3a4bff;

	--color-border-gray-light: #e8ebed;
	--color-border-gray: #d3d6da;
	--color-border-gray-dark: #b7bdc3;
	--color-border-primary: #3a4bff;

	--color-surface-gray-subtler: #f9fafa;
	--color-surface-gray-subtle: #eef0f1;
	--color-surface-success-subtler: #e8f7ec;
	--color-surface-danger-subtler: #fff4f5;
	--color-surface-warning-subtler: #fff8e0;
	--color-surface-primary-subtler: #eff1ff;

	--color-element-primary: #3a4bff;
	--color-element-gray-light: #e6e8ea;
}

body {
	background-color: #ffffff;
	font-size: 14px;
	line-height: 1.5;
	width: 100%;
	min-height: 100vh;
	letter-spacing: 0;
}

/* Bootstrap 레이아웃에 맞춰 overflow 조정 */
body .container-fluid {
	overflow-x: hidden;
	overflow-y: auto;
}

.app-container {
	display: flex;
	flex-direction: column;
}

/* 커스텀 레이아웃용 (사용하지 않는 경우) */
.main-layout {
	display: flex;
	height: calc(100vh - 50px);
	overflow: hidden;
}

.main {
	width: 100%;
	overflow: auto;
}

/* 헤더 고정 */
header.navbar.sticky-top {
	position: sticky !important;
	top: 0 !important;
	z-index: 1030 !important;
	background-color: #ffffff !important;
}

/* Bootstrap 레이아웃에서 사이드바가 정상 작동하도록 - 화면 하단까지 */
#sidebar.sidebar,
.sidebar.col-md-3,
.sidebar.col-lg-2 {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	height: calc(100vh - 56px) !important;
	min-height: calc(100vh - 56px) !important;
	max-height: calc(100vh - 56px) !important;
	position: relative !important;
	z-index: 1 !important;
}

.main-head {
	display: flex !important;
	flex-direction: column !important;
	padding: 0 30px !important;
}

.main-head .breadcrumb {
	display: flex !important;
	align-items: center !important;
	color: var(--color-text-basic) !important;
	padding: 12px 0px !important;
	border-bottom: 1px solid var(--color-border-gray-light) !important;
	gap: 4px !important;
}

.main-head .breadcrumb a {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	text-decoration: none !important;
}

.main-head .breadcrumb a span {
	color: var(--color-text-subtler) !important;
}

.main-head .page-title {
	font-size: 20px !important;
	font-weight: 700 !important;
	padding: 12px 0px !important;
	margin: 0 !important;
}

.main-content {
	padding: 20px 30px 40px !important;
	overflow-x: hidden !important;
	overflow-y: visible !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

main.col-md-9,
main.col-lg-10 {
	overflow-x: hidden !important;
	overflow-y: auto !important;
	height: calc(100vh - 56px) !important;
	max-height: calc(100vh - 56px) !important;
	position: relative !important;
	z-index: 1 !important;
}

main.col-md-9 .main-content,
main.col-lg-10 .main-content {
	padding: 20px !important;
}

main.col-md-9 .px-md-4,
main.col-lg-10 .px-md-4 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	padding: 0 24px;
	height: 50px;
	border-bottom: 1px solid var(--color-border-gray-light);
	box-shadow: 0 1px 3px 0 rgba(54, 74, 99, 0.1);
}

.header .logo-wrap {
	display: flex;
	align-items: center;
}

.header .logo-wrap .logo-icon {
	width: 120px;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header .divider {
	width: 1px;
	height: 24px;
	background: var(--color-border-gray-light);
}

.header .user-profile-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
}

.header .user-profile-toggle .profile {
	width: 32px;
	height: 32px;
	border-radius: 50% !important;
	border: 1px solid var(--color-border-gray);
}

.header .user-profile-toggle::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
}

/*--------------------------------------------------------------
# 사이드바 - 제공된 원본 스타일 적용
--------------------------------------------------------------*/
#sidebar.sidebar,
.sidebar.col-md-3,
.sidebar.col-lg-2,
div.sidebar.border.col-md-3.col-lg-2 {
	display: flex !important;
	flex-direction: column !important;
	height: calc(100vh - 56px) !important;
	min-height: calc(100vh - 56px) !important;
	width: 260px !important;
	max-width: 260px !important;
	min-width: 260px !important;
	background: #fafafa !important;
	border: none !important;
	border-right: 1px solid var(--color-border-gray-light) !important;
	box-shadow: 0 1px 3px 0 rgba(54, 74, 99, 0.1) !important;
	padding: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* Bootstrap 배경색 제거 */
div.sidebar.bg-body-tertiary {
	background: #fafafa !important;
}

/* 메뉴 필터 영역 - 제공된 스타일에 맞춤 */
#sidebar .menu-filter {
	padding: 12px 8px !important;
}

#sidebar .menu-filter .form-select-wrap {
	position: relative;
}

#sidebar .menu-filter .form-select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-border-gray-dark);
	border-bottom: 2px solid var(--color-border-gray-dark);
	pointer-events: none;
	z-index: 1;
}

#sidebar .menu-filter .form-select {
	appearance: none;
	width: 100%;
	height: 34px;
	border: 1px solid var(--color-border-gray);
	border-radius: 6px;
	padding: 0 12px;
	font-size: 14px;
	cursor: pointer;
	background: #fff;
}

#sidebar .menu-filter .form-select:focus {
	border-color: var(--color-border-primary);
	box-shadow: 0 0 0 2px rgba(58, 75, 255, 0.18);
	outline: none;
}

/* 메뉴 리스트 */
#sidebar .list-unstyled {
	flex-grow: 1 !important;
	padding: 0 8px !important;
	margin: 0 !important;
	list-style: none !important;
	overflow-y: auto !important;
}

/* Bootstrap 토글 버튼을 제공된 스타일로 변환 */
#sidebar .btn-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 10px !important;
	cursor: pointer !important;
	border-radius: 6px !important;
	transition: 0.2s !important;
	width: 100% !important;
	text-align: left !important;
	font-size: 14px !important;
	color: var(--color-text-basic) !important;
	background: transparent !important;
	border: none !important;
	font-weight: normal !important;
	margin-bottom: 0 !important;
	position: relative !important;
}

#sidebar .btn-toggle:hover {
	background: rgba(230, 232, 234, 0.5) !important;
}

#sidebar .btn-toggle .toggle-icon {
	display: none !important;
}

/* 기본적으로 모든 btn-toggle의 ::after와 toggle-icon을 제거 */
#sidebar .btn-toggle::after {
	content: none !important;
	display: none !important;
}

#sidebar .btn-toggle .toggle-icon {
	display: none !important;
}

/* 토글 버튼 화살표 - 제공된 스타일로 변환 (data-bs-toggle이 있는 경우만) */
#sidebar .btn-toggle[data-bs-toggle="collapse"]::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) rotate(45deg) !important;
	border-top: 2px solid var(--color-border-gray-dark) !important;
	border-right: 2px solid var(--color-border-gray-dark) !important;
	width: 8px !important;
	height: 8px !important;
	margin-left: auto !important;
	transition: transform 0.25s !important;
}

#sidebar .btn-toggle[data-bs-toggle="collapse"][aria-expanded="true"]::after {
	transform: translateY(-50%) rotate(135deg) !important;
}

/* data-bs-toggle이 없는 버튼은 화살표와 아이콘 완전히 제거 */
#sidebar .btn-toggle:not([data-bs-toggle])::after,
#sidebar .btn-toggle:not([data-bs-toggle]) .toggle-icon {
	content: none !important;
	display: none !important;
	visibility: hidden !important;
}

/* "통합 관제" 같은 버튼 옆의 toggle-icon도 숨김 (li 내부의 i 태그) */
#sidebar .mb-1:has(button:not([data-bs-toggle])) .toggle-icon,
#sidebar .mb-1:has(button.btn-toggle:not([data-bs-toggle])) i.toggle-icon {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* collapse 컨테이너 */
#sidebar .collapse {
	margin-left: 12px !important;
	padding-left: 4px !important;
	position: relative !important;
	z-index: 1 !important;
}

/* collapse 내부의 ul */
#sidebar .collapse .btn-toggle-nav {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* li 요소에 세로선 추가 (collapse가 있는 li만) - 사이드바 하단까지 */
#sidebar .mb-1:has(.collapse) {
	position: relative;
}

/* collapse가 있는 li에 세로선 추가 - 항상 존재하되, collapse가 열릴 때만 표시 */
#sidebar .mb-1:has(.collapse) {
	position: relative;
}

#sidebar .mb-1:has(.collapse)::before {
	content: "" !important;
	position: absolute !important;
	left: 12px !important;
	top: 40px !important;
	width: 2px !important;
	background: #e0e0e0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	opacity: 0 !important;
	transition: none !important;
	bottom: auto !important;
}

/* collapse가 열려있거나 collapsing 상태일 때 세로선 표시 - 사이드바 하단까지 */
#sidebar .mb-1:has(.collapse.show)::before,
#sidebar .mb-1:has(.collapse.collapsing)::before,
#sidebar .mb-1.collapse-opening::before {
	top: 40px !important;
	bottom: var(--sidebar-line-bottom, 0px) !important;
	height: auto !important;
	opacity: 1 !important;
	transition: none !important;
}

/* collapse가 닫혀있을 때는 세로선 숨김 */
#sidebar .mb-1:has(.collapse:not(.show):not(.collapsing)):not(.collapse-opening)::before {
	height: 0 !important;
	opacity: 0 !important;
	bottom: auto !important;
}

#sidebar .btn-toggle-nav {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#sidebar .btn-toggle-nav li {
	margin: 0 !important;
}

#sidebar .btn-toggle-nav a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 8px !important;
	margin-left: 0 !important;
	font-size: 14px !important;
	border-radius: 6px !important;
	color: var(--color-text-subtle) !important;
	text-decoration: none !important;
}

#sidebar .btn-toggle-nav a:hover {
	background: #f0f0f0 !important;
}

/* 일반 메뉴 아이템 (토글이 없는 경우) - border 제거 */
#sidebar .mb-1:has(button[type="button"]:not([data-bs-toggle]))::before {
	display: none !important;
}

#sidebar .mb-1:has(button[type="button"]:not([data-bs-toggle])) {
	margin-bottom: 0 !important;
}

/* 사이드바 최상단 헤더 제거 (제공된 스타일에는 없음) */
#sidebar > .d-flex {
	display: none !important;
}

/* 사이드바 너비 고정 */
#sidebar {
	max-width: 260px !important;
	min-width: 260px !important;
}

/* 사이드바 내부 li 요소 스타일 */
#sidebar .mb-1 {
	margin-bottom: 0 !important;
}

/* "통합 관제" 같은 토글이 없는 메뉴 항목 */
#sidebar .btn-toggle:not([data-bs-toggle]) {
	padding: 8px 10px !important;
}

.footer {
	background: var(--color-surface-gray-subtler);
	font-size: 12px;
	padding: 12px 18px 20px;
	border-top: 1px solid var(--color-border-gray-light);
}

.footer-links {
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--color-border-gray);
}

.footer-links a {
	margin-right: 15px;
}

.footer-contact {
	color: var(--color-text-subtler);
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 10px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
}

.badge-primary {
	background: var(--color-surface-primary-subtler);
	color: var(--color-text-primary);
}

.badge-success {
	background: var(--color-surface-success-subtler);
	color: var(--color-text-success);
}

.badge-warning {
	background: var(--color-surface-warning-subtler);
	color: var(--color-text-warning);
}

.badge-danger {
	background: var(--color-surface-danger-subtler);
	color: var(--color-text-danger);
}

.badge-gray {
	background: var(--color-surface-gray-subtle);
	color: var(--color-text-subtler);
}

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

.form-label {
	display: block !important;
	font-size: 12px !important;
	margin-bottom: 2px !important;
	color: var(--color-text-basic) !important;
	font-weight: 500 !important;
}

.form-input {
	width: 100% !important;
	height: 34px !important;
	border: 1px solid var(--color-border-gray) !important;
	border-radius: 6px !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	box-sizing: border-box !important;
}

.form-input::placeholder {
	color: #9ca3af;
}

.form-input:focus {
	border-color: var(--color-border-primary);
	box-shadow: 0 0 0 2px rgba(58, 75, 255, 0.18);
}

.form-select-wrap {
	position: relative;
}

.form-select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 45%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-border-gray-dark);
	border-bottom: 2px solid var(--color-border-gray-dark);
	pointer-events: none;
}

.form-select-wrap .form-select {
	appearance: none;
}

.form-select {
	min-width: 120px !important;
	width: 100% !important;
	height: 34px !important;
	border: 1px solid var(--color-border-gray) !important;
	border-radius: 6px !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.form-select::placeholder {
	color: #9ca3af;
}

.form-select:hover {
	border-color: var(--color-border-primary);
}

.form-select:focus {
	border-color: var(--color-border-primary);
	box-shadow: 0 0 0 2px rgba(58, 75, 255, 0.18);
}

.form-select.form-select-borderless {
	border: transparent;
}

.form-select.form-select-borderless:hover {
	border: transparent;
}

.form-select.form-select-borderless:focus {
	border: transparent;
	box-shadow: none;
}

.btn {
	display: flex !important;
	align-items: center !important;
	height: 34px !important;
	padding: 0 12px !important;
	border-radius: 6px !important;
	border: 1px solid transparent !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	cursor: pointer !important;
}

.btn.icon-btn {
	padding: 0 4px;
}

.btn-primary {
	background: var(--color-element-primary) !important;
	color: #ffff !important;
}

.btn-primary:hover {
	filter: brightness(0.95) !important;
}

.btn-outlined {
	background: #fff !important;
	border-color: var(--color-border-gray) !important;
}

.btn-outlined:hover {
	background: var(--color-surface-gray-subtle) !important;
}

.btn-ghost {
	background: #fff;
}

.btn-ghost:hover {
	background: var(--color-surface-gray-subtle);
}