/*
 * 사용자 사이트 리디자인 공통 UI (D안 · 1번 방식)
 *  - 상단 헤더(cs-top) · 휴대폰 메뉴 서랍(cs-drawer)
 *  - 페이지 부품 : cs-page(본문 폭) · cs-head(페이지 제목 타일) · cs-card(흰 타일) · cs-grid(격자) · cs-kpi(숫자 타일)
 *  - 색 : 바탕 연회색 · 흰 타일 · 진한 남색. 빨강/파랑은 오름·내림에만 (cs-up / cs-down)
 */
:root {
	--cs-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	--cs-bg: #EEF1F5;
	--cs-surface: #FFFFFF;
	--cs-surface-2: #F5F7FA;
	--cs-ink: #141A26;
	--cs-ink-2: #2D3748;
	--cs-muted: #4A5568;
	--cs-faint: #718096;
	--cs-line: #E3E7EE;
	/* 사용자 사이트 4색 : 천바닥 파랑 · 저점 연한파랑 · 과열 연한빨강 · 천피크(최고 상승) #BF1122 */
	--cs-zone-1: #1E4FBF;
	--cs-zone-2: #A9C4F5;
	--cs-zone-3: #F4A9B1;
	--cs-zone-4: #BF1122;
	--cs-point: #BF1122;
	--cs-blue: #1E4FBF;
	--cs-blue-soft: #A9C4F5;
	--cs-red-soft: #F4A9B1;
	--cs-blue-text: #4F7BD9;
	--cs-red-text: #D9475A;
	--cs-up: #BF1122;
	--cs-down: #1E4FBF;
	--cs-up-soft: #F4A9B1;
	--cs-down-soft: #A9C4F5;
	--cs-radius: 28px;
	--cs-radius-sm: 18px;
	--cs-num: var(--cs-font);
}

/* ---------- 옛 틀 숨기기 (왼쪽 메뉴 · 하단 탭) ---------- */
html body #accordionSidebar,
html body .chun_ui_new_side_m_bottom,
html body #content-wrapper > #content > nav.topbar { display: none !important; }
html body #wrapper { display: block !important; }
html body #content-wrapper { width: 100% !important; min-height: 0; }
html body .chun_ui_new_body {
	max-width: 1368px;
	margin: 0 auto;
	padding: 16px 24px 48px !important;
}
body.cs-no-scroll { overflow: hidden; }

/* ---------- 상단 헤더 ---------- */
.cs-top {
	position: sticky;
	top: 0;
	z-index: 1030;
	/* 불투명 단색 : 반투명 흐림(backdrop-filter)은 윈도우에서 글자 ClearType 을 꺼서 흐리게 만든다 */
	background: #EEF1F5;
}
.cs-top-inner {
	max-width: 1368px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.cs-logo { display: flex; align-items: center; flex: 0 0 auto; }
.cs-logo img { height: 22px; width: auto; }
.cs-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 auto;
	padding: 6px;
	background: var(--cs-surface);
	border-radius: 999px;
}
.cs-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--cs-ink-2) !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
.cs-nav-item:hover { background: var(--cs-surface-2); color: var(--cs-ink) !important; }
.cs-nav-item.is-active,
.cs-nav-group.is-active > .cs-nav-item { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF !important; }
.cs-caret { font-size: 11px; opacity: 0.7; }
.cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-up); margin-left: 2px; }
.cs-nav-group { position: relative; }
.cs-menu {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	padding: 10px;
	background: var(--cs-surface);
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(20, 26, 38, 0.14);
	z-index: 10;
}
.cs-nav-group:hover .cs-menu,
.cs-nav-group.is-open .cs-menu { display: block; }
.cs-nav-group::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.cs-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cs-ink) !important;
	text-decoration: none !important;
}
.cs-menu a small { display: block; font-size: 12px; font-weight: 500; color: var(--cs-faint); margin-top: 2px; }
.cs-menu a:hover { background: var(--cs-surface-2); }
.cs-menu a.is-active { background: var(--cs-bg); }
.cs-menu-title { margin: 8px 14px 4px; font-size: 12px; font-weight: 800; color: var(--cs-faint); letter-spacing: 0.04em; }
.cs-menu-title:first-child { margin-top: 4px; }
.cs-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cs-btn {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--cs-surface);
	font-size: 14px;
	font-weight: 700;
	color: var(--cs-ink) !important;
	text-decoration: none !important;
}
.cs-btn.is-dark { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF !important; }
.cs-menu-btn {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: var(--cs-surface);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
}
.cs-menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--cs-ink); }

/* 휴대폰 메뉴 서랍 */
.cs-drawer { position: fixed; inset: 0; z-index: 1080; background: rgba(20, 26, 38, 0.4); }
.cs-drawer[hidden] { display: none; }
.cs-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(340px, 88vw);
	background: var(--cs-surface);
	display: flex;
	flex-direction: column;
}
.cs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.cs-drawer-head img { height: 20px; }
.cs-drawer-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cs-surface-2); font-size: 16px; cursor: pointer; }
.cs-drawer-body { flex: 1; overflow-y: auto; padding: 4px 12px 20px; }
.cs-drawer-body a {
	display: block;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-ink) !important;
	text-decoration: none !important;
}
.cs-drawer-body a.cs-drawer-main { font-weight: 800; font-size: 16px; }
.cs-drawer-body a.is-active { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF !important; }
.cs-drawer-group { margin: 14px 14px 4px; font-size: 13px; font-weight: 800; color: var(--cs-faint); }
.cs-drawer-foot { display: flex; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--cs-line); font-size: 14px; }
.cs-drawer-foot a { color: var(--cs-muted) !important; }

@media (max-width: 1100px) {
	.cs-nav-item { padding: 10px 12px; font-size: 14px; }
}
@media (max-width: 991.98px) {
	.cs-nav { display: none; }
	.cs-actions { margin-left: auto; }
	.cs-menu-btn { display: inline-flex; }
}
@media (max-width: 575.98px) {
	.cs-top-inner { padding: 12px 16px; }
	.cs-btn:not(.is-dark) { display: none; }
	html body .chun_ui_new_body { padding: 8px 16px 40px !important; }
}

/* ---------- 페이지 부품 ---------- */
.cs-page { display: flex; flex-direction: column; gap: 16px; font-family: var(--cs-font); color: var(--cs-ink); }
.cs-card {
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	padding: 26px 28px;
	min-width: 0;
}
.cs-card.is-dark { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF; }
.cs-card.is-tight { padding: 18px 22px; }
.cs-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.cs-card-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: inherit; }
.cs-card-title small { font-size: 14px; font-weight: 500; color: var(--cs-muted); margin-left: 6px; }
.cs-card.is-dark .cs-card-title small { color: #A0AEC0; }
.cs-card-sub { font-size: 13px; color: var(--cs-muted); }
.cs-card.is-dark .cs-card-sub { color: #A0AEC0; }
.cs-link { font-size: 14px; font-weight: 700; color: var(--cs-ink-2) !important; background: none; border: 0; padding: 0; cursor: pointer; }
.cs-grid { display: grid; gap: 16px; }
.cs-grid.is-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.cs-grid.is-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cs-grid.is-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* 페이지 제목 타일 */
.cs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cs-head-eyebrow { font-size: 13px; font-weight: 800; color: var(--cs-faint); letter-spacing: 0.04em; margin-bottom: 6px; }
.cs-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--cs-ink); }
.cs-head p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--cs-muted); max-width: 760px; }
.cs-head-meta { font-size: 13px; color: var(--cs-muted); }

/* 숫자 타일 */
.cs-kpi { background: var(--cs-surface-2); border-radius: var(--cs-radius-sm); padding: 16px 18px; min-width: 0; }
.cs-card.is-dark .cs-kpi { background: rgba(255, 255, 255, 0.06); }
.cs-kpi-label { font-size: 13px; font-weight: 800; color: var(--cs-muted); }
.cs-kpi-value { margin-top: 6px; font-family: var(--cs-num); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--cs-ink); }
.cs-kpi-value small { font-family: var(--cs-font); font-size: 14px; font-weight: 700; margin-left: 3px; color: var(--cs-muted); }
.cs-kpi-note { margin-top: 4px; font-size: 13px; color: var(--cs-muted); }
.cs-up { color: var(--cs-up) !important; }
.cs-down { color: var(--cs-down) !important; }

/* 알약 탭 (기간 · 시장 선택 등) */
.cs-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--cs-surface-2); border-radius: 12px; }
.cs-tabs button,
.cs-tabs a {
	border: 0;
	padding: 8px 14px;
	border-radius: 9px;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--cs-ink-2) !important;
	cursor: pointer;
	text-decoration: none !important;
}
.cs-tabs .is-active { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF !important; }

/* 구간 배지 */
.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	background: var(--cs-zone-2);
	color: var(--cs-ink);
}
.cs-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cs-badge.z1 { background: var(--cs-zone-1); color: #FFFFFF; }
.cs-badge.z2 { background: var(--cs-zone-2); color: #14306F; }
.cs-badge.z3 { background: var(--cs-zone-3); color: #7A0B16; }
.cs-badge.z4 { background: var(--cs-zone-4); color: #FFFFFF; }

/* 차트 영역 */
.cs-chart { width: 100%; min-height: 240px; }
.cs-note { font-size: 13px; line-height: 1.7; color: var(--cs-muted); }

/* 푸터 카드 */
.cs-foot { display: flex; flex-direction: column; gap: 14px; }
.cs-foot p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--cs-muted); }
.cs-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.cs-foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-foot-links a { padding: 10px 16px; border-radius: 999px; background: var(--cs-surface-2); font-size: 14px; font-weight: 700; color: var(--cs-ink) !important; }
.cs-foot-people { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--cs-muted); }
.cs-foot-people a { color: var(--cs-muted) !important; }
@media (max-width: 575.98px) {
	.cs-formula { flex-wrap: wrap; font-size: 14px; }
	.cs-frac { font-size: 13px; }
}

/* ---------- 옛 차트 묶음(chun_ui_new_mlgroup) → 새 디자인 ---------- */
html body .chun_ui_new_mlgroup { display: flex; flex-direction: column; gap: 16px; }
html body .chun_ui_new_mlgroup > .chun_ui_new_card {
	margin: 0 !important;
	padding: 22px 24px !important;
	border-radius: var(--cs-radius) !important;
	background: var(--cs-surface) !important;
	box-shadow: none !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
}
html body .chun_ui_new_mlgroup > .chun_ui_new_card > .chun_ui_new_card_header {
	flex: 0 0 100%;
	padding: 0 4px 4px !important;
	border: 0 !important;
	background: transparent !important;
}
html body .chun_ui_new_mlgroup > .chun_ui_new_card > .chun_ui_new_card_header p {
	margin: 0;
	font-size: 19px !important;
	font-weight: 800 !important;
	color: var(--cs-ink) !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card > [class*="col-sm-"] {
	flex: 1 1 calc(var(--cs-col, 50%) - 12px) !important;
	max-width: none !important;
	min-width: min(100%, 320px);
	padding: 0 !important;
	margin: 0 !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card > .col-sm-4 { --cs-col: 33.33%; }
html body .chun_ui_new_mlgroup .chun_ui_new_card > .col-sm-12 { --cs-col: 100%; }
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow {
	height: 100%;
	border-radius: var(--cs-radius-sm) !important;
	background: var(--cs-surface-2) !important;
	box-shadow: none !important;
	border: 0 !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow > .card-header {
	background: transparent !important;
	border: 0 !important;
	padding: 16px 18px 4px !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow > .card-header h6 {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--cs-ink) !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow > .card-body { padding: 4px 8px 10px !important; background: transparent !important; }
html body .chun_ui_new_mlgroup .chun_ui_new_card_con {
	flex: 0 0 100%;
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card_con > [class*="col-sm-"] {
	flex: 1 1 calc(var(--cs-col, 50%) - 12px) !important;
	max-width: none !important;
	min-width: min(100%, 320px);
	padding: 0 !important;
	margin: 0 !important;
}
html body .chun_ui_new_mlgroup .chun_ui_new_card_con > .col-sm-4 { --cs-col: 33.33%; }
html body .chun_ui_new_mlgroup .chun_ui_new_card_con > .col-sm-12 { --cs-col: 100%; }
.cs-head-meta a { color: var(--cs-ink-2) !important; text-decoration: underline !important; }
/* 옛 CSS 의 card-body flex-basis:100% 가 제목과 겹치는 문제 보정 */
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow > .card-header { flex: 0 0 auto !important; width: 100%; }
html body .chun_ui_new_mlgroup .chun_ui_new_card .card.shadow > .card-body { flex: 1 1 auto !important; width: 100%; }

/* 카드 안 작은 차트 타일 */
.cs-subgrid { gap: 12px; }
.cs-subchart { background: var(--cs-surface-2); border-radius: var(--cs-radius-sm); padding: 14px 12px 8px; min-width: 0; }
.cs-subchart h3 { margin: 0 6px 6px; font-size: 15px; font-weight: 800; color: var(--cs-ink); }
/* 새 페이지는 카드 제목이 있으므로 차트 자체 제목은 숨김 */
.cs-page .cs-card .highcharts-title { display: none; }

/* 구역 제목 · 전환 탭 줄 · 계산식 목록 */
.cs-section-title { margin: 8px 4px 0; font-size: 20px; font-weight: 800; color: var(--cs-ink); }
.cs-section-title small { font-size: 14px; font-weight: 500; color: var(--cs-muted); margin-left: 8px; }
.cs-intensity-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cs-formula-list { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--cs-muted); }
.cs-formula-list b { color: var(--cs-ink); }
.cs-tabs .nav-link { display: inline-block; }
.cs-tabs .nav-link.active { background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF !important; }

/* 공지 · 뉴스 · 선택 상자 */
.cs-notice { width: 100%; }
.cs-select-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--cs-ink-2); }
.cs-select { min-width: 160px; height: 40px !important; border-radius: 12px !important; font-size: 14px !important; }
.cs-news-card .chun_ui_new_card_news_search { display: flex; gap: 8px; }
.cs-news-card .chun_ui_new_card_news_search input { height: 44px; border-radius: 999px; border: 1px solid var(--cs-line); padding: 0 18px; width: 100%; font-size: 15px; }
.cs-news-card .chun_ui_new_card_news_search button,
.cs-news-card .chun_ui_new_card_news_group_list_more_bt { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF; font-weight: 700; }
.cs-table-card .table-responsive { border-radius: 14px; }
.cs-donation .row { margin-left: 0; margin-right: 0; }
.cs-donation .donation-card,
.cs-donation .card { border-radius: var(--cs-radius) !important; border: 0 !important; box-shadow: none !important; }
.cs-donation .col-md-6 { flex: 0 0 100%; max-width: 640px; }

/* 옛 탭(자금흐름 · ETF) → 알약 탭 */
.cs-page ul.chun_ui_new_card_body_option_tab { display: inline-flex !important; flex-wrap: wrap; gap: 4px; padding: 4px !important; margin: 0 0 12px !important; background: var(--cs-surface-2); border-radius: 12px; list-style: none; }
.cs-page ul.chun_ui_new_card_body_option_tab li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; width: auto !important; flex: 0 0 auto !important; }
.cs-page ul.chun_ui_new_card_body_option_tab a.nav-link {
	display: inline-flex !important; align-items: baseline; gap: 6px; margin: 0 !important; padding: 9px 16px !important;
	border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--cs-ink-2) !important;
	font-size: 14px !important; font-weight: 700 !important; height: auto !important; width: auto !important;
}
.cs-page ul.chun_ui_new_card_body_option_tab a.nav-link p { margin: 0; font-size: 14px !important; font-weight: 800; color: inherit !important; }
.cs-page ul.chun_ui_new_card_body_option_tab a.nav-link small { font-size: 12px !important; color: inherit !important; opacity: 0.75; }
.cs-page ul.chun_ui_new_card_body_option_tab a.nav-link.active { background: var(--cs-solid, var(--cs-ink)) !important; color: #FFFFFF !important; }

/* 차트 축 글자 : 원색 대신 회색 */
.cs-page .highcharts-axis-title,
.cs-page .highcharts-yaxis-labels text { fill: #4A5568 !important; color: #4A5568 !important; }

/* 푸터 : 본문과 같은 폭 */
html body footer.cs-footer-wrap { position: static !important; max-width: 1368px; margin: 0 auto; padding: 0 24px 32px !important; background: transparent !important; width: 100%; }
@media (max-width: 575.98px) { html body footer.cs-footer-wrap { padding: 0 16px 24px !important; } }

/* 휴대폰 : 숫자 타일 두 개씩 */
@media (max-width: 575.98px) {
	.cs-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.cs-kpi { padding: 12px 14px; }
	.cs-kpi-label { font-size: 12px; }
	.cs-kpi-value { font-size: 20px; word-break: break-all; }
	.cs-kpi-value small { font-size: 12px; }
	.cs-kpi-note { font-size: 12px; }
	.cs-head h1 { font-size: 24px; }
	.cs-head p { font-size: 14px; }
}

/* ---------- 히트맵 (C안 : 5단계 · 1위/꼴찌 · 정렬) ---------- */
.cs-heat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 12px; }
.cs-heat-bar .cs-tabs { flex-wrap: wrap; }
.cs-heat-bar .cs-tabs button { font-size: 13px; padding: 7px 12px; }
.cs-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cs-heat-legend span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cs-heat-legend small { margin-left: 6px; font-size: 12px; color: var(--cs-muted); }
html body td.cs-heat { position: relative; font-family: var(--cs-num); font-size: 14px; font-weight: 700; text-align: center !important; vertical-align: middle !important; min-width: 78px; padding-top: 14px !important; padding-bottom: 10px !important; }
.cs-heat-rank { position: absolute; top: 2px; right: 4px; font-family: var(--cs-font); font-size: 10px; font-weight: 800; opacity: 0.9; }
.cs-sector-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--cs-bg); color: var(--cs-muted); font-size: 11px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
@media (max-width: 575.98px) { .cs-heat-legend small { display: none; } }
/* 히트맵 칸 폭 : ETF 표만 넉넉히, 나란한 자금 흐름 표는 좁게 */
html body td.cs-heat { min-width: 0; }
html body #table-etf td.cs-heat { min-width: 78px; }
html body #kospi-table td.cs-heat,
html body #kosdaq-table td.cs-heat { font-size: 12.5px; padding-left: 2px !important; padding-right: 2px !important; letter-spacing: -0.02em; }
html body #kospi-table th, html body #kosdaq-table th { padding-left: 4px !important; padding-right: 4px !important; }


/* ---------- 글꼴 : 사용자 사이트 전체 Pretendard ---------- */
/* 옛 레이아웃·페이지별 글꼴 지정과 차트(SVG) 글자까지 덮어쓴다. 아이콘 글꼴(Font Awesome)은 제외 */
html body,
html body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]) {
	font-family: var(--cs-font) !important;
}
html body { letter-spacing: -0.01em; }
/* 숫자 : 자릿수 폭을 같게 해서 표 · 숫자 타일이 가지런하게 */
html body table,
html body .cs-kpi-value,
html body .cs-score-num,
html body .cs-tile-value,
html body .cs-heat,
html body .highcharts-container { font-variant-numeric: tabular-nums; }

/* 푸터 : 본문과 같은 폭 · 위 간격 24px · 아래 여백 24px (옛 CSS 의 여백 겹침 정리) */
html body .chun_ui_new_body { padding-bottom: 0 !important; }
html body #content-wrapper, html body #content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body footer.cs-footer-wrap {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 1368px !important;
	margin: 24px auto 0 !important;
	padding: 0 24px 24px !important;
	min-height: 0 !important;
}
html body footer.cs-footer-wrap > .cs-card { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; }
@media (max-width: 575.98px) { html body footer.cs-footer-wrap { padding: 0 16px 16px !important; margin-top: 16px !important; } }
/* 푸터는 모든 페이지에서 마지막 카드 바로 아래 24px (짧은 페이지도 같은 간격) */
html body #content { display: block !important; min-height: 0 !important; }
html body .cs-page { margin-bottom: 0 !important; }
html body .chun_ui_new_body > *:last-child { margin-bottom: 0 !important; }

/* =====================================================================
 * 표 디자인 통일 (사용자 페이지 전체) : 깔끔하게 · 글자 너무 작지 않게
 *  - 본문 14px / 머리 13px, 세로선 없이 가로선만, 머리줄 연회색, 줄 마우스오버
 *  - 히트맵 · 강조 칸의 배경색(인라인)은 그대로 둔다
 * ===================================================================== */
html body .cs-page table.table,
html body .cs-page table.table-tiny,
html body .cs-page table.table-xs,
html body .cs-page table.table-sm {
	font-size: 14px !important;
	color: var(--cs-ink-2);
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 0 !important;
	margin-bottom: 0 !important;
	background: var(--cs-surface);
}
html body .cs-page .table > thead > tr > th,
html body .cs-page .table > tbody > tr > th,
html body .cs-page .table > tbody > tr > td {
	border: 0 !important;
	border-bottom: 1px solid #EEF1F5 !important;
	padding: 11px 12px !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	vertical-align: middle !important;
	height: auto !important;
}
html body .cs-page .table > thead > tr > th {
	background: var(--cs-surface-2) !important;
	color: var(--cs-muted) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	white-space: nowrap;
	border-bottom: 1px solid var(--cs-line) !important;
}
/* 여러 줄 머리 : 위 줄(묶음 이름)은 조금 작게, 묶음 사이 옅은 구분선 */
html body .cs-page .table > thead > tr:not(:last-child) > th { font-size: 12px !important; color: var(--cs-faint) !important; padding-top: 8px !important; padding-bottom: 8px !important; }
html body .cs-page .table > thead > tr > th + th,
html body .cs-page .table > tbody > tr > td + td,
html body .cs-page .table > tbody > tr > th + td { box-shadow: inset 1px 0 0 #F3F5F8; }
/* 첫 열(날짜 · 항목) : 진하게 */
html body .cs-page .table > tbody > tr > td:first-child,
html body .cs-page .table > tbody > tr > th:first-child { font-weight: 700 !important; color: var(--cs-ink) !important; white-space: nowrap; }
html body .cs-page .table > tbody > tr:hover > td { background-color: #F8FAFC; }
html body .cs-page .table small { font-size: 11px !important; color: var(--cs-faint); }
html body .cs-page .table-responsive { border: 1px solid #EEF1F5; border-radius: 16px; }
html body .cs-page .chun-table-scroll { border-radius: 16px; }
/* 옛 안내문 단락 · 빈 여백 정리 */
html body .cs-page p.title-desc,
html body .cs-page .chun_ui_new_card_table > p { margin: 0 0 6px !important; padding: 0 !important; font-size: 13px !important; line-height: 1.6; color: var(--cs-muted) !important; }
html body .cs-page .chun_ui_new_card_table,
html body .cs-page .chun_ui_new_card_table_wrapper { margin: 0 !important; padding: 0 !important; }
html body .cs-page .cs-table-card > .row { margin-left: 0; margin-right: 0; }
html body .cs-page .cs-table-card > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* 매크로 맵 막대 칸 : 검은 막대 → 연한 남색 막대 + 진한 숫자 */
html body .cs-page .progress-row { background: var(--cs-surface-2) !important; height: 26px !important; border-radius: 6px !important; }
html body .cs-page .progress-bar-black { background-color: var(--cs-red-soft) !important; } /* 매크로 맵 진행 막대 : 빨강 계열 */
html body .cs-page .progress-label { color: var(--cs-ink) !important; font-weight: 700; transform: translateY(-50%); }
/* 매크로 맵 신호 칸 : 원색 → 테마 톤 (빨강·파랑은 오름·내림 의미 유지) */
html body .cs-page .red-color { background: #FDECEE !important; color: #A3203A !important; }
html body .cs-page .blue-color { background: #E8EEFC !important; color: #1D3F9F !important; }
html body .cs-page .gold-color { background: #FBF1D9 !important; color: #8A5A00 !important; }
html body .cs-page .yellow-color { background: #F4F7DF !important; color: #4B5A1E !important; }
html body .cs-page .grey-color { background: var(--cs-line) !important; color: var(--cs-ink) !important; }

/* ---------- 직전 거래일 대비 비교 카드 (CS.compare) ---------- */
.cs-compare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cs-compare-item { background: var(--cs-surface-2); border-radius: var(--cs-radius-sm); padding: 14px 16px; min-width: 0; }
.cs-compare-label { font-size: 13px; font-weight: 800; color: var(--cs-muted); }
.cs-compare-now { margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--cs-ink); line-height: 1.2; font-variant-numeric: tabular-nums; word-break: break-all; }
.cs-compare-now small { margin-left: 3px; font-size: 13px; font-weight: 700; color: var(--cs-muted); }
.cs-compare-prev { margin-top: 4px; font-size: 13px; color: var(--cs-faint); font-variant-numeric: tabular-nums; }
.cs-compare-diff { margin-top: 2px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-compare-flat { color: var(--cs-faint); font-weight: 700; }
@media (max-width: 575.98px) {
	.cs-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-compare-now { font-size: 18px; }
	html body .cs-page .table > thead > tr > th, html body .cs-page .table > tbody > tr > td { padding: 9px 10px !important; font-size: 13px !important; }
}

/* ---------- 일관성 : 작은 요소 정리 ---------- */
.cs-select-label { white-space: nowrap; }
html body .cs-page .chun_ui_new_card_option_bt,
html body .cs-page .btn-success.chun_ui_new_card_option_bt { background: var(--cs-solid, var(--cs-ink)) !important; border: 0 !important; border-radius: 999px !important; padding: 10px 18px !important; font-size: 14px !important; }
html body .cs-page .row.search-row.chun_ui_new_card_option { margin: 0 0 12px !important; justify-content: flex-end; }
/* 뉴스 목록 : 제목은 진한 글씨, 마우스오버 시 밑줄 */
html body .cs-news-card a,
html body .cs-news-card .chun_ui_new_card_news_group_list_table a { color: var(--cs-ink) !important; font-weight: 800; }
html body .cs-news-card a:hover { text-decoration: underline !important; }
/* 데이터 표는 한 줄로 (기호가 다음 줄로 넘어가 줄이 높아지지 않게) · 글이 긴 공지 표는 줄바꿈 허용 */
html body .cs-page .table > tbody > tr > td,
html body .cs-page .table > tbody > tr > th { white-space: nowrap; }
html body .cs-page .table > tbody > tr > td br + small { display: block; line-height: 1.2; }
html body .cs-notice .table > tbody > tr > td,
html body .cs-page .modal .table > tbody > tr > td { white-space: normal; }
/* 매크로 맵 막대가 표 배경 뒤로 숨지 않게 · 표 카드 위 여백 정리 · 천마켓 줄 높이 */
html body .cs-page .progress-row { z-index: 0 !important; position: relative !important; }
html body .cs-page .row.search-row.chun_ui_new_card_option { padding: 0 !important; min-height: 0 !important; }
html body .cs-page #chunbadakBasicTable > tbody > tr > td { padding-top: 8px !important; padding-bottom: 8px !important; }
.cs-compare-label small { font-size: 11px; font-weight: 700; color: var(--cs-faint); margin-left: 4px; }
/* 데이터 표 칸 여유 : 좌우 16px · 최소 폭 (열이 많은 표도 숫자가 경계선에 붙지 않게, 넘치면 가로 스크롤) */
html body .cs-page .table > thead > tr > th,
html body .cs-page .table > tbody > tr > th,
html body .cs-page .table > tbody > tr > td { padding-left: 16px !important; padding-right: 16px !important; }
html body .cs-page .table > tbody > tr > td { min-width: 72px; }
html body .cs-page .table > tbody > tr > td:first-child { min-width: 0; }
@media (max-width: 575.98px) {
	html body .cs-page .table > thead > tr > th,
	html body .cs-page .table > tbody > tr > th,
	html body .cs-page .table > tbody > tr > td { padding-left: 12px !important; padding-right: 12px !important; }
	html body .cs-page .table > tbody > tr > td { min-width: 64px; }
}
/* 차트 묶음 상자 · 옛 하단 여백 클래스가 마지막 카드 아래에 여백을 더하지 않게 */
html body .cs-page .chun_ui_new_mlgroup { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .cs-page .chun_ui_new_mlgroup > .chun_ui_new_card:last-child,
html body .cs-page .chun_add_bottmargin:last-child { margin-bottom: 0 !important; }

/* ---------- 공지사항 ---------- */
.cs-notice-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.cs-notice-search { flex: 1 1 320px; max-width: 560px; display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--cs-surface-2); border: 1px solid var(--cs-line); }
.cs-notice-search:focus-within { border-color: var(--cs-ink); }
.cs-notice-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--cs-ink); }
.cs-notice-btn { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cs-solid, var(--cs-ink)); color: #FFFFFF; font-size: 15px; font-weight: 800; cursor: pointer; }
.cs-notice-size { margin-left: auto; }
html body .cs-page .cs-notice-list { border: 0; }
html body .cs-page .cs-notice-list .table > thead { display: none; }
html body .cs-page .cs-notice-list .table > tbody > tr > td { padding: 0 !important; white-space: normal; border-bottom: 1px solid #EEF1F5 !important; min-width: 0; font-weight: 400 !important; }
.cs-notice-row { cursor: pointer; }
.cs-notice-row:focus { outline: 2px solid var(--cs-ink); outline-offset: -2px; }
.cs-notice-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 20px 8px; }
.cs-notice-title { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--cs-ink); line-height: 1.5; }
.cs-notice-row:hover .cs-notice-title { text-decoration: underline; }
.cs-notice-new { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--cs-up); color: #FFFFFF; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.cs-notice-date { font-size: 14px; color: var(--cs-faint); font-variant-numeric: tabular-nums; }
/* 페이지 번호 */
html body .cs-notice-card .paging-div { display: flex !important; justify-content: center !important; align-items: center; gap: 6px; margin-top: 20px; }
html body .cs-notice-card .paging-div ul.pagination { display: flex; gap: 4px; margin: 0 !important; }
html body .cs-notice-card .paging-div .btn { min-width: 40px; height: 40px; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--cs-surface-2) !important; color: var(--cs-ink-2) !important; font-size: 14px !important; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
html body .cs-notice-card .paging-div li.active .btn { background: var(--cs-solid, var(--cs-ink)) !important; color: #FFFFFF !important; }
/* 공지 상세 */
html body .cs-notice-modal .modal-content { border-radius: var(--cs-radius); border: 0; overflow: hidden; }
html body .cs-notice-modal .modal-header { padding: 28px 32px 18px; border-bottom: 1px solid var(--cs-line); align-items: flex-start; }
.cs-notice-modal-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--cs-faint); }
html body .cs-notice-modal #show-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--cs-ink); }
.cs-notice-modal-date { margin: 8px 0 0; font-size: 14px; color: var(--cs-muted); }
html body .cs-notice-modal .modal-body { padding: 24px 32px; font-size: 16px; line-height: 1.85; color: var(--cs-ink-2); }
html body .cs-notice-modal .modal-body img { max-width: 100%; height: auto; border-radius: 12px; }
html body .cs-notice-modal .modal-footer { padding: 16px 32px 24px; border-top: 0; }
@media (max-width: 575.98px) {
	.cs-notice-size { margin-left: 0; }
	.cs-notice-title { font-size: 16px; }
	html body .cs-notice-modal .modal-header, html body .cs-notice-modal .modal-body { padding-left: 20px; padding-right: 20px; }
}
/* VIP 대시보드 순위 표 : 좁은 칸에서 잘리지 않게 */
html body .cs-page #etc_soogup_table > tbody > tr > td,
html body .cs-page #etc_soogup_table > thead > tr > th { min-width: 0; padding-left: 10px !important; padding-right: 10px !important; }
html body .cs-page #etc_soogup_table > tbody > tr > td:last-child { text-align: right !important; font-weight: 800; }
html body .cs-page #etc_soogup_table > tbody > tr > td { font-size: 13px !important; padding-left: 8px !important; padding-right: 8px !important; }
.cs-btn[hidden] { display: none !important; }
/* 천뉴스 : 기사 제목은 두 줄까지 보여 준다 (한 줄 말줄임이면 핵심이 잘림) */
html body .cs-news-card a.news-title { white-space: normal !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; line-height: 1.45; }
/* ADR 계산식 상자 (기본 스타일 누락 보완) */
.cs-adr-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.cs-adr-band > h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--cs-ink); }
.cs-formula { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.cs-frac { display: inline-flex; flex-direction: column; align-items: center; text-align: center; font-size: 14px; }
.cs-frac > span { padding: 2px 6px; }
.cs-frac > span:first-child { border-bottom: 1.5px solid var(--cs-ink); }
.cs-adr-scale { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cs-adr-scale span { padding: 6px 12px; border-radius: 999px; background: var(--cs-surface-2); font-size: 13px; font-weight: 700; color: var(--cs-ink-2); white-space: nowrap; }
.cs-adr-scale span:first-child { background: #E8EEFC; color: #14306F; }
.cs-adr-scale span:last-child { background: #FDECEE; color: #7A0B16; }
@media (max-width: 767.98px) {
	.cs-adr-scale { margin-left: 0; }
	.cs-formula { gap: 6px; }
}
/* 비교 카드 : 숫자는 끊지 않고, 단위만 다음 줄로 넘긴다 */
.cs-compare-now { word-break: keep-all; overflow-wrap: normal; }
.cs-compare-now small { white-space: nowrap; display: inline-block; }
@media (max-width: 575.98px) {
	.cs-compare-item { padding: 12px; }
	.cs-compare-now { font-size: clamp(15px, 4.6vw, 18px); letter-spacing: -0.02em; }
}
.cs-compare-now .cs-num { white-space: nowrap; }
/* 천바닥 · 천피크 표시 버튼 : 켜짐 = 차트 표시색으로 채움, 꺼짐 = 회색 */
html body .cs-chart-tools .btn-primary { background-color: #1E4FBF !important; border-color: #1E4FBF !important; color: #FFFFFF !important; }
html body .cs-chart-tools .btn-danger2 { background-color: #BF1122 !important; border-color: #BF1122 !important; color: #FFFFFF !important; }
html body .cs-chart-tools .btn-secondary { background-color: transparent !important; border: 1px solid var(--cs-line) !important; color: var(--cs-muted) !important; }
.cs-foot a[hidden] { display: none !important; }

/* 페이지 데이터 로딩 화면 (chun-page.js 가 그림) */

.cs-loading { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(238, 241, 245, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity 0.35s ease, visibility 0.35s; }
.cs-loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.cs-loading-card { width: 100%; max-width: 340px; padding: 28px 28px 24px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 18px 48px rgba(20, 26, 38, 0.16); text-align: center; font-family: var(--cs-font); }
.cs-loading-spin { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid #E3E7EE; border-top-color: #141A26; animation: cs-spin 0.8s linear infinite; }
.cs-loading-title { margin: 0; font-size: 17px; font-weight: 800; color: #141A26; }
.cs-loading-sub { margin: 6px 0 16px; font-size: 14px; color: #6B7A93; }
.cs-loading-bar { height: 6px; border-radius: 999px; background: #EEF1F5; overflow: hidden; }
.cs-loading-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #141A26; transition: width 0.3s ease; }
.cs-loading-count { margin-top: 10px; font-size: 13px; font-weight: 700; color: #6B7A93; font-variant-numeric: tabular-nums; }
body.cs-is-loading { overflow: hidden; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-loading-spin { animation-duration: 2.4s; } }
	/* 거시 차트 묶음 카드 제목 : 예전 CSS 의 음수 여백(-20px) 때문에 왼쪽 끝에 붙던 문제 수정 */
html body .chun_ui_new_mlgroup > .chun_ui_new_card > .chun_ui_new_card_header { margin: 0 !important; padding: 2px 4px 6px !important; }
.cs-card[hidden] { display: none !important; }

/* ===== 차트 툴팁 : 페이지마다 제각각이던 글자 크기 통일 (본문 12px · 첫 줄 13px)
   HTML 툴팁은 div.highcharts-tooltip 안의 .highcharts-label 에 그려진다 */
div.highcharts-tooltip .highcharts-label, div.highcharts-tooltip .highcharts-label * { font-family: var(--cs-font) !important; font-size: 12px !important; line-height: 1.55 !important; }
div.highcharts-tooltip .highcharts-label { color: #141A26 !important; }
div.highcharts-tooltip .highcharts-label p { margin: 0 0 1px !important; white-space: nowrap; }
div.highcharts-tooltip .highcharts-label p:first-of-type, div.highcharts-tooltip .highcharts-label p:first-of-type * { font-size: 13px !important; font-weight: 800 !important; }
div.highcharts-tooltip .highcharts-label br + br { display: none; }
div.highcharts-tooltip .highcharts-label b { font-weight: 700; font-variant-numeric: tabular-nums; }
div.highcharts-tooltip .highcharts-label small { color: #4A5568 !important; }
/* 상단 메뉴 선택 표시 · 포인트 */
.cs-top .cs-nav-item.is-active { background: var(--cs-point) !important; color: #FFFFFF !important; }
/* 포인트 색 : 드롭다운 메뉴 선택 · 페이지 분류 글자 · 읽는 법 표시 */
.cs-top .cs-nav-group.is-active > .cs-nav-item { background: var(--cs-point) !important; color: #FFFFFF !important; }
.cs-head-eyebrow { color: var(--cs-point) !important; }
.chun-guide-badge { background: var(--cs-point) !important; color: #FFFFFF !important; }
/* 매크로 맵 진행 막대 : 고정 px 폭 대신 칸(td) 폭에 꽉 차게 */
html body .cs-page td > .progress.progress-row { width: 100% !important; min-width: 72px; margin: 0 !important; border-radius: 0 !important; }
html body .cs-page td > .progress.progress-row > .progress-label { left: 0 !important; right: 0 !important; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* SVG 로 그려지는 툴팁(useHTML 아님)도 같은 크기 : 페이지가 넣은 1.3em · 1.5em 등 무시 */
g.highcharts-tooltip text, g.highcharts-tooltip tspan, g.highcharts-label.highcharts-tooltip text, g.highcharts-label.highcharts-tooltip tspan { font-size: 12px !important; }
g.highcharts-tooltip text > tspan:first-child, g.highcharts-label.highcharts-tooltip text > tspan:first-child { font-size: 13px !important; font-weight: 800 !important; }