/*
 * 사용자 사이트 리디자인 공통 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; }

/* ---------- 매크로 맵 '지금 볼 신호' (CS.macroGuide) ---------- */
:root { --cs-key-tint: rgba(191, 17, 34, .07); --cs-good: #BF1122; --cs-good-bg: #FDECEE; --cs-bad: #1E4FBF; --cs-bad-bg: #E8EEFB; --cs-flat-bg: #EDF0F4; }
.cs-signals .cs-card-head { align-items: center; }
.cs-sig-toggle { margin-left: auto; flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--cs-line); border-radius: 999px; background: var(--cs-surface); color: var(--cs-ink); font: 700 13px var(--cs-font); cursor: pointer; }
.cs-sig-toggle[aria-pressed="true"] { background: var(--cs-point); border-color: transparent; color: #FFFFFF; }
.cs-sig-sub { margin: -4px 0 14px; font-size: 13.5px; color: var(--cs-muted); }
.cs-sig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .cs-sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-sig { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; padding: 14px 16px 12px; border: 1px solid transparent; border-radius: var(--cs-radius-sm); background: var(--cs-surface-2); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s; }
.cs-sig:hover { border-color: var(--cs-line); }
.cs-sig:focus-visible, .cs-sig-toggle:focus-visible { outline: 2px solid var(--cs-point); outline-offset: 2px; }
.cs-sig-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-sig-label { font-size: 13px; font-weight: 800; color: var(--cs-muted); }
.cs-sig-chip { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--cs-flat-bg); color: var(--cs-muted); }
.cs-sig[data-tone="good"] .cs-sig-chip { background: var(--cs-good-bg); color: var(--cs-good); }
.cs-sig[data-tone="bad"] .cs-sig-chip { background: var(--cs-bad-bg); color: var(--cs-bad); }
.cs-sig[data-tone="good"] { box-shadow: inset 3px 0 0 var(--cs-good); }
.cs-sig[data-tone="bad"] { box-shadow: inset 3px 0 0 var(--cs-bad); }
.cs-sig-value { margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--cs-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cs-sig-value small { margin-left: 3px; font-size: 13px; font-weight: 700; color: var(--cs-muted); }
.cs-sig-chg { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-sig-chg small { font-size: 12px; font-weight: 600; color: var(--cs-faint); }
.cs-sig-desc { font-size: 12.5px; line-height: 1.55; color: var(--cs-muted); }
.cs-sig-go { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 700; color: var(--cs-faint); }
.cs-sig:hover .cs-sig-go { color: var(--cs-point); }
.cs-sig-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: var(--cs-muted); }
.cs-sig-legend i { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.cs-sig-legend i.k { width: 14px; height: 14px; border-radius: 3px; background: var(--cs-key-tint); border-top: 3px solid var(--cs-point); }
.cs-sig-legend i.f { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-point); vertical-align: 1px; }
.cs-sig-note { margin-left: auto; color: var(--cs-faint); }
@media (max-width: 575.98px) {
	.cs-sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.cs-sig { padding: 12px; }
	.cs-sig-value { font-size: 18px; }
	.cs-sig-desc { display: none; }
	.cs-sig-note { margin-left: 0; }
}
/* 표 : 신호 열(빨간 띠 + 옅은 바탕) · 발표일 칸(점) · 핵심 열만 보기 · 신호 카드 눌렀을 때 깜빡임 */
html body .cs-page table.cs-guided th.cs-key-col { box-shadow: inset 0 3px 0 var(--cs-point) !important; background-image: linear-gradient(var(--cs-key-tint), var(--cs-key-tint)) !important; }
html body .cs-page table.cs-guided th.cs-key-col::after { content: '신호'; display: block; width: max-content; margin: 4px auto 0; padding: 1px 6px; border-radius: 999px; background: var(--cs-point); color: #FFFFFF; font-size: 10px; font-weight: 800; line-height: 1.5; }
html body .cs-page table.cs-guided td.cs-key-col { background-image: linear-gradient(var(--cs-key-tint), var(--cs-key-tint)) !important; }
html body .cs-page table.cs-guided td.cs-fresh { position: relative; font-weight: 800 !important; }
html body .cs-page table.cs-guided td.cs-fresh::before { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--cs-point); }
html body .cs-page table.cs-key-only .cs-nk, html body .cs-page table.cs-key-only thead tr:first-child { display: none !important; }
html body .cs-page table.cs-guided .cs-flash { animation: cs-flash 1.6s ease-out; }
@keyframes cs-flash { 0%, 30% { box-shadow: inset 0 0 0 2px var(--cs-point); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { html body .cs-page table.cs-guided .cs-flash { animation: none; } }

/* ---------- 표 아래 '표 읽는 법' (CS.tableLegend) ---------- */
.cs-tlegend { margin-top: 14px; padding: 14px 16px; border-radius: var(--cs-radius-sm); background: var(--cs-surface-2); text-align: left; }
.cs-tlegend-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--cs-ink); }
.cs-tlegend ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cs-tlegend li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--cs-muted); }
.cs-tlegend li b { color: var(--cs-ink); font-weight: 800; }
.cs-tl-sw { flex: 0 0 64px; display: flex; justify-content: center; padding-top: 1px; }
.cs-tl-key { display: inline-block; width: 26px; height: 18px; border-radius: 3px; background: var(--cs-key-tint); border-top: 3px solid var(--cs-point); }
.cs-tl-fresh { position: relative; display: inline-block; width: 26px; height: 18px; border-radius: 3px; background: var(--cs-surface); border: 1px solid var(--cs-line); }
.cs-tl-fresh::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--cs-point); }
.cs-tl-bar { position: relative; display: inline-block; width: 48px; height: 18px; border-radius: 4px; background: var(--cs-surface); border: 1px solid var(--cs-line); overflow: hidden; }
.cs-tl-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 65%; background: var(--cs-red-soft); }
.cs-tl-heat { display: inline-flex; border-radius: 3px; overflow: hidden; border: 1px solid var(--cs-line); }
.cs-tl-heat i { display: block; width: 11px; height: 18px; }
html body .cs-page .cs-tl-cell { display: inline-block; box-sizing: border-box; min-width: 48px; min-height: 22px; line-height: 18px; vertical-align: middle; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; border: 1px solid var(--cs-line); }
.cs-tl-sym { font-size: 14px; font-weight: 800; }
@media (max-width: 575.98px) { .cs-tl-sw { flex-basis: 52px; } .cs-tlegend li { font-size: 12.5px; } }

/* ---------- 사용자 페이지 모달 공통 디자인 ----------
 *  둥근 흰 타일 · 제목줄(굵은 제목 + 동그란 닫기) · 넉넉한 본문 · 알약 버튼, 화면보다 길면 본문만 스크롤 */
html body .modal-backdrop.show { opacity: 1; background: rgba(13, 17, 24, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html body .modal .modal-dialog:not(.modal-fullscreen-custom) { margin: max(24px, 6vh) auto; padding: 0 16px; max-width: calc(560px + 32px); }
html body .modal .modal-dialog.modal-lg:not(.modal-fullscreen-custom) { max-width: calc(860px + 32px); }
html body .modal .modal-content { border: 0 !important; border-radius: 22px !important; background: var(--cs-surface) !important; color: var(--cs-ink-2); box-shadow: 0 24px 64px rgba(13, 17, 24, .28); overflow: hidden; font-family: var(--cs-font); }
html body .modal .modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px !important; border-bottom: 1px solid var(--cs-line) !important; background: var(--cs-surface); }
html body .modal .modal-title, html body .modal .modal-header > h4, html body .modal .modal-header > h5 { margin: 0; font-size: 17px !important; font-weight: 800 !important; line-height: 1.4; color: var(--cs-ink) !important; letter-spacing: -.01em; }
html body .modal .modal-header .close { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 0 0 auto !important; padding: 0 !important; border-radius: 50%; background: var(--cs-surface-2); color: var(--cs-muted); font-size: 22px; font-weight: 400; line-height: 1; text-shadow: none; opacity: 1; transition: background .15s, color .15s; }
html body .modal .modal-header .close:hover { background: var(--cs-line); color: var(--cs-ink); }
html body .modal .modal-header .close:focus-visible, html body .modal .modal-footer button:focus-visible { outline: 2px solid var(--cs-point); outline-offset: 2px; }
html body .modal .modal-dialog:not(.modal-fullscreen-custom) .modal-body { padding: 20px 22px !important; font-size: 14px; line-height: 1.7; color: var(--cs-ink-2); max-height: calc(100vh - max(48px, 12vh) - 150px); overflow-y: auto; }
html body .modal .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px !important; border-top: 1px solid var(--cs-line) !important; background: var(--cs-surface); }
html body .modal .modal-footer > * { margin: 0 !important; }
html body .modal .modal-footer .btn, html body .modal .modal-footer button { height: 40px; padding: 0 18px; border-radius: 999px !important; border: 1px solid var(--cs-line) !important; background: var(--cs-surface) !important; color: var(--cs-ink) !important; font: 700 14px var(--cs-font); box-shadow: none !important; }
html body .modal .modal-footer .btn-primary, html body .modal .modal-footer .cs-notice-btn, html body .modal .modal-footer button:last-child { background: var(--cs-ink) !important; border-color: transparent !important; color: var(--cs-surface) !important; }
/* 모달 안 표 : 페이지 표와 같은 톤 */
html body .modal .modal-body .table { margin-bottom: 0; font-size: 13px; color: var(--cs-ink-2); background: transparent; }
html body .modal .modal-body .table th, html body .modal .modal-body .table td { padding: 9px 12px; border-color: var(--cs-line) !important; vertical-align: middle; }
html body .modal .modal-body .table thead th, html body .modal .modal-body .table tbody th { background: var(--cs-surface-2) !important; color: var(--cs-ink) !important; font-weight: 800; }
html body .modal .modal-body img { max-width: 100%; height: auto; }
/* 전체 화면 모달(천INDEX 설명) : 제목줄만 같은 모양 */
html body .modal .modal-fullscreen-custom .modal-content { border-radius: 0 !important; }
html body .modal .modal-header .btn-round { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--cs-ink) !important; color: var(--cs-surface) !important; font: 700 13px var(--cs-font); }
@media (max-width: 575.98px) {
	html body .modal .modal-dialog:not(.modal-fullscreen-custom) { margin: 16px auto; padding: 0 12px; }
	html body .modal .modal-content { border-radius: 18px !important; }
	html body .modal .modal-header { padding: 14px 16px !important; }
	html body .modal .modal-dialog:not(.modal-fullscreen-custom) .modal-body { padding: 16px !important; max-height: calc(100vh - 32px - 140px); }
	html body .modal .modal-footer { padding: 12px 16px !important; }
}
/* 공지 모달은 읽기용 넓은 여백 유지 */
html body .cs-notice-modal.modal .modal-header { padding: 28px 32px 18px !important; align-items: flex-start; }
html body .cs-notice-modal.modal .modal-dialog .modal-body { padding: 24px 32px !important; font-size: 16px; line-height: 1.85; }
html body .cs-notice-modal.modal .modal-footer { padding: 16px 32px 24px !important; border-top: 0 !important; }
@media (max-width: 575.98px) {
	html body .cs-notice-modal.modal .modal-header, html body .cs-notice-modal.modal .modal-dialog .modal-body { padding-left: 20px !important; padding-right: 20px !important; }
}
/* 천INDEX 설명(iframe) 모달 : 기본 500px 로 좁게 뜨던 것 → 화면 가운데 큰 패널 */
html body .modal .modal-dialog.modal-fullscreen-custom { max-width: min(1100px, calc(100vw - 32px)); margin: 24px auto; }
html body .modal .modal-fullscreen-custom .modal-content { height: calc(100vh - 48px); border-radius: 22px !important; }
html body .modal .modal-fullscreen-custom .modal-body { flex: 1 1 auto; height: auto !important; min-height: 0; }
@media (max-width: 575.98px) {
	html body .modal .modal-dialog.modal-fullscreen-custom { max-width: 100vw; margin: 0; }
	html body .modal .modal-fullscreen-custom .modal-content { height: 100vh; height: 100dvh; border-radius: 0 !important; }
}

/* ---------- 그래프 위 '알 수 있는 것' 한 줄 (chun-chart-notes.js) ---------- */
.cs-chart-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--cs-surface-2); font-size: 12.5px; line-height: 1.6; color: var(--cs-muted); text-align: left; word-break: keep-all; }
.cs-chart-note > i { flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--cs-point); color: #FFFFFF; font-size: 10px; }
.cs-chart-note em { font-style: normal; font-weight: 700; color: var(--cs-ink); }

/* ETF 흐름(업종 묶음) : 묶음 칸(rowspan) 오른쪽 선 · 이름 칸 왼쪽 선을 모든 줄에 같게, 묶음 끝 줄은 진한 구분선 */
html body .cs-page #table-etf.cs-etf-grouped > tbody > tr > th[rowspan] { background: var(--cs-surface-2) !important; color: var(--cs-ink) !important; font-weight: 800 !important; box-shadow: inset -1px 0 0 var(--cs-line) !important; }
html body .cs-page #table-etf.cs-etf-grouped > tbody > tr > td:first-of-type { box-shadow: inset 1px 0 0 var(--cs-line) !important; }
html body .cs-page #table-etf.cs-etf-grouped > tbody > tr > th[rowspan] + td { box-shadow: none !important; }
html body .cs-page #table-etf.cs-etf-grouped > tbody > tr.end-group > td,
html body .cs-page #table-etf.cs-etf-grouped > tbody > tr > th.end-group { border-bottom: 2px solid var(--cs-line) !important; }

/* ================= 쓰기 편하게 (chun-ux.js) ================= */
/* 메뉴 검색 버튼 (상단) : 넓은 화면은 글자 + 단축키, 좁으면 동그란 아이콘만 */
.cs-search-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 16px; border: 0; border-radius: 999px; background: var(--cs-surface); color: var(--cs-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.cs-search-btn:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.cs-search-btn:focus-visible, .cs-toc-list button:focus-visible, .cs-tour button:focus-visible { outline: 2px solid var(--cs-point); outline-offset: 2px; }
.cs-search-btn i { font-size: 14px; color: var(--cs-ink); }
.cs-search-btn kbd, .cs-pal kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--cs-bg); box-shadow: inset 0 -1px 0 var(--cs-line); color: var(--cs-faint); font: 700 11px/1 var(--cs-font); letter-spacing: .02em; }
@media (max-width: 1279.98px) {
	.cs-search-btn { width: 42px; padding: 0; justify-content: center; }
	.cs-search-btn span, .cs-search-btn kbd { display: none; }
}
@media (max-width: 400px) { .cs-search-btn { width: 38px; height: 38px; } }

/* 메뉴 검색 창 */
.cs-pal { position: fixed; inset: 0; z-index: 2050; display: flex; justify-content: center; align-items: flex-start; padding: calc(12vh + env(safe-area-inset-top, 0px)) 16px 16px; background: rgba(13, 17, 24, .45); }
.cs-pal[hidden] { display: none !important; }
.cs-pal-box { width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; border-radius: 22px; background: var(--cs-surface); box-shadow: 0 24px 60px rgba(13, 17, 24, .28); overflow: hidden; }
.cs-pal-input { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--cs-line); cursor: text; }
.cs-pal-input i { color: var(--cs-faint); font-size: 16px; }
.cs-pal-input input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--cs-ink); font: 600 17px/1.4 var(--cs-font); }
.cs-pal-input input::placeholder { color: var(--cs-faint); font-weight: 500; }
.cs-pal-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.cs-pal-list li[data-i] { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; color: var(--cs-ink-2); }
.cs-pal-list li[data-i] > i { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--cs-surface-2); color: var(--cs-faint); font-size: 13px; }
.cs-pal-list li.is-active { background: var(--cs-surface-2); }
.cs-pal-list li.is-active > i { background: var(--cs-point); color: #FFFFFF; }
.cs-pal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-pal-main b { font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.cs-pal-main small { font-size: 12px; color: var(--cs-faint); }
.cs-pal-where { flex: 0 0 auto; font-size: 12px; color: var(--cs-faint); }
.cs-pal-list li em { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--cs-bg); color: var(--cs-muted); }
.cs-pal-empty { padding: 28px 16px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--cs-muted); word-break: keep-all; }
.cs-pal-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--cs-line); font-size: 12px; color: var(--cs-faint); }
.cs-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 575.98px) {
	.cs-pal { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
	.cs-pal-box { max-height: calc(100dvh - 24px); }
	.cs-pal-foot, .cs-pal-input kbd { display: none; }
	.cs-pal-where { display: none; }
}

/* 데이터 기준일 (페이지 제목 오른쪽) */
.cs-head-meta.has-fresh { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.cs-asof { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--cs-surface); font-size: 13px; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.cs-asof > i { width: 7px; height: 7px; border-radius: 50%; background: #2F9E62; box-shadow: 0 0 0 3px rgba(47, 158, 98, .18); }
.cs-asof b { font-weight: 800; color: var(--cs-ink); }
.cs-asof-rel { color: var(--cs-faint); }
.cs-asof-rel::before { content: "\00B7"; margin-right: 6px; }
.cs-asof em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #FFF1D6; color: #8A5A00; }
.cs-asof.is-late > i { background: #E0A100; box-shadow: 0 0 0 3px rgba(224, 161, 0, .2); }
@media (max-width: 767.98px) { .cs-head-meta.has-fresh { align-items: flex-start; text-align: left; } }

/* 바로 가기 칩 */
.cs-toc { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; min-width: 0; }
.cs-toc-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--cs-faint); letter-spacing: .02em; }
.cs-toc-label i { font-size: 11px; color: var(--cs-point); }
.cs-toc-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cs-toc-list button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--cs-surface); color: var(--cs-ink-2); font: 600 13px/1 var(--cs-font); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.cs-toc-list button:hover { background: var(--cs-ink); color: var(--cs-surface); }
@media (max-width: 767.98px) {
	.cs-toc { align-items: flex-start; flex-direction: column; gap: 8px; }
	.cs-toc-list { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
	.cs-toc-list::-webkit-scrollbar { display: none; }
}
.cs-toc-flash { animation: cs-toc-flash 1.6s ease-out; }
@keyframes cs-toc-flash { 0%, 35% { box-shadow: 0 0 0 3px var(--cs-point); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* 맨 위로 : 둥근 버튼 (sb-admin 기본 네모 → 테마 색) */
html body .scroll-to-top { width: 44px; height: 44px; line-height: 44px; border-radius: 50% !important; background: var(--cs-ink); color: #FFFFFF; box-shadow: 0 8px 20px rgba(13, 17, 24, .22); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1040; }
html body .scroll-to-top i { line-height: 44px; font-size: 18px; }
html body .scroll-to-top:hover { background: var(--cs-point); color: #FFFFFF; }

/* 용어 풀이 */
.cs-term { border-bottom: 1px dashed currentColor; cursor: help; text-decoration: none; outline-offset: 2px; }
.cs-term:hover, .cs-term:focus-visible { color: var(--cs-point); border-bottom-style: solid; }
.cs-term:focus-visible { outline: 2px solid var(--cs-point); border-radius: 3px; }
.cs-tip { position: fixed; z-index: 2060; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: var(--cs-ink); color: #E8ECF2; box-shadow: 0 12px 32px rgba(13, 17, 24, .3); font-size: 13px; line-height: 1.6; text-align: left; word-break: keep-all; }
.cs-tip[hidden] { display: none !important; }
.cs-tip-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cs-tip-head b { font-size: 14px; font-weight: 800; color: #FFFFFF; }
.cs-tip-head span { font-size: 12px; color: #A3AEBF; }
.cs-tip p { margin: 0; }

/* 첫 방문 안내 */
.cs-tour { position: fixed; inset: 0; z-index: 2070; }
.cs-tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(13, 17, 24, .58), inset 0 0 0 3px var(--cs-point); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.cs-tour-hole.is-none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(13, 17, 24, .58); }
.cs-tour-pop { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: 20px; background: var(--cs-surface); color: var(--cs-ink-2); box-shadow: 0 20px 50px rgba(13, 17, 24, .35); }
.cs-tour-pop.is-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); padding: 24px 22px 18px; }
.cs-tour-step { font-size: 12px; font-weight: 800; color: var(--cs-point); letter-spacing: .04em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.cs-tour-pop h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--cs-ink); text-wrap: balance; }
.cs-tour-pop.is-center h3 { font-size: 20px; }
.cs-tour-pop p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--cs-muted); word-break: keep-all; }
.cs-tour-btns { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.cs-tour-btns > span { flex: 1 1 auto; }
.cs-tour-btns button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font: 700 13px/1 var(--cs-font); cursor: pointer; }
.cs-tour-btns button[hidden] { display: none; }
.cs-tour-btns .cs-tour-skip { background: transparent; color: var(--cs-faint); padding: 0 6px; }
.cs-tour-prev { background: var(--cs-surface-2); color: var(--cs-ink-2); }
.cs-tour-next { background: var(--cs-ink); color: var(--cs-surface); min-width: 72px; }
.cs-tour-next:hover { background: var(--cs-point); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .cs-tour-hole { transition: none; } .cs-toc-flash { animation: none; } }

/* 표 첫 열 고정 (chun-table 이 안 붙는 짧은 표 · 줄 묶음 표) */
html body table.cs-stick-first tr > .cs-stick0 { position: sticky; left: 0; z-index: 2; background-color: var(--cs-surface); box-shadow: inset -1px 0 0 var(--cs-line); }
html body table.cs-stick-first thead tr > .cs-stick0 { background-color: var(--cs-surface-2); z-index: 3; }
.cs-head-meta-src:empty { display: none; }
/* 메뉴 검색 결과 : 상위 메뉴 › 메뉴 이름 */
.cs-pal-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.cs-pal-path { display: inline-flex; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--cs-muted); }
.cs-pal-sep { font-style: normal; margin: 0 6px; color: var(--cs-faint); }