/* 검증 대시보드 (dash.js 짝). 통장처럼: 흰 바탕, 남색 글자, 가는 줄, 직각. 빨강=이익 · 파랑=손실(국내 관례).
   PC = 왼쪽 요약 고정 + 오른쪽 기록, 900px 이하 = 한 줄(통장 앱 모양). */
.vd {
  --vd-ink: #101a33; --vd-ink2: #4a5163; --vd-ink3: #7a8193; --vd-line: #e3e6ec; --vd-soft: #f5f6f8;
  --vd-up: #d6383a; --vd-down: #2f62d8; --vd-ok: #1f9d55; --vd-bad: #d6383a;
  display: grid; grid-template-columns: clamp(320px, 22vw, 400px) minmax(0, 1fr); align-items: start;
  background: #fff; color: var(--vd-ink);   /* 폭 제한 없이 화면 끝까지(10-18 좌우 여백 과다 지적) */
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.vd * { box-sizing: border-box; }
.vd p, .vd h2 { margin: 0; }
.vd .up { color: var(--vd-up); } .vd .down { color: var(--vd-down); } .vd .flat { color: var(--vd-ink3); }
.vd-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* 왼쪽 */
.vd-side { position: sticky; top: 56px; background: var(--vd-soft); border-right: 1px solid var(--vd-line); min-height: calc(100vh - 56px); padding: 32px 28px 40px; display: flex; flex-direction: column; gap: 34px; }
.vd-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--vd-ink2); }
.vd-from { margin-top: 14px !important; font-size: 14px; color: var(--vd-ink3); }
.vd-big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px !important; word-break: keep-all; }
.vd-pnl { font-size: 18px; font-weight: 700; margin-top: 4px !important; white-space: pre; }
.vd-since { font-size: 13px; color: var(--vd-ink3); margin-top: 10px !important; }
.vd-kv { margin: 18px 0 0; border-top: 1px solid var(--vd-line); }
.vd-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vd-line); font-size: 14px; }
.vd-kv dt { color: var(--vd-ink2); } .vd-kv dd { margin: 0; font-weight: 600; }
.vd-note { font-size: 12px; color: var(--vd-ink3); margin-top: 10px !important; line-height: 1.55; }
.vd-muted { color: var(--vd-ink3); }
.vd-h { font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vd-sub { font-size: 12px; color: var(--vd-ink3); margin-top: 2px !important; }
.vd-state { font-size: 13px; } .vd-state.ok { color: var(--vd-ok); } .vd-state.bad { color: var(--vd-bad); }
.vd-checks { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--vd-line); }
.vd-checks li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0 9px 14px; border-bottom: 1px solid var(--vd-line); font-size: 14px; position: relative; }
.vd-checks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; background: var(--vd-ok); }
.vd-checks li.bad::before { background: var(--vd-bad); }
.vd-ck-k { color: var(--vd-ink2); }
.vd-ck-v { text-align: right; } .vd-ck-v small { display: block; font-size: 11px; color: var(--vd-ink3); }
.vd-mk-row { padding: 12px 0; border-bottom: 1px solid var(--vd-line); }
.vd-mk-row:first-of-type { border-top: 1px solid var(--vd-line); margin-top: 10px; }
.vd-mk-t, .vd-mk-b { display: flex; justify-content: space-between; font-size: 14px; }
.vd-mk-t b { font-weight: 700; } .vd-mk-t .vd-num { font-weight: 700; }
.vd-mk-b { font-size: 12px; color: var(--vd-ink3); margin-top: 6px; }
.vd-bar { position: relative; height: 6px; margin-top: 5px; background: linear-gradient(var(--vd-line), var(--vd-line)) 50% 0 / 1px 100% no-repeat; }
.vd-bar i { position: absolute; top: 0; bottom: 0; background: var(--vd-ink3); }
.vd-bar.me i.up { background: var(--vd-up); } .vd-bar.me i.down { background: var(--vd-down); }
.vd-bar.ref i { background: #b9bfcc; }
.vd-mk-n { font-size: 12px; color: var(--vd-ink3); margin-top: 6px !important; }

/* 오른쪽 */
.vd-main { padding: 26px 36px 60px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.vd-scope { display: flex; gap: 22px; border-bottom: 1px solid var(--vd-line); margin-bottom: -18px; }
.vd-scope button { appearance: none; background: none; border: 0; padding: 8px 0 10px; font: inherit; font-size: 14px; color: var(--vd-ink3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vd-scope button[aria-pressed="true"] { color: var(--vd-ink); font-weight: 700; border-bottom-color: var(--vd-ink); }
.vd-h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 12px; border-bottom: 2px solid var(--vd-ink); }
.vd-h2 small { font-size: 13px; font-weight: 500; color: var(--vd-ink3); letter-spacing: 0; }
.vd-sec > .vd-sub { margin-top: 8px !important; }
.vd-empty { padding: 22px 0; color: var(--vd-ink3); border-bottom: 1px solid var(--vd-line); }

.vd-hold { display: grid; grid-template-columns: minmax(150px, 1.6fr) .9fr .9fr .9fr .8fr .9fr 1.3fr; gap: 4px 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--vd-line); font-size: 14px; }
.vd-hold.vd-head { padding: 10px 0; font-size: 12px; color: var(--vd-ink3); }
.vd-hold .vd-c i { display: none; font-style: normal; color: var(--vd-ink3); }
.vd-name b { font-size: 15px; font-weight: 700; } .vd-name small { display: block; font-size: 12px; color: var(--vd-ink3); }
.vd-pl { text-align: right; } .vd-pl b { display: block; font-weight: 700; } .vd-pl small { font-size: 12px; }
.vd-hold .vd-pl { text-align: left; } .vd-hold .vd-pl b, .vd-hold .vd-pl small { display: inline; margin-right: 6px; }
.vd-rule { font-size: 13px; color: var(--vd-ink2); }
.vd-why { grid-column: 1 / -1; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 6px; font-size: 13px; color: var(--vd-ink2); line-height: 1.6; margin-top: 6px; cursor: pointer; }
.vd-why > b { font-weight: 600; color: var(--vd-ink3); }
.vd-why ul { list-style: none; margin: 0; padding: 0; min-width: 0; }
.vd-why li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vd-why.open li { display: block; -webkit-line-clamp: unset; }
.vd-why li + li { margin-top: 2px; }
.vd-who { display: inline-block; min-width: 46px; font-weight: 600; color: var(--vd-ink); margin-right: 4px; }
.vd-why:hover li { color: var(--vd-ink); }
.vd-hm { display: none; }

.vd-day { display: flex; justify-content: space-between; padding: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--vd-ink2); border-bottom: 1px solid var(--vd-ink); }
.vd-tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--vd-line); }
.vd-tr-t { font-size: 14px; color: var(--vd-ink3); padding-top: 1px; }
.vd-tr-h { font-size: 15px; } .vd-tr-h b { font-weight: 700; } .vd-tr-h small { margin-left: 8px; font-size: 12px; color: var(--vd-ink3); }
.vd-tr-s { font-size: 13px; color: var(--vd-ink3); margin-top: 2px !important; }
.vd-tr .vd-why + .vd-why { margin-top: 3px; }
.vd-tr .vd-pl b { font-size: 16px; }
.vd-more { appearance: none; background: none; border: 1px solid var(--vd-line); padding: 11px; margin-top: 14px; width: 100%; font: inherit; font-size: 14px; color: var(--vd-ink2); cursor: pointer; }
.vd-more:hover { border-color: var(--vd-ink3); }

.vd-cmp { border-top: 2px solid var(--vd-ink); }
.vd-cmp summary { cursor: pointer; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; list-style: none; }
.vd-cmp summary::-webkit-details-marker { display: none; }
.vd-cmp summary span { font-size: 17px; font-weight: 800; }
.vd-cmp summary span::after { content: " +"; color: var(--vd-ink3); font-weight: 400; }
.vd-cmp[open] summary span::after { content: " −"; }
.vd-cmp summary small { font-size: 13px; color: var(--vd-ink3); }
.vd-tw { overflow-x: auto; }
.vd-cmp table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.vd-cmp th { text-align: left; font-size: 12px; font-weight: 500; color: var(--vd-ink3); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--vd-line); }
.vd-cmp td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--vd-line); }
.vd-cmp tr.mine td { background: var(--vd-soft); }
.vd-cmp td small { font-size: 11px; color: var(--vd-ink2); font-weight: 700; }

.vd button:focus-visible, .vd summary:focus-visible { outline: 2px solid var(--vd-ink); outline-offset: 2px; }

@media (max-width: 1100px) {
  .vd { grid-template-columns: 300px minmax(0, 1fr); }
  .vd-main { padding: 22px 22px 50px; }
  .vd-hold { grid-template-columns: minmax(130px, 1.4fr) 1fr 1fr 1fr; }
  .vd-hold.vd-head span:nth-child(n+5) { display: none; }
  .vd-hold .vd-c:nth-of-type(5), .vd-hold .vd-rule { display: none; }
}
@media (max-width: 900px) {
  .vd-hold.vd-head { display: none; }
  .vd-hold { grid-template-columns: minmax(0, 1fr) auto; }
  .vd-hold .vd-name { grid-column: 1; }
  .vd-hold .vd-pl { grid-column: 2; grid-row: 1; text-align: right; }
  .vd-hold .vd-pl b, .vd-hold .vd-pl small { display: block; margin: 0; }
  .vd-hold .vd-c, .vd-hold .vd-c:nth-of-type(5), .vd-hold .vd-rule { display: none; }
  .vd-hm { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 4px; background: var(--vd-soft); padding: 10px 12px; }
  .vd-hm span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .vd-hm span.wide { grid-column: 1 / -1; }
  .vd-hm i { font-style: normal; font-size: 12px; color: var(--vd-ink3); } .vd-hm b { font-size: 15px; font-weight: 600; color: var(--vd-ink); }
  .vd-hold .vd-name b { font-size: 17px; }
  /* 휴대폰 순서: 잔고 → 지금 들고 있는 것 → 사고판 기록 → 프로그램 상태·시장 성적 (10-18 "들고 있는 게 안 보인다") */
  .vd { display: flex; flex-direction: column; }
  .vd-side, .vd-main { display: contents; }
  .vd-bal { order: 1; background: var(--vd-soft); padding: 24px 16px 22px; border-bottom: 1px solid var(--vd-line); }
  .vd-scope { order: 2; margin: 18px 16px -6px; }
  .vd-sec-hold { order: 3; } .vd-sec-tr { order: 4; } .vd-health { order: 5; } .vd-mk { order: 6; } .vd-cmp { order: 7; }
  .vd-sec, .vd-health, .vd-mk, .vd-cmp { margin: 28px 16px 0; }
  .vd-mk, .vd-cmp:last-child { margin-bottom: 48px; }
  .vd-why { grid-template-columns: 1fr; }
  .vd-tr { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .vd-tr .vd-pl b { font-size: 15px; }
  .vd-big { font-size: 30px; }
}