/* ═══════════════════════════════════════════════════════════════
   views.css — 메뉴와 갈아 끼우는 화면들

   소식·시장·차트·투자일지·전략시험이 한 자리를 나누어 쓴다. 한 쪽에
   다 쌓아 두면 아래로 끝없이 길어져 무엇이 어디 있는지 알 수 없다.

   여기에는 메뉴(nav), 지표 만드는 자리(inds), 투자일지(jr),
   전략 시험(bt) 이 들어 있다. 말풍선과 대화는 chat.css 에 있다.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── 투자일지 ─────────────── */

.jr__form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold-700);
  border-radius: var(--r-md);
  background: rgba(11, 14, 20, .5);
}
.jr__title,
.jr__tags,
.jr__search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .6);
  color: var(--tx-100);
  font: inherit;
}
.jr__title { font-family: var(--f-read); font-size: var(--t-md); }
.jr__body {
  width: 100%;
  min-height: 8em;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .6);
  color: var(--tx-100);
  font-family: var(--f-read);
  font-size: var(--t-sm);
  line-height: 1.8;
  resize: vertical;
}
.jr__title:focus, .jr__body:focus, .jr__tags:focus, .jr__search:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}

.jr__moods { display: flex; gap: 6px; flex-wrap: wrap; }
.jr__mood {
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: none;
  color: var(--tx-500);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.jr__mood:hover { border-color: var(--gold-700); color: var(--tx-300); }
.jr__mood.is-on {
  border-color: var(--gold-500);
  background: rgba(255, 255, 255, .1);
  color: var(--gold-200);
}
.jr__mood-gr { font-family: var(--f-greek); font-size: .82rem; }
.jr__mood-ko { font-size: 10px; letter-spacing: .04em; }

.jr__snap { margin: 0; font-size: var(--t-xs); color: var(--tx-600); }
.jr__actions { display: flex; gap: 8px; }

.jr__filter { display: grid; gap: 8px; margin-bottom: var(--s-4); }
.jr__chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip--pick, .chip--tag {
  padding: 4px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: none;
  color: var(--tx-500);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip--pick:hover, .chip--tag:hover { color: var(--tx-200); border-color: var(--gold-700); }
.chip--pick.is-on, .chip--tag.is-on {
  border-color: var(--gold-500);
  background: rgba(255, 255, 255, .12);
  color: var(--gold-200);
}

.jr__list { display: grid; gap: var(--s-4); }
.jr__empty, .bt__empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--tx-600);
  font-size: var(--t-sm);
}

.jr__item {
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--tx-600);
  border-radius: var(--r-md);
  background: rgba(11, 14, 20, .42);
}
.jr__item[data-tone="up"]    { border-left-color: var(--up); }
.jr__item[data-tone="down"]  { border-left-color: var(--down); }
.jr__item[data-tone="act"]   { border-left-color: var(--gold-400); }
.jr__item[data-tone="learn"] { border-left-color: var(--jade-500); }

.jr__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 6px;
}
.jr__when {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--t-xs);
  color: var(--tx-500);
}
.jr__time { font-family: var(--f-num); }
.jr__edited { color: var(--tx-600); }
.jr__badge {
  font-size: var(--t-xs);
  color: var(--gold-400);
  letter-spacing: .05em;
}
.jr__itemtitle {
  margin: 0 0 6px;
  font-family: var(--f-read);
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--tx-100);
  line-height: 1.5;
}
.jr__text {
  margin: 0 0 var(--s-3);
  font-family: var(--f-read);
  font-size: var(--t-sm);
  line-height: 1.85;
  color: var(--tx-300);
  white-space: pre-wrap;
}
.jr__itemtags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }

.jr__snapshot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .5);
  font-size: var(--t-xs);
}
.jr__snaplabel { color: var(--tx-600); letter-spacing: .08em; }
.jr__snapmark { display: inline-flex; gap: 5px; align-items: baseline; }
.jr__snapmark b { font-weight: 400; color: var(--tx-400); }
.jr__snapmark .num { font-family: var(--f-num); color: var(--tx-200); }
.jr__snapmark .num.up { color: var(--up); }
.jr__snapmark .num.down { color: var(--down); }

.jr__tools { display: flex; gap: 6px; }
.btn--tiny { padding: 3px 10px; font-size: var(--t-xs); }

/* ─────────────── 전략 시험 ─────────────── */

.hint--warn {
  border-left: 2px solid var(--coral-700);
  padding-left: var(--s-3);
  color: var(--tx-400);
}
.hint--warn b { color: var(--gold-200); font-weight: 400; }

.bt__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.bt__build { display: grid; gap: var(--s-4); }
.bt__block {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(11, 14, 20, .42);
}
.bt__h {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--gold-500);
  text-transform: uppercase;
}

.bt__field { display: grid; gap: 5px; margin-bottom: 10px; }
.bt__field > label { font-size: var(--t-xs); color: var(--tx-500); }

.sel, .sel__free, .bt__constval, .bt__num input {
  padding: 6px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .68);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-sm);
}
.sel--sm { font-size: var(--t-xs); padding: 5px 7px; }
.sel--op { color: var(--gold-300); }
.sel:focus, .sel__free:focus, .bt__constval:focus, .bt__num input:focus {
  outline: none; border-color: var(--gold-600);
}

.bt__ind, .bt__rule {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .45);
}
.bt__indid {
  font-family: var(--f-num);
  font-size: 10px;
  color: var(--gold-600);
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
}
.bt__side { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bt__constval { width: 5.5em; font-family: var(--f-num); }

.bt__num { display: grid; gap: 3px; font-size: var(--t-xs); color: var(--tx-500); }
.bt__num input { width: 6em; font-family: var(--f-num); }
.bt__num small { color: var(--tx-600); font-size: 10px; line-height: 1.5; }
.bt__num--wide input { width: 100%; }
.bt__guards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.iconbtn--sm {
  width: 22px; height: 22px;
  font-size: 15px;
  line-height: 1;
  flex: none;
}

.bt__result { display: grid; gap: var(--s-4); min-width: 0; }
.bt__note { margin: 0; font-size: var(--t-xs); color: var(--tx-500); }

.bt__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.bt__stat {
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(11, 14, 20, .5);
}
.bt__stat[data-tone="up"] { border-left: 2px solid var(--up); }
.bt__stat[data-tone="down"] { border-left: 2px solid var(--down); }
.bt__statlabel {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--tx-500);
  margin-bottom: 3px;
}
.bt__statval {
  display: block;
  font-family: var(--f-num);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
}
.bt__stat[data-tone="up"] .bt__statval { color: var(--up); }
.bt__stat[data-tone="down"] .bt__statval { color: var(--down); }
.bt__statnote {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--tx-600);
  line-height: 1.4;
}

.bt__chart {
  height: 240px;
  padding: var(--s-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(11, 14, 20, .45);
}
.bt__chart canvas { display: block; width: 100%; height: 100%; }

.bt__trades { max-height: 340px; overflow: auto; }
.bt__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-xs);
}
.bt__table th {
  position: sticky; top: 0;
  padding: 6px 8px;
  text-align: left;
  font-weight: 400;
  color: var(--tx-500);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.bt__table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--tx-300);
  white-space: nowrap;
}
.bt__table td.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.bt__table td.up { color: var(--up); }
.bt__table td.down { color: var(--down); }
.bt__table tr.is-open td { color: var(--gold-300); }

/* ─────────────── 좁은 화면 ─────────────── */

@media (max-width: 1080px) {
  .bt__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .nav { padding: 0 var(--s-3); }
  .nav__item { padding: 10px var(--s-3) 9px; }
  .nav__ko { display: none; }
  .bt__guards { grid-template-columns: 1fr; }
  .bt__chart { height: 190px; }
}

/* 이름표 없는 작은 스위치 — 지표를 켜고 끌 때 쓴다 */
.switch--bare { gap: 0; }
.switch--bare .switch__label { display: none; }

/* ═══════════════════ 수식 ═══════════════════

   틀에 박힌 지표만으로는 하고 싶은 셈이 늘 남는다. 직접 적을 수
   있게 한 자리다 (js/market/formula.js). */

.fx {
  flex-basis: 100%;
  display: grid;
  gap: 6px;
  padding: 8px 0 2px;
  border-top: 1px dashed var(--line-soft);
  margin-top: 6px;
}
.fx__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.fx__label {
  flex: 1 1 12em;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper-000);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-xs);
}

.fx__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper-000);
  color: var(--ink-100);
  font-family: var(--f-num);
  font-size: var(--t-xs);
  line-height: 1.7;
  resize: vertical;
}
.fx__input:focus {
  outline: none;
  border-color: var(--ink-400);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}
.fx__input.is-bad { border-color: var(--blood-500); }

.fx__say { margin: 0; font-size: 10px; line-height: 1.5; color: var(--tx-600); }
.fx__say.is-ok { color: var(--jade-500); }
.fx__say.is-bad { color: var(--blood-500); }

.switch--tiny .switch__label { font-size: 10px; }

/* ── 무엇을 쓸 수 있나 ── */
.fx__help {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper-050);
  font-size: var(--t-xs);
}
.fx__help h5 {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink-450);
  text-transform: uppercase;
}
.fx__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.fx__help ul { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.fx__help li { line-height: 1.85; color: var(--tx-500); }
.fx__help code {
  font-family: var(--f-num);
  color: var(--ink-200);
  background: rgba(255, 255, 255, .05);
  padding: 1px 4px;
  border-radius: 2px;
}

.fx__samples { display: grid; gap: 5px; margin-bottom: var(--s-3); }
.fx__sample {
  display: grid;
  gap: 2px;
  padding: 6px 9px;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--paper-000);
  cursor: pointer;
}
.fx__sample:hover { border-color: var(--ink-400); }
.fx__sample b { font-weight: 400; color: var(--tx-200); font-size: var(--t-xs); }
.fx__sample code {
  font-family: var(--f-num);
  font-size: 10px;
  color: var(--tx-500);
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}

.fx__warn {
  margin: 0;
  padding-left: 9px;
  border-left: 2px solid var(--blood-700);
  font-size: 10px;
  line-height: 1.65;
  color: var(--tx-500);
}

/* ═══════════════════ 분석 ═══════════════════

   숫자 열둘을 나란히 놓는 자리다. 여기서 지켜야 할 것은 둘뿐이다 —
   자리가 흔들리지 않을 것, 그리고 정렬이 한 번에 될 것.

   숫자의 자리가 흔들리면 눈이 매번 다시 찾는다. 그래서 폭이 고정된
   글꼴에 tabular-nums 를 건다. 값이 1에서 11이 되어도 소수점이 같은
   자리에 남는다. */

.ana { display: grid; gap: var(--s-7); }

.ana__wait {
  padding: var(--s-6);
  text-align: center;
  color: var(--tx-400);
  font-size: var(--t-sm);
}
.ana__wait.is-bad { color: var(--bad); }

.ana__block { display: grid; gap: var(--s-3); }

.ana__h {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
  color: var(--tx-100);
}
.ana__h > span:first-child { font-weight: 500; }
.ana__h small { font-size: var(--t-xxs); color: var(--tx-500); font-weight: 400; }
.ana__spacer { flex: 1 1 auto; }

.ana__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xxs);
  color: var(--tx-500);
}

.ana__why {
  max-width: 76ch;
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--tx-400);
}

.ana__sub { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.ana__sub h4 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tx-200);
}
.ana__sub h4 small { font-size: var(--t-xxs); color: var(--tx-500); font-weight: 400; }

/* ─────────────── 표 ─────────────── */

.tbl {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  background: var(--bg-100);
}

.tbl__head, .tbl__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  min-width: 1120px;
}

.tbl__head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--bg-200);
}
.tbl__h {
  padding: 7px var(--s-2);
  border: 0;
  background: none;
  color: var(--tx-400);
  font: inherit;
  font-size: var(--t-xxs);
  letter-spacing: .02em;
  text-align: right;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tbl__h.is-left { text-align: left; padding-left: var(--s-3); }
.tbl__h:hover { color: var(--tx-100); }
.tbl__h.is-on { color: var(--key-300); }
.tbl__arr { font-style: normal; margin-left: 3px; }

.tbl__row {
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.tbl__row:last-child { border-bottom: 0; }
.tbl__row:hover { background: var(--bg-200); }
.tbl__row.is-on { background: var(--bg-200); border-left-color: var(--key-500); }

.tbl__c {
  padding: 7px var(--s-2);
  font-size: var(--t-sm);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl__c.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}
.tbl__c.is-left {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  text-align: left;
  padding-left: var(--s-3);
}
.tbl__c.is-left b { font-weight: 500; color: var(--tx-100); }
.tbl__c.is-left code {
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  color: var(--tx-500);
}

/* 한 해 폭 안의 자리 — 숫자보다 눈금 위의 점이 빠르다 */
.posbar {
  position: relative;
  display: inline-block;
  width: 38px; height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--bg-400);
}
.posbar i {
  position: absolute;
  top: -2px;
  width: 3px; height: 7px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--key-300);
}
.posbar__v { color: var(--tx-300); }

/* ─────────────── 열지도 ─────────────── */

.heat {
  display: grid;
  gap: 1px;
  overflow-x: auto;
  font-family: var(--f-num);
  font-size: 10px;
}
.heat__c {
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 6px 2px;
  background: var(--bg-100);
  color: var(--tx-200);
  cursor: default;
}
.heat__corner { background: transparent; }
.heat__top, .heat__side {
  background: transparent;
  color: var(--tx-400);
  font-family: var(--f-ui);
  font-size: var(--t-xxs);
}
.heat__side { justify-items: end; padding-right: 7px; white-space: nowrap; }
.heat__c.is-self { color: var(--tx-600); background: var(--bg-050); }

/* ─────────────── 위험 기여도 ───────────────

   막대 둘을 위아래로 겹친다. 위가 비중, 아래가 내는 위험.
   아래가 더 길면 제 몫보다 많이 흔드는 것이고, 그 어긋남이
   숫자보다 먼저 눈에 들어와야 한다. */

.rc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.rc__row {
  display: grid;
  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr) 62px;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  background: var(--bg-100);
  cursor: pointer;
}
.rc__row:hover { background: var(--bg-200); }

.rc__ko {
  font-size: var(--t-sm);
  color: var(--tx-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc__bar { display: grid; gap: 2px; }
.rc__bar i { display: block; height: 5px; border-radius: 2px; min-width: 2px; }
.rc__w { background: var(--bg-500); }
.rc__r { background: var(--key-500); }
.rc__r.is-over  { background: var(--up); }
.rc__r.is-under { background: var(--ok); }

.rc__n {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}

.rc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s-4);
  font-size: var(--t-xxs);
  color: var(--tx-500);
}
.rc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.rc__key { width: 12px; height: 5px; border-radius: 2px; display: inline-block; }
.rc__key--w { background: var(--bg-500); }
.rc__key--r { background: var(--key-500); }

/* ─────────────── 투자선 ─────────────── */

.fr {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
  padding: var(--s-2);
}
.fr__cv { width: 100%; display: block; }
.fr__say {
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--tx-300);
  max-width: 76ch;
}

/* ─────────────── 월별 격자 ─────────────── */

.mgwrap { overflow-x: auto; }
.mg {
  display: grid;
  gap: 1px;
  min-width: 560px;
  font-family: var(--f-num);
  font-size: 10px;
}
.mg__c {
  display: grid;
  place-items: center;
  padding: 5px 2px;
  background: var(--bg-100);
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
}
.mg__c.is-empty { background: var(--bg-050); }
.mg__corner { background: transparent; }
.mg__top, .mg__side {
  background: transparent;
  color: var(--tx-400);
  font-family: var(--f-ui);
  font-size: var(--t-xxs);
}
.mg__side { justify-items: end; padding-right: 7px; white-space: nowrap; }
.mg__year {
  background: var(--bg-200);
  font-weight: 600;
  border-left: 1px solid var(--line);
}
.mg__avg {
  background: var(--bg-200);
  border-top: 1px solid var(--line-hard);
  font-weight: 600;
}
.mg__c.up { color: var(--up); }
.mg__c.down { color: var(--down); }

/* ─────────────── 분포 ─────────────── */

.dist {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
  padding: var(--s-2);
}
.dist__cv { width: 100%; display: block; }

.dist__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.dstat { display: grid; gap: 2px; padding: 7px var(--s-3); background: var(--bg-100); }
.dstat__k { font-size: 10px; letter-spacing: .08em; color: var(--tx-500); }
.dstat__v {
  font-family: var(--f-num);
  font-size: var(--t-sm);
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
}

/* ─────────────── 롤링 ───────────────

   최악에서 최선까지를 눈금 하나에 눕히고, 가운뎃값에 표를 세운다.
   숫자 셋을 나란히 적는 것보다 폭이 먼저 보인다 — 그 폭이 이
   판에서 말하려는 것이다. */

.roll { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.roll__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  background: var(--bg-100);
}
.roll__k { font-size: var(--t-xs); color: var(--tx-400); }

.roll__scale {
  position: relative;
  height: 7px;
  border-radius: 3px;
  background: var(--bg-300);
}
.roll__span {
  position: absolute;
  top: 0; height: 100%;
  border-radius: 3px;
  background: var(--key-dim);
  border: 1px solid var(--key-500);
}
.roll__med {
  position: absolute;
  top: -3px;
  width: 2px; height: 13px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--tx-100);
}
.roll__zero {
  position: absolute;
  top: -2px;
  width: 1px; height: 11px;
  background: var(--tx-500);
}
.roll__zero[hidden] { display: none; }

.roll__n {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--f-num);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roll__n b { font-weight: 500; }
.roll__n span { color: var(--tx-600); }
.roll__neg {
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  color: var(--tx-400);
  white-space: nowrap;
}

/* ─────────────── 한 줄로 ─────────────── */

.ana__lines { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ana__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 8px var(--s-3);
  border: 0;
  background: var(--bg-100);
  color: var(--tx-300);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
}
.ana__line:hover { background: var(--bg-200); }
.ana__line b {
  min-width: 9ch;
  font-weight: 500;
  color: var(--tx-100);
}

@media (max-width: 720px) {
  .heat { font-size: 9px; }
  .heat__c { min-width: 28px; }
  .roll__row { grid-template-columns: 48px minmax(0, 1fr); row-gap: 6px; }
  .roll__n, .roll__neg { grid-column: 2; }
}

/* ═══════════════════ 시험 화면의 갈래 ═══════════════════ */

.btpane[hidden] { display: none; }
#btTabs { margin-bottom: var(--s-4); }

.cvbox {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
  padding: var(--s-2);
}
.cvbox canvas { width: 100%; display: block; }

/* ─────────────── 비중 ─────────────── */

.mix { display: grid; gap: var(--s-5); }

.mix__form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-4);
}
.mix__block {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}

.mix__rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }

.mix__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 62px auto;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  background: var(--bg-200);
  cursor: pointer;
}
.mix__row.is-on { background: var(--bg-300); }
.mix__ko {
  font-size: var(--t-sm);
  color: var(--tx-200);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix__row.is-on .mix__ko { color: var(--tx-100); }
.mix__row code { font-family: var(--f-num); font-size: 10px; color: var(--tx-500); }
.mix__w {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-000);
  color: var(--tx-100);
  font-family: var(--f-num);
  font-size: var(--t-xs);
  text-align: right;
}
.mix__w:disabled { opacity: .3; }
.mix__pctsign { font-size: var(--t-xxs); color: var(--tx-500); }

.mix__sum { font-size: var(--t-xs); color: var(--tx-400); }
.mix__sum.is-warn { color: var(--warn); }

.mix__out { display: grid; gap: var(--s-4); }

/* 되돌리기가 값을 했나 — 이 판의 물음이다 */
.mix__verdict, .map__verdict {
  display: grid;
  gap: 3px;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--tx-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-100);
}
.mix__verdict b, .map__verdict b { color: var(--tx-100); font-weight: 500; font-size: var(--t-sm); }
.mix__verdict span, .map__verdict span { font-size: var(--t-xs); color: var(--tx-400); line-height: 1.7; }
.mix__verdict.is-good, .map__verdict.is-good { border-left-color: var(--ok); }
.mix__verdict.is-bad, .map__verdict.is-bad { border-left-color: var(--bad); }

.mix__each { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mix__eachrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 80px;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  background: var(--bg-100);
  font-size: var(--t-sm);
}
.mix__eachrow .num {
  text-align: right;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
}

.mix__dca { display: grid; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ─────────────── 지도 ─────────────── */

.map { display: grid; gap: var(--s-5); }

.map__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}

.map__out { display: grid; gap: var(--s-4); }

.map__gridwrap { display: grid; gap: var(--s-2); overflow-x: auto; }
.map__axis { font-size: var(--t-xxs); color: var(--tx-500); }

.map__grid {
  display: grid;
  gap: 1px;
  min-width: 480px;
  font-family: var(--f-num);
  font-size: 10px;
}
.map__c {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 6px 2px;
  background: var(--bg-100);
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.map__corner, .map__top, .map__side {
  background: transparent;
  color: var(--tx-400);
  font-family: var(--f-ui);
  font-size: var(--t-xxs);
}
.map__side { justify-items: end; padding-right: 6px; }
.map__corner { font-size: 9px; }
/* 가장 좋았던 칸. 봉우리가 뾰족한지는 이 칸의 둘레를 보면 안다. */
.map__c.is-best {
  outline: 2px solid var(--tx-100);
  outline-offset: -2px;
  font-weight: 600;
}

.map__scale {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  color: var(--tx-500);
}
.map__scale i {
  flex: 0 0 120px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(41, 98, 255, .05), rgba(41, 98, 255, .73));
}

.map__wf { display: grid; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .mix__form { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════ 밑에 깔린 것 ═══════════════════ */

.macro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}

.mcard {
  display: grid;
  gap: 5px;
  padding: var(--s-3);
  background: var(--bg-100);
  cursor: help;
}
.mcard.is-bad { cursor: default; }

.mcard__head { display: flex; align-items: baseline; gap: var(--s-2); }
.mcard__ko { font-size: var(--t-xs); color: var(--tx-300); }
.mcard__gr {
  font-family: var(--f-greek);
  font-size: var(--t-xs);
  color: var(--tx-600);
  margin-left: auto;
}

.mcard__v { display: flex; align-items: baseline; gap: var(--s-2); }
.mcard__v b {
  font-family: var(--f-num);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
}
.mcard__v.down b { color: var(--bad); }
.mcard__v span {
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  font-variant-numeric: tabular-nums;
}

.mcard__cv { width: 100%; display: block; }
.mcard__pos { font-size: 10px; color: var(--tx-500); }
.mcard__err { font-size: var(--t-xxs); color: var(--tx-500); }

/* 열쇠가 없을 때 — 비워 두지 않고 무엇이 없는지 적는다 */
.needkey {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-md);
  background: var(--bg-100);
  max-width: 76ch;
}
.needkey b { color: var(--tx-100); font-weight: 500; font-size: var(--t-sm); }
.needkey span { font-size: var(--t-xs); line-height: 1.7; color: var(--tx-400); }
.needkey__row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }

/* ═══════════════════ 재무 ═══════════════════ */

.fin {
  flex: 0 0 auto;
  padding: var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg-100);
}
.fin[hidden] { display: none; }
.fin__body { display: grid; gap: var(--s-3); }

.finwrap { overflow-x: auto; }
.fin__grid {
  display: grid;
  gap: 1px;
  min-width: 520px;
  font-family: var(--f-num);
  font-size: var(--t-xs);
}
.fin__c {
  display: grid;
  place-items: center;
  padding: 6px 4px;
  background: var(--bg-200);
  color: var(--tx-100);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fin__c.is-empty { background: var(--bg-050); }
.fin__c.up { color: var(--up); }
.fin__c.down { color: var(--down); }
.fin__top, .fin__side {
  background: transparent;
  color: var(--tx-400);
  font-family: var(--f-ui);
  font-size: var(--t-xxs);
}
.fin__side { justify-items: end; padding-right: 8px; }

/* ═══════════════════ 일지 성적표 ═══════════════════ */

.jscore {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}

.jscore__wait {
  font-size: var(--t-xs);
  color: var(--tx-400);
  line-height: 1.7;
}

.jscore__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.jscore__head > span:first-child { font-size: var(--t-md); font-weight: 500; color: var(--tx-100); }
.jscore__head small { font-size: var(--t-xxs); color: var(--tx-500); }

.jscore__moods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.jscore__mood {
  display: grid;
  gap: 6px;
  padding: var(--s-3);
  background: var(--bg-200);
  border-top: 2px solid var(--tx-600);
}
.jscore__mood[data-tone="up"]    { border-top-color: var(--up); }
.jscore__mood[data-tone="down"]  { border-top-color: var(--down); }
.jscore__mood[data-tone="act"]   { border-top-color: var(--key-500); }
.jscore__mood[data-tone="learn"] { border-top-color: var(--ok); }

.jscore__moodhead { display: flex; align-items: baseline; gap: var(--s-2); }
.jscore__gr { font-family: var(--f-greek); font-size: var(--t-sm); color: var(--tx-400); }
.jscore__ko { font-size: var(--t-sm); color: var(--tx-100); }
.jscore__cnt { margin-left: auto; font-family: var(--f-num); font-size: 10px; color: var(--tx-500); }

.jscore__cell {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-2);
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.jscore__cell.is-thin { opacity: .5; }
.jscore__k { font-size: 10px; color: var(--tx-500); }
.jscore__v {
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}
.jscore__n { font-size: 10px; color: var(--tx-400); text-align: right; }

.jscore__verdict {
  padding: var(--s-3);
  border-left: 2px solid var(--tx-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bg-050);
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--tx-300);
  max-width: 78ch;
}
.jscore__verdict.is-good { border-left-color: var(--ok); }
.jscore__verdict.is-bad  { border-left-color: var(--warn); }
.jscore__verdict.is-thin { border-left-color: var(--tx-600); color: var(--tx-400); }

.jscore__tags { display: grid; gap: var(--s-2); }
.jscore__tags h5 {
  margin: 0;
  font-size: var(--t-xxs);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--tx-500);
}
.jscore__taglist { display: flex; flex-wrap: wrap; gap: 5px; }
.jscore__tag {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  color: var(--tx-300);
}
.jscore__tag.up { color: var(--up); border-color: var(--up-line); }
.jscore__tag.down { color: var(--down); border-color: var(--down-line); }
.jscore__tag.is-thin { color: var(--tx-500); }

/* ═══════════════════ 설정의 열쇠 칸 ═══════════════════ */

.keyrow { display: flex; align-items: center; gap: var(--s-2); }
.keyin {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-000);
  color: var(--tx-100);
  font-family: var(--f-num);
  font-size: var(--t-xs);
  letter-spacing: .06em;
}
.keyin:focus { outline: none; border-color: var(--key-500); }

.row__get {
  margin-left: auto;
  font-size: var(--t-xxs);
  color: var(--key-300);
}
.row__get:hover { text-decoration: underline; }

.row__note--warn {
  padding-left: var(--s-3);
  border-left: 2px solid var(--warn);
}

/* ═══════════════════ 장부 ═══════════════════

   숫자를 적는 화면이라 칸이 많다. 칸이 많으면 어디를 채워야 하는지
   모르게 되므로, 고른 갈래에 필요한 칸만 남기고 나머지는 아예 없앤다.
   흐리게 두면 "왜 못 쓰지" 를 묻게 되고, 없으면 안 묻는다. */

.bookwrap { display: grid; gap: var(--s-4); }
.bk { display: grid; gap: var(--s-5); }

.bk__empty {
  padding: var(--s-6);
  text-align: center;
  color: var(--tx-400);
  font-size: var(--t-sm);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

.bk__block { display: grid; gap: var(--s-3); }

/* ── 적는 자리 ── */

.bk__form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--key-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-100);
}

.bk__kinds { display: flex; gap: 2px; flex-wrap: wrap; }
.bk__kinds button {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-200);
  color: var(--tx-400);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bk__kinds button:hover { color: var(--tx-100); background: var(--bg-300); }
.bk__kinds button.is-on {
  color: var(--key-300);
  background: var(--key-dim);
  border-color: var(--key-500);
}

.bk__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
}
.bk__field { display: grid; gap: 4px; }
.bk__field > span { font-size: var(--t-xxs); color: var(--tx-500); }
.bk__field input {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-000);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-sm);
  font-family: var(--f-num);
  min-width: 0;
}
.bk__field input[type="text"] { font-family: var(--f-ui); }
.bk__field input:focus { outline: none; border-color: var(--key-500); }

.bk__hint {
  min-height: 1.2em;
  font-family: var(--f-num);
  font-size: var(--t-xs);
  color: var(--key-300);
}

.bk__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── 보유 ── */

.bk__pos { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.bk__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(60px, 1fr));
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  background: var(--bg-100);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.bk__row:hover { background: var(--bg-200); }

.bk__id { display: grid; gap: 1px; min-width: 0; }
.bk__id b {
  font-weight: 500;
  color: var(--tx-100);
  font-size: var(--t-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk__id code { font-family: var(--f-num); font-size: 10px; color: var(--tx-500); }

.bk__n {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk__n.up { color: var(--up); }
.bk__n.down { color: var(--down); }

.bk__sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* ── 적어 둔 거래 ── */

.bk__txs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-height: 460px; overflow-y: auto; }

.bk__tx {
  display: grid;
  grid-template-columns: 88px 62px minmax(0, 1.2fr) minmax(0, 1fr) 44px minmax(0, 1.4fr) 24px;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  background: var(--bg-100);
  font-size: var(--t-xs);
}
.bk__tx:hover { background: var(--bg-200); }
/* 갈래마다 왼쪽에 얇은 색 — 사고팔고 넣고 뺀 것이 한눈에 갈린다 */
.bk__tx[data-kind="buy"]      { box-shadow: inset 2px 0 0 var(--up); }
.bk__tx[data-kind="sell"]     { box-shadow: inset 2px 0 0 var(--down); }
.bk__tx[data-kind="div"]      { box-shadow: inset 2px 0 0 var(--ok); }
.bk__tx[data-kind="deposit"]  { box-shadow: inset 2px 0 0 var(--key-500); }
.bk__tx[data-kind="withdraw"] { box-shadow: inset 2px 0 0 var(--tx-500); }
.bk__tx[data-kind="fee"]      { box-shadow: inset 2px 0 0 var(--warn); }

.bk__when { font-family: var(--f-num); color: var(--tx-500); }
.bk__kind { color: var(--tx-300); }
.bk__what { color: var(--tx-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk__note { color: var(--tx-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk__x {
  opacity: 0;
  border: 0; background: none;
  color: var(--tx-500);
  font-size: 14px; line-height: 1;
  cursor: pointer;
}
.bk__tx:hover .bk__x { opacity: 1; }
.bk__x:hover { color: var(--bad); }

.bk__out { display: grid; gap: var(--s-4); }
.bk__cv { width: 100%; display: block; }

.bk__rates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}
.bk__rates .row__note { flex: 1 0 100%; }

.fin__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-300);
  overflow: hidden;
}
.fin__bar i { display: block; height: 100%; background: var(--key-500); }
.fin__bar i.is-over { background: var(--warn); }

/* ═══════════════════ 무너지는 상관 ═══════════════════ */

.cc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.cc__head, .cc__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 56px 72px minmax(90px, 1.2fr) 56px;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-3);
  background: var(--bg-100);
}
.cc__head {
  background: var(--bg-200);
  font-size: var(--t-xxs);
  color: var(--tx-400);
}
.cc__head span:not(:first-child) { text-align: right; }
.cc__row { cursor: pointer; }
.cc__row:hover { background: var(--bg-200); }

.cc__pair {
  font-size: var(--t-sm);
  color: var(--tx-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc__n {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
}
.cc__n.is-thin { color: var(--tx-500); }

.cc__bar { position: relative; display: flex; align-items: center; gap: var(--s-2); }
.cc__bar i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--key-500);
  min-width: 2px;
}
.cc__bar i.is-bad { background: var(--up); }
.cc__bar b {
  font-family: var(--f-num);
  font-size: var(--t-xxs);
  font-weight: 400;
  color: var(--tx-300);
  margin-left: auto;
}

/* ═══════════════════ 스트레스 재생 ═══════════════════ */

.sr__eps { display: flex; gap: 2px; flex-wrap: wrap; }
.sr__eps button {
  display: grid;
  gap: 1px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
  color: var(--tx-400);
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.sr__eps button:hover { background: var(--bg-200); color: var(--tx-100); }
.sr__eps button.is-on {
  border-color: var(--key-500);
  background: var(--key-dim);
  color: var(--key-300);
}

.sr__out { display: grid; gap: var(--s-3); }

.sr__rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.sr__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 44px minmax(80px, 1.6fr) 72px 72px;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-3);
  background: var(--bg-100);
  cursor: pointer;
}
.sr__row:hover { background: var(--bg-200); }

.sr__ko { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sr__ko b {
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--tx-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 갈음한 것에는 반드시 표를 단다 — 지어낸 값이 진짜처럼 보이면 안 된다 */
.sr__est {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-dim, rgba(232, 163, 61, .16));
  color: var(--warn);
  font-size: 9px;
}

.sr__w { text-align: right; font-family: var(--f-num); font-size: var(--t-xxs); color: var(--tx-500); }
.sr__bar { display: block; }
.sr__bar i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--down);
  min-width: 2px;
}
.sr__n {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
}
.sr__n.up { color: var(--up); }
.sr__n.down { color: var(--down); }

.ana__why.is-warn {
  padding-left: var(--s-3);
  border-left: 2px solid var(--warn);
  color: var(--tx-300);
}

/* ═══════════════════ 배당 ═══════════════════ */

.divs__body { display: grid; gap: var(--s-4); }

.dv { display: grid; gap: 3px; }
.dv__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 84px;
  align-items: center;
  gap: var(--s-3);
}
.dv__y { font-family: var(--f-num); font-size: var(--t-xxs); color: var(--tx-500); }
.dv__bar { height: 12px; border-radius: 2px; background: var(--bg-300); overflow: hidden; }
.dv__bar i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.dv__v {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
}

/* ═══════════════════ 규칙 감시 ═══════════════════ */

.jrules {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}

.jrules__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-200);
}
.jr__val {
  width: 76px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-000);
  color: var(--tx-100);
  font-family: var(--f-num);
  font-size: var(--t-xs);
  text-align: right;
}
.jr__note {
  flex: 1 1 180px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-000);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-xs);
}
.jr__val:focus, .jr__note:focus { outline: none; border-color: var(--key-500); }

.jrules__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.jrule {
  display: grid;
  gap: 4px;
  padding: 9px var(--s-3);
  background: var(--bg-100);
  border-left: 2px solid transparent;
}
.jrule.is-good { border-left-color: var(--ok); }
.jrule.is-bad  { border-left-color: var(--bad); }
.jrule.is-off  { opacity: .45; }

.jrule__top { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.jrule__top b { font-weight: 500; font-size: var(--t-sm); color: var(--tx-100); }
.jrule__when { font-family: var(--f-num); font-size: var(--t-xxs); color: var(--tx-500); }
.jrule__x {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--tx-500);
  font-size: var(--t-xxs);
  cursor: pointer;
  padding: 0 4px;
}
.jrule__x:hover { color: var(--tx-100); }

.jrule__note { font-size: var(--t-xs); color: var(--tx-400); }
.jrule__say { font-size: var(--t-xs); line-height: 1.65; color: var(--tx-300); }

@media (max-width: 860px) {
  .bk__row { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(56px, 1fr)); }
  .bk__row > :nth-child(5), .bk__row > :nth-child(6) { display: none; }
  .bk__tx { grid-template-columns: 76px 56px minmax(0, 1fr) minmax(0, 1fr) 24px; }
  .bk__tx > :nth-child(5), .bk__tx > :nth-child(6) { display: none; }
  .cc__head, .cc__row { grid-template-columns: minmax(0, 1.4fr) 50px 62px minmax(70px, 1fr); }
  .cc__head > :last-child, .cc__row > :last-child { display: none; }
  .sr__row { grid-template-columns: minmax(0, 1.4fr) 40px minmax(60px, 1fr) 64px; }
  .sr__row > :last-child { display: none; }
}

/* 반쪽인 해 — 받아 온 구간이 해 가운데서 시작했거나 올해가 안 끝났다.
   지우지 않고 옅게 둔다. 없으면 "왜 빠졌지" 를 묻게 된다. */
.dv__row.is-partial { opacity: .42; }
.dv__row.is-partial .dv__bar i { background: var(--tx-500); }

/* ═══════════════════ 흐르는 시세 ═══════════════════ */

.livedot {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.livedot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tx-600);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 살아 있으면 숨을 쉰다. 켜져 있다는 것만 알리면 되므로 아주 옅게. */
.livedot[data-state="live"]::before {
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(38, 166, 154, .6);
  animation: livePulse 2.4s ease-out infinite;
}
.livedot[data-state="quiet"]::before { background: var(--tx-400); }
.livedot[data-state="connecting"]::before,
.livedot[data-state="retry"]::before { background: var(--warn); }
.livedot[data-state="off"]::before { background: var(--tx-600); }

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 166, 154, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(38, 166, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .livedot[data-state="live"]::before { animation: none; }
}

/* 흐르는 값이 들어온 자리 — 잠깐만 밝다 */
.chart__price .px.is-live { animation: livePx 1.2s var(--ease); }
@keyframes livePx { from { color: var(--key-300); } }

/* ═══════════════════ 부를 때 나오는 사람 ═══════════════════

   ── 한 사람에서 열 사람으로 ──
   전에는 먹 영상 한 편을 SVG 필터로 오려 냈다. 밝기를 뒤집어 알파로
   삼는 방식이라 배경의 얼룩까지 함께 남았고, 뒤에 있는 것이 비쳐
   보여 겹칠 때 위화감이 컸다.

   지금은 그림에서 사람만 오려 낸 것 열 장을 쓴다(assets/media/cast).
   배경이 아예 없으므로 겹칠 것이 없다. 필터도 필요 없다.

   ── 말풍선은 왜 생겼나 ──
   전에는 글자가 그림 곁에 그냥 떠 있었다. 사람이 하나일 때는 그것으로
   되었는데, 열로 늘자 '누가 말하는가' 가 흐려졌다. 풍선은 그 하나를
   위해 있다 — 이 말은 지금 여기 나온 이 사람이 하는 말이다. */

.yuria-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
}

.yuria {
  position: absolute;
  right: clamp(10px, 3vw, 48px);
  bottom: clamp(52px, 10vh, 96px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--s-3);
  max-width: min(560px, 84vw);
  /* 판이 아니다. 배경도 테두리도 그늘도 없다. */
  background: none;
  border: 0;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-in-out), transform .5s var(--ease-in-out);
  cursor: pointer;
}
.yuria.is-in { opacity: 1; transform: translateY(0); }
.yuria.is-out { opacity: 0; transform: translateY(10px); }

/* ── 사람 ──
   그림에서 오려 낸 것이라 배경이 없다. 그늘 하나만 아래에 깔아 둔다 —
   그것이 없으면 화면에 붙어 있는 스티커로 보인다. */
.yuria__art {
  width: clamp(104px, 15vw, 168px);
  line-height: 0;
}
.yuria__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .75)) contrast(1.06);
}

/* ── 말풍선 ──
   사람이 열로 늘면서 '누가 말하는가' 가 흐려졌다. 풍선은 그 하나를
   위해 있다.

   꼬리는 테두리를 함께 그려야 하므로 네모 둘을 겹쳐 만든다 — 바깥쪽이
   테두리 빛, 안쪽이 바탕 빛이다. */
.yuria__say {
  position: relative;
  display: grid;
  gap: 3px;
  padding: var(--s-3) var(--s-4);
  margin-bottom: 14px;
  border: 1px solid var(--line-hard);
  border-radius: 14px;
  background: rgba(22, 27, 40, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.yuria__say::before,
.yuria__say::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 16px;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-right-color: var(--line-hard);
  border-left: 0;
}
.yuria__say::after {
  left: -8px;
  border-right-color: rgba(22, 27, 40, .96);
}

.yuria__kind {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--tx-500);
}
.yuria__head {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tx-100);
}
.yuria__why {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--tx-300);
}
.yuria__hint {
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--key-500);
}

.yuria.is-up .yuria__head { color: var(--up); }
.yuria.is-down .yuria__head { color: var(--down); }

.yuria__x {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border: 1px solid var(--line-hard);
  border-radius: 99px;
  background: var(--bg-200);
  color: var(--tx-400);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.yuria__x:hover { color: var(--tx-100); }

/* 좁은 화면에서는 사람을 줄이고 풍선을 넓힌다 */
@media (max-width: 700px) {
  .yuria {
    right: 8px;
    left: 8px;
    max-width: none;
    gap: var(--s-2);
  }
  .yuria__art { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .yuria { transition: none; }
}

/* ═══════════════════ 투자주체 ═══════════════════ */

.flows__body { display: grid; gap: var(--s-4); }
.flow__cv { width: 100%; display: block; }

.flow__legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xxs);
  color: var(--tx-400);
}
.flow__legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow__legend i { width: 11px; height: 2px; border-radius: 2px; }

.flow__tbl { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.flow__head, .flow__row {
  display: grid;
  grid-template-columns: minmax(70px, 1.2fr) repeat(4, minmax(58px, 1fr));
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-3);
  background: var(--bg-100);
}
.flow__head {
  background: var(--bg-200);
  font-size: var(--t-xxs);
  color: var(--tx-400);
}
.flow__head span:not(:first-child) { text-align: right; }

.flow__ko {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--tx-100);
}
.flow__ko i { width: 10px; height: 2px; border-radius: 2px; flex: 0 0 auto; }

.flow__n {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}
.flow__n.up { color: var(--up); }
.flow__n.down { color: var(--down); }
.flow__n.is-thin { color: var(--tx-500); font-size: var(--t-xxs); }

/* ═══════════════════ 짜 놓은 전략 ═══════════════════ */

.plays {
  display: grid;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
}
.plays[hidden] { display: none; }

.plays__group { display: grid; gap: var(--s-3); }
.plays__tag {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tx-100);
}
.plays__tag small { font-size: var(--t-xxs); font-weight: 400; color: var(--tx-500); }

.plays__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-3);
}

.play {
  display: grid;
  gap: 6px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-200);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.play:hover { border-color: var(--key-500); background: var(--bg-300); }

.play__head { display: flex; align-items: baseline; gap: var(--s-2); }
.play__gr { font-family: var(--f-greek); font-size: var(--t-sm); color: var(--tx-400); }
.play__ko { font-size: var(--t-md); font-weight: 500; color: var(--tx-100); }

.play__belief { font-size: var(--t-xs); line-height: 1.65; color: var(--tx-300); }
/* 무너지는 자리를 같은 크기로 적는다. 작게 적으면 안 읽고, 안 읽으면
   안 되는 구간에서 "전략이 틀렸다" 며 고치기 시작한다. */
.play__breaks {
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--tx-400);
  padding-left: var(--s-3);
  border-left: 2px solid var(--warn);
}
.play__breaks span {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--warn);
  margin-bottom: 1px;
}

@media (max-width: 720px) {
  .flow__head, .flow__row { grid-template-columns: minmax(56px, 1fr) repeat(3, minmax(48px, 1fr)); }
  .flow__head > :last-child, .flow__row > :last-child { display: none; }
  .yuria { right: 8px; left: 8px; width: auto; }
}

/* ═══════════════════ 하루 안 ═══════════════════ */

.intra__body { display: grid; gap: var(--s-4); }
.hour__cv { width: 100%; display: block; }

.gap__two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gap__side {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--bg-100);
  border-top: 2px solid var(--tx-600);
}
.gap__side.is-up { border-top-color: var(--up); }
.gap__side.is-down { border-top-color: var(--down); }
.gap__k { font-size: var(--t-xs); color: var(--tx-300); }

.gap__rows { display: grid; gap: 3px; }
.gap__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--tx-500);
}
.gap__row b {
  font-family: var(--f-num);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}
.gap__row b.up { color: var(--up); }
.gap__row b.down { color: var(--down); }

/* ═══════════════════ 열지도 ═══════════════════

   칸 크기는 같게 두고 색만 등락으로 칠한다. 시가총액으로 크기를
   나누는 방식도 흔하지만, 여기 목록에는 지수와 원자재가 섞여 있어
   그 방식은 뜻이 없다. */

.hm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 2px;
}
.hm__cell {
  display: grid;
  gap: 1px;
  padding: 9px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg-100);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .6s var(--ease), border-color var(--dur) var(--ease);
}
.hm__cell:hover { border-color: var(--line-hard); }
.hm__cell.is-strong { border-color: var(--line-hard); }
.hm__ko {
  font-size: var(--t-xs);
  color: var(--tx-200);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm__pct {
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-100);
}

/* ═══════════════════ 오늘 이상한 것 ═══════════════════ */

.odd { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.odd__row {
  display: grid;
  grid-template-columns: minmax(80px, 1.2fr) minmax(60px, 2fr) 74px 58px;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border: 0;
  background: var(--bg-100);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.odd__row:hover { background: var(--bg-200); }
.odd__ko {
  font-size: var(--t-sm);
  color: var(--tx-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odd__bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-300); overflow: hidden; }
.odd__bar i { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.odd__bar i.up { background: var(--up); }
.odd__bar i.down { background: var(--down); }
.odd__n, .odd__s {
  text-align: right;
  font-family: var(--f-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tx-200);
}
.odd__s { color: var(--tx-500); font-size: var(--t-xs); }
.odd__s.is-odd { color: var(--warn); font-weight: 600; }

/* 주체 표에 칸이 셋·넷인 것 */
.flow__row--3 { grid-template-columns: minmax(70px, 1.2fr) repeat(2, minmax(58px, 1fr)); }
.flow__row--4 { grid-template-columns: minmax(70px, 1.2fr) repeat(3, minmax(58px, 1fr)); }
.flow__ko.up { color: var(--up); }
.flow__ko.down { color: var(--down); }

@media (max-width: 620px) {
  .odd__row { grid-template-columns: minmax(70px, 1fr) 66px 52px; }
  .odd__bar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   자료 — 올린 표 (Πίναξ)
   ═══════════════════════════════════════════════════════════════ */

/* 들이는 자리. 판이 크고 조용해야 '여기다' 로 읽힌다 — 작은 단추로
   두면 아무도 못 찾는다. */
.dv__drop {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
  margin-bottom: var(--s-4);
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-lg);
  background: var(--bg-100);
  color: var(--tx-300);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dv__drop:hover, .dv__drop:focus-visible { border-color: var(--key-500); background: var(--bg-200); }
.dv__drop.is-over { border-color: var(--key-500); background: var(--bg-300); border-style: solid; }
.dv__drop .ico { width: 26px; height: 26px; background: var(--tx-400); }
.dv__drop b { color: var(--tx-100); font-weight: 600; }
.dv__formats { font-family: var(--f-num); font-size: var(--t-xs); color: var(--tx-500); letter-spacing: .08em; }

/* 안 보내는 것이 이 화면의 값이다. 흐리게 두되 읽을 수 있게 둔다. */
.dv__safe { max-width: 52ch; font-size: var(--t-xs); line-height: 1.6; color: var(--tx-500); }

.dv__sheets, .dv__chips, .dv__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dv__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3); margin: var(--s-4) 0 var(--s-3);
}
.dv__hint { font-size: var(--t-xs); color: var(--tx-500); }
.dv__pick { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--tx-400); }
.dv__ypick { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.dv__pickh { font-size: var(--t-xs); color: var(--tx-400); }

.dv__select {
  max-width: 240px;
  padding: 5px 8px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  background: var(--bg-200);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-xs);
}

/* 무엇으로 읽혔나 — 여기가 틀리면 아래가 전부 틀린다.
   그래서 표보다 위에, 표보다 또렷하게 둔다. */
.dv__cols {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.dv__col {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg-100);
  font-size: var(--t-xs);
}
.dv__colname { color: var(--tx-200); }
.dv__type { font-family: var(--f-num); letter-spacing: .04em; }
.dv__type.is-date { color: var(--key-500); }
.dv__type.is-number { color: var(--ok); }
.dv__type.is-text { color: var(--tx-500); }
.dv__type.is-empty { color: var(--tx-600); }
.dv__fill { color: var(--warn); font-family: var(--f-num); }

/* 넓은 표는 제 안에서만 옆으로 흐른다 — 화면 전체가 흔들리면 안 된다 */
.dv__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.dv__table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.dv__table th, .dv__table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  text-align: left;
}
.dv__table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-200);
  color: var(--tx-300);
  font-weight: 600;
}
.dv__table td { color: var(--tx-200); }
.dv__table td.is-num { font-family: var(--f-num); text-align: right; }
.dv__table td.is-empty { color: var(--tx-600); }
.dv__table tbody tr:hover td { background: var(--bg-100); }
.dv__table--stat td:first-child { color: var(--tx-100); }

.dv__plot {
  height: 320px; margin-bottom: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-100);
}
.dv__plot--short { height: 190px; }
.dv__cv { display: block; width: 100%; height: 100%; }

.dv__legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.dv__key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tx-300); }
.dv__key i { width: 14px; height: 3px; border-radius: 2px; }

.dv__h {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-sm); color: var(--tx-200); font-weight: 600;
  letter-spacing: .02em;
}

.dv__stats {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--s-3);
}
.dv__stat {
  display: grid; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-100);
}
.dv__statl { font-size: var(--t-xs); color: var(--tx-400); }
.dv__statv { font-family: var(--f-num); font-size: 1.15rem; color: var(--tx-100); }
.dv__statw { font-size: var(--t-xs); color: var(--tx-500); }

/* 곁말. 숫자보다 흐리되, 읽히기는 해야 한다 — 여기 적는 것은 대개
   "이 숫자를 어디까지 믿을 것인가" 이고 그것이 숫자보다 중요하다. */
.dv__note {
  margin: 0 0 var(--s-4);
  font-size: var(--t-xs); line-height: 1.7; color: var(--tx-400);
  max-width: 78ch;
}
.dv__verdict {
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  border-left: 2px solid var(--key-500);
  background: var(--bg-100);
  font-size: var(--t-xs); line-height: 1.7; color: var(--tx-300);
}
.dv__verdict b { color: var(--tx-100); }

.dv__list { margin: 0 0 var(--s-3); padding-left: var(--s-4); }
.dv__list li { font-size: var(--t-xs); line-height: 1.9; color: var(--tx-300); }
.dv__list b { color: var(--tx-100); }

.dv__reg { margin-bottom: var(--s-3); }

.dv__fail {
  padding: var(--s-5);
  border: 1px solid var(--up-line); border-radius: var(--r-lg);
  background: var(--up-soft);
}
.dv__failh { color: var(--up); font-weight: 600; margin-bottom: var(--s-2); }
.dv__fail p { margin: 0 0 var(--s-2); font-size: var(--t-sm); color: var(--tx-200); line-height: 1.7; }
.dv__failwhy { color: var(--tx-400) !important; font-size: var(--t-xs) !important; }

/* ═══════════════════════════════════════════════════════════════
   격언 — 남들이 한 말 (Γνῶμαι)
   ═══════════════════════════════════════════════════════════════ */

.say__lead, .say__foot, .say__wait {
  max-width: 74ch;
  margin: 0 0 var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.8;
  color: var(--tx-400);
}
.say__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* 말 하나. 왼쪽의 굵은 줄이 인용임을 말한다 — 따옴표 그림을 크게
   그려 넣는 방식도 있지만, 그러면 말보다 장식이 먼저 읽힌다. */
.say {
  padding: var(--s-4) var(--s-4) var(--s-3);
  margin-bottom: var(--s-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--key-500);
  border-radius: var(--r-md);
  background: var(--bg-100);
}
.say.is-unsure { border-left-color: var(--warn); }

.say__text {
  margin: 0 0 var(--s-3);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--tx-100);
  /* 인용부호를 글자로 넣지 않고 여기서 붙인다 — 원문에 이미 있는
     따옴표와 겹쳐 두 겹이 되는 것을 막는다 */
  quotes: "“" "”";
}
.say__text::before { content: open-quote; color: var(--tx-500); }
.say__text::after { content: close-quote; color: var(--tx-500); }

.say__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: 6px; }
.say__who { color: var(--tx-200); font-size: var(--t-sm); }
.say__role { color: var(--tx-500); font-size: var(--t-xs); }
.say__tag {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--tx-400);
  font-size: var(--t-xs);
}

.say__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--tx-500);
}
.say__outlet { color: var(--tx-300); }
.say__kind { color: var(--ok); }
.say__link { color: var(--key-500); text-decoration: none; }
.say__link:hover { text-decoration: underline; }

.say__keep {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line-hard);
  border-radius: 99px;
  background: transparent;
  color: var(--tx-400);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.say__keep:hover { color: var(--tx-100); border-color: var(--tx-400); }
.say__keep.is-on { color: var(--key-500); border-color: var(--key-500); }

/* 확인 못 한 것. 숨기지 않고 적되, 말보다 흐리게 둔다. */
.say__doubt {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--warn);
}
.say__head {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--tx-500);
}

.say__empty {
  padding: var(--s-6) var(--s-5);
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-lg);
  text-align: center;
}
.say__empty b { display: block; margin-bottom: var(--s-2); color: var(--tx-200); }
.say__empty p { margin: 0 auto; max-width: 52ch; font-size: var(--t-xs); line-height: 1.7; color: var(--tx-500); }

.say__group { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); }
.say__groupgr { font-family: var(--f-greek); font-size: var(--t-sm); color: var(--key-500); }
.say__groupko { font-size: var(--t-sm); color: var(--tx-200); }

.say__who-list { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.say__person {
  display: grid; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-100);
}
.say__person b { color: var(--tx-100); font-size: var(--t-sm); }
.say__en { font-size: var(--t-xs); color: var(--tx-400); }

/* 오늘 나온 원문 — 격언이 아니므로 인용 꼴을 쓰지 않는다 */
.say__papers { margin: 0; padding-left: var(--s-4); }
.say__papers li { margin-bottom: 6px; font-size: var(--t-xs); line-height: 1.7; }
.say__papers a { color: var(--tx-200); text-decoration: none; }
.say__papers a:hover { color: var(--key-500); text-decoration: underline; }
.say__papermeta { display: block; color: var(--tx-500); }

/* ═══════════════════════════════════════════════════════════════
   세계 열지도 (Κόσμος)

   칸 넓이는 시가총액, 색은 등락, 묶음은 업종이다. 자리는 자바스크립트가
   재어 넣으므로 여기서는 모양만 정한다.
   ═══════════════════════════════════════════════════════════════ */

.wm__tools {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}
.wm__pills { display: flex; gap: var(--s-2); }

.wm__board {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-050);
  overflow: hidden;
}

/* 업종 덩어리. 테두리만 그린다 — 칠하면 그 위의 종목 색을 흐린다. */
.wm__group {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 3px;
  pointer-events: none;
}
.wm__gname {
  position: absolute;
  top: 1px; left: 5px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tx-400);
  white-space: nowrap;
  overflow: hidden;
}

.wm__cell {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: 0;
  border-radius: 2px;
  font: inherit;
  line-height: 1.15;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background .5s var(--ease);
}
.wm__cell:hover { box-shadow: inset 0 0 0 2px var(--tx-100); z-index: 2; }

.wm__name {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wm__pct { font-family: var(--f-num); font-size: 11px; opacity: .92; }

/* 칸이 좁으면 이름을 지운다. 넘쳐 나온 글자는 이웃 칸을 덮는다. */
.wm__cell.is-small .wm__name { font-size: 10px; }
.wm__cell.is-small .wm__pct { font-size: 9px; }
.wm__cell.is-tiny .wm__name,
.wm__cell.is-tiny .wm__pct { display: none; }

/* 방금 값이 들어온 칸 — 어디가 움직였는지 곁눈에 걸리게 */
@keyframes wmHit { from { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); } }
.wm__cell.is-hit { animation: wmHit 1s var(--ease); }

.wm__note {
  margin: var(--s-3) 0 0;
  max-width: 78ch;
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--tx-400);
}

@media (prefers-reduced-motion: reduce) {
  .wm__cell { transition: none; }
  .wm__cell.is-hit { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   발산 — 조건에 맞는 것을 찾는다 (Ἀπόκρισις)
   ═══════════════════════════════════════════════════════════════ */

.scr__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}
.scr__search {
  flex: 1 1 260px;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  background: var(--bg-100);
  color: var(--tx-100);
  font: inherit;
  font-size: var(--t-sm);
}
.scr__search:focus { border-color: var(--key-500); outline: none; }

.scr__ranges, .scr__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scr__pick { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--tx-400); }

.scr__stage {
  position: relative;
  height: clamp(260px, 42vh, 460px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-100);
  overflow: hidden;
}
.scr__stage canvas { display: block; width: 100%; height: 100%; }

.scr__inds {
  display: grid; gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-4);
}
.scr__indsh { font-size: var(--t-xs); color: var(--tx-400); }

.scr__h {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--tx-200);
}

.scr__stats {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.scr__stat {
  display: grid; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-100);
}
.scr__statl { font-size: var(--t-xs); color: var(--tx-400); }
.scr__statv { font-family: var(--f-num); font-size: 1.1rem; color: var(--tx-100); }
.scr__statw { font-size: var(--t-xs); color: var(--tx-500); }
.scr__stat.is-up .scr__statv { color: var(--up); }
.scr__stat.is-down .scr__statv { color: var(--down); }

/* 알람. 조건이 걸렸을 때만 뜬다 — 늘 떠 있으면 아무도 안 본다. */
.scr__alarm {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-left: 2px solid var(--warn);
  background: var(--bg-100);
  font-size: var(--t-xs); line-height: 1.7; color: var(--tx-300);
}
.scr__alarm b { color: var(--tx-100); }
.scr__alarm.is-up { border-left-color: var(--up); }
.scr__alarm.is-down { border-left-color: var(--down); }

.scr__flows {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.scr__flow {
  display: grid; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--line); border-left-width: 2px; border-radius: var(--r-md);
  background: var(--bg-100);
}
.scr__flow.is-up { border-left-color: var(--up); }
.scr__flow.is-down { border-left-color: var(--down); }
.scr__flowko { font-size: var(--t-xs); color: var(--tx-400); }
.scr__flowv { font-family: var(--f-num); font-size: 1.05rem; color: var(--tx-100); }
.scr__flow.is-up .scr__flowv { color: var(--up); }
.scr__flow.is-down .scr__flowv { color: var(--down); }
.scr__flowu { font-size: var(--t-xs); color: var(--tx-500); }

/* ── 조건 ──
   켠 것만 또렷하게. 안 켠 것은 있되 물러나 있어야 무엇을 켰는지 한눈에
   보인다. */
.scr__rules {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.scr__rule {
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-100);
  opacity: .62;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scr__rule.is-on { opacity: 1; border-color: var(--key-500); }

.scr__ruleh {
  display: flex; align-items: baseline; gap: var(--s-2);
  width: 100%;
  padding: 0;
  border: 0; background: none;
  color: inherit; font: inherit;
  text-align: left;
  cursor: pointer;
}
.scr__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid var(--line-hard); border-radius: 4px;
  color: var(--key-500); font-size: 11px;
}
.scr__rule.is-on .scr__mark { border-color: var(--key-500); }
.scr__rulegr { font-family: var(--f-greek); font-size: var(--t-xs); color: var(--key-500); }
.scr__ruleko { font-size: var(--t-sm); color: var(--tx-100); }
.scr__kr {
  padding: 0 5px;
  border: 1px solid var(--line); border-radius: 99px;
  font-size: 10px; color: var(--tx-500);
}

.scr__why { margin: 6px 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--tx-400); }
.scr__belief {
  margin: var(--s-2) 0 0;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line);
  font-size: var(--t-xs); line-height: 1.7; color: var(--tx-500);
}
.scr__belief b { color: var(--tx-300); }

.scr__fields { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.scr__field { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tx-400); }
.scr__field input {
  width: 78px;
  padding: 4px 7px;
  border: 1px solid var(--line-hard); border-radius: var(--r-sm);
  background: var(--bg-200); color: var(--tx-100);
  font: inherit; font-family: var(--f-num); font-size: var(--t-xs);
}

/* ── 걸린 것 ── */
.scr__hits { display: grid; gap: var(--s-2); }
.scr__hit {
  display: grid; gap: 6px;
  padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-100);
  color: inherit; font: inherit;
  text-align: left;
  cursor: pointer;
}
.scr__hit:hover { border-color: var(--key-500); background: var(--bg-200); }
.scr__hithead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.scr__hitko { color: var(--tx-100); font-size: var(--t-sm); }
.scr__hitsym { font-family: var(--f-num); font-size: var(--t-xs); color: var(--tx-500); }
.scr__hitpx { margin-left: auto; font-family: var(--f-num); color: var(--tx-200); }
.scr__hitchg { font-family: var(--f-num); font-size: var(--t-xs); }
.scr__hitchg.up { color: var(--up); }
.scr__hitchg.down { color: var(--down); }

.scr__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.scr__tag {
  padding: 2px 8px;
  border: 1px solid var(--key-500); border-radius: 99px;
  font-size: var(--t-xs); color: var(--key-300, var(--key-500));
}

.scr__empty {
  padding: var(--s-5);
  border: 1px dashed var(--line-hard); border-radius: var(--r-md);
  text-align: center;
}
.scr__empty b { display: block; margin-bottom: var(--s-2); color: var(--tx-200); }
.scr__empty p { margin: 0 auto; max-width: 56ch; font-size: var(--t-xs); line-height: 1.7; color: var(--tx-500); }

.scr__note {
  margin: var(--s-2) 0 0;
  max-width: 78ch;
  font-size: var(--t-xs); line-height: 1.7; color: var(--tx-400);
}