/* COBA SCANNER — 코바인사이트 차트·스크리너·스캐너 */
/* 글꼴: Pretendard 가변(굵기 45~930) — KS X 1001 한글 2,350자 + 영문 · 기호만 남긴 subset 을 직접 둔다 (CDN 의존 없음, OFL · assets/fonts/Pretendard-LICENSE.txt).
   여기 없는 글자(드문 한글 등)는 --font 의 다음 글꼴로 넘어간다 */
/* 글꼴은 둘로 나눠 받는다: 숫자 · 영문 · 기호(69KB, 축 글자에 바로 쓰임) 와 한글 · 나머지(470KB). 미리 받지(preload) 않고 swap */
/* 한글 · 나머지(470KB) 글꼴은 index.html 머리 스크립트(window.__krFace)가 넣는다: 처음 오는 사람은 첫 차트를 그린 뒤에 받고 (느린 망에서 차트와 대역폭을 다투지 않게),
   한 번 받은 뒤(캐시)부터는 처음부터 넣는다 */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../assets/fonts/PretendardVariable.latin.woff2") format("woff2-variations"), url("../assets/fonts/PretendardVariable.latin.woff2") format("woff2");
  font-weight: 45 930; font-style: normal; font-display: swap;
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2000-215F, U+2190-22FF, U+25A0-25FF, U+2700-277F, U+FFFD;
}
:root {
  --cd-up: #26a17b; --cd-down: #e5484d;
  --font: "Pretendard Variable", Pretendard, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  /* 가독성 (매니저 피드백 10/27: 글씨가 작고 오밀조밀하다) — 기본 한 단계씩 키움. 보기 설정 '크게'는 skins.css */
  --fs: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-lg: 16px;
  --r: 6px; --r-lg: 10px;
  --topbar-h: 52px; --rail-w: 46px; --side-w: 340px; --row-h: 30px; --gap: 4px;

  --bg: #070a12;
  --win: #0d121d;
  --win-2: #121927;
  --line: #1c2434;
  --line-2: #273146;
  --text: #e6e9f0;
  --text-2: #a7b0c2;
  --text-3: #7d879c;
  --brand: #1b3df5;
  --brand-2: #5874ff;
  --brand-bg: rgba(27, 61, 245, .16);
  --up: #26a17b;
  --down: #e5484d;
  --up-bg: rgba(38, 161, 123, .14);
  --down-bg: rgba(229, 72, 77, .13);
  --warn: #f0b90b;
  --hover: rgba(255, 255, 255, .04);
  --shadow: 0 10px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e9ecf2;
  --win: #ffffff;
  --win-2: #f5f7fb;
  --line: #e3e7ef;
  --line-2: #d3d9e4;
  --text: #121826;
  --text-2: #4e586c;
  --text-3: #8a93a6;
  --brand-2: #1b3df5;
  --brand-bg: rgba(27, 61, 245, .09);
  --up: #089981;
  --down: #e53950;
  --up-bg: rgba(8, 153, 129, .1);
  --down-bg: rgba(229, 57, 80, .1);
  --hover: rgba(0, 0, 0, .035);
  --shadow: 0 10px 40px rgba(20, 30, 60, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: var(--fs)/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--text-2); } .dim { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 상단바 ---------- */
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: 22px;
  padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: .02em; font-size: 17px; white-space: nowrap; }
.logo img { width: 26px; height: 26px; border-radius: 7px; }
.logo small { font-weight: 600; font-size: 11px; color: var(--text-3); letter-spacing: .08em; margin-left: 2px; }
.nav { display: flex; gap: 2px; }
.nav a { padding: 6px 11px; border-radius: var(--r); color: var(--text-2); font-weight: 600; }
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a.on { color: var(--text); background: var(--win-2); }
.search {
  flex: 0 1 340px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: var(--win-2); color: var(--text-3); cursor: text;
}
.search:hover { color: var(--text-2); }
.search kbd { margin-left: auto; font: 11px var(--mono); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn {
  height: 32px; padding: 0 13px; border-radius: var(--r); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn.ghost:hover { background: var(--hover); }
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.line { border: 1px solid var(--line-2); }
.btn.line:hover { background: var(--hover); }
.btn.sm { height: 26px; padding: 0 9px; font-size: var(--fs-sm); }

/* ---------- 레이아웃 ---------- */
.shell {
  height: calc(100% - var(--topbar-h)); display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w) var(--rail-w);
  gap: var(--gap); padding: var(--gap);
}
.shell.side-off { grid-template-columns: minmax(0, 1fr) 0 var(--rail-w); }
.shell.side-off .side { display: none; }
.win { background: var(--win); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; min-height: 0; position: relative; }
.view { display: none; min-width: 0; min-height: 0; }
.view.on { display: flex; }

/* 오른쪽 레일 */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; }
.rail button, .tool {
  width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; color: var(--text-2);
}
.rail button:hover, .tool:hover { background: var(--hover); color: var(--text); }
.rail button.on { background: var(--win-2); color: var(--brand-2); }
.rail .sp { flex: 1; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 툴팁: [data-tip] 은 chartui.js 가 몸체(body)에 하나 띄우는 트레이딩뷰식 툴팁으로 보여 준다
   (예전 ::after 툴팁은 헤더·작도 막대의 overflow 에 잘려서 쓰지 않는다) */
[data-tip] { position: relative; }
.cu-tip { position: fixed; z-index: 1000; pointer-events: none; display: flex; align-items: center; gap: 8px; max-width: min(360px, calc(100vw - 16px));
  padding: 3px 4px 3px 8px; min-height: 24px; border-radius: 6px; background: #2b2b2b; color: #fff; font: 13px/18px var(--font); white-space: nowrap; opacity: 0; transition: opacity .08s; }
.cu-tip.on { opacity: 1; }
.cu-tip.no-key { padding-right: 8px; }
.cu-tip .t { overflow: hidden; text-overflow: ellipsis; }
.cu-tip .k { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.cu-tip kbd { font: 600 12px/16px var(--font); min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 4px; background: #636363; color: #fff; }
.cu-tip .k i { font-style: normal; font-size: 12px; color: #cfcfcf; }
:root[data-theme="light"] .cu-tip { background: #1a1a1a; }
.cu-tip.wrap { white-space: normal; }

/* ---------- 오른쪽 패널(관심 목록 등) ---------- */
.side { display: flex; flex-direction: column; overflow: hidden; }
.panel { display: none; flex-direction: column; min-height: 0; height: 100%; }
.panel.on { display: flex; }
.p-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; }
.p-head h3 { margin: 0; font-size: var(--fs); font-weight: 700; }
.p-head .sp { flex: 1; }
.p-head .tool { width: 26px; height: 26px; }
.seg { display: inline-flex; background: var(--win-2); border-radius: var(--r); padding: 2px; }
.seg button { padding: 3px 9px; border-radius: 4px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.seg button.on { background: var(--win); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
:root[data-theme="light"] .seg button.on { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.breadth { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 0 12px 8px; }
.breadth .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--down); overflow: hidden; }
.breadth .bar i { display: block; height: 100%; background: var(--up); }
.wl-cols, .wl-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 60px; align-items: center; padding: 0 12px; gap: 6px; }
.wl-cols { font-size: var(--fs-xs); color: var(--text-3); height: 24px; border-bottom: 1px solid var(--line); }
.wl-cols span:not(:first-child), .wl-row > span:not(:first-child) { text-align: right; }
.wl-list { overflow: auto; flex: 1; }
.wl-row { height: 42px; cursor: pointer; border: 1px solid transparent; position: relative; }
.wl-row:hover { background: var(--hover); }
.wl-row.on { border-color: var(--brand); background: var(--brand-bg); }
.wl-row.msel, .al-item.msel { background: var(--brand-bg); }
.wl-row.flag::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: #f23645; }
.wl-row .x { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 3px; display: none; color: var(--text-3); place-items: center; }
.wl-row:hover .x { display: grid; }
.wl-row .x:hover { color: var(--down); background: var(--hover); }
.sym { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sym b { font-weight: 700; }
.sym .sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sym > div { min-width: 0; line-height: 1.25; }
.tag { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--win-2); color: var(--text-2); font-weight: 600; margin-left: 4px; }
.ci {
  flex: none; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--line-2);
  position: relative;
}
.ci::before { content: attr(data-l); font-size: 10px; font-weight: 800; color: var(--text-2); }
.ci img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 가격이 바뀐 줄 잠깐 표시: 애니메이션 대신 0.6초 고정 색 (애니메이션은 프레임마다 스타일 계산을 다시 돌려 무거웠다) */
.flash-up [data-px] { color: var(--up); } .flash-down [data-px] { color: var(--down); } /* 트레이딩뷰: 줄 전체가 아니라 가격 글자만 */
@keyframes fu { from { background: var(--up-bg); } } @keyframes fd { from { background: var(--down-bg); } }

.empty { padding: 32px 18px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.empty svg { margin: 0 auto 10px; opacity: .6; }

/* 알림·계산기 패널 */
.form { padding: 4px 12px 12px; display: grid; gap: 8px; }
.field { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); }
.field input, .field select, .inp {
  height: 32px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--win-2); padding: 0 10px; color: var(--text); outline: none;
}
.field input:focus, .inp:focus { border-color: var(--brand); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-out { margin: 2px 12px 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; font-size: var(--fs-sm); }
.calc-out div { display: flex; justify-content: space-between; }
.calc-out b { font-size: var(--fs); }
.note { font-size: var(--fs-xs); color: var(--text-3); padding: 0 12px 12px; line-height: 1.55; }
.alert-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.alert-item .sp { flex: 1; }

/* ---------- 모의 거래 ---------- */
.panel[data-p="trade"] { overflow: auto; }
.book { border-bottom: 1px solid var(--line); font-size: var(--fs-xs); padding: 6px 0; flex: none; }
.bk-h, .bk-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; padding: 0 12px; gap: 4px; }
.bk-h { color: var(--text-3); padding-bottom: 3px; }
.bk-h span:not(:first-child), .bk-row span:not(:first-child) { text-align: right; }
.bk-row { height: 18px; align-items: center; position: relative; font-variant-numeric: tabular-nums; }
.bk-row::before { content: ""; position: absolute; right: 0; top: 1px; bottom: 1px; width: var(--w); opacity: .14; }
.bk-row.ask span:first-child { color: var(--down); } .bk-row.ask::before { background: var(--down); }
.bk-row.bid span:first-child { color: var(--up); } .bk-row.bid::before { background: var(--up); }
.bk-mid { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; font-size: var(--fs-lg); }
.bk-ratio { display: flex; align-items: center; gap: 6px; padding: 6px 12px 0; }
.bk-ratio i { flex: 1; height: 4px; background: var(--down); border-radius: 4px; overflow: hidden; }
.bk-ratio b { display: block; height: 100%; background: var(--up); }
.trade-form { padding: 10px 12px 14px; display: grid; gap: 9px; }
.tf-top { display: flex; align-items: center; gap: 6px; }
.tf-top .sp { flex: 1; }
.demo { font-size: 10px; font-weight: 800; background: var(--brand); color: #fff; border-radius: 3px; padding: 1px 5px; }
.chip.sm { height: 24px; padding: 0 8px; font-size: 11px; }
.seg.full { display: flex; } .seg.full button { flex: 1; }
.avail { font-size: var(--fs-xs); color: var(--text-2); }
.avail b { color: var(--text); }
.pcts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pcts button { height: 26px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 11px; color: var(--text-2); }
.pcts button.on, .pcts button:hover { border-color: var(--brand); color: var(--brand-2); }
.tpsl-t { text-align: left; font-size: var(--fs-xs); color: var(--text-2); }
.btn.buy { background: var(--up); color: #fff; justify-content: center; height: 38px; }
.btn.sell { background: var(--down); color: #fff; justify-content: center; height: 38px; }
.btn.buy:hover, .btn.sell:hover { filter: brightness(1.1); }
.est { font-size: 11px; line-height: 1.5; color: var(--text-2); }
.est b { color: var(--text); }
.pos-mini { font-size: var(--fs-xs); border: 1px solid var(--line-2); border-radius: var(--r); padding: 7px 9px; color: var(--text-2); }
.tr-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); position: sticky; top: 0; background: var(--win); z-index: 2; }
.tr-tabs button { padding: 4px 9px; border-radius: 4px; color: var(--text-2); font-weight: 600; }
.tr-tabs button.on { background: var(--win-2); color: var(--text); }
.tr-tabs .sp { flex: 1; }
.tag.up { color: var(--up); background: var(--up-bg); } .tag.down { color: var(--down); background: var(--down-bg); }
button.link { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.asset { padding: 12px; display: grid; gap: 12px; }
.as-top { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.as-top > div:first-child { display: grid; gap: 2px; }
.big { font-size: 24px; font-weight: 800; }
.as-cells { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; }
.as-cells div { display: grid; font-size: var(--fs-xs); color: var(--text-3); }
.as-cells b { font-size: var(--fs-lg); color: var(--text); }
.as-mid { display: flex; gap: 12px; flex-wrap: wrap; }
.as-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 8px; min-width: 240px; }
.as-card.grow { flex: 1; }
.as-kv { display: grid; grid-template-columns: auto auto; gap: 3px 16px; font-size: var(--fs-sm); color: var(--text-2); }
.as-kv b { text-align: right; }
.dock-body { height: 240px; }

/* ---------- 차트 ---------- */
#view-chart { flex-direction: column; gap: var(--gap); }
.chart-win { flex: 1; display: flex; flex-direction: column; }
.chart-head {
  height: 46px; display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none;
}
.sym-btn { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: var(--r); }
.sym-btn:hover { background: var(--hover); }
.sym-btn b { font-size: 15px; }
.sym-btn .sub { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.1; text-align: left; }
.last-px { font-size: 17px; font-weight: 700; margin: 0 6px 0 2px; min-width: 90px; }
.vsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.hbtn { height: 30px; min-width: 30px; padding: 0 8px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.hbtn:hover { background: var(--hover); color: var(--text); }
.hbtn.on { color: var(--brand-2); }
.hbtn.star.on { color: var(--warn); }
.hbtn.star.on .ico { fill: currentColor; }
.tfs { display: flex; }
.stat { display: grid; font-size: var(--fs-xs); line-height: 1.2; padding: 0 8px; color: var(--text-3); white-space: nowrap; }
.stat b { color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.chart-head .sp { flex: 1; }
.chart-body { flex: 1; display: flex; min-height: 0; }
.draw-bar { width: 44px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; overflow: auto; }
.draw-bar .tool.on { background: var(--brand-bg); color: var(--brand-2); }
.draw-bar hr { width: 22px; border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.kc { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.kc .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); pointer-events: none; }
/* 불러오는 동안 도는 표시 (index.html 첫 화면 뼈대와 같은 모양) — 오류 문구일 땐 숨김 */
#kcLoading:not(.err) { font-size: 0; }
#kcLoading:not(.err)::before { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #2a2e39; border-top-color: #2962ff; animation: kcspin .8s linear infinite; }
:root[data-theme="light"] #kcLoading:not(.err)::before { border-color: #e0e3eb; border-top-color: #2962ff; }
@keyframes kcspin { to { transform: rotate(360deg); } }
.chart-foot { height: 34px; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-top: 1px solid var(--line); font-size: var(--fs-sm); flex: none; }
.chart-foot .hbtn { height: 24px; padding: 0 7px; font-size: var(--fs-sm); }
.chart-foot .hbtn.on { background: var(--win-2); color: var(--text); }
.chart-foot .sp { flex: 1; }
.chart-foot .clock { color: var(--text-2); margin: 0 6px; }

/* 화면 분할 */
.kc-grid { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 3px; background: var(--line); grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.kc-grid > * { background: var(--win); min-width: 0; min-height: 0; }
.kc-grid[data-mode="2h"] { grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr)); }
.kc-grid[data-mode="2v"] { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
.kc-grid[data-mode="3"] { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1.7fr) minmax(0, 1fr); }
.kc-grid[data-mode="3"] > #kc { grid-row: 1 / span 2; }
.kc-grid[data-mode="4"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.kc-grid[data-mode="6"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.kc-grid[data-mode="8"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr)); }
.cell { display: flex; flex-direction: column; }
.cell-h { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); flex: none; overflow: hidden; }
.cell-h .hbtn { height: 24px; padding: 0 6px; font-size: var(--fs-sm); }
.cell-h .sp { flex: 1; }

/* 리플레이 */
.replay-ui { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.replay-mark { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; place-items: center; gap: 6px; font-size: 26px; font-weight: 800; color: var(--text); opacity: .07; }
.replay-bar { pointer-events: auto; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: var(--win); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 8px 4px 10px; box-shadow: var(--shadow); white-space: nowrap; }
.replay-bar .tool { width: 30px; height: 30px; }
.rp-info { font-size: var(--fs-xs); color: var(--text-2); min-width: 170px; }

/* 하단 도크 */
.dock { flex: none; }
.dock-tabs { height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.dock-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r); color: var(--text-2); font-weight: 600; }
.dock-tabs button:hover { background: var(--hover); color: var(--text); }
.dock-tabs button.on { color: var(--text); background: var(--win-2); }
.dock-tabs .sp { flex: 1; }
.dock-body { height: 210px; border-top: 1px solid var(--line); overflow: auto; display: none; }
.dock.open .dock-body { display: block; }
.dock .chev { transition: transform .15s; }
.dock.open .chev { transform: rotate(180deg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th { position: sticky; top: 0; background: var(--win); color: var(--text-3); font-weight: 600; text-align: right; padding: 0 10px; height: 30px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { padding: 0 10px; height: var(--row-h); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--hover); }

/* ---------- 모달·팝오버 ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80; display: none; align-items: flex-start; justify-content: center; padding-top: 9vh; }
.overlay.on { display: flex; }
.modal { width: min(560px, calc(100vw - 32px)); max-height: 76vh; display: flex; flex-direction: column; background: var(--win); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-h h3 { margin: 0; font-size: var(--fs-lg); }
.modal-h .sp { flex: 1; }
.modal-s { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.modal-s input { width: 100%; height: 38px; border: 1px solid var(--line-2); background: var(--win-2); border-radius: var(--r); padding: 0 12px; outline: none; font-size: 14px; }
.modal-s input:focus { border-color: var(--brand); }
.modal-b { overflow: auto; flex: 1; }
.ex-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ex-chips .chip { height: 26px; }
.tag.ex-binance { color: #f0b90b; } .tag.ex-gate { color: #5c86ff; } .tag.ex-bitget { color: #00c2c7; } .tag.ex-okx { color: var(--text); } .tag.ex-bybit { color: #f7a600; }
.s-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 72px 30px; gap: 8px; align-items: center; padding: 0 16px; height: 44px; cursor: pointer; }
.s-row > span { text-align: right; }
.s-row:hover, .s-row.hl { background: var(--hover); }
.s-row .add { color: var(--text-3); width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; }
.s-row .add:hover { color: var(--warn); background: var(--hover); }
.s-row .add.on { color: var(--warn); }
.s-row .add.on .ico { fill: currentColor; }
.ind-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; }
.ind-row:hover { background: var(--hover); }
.ind-row b { font-weight: 700; min-width: 54px; }
.ind-row .sp { flex: 1; }
.chk { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.on > .chk { background: var(--brand); border-color: var(--brand); }
.on > .chk::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.grp { padding: 10px 16px 4px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; }

.pop { position: fixed; z-index: 90; background: var(--win); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; display: none; min-width: 150px; }
.pop.on { display: block; }
.pop button { display: flex; width: 100%; padding: 7px 10px; border-radius: 4px; text-align: left; gap: 8px; align-items: center; }
.pop button:hover { background: var(--hover); }
.pop button.on { color: var(--brand-2); }
.pop .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.pop .pgrid button { justify-content: center; padding: 7px 4px; }
.pop .plabel { font-size: var(--fs-xs); color: var(--text-3); padding: 6px 8px 2px; }

.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: grid; gap: 8px; }
/* 휴대폰: 아래 탭 막대(56px) 위로 띄운다 (알림 문구가 탭을 가리지 않게) */
@media (max-width: 640px) { .toast-wrap { right: 12px; left: 12px; bottom: calc(56px + 8px + env(safe-area-inset-bottom)); justify-items: center; pointer-events: none; } .toast-wrap .toast { max-width: 100%; pointer-events: auto; } }
.toast { background: var(--win); border: 1px solid var(--line-2); border-left: 3px solid var(--brand); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow); font-size: var(--fs-sm); max-width: 320px; animation: tin .2s; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* ---------- 스크리너 ---------- */
#view-screener { gap: var(--gap); }
.scr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.chip {
  height: 28px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.on { border-color: var(--brand); color: var(--brand-2); background: var(--brand-bg); }
.chip b { color: var(--text); font-weight: 600; }
.chip.on b { color: inherit; }
.scr-bar .sp { flex: 1; }
.scr-bar .inp { height: 28px; width: 160px; }
.scr-info { font-size: var(--fs-xs); color: var(--text-3); padding: 6px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; }
.scr-info .prog { color: var(--brand-2); }
.scr-table { flex: 1; overflow: auto; }
.scr-table .tbl th { cursor: pointer; user-select: none; }
.scr-table .tbl th:hover { color: var(--text); }
.scr-table .tbl th.sorted { color: var(--brand-2); }
.scr-table .tbl td { height: 38px; }
.scr-table .tbl tr.on { background: var(--brand-bg); }
.scr-table .rank { color: var(--text-3); width: 28px; display: inline-block; font-size: var(--fs-xs); }
.spark { display: inline-block; vertical-align: middle; }
.rsi-cell { display: inline-flex; align-items: center; gap: 6px; }
.rsi-cell i { width: 34px; height: 4px; border-radius: 2px; background: var(--line-2); position: relative; overflow: hidden; display: inline-block; }
.rsi-cell i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); }
.scr-preview { width: 380px; flex: none; display: flex; flex-direction: column; }
.scr-preview .ph { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.scr-preview .ph .sp { flex: 1; }
.scr-preview .kc { flex: 1; }
.scr-preview .facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.scr-preview .facts div { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); display: grid; }
.scr-preview .facts div:nth-child(odd) { border-right: 1px solid var(--line); }
.scr-preview .facts b { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- 스캐너 ---------- */
#view-scanner { gap: var(--gap); }
.scn-list { width: 320px; flex: none; display: flex; flex-direction: column; }
.scn-list .p-head { border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.scn-cards { overflow: auto; flex: 1; padding: 8px; display: grid; gap: 8px; align-content: start; }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--win-2); }
.card-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; cursor: pointer; }
.card-h b { font-size: var(--fs); }
.card-h .sp { flex: 1; }
.card-h .cnt { font-size: var(--fs-xs); color: var(--text-3); }
.card-tf { display: flex; gap: 4px; padding: 0 12px 10px; flex-wrap: wrap; align-items: center; }
.card-tf button { font-size: var(--fs-xs); padding: 1px 7px; border-radius: 4px; background: var(--win); border: 1px solid var(--line); color: var(--text-2); font-weight: 600; }
.card-tf button:hover { color: var(--text); }
.card-tf button.on { border-color: var(--brand); color: var(--brand-2); }
.card-tf .hits { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }
.card-body { display: none; border-top: 1px solid var(--line); }
.card.open .card-body { display: block; }
.card.open { border-color: var(--line-2); }
.card .sketch { padding: 10px 12px 0; }
.card .desc { padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.card .desc small { display: block; color: var(--text-3); font-size: var(--fs-xs); margin-top: 4px; }
.subs { padding: 0 6px 8px; }
.sub-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r); cursor: pointer; font-size: var(--fs-sm); }
.sub-row:hover { background: var(--hover); }
.sub-row.on { background: var(--brand-bg); }
.sub-row b { font-weight: 600; }
.sub-row .sp { flex: 1; }
.sub-row .n { min-width: 34px; text-align: right; font-weight: 700; }
.sub-row .n.zero { color: var(--text-3); font-weight: 400; }
.scn-res { width: 360px; flex: none; display: flex; flex-direction: column; }
.scn-res .p-head { border-bottom: 1px solid var(--line); }
.scn-res .cap { font-size: var(--fs-xs); color: var(--text-3); padding: 6px 12px; border-bottom: 1px solid var(--line); }
.res-list { flex: 1; overflow: auto; }
.res-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.res-row:hover { background: var(--hover); }
.res-row.on { background: var(--brand-bg); box-shadow: inset 2px 0 0 var(--brand); }
.res-row .why { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; }
.res-row .why span { background: var(--win-2); border-radius: 3px; padding: 0 5px; }
.res-row .px { text-align: right; font-size: var(--fs-sm); line-height: 1.25; }
.scn-chart { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.scn-chart .ph { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; min-height: 46px; }
.scn-chart .ph .sp { flex: 1; }
.scn-chart .kc { flex: 1; }
.progress { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); transition: width .2s; }

/* 근거 패널 */
.howto { border-top: 1px solid var(--line); padding: 8px 12px 10px; display: grid; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); max-height: 38%; overflow: auto; flex: none; }
.howto:empty { display: none; }
.evi-h { display: flex; align-items: center; gap: 10px; }
.evi-h b { color: var(--text); font-size: var(--fs-sm); }
.evi-h .sp { flex: 1; }
.warn { color: #f0a030; }
.evi-read { border: 1px solid var(--line-2); border-radius: var(--r); padding: 7px 10px; display: grid; gap: 3px; }
.evi-read b { color: var(--text); }
.evi-read i { font-style: normal; color: var(--text); font-weight: 600; margin-right: 6px; }
.evi-pts { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.new { font-size: 10px; font-weight: 700; color: var(--up); border: 1px solid var(--up); border-radius: 3px; padding: 0 4px; margin-left: 4px; line-height: 14px; display: inline-block; }
.pager { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.pager .tool { width: 24px; height: 24px; font-size: 16px; }
.evi-bar { position: absolute; left: 10px; bottom: 36px; z-index: 6; display: flex; gap: 6px; align-items: center; background: var(--win); border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px 6px 4px 10px; font-size: var(--fs-xs); box-shadow: var(--shadow); }

/* ---------- 모바일 ---------- */
.mbar { display: none; }
@media (max-width: 1500px) { .shell:not(.side-off) .stat.s2 { display: none; } }
@media (max-width: 1320px) { .shell:not(.side-off) .stat { display: none; } .stat.s2 { display: none; } }
@media (max-width: 1100px) {
  .scr-preview { display: none; }
  .scn-chart { display: none; }
  .scn-res { flex: 1; width: auto; }
  .stat { display: none; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 50px; }
  body { overflow: hidden; }
  .nav, .search kbd, .top-r .ghost, .logo small { display: none; }
  .search { flex: 1; min-width: 0; height: 32px; }
  .search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar { gap: 8px; padding: 0 10px; }
  .logo { font-size: 15px; gap: 7px; }
  .logo img { width: 24px; height: 24px; }
  .top-r .primary { height: 30px; padding: 0 10px; font-size: 12px; }
  .chart-head { gap: 2px; }
  .last-px { font-size: 15px; min-width: 0; }
  .shell { grid-template-columns: minmax(0, 1fr); height: calc(100% - var(--topbar-h) - 56px); padding: 0; gap: 0; }
  .shell.side-off { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .side { display: none; }
  .shell.m-side .side { display: flex; position: fixed; inset: var(--topbar-h) 0 56px 0; z-index: 40; border-radius: 0; }
  .shell.m-side .side { display: flex !important; }
  .win { border-radius: 0; border-left: 0; border-right: 0; }
  .draw-bar { display: none; }
  .chart-head, .chart-foot { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .chart-head > *, .chart-foot > *, #ranges > * { flex-shrink: 0; }
  .chart-win { overflow: hidden; }
  .chart-head .hide-m, .chart-foot .hide-m { display: none; }
  .dock { display: none; }
  .scn-list { width: 100%; }
  #view-scanner.res-mode .scn-list { display: none; }
  #view-scanner:not(.res-mode) .scn-res { display: none; }
  .scr-table .hide-m { display: none; }
  .mbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; height: 56px;
    background: var(--win); border-top: 1px solid var(--line); z-index: 50;
  }
  .mbar a { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11px; color: var(--text-3); font-weight: 600; }
  .mbar a.on { color: var(--brand-2); }
}

/* ---------- 2차 다듬기 ---------- */
.chart-title { position: absolute; left: 10px; top: 5px; z-index: 4; pointer-events: none; font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.chart-title b { color: var(--text); font-weight: 700; }
.chart-title .tag { color: #f0a030; background: rgba(240,160,48,.12); }
.countdown { position: absolute; right: 0; width: 64px; z-index: 4; pointer-events: none; color: #fff; font-size: 10px; text-align: center; border-radius: 2px; padding: 1px 0; opacity: .92; }
.pop.tf-pop { min-width: 210px; max-height: 70vh; overflow: auto; }
.tf-row { display: flex; align-items: center; border-radius: 4px; }
.tf-row:hover { background: var(--hover); }
.tf-row.on > button:first-child { color: var(--brand-2); font-weight: 700; }
.tf-row > button:first-child { flex: 1; }
.tf-row .code { color: var(--text-3); font-size: 11px; width: 34px; }
.pop .tf-row button.star { width: 30px; padding: 6px 0; justify-content: center; color: var(--text-3); }
.pop .tf-row button.star.on { color: var(--warn); }
.pop button:disabled { opacity: .35; }
.pop .ck { width: 14px; display: inline-block; color: var(--brand-2); }
/* 팝오버가 열려 있으면 툴팁은 숨긴다 (메뉴 첫 줄을 가리던 문제) */
/* (예전 ::after 툴팁 규칙은 chartui.js 의 몸체 툴팁으로 바꿨다) */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.set-row b { font-weight: 600; display: block; }
.set-row small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; max-width: 260px; }
body.focus .side, body.focus .rail, body.focus .dock { display: none !important; }
body.focus .shell { grid-template-columns: minmax(0, 1fr) !important; }
/* 패널 입력칸이 오른쪽으로 넘치던 문제 */
.field { min-width: 0; }
.field input, .field select { width: 100%; min-width: 0; }
.row2 > * { min-width: 0; }
/* 시장 요약 탭이 잘리던 문제 */
.panel[data-p="movers"] .p-head { flex-wrap: wrap; row-gap: 8px; }
.panel[data-p="movers"] .seg { width: 100%; display: flex; }
.panel[data-p="movers"] .seg button { flex: 1; }
.sym b, .sym .tag { white-space: nowrap; }
.sym > div > b + .tag { display: inline-block; }
/* 검색 결과 종목명 왼쪽 정렬 */
.s-row > span:first-child { text-align: left; }
@media (max-width: 1680px) { .shell:not(.side-off) .stat.s3 { display: none; } }
@media (max-width: 1400px) { .stat.s3 { display: none; } }

.chart-head { overflow: hidden; }
.chart-head > * { flex-shrink: 0; }
.chart-head .stat { flex-shrink: 1; min-width: 0; overflow: hidden; }
@media (max-width: 1880px) { .shell:not(.side-off) .stat.s2 { display: none; } }
@media (max-width: 1700px) { .shell:not(.side-off) .stat { display: none; } }
@media (max-width: 1560px) { .shell:not(.side-off) .chart-head .lbl { display: none; } }
@media (max-width: 1300px) { .chart-head .lbl { display: none; } }
.sym > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 종목 정보 */
.inf-h { display: flex; align-items: center; gap: 10px; padding: 12px; }
.inf-h b { font-size: 15px; }
.inf-sec { border-top: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 4px; }
.inf-t { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
.inf-t .dim { font-weight: 500; font-size: 11px; margin-left: 4px; }
.inf-li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; font-size: var(--fs-sm); }
.inf-li:hover { background: var(--hover); }
.inf-li.on { background: var(--brand-bg); }
.inf-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-sm); color: var(--text-2); }
.inf-kv b { text-align: right; font-weight: 600; color: var(--text); }
.inf-note { font-size: 11px; line-height: 1.5; }
#miniHead select { width: 100%; }
.btn.ghost.sm:hover { background: var(--hover); }

.s-head { height: 30px; font-size: 11px; color: var(--text-3); cursor: default; border-bottom: 1px solid var(--line); }
.s-head:hover { background: none; }
.s-head button { color: var(--text-3); font-size: 11px; }
.s-head button:hover { color: var(--text); }
.s-cap { font-size: 11px; color: var(--text-3); padding: 6px 16px 2px; }

/* 지표 고르기 창 */
.modal.wide { width: min(820px, calc(100vw - 32px)); height: min(640px, 80vh); }
.ind-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); height: 100%; min-height: 0; }
.ind-nav { border-right: 1px solid var(--line); padding: 4px 8px; display: grid; align-content: start; gap: 2px; overflow: auto; }
.ind-nav .grp { padding: 10px 8px 4px; }
.ind-nav button { text-align: left; padding: 7px 10px; border-radius: var(--r); color: var(--text-2); font-weight: 600; }
.ind-nav button:hover { background: var(--hover); color: var(--text); }
.ind-nav button.on { background: var(--brand-bg); color: var(--brand-2); }
.ind-main { display: flex; flex-direction: column; min-height: 0; }
.ind-s { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ind-s input { width: 100%; height: 34px; }
.ind-items { flex: 1; overflow: auto; }
.ind-items .ind-row { padding: 8px 14px; }
.ind-items .ind-row b { min-width: 74px; }
.ind-where { font-size: 11px; }
.istar { width: 24px; color: var(--text-3); font-size: 14px; }
.istar.on { color: var(--warn); }
.ind-desc { border-top: 1px solid var(--line); padding: 10px 14px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; min-height: 64px; }
.ind-desc b { color: var(--text); }
#indOv .modal-b { overflow: hidden; }

/* 작도 도구 묶음 */
.dg { position: relative; display: flex; align-items: center; }
.dg .dg-more { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 10px; height: 20px; font-size: 11px; color: var(--text-3); opacity: 0; }
.dg:hover .dg-more { opacity: 1; }
.dg .dg-more:hover { color: var(--text); }
.draw-bar .tool svg { width: 18px; height: 18px; }
.pop.fly { min-width: 220px; max-height: 80vh; overflow: auto; }
.pop .fly-it { gap: 10px; }
.pop .fly-it .fi { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-2); }
.pop .fly-it .fi svg { width: 18px; height: 18px; }
.pop .fly-it .key { margin-left: auto; font-size: 11px; color: var(--text-3); }
.pop .fly-it.on { color: var(--brand-2); }

.h-more { display: none; }
@media (max-width: 1640px) { .shell:not(.side-off) .h-extra { display: none; } .shell:not(.side-off) .h-more { display: inline-flex; } }
@media (max-width: 1300px) { .h-extra { display: none; } .h-more { display: inline-flex; } }

/* 스캐너 세부 조건: 시간 단위별 개수 */
.scn-tabs { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.scn-tabs button { padding: 5px 10px; border-radius: var(--r); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.scn-tabs button.on { background: var(--win-2); color: var(--text); }
.sub-row { align-items: flex-start; }
.sub-row .istar { width: 18px; padding-top: 1px; }
.sub-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.tfcs { display: flex; flex-wrap: wrap; gap: 4px; }
.tfc { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 4px 1px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--text-2); background: var(--win); }
.tfc i { font-style: normal; font-weight: 700; color: var(--text); min-width: 14px; text-align: right; }
.tfc.zero i { color: var(--text-3); font-weight: 400; }
.tfc:hover { border-color: var(--text-3); }
.tfc.on { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-2); }
.tfc em { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.log-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--fs-sm); }
.log-row:hover { background: var(--hover); }
.log-row .dim { font-size: 11px; }
.scr-table .tbl td { height: 36px; font-size: 12.5px; }
.scr-table .sym .sub { font-size: 10.5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.scr-table .sym > div { line-height: 1.2; }

@media (max-width: 640px) { .chart-title { display: none; } .countdown { width: 56px; } }

/* 계정 */
.btn.acct { gap: 7px; }
.btn.acct .av { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.btn.acct .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.mbadge { font-size: 10px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 3px; padding: 1px 5px; }
.acct-pop { padding: 8px 10px 10px; display: grid; gap: 3px; min-width: 230px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12px; }
.acct-pop b { font-size: 14px; }
.acct-st { margin-top: 6px; font-weight: 600; color: var(--text-2); }
.acct-st.on { color: var(--brand-2); }
.btn.kakao { width: 100%; justify-content: center; height: 40px; background: #fee500; color: #191919; }
.btn.kakao:hover { filter: brightness(.97); }
.or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 11px; margin: 14px 0 10px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; }
.lg-links a { color: var(--brand-2); }
.ul-box { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 14px; background: var(--win-2); }
.ul-box > div { display: grid; }
.ul-box ul { margin: 8px 0 0; padding-left: 18px; }
.ul-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lock-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--warn); border: 1px solid rgba(240,185,11,.4); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.lock-tag svg { width: 10px; height: 10px; }
@media (max-width: 640px) { .btn.acct .nm, .btn.acct .mbadge { display: none; } }

.lock-box { margin: 8px 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px dashed rgba(240,185,11,.45); border-radius: var(--r-lg); padding: 10px 12px; background: rgba(240,185,11,.06); }
.lock-box > svg { color: var(--warn); flex: none; }
.lock-box div { display: grid; flex: 1; font-size: 12px; gap: 2px; }
.lock-box span { color: var(--text-2); font-size: 11.5px; line-height: 1.5; }

/* ---------- 커뮤니티 ---------- */
#view-community { gap: var(--gap); }
.com-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.com-side { width: 320px; flex: none; display: flex; flex-direction: column; }
.com-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.com-bar h3 { margin: 0 6px 0 0; font-size: 15px; }
.com-bar .sp { flex: 1; }
.com-feed { flex: 1; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-content: start; }
.com-feed > .empty, .com-gate { grid-column: 1 / -1; }
.com-gate { display: grid; justify-items: center; gap: 10px; padding: 70px 20px; text-align: center; color: var(--text-2); line-height: 1.7; }
.com-gate b { font-size: 17px; color: var(--text); }
.idea { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--win-2); cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s; }
.idea:hover { border-color: var(--line-2); }
.idea-img { aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.idea-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea-b { padding: 10px 12px 12px; display: grid; gap: 6px; }
.idea-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.idea h4 { margin: 0; font-size: 14px; line-height: 1.4; }
.idea p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.idea-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); }
.idea-foot .sp { flex: 1; }
.kind { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 3px; background: var(--brand-bg); color: var(--brand-2); }
.kind.k-복기 { background: rgba(240,185,11,.12); color: #f0b90b; }
.kind.k-질문 { background: rgba(176,124,255,.14); color: #b07cff; }
.kind.k-공부 { background: rgba(46,189,133,.12); color: var(--up); }
.lk { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.lk.on { color: var(--down); }
.lk.on svg { fill: currentColor; }
.iv-img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.iv-text { margin: 12px 0; font-size: 13.5px; line-height: 1.75; }
.iv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.iv-com { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.iv-c { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.iv-c b { margin-right: 6px; }
.iv-c p { margin: 3px 0 0; color: var(--text); }
.iv-c .link { margin-left: 8px; font-size: 11px; }
.iv-cform { display: flex; gap: 6px; margin-top: 6px; }
.iv-cform .inp { flex: 1; }
.if-prev { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); min-height: 120px; }
.if-prev img { width: 100%; display: block; }
textarea.inp { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.6; }
.bd-me { margin: 0 12px 10px; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 10px 12px; display: grid; gap: 8px; }
.bd-me > div { display: flex; align-items: baseline; gap: 8px; }
.bd-me b { font-size: 18px; }
.bd-pub { font-size: 12px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.bd-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.bd-row.me { background: var(--brand-bg); }
.bd-row .rk { width: 20px; color: var(--text-3); font-weight: 700; }
.bd-row .sp { flex: 1; }
@media (max-width: 1100px) { .com-side { display: none; } }
@media (max-width: 640px) { .com-feed { grid-template-columns: 1fr; } .com-main { width: 100%; } }

.srv-tag { font-size: 10.5px; color: var(--up); margin-top: 3px; }
.stat-line { font-size: 11px; color: var(--text-2); margin-top: 3px; background: var(--win-2); border-radius: 4px; padding: 2px 6px; display: inline-block; }
.why .seen { background: transparent !important; color: var(--text-3); }
.cases { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 4px; }
.cases b { color: var(--text); font-size: var(--fs-sm); }
.case-t td, .case-t th { height: 22px !important; font-size: 11px; }

.ind-nav button.coba-cat { color: var(--warn); }
.ind-nav button.coba-cat.on { background: rgba(240,185,11,.12); color: var(--warn); }
.field input[type=checkbox], input[type=checkbox] { width: 15px !important; height: 15px !important; min-width: 0; padding: 0; accent-color: var(--brand); vertical-align: -2px; }

.btn.google { width: 100%; justify-content: center; height: 40px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; gap: 10px; margin-bottom: 8px; }
.btn.google:hover { background: #f7f8fa; }

/* ===== 2026-10-21 점검 수정 (screener/scanner/market/레이아웃) ===== */
/* 오른쪽 패널이 꺼지면(스크리너·스캐너·커뮤니티 기본) 레일이 0px 칸에 들어가 화면 위로 겹치던 문제: 칸을 고정한다 */
@media (min-width: 641px) {
  .shell > .view { grid-column: 1; grid-row: 1; }
  .shell > .side { grid-column: 2; grid-row: 1; }
  .shell > .rail { grid-column: 3; grid-row: 1; }
  .shell.side-off { grid-template-columns: minmax(0, 1fr) 0 var(--rail-w); column-gap: 0; }
  .shell.side-off > .rail { margin-left: var(--gap); }
}
/* 관심 목록 열 제목 정렬 버튼 */
.wl-cols button { color: inherit; font: inherit; padding: 0; }
.wl-cols button:hover, .wl-cols button.on { color: var(--text); }
.wl-row .new { margin-left: 4px; }
/* 터치 기기는 마우스를 올릴 수 없으니 '빼기' 버튼을 항상 보인다 */
@media (hover: none) { .wl-row .x { display: grid; opacity: .55; } }
/* 스크리너: '종목' 열 제목·내용 왼쪽 정렬 (코인 이름이 오른쪽으로 밀리던 문제) */
.scr-table .tbl th:nth-child(2), .scr-table .tbl td:nth-child(2) { text-align: left; }
/* 스캐너: 머리줄 버튼이 두 줄로 밀리거나 'N종목'이 세로로 잘리던 문제 */
.scn-list .p-head { flex-wrap: nowrap; gap: 4px; }
.scn-list .p-head h3 { white-space: nowrap; }
.scn-list .p-head .seg button { padding: 3px 7px; }
#scnEx { max-width: 86px; }
.scn-res .p-head { align-items: flex-start; }
.scn-res .p-head > div { min-width: 0; }
.scn-res .p-head > .tag { white-space: nowrap; flex: none; margin-top: 2px; }
.stat-line { display: block; width: fit-content; max-width: 100%; }
/* 화면 분할: 좁은 칸에서 종목 이름이 왼쪽부터 잘리던 문제 (오른쪽을 말줄임) */
.cell-h > * { flex-shrink: 0; }
.cell-h [data-a="sym"] { flex-shrink: 1; min-width: 0; justify-content: flex-start; overflow: hidden; }
.cell-h [data-a="sym"] b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cell-h [data-a="sym"] .dim { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cell-h .num { white-space: nowrap; }
/* 휴대폰 */
@media (max-width: 640px) {
  /* 검색 칸이 동그라미로 짜부라지던 문제: 로고 글자는 숨기고 마크만 */
  .logo { font-size: 0; gap: 0; }
  .search { min-width: 90px; }
  .btn.acct > span:not([class]) { display: none; }
  .btn.acct { padding: 0 9px; }
  /* 로그인하면 버튼이 ghost 로 바뀌는데, 휴대폰은 .top-r .ghost 를 숨겨서 계정 버튼이 통째로 사라졌다 */
  .top-r .btn.acct.ghost { display: inline-flex; }
  /* 스크리너 필터를 한 줄 가로 스크롤로, 안내문은 종목 수만 (표가 화면 절반 이상 가려지던 문제) */
  #scrBar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #scrBar > * { flex-shrink: 0; }
  #scrBar .sp { display: none; }
  .scr-info { flex-wrap: nowrap; overflow: hidden; }
  .scr-info > span:not(:first-child):not(.prog) { display: none; }
}
/* 분할 6·8개: 칸이 좁으니 거래소 이름·등락률을 빼서 종목 이름이 보이게 */
.cell-h [data-a="sym"] .dim { flex-shrink: 50; }
.kc-grid[data-mode="6"] .cell-h [data-a="sym"] .dim, .kc-grid[data-mode="8"] .cell-h [data-a="sym"] .dim { display: none; }
.kc-grid[data-mode="8"] .cell-h .num + .num { display: none; }
/* 스캐너 → 차트로 가져온 '기법 작도' 막대가 거래량 범례를 덮던 문제: 차트 오른쪽 위로 */
.evi-bar { left: auto; bottom: auto; top: 8px; right: 72px; }
/* 스크리너·스캐너·커뮤니티 주소로 처음 들어오면 메인 차트가 display:none(크기 0) 상태로 만들어져
   거래량 등 아래 창이 30px로 찌그러진 채 남던 문제: 숨길 때도 크기는 유지하고 안 보이게만 한다 */
.shell { position: relative; }
#view-chart:not(.on) { display: flex; position: absolute; inset: 0; visibility: hidden; pointer-events: none; z-index: -1; }

/* ===== 트레이딩뷰 맞추기: 헤더 · 축 메뉴 · 이동 창 · 비교 · 리플레이 고르기 (chartui.js · chartview.js · replay.js) ===== */
/* 헤더 오른쪽: 저장 · 설정 · 전체 화면 · 스냅샷은 항상 보이게 */
.chart-head .save-btn { gap: 3px; padding: 0 8px; }
.chart-head .save-btn .lbl { display: inline !important; }
.pop .cu-key { margin-left: auto; padding-left: 18px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 오른쪽 클릭 메뉴 (하위 메뉴는 마우스를 올리거나 누르면 옆으로 펼친다) */
.cu-mw { min-width: 220px; }
.cu-mw > button, .cu-subm button { padding: 6px 10px 6px 6px; }
.cu-mw .cu-ml { white-space: nowrap; }
.cu-mw .cu-ml .dim { color: var(--text-3); margin-left: 4px; font-size: 11px; }
.cu-sub { position: relative; }
.cu-subt { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 4px; cursor: default; }
.cu-subt:hover, .cu-sub.open > .cu-subt { background: var(--hover); }
.cu-arr { margin-left: auto; color: var(--text-3); font-size: 15px; line-height: 1; }
.cu-subm { display: none; position: absolute; left: calc(100% + 4px); top: -4px; min-width: 210px; background: var(--win); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; z-index: 2; }
.cu-sub:hover > .cu-subm, .cu-sub.open > .cu-subm { display: block; }
.cu-flip .cu-subm { left: auto; right: calc(100% + 4px); }
.cu-subm::before { content: ''; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; }
.cu-flip .cu-subm::before { left: auto; right: -8px; }
.cu-scroll { max-height: min(360px, 60vh); overflow: auto; }
/* 범례: 종목 줄도 오른쪽 클릭을 받게 · 비교/거래량 줄 */
.lg-main .lg-sym { pointer-events: auto; }
.lg-cmp, .lg-volov { pointer-events: auto; }
.lg-cmp:hover, .lg-volov:hover { border-color: var(--line-2); background: var(--win) !important; }
.lg-cmp:hover .lg-btns, .lg-volov:hover .lg-btns { display: inline-flex; }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* 시간 단위 메뉴: 사용자 지정 입력 */
.pop .tf-custom { display: flex; gap: 6px; align-items: center; padding: 6px 6px 4px; }
.pop .tf-custom .inp { height: 30px; padding: 0 8px; min-width: 0; }
.pop .tf-custom input { width: 64px; }
.pop .tf-custom select { width: 70px; }
.pop .tf-custom .btn { width: auto; flex: none; justify-content: center; padding: 0 10px; height: 30px; }
/* 종목 비교 */
.pop.cmp-pop { width: 300px; }
.pop .cmp-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; }
.pop .cmp-row span { flex: 1; font-weight: 600; }
.pop .cmp-row button { width: 28px; padding: 4px 0; justify-content: center; color: var(--text-3); }
.pop .cmp-s { padding: 6px 6px 4px; }
.pop .cmp-s .inp { width: 100%; height: 32px; }
.pop .cmp-list { max-height: 300px; overflow: auto; }
.pop .cmp-list button .dim { margin-left: auto; font-size: 11px; }
.pop .cmp-empty { padding: 10px; color: var(--text-3); font-size: var(--fs-sm); }
/* 템플릿 메뉴 */
.pop .cu-tpl-row { display: flex; }
.pop .cu-tpl-row button:first-child { flex: 1; }
.pop .cu-tpl-row .cu-tpl-del { width: 30px; justify-content: center; color: var(--text-3); }
.pop .cu-tpl-empty { padding: 6px 10px; color: var(--text-3); font-size: var(--fs-sm); }
.pop .cu-tpl-new { display: flex; gap: 6px; padding: 4px 6px; }
.pop .cu-tpl-new .inp { flex: 1; height: 30px; min-width: 0; }
.pop .cu-tpl-new .btn { width: auto; flex: none; padding: 0 12px; justify-content: center; }
.cs-sel { height: 32px; padding: 0 8px; min-width: 150px; }
/* 이동 창 (Alt+G) — 화면 가운데 */
#gotoOv { align-items: center; padding-top: 0; }
.modal.goto-modal { width: min(420px, calc(100vw - 32px)); }
.goto-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.goto-tabs button { padding: 10px 0 9px; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.goto-tabs button.on { color: var(--text); border-bottom-color: var(--brand-2); }
.goto-b { padding: 14px 16px 6px; display: grid; gap: 10px; }
.goto-f { display: grid; grid-template-columns: 44px 1fr 136px; align-items: center; gap: 8px; }
.goto-f > span { color: var(--text-2); font-size: var(--fs-sm); }
.goto-f .inp { height: 36px; min-width: 0; }
.goto-f:not(:has(input[type="time"])) { grid-template-columns: 44px 1fr; }
.goto-note { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
.goto-tz { font-size: 12px; }
/* 리플레이: 시작 봉 고르기 선 */
.replay-ui .rp-pick { position: absolute; inset: 0; display: none; pointer-events: none; }
.rp-line { position: absolute; top: 0; width: 0; border-left: 2px solid var(--brand-2); }
.rp-shade { position: absolute; top: 0; background: color-mix(in srgb, var(--text-3) 16%, transparent); }
.rp-tip { position: absolute; top: 10px; padding: 3px 8px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.replay-bar [data-r="pick"].on { border-color: var(--brand-2); color: var(--brand-2); }
.replay-ui.picking .replay-mark { opacity: .04; }
@media (max-width: 640px) {
  .goto-f { grid-template-columns: 40px 1fr 124px; }
  .pop.cmp-pop { width: min(300px, calc(100vw - 16px)); }
}
/* 헤더가 좁을 때: 아이디어 · 화면 분할 · 트레이딩 · 현재가는 '더 보기'로 (저장 · 설정 · 전체 화면 · 스냅샷 자리 확보) */
/* 아이디어 · 레이아웃 셋업은 트레이딩뷰처럼 자리가 있으면 보이고, 넘치면 단계(f4)로 '더 보기'에 */
@media (max-width: 1640px) { .shell:not(.side-off) #tradeBtn, .shell:not(.side-off) #lastPx { display: none; } }
@media (min-width: 641px) and (max-width: 1300px) { #tradeBtn, #lastPx { display: none; } }

/* ===== 트레이딩뷰 1:1 맞추기 2차 (chartui.js · kchart.js · replay.js) ===== */
/* 가격축: 현재가 + 카운트다운 한 상자 (가격축 폭과 같게) · 라벨 글자 12 */
#countdown { display: none !important; }
.ax-tags .ax-tag { font-size: 12px; }
.ax-last { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; color: #fff; border-radius: 2px; overflow: hidden; font-family: var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ax-last b { font-weight: 500; font-size: 12px; line-height: 17px; }
.ax-last i { font-style: normal; font-size: 11px; line-height: 14px; opacity: .92; margin-top: -1px; }
.ax-tags .under { visibility: hidden; } /* 십자선 가격 라벨이 보이게 */
/* 범례: '시82,193.1' 처럼 붙여 쓰기 · 마켓 상태 점 · 마우스를 올리면 값 자리에 단추 (값이 밀리지 않게) */
#kc .lg-ohlc { gap: 0 8px; }
#kc .lg-ohlc > span { display: inline-flex; }
#kc .lg-ohlc i { margin-right: 1px; }
#kc .lg-ohlc b { margin-right: 0; }
#kc .lg-t { display: inline-flex; align-items: center; gap: 6px; }
#kc .lg-t .ci { width: 16px; height: 16px; }
.lg-mkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #089981; box-shadow: 0 0 0 3px rgba(8, 153, 129, .2); margin: 0 2px; flex: none; }
.lg-dch { display: inline-flex; gap: 3px; } .lg-dch i { font-style: normal; color: var(--text-2); } .lg-dch b { font-weight: 500; }
#kc .lg-ind:hover .lg-vals, #kc .lg-ind.act .lg-vals, #kc .lg-volov:hover .lg-vals, #kc .lg-volov.act .lg-vals { display: none; }
#kc .lg-volov.act .lg-btns { display: inline-flex; }
#kc .lg-volov.off .lg-name { color: var(--text-3); }
#kc .lg-vals b:empty { display: none; }
/* 아래 가운데 이동 단추 (− + ‹ › 초기화) */
.kc-nav { position: absolute; z-index: 6; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.kc-nav.show, .kc[data-nav="always"] .kc-nav { opacity: 1; pointer-events: auto; }
.kc[data-nav="never"] .kc-nav { display: none; }
.kc-nav button { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--win); color: var(--text-2); border: 1px solid var(--line-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.kc-nav button:hover { color: var(--text); background: var(--win-2); }
.kc-nav .cu-ico { width: 16px; height: 16px; }
.kc-nav [data-n="left"] { margin-left: 4px; }
.kc-nav [data-n="reset"] { margin-left: 4px; }
@media (hover: none) { .kc-nav { display: none; } }
/* 아래 창 단추 (위로 · 아래로 · 최대화 · 접기 · 지우기) */
.pane-ctl-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pane-ctl { position: absolute; display: flex; gap: 1px; padding: 1px; border-radius: 5px; background: color-mix(in srgb, var(--win) 85%, transparent); opacity: 0; transition: opacity .12s; }
.pane-ctl.show, .kc[data-panebtn="always"] .pane-ctl { opacity: 1; pointer-events: auto; }
.kc[data-panebtn="never"] .pane-ctl { display: none; }
.pane-ctl button { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; color: var(--text-2); }
.pane-ctl button:hover { background: var(--hover); color: var(--text); }
.pane-ctl button[data-pc="del"]:hover { color: var(--down); }
.pane-ctl .cu-ico { width: 14px; height: 14px; }
@media (hover: none) { .pane-ctl { opacity: 1; pointer-events: auto; } }
/* 시간 단위 메뉴 (트레이딩뷰) */
.pop.tf-pop { min-width: 220px; max-height: min(78vh, 640px); overflow: auto; }
.pop .tf-add { gap: 8px; font-weight: 600; background: var(--win-2); margin-bottom: 4px; }
.pop .tf-add .cu-ico { width: 16px; height: 16px; }
.pop .tf-sec { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px; font-size: 11px; color: var(--text-3); cursor: pointer; border-top: 1px solid var(--line); margin-top: 4px; user-select: none; }
.pop .tf-sec:hover { color: var(--text); }
.pop .tf-sec .cu-ico { width: 13px; height: 13px; }
.pop .tf-row > button:first-child { padding: 7px 10px; }
.pop .tf-row.on > button:first-child { background: var(--brand-bg); color: var(--text); font-weight: 600; }
.pop .tf-star, .pop .tf-x { width: 28px; text-align: center; cursor: pointer; color: var(--text-3); visibility: hidden; font-size: 13px; }
.pop .tf-row:hover .tf-star, .pop .tf-row:hover .tf-x, .pop .tf-star.on { visibility: visible; }
.pop .tf-star.on { color: var(--warn); }
.pop .tf-star:hover { color: var(--warn); } .pop .tf-x:hover { color: var(--down); }
.hbtn.tf-mob { display: none; gap: 3px; }
/* 거래량 설정 */
.pop.vs-pop { width: 270px; }
.pop .vs { display: grid; gap: 4px; padding: 2px 6px 6px; }
.pop .vs-row { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-sm); }
.pop .vs-row > span:first-of-type { flex: 1; }
.pop .vs-row input[type=number] { width: 64px; height: 28px; padding: 0 6px; text-align: right; }
.pop .vs-sw { display: inline-flex; gap: 6px; }
.pop .vs .cs-sw { width: 34px; height: 26px; padding: 0; display: grid; place-items: center; }
.pop .vs .seg button { width: auto; padding: 3px 8px; }
/* 레이아웃 열기 · 데이터 표 */
.pop.ly-pop { min-width: 260px; max-height: 60vh; overflow: auto; }
.pop.ly-pop .cu-tpl-row button:first-child { justify-content: space-between; }
#tblOv { align-items: center; padding-top: 0; }
.modal.tbl-modal { width: min(760px, calc(100vw - 24px)); max-height: 82vh; }
.tbl-cap { font-size: 12px; }
.tbl-b .tbl td, .tbl-b .tbl th { height: 28px; }
.cs-note { font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
/* 리플레이: 워터마크는 캔들을 가리지 않게 오른쪽 위 작은 표시로 · 속도/시간 단위 드롭다운 */
.replay-ui .replay-mark { left: auto; right: 84px; top: 8px; transform: none; display: inline-flex; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; opacity: .85; color: var(--text-2); background: var(--win-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }
.replay-ui.picking .replay-mark { opacity: .85; }
.replay-bar .rp-dd { height: 28px; padding: 0 7px; gap: 3px; font-size: var(--fs-sm); }
.replay-bar .rp-start { gap: 4px; }
.replay-bar .rp-start.on { border-color: var(--brand-2); color: var(--brand-2); }
.replay-bar { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
/* 휴대폰 390px: 시간 단위는 '4시 ▾' 하나, 차트 종류 · 알림 · 스냅샷 · 설정은 ⋯ 메뉴로, 아래 막대는 기간만 옆으로 밀기 */
@media (max-width: 640px) {
  .chart-head { overflow: hidden; gap: 0; padding: 0 4px; }
  .chart-head #tfFav, .chart-head #tfMore, .chart-head #typeBtn, .chart-head #alertBtn, .chart-head #shotBtn, .chart-head .vsep { display: none; }
  .chart-head .hbtn.tf-mob { display: inline-flex; color: var(--text); font-weight: 700; }
  .chart-head #moreBtn { display: inline-flex; }
  .chart-head #indBtn .lbl { display: none; }
  .chart-head .sym-btn { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .chart-head .sym-btn b { font-size: 14px; }
  .chart-head .sym-btn > div { min-width: 0; overflow: hidden; }
  .chart-head .sp { flex: 1 1 0; min-width: 0; }
  .chart-foot { overflow: hidden; padding: 0 4px; }
  .chart-foot #ranges { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .chart-foot #ranges::-webkit-scrollbar { display: none; }
  .chart-foot .sp { display: none; }
  .chart-foot > [data-axis] { flex-shrink: 0; }
  .replay-ui .replay-mark { right: 64px; }
}
@media (hover: none) { .pop .tf-star, .pop .tf-x { visibility: visible; } }

/* ===== 차트 작업 영역 색 (변수 이름 --tv-* 는 예전 그대로, 값은 코바) =====
   10/27 매니저 피드백 · 디자인 점검: 예전엔 트레이딩뷰 무채색(#000 · #131313)과 트뷰 파랑(#2962ff)을 그대로 써서
   위쪽 코바 남색 메뉴와 색온도가 갈라졌고 '경쟁사처럼 보인다'는 인상을 줬다 → 코바 남색 한 계열 + 코바 파랑 하나로 */
:root {
  --tv-panel: #0b1019; --tv-gap: #070a12; --tv-menu: #111827; --tv-dialog: #111827; --tv-hover: #182133; --tv-soft: #121927;
  --tv-line: #1c2434; --tv-line-2: #2a3449; --tv-text: #e6e9f0; --tv-btn: #b3bccc; --tv-text-3: #7d879c; --tv-accent: #4561ff;
  --tv-grid: #121a28; --tv-grid-dot: #253046; --tv-axis: #a7b0c2; --tv-ok-bg: #1b3df5; --tv-ok-fg: #fff; --tv-cancel: #e6e9f0; --tv-tpl: #2a3449; --tv-chk: #4561ff;
  --tv-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] {
  --tv-panel: #fff; --tv-gap: #ebebeb; --tv-menu: #fff; --tv-dialog: #fff; --tv-hover: #f2f2f2; --tv-soft: #f5f5f5;
  --tv-line: #e0e0e0; --tv-line-2: #d1d1d1; --tv-text: #000; --tv-btn: #000; --tv-text-3: #6a6a6a; --tv-accent: #1b3df5;
  --tv-grid: #f3f3f3; --tv-grid-dot: #d1d1d1; --tv-axis: #000; --tv-ok-bg: #1b3df5; --tv-ok-fg: #fff; --tv-cancel: #000; --tv-tpl: #dbdbdb; --tv-chk: #1b3df5;
  --tv-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .16);
}
/* 차트 화면: 차트 창은 늘, 오른쪽 패널 · 레일은 차트 화면이 열려 있을 때 */
#view-chart, .shell:has(> #view-chart.on) > .side, .shell:has(> #view-chart.on) > .rail, .pop, .overlay .modal, .cu-tip {
  --win: var(--tv-panel); --win-2: var(--tv-soft); --hover: var(--tv-hover); --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); --grid: var(--tv-grid); --axis-text: var(--tv-axis);
}
.pop, .overlay .modal { --win: var(--tv-menu); }
#view-chart { --brand: var(--tv-accent); --brand-2: var(--tv-accent); --brand-bg: color-mix(in srgb, var(--tv-accent) 16%, transparent); }
.shell:has(> #view-chart.on) { background: var(--tv-gap); }
.shell:has(> #view-chart.on) .win { border-color: transparent; }
#chartWin { background: var(--tv-gap); }
#chartWin .chart-head, #chartWin .chart-body, #chartWin .chart-foot { background: var(--tv-panel); }
#chartWin .chart-head { border-bottom: 4px solid var(--tv-gap); }
#chartWin .draw-bar { border-right: 4px solid var(--tv-gap); width: 48px; }
#chartWin .chart-foot { border-top: 4px solid var(--tv-gap); }
#kc { background: var(--tv-panel); }
/* 글자: 헤더 · 아래 막대 단추 14/400, 범례 제목 16/400, 값 · 지표 줄 13/400 */
#chartWin .chart-head .hbtn, #chartWin .chart-foot .hbtn { font-size: 14px; font-weight: 400; color: var(--tv-btn); }
#chartWin .chart-head .hbtn:hover, #chartWin .chart-foot .hbtn:hover { color: var(--tv-text); background: var(--tv-hover); }
#chartWin .chart-head .hbtn.on { color: var(--tv-accent); }
#chartWin .chart-foot .hbtn.on { color: var(--tv-text); background: var(--tv-hover); }
#chartWin .chart-foot .clock { font-size: 14px; color: var(--tv-btn); }
@media (min-width: 641px) { #chartWin .chart-head .hbtn.tl .lbl { display: inline !important; } }
#chartWin .chart-head .hbtn.tl { gap: 6px; padding: 0 8px; }
#kc .lg { font-size: 13px; color: var(--tv-text); }
#kc .lg-t { font-size: 16px; color: var(--tv-text); }
#kc .lg-t b { font-weight: 400; color: var(--tv-text); }
#kc .lg-t:hover b { color: var(--tv-text); }
#kc .lg-ohlc i, #kc .lg-vol i, #kc .lg-dch i { color: var(--tv-text); }
#kc .lg-ohlc b, #kc .lg-ch, #kc .lg-vol b, #kc .lg-vals b, #kc .lg-dch b { font-weight: 400; }
#kc .lg-name { font-weight: 400; color: var(--tv-text); }
#kc .lg-args { color: var(--tv-text); }
#kc .lg-row { min-height: 22px; }
/* 메뉴 (트레이딩뷰: 테두리 없음 · 줄 32px · 글자 14) */
.pop { background: var(--tv-menu); border: 0; border-radius: 6px; box-shadow: var(--tv-shadow); padding: 6px 0; color: var(--tv-btn); font-size: 14px; max-width: calc(100vw - 8px); }
.pop button { padding: 7px 12px; min-height: 32px; font-size: 14px; line-height: 18px; border-radius: 0; color: inherit; }
.pop .cu-pal button, .pop .emo-grid button, .pop .pgrid button, .pop .cs-sw, .pop .tf-row button.star, .pop .cmp-row button, .pop .cu-tpl-del, .pop .btn { min-height: 0; }
.pop .btn { border-radius: 8px; }
.pop button:hover, .pop .tf-row:hover, .pop .cu-subt:hover, .pop .cu-sub.open > .cu-subt { background: var(--tv-hover); color: var(--tv-text); }
.pop button.on, .pop .tf-row.on > button:first-child, .pop .cu-type.on { background: var(--tv-hover); color: var(--tv-text); }
.pop .plabel { font-size: 12px; color: var(--tv-text-3); padding: 6px 12px 4px; }
.pop hr, .pop hr.cu-hr { border: 0; border-top: 1px solid var(--tv-line); margin: 6px 0; }
.pop .cu-key, .pop .key { color: var(--tv-text-3); font-size: 12px; }
.pop .ck { color: var(--tv-text); }
.pop .cu-subt { min-height: 32px; padding: 0 12px; border-radius: 0; }
.cu-subm { background: var(--tv-menu); border: 0; border-radius: 6px; box-shadow: var(--tv-shadow); padding: 6px 0; }
.pop .tf-sec { color: var(--tv-text-3); font-size: 12px; border-top-color: var(--tv-line); }
/* 대화 상자 (트레이딩뷰: 바탕과 구분되는 #131313 · 흰 확인 단추 · 흰 체크 상자) */
.overlay .modal { background: var(--tv-dialog); border: 0; border-radius: 8px; box-shadow: var(--tv-shadow); color: var(--tv-text); }
.overlay .modal-h { border-bottom-color: transparent; }
.overlay .modal-h h3 { font-size: 20px; font-weight: 600; }
.overlay:not(#loginOv):not(#unlockOv) .modal .btn.primary, .pop .btn.primary { background: var(--tv-ok-bg); color: var(--tv-ok-fg); border: 1px solid var(--tv-ok-bg); border-radius: 8px; font-weight: 400; font-size: 14px; }
.overlay:not(#loginOv):not(#unlockOv) .modal .btn.primary:hover, .pop .btn.primary:hover { filter: none; opacity: .88; }
.overlay .modal .btn.line, .pop .btn.line { border-color: var(--tv-tpl); border-radius: 8px; font-weight: 400; font-size: 14px; }
.overlay .modal .cs-foot .btn { height: 34px; padding: 0 14px; }
.overlay .modal .cs-foot [data-act="cancel"] { border-color: var(--tv-cancel); color: var(--tv-text); }
.overlay .modal input[type=checkbox], .pop input[type=checkbox] { accent-color: var(--tv-chk); }
.overlay .modal .inp, .overlay .modal select.inp, .pop .inp { background: transparent; border-color: var(--tv-line-2); }
.overlay .modal select.inp option { background: var(--tv-dialog); color: var(--tv-text); }
/* 차트 설정 창 */
.cs-modal .cs-body { font-size: 14px; }
.cs-modal .cs-nav button { font-weight: 400; font-size: 14px; color: var(--tv-text); }
.cs-modal .cs-nav button.on { background: var(--tv-hover); color: var(--tv-text); font-weight: 600; }
.cs-modal .cs-nav button.on .cu-ico { color: var(--tv-text); }
.cs-modal .cs-nav { border-right: 0; }
.cs-modal .cs-sub { font-size: 11px; color: var(--tv-text-3); font-weight: 400; letter-spacing: .04em; margin-top: 18px; }
.cs-modal .cs-foot { border-top: 1px solid var(--tv-line); }
.cs-modal .seg { background: transparent; border: 1px solid var(--tv-line-2); border-radius: 8px; }
.cs-modal .seg button.on { background: var(--tv-hover); box-shadow: none; }
.cs-q { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--tv-hover); color: var(--tv-text-3); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; flex: none; }
.cs-q:hover { color: var(--tv-text); }
.cs-modal .cs-chk > span, .cs-modal .cs-lab { display: inline-flex !important; align-items: center; }
.cs-sel2 { display: inline-flex; gap: 8px; align-items: center; }
.cs-range { display: inline-flex; align-items: center; gap: 8px; }
.cs-range input[type=range] { width: 160px; accent-color: var(--tv-chk); }
/* 스케일 모드 단추(% · log · 자동) 보이기: 설정 '스케일 모드(A 및 L)' */
#chartWin[data-scalemodes="never"] .chart-foot [data-axis] { display: none; }
#chartWin[data-scalemodes="hover"] .chart-foot [data-axis] { opacity: 0; transition: opacity .12s; }
#chartWin[data-scalemodes="hover"]:hover .chart-foot [data-axis] { opacity: 1; }
/* 아래 가운데 이동 단추 */
.kc-nav button { background: var(--tv-menu); border-color: transparent; color: var(--tv-btn); }
/* 좁은 휴대폰: 시간 단위 · 차트 종류 메뉴는 아래에서 올라오는 시트 (chartui.js 가 .sheet 를 붙인다) */
@media (max-width: 479px) {
  .pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; min-width: 0 !important; max-width: none; max-height: 70vh !important; overflow: auto;
    border-radius: 12px 12px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
  .pop.sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--tv-line-2); margin: 2px auto 8px; }
  .pop.sheet button { min-height: 44px; }
  body:has(.pop.sheet.on)::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 89; }
}
/* 오른쪽 클릭 메뉴 폭 (트레이딩뷰 260~420px) */
.cu-mw { min-width: 260px; }
.pop .cu-cm { min-width: 300px; }
.pop .cu-cm button .cu-key { margin-left: auto; padding-left: 24px; }
.pop .cu-cm button .ico { width: 18px; height: 18px; margin-right: 4px; flex: none; color: var(--tv-btn); }
.pop .cu-cm button:disabled { opacity: .4; }
.cu-mw .cu-ratio { margin-left: auto; padding-left: 16px; color: var(--tv-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* 헤더 맞추기 (chartui.js fitHead): 넘치면 덜 중요한 것부터 단계별로. 즐겨찾기 인터벌은 숨기지 않는다 (트레이딩뷰).
   f1 펀딩 · f2 고가/저가 · f3 나머지 통계 · f4 트레이딩 · 아이디어 · 분할 · 현재가 → 더 보기
   f5 지표/얼러트/리플레이 글자 (아이콘만) · f6 집중 모드 → 더 보기 · 그래도 넘치면 .scroll: 옆으로 밀고 양끝에 ‹ › 화살표 */
#chartWin .chart-head.f1 .stat.s2, #chartWin .chart-head.f2 .stat.s3, #chartWin .chart-head.f3 .stat { display: none; }
#chartWin .chart-head.f4 #tradeBtn, #chartWin .chart-head.f4 #lastPx, #chartWin .chart-head.f6 #ideaBtn { display: none; }
#chartWin .chart-head.f4 .h-more { display: inline-flex; }
#chartWin .chart-head.f5 .hbtn.tl .lbl { display: none !important; }
#chartWin .chart-head.f6 .h-extra { display: none; }
/* 휴대폰: 범례가 화면을 덜 가리게 (제목 14 · 값 12) */
@media (max-width: 640px) { #kc .lg { font-size: 12px; } #kc .lg-t { font-size: 14px; } #kc .lg-row { min-height: 19px; } }
.overlay .modal.cs-modal { width: min(750px, calc(100vw - 32px)); }

/* ===== 트레이딩뷰 1:1 맞추기 4차 (헤더 · 메뉴 · 대화 상자 · 축) — kr.tradingview.com 에서 잰 값 ===== */
/* 헤더 38px · 아래 막대 38px (데스크톱) */
@media (min-width: 641px) { #chartWin .chart-head { height: 38px; } #chartWin .chart-foot { height: 38px; } }
/* 헤더는 오른쪽 패널 · 레일 위까지 화면 폭 전체 (트레이딩뷰). 패널이 열려도 헤더 폭은 그대로라 즐겨찾기 인터벌이 숨지 않는다. */
@media (min-width: 641px) {
  :root { --hh: 38px; }
  .shell:has(> #view-chart.on) { padding-top: calc(var(--hh) + 2 * var(--gap)); }
  #chartWin:not(:fullscreen) > .chart-head {
    position: absolute; z-index: 30; top: calc(-1px - var(--hh) - var(--gap)); left: -1px; width: calc(100vw - 2 * var(--gap));
    border-bottom: 0; border-radius: var(--r);
  }
  /* 화면 폭 media 규칙으로 숨기던 것은 되살리고 fitHead 단계에만 맡긴다 */
  #chartWin .chart-head .stat { display: grid; flex-shrink: 0; overflow: visible; }
  #chartWin .chart-head #ideaBtn, #chartWin .chart-head #layoutBtn, #chartWin .chart-head #tradeBtn { display: inline-flex; }
  #chartWin .chart-head #lastPx { display: inline-block; }
  #chartWin .chart-head .h-extra { display: inline-flex; }
  #chartWin .chart-head .h-more { display: none; }
  #chartWin .chart-head.f4 .h-more { display: inline-flex; }
  #chartWin .chart-head.f1 .stat.s2, #chartWin .chart-head.f2 .stat.s3, #chartWin .chart-head.f3 .stat { display: none; }
  #chartWin .chart-head.f4 #tradeBtn, #chartWin .chart-head.f4 #lastPx, #chartWin .chart-head.f6 #ideaBtn { display: none; }
  #chartWin .chart-head.f6 .h-extra { display: none; }
}
/* 즐겨찾기 인터벌: 글자 폭 + 좌우 6px (1분 33 · 15분 41 · 날 26px) · 펼침 단추 24px */
#chartWin .chart-head #tfFav .hbtn { padding: 0 6px; min-width: 26px; }
#chartWin .chart-head #tfMore { width: 24px; min-width: 24px; padding: 0; }
/* 고른 인터벌: 헤더는 #2B2B2B 알약 + 흰 글자 (밝은 테마는 #EBEBEB + 검은 글자) */
#chartWin .chart-head #tfFav .hbtn.on { background: #2b2b2b; color: #fff; }
:root[data-theme="light"] #chartWin .chart-head #tfFav .hbtn.on { background: #ebebeb; color: #000; }
/* 헤더가 넘칠 때 (≤1024px): 옆으로 밀고 양끝에 화살표 (트레이딩뷰) */
#chartWin .chart-head.scroll { overflow-x: auto; scrollbar-width: none; }
#chartWin .chart-head.scroll::-webkit-scrollbar { display: none; }
#chartWin .chart-head .h-arr { display: none; position: sticky; z-index: 2; flex: none; width: 28px; height: 100%; align-self: stretch; place-items: center; color: var(--tv-btn); }
#chartWin .chart-head.scroll .h-arr.show { display: grid; }
#chartWin .chart-head .h-arr.r { right: 0; margin-left: -28px; background: linear-gradient(90deg, transparent, var(--tv-panel) 40%); }
#chartWin .chart-head .h-arr.l { left: 0; margin-right: -28px; background: linear-gradient(270deg, transparent, var(--tv-panel) 40%); }
#chartWin .chart-head .h-arr:hover { color: var(--tv-text); }
#chartWin .chart-head .h-arr .cu-ico { width: 18px; height: 18px; }

/* 메뉴: 그림자 한 겹 (트레이딩뷰 0 2px 4px) */
.pop, .cu-subm { box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
:root[data-theme="light"] .pop, :root[data-theme="light"] .cu-subm { box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
/* 인터벌 메뉴: 폭 187 · 묶음 제목 24px */
.pop.tf-pop { min-width: 0; width: 187px; }
.pop.tf-pop .tf-sec { height: 24px; padding: 0 12px; margin-top: 4px; }
.pop.tf-pop .tf-add { margin: 0 0 2px; }
.pop.tf-pop .tf-custom input { width: 52px; }
.pop.tf-pop .tf-custom select { width: 58px; }
/* 차트 종류 메뉴: 폭 246 · 줄 40px · 6 묶음 */
.pop.cu-types { min-width: 0; width: 246px; }
.pop.cu-types .cu-type { min-height: 40px; height: 40px; padding: 0 12px; }
/* 메뉴 안에서 고른 것: 흰 알약 + 검은 글자 (밝은 테마는 반대) */
.pop .tf-row.on, .pop.cu-types .cu-type.on { background: #fff; color: #000; border-radius: 6px; }
.pop .tf-row.on > button:first-child, .pop .tf-row.on:hover > button:first-child { background: transparent; color: #000; font-weight: 400; }
.pop .tf-row.on:hover, .pop.cu-types .cu-type.on:hover { background: #fff; color: #000; }
.pop .tf-row.on .tf-star:not(.on), .pop .tf-row.on .tf-x { color: #555; }
:root[data-theme="light"] .pop .tf-row.on, :root[data-theme="light"] .pop.cu-types .cu-type.on,
:root[data-theme="light"] .pop .tf-row.on:hover, :root[data-theme="light"] .pop.cu-types .cu-type.on:hover { background: #000; color: #fff; }
:root[data-theme="light"] .pop .tf-row.on > button:first-child { color: #fff; }
:root[data-theme="light"] .pop .tf-row.on .tf-star:not(.on), :root[data-theme="light"] .pop .tf-row.on .tf-x { color: #bbb; }

/* 키보드로 움직일 때 보이는 초점 테두리 (트레이딩뷰: 파란 2px) */
#view-chart :is(button, [role="button"], a, input, select):focus-visible,
.pop :is(button, [role="button"], input, select):focus-visible,
.overlay .modal :is(button, [role="button"], a, input, select):focus-visible,
.side :is(button, [role="button"], a):focus-visible, .rail button:focus-visible {
  outline: 2px solid var(--tv-accent); outline-offset: -2px; border-radius: 4px;
}

/* 대화 상자는 화면 세로 가운데쯤 (트레이딩뷰: 900px 높이에서 지표 131 · 설정 169 · 심볼 찾기 110 · 비교 168) */
@media (min-width: 641px) {
  .overlay:not(#loginOv):not(#unlockOv):not(#ideaView) { align-items: center; padding-top: 0; }
}
/* 가격축 현재가 상자 글자: 축 글자와 같은 Pretendard */
.ax-last, .ax-last b, .ax-last i, .ax-tags .ax-tag { font-family: var(--font); }
/* 시간축 오른쪽 클릭 메뉴 폭 151 · 시계 타임존 목록 */
.pop.cu-tmenu .cu-mw { min-width: 0; width: 151px; }
.pop .cu-tzlist { min-width: 240px; max-height: min(60vh, 520px); overflow: auto; }
.pop .cu-mw .ck .cu-ico { width: 16px; height: 16px; display: block; color: var(--tv-btn); }
/* 차트 메뉴 '바이/셀 … 리밋' 로 연 주문 칸: 고른 쪽 단추 표시 */
#tradeForm .btn.pick { box-shadow: 0 0 0 2px var(--tv-accent); }
/* '가기' 창 (트레이딩뷰 302px · 달력) */
.modal.goto-modal { width: min(302px, calc(100vw - 24px)); max-height: none; }
.goto-modal .modal-h { padding: 16px 20px 8px; }
.goto-modal .goto-tabs { gap: 24px; padding: 0 20px; border-bottom: 0; }
.goto-modal .goto-tabs button { padding: 8px 0 7px; font-size: 15px; font-weight: 600; color: var(--tv-text-3); border-bottom-width: 3px; }
.goto-modal .goto-tabs button.on { color: var(--tv-text); border-bottom-color: var(--tv-text); }
.goto-modal .goto-b { padding: 16px 20px 4px; gap: 8px; border-top: 1px solid var(--tv-line); margin: 0 20px; padding-left: 0; padding-right: 0; }
.modal.goto-modal .goto-f { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; }
.modal.goto-modal .goto-f:not(:has(input + input)) { grid-template-columns: minmax(0, 1fr); }
.goto-modal .goto-f .inp { height: 34px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.goto-cal { padding: 8px 20px 12px; }
.goto-cal .gc-h { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.goto-cal .gc-h b { font-weight: 400; font-size: 15px; color: var(--tv-text); }
.goto-cal .gc-h button { width: 28px; height: 28px; border-radius: 6px; font-size: 20px; line-height: 1; color: var(--tv-text); }
.goto-cal .gc-h button:hover { background: var(--tv-hover); }
.goto-cal .gc-h button:disabled { color: var(--tv-text-3); opacity: .5; cursor: default; background: none; }
.goto-cal .gc-w, .goto-cal .gc-d { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.goto-cal .gc-w span { font-size: 13px; color: var(--tv-text-3); height: 28px; line-height: 28px; background: var(--tv-soft); }
.goto-cal .gc-d { row-gap: 6px; margin-top: 8px; }
.goto-cal .gc-d button { height: 32px; width: 32px; justify-self: center; border-radius: 6px; font-size: 14px; color: var(--tv-text); }
.goto-cal .gc-d button:hover:not(:disabled) { background: var(--tv-hover); }
.goto-cal .gc-d button:disabled { color: var(--tv-text-3); opacity: .55; cursor: default; }
.goto-cal .gc-d button.on { background: var(--tv-text); color: var(--tv-panel); }
.goto-modal .cs-foot { padding: 12px 20px 16px; gap: 8px; border-top: 1px solid var(--tv-line); }
/* '심볼 찾기' · '심볼 비교' 창 (트레이딩뷰 840 × 680 / 565) */
.modal.s-modal { width: min(840px, calc(100vw - 32px)); height: min(680px, calc(100vh - 32px)); max-height: none; }
.modal.s-modal.s-cmp { height: min(565px, calc(100vh - 32px)); }
.s-modal .modal-h { padding: 16px 20px 12px; }
.s-modal .modal-s { padding: 0 20px 8px; border-bottom: 1px solid var(--tv-line); }
.s-modal .s-box { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--tv-line-2); border-radius: 8px; }
.s-modal .s-box:focus-within { border-color: var(--tv-accent); }
.s-modal .s-box .ico { width: 18px; height: 18px; color: var(--tv-btn); flex: none; }
.s-modal .s-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; font-size: 16px; color: var(--tv-text); outline: none; }
.s-modal .s-clr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--tv-text-3); }
.s-modal .s-clr:hover { color: var(--tv-text); background: var(--tv-hover); }
.s-modal .s-clr .ico { width: 14px; height: 14px; }
.s-modal .ex-chips { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 12px; }
.s-modal .ex-chips .sp { flex: 1; }
.s-modal .s-pill { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--tv-soft); color: var(--tv-text); font-size: 14px; white-space: nowrap; }
.s-modal .s-pill:hover { background: var(--tv-hover); }
.s-modal .s-pill.on { background: var(--tv-text); color: var(--tv-panel); }
.s-modal .s-exsel { height: 30px; width: auto; padding: 0 8px; border-radius: 8px; font-size: 13px; }
.s-modal .s-added { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.s-modal .s-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px; background: var(--tv-soft); color: var(--tv-text); }
.s-modal .s-chip i { width: 8px; height: 8px; border-radius: 50%; }
.s-modal .s-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--tv-text-3); }
.s-modal .s-chip button:hover { color: var(--tv-text); background: var(--tv-hover); }
.s-modal .s-row { grid-template-columns: 170px minmax(0, 1fr) 96px 70px 70px 150px 28px; height: 40px; padding: 0 12px 0 20px; gap: 10px; border-bottom: 1px solid var(--tv-line); font-size: 14px; }
.s-modal .s-row.s-head { height: 28px; font-size: 12px; border-bottom: 1px solid var(--tv-line); }
.s-modal .s-row .sym { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s-modal .s-row .sym b { font-weight: 400; color: var(--tv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-modal .s-row .sym b em { font-style: normal; color: var(--tv-accent); }
.s-modal .s-row .s-desc { text-align: left; color: var(--tv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-modal .s-row .s-src { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; white-space: nowrap; }
.s-modal .s-row .s-src .dim { font-size: 12px; }
.s-modal .s-row .s-src b { font-weight: 400; color: var(--tv-text); }
.s-modal .s-row:hover, .s-modal .s-row.hl { background: var(--tv-hover); }
.s-modal .s-row.s-head:hover { background: none; }
@media (max-width: 640px) {
  .modal.s-modal, .modal.s-modal.s-cmp { height: calc(100vh - 24px); }
  .s-modal .s-row { grid-template-columns: minmax(0, 1fr) 84px 64px 28px; padding: 0 10px; }
  .s-modal .s-row > :nth-child(2), .s-modal .s-row > :nth-child(5), .s-modal .s-row > :nth-child(6) { display: none; }
  .s-modal .ex-chips { overflow-x: auto; scrollbar-width: none; }
}
/* 설정 창: 컨트롤은 이름 바로 옆 (오른쪽 끝 정렬 X) · 색 견본 28px · 템플릿 꺾쇠 */
.cs-modal .cs-row:not(.cs-chk) { justify-content: flex-start; }
.cs-modal .cs-row:not(.cs-chk) > .cs-lab { flex: none; width: 168px; }
.cs-modal .cs-sw { width: 28px; height: 28px; border-radius: 6px; }
.cs-modal .cs-sw i { width: 20px; height: 20px; border-radius: 4px; }
.cs-modal .cs-tpl { gap: 4px; padding: 0 8px 0 12px; }
.cs-modal .cs-tpl .cu-ico { width: 16px; height: 16px; }
/* 오른쪽 도구 막대도 패널 바탕 (트레이딩뷰: 흰/검은 패널, 사이는 #EBEBEB / #1A1A1A 틈) */
.shell:has(> #view-chart.on) > .rail { background: var(--tv-panel); border-radius: var(--r); }
.ax-last b { font-weight: 400; } /* 축 눈금 글자와 같은 굵기 */

/* ===== 트레이딩뷰 1:1 맞추기 5차 ===== */
/* 사이트 메뉴 막대: 861~1440px 어느 폭에서도 글자가 줄바꿈되거나 겹치지 않게. 좁아지면 덜 중요한 것부터 접는다
   (≤1360 로고 부제 · ≤1240 Ctrl+K · ≤1200 검색은 돋보기 단추만 + '코바인사이트' 링크 숨김 · ≤1000 간격 줄임) */
@media (min-width: 641px) {
  .topbar > * { flex-shrink: 0; }
  .topbar > .search { flex: 0 1 340px; min-width: 160px; overflow: hidden; white-space: nowrap; }
  .search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav { flex-shrink: 0; }
  .nav a { white-space: nowrap; }
  .top-r { flex-shrink: 0; }
  .btn.acct .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 641px) and (max-width: 1360px) { .logo small { display: none; } }
@media (min-width: 641px) and (max-width: 1240px) { .search kbd { display: none; } .topbar { gap: 16px; } }
@media (min-width: 641px) and (max-width: 1200px) {
  .topbar > .search { flex: none; width: 34px; min-width: 0; padding: 0; justify-content: center; border-radius: 50%; }
  .topbar > .search span, .topbar > .search kbd { display: none; }
  .top-r a.btn.ghost { display: none; }
}
@media (min-width: 641px) and (max-width: 1000px) { .topbar { gap: 10px; } .nav a { padding: 6px 8px; } }

/* 차트 헤더: 넘치면 f7 실행 취소/다시 실행 · f8 리플레이 · f9 전체 화면 · f10 얼러트 · f11 스냅샷 순으로 '더 보기' 로 (chartui.js) — 화살표가 단추를 덮지 않게 */
@media (min-width: 641px) {
  #chartWin .chart-head.f4 #tradeBtn + .vsep { display: none; } /* 1280px 구분선 두 줄 */
  /* 8차: 트레이딩뷰처럼 글자 → 즐겨찾기 인터벌(고른 것만 남김) → 템플릿 · 스냅샷 · 전체 화면 · 얼러트 순으로 접고, 실행 취소/다시 실행 · 리플레이 · 레이아웃은 끝까지 */
  #chartWin .chart-head.f7 #tfFav .hbtn:not(.on) { display: none; }
  #chartWin .chart-head.f8 #indTplBtn, #chartWin .chart-head.f9 :is(#shotBtn, #setBtn), #chartWin .chart-head.f10 :is(#fullBtn, #saveMenuBtn), #chartWin .chart-head.f11 #starBtn, #chartWin .chart-head.f13 #alertBtn { display: none; }
  #chartWin .chart-head.f14 :is(#undoBtn, #redoBtn), #chartWin .chart-head.f14 #replayBtn + .vsep { display: none; }
  #chartWin .chart-head.f15 #replayBtn, #chartWin .chart-head.f16 #layoutBtn { display: none; }
  #chartWin .chart-head.f12 #symBtn :is(.ci, .sub, svg.ico) { display: none; }
}

/* 대화 상자: 바탕을 어둡게 하지 않는다 (트레이딩뷰). .overlay 가 화면을 덮고 있어 바깥 누르면 닫히는 것은 그대로.
   사이트 쪽 창(로그인 · 회원 안내 · 아이디어 · 사용법)과 휴대폰 아래 시트는 그대로 어둡게 */
@media (min-width: 561px) {
  .overlay:not(#loginOv):not(#unlockOv):not(#ideaOv):not(#ideaView):not(#helpOv), .ind-ov { background: transparent; }
}
/* 그림자 한 겹 0 2px 4px · 모서리 6px (지표 고르기 창 12px) */
.overlay .modal, .ind-dlg { box-shadow: 0 2px 4px rgba(0, 0, 0, .4); border-radius: 6px; }
:root[data-theme="light"] :is(.overlay .modal, .ind-dlg) { box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
#indOv .modal.tvi-modal { width: min(840px, calc(100vw - 32px)); border-radius: 12px; }
@media (max-width: 560px) { #indOv .modal.tvi-modal { width: 100vw; border-radius: 14px 14px 0 0; } }

/* 검색 칸: 회색 테두리 한 겹 40px (초점이 와도 파란 테두리 · 안쪽 초점선 두 겹이 생기지 않게) */
.s-modal .s-box, .tvi-s { height: 40px; border: 1px solid var(--tv-line-2); border-radius: 8px; }
.s-modal .s-box:focus-within, .tvi-s:focus-within { border-color: var(--tv-line-2); }
.s-modal .s-box:hover, .tvi-s:hover { border-color: var(--tv-text-3); }
.overlay .modal :is(.s-box, .tvi-s) input:focus-visible { outline: none; }
/* 심볼 찾기: 고른 줄은 회색 바탕 대신 흰 2px 테두리 (밝은 테마는 검정) */
.s-modal .s-row.hl { background: none; box-shadow: inset 0 0 0 2px #fff; border-radius: 2px; }
.s-modal .s-row.hl:hover { background: var(--tv-hover); }
:root[data-theme="light"] .s-modal .s-row.hl { box-shadow: inset 0 0 0 2px #000; }

/* 차트 설정 창 (트레이딩뷰 750 × 563 · 왼쪽 탭 226 · 내용 x+246 · 줄 50px · 색 견본 34px) */
.overlay .modal.cs-modal { width: min(750px, calc(100vw - 32px)); height: min(563px, calc(100vh - 32px)); max-height: none; }
.cs-modal .modal-h { height: 68px; padding: 20px; flex: none; }
.cs-modal .modal-h h3 { line-height: 28px; }
.cs-modal .modal-h .tool, .goto-modal .modal-h .tool { width: 34px; height: 34px; border-radius: 8px; }
.cs-modal .modal-b { flex: 1; min-height: 0; }
.cs-modal .cs-nav { width: 226px; padding: 8px 0 8px 20px; gap: 0; }
.cs-modal .cs-nav button { height: 40px; padding: 0 12px; gap: 4px; border-radius: 8px; }
.cs-modal .cs-nav button .cu-ico { width: 28px; height: 28px; stroke-width: 1.15; }
.cs-modal .cs-body { height: auto; padding: 0 20px 16px; }
.cs-modal .cs-sub { height: 48px; margin: 0; padding-bottom: 8px; display: flex; align-items: flex-end; font-size: 11px; line-height: 15px; letter-spacing: .04em; }
.cs-modal .cs-row { min-height: 50px; padding: 0; gap: 8px; }
.cs-modal .cs-chk { gap: 8px; align-items: center; }
.cs-modal .cs-chk input { width: 18px; height: 18px; margin: 0; }
.cs-modal .cs-ctl { gap: 8px; }
.cs-modal .cs-sw { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--tv-line-2); background: transparent; }
.cs-modal .cs-sw i { width: 24px; height: 24px; border-radius: 3px; }
.cs-modal select.cs-sel { width: 150px; height: 34px; border-radius: 8px; padding: 0 8px; }
.cs-modal .cs-body[data-pane="sym"] .cs-row:not(.cs-chk) > .cs-lab, .cs-modal .cs-body[data-pane="sym"] .cs-chk2 > .cs-chk { width: auto; min-width: 80px; flex: none; }
.cs-modal .cs-lab[data-tip], .cs-modal .cs-chk > span[data-tip] { cursor: help; }
.cs-modal .cs-foot { height: 67px; flex: none; padding: 16px 20px; gap: 12px; }
.overlay .modal .cs-foot .btn { height: 34px; font-size: 16px; }
.overlay .modal .cs-foot :is([data-act="cancel"], [data-act="ok"], [data-close], [data-go]) { min-width: 56px; padding: 0 12px; justify-content: center; }
.cs-modal .cs-foot .cs-tpl { width: 100px; font-size: 14px; justify-content: space-between; }
@media (max-width: 560px) { .overlay .modal.cs-modal { height: 90vh; } .cs-modal .cs-nav { width: auto; padding: 6px 8px; } .cs-modal .cs-nav button { height: 34px; } }

/* '가기' 창 (트레이딩뷰 302 × 566 · 칸 안 아이콘 · 늘 6줄 달력 · 제목 20 · 탭 16 · 단추 56 × 34) */
.modal.goto-modal { width: min(302px, calc(100vw - 24px)); height: auto; max-height: none; }
.goto-modal .modal-h { height: 68px; padding: 20px; }
.goto-modal .modal-h h3 { line-height: 28px; }
.goto-modal .goto-tabs { height: 32px; gap: 24px; padding: 0 20px; }
.goto-modal .goto-tabs button { height: 32px; padding: 0; font-size: 16px; font-weight: 600; border-bottom: 4px solid transparent; border-radius: 0 0 2px 2px; }
.goto-modal .goto-tabs button.on { border-bottom-color: var(--tv-text); }
.goto-modal .goto-b { flex: none; overflow: visible; padding: 16px 0 0; margin: 0 20px; gap: 12px; }
.goto-i { position: relative; display: block; min-width: 0; }
.goto-i .inp { width: 100%; height: 34px; padding: 0 34px 0 8px; border-radius: 8px; font-size: 14px; }
.goto-i .inp:focus { border-color: var(--tv-accent); box-shadow: inset 0 0 0 1px var(--tv-accent); outline: none; }
.goto-i .ico { position: absolute; right: 7px; top: 7px; width: 20px; height: 20px; color: var(--tv-btn); pointer-events: none; stroke-width: 1.4; }
.modal.goto-modal .goto-f:not(:has(.goto-i + .goto-i)) { grid-template-columns: minmax(0, 1fr); }
.goto-cal { padding: 17px 20px 28px; }
.goto-cal .gc-h { height: 34px; }
.goto-cal .gc-h b { font-size: 16px; }
.goto-cal .gc-h button { width: 34px; height: 34px; border-radius: 8px; }
.goto-cal .gc-w { margin-top: 6px; }
.goto-cal .gc-w span { height: 28px; line-height: 28px; font-size: 14px; }
.goto-cal .gc-d { margin-top: 12px; grid-template-columns: repeat(7, 34px); grid-auto-rows: 34px; gap: 4px; justify-content: space-between; }
.goto-cal .gc-d button { width: 34px; height: 34px; border-radius: 8px; font-size: 16px; }
.goto-cal .gc-d button.today:not(.on) { box-shadow: inset 0 0 0 1px var(--tv-text); }
.goto-modal .cs-foot { height: 66px; padding: 15px 20px 16px; gap: 12px; }
/* 날짜 범위 단추 (트레이딩뷰 1D 28 · 5D 28 · 1M 29 … 전체 40) */
#ranges .hbtn.rng { padding: 0 4px; min-width: 0; justify-content: center; flex: none; font-size: 13px; }
/* 타임존 목록 (트레이딩뷰 폭 226 · 화면 높이까지) */
.pop .cu-tzlist { min-width: 0; width: 226px; max-height: calc(100vh - 80px); }

/* 지표 설정 창: 다른 대화 상자처럼 트레이딩뷰 색 · 흰 확인 단추 · 글자색 밑줄 탭 */
.ind-dlg {
  --win: var(--tv-dialog); --win-2: var(--tv-soft); --hover: var(--tv-hover); --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); --brand: var(--tv-accent); --brand-2: var(--tv-accent);
  background: var(--tv-dialog); color: var(--tv-text); border: 0;
}
.ind-dlg .is-h h3 { font-size: 20px; font-weight: 600; }
.ind-dlg .is-tabs { gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--tv-line); }
.ind-dlg .is-tabs button { height: 32px; padding: 0; margin: 0; font-size: 16px; font-weight: 600; color: var(--tv-text-3); }
.ind-dlg .is-tabs button.on { color: var(--tv-text); }
.ind-dlg .is-tabs button.on::after { height: 4px; bottom: -1px; border-radius: 2px 2px 0 0; background: var(--tv-text); }
.ind-dlg .is-f .btn { height: 34px; border-radius: 8px; font-weight: 400; }
.ind-dlg .is-f .btn.line { border-color: var(--tv-tpl); }
.ind-dlg .is-f [data-a="cancel"] { min-width: 56px; justify-content: center; font-size: 16px; border-color: var(--tv-cancel); color: var(--tv-text); }
.ind-dlg .is-f .btn.primary { min-width: 56px; justify-content: center; font-size: 16px; background: var(--tv-ok-bg); color: var(--tv-ok-fg); border: 1px solid var(--tv-ok-bg); }
.ind-dlg .is-f .btn.primary:hover { filter: none; opacity: .88; }
.ind-dlg input[type=checkbox] { accent-color: var(--tv-chk); }
.ind-dlg .inp, .ind-dlg select.inp { background: transparent; border-color: var(--tv-line-2); }
.overlay .cs-modal .cs-chk input[type=checkbox] { width: 18px !important; height: 18px !important; margin: 0; } /* 트레이딩뷰 체크 상자 18px */
.modal.goto-modal .goto-b .goto-f:has(.goto-i + .goto-i) { grid-template-columns: minmax(0, 1fr) 100px; }
.overlay .modal .goto-i input:focus-visible { outline: none; }

/* 차트 종류 메뉴: 28px 선 아이콘 · 줄에 마우스를 올리면 이름 옆 ? (설명) · 오른쪽 별 (즐겨찾기) — 트레이딩뷰 */
.pop.cu-types .cu-type { gap: 8px; padding: 0 6px 0 10px; }
.pop.cu-types .cu-type > .cu-ico { width: 28px; height: 28px; stroke-width: 1.1; }
.pop.cu-types .cu-tn { flex: none; }
.pop.cu-types .cu-q { visibility: hidden; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tv-text-3); color: var(--tv-menu); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; flex: none; }
.pop.cu-types .cu-tstar { visibility: hidden; margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--tv-text-3); flex: none; }
.pop.cu-types .cu-tstar:hover { color: var(--tv-text); }
.pop.cu-types .cu-tstar .cu-ico { width: 18px; height: 18px; stroke-width: 1.4; }
.pop.cu-types .cu-type:hover .cu-q, .pop.cu-types .cu-type:hover .cu-tstar, .pop.cu-types .cu-tstar.on { visibility: visible; }
.pop.cu-types .cu-tstar.on, .pop.cu-types .cu-tstar.on:hover { color: #f7a600; }
.pop.cu-types .cu-tstar.on .cu-ico { fill: currentColor; }
#chartWin .chart-head .tfav .cu-ico { width: 19px; height: 19px; }
#typeBtn .cu-ico, #chartWin .chart-head .tfav .cu-ico { stroke-width: 1.3; }
/* 실시간 연결 끊김 (아래 막대) */
#chartWin .chart-foot .net-off { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; margin-right: 6px; border-radius: 4px; font-size: 12px; color: var(--tv-text-3); white-space: nowrap; flex: none; }
#chartWin .chart-foot .net-off[hidden] { display: none; }
#chartWin .chart-foot .net-off i { width: 6px; height: 6px; border-radius: 50%; background: #f23645; }
/* 그리는 도구를 쥐었을 때는 범례(위쪽 글자 줄)가 클릭을 가로채지 않게 — 범례 위에도 점을 찍는다 (트레이딩뷰). #kc.draw-active 는 chartview.js renderDrawState */
#kc.draw-active .lg, #kc.draw-active .lg * { pointer-events: none !important; }

/* ===== 트레이딩뷰 1:1 맞추기 6차 (chartui.js · layout.js · store.js · chartview.js 헤더) ===== */
/* 위 막대 아이콘: 트레이딩뷰처럼 조금 크고 가는 선 */
#chartWin .chart-head .hbtn > .ico { width: 20px; height: 20px; stroke-width: 1.25; }
#chartWin .chart-foot #gotoBtn > .ico { width: 20px; height: 20px; stroke-width: 1.25; }
/* 저장 | ▾ (트레이딩뷰: 글자 = 바로 세이브, 화살표 = 레이아웃 관리) */
@media (min-width: 641px) { .chart-head .save-grp { display: inline-flex; align-items: center; flex: none; } }
.chart-head .save-grp .save-btn { padding: 0 6px 0 8px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chart-head .save-grp .save-arr { width: 20px; min-width: 20px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* 시간 단위 메뉴: 별은 줄에 마우스를 올렸을 때만 (즐겨찾기한 것도) */
.pop .tf-star.on { visibility: hidden; }
.pop .tf-row:hover .tf-star.on { visibility: visible; }
/* 메뉴 키보드 이동: 포커스 줄을 마우스 올린 것처럼 */
.pop :is(button, [role="menuitem"], [role="menuitemcheckbox"]):focus-visible { background: var(--tv-hover); color: var(--tv-text); outline: 2px solid var(--tv-accent, #2962ff); outline-offset: -2px; }
/* 아래 가운데 이동 단추: − + ‹ › (재설정은 최신 봉에서 벗어났을 때만) */
.kc-nav [data-n="reset"] { display: none; }
.kc-nav.away [data-n="reset"] { display: grid; }
/* 가격축 아래 톱니 = 스케일 세팅 (트레이딩뷰) */
.ax-gear { position: absolute; z-index: 8; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--tv-btn); background: transparent; }
.ax-gear:hover { background: var(--tv-hover); color: var(--tv-text); }
.ax-gear .cu-ico { width: 18px; height: 18px; stroke-width: 1.3; }
/* 톱니(스케일 세팅)는 트레이딩뷰처럼 언제나 보인다 — '스케일 모드(A 및 L)' 설정은 A · L 단추에만 */
.kc-grid .cell .ax-gear { display: none; }
/* 범례 제목: 이름과 '· 4시' 사이 두 칸 띄던 것 (gap 은 로고 옆에만) */
#kc .lg-t .lg-tn { white-space: nowrap; }
/* 휴대폰 범례: 변동 값을 시고저종과 같은 줄에 */
#kc .lg-oc { display: inline-flex; align-items: baseline; gap: 0 8px; }
@media (max-width: 640px) {
  #kc .lg-oc { white-space: nowrap; gap: 0 5px; }
  #kc .lg-oc .lg-ohlc { gap: 0 4px; }
}
@media (max-width: 440px) { #kc .lg-oc { font-size: 11px; letter-spacing: -.25px; } #kc .lg-oc .lg-ohlc { gap: 0 3px; } }
@media (max-width: 400px) { #kc .lg-oc { font-size: 10.5px; letter-spacing: -.25px; } #kc .lg-oc .lg-ohlc { gap: 0 3px; } }
@media (max-width: 370px) { #kc .lg-oc { font-size: 10px; letter-spacing: -.3px; } }

/* ===== 레이아웃 셋업 메뉴 (트레이딩뷰: 칸 수별 줄 + 모든 차트에 싱크) ===== */
.pop.ly-menu-pop { width: 428px; max-width: calc(100vw - 16px); padding: 6px 0 8px; }
.pop.ly-menu-pop .ly-rows { padding: 0 12px; }
.pop.ly-menu-pop .ly-row { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--tv-line); flex-wrap: wrap; }
.pop.ly-menu-pop .ly-n { width: 18px; font-size: 12px; color: var(--tv-text-3); flex: none; }
.pop.ly-menu-pop .ly-b { width: 34px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 4px; color: var(--tv-btn); }
.pop.ly-menu-pop .ly-b.on { color: var(--tv-text); background: var(--tv-hover); outline: 1px solid var(--tv-text); outline-offset: -1px; }
.pop.ly-menu-pop .ly-sync-t { padding: 12px 12px 6px; font-size: 12px; color: var(--tv-text-3); }
.pop.ly-menu-pop .ly-sync { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0 12px; }
.pop.ly-menu-pop .ly-sync .sp { flex: 1; }
.pop.ly-menu-pop .ly-info { width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 700; background: var(--tv-text-3); color: var(--tv-menu); }
.pop.ly-menu-pop .ly-sw { position: relative; width: 38px; height: 20px; border-radius: 10px; background: var(--tv-line-2); flex: none; transition: background .12s; }
.pop.ly-menu-pop .ly-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--tv-text-3); transition: left .12s, background .12s; }
.pop.ly-menu-pop .ly-sync.on .ly-sw { background: var(--tv-text); }
.pop.ly-menu-pop .ly-sync.on .ly-sw::after { left: 21px; background: var(--tv-menu); }
/* 활성 차트 테두리 (여러 칸일 때만) */
.kc-grid > * { position: relative; }
.kc-grid.multi > .act::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--tv-accent, #2962ff); pointer-events: none; z-index: 30; }
.kc-grid.multi > .cell .kc { cursor: pointer; }
/* 레이아웃 관리 메뉴 */
.pop.ly-menu { min-width: 260px; }
.pop.ly-menu .cu-ml { flex: 1; }
/* 커뮤니티: 불러오기 실패 안내 */
.com-err { display: grid; justify-items: center; gap: 10px; }
/* ===== 641~1100px: 트레이딩뷰처럼 데스크톱 화면 그대로 — 오른쪽 패널은 641px 이상 어디서나 붙어 있고 차트가 줄어든다 (켠 레일 단추를 다시 누르면 접힘) ===== */
@media (min-width: 641px) and (max-width: 1100px) {
  .dock-tabs { overflow-x: auto; scrollbar-width: none; }
  .dock-tabs button { white-space: nowrap; flex: none; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .topbar { gap: 8px; }
  .logo { font-size: 0; gap: 0; }
  .logo small { display: none; }
  .nav a { padding: 6px 7px; }
  .top-r { gap: 6px; }
  .top-r .btn.acct span { display: none; }
}
@media (min-width: 641px) and (max-width: 760px) { .top-r a.btn.primary { display: none; } }
.pop.ly-menu-pop .ly-sync.on:not(:hover):not(:focus-visible) { background: transparent; }
.pop.ly-menu-pop .ly-sync.on { color: var(--tv-text); }

/* ===== 2026-10-23 8차 맞추기 (layout.js · replay.js · chartui.js 설정 창 · 가격축 A/L) ===== */
/* 화면 분할 중 리플레이 막대: 작은 칸 안이 아니라 차트 묶음 아래쪽 가운데 */
.kc-grid.multi { position: relative; }
.kc-grid[data-dense="1"] .cell-h [data-a="sym"] .dim, .kc-grid[data-dense="2"] .cell-h [data-a="sym"] .dim { display: none; }
.kc-grid[data-dense="2"] .cell-h .num + .num { display: none; }
.kc-grid[data-dense="2"] .cell-h { height: 24px; }
/* 가격축 맨 아래 A · L (트레이딩뷰) */
.ax-al { position: absolute; z-index: 8; display: flex; gap: 4px; }
.ax-al button { width: 18px; height: 18px; padding: 0; border-radius: 3px; font: 600 11px/18px var(--font); color: var(--tv-text, var(--text)); background: var(--tv-panel, var(--win)); border: 1px solid var(--tv-line-2, var(--line-2)); display: grid; place-items: center; }
.ax-al button:hover { background: var(--tv-hover, var(--hover)); }
.ax-al button.on { background: var(--tv-text, #d1d4dc); color: var(--tv-panel, #131722); border-color: transparent; }
#chartWin[data-scalemodes="never"] .ax-al { display: none; }
#chartWin[data-scalemodes="hover"] .ax-al { opacity: 0; transition: opacity .12s; }
#chartWin[data-scalemodes="hover"] .kc:hover .ax-al, #chartWin[data-scalemodes="hover"] .ax-al:focus-within { opacity: 1; }
.kc-grid .cell .ax-al { display: none; }
@media (hover: none) { #chartWin[data-scalemodes="hover"] .ax-al { opacity: 1; } }
/* 차트 설정: 펼침 고르기 칸 (기본 select 대신) */
.cs-modal .cs-dd { min-width: 180px; height: 34px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 12px; border: 1px solid var(--tv-line-2, var(--line-2)); border-radius: 6px; background: transparent; color: var(--tv-text, var(--text)); font-size: 14px; text-align: left; }
.cs-modal .cs-dd:hover { border-color: var(--tv-text-3, var(--text-3)); }
.cs-modal .cs-dd .cs-dd-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cs-modal .cs-dd .cu-ico { width: 16px; height: 16px; flex: none; }
.cs-modal .cs-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pop.cs-ddpop { max-height: min(360px, 60vh); overflow-y: auto; z-index: 95; }
.pop.cs-ddpop .cs-ddl { display: flex; flex-direction: column; }
.pop.cs-ddpop .cs-ddl button { text-align: left; white-space: nowrap; }
.pop.cs-ddpop .cs-ddl button.on { background: var(--tv-hover, var(--hover)); color: var(--tv-text, var(--text)); }
/* 차트 설정 창 높이: 트레이딩뷰처럼 내용만큼 늘다가 화면 안에서 멈춘다 */
.overlay .modal.cs-modal { height: auto; min-height: min(563px, calc(100vh - 32px)); max-height: min(760px, calc(100vh - 9vh - 24px)); }
@media (max-width: 560px) { .overlay .modal.cs-modal { min-height: 0; max-height: 90vh; height: 90vh; } }
/* 휴대폰 범례 (트레이딩뷰): 제목은 이름만 한 줄로 줄이고, 값은 '종 … +463.4 (+0.57%)' 한 줄 */
@media (max-width: 640px) {
  #kc .lg-sym { flex-wrap: wrap; }
  #kc .lg-t { max-width: calc(100vw - 120px); min-width: 0; overflow: hidden; }
  #kc .lg-t .lg-tn { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #kc .lg-t .lg-tx { display: none; }
  #kc .lg-oc { flex-basis: 100%; }
  #kc .lg-ohlc > span:not(:last-child) { display: none; }
}
/* 터치 휴대폰 (트레이딩뷰 모바일 실측): 값 앞 '종' 글자 · 볼륨 값을 안 보인다 (좁은 데스크톱 창은 그대로 보인다) */
@media (max-width: 640px) and (hover: none) {
  #kc .lg-ohlc i { display: none; }
  #kc .lg-volov .lg-vals { display: none; }
}
#kc:focus { outline: none; } #kc:focus-visible { outline: 1px solid var(--tv-accent, #2962ff); outline-offset: -1px; }
/* 아래 기간 줄이 좁으면 '기간 ▾' 하나로 (트레이딩뷰) */
#rangeDd { display: none; gap: 2px; align-items: center; flex: none; }
#chartWin .chart-foot.rng-dd #rangeDd { display: inline-flex; }
#chartWin .chart-foot.rng-dd #ranges { display: none !important; }

/* ===== 2026-10-23 9차 (app.js 자동 접기 · layout.js 분할 범례 · replay.js 막대 · 헤더) ===== */
/* 641px 이상: 패널을 붙이면 차트가 300px 아래가 되는 폭이면 레일만 남긴다 (side-auto). 레일 단추를 누르면 차트 위에 띄운다 (side-float) */
@media (min-width: 641px) {
  .shell { position: relative; }
  .shell.side-off.side-float > .side { display: flex; position: absolute; z-index: 45; grid-area: 1 / 1 / 2 / -1; top: 0; bottom: 0; right: calc(var(--rail-w) + var(--gap)); width: min(var(--side-w), calc(100% - var(--rail-w) - var(--gap) * 2)); box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .35)); }
}
/* 헤더 '저장': 좁아지면 글자 대신 구름 아이콘만 (트레이딩뷰) */
.chart-head .save-btn .save-ico { display: none; width: 20px; height: 20px; }
#chartWin .chart-head.f5 .save-btn .lbl { display: none !important; }
#chartWin .chart-head.f5 .save-btn .save-ico { display: block; }
#chartWin .chart-head.f5 .save-grp .save-btn { padding: 0 8px; }
/* Ctrl+S 저장 중 표시 (트레이딩뷰: 알림 없이 저장 단추만 잠깐) */
.chart-head .save-btn.saving { color: var(--tv-text-3, var(--text-3)); pointer-events: none; }
.chart-head .save-btn.saving .save-ico, .chart-head .save-btn.saving .lbl { animation: cobaSaving .8s ease-in-out; }
@keyframes cobaSaving { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* 휴대폰 범례: 지표 줄은 한 줄로 (값이 넘치면 끝을 … 로 자른다, 트레이딩뷰) */
@media (max-width: 640px) {
  #kc .lg-ind { flex-wrap: nowrap; overflow: hidden; }
  #kc .lg-ind .lg-name { flex: none; }
  #kc .lg-ind .lg-vals { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #kc .lg-ind .lg-vals b + b { margin-left: 7px; }
}
/* 가격축 A · L: 터치 기기(휴대폰 앱)에는 없다 (트레이딩뷰) — 거래량 라벨을 가리던 문제 */
@media (hover: none), (max-width: 640px) { .ax-al { display: none !important; } }
/* 차트 묶음 + 아래 한 줄 (layout.js #kcStack) */
.kc-stack { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kc-stack > .kc-grid { flex: 1; min-height: 0; }
/* 리플레이 막대: 차트 아래 따로 한 줄 (봉 · 거래량을 가리지 않게, 트레이딩뷰) */
.kc-stack > .replay-bar.rp-strip { position: static; left: auto; bottom: auto; transform: none; flex: none; width: 100%; max-width: none; height: 40px; justify-content: center; border: 0; border-top: 1px solid var(--tv-line, var(--line)); border-radius: 0; box-shadow: none; padding: 0 8px; background: var(--tv-panel, var(--win)); z-index: auto; }
@media (max-width: 640px) { .kc-stack > .replay-bar.rp-strip { justify-content: flex-start; height: 44px; } }
/* 화면 분할 작은 차트: 메인(#kc)과 같은 범례 모양 (chartui.js pane 모드). 지표 단추 · 접기 단추는 메인에만 */
.kc-grid > .cell { background: var(--tv-panel, var(--win)); }
.kc-grid .cell > .kc { flex: 1; min-height: 0; position: relative; background: var(--tv-panel, var(--win)); }
.kc-grid .cell .kc .lg { font-size: 13px; color: var(--tv-text); }
.kc-grid .cell .kc .lg-t { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--tv-text); cursor: pointer; }
.kc-grid .cell .kc .lg-t .ci { width: 16px; height: 16px; }
.kc-grid .cell .kc .lg-t b { font-weight: 400; color: var(--tv-text); }
.kc-grid .cell .kc .lg-t .lg-tn { white-space: nowrap; }
.kc-grid .cell .kc .lg-oc { display: inline-flex; align-items: baseline; gap: 0 8px; }
.kc-grid .cell .kc .lg-ohlc { gap: 0 8px; }
.kc-grid .cell .kc .lg-ohlc > span { display: inline-flex; }
.kc-grid .cell .kc .lg-ohlc i { margin-right: 1px; }
.kc-grid .cell .kc .lg-ohlc i, .kc-grid .cell .kc .lg-vol i, .kc-grid .cell .kc .lg-dch i { color: var(--tv-text); }
.kc-grid .cell .kc :is(.lg-ohlc b, .lg-ch, .lg-vol b, .lg-vals b, .lg-dch b) { font-weight: 400; }
.kc-grid .cell .kc :is(.lg-name, .lg-args) { font-weight: 400; color: var(--tv-text); }
.kc-grid .cell .kc .lg-row { min-height: 22px; }
.kc-grid .cell .kc .lg-vals b:empty { display: none; }
.kc-grid .cell .kc :is(.lg-btns, .lg-tog) { display: none !important; }
.kc-grid .cell .kc .lg-ind:hover .lg-vals { display: inline-flex; }
/* 가격축 위쪽 가격 단위 (차트 설정 '통화 및 단위') */
.ax-unit { position: absolute; z-index: 7; text-align: center; font: 500 11px/16px var(--font); color: var(--tv-text-3, var(--text-3)); background: var(--tv-panel, var(--win)); pointer-events: none; }
#chartWin[data-unitlabel="never"] .ax-unit { display: none; }
#chartWin[data-unitlabel="hover"] .ax-unit { opacity: 0; transition: opacity .12s; }
#chartWin[data-unitlabel="hover"] .kc:hover .ax-unit { opacity: 1; }
.kc-grid .cell .ax-unit { display: none; }
@media (hover: none), (max-width: 640px) { .ax-unit { display: none; } }
/* 차트 설정: 쓸 수 없는 줄은 흐리게 (트레이딩뷰 비드/애스크 · 이벤트) · 한 칸 들인 줄 */
.cs-modal .cs-off { opacity: .45; }
.cs-modal .cs-off :is(input, button, select) { cursor: default; }
.cs-modal .cs-ind { padding-left: 26px; }
.cs-modal .cs-ratio-v:disabled { opacity: .45; }
.cs-modal :not(.cs-off) > .cs-chk:not(.cs-off) > input:disabled + span { opacity: .45; }

/* ===== 트레이딩뷰 1:1 맞추기 10차 ===== */
/* 휴대폰 헤더에도 실행 취소 · 다시 실행 (트레이딩뷰 360px 헤더). 440px 아래는 관심 목록 별을 ⋯ 메뉴로 보내 자리를 만든다 */
@media (max-width: 640px) {
  .chart-head #undoBtn.hide-m, .chart-head #redoBtn.hide-m { display: inline-flex; }
  .chart-head #undoBtn, .chart-head #redoBtn { padding: 0 6px; }
}
@media (max-width: 440px) {
  .chart-head #starBtn { display: none; }
  .chart-head > .hbtn { padding: 0 5px; }
  .chart-head .sym-btn { max-width: 136px; gap: 6px; padding-right: 4px; }
  .chart-head .sym-btn > .ci { width: 22px !important; height: 22px !important; flex: none; }
  .chart-head .sym-btn > svg.ico { display: none; }
  .chart-head .sym-btn :is(b, .sub) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
}
/* 리플레이 막대 ≤480px: 설명 글자는 숨기고 나가기(X)는 늘 오른쪽 끝에 (밀어도 화면 밖으로 안 나가게) */
@media (max-width: 480px) {
  .kc-stack > .replay-bar.rp-strip { gap: 2px; padding: 0 4px; }
  .kc-stack > .replay-bar.rp-strip .rp-info { display: none; }
  .kc-stack > .replay-bar.rp-strip [data-r="jump"] { padding: 0 8px; }
  .kc-stack > .replay-bar.rp-strip [data-r="stop"] { margin-left: auto; position: sticky; right: 0; flex: none; background: var(--tv-panel, var(--win)); box-shadow: -6px 0 6px var(--tv-panel, var(--win)); }
}
/* 범례 줄 키보드: 포커스(키보드)가 줄이나 그 단추에 있으면 단추를 보여 준다 */
#kc .lg-row[tabindex]:focus { outline: none; }
#kc .lg-row[tabindex]:focus-visible { border-color: var(--tv-accent, #2962ff); }
#kc :is(.lg-ind, .lg-volov, .lg-cmp):focus-within .lg-btns { display: inline-flex; }
#kc .lg-btns button:focus-visible { outline: 2px solid var(--tv-accent, #2962ff); outline-offset: -2px; }
/* 첫 봉이 오기 전: 엔진의 빈 0~10 축 대신 가운데 불러오는 표시만 (kchart.js .kc-wait) */
.kc-wait { visibility: hidden; }
#kc .loading::before { content: ""; width: 22px; height: 22px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text-3) 35%, transparent); border-top-color: var(--tv-accent, #2962ff); animation: kcSpin .8s linear infinite; display: block; }
#kc .loading { align-content: center; justify-items: center; text-align: center; }
@keyframes kcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #kc .loading::before { animation: none; } }
#kc .loading.err::before { display: none; }
/* 차트 설정 10차 (트레이딩뷰): 넓은 견본(색 + 선 모양) · '?' 도움말 · 볼륨 슬라이더 · 창 위치는 탭을 바꿔도 위쪽 고정 */
.cs-modal .cs-sw.cs-swl { width: 74px; display: inline-flex; align-items: center; gap: 6px; padding: 0 5px; justify-content: flex-start; }
.cs-modal .cs-sw.cs-swl i { flex: none; }
.cs-modal .cs-swl .cs-lp { flex: 1; height: 0; border-top: 2px solid var(--tv-text-3, #8a8a8a); opacity: .8; }
.cs-modal .cs-swl .cs-lp-d { border-top-style: dashed; }
.cs-modal .cs-swl .cs-lp-o { border-top-style: dotted; }
.cs-modal .cs-swl .cs-lp-n { border-top-color: transparent; }
.cs-modal .cs-sw:disabled { cursor: default; opacity: .6; }
.cs-modal .cs-sw-last i { background: var(--c); }
.cs-q { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; background: var(--tv-line-2, #3d3d3d); color: var(--tv-panel, #000); font: 700 12px/1 var(--font); cursor: help; flex: none; }
.cs-q:focus-visible { outline: 2px solid var(--tv-accent, #2962ff); outline-offset: 1px; }
.cs-modal .cs-chk > .cs-q { margin-left: 4px; }
.cs-modal .cs-vol .cs-range { gap: 10px; }
.cs-modal .cs-spk { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; color: var(--tv-text); }
.cs-modal .cs-range input[type=range] { -webkit-appearance: none; appearance: none; width: 136px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tv-text) var(--p, 70%), var(--tv-line-2) var(--p, 70%)); outline-offset: 6px; }
.cs-modal .cs-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tv-panel); border: 2px solid var(--tv-text); cursor: pointer; }
.cs-modal .cs-range input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--tv-panel); border: 2px solid var(--tv-text); cursor: pointer; }
.cs-modal .cs-range input[type=range]:disabled { opacity: .4; }
.cs-modal .cs-sel-s + .cs-dd { min-width: 100px; width: 100px; }
@media (min-width: 561px) {
  .overlay#setOv:not(#loginOv):not(#unlockOv):not(#ideaView) { align-items: flex-start; padding-top: 20px; }
  #setOv .modal.cs-modal { min-height: 0; height: auto; max-height: calc(100vh - 40px); }
}
/* 관심 목록 줄: 키보드 포커스 */
.wl-row:focus { outline: none; }
.wl-row:focus-visible { outline: 2px solid var(--tv-accent, #2962ff); outline-offset: -2px; }
/* 휴대폰: 레이아웃 시트는 화면 폭 그대로, 칸 수 줄은 한 줄로 (4개 배치 8가지가 다음 줄로 넘어가지 않게) */
@media (max-width: 640px) {
  .pop.sheet.ly-menu-pop { max-width: none; }
  .pop.sheet.ly-menu-pop .ly-row { flex-wrap: nowrap; gap: 2px; }
  .pop.sheet.ly-menu-pop .ly-b { width: 34px; flex: none; }
  /* 아래 막대 시계 (트레이딩뷰 360px 에도 있다) */
  .chart-foot #clock.hide-m { display: inline-flex; flex: none; margin-left: auto; font-size: 12px; padding: 0 4px; }
  /* 화면 분할 작은 차트 범례: 메인처럼 한 줄씩 · 넘치면 … (제목의 인터벌 · 거래소 글자는 뺀다) */
  .kc-grid .cell .kc .lg { font-size: 12px; }
  .kc-grid .cell .kc .lg-t { font-size: 14px; min-width: 0; }
  .kc-grid .cell .kc .lg-t .lg-tn { overflow: hidden; text-overflow: ellipsis; }
  .kc-grid .cell .kc .lg-tx { display: none; }
  .kc-grid .cell .kc .lg-oc { flex: 1 0 100%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 11px; }
  .kc-grid .cell .kc .lg-oc > * { display: inline; }
  .kc-grid .cell .kc .lg-oc .lg-ohlc > span { display: inline; margin-right: 4px; }
  .kc-grid .cell .kc .lg-oc .lg-ohlc { gap: 0 4px; }
}
/* 좁은 분할 칸 · 휴대폰: 지표 줄은 한 줄로, 값이 넘치면 … */
.kc-grid .cell .kc .lg-ind { flex-wrap: nowrap; overflow: hidden; }
.kc-grid .cell .kc .lg-ind .lg-name { flex: none; }
.kc-grid .cell .kc .lg-ind .lg-vals { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-grid .cell .kc .lg-ind .lg-vals b + b { margin-left: 7px; }
.kc-grid .cell .kc .lg-sym > .lg-t { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* 띄운 패널: 차트 창 오른쪽 끝(가격축 라벨)까지 덮는다 — 패널과 레일 사이로 라벨이 3px 비쳐 보이던 문제 */
@media (min-width: 641px) { .shell.side-off.side-float > .side { right: calc(var(--rail-w) + 1px); } }
.cs-modal .cs-body:is([data-pane="cv"], [data-pane="ev"]) .cs-chk2 > .cs-chk { width: 168px; flex: none; }
.cs-modal .cs-body[data-pane="ev"] .cs-chk2.cs-ind > .cs-chk { width: 142px; }
/* ===== 11차: 툴바 눌림 · hover (kr.tradingview.com 실측) =====
   쥔 도구(크로스 등) · 심볼 상자: 라이트 #ebebeb → 올리면 #dbdbdb, 다크 #2b2b2b → #464646. 심볼 상자는 둥근 알약 */
:root { --tv-on: #2b2b2b; --tv-on-h: #464646; }
:root[data-theme="light"] { --tv-on: #ebebeb; --tv-on-h: #dbdbdb; }
body #drawBar .dg:is([data-g="cursor"], [data-g="trend"], [data-g="fib"], [data-g="pattern"], [data-g="predict"], [data-g="shape"], [data-g="note"], [data-g="icon"]) .tool.on,
body #drawBar > .tool:is([data-d="measure"], [data-d="zoomSel"]).on { background: var(--tv-on); --dotbg: var(--tv-on); }
body #drawBar .dg:is([data-g="cursor"], [data-g="trend"], [data-g="fib"], [data-g="pattern"], [data-g="predict"], [data-g="shape"], [data-g="note"], [data-g="icon"]) .tool.on:hover,
body #drawBar > .tool:is([data-d="measure"], [data-d="zoomSel"]).on:hover { background: var(--tv-on-h); --dotbg: var(--tv-on-h); }
#chartWin .chart-head #symBtn { background: var(--tv-on); border-radius: 18px; }
#chartWin .chart-head #symBtn:hover { background: var(--tv-on-h); }
/* 범례 접기(^) 상자: 트레이딩뷰처럼 진한 화살표 + 테두리 (라이트 #dbdbdb · 다크 #2b2b2b), 약 28×20 */
:root { --tv-tog-b: #2b2b2b; }
:root[data-theme="light"] { --tv-tog-b: #dbdbdb; }
body .lg-tog { color: var(--tv-text); border-color: var(--tv-tog-b); background: var(--tv-panel); height: 20px; min-width: 28px; justify-content: center; padding: 0 6px; }
body .lg-tog:hover { background: var(--tv-hover); }
/* 멀티 차트 최대화 (트레이딩뷰 Alt+Enter · Alt+클릭): 활성 차트만 칸 전체에 */
.kc-grid.maxi > :not(.act) { display: none !important; }
.kc-grid.maxi > .act { grid-area: 1 / 1 / -1 / -1 !important; }
.kc-grid.maxi.multi > .act::after { display: none; }
/* 키보드 단축키 창 (트레이딩뷰 Ctrl+/): 왼쪽 묶음 탭 · 오른쪽 이름 + 키 상자 */
/* 키보드 단축키 (Ctrl+/): 오른쪽 도움말 서랍 — 트레이딩뷰처럼 화면 오른쪽 절반, 숏컷 찾기 + 접이식 묶음 */
.overlay#ksOv { align-items: stretch !important; justify-content: flex-end; padding: 0 !important; }
.overlay#ksOv .modal.ks-modal { width: min(720px, 100vw); max-height: none; height: 100%; border-radius: 0; box-shadow: -2px 0 8px rgba(0, 0, 0, .25); }
#ksOv .modal-h { padding: 22px 24px 4px 56px; }
#ksOv .modal-h h3 { font-size: 24px; font-weight: 700; }
#ksOv .modal-b { padding: 0 44px 32px 56px; }
.ks-desc { margin: 10px 0 18px; font-size: 15px; line-height: 1.6; color: var(--tv-text, var(--text)); }
.ks-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--tv-line-2, var(--line-2)); border-radius: 6px; margin-bottom: 18px; }
.ks-search:focus-within { border-color: var(--tv-accent, #2962ff); }
.ks-search .ico { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.ks-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: inherit; font-size: 15px; }
.ks-sec { border-bottom: 1px solid var(--line); }
.ks-sec[hidden] { display: none; }
.ks-sh { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0; font-size: 18px; color: var(--tv-text, var(--text)); text-align: left; }
.ks-sh:hover { opacity: .85; }
.ks-ic { width: 32px; height: 32px; flex: none; }
.ks-sh span { flex: 1; }
.ks-chev { width: 18px; height: 18px; transition: transform .15s; }
.ks-sec.open .ks-chev { transform: rotate(180deg); }
.ks-sec .ks-list { display: none; padding: 0 0 12px; }
.ks-sec.open .ks-list { display: block; }
.ks-row[hidden] { display: none; }
.ks-none { padding: 24px 0; }
@media (max-width: 640px) { #ksOv .modal-h { padding: 16px 16px 4px; } #ksOv .modal-b { padding: 0 16px 24px; } .ks-sh { font-size: 16px; } }
/* 관심 목록 고르기 (Shift+W): 검색 · 왼쪽 묶음 · 생성된 목록 표 (트레이딩뷰) */
.wls-modal { width: min(840px, calc(100vw - 32px)); }
.overlay .modal.wls-modal { height: min(640px, 76vh); max-height: none; }
.wls { display: flex; flex-direction: column; height: 100%; padding: 4px 20px 20px; }
.wls-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--tv-line-2, var(--line-2)); border-radius: 8px; margin-bottom: 20px; }
.wls-search:focus-within { border-color: var(--tv-accent, #2962ff); }
.overlay .modal :is(.wls-search, .ks-search) input:focus-visible { outline: none; }
.wls-search .ico { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.wls-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: inherit; font-size: 16px; }
.wls-b { display: flex; gap: 20px; min-height: 0; flex: 1; }
.wls-nav { flex: none; width: 200px; }
.wls-nav button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--tv-text, var(--text)); }
.wls-nav button.on { background: var(--hover); }
.wls-nav .ico { width: 20px; height: 20px; }
.wls-tbl { flex: 1; min-width: 0; overflow: auto; }
.wls-h, .wls-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; padding: 0 34px; }
.wls-h { height: 40px; font-size: 11px; color: var(--text-3); }
.wls-row { width: 100%; height: 32px; border-radius: 4px; font-size: 14px; color: var(--tv-text, var(--text)); text-align: left; }
.wls-row:hover { background: var(--hover); }
.wls-row.on { background: var(--tv-text, var(--text)); color: var(--tv-dialog, var(--win)); font-weight: 600; }
.wls-row[hidden] { display: none; }
@media (max-width: 640px) { .wls-b { flex-direction: column; gap: 8px; } .wls-nav { width: auto; } .wls-h, .wls-row { padding: 0 12px; } }
.ks-list { flex: 1; overflow: auto; padding: 6px 16px 12px; }
.ks-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ks-k { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ks-k kbd { font: 600 12px/18px var(--font); min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--win-2); }
.ks-k i { font-style: normal; color: var(--text-3); }
.ks-or { color: var(--text-3); font-size: 12px; margin: 0 4px; }
/* 왓치리스트에 심볼 넣기 */
.wd-modal { width: min(380px, calc(100vw - 32px)); }
.wd { padding: 8px; }
.wd-sym { padding: 6px 10px 10px; font-weight: 600; }
.wd-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--text); text-align: left; }
.wd-row:hover { background: var(--hover); }
.wd-ck { width: 16px; text-align: center; color: var(--tv-accent, #2962ff); }
.wd-n { flex: 1; }
/* 데이터 윈도우 · 노트 패널 */
.dw { padding: 4px 12px 12px; font-size: 13px; }
.dw-sec { margin-top: 10px; padding: 4px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.dw-r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.dw-r span { color: var(--text-3); }
.dw-r b { font-weight: 400; font-variant-numeric: tabular-nums; }
.nt { padding: 8px 12px 12px; font-size: 13px; }
.nt-sym { font-weight: 600; margin-bottom: 8px; }
.nt-new { width: 100%; resize: vertical; min-height: 64px; }
.nt-act { display: flex; justify-content: flex-end; margin: 6px 0 10px; }
.nt-it { padding: 8px 0; border-bottom: 1px solid var(--line); }
.nt-t { white-space: pre-wrap; word-break: break-word; }
.nt-m { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; }
.pop .fly-it.dis { opacity: .45; cursor: default; }
/* 처음 불러오는 동안(또는 시세를 못 받았을 때) 헤더의 빈 값 칸은 감춘다 (app.js 가 차트를 만든 뒤 .wait 를 뗀다) */
#chartWin.wait .chart-head .stat, #chartWin.wait #lastPx { visibility: hidden; }
/* 심볼 찾기: 휴대폰에서는 심볼 아래에 거래소 · 코인 이름 (같은 심볼이 거래소마다 여러 줄이라 구분되게) */
.s-modal .s-row .s-symtx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.s-modal .s-row .s-symtx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-modal .s-row .s-mex { display: none; font-size: 11.5px; color: var(--tv-text-2, var(--text-3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .s-modal .s-row:not(.s-head) { height: auto; min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
  /* 거래소 · 코인 이름이 길면 (Binance · 이더리움 클래식) 말줄임 대신 두 줄로 */
  .s-modal .s-row .s-mex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; }
  .s-modal .s-row .s-mex .s-mnm { display: inline-block; } /* 코인 이름은 한 덩어리로 (이더리움 / 클래식 으로 갈라지지 않게) */
  .s-modal #searchExSel { max-width: 120px; }
}
/* 휴대폰 · 터치 기기: 키보드가 없으니 메뉴 오른쪽의 단축키 글자(Alt+R · Ctrl+S …)는 감춘다 (정보 글자인 .cu-key 는 그대로) */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .pop .cu-key.sk, .pop .fly-it .key { display: none !important; }
}

/* ---- 디자인 다듬기 (10/24): 본 사이트와 같은 글자 모양 · 조용한 안내 · 빈 화면 없애기 ---- */
.logo { font-weight: 600; letter-spacing: -.01em; }
.logo .wm b { font-weight: 800; }
.srv-tag { color: var(--text-3); font-size: 11px; }
.res-note { padding: 14px 14px 18px; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.empty b { display: block; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }
.empty { line-height: 1.7; }
.scn-chart.idle .kc { flex: 0 0 0; height: 0; min-height: 0; overflow: hidden; }
.evi-idle { max-width: 560px; margin: 28px auto; padding: 0 20px; color: var(--text-2); font-size: 13px; line-height: 1.75; }
.evi-idle .sk svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto 14px; }
.evi-idle h4 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.evi-idle p { margin: 0 0 8px; }
.evi-idle .dim { color: var(--text-3); font-size: 12px; }
.idle-tfs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.evi-idle { margin-top: 40px; }
.idle-tfs .btn { border: 1px solid var(--line-2, var(--line)); border-radius: 6px; padding: 7px 14px; font-size: 13px; color: var(--brand, #5874ff); background: transparent; cursor: pointer; }
.idle-tfs .btn:hover { background: var(--win-2); }

/* ---- 스캐너 카드 (디자인 2차, 10/24) ---- */
.card { background: var(--win); border-color: var(--line); transition: border-color .12s; }
.card:hover { border-color: var(--line-2); }
.card.open { border-color: var(--line-2); background: var(--win); }
.card-h { padding: 12px 12px 12px 14px; gap: 10px; align-items: center; }
.card-h .ch-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.card-h .ch-n { display: flex; align-items: center; gap: 6px; }
.card-h .ch-n b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.card-h .brief { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-h .ch-hits { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-h .ch-hits b { color: var(--text); font-weight: 700; margin-right: 1px; }
.card-h .ch-hits .none, .card-h .ch-hits .busy { color: var(--text-3); }
.card-h > svg.ico { width: 14px; height: 14px; color: var(--text-3); flex: none; transition: transform .15s; }
.card-body { border-top: 1px solid var(--line); }
.card .about { padding: 12px 14px 4px; }
.card .about .sk { color: var(--text-3); opacity: .9; margin-bottom: 8px; }
.card .about .sk svg { display: block; width: 100%; height: 64px; }
.card .about p { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.card .about details { margin: 2px 0 6px; }
.card .about summary { font-size: 12px; color: var(--text-3); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.card .about summary::-webkit-details-marker { display: none; }
.card .about summary::after { content: '+'; font-size: 13px; }
.card .about details[open] summary::after { content: '−'; }
.card .about summary:hover { color: var(--text-2); }
.card .about details p { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.subs { padding: 4px 6px 8px; }
.sub-row { padding: 8px; border-radius: 6px; }
.sub-main { gap: 6px; }
.sr-t { display: flex; align-items: center; gap: 6px; }
.sr-t b { font-size: 13px; font-weight: 600; flex: 1; }
.sr-t .istar { width: 20px; height: 20px; font-size: 13px; color: var(--text-3); opacity: 0; transition: opacity .12s; }
.sub-row:hover .istar, .sr-t .istar.on, .sr-t .istar:focus-visible { opacity: 1; }
.sr-t .istar.on { color: var(--warn); }
@media (hover: none) { .sr-t .istar { opacity: .6; } }
.tfcs { gap: 6px; }
.tfc { border: 1px solid transparent; background: var(--win-2); padding: 2px 8px; gap: 6px; border-radius: 5px; font-size: 11.5px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tfc i { min-width: 0; }
.tfc.zero { background: transparent; color: var(--text-3); font-weight: 500; }
.tfc.zero i { color: var(--text-3); }
.tfc:hover { border-color: var(--line-2); }
.tfc.on { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-2); }
.tfc.on i { color: var(--brand-2); }
.scn-foot { font-size: 11px; color: var(--text-3); padding: 2px 6px 12px; }

/* ---------- 코바 드롭다운 (js/cselect.js) — 브라우저 기본 select 목록 대신 ----------
   단추: 입력칸과 같은 높이 · 테두리, 오른쪽 꺾쇠. 목록: 패널 색 카드, 고른 것은 체크 + 브랜드 색 */
.kd-hide { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
.kd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; text-align: left; cursor: pointer; white-space: nowrap; font: inherit; color: var(--text); }
.kd-btn:not(.inp) { height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--win-2); font-size: var(--fs-sm); }
.kd-btn .kd-v { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.kd-btn .kd-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.kd-btn:hover { border-color: var(--text-3); }
.kd-btn.on { border-color: var(--brand-2); }
.kd-btn.on .kd-chev { transform: rotate(180deg); stroke: var(--brand-2); }
.kd-btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.kd-btn:disabled { opacity: .5; cursor: default; }
.kd-list { position: fixed; z-index: 9000; overflow-y: auto; padding: 4px; background: var(--win); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); outline: none; font-size: var(--fs); animation: kd-in .12s ease-out; }
@keyframes kd-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kd-list { animation: none; } .kd-btn .kd-chev { transition: none; } }
.kd-g { padding: 8px 10px 4px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.kd-o { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--text); cursor: pointer; white-space: nowrap; }
.kd-o span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.kd-o.act { background: var(--hover); }
.kd-o.sel { color: var(--brand-2); font-weight: 600; }
.kd-o.dis { opacity: .4; cursor: default; }
.kd-ck { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--brand-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 예전 select 자리 규칙을 단추에도 */
.field .kd-btn, #miniHead .kd-btn { width: 100%; }
.fd-subrow .kd-btn, .bk-tools .kd-btn { height: 26px; font-size: var(--fs-xs); padding: 0 6px 0 8px; width: auto; }
.pop .tf-custom .kd-btn { width: 70px; }
.pop.tf-pop .tf-custom .kd-btn { width: 64px; }