/* ===== 화면 테마 (보기 설정 · js/view.js) =====
   data-theme 은 어두운/밝은 두 갈래(기존 규칙용), data-skin 은 그 안의 색 묶음.
   차트 작업 영역 색(--tv-*)과 나머지 화면 색(--bg · --win …)을 같이 바꾼다. 차트 캔버스도 이 변수를 읽는다. */
:root[data-skin] {
  --bg: var(--tv-gap); --win: var(--tv-panel); --win-2: var(--tv-soft); --line: var(--tv-line); --line-2: var(--tv-line-2);
  --text: var(--tv-text); --text-2: var(--tv-btn); --text-3: var(--tv-text-3); --hover: var(--tv-hover);
}
/* 클래식 다크: 트레이딩뷰 예전 푸른 회색 */
:root[data-skin="slate"] {
  --tv-panel: #131722; --tv-gap: #0c0e15; --tv-menu: #1e222d; --tv-dialog: #1e222d; --tv-hover: #2a2e39; --tv-soft: #1e222d;
  --tv-line: #2a2e39; --tv-line-2: #363a45; --tv-text: #d1d4dc; --tv-btn: #b2b5be; --tv-text-3: #787b86; --tv-grid: #1e222d; --tv-grid-dot: #363a45; --tv-axis: #b2b5be;
}
/* 미드나잇: 깊은 남색 */
:root[data-skin="navy"] {
  --tv-panel: #0b1220; --tv-gap: #060a14; --tv-menu: #111a2c; --tv-dialog: #111a2c; --tv-hover: #1a2539; --tv-soft: #111a2c;
  --tv-line: #1c2740; --tv-line-2: #26334f; --tv-text: #dfe5f2; --tv-btn: #aeb8cc; --tv-text-3: #6e7a93; --tv-grid: #121b2d; --tv-grid-dot: #26334f; --tv-axis: #aeb8cc;
}
/* 그라파이트: 색 없는 조용한 회색 */
:root[data-skin="graphite"] {
  --tv-panel: #1c1c1e; --tv-gap: #111113; --tv-menu: #242427; --tv-dialog: #242427; --tv-hover: #2e2e32; --tv-soft: #242427;
  --tv-line: #323236; --tv-line-2: #3e3e43; --tv-text: #e4e4e6; --tv-btn: #b9b9bd; --tv-text-3: #828287; --tv-grid: #252528; --tv-grid-dot: #3e3e43; --tv-axis: #b9b9bd;
}
/* 딥씨: 청록빛 깊은 바다 */
:root[data-skin="sea"] {
  --tv-panel: #05171d; --tv-gap: #020e12; --tv-menu: #0b222a; --tv-dialog: #0b222a; --tv-hover: #133039; --tv-soft: #0b222a;
  --tv-line: #133540; --tv-line-2: #1b4350; --tv-text: #d6eef2; --tv-btn: #9fc3ca; --tv-text-3: #5f8b94; --tv-grid: #0b2128; --tv-grid-dot: #1b4350; --tv-axis: #9fc3ca; --tv-accent: #19b3c9;
}
/* 따뜻한 숯빛: 숯 위에 놋쇠빛 */
:root[data-skin="ember"] {
  --tv-panel: #1a1714; --tv-gap: #110f0d; --tv-menu: #231f1b; --tv-dialog: #231f1b; --tv-hover: #2f2a24; --tv-soft: #231f1b;
  --tv-line: #342e28; --tv-line-2: #423a32; --tv-text: #ece4d8; --tv-btn: #c7bba9; --tv-text-3: #8c8070; --tv-grid: #24201c; --tv-grid-dot: #423a32; --tv-axis: #c7bba9; --tv-accent: #c9973f;
}
/* 깊은 숲: 짙은 초록 그늘 */
:root[data-skin="forest"] {
  --tv-panel: #0f1a14; --tv-gap: #09110d; --tv-menu: #15231b; --tv-dialog: #15231b; --tv-hover: #1d3026; --tv-soft: #15231b;
  --tv-line: #20352a; --tv-line-2: #2a4336; --tv-text: #dcebe1; --tv-btn: #a9c2b2; --tv-text-3: #6d8a77; --tv-grid: #15241b; --tv-grid-dot: #2a4336; --tv-axis: #a9c2b2; --tv-accent: #3fae78;
}
/* 자두빛 밤: 보랏빛 늦은 밤 */
:root[data-skin="plum"] {
  --tv-panel: #19121f; --tv-gap: #0f0b13; --tv-menu: #221829; --tv-dialog: #221829; --tv-hover: #2d2136; --tv-soft: #221829;
  --tv-line: #31253c; --tv-line-2: #3d2f4a; --tv-text: #ebe0f2; --tv-btn: #bfaccc; --tv-text-3: #847092; --tv-grid: #221a2a; --tv-grid-dot: #3d2f4a; --tv-axis: #bfaccc; --tv-accent: #9d6bff;
}
/* 옛 단말기: 검정에 호박빛 글 */
:root[data-skin="amber"] {
  --tv-panel: #000; --tv-gap: #0d0a03; --tv-menu: #120e05; --tv-dialog: #120e05; --tv-hover: #261d07; --tv-soft: #120e05;
  --tv-line: #2a2108; --tv-line-2: #3d300c; --tv-text: #ffb000; --tv-btn: #e3a00c; --tv-text-3: #9a6e10; --tv-grid: #140f04; --tv-grid-dot: #3d300c; --tv-axis: #e3a00c; --tv-accent: #ffb000;
}
/* 밝은 테마 */
:root[data-skin="paper"] {
  --tv-panel: #faf7f0; --tv-gap: #ebe5d7; --tv-menu: #fffdf8; --tv-dialog: #fffdf8; --tv-hover: #efe9dc; --tv-soft: #f3eee3;
  --tv-line: #e2dbcb; --tv-line-2: #d3cab6; --tv-text: #1d1a14; --tv-btn: #3b352a; --tv-text-3: #847b6a; --tv-grid: #efe9dc; --tv-grid-dot: #d3cab6; --tv-axis: #3b352a;
}
:root[data-skin="cloudy"] {
  --tv-panel: #eceef1; --tv-gap: #dcdfe5; --tv-menu: #f5f6f8; --tv-dialog: #f5f6f8; --tv-hover: #e1e4e9; --tv-soft: #e5e8ec;
  --tv-line: #d2d6dd; --tv-line-2: #c3c8d1; --tv-text: #1f2328; --tv-btn: #3c434d; --tv-text-3: #737b87; --tv-grid: #e1e4e9; --tv-grid-dot: #c3c8d1; --tv-axis: #3c434d;
}
:root[data-skin="contrast"] {
  --tv-panel: #fff; --tv-gap: #d9d9d9; --tv-menu: #fff; --tv-dialog: #fff; --tv-hover: #ebebeb; --tv-soft: #f2f2f2;
  --tv-line: #bdbdbd; --tv-line-2: #9e9e9e; --tv-text: #000; --tv-btn: #000; --tv-text-3: #4a4a4a; --tv-grid: #ededed; --tv-grid-dot: #bdbdbd; --tv-axis: #000;
}
/* 강조색이 바뀌는 테마는 브랜드 강조(선택 줄 · 켜진 단추)도 같이 */
:root[data-skin] #view-chart { --brand: var(--tv-accent); --brand-2: var(--tv-accent); --brand-bg: color-mix(in srgb, var(--tv-accent) 16%, transparent); }

/* 오르는 색: 빨강 상승 (한국식) — 목록 · 패널 · 호가의 오름 / 내림 색 */
:root[data-updown="rb"] { --up: #f23645; --down: #2962ff; --up-bg: rgba(242, 54, 69, .13); --down-bg: rgba(41, 98, 255, .14); --cd-up: #f23645; --cd-down: #2962ff; }

/* 글자 크기: 크게 */
:root[data-fsz="lg"] { --fs: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-lg: 16px; }
:root[data-fsz="lg"] #kc .lg { font-size: 14px; }
:root[data-fsz="lg"] #kc .lg-t { font-size: 17px; }
:root[data-fsz="lg"] .wl-row { height: 46px; }
:root[data-fsz="lg"] .sym .sub, :root[data-fsz="lg"] .tag { font-size: 11.5px; }

/* 가격 깜빡임 끔 */
:root[data-flash="off"] .flash-up, :root[data-flash="off"] .flash-down { animation: none !important; background: none !important; }

/* ----- 보기 설정 창 ----- */
.vw-pop { width: 420px; max-height: min(78vh, 720px); overflow: auto; padding: 4px 0 10px; font-size: 13px; color: var(--tv-text); }
.vw-sec { padding: 10px 16px 4px; font-size: 12px; color: var(--tv-text-3); font-weight: 600; }
.vw-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 16px 4px; }
.pop .vw-th { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 8px; border: 1px solid var(--tv-line); overflow: hidden; display: flex; flex-direction: column; min-height: 0 !important; padding: 0 !important; }
.pop .vw-th:hover { border-color: var(--tv-line-2); background: none; }
.pop .vw-th.on { border-color: var(--tv-accent); box-shadow: 0 0 0 1px var(--tv-accent); }
.pop .vw-th:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.vw-pv { height: 50px; padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between; }
.vw-pv i { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.vw-pv i b { width: 4px; border-radius: 1px; display: block; }
.vw-pv s { text-decoration: none; display: flex; justify-content: space-between; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.vw-nm { padding: 5px 8px 6px; background: var(--tv-menu); border-top: 1px solid var(--tv-line); display: flex; flex-direction: column; gap: 1px; }
.vw-nm b { font-size: 12px; font-weight: 600; color: var(--tv-text); }
.vw-nm small { font-size: 10px; color: var(--tv-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.vw-row .vw-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vw-row .vw-l b { font-weight: 500; font-size: 13px; }
.vw-row .vw-l small { font-size: 11px; color: var(--tv-text-3); }
.vw-row .seg button { padding: 4px 10px; font-size: 12px; min-height: 0; }
.pop .vw-sw { all: unset; box-sizing: border-box; width: 34px; height: 20px; border-radius: 10px; background: var(--tv-line-2); position: relative; cursor: pointer; flex: none; min-height: 0 !important; padding: 0 !important; }
.pop .vw-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.pop .vw-sw[aria-checked="true"] { background: var(--tv-accent); }
.pop .vw-sw[aria-checked="true"]::after { left: 17px; }
.pop .vw-sw:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.vw-ud { display: inline-flex; gap: 2px; align-items: center; }
.vw-ud i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.vw-foot { padding: 8px 16px 0; font-size: 11px; color: var(--tv-text-3); display: flex; gap: 10px; align-items: center; }
.vw-foot button { padding: 0 !important; min-height: 0 !important; color: var(--tv-accent) !important; background: none !important; font-size: 11px !important; }
@media (max-width: 640px) { .vw-pop { width: calc(100vw - 16px); } .vw-themes { grid-template-columns: repeat(2, 1fr); } }
.vw-row .seg button { width: auto; display: inline-flex; gap: 5px; align-items: center; line-height: 16px; border-radius: 4px; }
.vw-row input[type=range] { accent-color: var(--tv-accent); }

/* 차트 위 경제 일정 깃발 (js/econmarks.js) */
.em-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.em-layer .em { position: absolute; width: 12px; height: 16px; margin-left: -6px; pointer-events: auto; cursor: help; }
.em-layer .em::before { content: ""; position: absolute; left: 5px; top: 0; width: 1.5px; height: 16px; background: var(--warn); }
.em-layer .em::after { content: ""; position: absolute; left: 6.5px; top: 0; width: 7px; height: 6px; background: var(--warn); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.em-layer .em:not(.big)::before, .em-layer .em:not(.big)::after { background: var(--text-3); }
.em-layer .em.past { opacity: .45; }
.em-layer .em-next { position: absolute; pointer-events: auto; cursor: help; font-size: 11px; color: var(--warn); background: color-mix(in srgb, var(--tv-panel) 85%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }