/*
 * 사용자 사이트 테마 (D안 · 1번 방식)
 *  - 바탕 연회색 + 흰 둥근 타일 + 진한 남색, 글꼴 Pretendard (숫자는 자릿수 폭 고정)
 *  - 빨강·파랑은 오름·내림(상승·하락)에만 쓴다. 강조·버튼·구간 표시는 남색 계열의 진하기로.
 *  - view_layout / toolbar 의 인라인 스타일 뒤에 로드되어 덮어쓴다.
 */
:root {
	--chun-bg: #EEF1F5;
	--chun-surface: #FFFFFF;
	--chun-surface-2: #F5F7FA;
	--chun-ink: #141A26;
	--chun-ink-2: #2D3748;
	--chun-muted: #4A5568;
	--chun-faint: #718096;
	--chun-line: #E3E7EE;
	--chun-zone-1: #D5DBE5;
	--chun-zone-2: #A9B4C6;
	--chun-zone-3: #6B7A93;
	--chun-zone-4: #2B3A55;
	--chun-up: #BF1122;
	--chun-down: #1E4FBF;
	--chun-radius: 20px;

	/* 기존 퍼블리싱 변수 재정의 : 붉은 계열 강조 → 남색 계열 */
	--color_main: #141A26;
	--color_bg_main: #EEF1F5;
	--color_bg_gray: #F5F7FA;
	--color_bg_bt_gray: #EEF1F5;
	--color_bg_table_header: #F5F7FA;
	--color_bg_table_seleced: #E3E7EE;
	--color_bg_barchart: #E3E7EE;
	--color_text_basic: #141A26;
	--color_text_sub: #4A5568;
	--color_text_sub_02: #4A5568;
	--color_line_normal: #E3E7EE;
	--color_line_light: #EEF1F5;
	--color_line_table_normal: #E3E7EE;
	--color_line_table_dark: #C9D1DE;
	--color_line_hover: #A9B4C6;
	--color_line_active: #141A26;
	--color_line_b_light: #A9B4C6;
}

/* ---------- 기본 ---------- */
html body {
	font-family: var(--cs-font);
	color: var(--chun-ink);
	background-color: var(--chun-bg);
}
html body #wrapper,
html body #content-wrapper,
html body #content-wrapper #content,
html body .chun_ui_new_body {
	background-color: var(--chun-bg) !important;
}
html body .chun_ui_new_body {
	padding: 24px;
}
html body a { color: var(--chun-ink-2); }
html body a:hover { color: var(--chun-ink); }
html body .text-signature,
html body .text-primary,
html body .text-danger:not(.chun-keep-color) {
	color: var(--chun-ink) !important;
}

/* ---------- 카드 (흰 둥근 타일) ---------- */
html body .card,
html body .chun_ui_new_card {
	border: none;
	border-radius: var(--chun-radius);
	box-shadow: none !important;
	background-color: var(--chun-surface);
}
html body .chun_ui_new_card .card-header,
html body .chun_ui_new_card_header,
html body .card > .card-header {
	background-color: var(--chun-surface);
	border-bottom: 1px solid var(--chun-bg);
	padding: 18px 24px;
}
html body .chun_ui_new_card .card-body { padding: 22px 24px; }
html body .chun_ui_new_card_header_title,
html body .chun_ui_new_card .card-header h6,
html body .card-header .m-0.font-weight-bold {
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--chun-ink) !important;
}

/* ---------- 버튼 : 남색 알약 ---------- */
html body .btn {
	border-radius: 999px;
	font-weight: 700;
	box-shadow: none !important;
}
html body .btn-primary,
html body .btn-signature,
html body .btn-danger,
html body .btn-danger2,
html body .btn-success,
html body .btn-info {
	background-color: var(--chun-solid, var(--chun-ink)) !important;
	border-color: var(--chun-solid, var(--chun-ink)) !important;
	color: #FFFFFF !important;
}
html body .btn-primary:hover,
html body .btn-signature:hover,
html body .btn-danger:hover,
html body .btn-danger2:hover,
html body .btn-success:hover,
html body .btn-info:hover {
	background-color: var(--chun-ink-2) !important;
	border-color: var(--chun-ink-2) !important;
}
html body .btn-secondary,
html body .btn-light,
html body .btn-outline-secondary,
html body .btn-outline-primary,
html body .btn-outline-danger {
	background-color: var(--chun-surface-2) !important;
	border-color: var(--chun-surface-2) !important;
	color: var(--chun-ink) !important;
}
html body .btn-secondary:hover,
html body .btn-light:hover,
html body .btn-outline-secondary:hover,
html body .btn-outline-primary:hover,
html body .btn-outline-danger:hover {
	background-color: var(--chun-line) !important;
	border-color: var(--chun-line) !important;
}

/* ---------- 표 ---------- */
html body .table thead th,
html body table.dataTable thead th {
	background-color: var(--chun-surface-2) !important;
	color: var(--chun-ink) !important;
	border-color: var(--chun-line) !important;
	font-weight: 800;
}
html body .table td,
html body .table th { border-color: var(--chun-line) !important; }
html body .table-hover tbody tr:hover { background-color: var(--chun-surface-2); }

/* ---------- 좌측 메뉴 ---------- */
html body .chun_ui_new_wrapper,
html body #accordionSidebar.chun_ui_new {
	background-color: var(--chun-surface) !important;
	border-right: 1px solid var(--chun-bg);
}
html body .chun_ui_new_side_body .nav-item .nav-link {
	border-radius: 12px;
	margin: 2px 12px;
	width: calc(100% - 24px) !important;
	box-sizing: border-box;
}
html body .chun_ui_new_side_body .nav-item.active > .nav-link {
	background-color: var(--chun-solid, var(--chun-ink)) !important;
}
html body .chun_ui_new_side_body .nav-item.active > .nav-link span,
html body .chun_ui_new_side_body .nav-item.active > .nav-link[data-toggle="collapse"]::after {
	color: #FFFFFF !important;
}
html body .chun_ui_new_side_body .nav-item.active > .nav-link i svg { fill: #FFFFFF !important; }
html body .chun_ui_new_side_body .nav-item .collapse-inner .collapse-item { border-radius: 10px !important; }
html body .chun_ui_new_side_body .nav-item .collapse-inner .collapse-item.active {
	background-color: var(--chun-bg) !important;
	color: var(--chun-ink) !important;
	font-weight: 700;
}
/* 하단 버튼 : 가이드(연회색) · VIP(남색) · 후원(흰 테두리) */
html body .chun_ui_new_side_bottom button {
	background-image: none !important;
	border-radius: 14px !important;
	background-color: var(--chun-surface-2) !important;
	border: 1px solid var(--chun-surface-2) !important;
	color: var(--chun-ink) !important;
}
html body .chun_ui_new_side_bottom button svg { fill: var(--chun-ink) !important; }
html body .chun_ui_new_side_bottom button * { color: var(--chun-ink) !important; }
html body .chun_ui_new_side_bottom button.chun_ui_new_side_bottom_bt_ver01 {
	background-color: var(--chun-solid, var(--chun-ink)) !important;
	border-color: var(--chun-solid, var(--chun-ink)) !important;
}
html body .chun_ui_new_side_bottom button.chun_ui_new_side_bottom_bt_ver01 svg { fill: #FFFFFF !important; }
html body .chun_ui_new_side_bottom button.chun_ui_new_side_bottom_bt_ver01 * { color: #FFFFFF !important; }
html body .chun_ui_new_side_bottom button.chun_ui_new_side_bottom_bt_ver02 {
	background-color: var(--chun-surface) !important;
	border-color: var(--chun-line) !important;
}

/* ---------- 천지수 구간 막대 : 남색 한 가지의 진하기 ---------- */
html body .chun-index-bar .segment-overbought { background: var(--chun-zone-1) !important; color: var(--chun-ink) !important; }
html body .chun-index-bar .segment-neutral { background: var(--chun-zone-2) !important; color: var(--chun-ink) !important; }
html body .chun-index-bar .segment-caution { background: var(--chun-zone-3) !important; color: #FFFFFF !important; }
html body .chun-index-bar .segment-overheated { background: var(--chun-zone-4) !important; color: #FFFFFF !important; }
html body .chun-index-bar .chun-index-segment * { color: inherit !important; }
html body .map-pin.t0 { background-color: var(--chun-line) !important; }
html body .map-pin.t1 { background-color: var(--chun-zone-1) !important; color: var(--chun-ink) !important; }
html body .map-pin.t2 { background-color: var(--chun-zone-2) !important; color: var(--chun-ink) !important; }
html body .map-pin.t3 { background-color: var(--chun-zone-3) !important; }
html body .map-pin.t4 { background-color: var(--chun-zone-4) !important; }
html body .map-pin.t0::after { border-top-color: var(--chun-line) !important; }
html body .map-pin.t1::after { border-top-color: var(--chun-zone-1) !important; }
html body .map-pin.t2::after { border-top-color: var(--chun-zone-2) !important; }
html body .map-pin.t3::after { border-top-color: var(--chun-zone-3) !important; }
html body .map-pin.t4::after { border-top-color: var(--chun-zone-4) !important; }

/* ---------- 모달 · 입력 ---------- */
html body .modal-content { border: none; border-radius: var(--chun-radius); }
html body .form-control,
html body select.form-control {
	border-radius: 12px;
	border-color: var(--chun-line);
}
html body .form-control:focus {
	border-color: var(--chun-solid, var(--chun-ink));
	box-shadow: 0 0 0 3px rgba(20, 26, 38, 0.08);
}

/* ---------- 푸터 ---------- */
html body footer.sticky-footer,
html body footer.chun_ui_new_footer { background-color: var(--chun-bg) !important; }

/* ---------- 이 화면 읽는 법 (chun-guide.js) ---------- */
#chun-guide-slot:empty { display: none; }
.chun-guide {
	margin-bottom: 18px;
	background: var(--chun-surface);
	border-radius: var(--chun-radius);
	overflow: hidden;
}
.chun-guide-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: var(--chun-ink);
}
.chun-guide-badge {
	flex: 0 0 auto;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--chun-solid, var(--chun-ink));
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 800;
}
.chun-guide-summary { flex: 1 1 auto; font-size: 15px; font-weight: 700; line-height: 1.55; }
.chun-guide-toggle { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--chun-muted); }
.chun-guide-body {
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	padding: 0 22px 22px;
}
.chun-guide.is-open .chun-guide-body { display: grid; }
.chun-guide-col {
	background: var(--chun-surface-2);
	border-radius: 16px;
	padding: 16px 18px;
}
.chun-guide-col.is-caution { background: #F7F4EC; }
.chun-guide-col h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--chun-ink); }
.chun-guide-col ul { margin: 0; padding-left: 18px; }
.chun-guide-col li { font-size: 14px; line-height: 1.7; color: var(--chun-ink-2); margin-bottom: 4px; }
.chun-guide-col li b { color: var(--chun-ink); }
@media (max-width: 575.98px) {
	.chun-guide-head { flex-wrap: wrap; padding: 14px 16px; }
	.chun-guide-summary { flex-basis: 100%; order: 3; font-size: 14px; }
	.chun-guide-toggle { margin-left: auto; }
	.chun-guide-body { padding: 0 16px 16px; }
}

/* ---------- 표 보기 도우미 (chun-table.js) ---------- */
.chun-table-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 4px 0 10px;
}
.chun-table-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	max-width: 420px;
	margin: 0;
	padding: 0 14px;
	height: 40px;
	border-radius: 999px;
	background: var(--chun-surface-2);
	border: 1px solid var(--chun-line);
}
.chun-table-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--chun-ink);
}
.chun-table-search:focus-within { border-color: var(--chun-solid, var(--chun-ink)); }
.chun-table-count { font-size: 13px; font-weight: 700; color: var(--chun-muted); }
.chun-table-full-btn {
	margin-left: auto;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--chun-line);
	background: var(--chun-surface);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--chun-ink);
	cursor: pointer;
}
.chun-table-full-btn:hover { background: var(--chun-surface-2); }
/* 첫 열 고정 */
table.chun-sticky-first tbody tr > :first-child,
table.chun-sticky-first thead tr > th:first-child[colspan="1"],
table.chun-sticky-first thead tr > th:first-child:not([colspan]) {
	position: sticky;
	left: 0;
	z-index: 2;
	background-color: var(--chun-surface);
	box-shadow: 1px 0 0 var(--chun-line);
}
table.chun-sticky-first thead tr > th:first-child { background-color: var(--chun-surface-2); }
/* 줄 강조 · 흐리게 */
.chun-table-scroll tbody tr { cursor: pointer; }
.chun-table-scroll tbody tr.chun-row-picked > td { background-color: #E3E7EE !important; font-weight: 700; }
.chun-table-scroll tbody tr.chun-row-dim > td { opacity: 0.25; }
/* 전체 화면 */
body.chun-table-full-open { overflow: hidden; }
.chun-table-box.is-full {
	position: fixed;
	inset: 0;
	z-index: 1060;
	background: var(--chun-surface);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
}
.chun-table-box.is-full .chun-table-scroll {
	flex: 1 1 auto;
	overflow: auto !important;
	max-height: none;
}
.chun-table-box.is-full thead th {
	position: sticky;
	z-index: 3;
	background-color: var(--chun-surface-2) !important;
}
.chun-table-box.is-full table.chun-sticky-first thead tr > th:first-child { z-index: 4; }

/* ---------- 휴대폰 하단 탭 ---------- */
html body .chun_ui_new_side_m_bottom_bt {
	background: var(--chun-solid, var(--chun-ink)) !important;
	background-image: none !important;
	box-shadow: 0 6px 16px rgba(20, 26, 38, 0.25) !important;
}