/* 
	2026-07-04 | v10.18.17 | nullpia | 캐시 무효화용 import 쿼리스트링 버전(v10.18.17) 적용
	2026-07-04 | v10.18.18 | nullpia | 캐시 무효화용 import 쿼리스트링 버전(v10.18.18) 적용
	2026-07-06 | v10.18.29 | nullpia | 공용 폰트 축소 스타일(.smaller) 정의 추가 및 캐시 무효화 적용
	2026-07-11 | v10.19.62 | nullpia | 관리자 테마 CSS 및 타이포그래피 'Dark & Metal' 스타일 리팩토링
	2026-07-18 | v10.22.04 | nullpia | 모바일 데스크톱 모드 vh-100 높이 계산 버그 해결을 위해 --vh 매핑 스타일 추가
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/danielfoxx/d2coding-ligature-font@master/d2coding-ligature.css');
@import url('./xp-variables.css?v=10.22.04');

:root {
	--glass-blur: blur(15px);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3);
	--shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.1);
	--sidebar-width: 15rem;
	--sidebar-mini-width: 4.5rem;
	--header-height: 3.5rem;
	--transition-std: 0.2s ease-in-out;

	/* 본문 밀착도 조절 변수 (사용자 정의 가능) */
	--main-margin-top: 0.5rem;
	--main-margin-left: 0.6rem;
	--main-margin-right: 0.6rem;
	--main-margin-bottom: 0.6rem;
}

/* ==========================================================================
   1. Base & Global Typography
   ========================================================================== */
html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	background-color: var(--bg-body);
	color: var(--text-main);
	font-family: var(--font-mono);
	margin: 0;
	transition: background-color var(--transition-std), color var(--transition-std);
}

body.sb-sidenav-block-scroll {
	overflow: hidden !important;
}

h1,
h2,
h3,
.navbar-brand {
	background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 45%, #94a3b8 55%, #f1f5f9 100%);
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	text-fill-color: transparent !important;
	font-weight: 700;
	transition: color var(--transition-std);
}

h4,
h5,
h6 {
	color: var(--text-title) !important;
	font-weight: 700;
	transition: color var(--transition-std);
}

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

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

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

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

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

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

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

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

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
	background: var(--text-dim);
	border-radius: 4px;
}

/* Pure Flex Layout Frame - Definitive Adherence Fix */
#layoutSidenav {
	display: flex;
	flex-grow: 1;
	min-height: 0;
	overflow: hidden;
	margin-top: 0 !important; /* redundant margin removed */
}

#layoutSidenav_nav {
	width: var(--sidebar-width);
	flex-shrink: 0;
	transition: all var(--transition-std);
	background: var(--grad-sidebar);
	border-right: 1px solid var(--border-normal);
	z-index: 1050;
	box-shadow: 5px 0 20px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	position: relative; /* Fixed removed for flex adherence */
}

#layoutSidenav_content {
	flex-grow: 1;
	transition: all var(--transition-std);
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-left: 0 !important; /* redundant margin removed */
	background-color: var(--bg-body);
}

.topnav {
	height: var(--header-height);
	flex-shrink: 0;
	z-index: 1100;
	background: var(--glass-bg) !important;
	backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--border-bright) !important;
	box-shadow: var(--shadow-sm) !important;
	position: relative; /* Fixed removed for ceiling stacking */
}

/* ==========================================================================
   2. Sidebar Tree
   ========================================================================== */
.sidebar-tree,
.sidebar-tree ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-item {
	position: relative;
}

.sidebar-link {
	display: flex;
	align-items: center;
	padding: 0.25rem 1.25rem;
	color: var(--text-muted) !important;
	text-decoration: none;
	font-size: 0.9rem;
	transition: all var(--transition-std);
	border-radius: 4px;
	margin: 0 0.6rem;
}

.sidebar-link:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-title) !important;
}

.sidebar-link.active {
	color: var(--accent) !important;
	background: rgba(0, 123, 255, 0.08);
	font-weight: 600;
}

.sidebar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	margin-right: 0;
	font-size: 1rem;
	opacity: 0.75;
	color: inherit;
}

.sidebar-arrow {
	margin-left: auto;
	font-size: 0.7rem;
	transition: transform 0.3s ease;
	opacity: 0.6;
}

.sidebar-link:not(.collapsed) .sidebar-arrow {
	transform: rotate(180deg);
}

.sidebar-item .collapse {
	padding-left: 1.25rem;
	position: relative;
}

.sidebar-item .collapse::before {
	content: '';
	position: absolute;
	left: 1.15rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, var(--border-bright) 0%, transparent 100%);
	opacity: 0.5;
}

@media (min-width: 992px) {
	.sidenav-toggled #layoutSidenav_nav {
		width: 0;
		overflow: hidden;
		border-right: none;
		box-shadow: none;
	}
	.sidenav-toggled .sidebar-logo,
	.sidenav-toggled .sidebar-text,
	.sidenav-toggled .sidebar-arrow {
		display: none;
	}
}

@media (max-width: 991.98px) {
	#layoutSidenav_nav {
		position: fixed;
		top: var(--header-height);
		bottom: 0;
		left: 0;
		width: var(--sidebar-width);
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
		z-index: 1040;
	}
	.sidebar-open #layoutSidenav_nav,
	body:not(.sidenav-toggled) #layoutSidenav_nav {
		transform: translateX(0);
	}
}

/* ==========================================================================
   3. XpTree & ContextMenu & Modals (RECOVERED)
   ========================================================================== */
.xp-tree {
	border-collapse: separate;
}

.xp-tree span.xp-icon {
	display: inline-block;
	width: 1.2rem;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: var(--accent);
	font-family: "bootstrap-icons";
}

.xp-tree span.xp-icon.open:after {
	content: "\F229";
}

.xp-tree span.xp-icon.close:after {
	content: "\F231";
}

.xp-tree span.xp-icon.leaf:after {
	content: "\F287";
	font-size: 0.6rem;
	opacity: 0.4;
	color: var(--text-muted);
}

.xp-tree tr {
	border-top: 1px solid var(--border-normal) !important;
}

.xp-tree tr:hover {
	background: var(--bg-table-hover);
}

.xp-contextmenu {
	background: var(--bg-surface);
	border: 1px solid var(--border-bright);
	box-shadow: var(--shadow-lg);
	font-size: 13px;
	padding: 5px 0;
	display: none;
	position: absolute;
	z-index: 9999;
	border-radius: 4px;
}

.xp-contextmenu-item {
	padding: 8px 16px;
	cursor: pointer;
	color: var(--text-muted);
}

.xp-contextmenu-item:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--accent);
}

.xp-contextmenu.is-open {
	display: block;
}

.xp-modal {
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 2000;
}

.xp-modal .xp-modal-backdrop {
	background: rgba(0, 0, 0, 0.7);
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 2001;
}

.xp-modal .xp-modal-wrap {
	background: var(--grad-card);
	border: 1px solid var(--border-bright);
	border-radius: 6px;
	box-shadow: var(--shadow-lg);
	max-width: 80vw;
	min-width: 450px;
	position: fixed;
	top: -100%;
	transition: all 0.5s ease;
	z-index: 2002;
}

.xp-modal.visible {
	opacity: 1;
	visibility: visible;
}

.xp-modal.visible .xp-modal-wrap {
	top: 15%;
}

/* ==========================================================================
   4. UI Components & Forms
   ========================================================================== */
.nav-tabs {
	border-bottom: 1px solid var(--border-bright) !important;
	position: relative;
	z-index: 10;
}

.nav-tabs .nav-link {
	border: none !important;
	color: var(--text-muted);
	font-weight: 500;
	transition: all 0.2s;
	padding: 0.6rem 1.25rem;
}

.nav-tabs .nav-link.active {
	color: var(--accent) !important;
	background: transparent !important;
	border-bottom: 2px solid var(--accent) !important;
	font-weight: 700;
}

/* xp-nav-tabs: 고대비 및 시안성 강화 버전 탭 */
.xp-nav-tabs {
	border-bottom: 1px solid var(--border-normal) !important;
}

.xp-nav-tabs .nav-link {
	color: rgba(255, 255, 255, 0.5) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 10px 20px !important;
	transition: all 0.2s !important;
	border-bottom: 2px solid transparent !important;
}

.xp-nav-tabs .nav-link:hover {
	color: var(--accent) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}

.xp-nav-tabs .nav-link.active {
	color: #fff !important;
	background: rgba(var(--bs-info-rgb), 0.1) !important;
	border-bottom: 2px solid var(--accent) !important;
	font-weight: 700 !important;
}

.xp-nav-tabs .nav-link .badge {
	transition: all 0.2s;
}

.xp-nav-tabs .nav-link.active .badge {
	background-color: var(--accent) !important;
	color: #000 !important;
}

.card {
	background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
	            linear-gradient(135deg, rgba(226, 232, 240, 0.4), rgba(100, 116, 139, 0.1), rgba(203, 213, 225, 0.4)) border-box !important;
	border: 1px solid transparent !important;
	box-shadow: var(--shadow-lg) !important;
	border-radius: 6px !important;
	color: var(--text-main);
	position: relative;
	transition: background var(--transition-std), box-shadow var(--transition-std), border-color var(--transition-std);
}

.card:hover {
	background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
	            linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(148, 163, 184, 0.3), rgba(226, 232, 240, 0.7)) border-box !important;
	box-shadow: 0 12px 30px rgba(0, 229, 255, 0.12), var(--shadow-lg) !important;
}

.card-header {
	background: rgba(0, 0, 0, 0.03) !important;
	border-bottom: 1px solid var(--border-normal) !important;
	color: var(--text-title);
	font-weight: 700;
}

/* xp-form-label: 정보 계층 구조를 명확히 하는 초소형 라벨 표준 */
.xp-form-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted); /* 제목 강조색(Cyan)과 분리하여 시인성 확보 */
	opacity: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	height: 18px;
	line-height: 18px;
}

/* 필수 항목 표시 자동화: 라벨 앞에 별표(*) 배치로 수직 스캐닝 시인성 강화 */
.xp-form-label.required::before {
	content: "*";
	color: var(--accent-up) !important; /* Red 계열 */
	margin-right: 4px;
	font-family: serif;
	font-size: 0.9rem;
	vertical-align: middle;
}

/* xp-form-control: 프레임워크 표준 입력 컴포넌트 스타일 (Bootstrap form-control 대체) */
.xp-form-control {
	display: block;
	width: 100%;
	height: 28px;
	padding: 0.15rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	background-color: var(--bg-pure) !important;
	border: 1px solid var(--border-normal) !important;
	color: var(--text-main) !important;
	border-radius: 4px !important;
	transition: all 0.2s ease-in-out;
}

textarea.xp-form-control {
	height: auto !important;
}

/* input-group 내에서의 호환성 보정: 버튼과 나란히 배치되도록 함 */
.input-group > .xp-form-control {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

.input-group > .xp-form-control:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group > .xp-form-control:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.xp-form-control:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--bs-info-rgb), 0.15) !important;
	background-color: var(--bg-surface-dark) !important;
	outline: 0;
}

.xp-form-control::placeholder {
	color: var(--text-placeholder) !important;
}

/* Select 박스 화살표 커스텀 구현 */
select.xp-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 16px 12px;
	padding-right: 2rem;
}

/* Background Utilities */
.bg-darker {
	background-color: var(--bg-surface-dark) !important;
}

.bg-dark {
	background-color: var(--bg-surface) !important;
}

/* ==========================================================================
   5. Tables & Split Layout
   ========================================================================== */
.xp-split-container {
	display: flex !important;
	overflow: hidden !important;
	border: 1px solid var(--border-normal);
	border-radius: 6px;
}

.xp-table-container {
	background: var(--bg-pure) padding-box !important;
	border: 1px solid transparent !important;
	border-image: linear-gradient(135deg, rgba(226, 232, 240, 0.4), rgba(148, 163, 184, 0.2), rgba(203, 213, 225, 0.4)) 1 !important;
	overflow: auto;
	width: 100%;
	position: relative;
	z-index: 1;
}

.xp-table-fixed {
	table-layout: fixed !important;
	border-collapse: separate !important;
	border-spacing: 0;
	border: none !important;
}

.xp-table-fixed thead th,
.xp-table-fixed tbody td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	color: var(--text-main) !important;
	border-left: none !important;
	border-right: none !important;
}

/* Sticky Layer 정규화 (모달보다 항상 낮게 유지) */
.sticky-top {
	position: sticky !important;
	top: 0;
	z-index: 100 !important;
}

.xp-sticky {
	position: sticky !important;
	background-color: var(--bg-surface-light) !important;
	z-index: 50 !important;
}

thead th.xp-sticky {
	top: 0;
	z-index: 100 !important;
	box-shadow: inset 0 -1px 0 var(--border-bright);
	color: var(--text-main) !important;
}

.table {
	color: var(--text-main) !important;
	border-color: var(--border-normal) !important;
	background-color: transparent !important;
}

.table-dark {
	--bs-table-bg: transparent !important;
	--bs-table-color: var(--text-main) !important;
	color: var(--text-main) !important;
}

.table-hover tbody tr:hover {
	--bs-table-bg-state: transparent !important;
	background-color: var(--bg-table-hover) !important;
}

.table-active {
	--bs-table-bg-state: transparent !important;
	background-color: var(--bg-table-active) !important;
	/* color: var(--accent) !important; 제거: 자식 배지 색상 보존 */
}

/* ==========================================================================
   6. Width Helpers
   ========================================================================== */
.xp-w-40px {
	width: 40px !important;
	min-width: 40px !important;
}

.xp-w-60px {
	width: 60px !important;
	min-width: 60px !important;
}

.xp-w-100px {
	width: 100px !important;
	min-width: 100px !important;
}

.xp-w-150px {
	width: 150px !important;
	min-width: 150px !important;
}

.xp-w-200px {
	width: 200px !important;
	min-width: 200px !important;
}

/* ==========================================================================
   6.1. Button Extensions (Standardized Sizes)
   ========================================================================== */
/* Standard Button Overrides */
.btn {
	white-space: nowrap !important;
}

/* btn-xs: High-density compact size (28px height) */
.btn-xs {
	padding: 2px 8px;
	font-size: 0.75rem;
	line-height: 1.5;
	border-radius: 4px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.btn-group-xs > .btn {
	padding: 2px 8px;
	font-size: 0.75rem;
	line-height: 1.5;
	height: 28px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* btn-sm: Default administrative size (32px height) */
.btn-sm {
	height: 32px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
}

.btn-group-sm > .btn {
	height: 32px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ==========================================================================
   6.2. Common UI Patterns
   ========================================================================== */
/* xp-resizer: Split pane divider */
.xp-resizer {
	width: 4px;
	cursor: col-resize;
	background: transparent;
	transition: background 0.2s;
	z-index: 50;
}

.xp-resizer:hover,
.xp-resizer.dragging {
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}

/* xp-selectable-item: Standard list/card selection pattern */
.xp-selectable-item {
	border-left: 3px solid transparent;
	transition: all 0.2s;
	cursor: pointer;
	position: relative;
}

.xp-selectable-item:hover {
	background: var(--bg-table-hover);
}

.xp-selectable-item.active {
	background: var(--bg-table-active);
	border-left-color: var(--accent);
}

/* xp-action-toolbar: Hover-to-reveal control group (depends on .xp-selectable-item parent) */
.xp-action-toolbar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 6px;
	padding: 4px 8px;
	background: var(--bg-surface-dark);
	border: 1px solid var(--border-normal);
	border-radius: 6px;
	opacity: 0;
	transform: translateX(10px);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: var(--shadow-lg);
	pointer-events: none;
	z-index: 100;
}

.xp-selectable-item:hover .xp-action-toolbar,
.xp-card-item:hover .xp-action-toolbar {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.xp-action-toolbar .btn-link {
	padding: 0 4px;
	line-height: 1;
	font-size: 0.9rem;
	color: var(--text-muted);
	transition: color 0.2s;
}

.xp-action-toolbar .btn-link:hover {
	color: var(--accent);
}

.xp-action-toolbar .btn-link.text-danger:hover {
	color: var(--accent-up);
}

/* xp-terminal: Log monitor style */
.xp-terminal {
	background-color: #050505;
	color: #00ff00;
	font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
	padding: 1rem;
	border-radius: 4px;
	border: 1px solid var(--border-normal);
	line-height: 1.4;
	overflow-y: auto;
	font-size: 0.85rem;
}

/* xp-sort-bar: Compact sort control bar */
.xp-sort-bar {
	display: flex;
	align-items: center;
	padding: 6px 12px !important;
	background: var(--bg-surface-light) !important;
	border-bottom: 1px solid var(--border-normal);
	font-size: 0.8125rem;
	border-left: 3px solid transparent; /* Match card-item border for perfect alignment */
}

.xp-sort-bar .xp-sort-links {
	display: flex;
	align-items: center;
	flex-grow: 1;
}

.xp-sort-link {
	color: var(--text-muted);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.xp-sort-link:hover,
.xp-sort-link.active {
	color: var(--accent);
}

/* Standard Checkbox + State Column (44px fixed width for perfect vertical alignment) */
.xp-check-column {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 44px;
	flex-shrink: 0;
	margin-right: 12px;
	justify-content: flex-start;
}

.xp-check-column .form-check-input {
	margin: 0 !important;
	padding: 0 !important;
	width: 1.1rem !important;
	height: 1.1rem !important; /* Size parity */
}

.xp-check-column .xp-rs-indicator {
	width: 12px;
	text-align: center;
	font-weight: 700;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* xp-card-list: High-density vertical list */
.xp-card-list {
	display: flex;
	flex-direction: column;
}

.xp-scroll-v {
	overflow-y: auto !important;
}

.xp-card-item {
	display: flex;
	align-items: center;
	padding: 8px 12px !important;
	border-bottom: 1px solid var(--border-dim);
	transition: all 0.2s;
	cursor: pointer;
	border-left: 3px solid transparent;
	position: relative; /* Toolbar context */
}

/* Compact Variant: Standardized padding to match sort-bar when compact */
.xp-card-item.compact {
	padding: 6px 12px !important;
}

.xp-card-item.compact .xp-card-title {
	font-size: 0.85rem;
	margin-bottom: 0;
}

.xp-card-item.compact .xp-card-sub {
	font-size: 0.7rem;
	margin-top: 0 !important;
}

.xp-card-item:hover {
	background: var(--bg-table-hover);
}

.xp-card-item.active,
.xp-card-item.table-active {
	background: var(--bg-table-active);
	border-left-color: var(--accent);
}

/* Internal Card Elements */
.xp-card-body {
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.xp-card-title {
	font-weight: 700;
	color: var(--text-title);
	margin-bottom: 2px;
}

.xp-card-sub {
	font-size: 0.75rem;
	color: var(--text-muted);
	opacity: 0.8;
}

.xp-card-meta {
	flex-shrink: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

/* Legacy support for old names */
.xp-card-item .item-title {
	font-weight: 700;
	color: var(--text-title);
	margin-bottom: 2px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.xp-card-item .item-sub {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-bottom: 4px;
}

.xp-card-item .item-meta {
	font-size: 0.7rem;
	color: var(--text-dim);
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ==========================================================================
   7. Full Height Layout Utilities
   ========================================================================== */

/* 1. 화면 높이에서 나머지를 자동으로 채우는 유연한 행 */
.xp-layout-row {
	flex: 1;
	min-height: 0;
	display: flex;
	overflow: hidden; /* 전체 페이지 스크롤 방지 */
}

.xp-h-10 {
	height: 10% !important;
}

.xp-h-20 {
	height: 20% !important;
}

.xp-h-30 {
	height: 30% !important;
}

.xp-h-40 {
	height: 40% !important;
}

.xp-h-50 {
	height: 50% !important;
}

.xp-h-60 {
	height: 60% !important;
}

.xp-h-70 {
	height: 70% !important;
}

.xp-h-80 {
	height: 80% !important;
}

.xp-h-90 {
	height: 90% !important;
}

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

/* 3. 부모 컨테이너의 높이를 100% 채우는 Flex 기반 카드 */
.xp-card-full {
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 0 !important;
	overflow: hidden;
}

/* 4. 내부 스크롤 표준 카드 (Header/Footer 제외하고 바디만 스크롤) */
.xp-scroll-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.xp-scroll-card .card-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

/* 5. Flex 구조에서 남는 공간을 모두 차지하며 내부 스크롤을 활성화 */
.xp-flex-fill {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
}

#mainBody {
	padding: var(--main-margin-top) var(--main-margin-right) var(--main-margin-bottom) var(--main-margin-left) !important;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ==========================================================================
   7.5. Social Login Buttons
   ========================================================================== */
.btn-social-google {
	background-color: #ffffff !important;
	border-color: #dadce0 !important;
	color: #3c4043 !important;
	font-weight: 600 !important;
}

.btn-social-google:hover {
	background-color: #f8f9fa !important;
	border-color: #d2d4d7 !important;
	color: #202124 !important;
}

.btn-social-kakao {
	background-color: #fee500 !important;
	border-color: #fee500 !important;
	color: #000000 !important;
	font-weight: 600 !important;
}

.btn-social-kakao:hover {
	background-color: #fada0a !important;
	border-color: #fada0a !important;
	opacity: 0.9;
}

/* ==========================================================================
   8. View Components & Semantic Overrides
   ========================================================================== */
.chart-container {
	position: relative;
	flex-grow: 1;
	min-height: 0;
	width: 100%;
	height: 100%;
}

.metric-card {
	transition: transform var(--transition-std);
	cursor: default;
}

.metric-card:hover {
	transform: translateY(-3px);
}

.badge-estimate {
	background-color: rgba(var(--brand-accent-rgb, 187, 154, 247), 0.1) !important;
	color: var(--brand-accent, #bb9af7) !important;
	border: 1px solid rgba(var(--brand-accent-rgb, 187, 154, 247), 0.3) !important;
}

#tag-tab {
	overflow: visible !important;
}

#financeTabsContent {
	overflow: hidden !important;
	height: 100%;
	min-height: 0;
}

.markdown-preview {
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.1));
	border-radius: var(--border-radius-sm, 4px);
	padding: 10px;
	height: 100%;
	overflow-y: auto;
	color: var(--text-main, #e2e8f0);
	font-size: 0.85rem;
	line-height: 1.6;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
	color: var(--accent, #00d4ff);
	font-weight: 600;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.markdown-preview h1 {
	font-size: 1.1rem;
}

.markdown-preview h2 {
	font-size: 1rem;
}

.markdown-preview h3 {
	font-size: 0.9rem;
}

.markdown-preview p {
	margin-bottom: 0.75rem;
}

.markdown-preview ul,
.markdown-preview ol {
	padding-left: 1.25rem;
	margin-bottom: 0.75rem;
}

.markdown-preview code {
	background-color: var(--border-normal, rgba(255, 255, 255, 0.1));
	padding: 0.1rem 0.3rem;
	border-radius: var(--border-radius-sm, 3px);
	font-family: monospace;
	color: #ff9e3b;
}

.markdown-preview pre {
	background-color: var(--bg-surface-dark, rgba(0, 0, 0, 0.4));
	padding: 8px;
	border-radius: var(--border-radius-sm, 4px);
	overflow-x: auto;
}

.markdown-preview pre code {
	background-color: transparent;
	padding: 0;
	color: inherit;
}

.markdown-preview table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.75rem;
}

.markdown-preview th,
.markdown-preview td {
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.1));
	padding: 6px 10px;
	text-align: left;
}

.markdown-preview th {
	background-color: var(--border-dim, rgba(255, 255, 255, 0.05));
	color: var(--accent, #00d4ff);
}

/* apilog.html 개발자 로깅 스타일 */
.sidebar-area {
	background: rgba(0, 0, 0, 0.15);
}

.item-list-area {
	background: rgba(0, 0, 0, 0.05);
}

.content-area {
	background: var(--bg-body, #0c0c12) !important;
}

.task-meta-form {
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid var(--border-normal, rgba(255, 255, 255, 0.05));
}

.form-label-mini {
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--text-muted, #888) !important;
	text-transform: uppercase;
	margin-bottom: 2px;
}

pre.code-block {
	background-color: var(--bg-surface-dark, #1e1e1e);
	color: var(--text-main, #d4d4d4);
	padding: 10px;
	border-radius: var(--border-radius-sm, 4px);
	overflow-x: auto;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.85rem;
	white-space: pre-wrap;
	word-break: break-all;
}

.hdr-block {
	height: 150px !important;
	overflow-y: auto;
	flex-shrink: 0;
}

.body-block {
	overflow-y: auto;
	flex-grow: 1;
	min-height: 200px;
	margin-bottom: 0;
}

/* ==========================================================================
   9. Global Legacy Bootstrap Override (Anti-Hardcoding)
   ========================================================================== */
.table.table-dark {
	--bs-table-bg: var(--bg-surface-light) !important;
	--bs-table-hover-bg: var(--bg-table-hover) !important;
	--bs-table-active-bg: var(--bg-table-active) !important;
	--bs-table-border-color: var(--border-normal) !important;
	color: var(--text-main) !important;
}

.table.table-dark th {
	background-color: var(--bg-surface-dark) !important;
	color: var(--accent) !important;
}

/* xp-terminal 스타일 변수화 */
.xp-terminal {
	background-color: var(--bg-surface-dark, #0c0c12) !important;
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.08)) !important;
	border-radius: var(--border-radius-sm, 4px) !important;
	color: #e2e8f0 !important;
}

/* strd.html 가이드라인 전용 스타일 */
.xp-guide-section {
	scroll-margin-top: 100px;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--border-normal, #333);
	margin-bottom: 3rem;
}

.xp-badge-tech {
	background: rgba(var(--bs-info-rgb), 0.1) !important;
	color: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	padding: 0.2rem 0.6rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-family: 'Consolas', monospace;
}

.xp-demo-box {
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border-normal, #444);
	border-radius: 8px;
	padding: 1.5rem;
	height: 100%;
}

.xp-code-box {
	height: 100%;
}

pre[class*="language-"] {
	margin: 0;
	border-radius: 8px;
	height: 100%;
}

/* Monospace 서체 D2Coding 일괄 강제화 */
pre,
code,
.font-monospace,
.xp-terminal {
	font-family: var(--font-mono) !important;
}

/* calendar.html 캘린더/일정 뷰 전용 스타일 */
.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background-color: var(--border-normal, rgba(255, 255, 255, 0.07));
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.07));
	border-radius: var(--border-radius-md, 8px);
	overflow: hidden;
}

.calendar-dow-header {
	background-color: var(--bg-surface-dark, rgba(0, 0, 0, 0.55));
	text-align: center;
	font-weight: 800;
	font-size: 0.8rem;
	padding: 10px 0;
	color: var(--text-muted, #e4e4e7);
	border-bottom: 1px solid var(--border-normal, rgba(255, 255, 255, 0.1));
}

.calendar-cell {
	background-color: var(--bg-surface, #151521);
	border: 1px solid var(--border-dim, rgba(255, 255, 255, 0.03));
	min-height: 95px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
	transition: var(--transition-std, all 0.2s ease);
}

.calendar-cell:hover {
	background-color: var(--bg-table-hover, rgba(255, 255, 255, 0.05));
}

.calendar-cell.active {
	outline: 2px solid var(--accent, #0dcaf0) !important;
	outline-offset: -2px;
	background-color: var(--bg-table-active, rgba(13, 202, 240, 0.18)) !important;
	box-shadow: 0 0 12px rgba(var(--bs-info-rgb), 0.35);
	z-index: 5;
}

.calendar-cell.other-month {
	opacity: 0.35;
}

.calendar-cell.trading-no {
	background-color: rgba(220, 53, 69, 0.08);
	border: 1px solid rgba(220, 53, 69, 0.15);
}

.calendar-day-num {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--text-title, #ffffff);
	margin-bottom: 4px;
}

.calendar-cell.sunday .calendar-day-num {
	color: var(--accent-up, #f87171);
}

.calendar-cell.saturday .calendar-day-num {
	color: var(--accent-down, #60a5fa);
}

.trd-badge {
	font-size: 0.6rem;
	font-weight: 800;
	padding: 1px 4px;
	border-radius: 3px;
	position: absolute;
	top: 6px;
	right: 6px;
}

.evt-badge-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
	overflow: hidden;
	max-height: 60px;
}

.evt-badge {
	font-size: 0.65rem;
	padding: 2px 4px;
	border-radius: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	border: 1px solid transparent;
}

.evt-badge.HIGH {
	background-color: rgba(239, 68, 68, 0.15);
	color: var(--accent-up, #f87171);
	border-color: rgba(239, 68, 68, 0.25);
}

.evt-badge.MID {
	background-color: rgba(245, 158, 11, 0.15);
	color: var(--accent-highlight, #fbbf24);
	border-color: rgba(245, 158, 11, 0.25);
}

.evt-badge.LOW {
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--accent-down, #60a5fa);
	border-color: rgba(59, 130, 246, 0.25);
}

.info-block {
	background-color: var(--bg-surface-light, rgba(255, 255, 255, 0.02));
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.05));
	border-radius: 6px;
	padding: 12px;
}

.timeline-event-item {
	background: var(--bg-surface-light, rgba(255, 255, 255, 0.01));
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.05));
	border-radius: 6px;
	transition: var(--transition-std, all 0.2s ease);
}

.timeline-event-item:hover {
	background: var(--bg-table-hover, rgba(255, 255, 255, 0.03));
	border-color: var(--border-bright, rgba(255, 255, 255, 0.1));
}

/* popMedia.html 미디어 라이브러리 전용 스타일 */
.media-card {
	transition: var(--transition-smooth, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
}

.media-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.5));
}

.media-card.selected {
	background: var(--bg-table-active, rgba(var(--bs-info-rgb), 0.1)) !important;
	z-index: 5;
}

.shadow-info {
	box-shadow: 0 0 15px rgba(var(--bs-info-rgb), 0.35) !important;
}

.media-card.selected .card-footer {
	background: var(--bg-table-active, rgba(var(--bs-info-rgb), 0.1)) !important;
}

/* archive.html 아카이브 전용 스타일 */
.sidebar-area {
	background: var(--bg-surface-dark, rgba(0, 0, 0, 0.15)) !important;
}

.item-list-area {
	background: var(--bg-surface-light, rgba(0, 0, 0, 0.05)) !important;
}

.content-area {
	background: var(--bg-body, #0c0c12) !important;
}

.task-meta-form {
	background: var(--bg-surface-light, rgba(255, 255, 255, 0.02));
	border-bottom: 1px solid var(--border-normal, rgba(255, 255, 255, 0.05));
}

.form-label-mini {
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--text-muted, #888) !important;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.toastui-editor-contents {
	color: var(--text-main, #c9d1d9) !important;
	font-size: 1rem;
	line-height: 1.6;
}

.toastui-editor-dark {
	background-color: transparent !important;
}

.editor-toolbar-area {
	background: var(--bg-surface-dark, #161b22) !important;
	border-bottom: 1px solid var(--border-normal, #30363d) !important;
}

.xp-h-100-form {
	height: calc(100% - 140px);
}

/* dashboard.html & sync/dashboard.html 대시보드 공통 레이아웃 */
.dashboard-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.fixed-area {
	flex-shrink: 0;
}

.flex-content {
	flex: 1;
	min-height: 0;
}

/* price.html 차트 및 레전드 영역 스타일 */
.chart-container {
	position: relative;
	height: 100%;
	width: 100%;
	min-height: 150px;
}

.xp-chart-legend {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 10;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-main, #333333) !important;
	background: var(--glass-bg, rgba(255, 255, 255, 0.9)) !important;
	padding: 6px 10px;
	border-radius: var(--border-radius-sm, 4px);
	border: 1px solid var(--border-normal, rgba(0, 0, 0, 0.08)) !important;
	pointer-events: none;
	line-height: 1.5;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* board/view.html 추천/비추천 투표 버튼 전용 스타일 */
.btn-vote {
	transition: var(--transition-std, all 0.2s ease-in-out);
	font-weight: 600 !important;
}

.btn-vote-like.outline {
	color: var(--accent-up, #f7768e) !important;
	border-color: rgba(var(--bs-info-rgb), 0.4) !important;
	background: transparent;
}

.btn-vote-like.active {
	color: #fff !important;
	border-color: var(--accent-up, #f7768e) !important;
	background-color: var(--accent-up, #f7768e) !important;
	box-shadow: 0 0 15px rgba(var(--bs-info-rgb), 0.3) !important;
}

.btn-vote-dislike.outline {
	color: var(--text-muted, #787c99) !important;
	border-color: var(--border-normal, rgba(120, 124, 153, 0.4)) !important;
	background: transparent;
}

.btn-vote-dislike.active {
	color: #fff !important;
	border-color: var(--text-muted, #787c99) !important;
	background-color: var(--text-muted, #787c99) !important;
}

/* node.html 분산 노드 관리 화면 스타일 */
.anim-blink {
	animation: blink 1.5s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

/* xpmvc.html 프레임워크 가이드 전용 스타일 */
.guide-section {
	margin-bottom: 2rem;
}

.code-block {
	background: var(--bg-surface-dark, #1e1e1e) !important;
	border: 1px solid var(--border-normal, rgba(255, 255, 255, 0.08)) !important;
	color: #d4d4d4;
	padding: 1rem;
	border-radius: 0.5rem;
	font-family: var(--font-mono) !important;
	font-size: 0.85rem;
	overflow-x: auto;
}

.token-keyword {
	color: #569cd6;
}

.token-attr {
	color: #9cdcfe;
}

.token-string {
	color: #ce9178;
}

.token-comment {
	color: #6a9955;
}

.demo-area {
	border: 2px dashed var(--accent, #0dcaf0) !important;
	padding: 1.5rem;
	border-radius: 0.5rem;
	background: rgba(var(--bs-info-rgb), 0.05) !important;
}

.table thead th,
.table th {
	background-color: var(--bg-surface-light) !important;
	color: var(--text-title) !important;
	border-bottom: 1px solid var(--border-normal) !important;
}

/* 공용 폰트 축소 스타일 */
.xp-smaller {
	font-size: 0.75rem !important;
}

/* 모바일 및 데스크톱 모드 뷰포트 높이 보정 스타일 */
body.vh-100 {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100) !important;
}