/*
 * 사용자 사이트 다크 테마 (기본은 화이트 · 상단 달 / 해 버튼으로 전환)
 *  - <html data-theme="dark"> 일 때만 적용. 화이트 화면은 이 파일의 영향을 받지 않는다
 *  - 1) 색 변수(--cs-* · --chun-* · --color_*)를 다크 값으로 바꾸고  2) 변수를 안 쓰고 직접 색을 적은 곳을 덮어쓴다
 *  - 빨강 · 파랑(오름 · 내림)과 구간 4색은 그대로 쓴다 (어두운 바탕에서도 구분됨)
 *  - chun-free-theme.css · chun-free-ui.css 뒤에 로드
 */
html[data-theme="dark"] {
	color-scheme: dark;

	--cs-bg: #0D1118;
	--cs-surface: #161B24;
	--cs-surface-2: #1D2430;
	--cs-ink: #E8ECF2;
	--cs-ink-2: #CBD3DF;
	--cs-muted: #A3AEBF;
	--cs-faint: #7F8A9C;
	--cs-line: #2A3240;
	--cs-solid: #2E3A50;
	--cs-blue-text: #7FA2EA;
	--cs-red-text: #F0707F;

	--chun-bg: #0D1118;
	--chun-surface: #161B24;
	--chun-surface-2: #1D2430;
	--chun-ink: #E8ECF2;
	--chun-ink-2: #CBD3DF;
	--chun-muted: #A3AEBF;
	--chun-faint: #7F8A9C;
	--chun-line: #2A3240;
	--chun-solid: #2E3A50;
	--chun-zone-1: #2A3344;
	--chun-zone-2: #3A465C;
	--chun-zone-3: #6B7A93;
	--chun-zone-4: #A9B4C6;

	--color_black: #E8ECF2;
	--color_white: #161B24;
	--color_main: #E8ECF2;
	--color_solid: #2E3A50;
	--color_bg_main: #0D1118;
	--color_bg_gray: #1D2430;
	--color_bg_bt_gray: #1D2430;
	--color_bg_bt_disabled: #2A3240;
	--color_bg_table_header: #1D2430;
	--color_bg_table_seleced: #2A3344;
	--color_bg_barchart: #2A3240;
	--color_text_basic: #E8ECF2;
	--color_text_sub: #A3AEBF;
	--color_text_sub_02: #A3AEBF;
	--color_text_disabled: #5E6878;
	--color_text_placeholder: #6B7585;
	--color_line_normal: #2A3240;
	--color_line_light: #222936;
	--color_line_bt: #3A4558;
	--color_line_bt_disabled: #2A3240;
	--color_line_table_normal: #2A3240;
	--color_line_table_dark: #3A4558;
	--color_line_hover: #4A5770;
	--color_line_active: #E8ECF2;
	--color_line_b_light: #4A5770;
}

/* ---------- 바탕 · 글자 ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #content-wrapper,
html[data-theme="dark"] #content { background-color: var(--cs-bg) !important; color: var(--cs-ink-2); }
html[data-theme="dark"] .cs-top { background: var(--cs-bg); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--cs-ink); }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800 { color: var(--cs-ink) !important; }
html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600 { color: var(--cs-ink-2) !important; }
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400, html[data-theme="dark"] .text-muted { color: var(--cs-faint) !important; }
html[data-theme="dark"] a.text-dark:hover { color: #FFFFFF !important; }
html[data-theme="dark"] hr { border-color: var(--cs-line); }
html[data-theme="dark"] ::placeholder { color: #6B7585; }

/* ---------- 상단 헤더 · 테마 버튼 · 서랍 ---------- */
.cs-logo-dark { display: none; }
html[data-theme="dark"] .cs-logo-light { display: none; }
html[data-theme="dark"] .cs-logo-dark { display: block; }
html[data-theme="dark"] .cs-menu { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); border: 1px solid var(--cs-line); }
html[data-theme="dark"] .cs-btn.is-dark { background: #E8ECF2; color: #141A26 !important; }
html[data-theme="dark"] .cs-drawer { background: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .cs-drawer-close { color: var(--cs-ink); }

/* ---------- 타일 · 카드 ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .chun_ui_new_card,
html[data-theme="dark"] .cs-card { background-color: var(--cs-surface) !important; color: var(--cs-ink-2); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { background-color: var(--cs-surface) !important; border-color: var(--cs-line) !important; color: var(--cs-ink); }
html[data-theme="dark"] .bg-light { background-color: var(--cs-surface-2) !important; }
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm { box-shadow: none !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right { border-color: var(--cs-line) !important; }
html[data-theme="dark"] .cs-card.is-dark { background: #1F2838 !important; color: #FFFFFF; }
html[data-theme="dark"] .cs-badge.z1 { background: #1E4FBF; color: #FFFFFF; }
html[data-theme="dark"] .cs-badge.z2 { background: #22345E; color: #A9C4F5; }
html[data-theme="dark"] .cs-badge.z3 { background: #5A1F2A; color: #F4A9B1; }
html[data-theme="dark"] .cs-adr-scale span:first-child { background: #1A2744; color: #A9C4F5; }
html[data-theme="dark"] .cs-adr-scale span:last-child { background: #3A1820; color: #F4A9B1; }
html[data-theme="dark"] .chun-guide-col.is-caution { background: #2A2618; }
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover { background-color: var(--cs-surface); color: var(--cs-ink-2); border-color: var(--cs-line); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--cs-line); }
html[data-theme="dark"] .close { color: var(--cs-ink); text-shadow: none; }
html[data-theme="dark"] .dropdown-item { color: var(--cs-ink-2); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--cs-surface-2); color: var(--cs-ink); }

/* ---------- 표 ---------- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable { color: var(--cs-ink-2); background: transparent; }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] table.dataTable th,
html[data-theme="dark"] table.dataTable td { border-color: var(--cs-line) !important; }
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.dataTable thead th { background-color: var(--cs-surface-2) !important; color: var(--cs-ink) !important; }
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(255, 255, 255, .02); }
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1 { background-color: rgba(255, 255, 255, .03) !important; }
html[data-theme="dark"] table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px rgba(127, 162, 234, .18) !important; color: var(--cs-ink) !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--cs-muted) !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--cs-surface-2) !important; border-color: var(--cs-line) !important; color: var(--cs-ink) !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--cs-surface-2); color: var(--cs-ink); border-color: var(--cs-line); }
html[data-theme="dark"] body .cs-page .table > tbody > tr > td { border-bottom-color: var(--cs-line) !important; }
html[data-theme="dark"] body .cs-page .table > tbody > tr > th + td { box-shadow: inset 1px 0 0 var(--cs-line); }
html[data-theme="dark"] body .cs-page .table > tbody > tr:hover > td { background-color: #1B2230; }
html[data-theme="dark"] body .cs-page .table-responsive { border-color: var(--cs-line); }
html[data-theme="dark"] body .cs-page .red-color { background: #3A1820 !important; color: #F4A9B1 !important; }
html[data-theme="dark"] body .cs-page .blue-color { background: #1A2744 !important; color: #A9C4F5 !important; }
html[data-theme="dark"] body .cs-page .gold-color { background: #33290F !important; color: #E9C46A !important; }
html[data-theme="dark"] body .cs-page .yellow-color { background: #2A2F16 !important; color: #C9D47A !important; }
html[data-theme="dark"] body .cs-page .cs-notice-list .table > tbody > tr > td { border-bottom-color: var(--cs-line) !important; }
html[data-theme="dark"] .chun-table-scroll tbody tr.chun-row-picked > td { background-color: #2A3344 !important; }

/* ---------- 입력 · 버튼 ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea { background-color: var(--cs-surface-2) !important; color: var(--cs-ink) !important; border-color: var(--cs-line) !important; }
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-secondary { background-color: var(--cs-surface-2) !important; color: var(--cs-ink-2) !important; border-color: var(--cs-line) !important; }
html[data-theme="dark"] .btn-link { color: var(--cs-blue-text); }
html[data-theme="dark"] .page-link { background: var(--cs-surface); border-color: var(--cs-line); color: var(--cs-ink-2); }
html[data-theme="dark"] .page-item.active .page-link { background: var(--cs-solid); border-color: var(--cs-solid); color: #FFFFFF; }
html[data-theme="dark"] .nav-tabs { border-color: var(--cs-line); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--cs-muted); }
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .ui-widget-content { background: var(--cs-surface); color: var(--cs-ink-2); border-color: var(--cs-line); }
html[data-theme="dark"] .ui-widget-header { background: var(--cs-surface-2); color: var(--cs-ink); border-color: var(--cs-line); }
html[data-theme="dark"] .ui-state-default, html[data-theme="dark"] .ui-widget-content .ui-state-default { background: var(--cs-surface-2); color: var(--cs-ink-2); border-color: var(--cs-line); }

/* ---------- 차트 ---------- */
html[data-theme="dark"] .cs-page .highcharts-yaxis-labels text { fill: #A3AEBF !important; color: #A3AEBF !important; }
html[data-theme="dark"] div.highcharts-tooltip .highcharts-label,
html[data-theme="dark"] div.highcharts-tooltip span { color: var(--cs-ink) !important; }
html[data-theme="dark"] div.highcharts-tooltip .highcharts-label small { color: var(--cs-muted) !important; }
html[data-theme="dark"] .highcharts-contextmenu .highcharts-menu { background: var(--cs-surface) !important; border-color: var(--cs-line) !important; }
html[data-theme="dark"] .highcharts-contextmenu .highcharts-menu-item { color: var(--cs-ink-2) !important; }
html[data-theme="dark"] .highcharts-contextmenu .highcharts-menu-item:hover { background: var(--cs-surface-2) !important; }
html[data-theme="dark"] .highcharts-range-input text { fill: var(--cs-ink-2) !important; }
html[data-theme="dark"] .highcharts-range-selector { background: var(--cs-surface-2) !important; color: var(--cs-ink) !important; }

/* ---------- 데이터 불러오는 화면 · 맨 위로 ---------- */
html[data-theme="dark"] .cs-loading { background: rgba(13, 17, 24, .78); }
html[data-theme="dark"] .cs-loading-card { background: var(--cs-surface); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .cs-loading-spin { border-color: var(--cs-line); border-top-color: var(--cs-ink); }
html[data-theme="dark"] .cs-loading-title { color: var(--cs-ink); }
html[data-theme="dark"] .cs-loading-sub, html[data-theme="dark"] .cs-loading-count { color: var(--cs-muted); }
html[data-theme="dark"] .cs-loading-bar { background: var(--cs-line); }
html[data-theme="dark"] .cs-loading-bar i { background: var(--cs-ink); }
html[data-theme="dark"] .scroll-to-top { background: var(--cs-solid); }

/* ---------- 테마 전환 버튼 (화이트 · 다크 공통) ---------- */
.cs-theme-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: 0 0 auto;
	border: 0; border-radius: 999px; padding: 0;
	background: var(--cs-surface); color: var(--cs-ink);
	cursor: pointer; transition: background .15s;
}
.cs-theme-btn:hover { background: var(--cs-surface-2); }
.cs-theme-btn:focus-visible { outline: 2px solid var(--cs-point); outline-offset: 2px; }
.cs-theme-btn svg { width: 19px; height: 19px; }
.cs-theme-btn .cs-theme-sun { display: none; }
html[data-theme="dark"] .cs-theme-btn .cs-theme-moon { display: none; }
html[data-theme="dark"] .cs-theme-btn .cs-theme-sun { display: block; }

/* ---------- 표 글자 · 머리 구분선 (사용자 페이지 공통 표) ---------- */
html[data-theme="dark"] body .cs-page .table > tbody > tr > td { color: var(--cs-ink-2); }
html[data-theme="dark"] body .cs-page .table > thead > tr > th + th { box-shadow: inset 1px 0 0 var(--cs-line); }
html[data-theme="dark"] body .cs-page .table > thead > tr > th { border-color: var(--cs-line) !important; }
html[data-theme="dark"] body .cs-page .table > tbody > tr > th { background-color: var(--cs-surface) !important; color: var(--cs-ink) !important; }
html[data-theme="dark"] .etf-link { color: var(--cs-ink) !important; }
/* 작은 휴대폰(360px 등) : 테마 버튼이 늘어난 만큼 헤더를 조금 줄여 한 줄에 맞춤 */
@media (max-width: 400px) {
	.cs-top-inner { gap: 10px; }
	.cs-logo img { height: 19px; }
	.cs-actions { gap: 6px; }
	.cs-theme-btn, .cs-menu-btn { width: 38px; height: 38px; }
	.cs-actions .cs-btn { height: 38px; padding: 0 14px; }
}
html[data-theme="dark"] .modal-title, html[data-theme="dark"] .modal-header h5 { color: var(--cs-ink) !important; }