/* '어제랑 비교해서' 장중 대결판 스타일 — 지금 사이트(stocks-home.css) 값 기준, vs- 접두로 기존 클래스와 분리 */
#vs-root{margin-bottom:12px}
.vs-hero,.vs-card{background:var(--canvas);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--s1);padding:14px 16px}
.vs-hero + .vs-card,.vs-card + .vs-card{margin-top:12px}
.vs-eyebrow{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 4px}
.vs-hero h2{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.35;color:#0F172A;margin:0}
.vs-hero h2.up{color:var(--up)} .vs-hero h2.dn{color:var(--dn)}
/* 결론 카드 작은 타이틀("어제 12:45 vs 오늘 12:45") 바로 옆 ? — 기존 .help-q 모양 그대로. 클릭하면 설명 모달 */
.vs-hero .vs-eyebrow{display:flex;align-items:center}
.vs-hero .vs-help{border:0;padding:0;cursor:pointer;font-family:inherit}
.vs-sub{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.55}
.vs-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:11px;color:var(--muted);margin-bottom:8px}
.vs-legend i{display:inline-block;width:18px;border-top:2px solid #0F172A;vertical-align:middle;margin-right:6px}
.vs-legend i.y{border-top:2px dashed #94A3B8}
.vs-legend i.b{width:5px;height:10px;border:0;background:var(--up);border-radius:1px;margin-right:2px} .vs-legend i.b.dn{background:var(--dn);margin-right:6px}
.vs-legend i.a{width:10px;height:10px;border:0;background:rgba(243,57,66,.22);border-radius:2px;margin-right:2px} .vs-legend i.a.dn{background:rgba(0,110,255,.2);margin-right:6px}
.vs-legend .r{margin-left:auto}
.vs-chart{display:block;width:100%;height:180px}
.vs-zero{stroke:#CBD5E1;stroke-width:1}
.vs-line-y{fill:none;stroke:#94A3B8;stroke-width:2;stroke-dasharray:6 5}
.vs-line-t{fill:none;stroke:#0F172A;stroke-width:2.5;stroke-linejoin:round}
.vs-axis{position:relative;height:14px;font-size:11px;color:var(--muted);margin:4px 78px 0 34px}
/* A안 — 왼쪽 34px 세로 눈금, 오른쪽 78px 선 끝 값. 가로축(.vs-axis)도 같은 여백으로 곡선과 맞춘다 */
.vs-chartbox{position:relative;padding:0 78px 0 34px}
.vs-grid{stroke:#F1F5F9;stroke-width:1}
.vs-band.up{fill:rgba(243,57,66,.16)} .vs-band.dn{fill:rgba(0,110,255,.14)}
.vs-enddot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.vs-enddot.t{background:#0F172A;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.15)} .vs-enddot.y{background:#fff;border:2px solid #94A3B8}
/* D안 아래 차이 막대 칸 — 곡선 상자와 같은 좌우 여백으로 시각을 맞춘다 */
.vs-diffbox{position:relative;padding:0 78px 0 34px;margin-top:8px}
.vs-dchart{display:block;width:100%;height:56px}
.vs-dbar.up{fill:var(--up);opacity:.85} .vs-dbar.dn{fill:var(--dn);opacity:.85}
.vs-rest{fill:#F8FAFC}
.vs-now{stroke:#CBD5E1;stroke-width:1;stroke-dasharray:3 3}
.vs-ytick{position:absolute;left:0;width:28px;text-align:right;font-size:10.5px;color:#94A3B8;transform:translateY(-50%);font-variant-numeric:tabular-nums;pointer-events:none}
.vs-end{position:absolute;right:0;width:70px;transform:translateY(-50%);font-size:10px;color:#94A3B8;line-height:1.25;pointer-events:none}
.vs-end b{display:block;font-size:12px;font-weight:800;color:#0F172A;font-variant-numeric:tabular-nums}
.vs-end b.up{color:var(--up)} .vs-end b.dn{color:var(--dn)}
.vs-gapline{position:absolute;width:2px;margin-left:6px;background:var(--up);pointer-events:none} .vs-gapline.dn{background:var(--dn)}
.vs-gap{position:absolute;transform:translate(13px,-50%);font-size:11.5px;font-weight:800;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.vs-gap.up{color:var(--up)} .vs-gap.dn{color:var(--dn)}
.vs-rest-l{position:absolute;top:2px;margin-left:6px;font-size:10.5px;color:#94A3B8;pointer-events:none}
.vs-axis span{position:absolute;top:0;white-space:nowrap}
.vs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.vs-stat{background:#F7F9FC;border:1px solid var(--inset);border-radius:10px;padding:10px 12px}
.vs-stat-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;font-size:11px;font-weight:600;color:var(--muted)}
.vs-stat-r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;color:var(--muted)}
.vs-stat-r b{font-size:13px;font-variant-numeric:tabular-nums}
.vs-stat-r b.vs-big{font-size:17px;font-weight:800}
.vs-diff{margin:4px 0 0;text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.vs-pill{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.vs-pill.neutral{color:var(--muted);background:#F1F5F9} .vs-pill.up{color:var(--up);background:var(--up-bg)} .vs-pill.dn{color:var(--dn);background:var(--dn-bg)}
.vs-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px}
.vs-card-h p{margin:0;font-size:15px;font-weight:800;color:#0F172A}
.vs-card-h span{font-size:11px;color:var(--muted)}
.vs-lbl{font-size:13px;font-weight:700;color:#0F172A;margin:16px 0 8px}
.vs-lbl:first-of-type{margin-top:0}
@media (max-width:760px){
  .vs-chartbox,.vs-diffbox{padding:0 62px 0 30px} .vs-gap{display:none} .vs-axis{margin:4px 62px 0 30px} .vs-end{width:56px}
  .vs-stats{grid-template-columns:minmax(0,1fr)}
}
/* 코스피 곡선 마우스 오버 — 세로 안내선·두 점·말풍선(값은 곡선에 실제로 있는 샘플 점만) */
.vs-plot{position:relative;cursor:crosshair;touch-action:pan-y}
.vs-guide{position:absolute;top:0;bottom:0;width:1px;background:#94A3B8;pointer-events:none}
.vs-dot{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.15);transform:translate(-50%,-50%);pointer-events:none}
.vs-dot.t{background:#0F172A} .vs-dot.y{background:#94A3B8}
.vs-tip{position:absolute;top:6px;min-width:128px;background:var(--canvas);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--s1);padding:7px 10px;font-size:11px;color:var(--muted);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums;z-index:2}
.vs-tip b{display:block;font-size:12px;font-weight:800;color:#0F172A;margin-bottom:3px}
.vs-tip p{display:flex;justify-content:space-between;gap:12px;margin:1px 0}
.vs-tip p span:last-child{font-weight:700}
.vs-tip p.d{border-top:1px solid #F1F5F9;margin-top:4px;padding-top:4px}
/* 주도주 타일(stocks-home.css .us-tile) 안 '어제 같은 시각' 블록 — 대결판 카드의 주도주 표를 대신한다 */
.vs-lbl-s{font-size:11px;color:var(--muted);text-align:center;margin:-4px 0 10px}
.vs-tb{margin-top:11px;padding:9px 10px 10px;background:#fff;border:1px solid #EEF2F6;border-radius:10px;font-variant-numeric:tabular-nums}
.us-tile.on .vs-tb{background:#F7F9FC}
.vs-tb-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:10.5px;color:var(--muted);margin-bottom:6px}
.vs-tb-h b{font-weight:700;color:#475569}
.vs-tb-g{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.vs-tb-g .k{font-size:11px;color:var(--muted)}
.vs-tb-g .v{font-size:13px;font-weight:800;text-align:right;color:#0F172A}
.vs-tb .up{color:var(--up)} .vs-tb .dn{color:var(--dn)}
.vs-tb-d{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:7px;border-top:1px dashed #E5E7EB;font-size:11px;color:var(--muted)}
.vs-tb-d .p{font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px}
.vs-tb-d .p.up{background:var(--up-bg)} .vs-tb-d .p.dn{background:var(--dn-bg)}

/* ── 축 확장(2026-09-16) — 기존 vs- 규칙은 건드리지 않고 vsx-만 더한다 ── */
.vs-card .vsx-sec{margin-top:24px;padding-top:16px;border-top:1px solid #F1F5F9}
.vsx-why{list-style:none;margin:11px 0 0;padding:0}
.vsx-why li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:9px 0;
  border-top:1px solid #F1F5F9;font-size:13px;line-height:1.6;color:var(--muted)}
.vsx-why li:first-child{border-top:0}
.vsx-why .k{font-size:11px;font-weight:700;color:#0F172A}
.vsx-mini{margin-top:9px}
.vsx-bars{height:40px;display:grid;grid-template-columns:repeat(2,26px);gap:8px;
  justify-content:center;position:relative}
.vsx-bars.zero::before,.vsx-bars.base::before{content:'';position:absolute;left:0;right:0;height:1px;background:var(--hair)}
.vsx-bars.zero::before{top:50%} .vsx-bars.base::before{bottom:0}
.vsx-bar{position:relative}
.vsx-bar i{position:absolute;left:0;right:0;border-radius:3px;display:block}
.vsx-bar i.up{background:var(--up)} .vsx-bar i.dn{background:var(--dn)}
.vsx-bar i.mag{background:#0F172A;opacity:.6}
.vsx-bar.prev i{opacity:.32}
.vsx-ax{display:grid;grid-template-columns:repeat(2,26px);gap:8px;justify-content:center;
  font-size:9px;color:var(--muted);text-align:center;margin-top:4px}
.vsx-ax .t{color:#0F172A;font-weight:700}
.vsx-pairs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:4px}
.vsx-pbars{height:76px;display:grid;grid-template-columns:repeat(2,20px);gap:5px;
  justify-content:center;position:relative}
.vsx-pbars::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair)}
.vsx-pv{font-size:10px;font-weight:800;text-align:center;margin-top:5px;font-variant-numeric:tabular-nums}
.vsx-pp{font-size:9px;color:var(--muted);text-align:center;margin-top:1px;font-variant-numeric:tabular-nums}
.vsx-pl{font-size:10px;color:var(--muted);text-align:center;margin-top:4px}
.vsx-tbl{width:100%;border-collapse:collapse;margin-top:8px}
.vsx-tbl th{padding:7px 8px;background:#FAFBFC;font-size:11px;font-weight:800;color:var(--muted);
  text-align:right;border-bottom:1px solid #EEF2F6;white-space:nowrap}
.vsx-tbl td{padding:8px;border-bottom:1px solid #EEF2F6;text-align:right;white-space:nowrap;
  font-size:12.5px;color:#0F172A;font-variant-numeric:tabular-nums}
.vsx-tbl tr:last-child td{border-bottom:none}
.vsx-tbl th:first-child,.vsx-tbl td:first-child{text-align:left}
.vsx-tbl td.nm{font-weight:700;white-space:normal}
.vsx-tbl td.nm small{display:block;font-size:10px;font-weight:400;color:#94A3B8;margin-top:2px}
.vsx-tbl td.nm small.nms{margin-top:1px}
/* PC는 칸이 넉넉하다 — 종목 이름 줄을 접지 않고 첫 칸을 그만큼 넓힌다. 모바일(≤760px)은 좁아서 접힌다 */
@media (min-width:761px){.vsx-tbl td.nm small.nms{white-space:nowrap}}
.vsx-rk{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:5px;background:#F1F5F9;font-size:10px;font-weight:800;color:var(--muted);
  margin-right:7px;vertical-align:1px}
.vsx-rk.top{background:#0F172A;color:#fff}
/* 카드 안 static 레이아웃 — 인라인 스타일 대신 쓴다(F4). margin-top:0은 라벨(.vs-lbl) 바로 아래 칸에서만 쓴다 */
.vsx-stats2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vsx-mt0{margin-top:0}
@media (max-width:760px){.vsx-pairs{grid-template-columns:repeat(3,1fr);row-gap:14px}.vsx-stats2{grid-template-columns:minmax(0,1fr)}}
/* 첫 응답 전 자리 — 실제 결론·곡선 카드의 부분(제목·범례·곡선·차이 막대·근거 4줄) 모양을 그대로 잡는다.
   높이는 2026-09-22 실측(PC 97/482px, 모바일 115/564px)에 맞췄다. 숫자·글자는 넣지 않는다(§0). .skl은 stocks-home.css의 공용 스켈레톤. */
.vs-skel .skl{display:block;background:#E5EBF3;animation-name:vs-skl-pulse}
@keyframes vs-skl-pulse{0%,100%{opacity:.75}50%{opacity:1}}
.vs-hero.vs-skel .vs-eyebrow{margin-bottom:10px}
.vs-hero.vs-skel .sk-h2{height:22px;margin-bottom:10px}
.vs-hero.vs-skel .sk-sub{height:13px}
.vs-card.vs-skel .sk-legend{display:flex;gap:12px;margin-bottom:11px}
.vs-card.vs-skel .sk-chart{height:180px;border-radius:10px}
.vs-card.vs-skel .sk-diff{height:56px;border-radius:8px;margin-top:6px}
.vs-card.vs-skel .sk-axis{display:flex;justify-content:space-between;margin-top:8px}
.vs-card.vs-skel .sk-why{display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px 12px;align-items:center;margin-top:20px}
.vs-card.vs-skel .sk-why-k{width:100%}
/* 실제 카드가 내용에 따라 조금씩 다르므로 바닥은 실측 높이로 잡는다(PC 97/482px, 모바일 115/564px) */
.vs-hero.vs-skel{min-height:97px}
.vs-card.vs-skel{min-height:482px}
@media (max-width:760px){
  .vs-hero.vs-skel{min-height:115px}
  .vs-card.vs-skel{min-height:564px}
  .vs-hero.vs-skel .sk-h2{height:40px}
  .vs-card.vs-skel .sk-why{gap:18px 10px}
  .vs-card.vs-skel .sk-why-v{height:40px}   /* 모바일은 근거 줄이 두 줄로 접힌다 */
}
@media (prefers-reduced-motion:reduce){.vs-skel .skl{animation:none}}