/* 시장 탭 — Sparkline-first 단일 레이아웃 (2026-05-28) */

.market-sp { padding-top: 4px; }

/* ── 반응형 (≥768px 태블릿·데스크톱) ─────────────────────────── */
@media (min-width: 768px) {
  .market-sp .sp-list {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 0; background: transparent;
    gap: 10px;
  }
  .market-sp .sp-list .sp-row {
    border-bottom: 0;
    background: var(--card); border: 1px solid var(--sep);
    border-radius: 14px; padding: 14px 16px;
  }
  [data-theme="light"] .market-sp .sp-list .sp-row { background: #fff; border-color: #ececec; }
  .market-sp .snap-grid { grid-template-columns: 1fr 1fr 1fr; }
  .market-sp .sp-hold { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .market-sp .sp-hold .sp-h-row {
    border-bottom: 1px solid var(--sep);
  }
  .market-sp .sp-hold .sp-h-row:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* ── 광폭 (≥1100px 데스크톱 wide) ─────────────────────────────── */
@media (min-width: 1100px) {
  .market-sp .sp-list { grid-template-columns: 1fr 1fr 1fr; }
  .market-sp .snap-grid { grid-template-columns: repeat(4, 1fr); }
  .market-sp .sp-hold { grid-template-columns: 1fr 1fr 1fr; }
  .market-sp .sp-hold .sp-h-row:nth-last-child(-n+3) { border-bottom: 0; }
}
.market-sp .sp-period {
  font-size: 11px; color: var(--sub);
  letter-spacing: -0.1px; font-weight: 600;
  margin: 0 4px 8px;
}

.market-sp .sp-list {
  background: var(--card); border: 1px solid var(--sep);
  border-radius: 14px; overflow: hidden;
}
[data-theme="light"] .market-sp .sp-list { background: #fff; border-color: #ececec; }
.market-sp .sp-row {
  display: grid; grid-template-columns: 92px 1fr 86px;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sep);
  color: var(--sub);
}
.market-sp .sp-row:last-child { border-bottom: 0; }
.market-sp .sp-row.sp-up { color: #ef4444; }
.market-sp .sp-row.sp-dn { color: #3b82f6; }
.market-sp .sp-l { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: -0.1px; }
.market-sp .sp-chart { width: 100%; height: 44px; }
.market-sp .sp-vbox { text-align: right; }
.market-sp .sp-v { font-size: 15px; font-weight: 800; color: var(--text); }
.market-sp .sp-row.sp-up .sp-v { color: #ef4444; }
.market-sp .sp-row.sp-dn .sp-v { color: #3b82f6; }
.market-sp .sp-s { font-size: 11px; }
.market-sp .sp-s.sp-now { color: var(--sub); font-weight: 600; }

.market-sp .sp-breadth {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--sep);
  border-radius: 14px;
}
[data-theme="light"] .market-sp .sp-breadth { background: #fff; border-color: #ececec; }
.market-sp .sp-bb-lab {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--sub);
}
.market-sp .sp-up { color: #ef4444; }
.market-sp .sp-dn { color: #3b82f6; }
.market-sp .sp-bb-bar {
  height: 6px; border-radius: 999px;
  background: rgba(59,130,246,0.20); overflow: hidden;
}
.market-sp .sp-bb-up { height: 100%; background: #ef4444; }

.market-sp .sp-hold-h {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--sub); text-transform: uppercase;
  margin: 18px 4px 10px;
}
.market-sp .sp-hold {
  background: var(--card); border: 1px solid var(--sep);
  border-radius: 14px; overflow: hidden;
}
[data-theme="light"] .market-sp .sp-hold { background: #fff; border-color: #ececec; }
.market-sp .sp-h-row {
  display: grid; grid-template-columns: 60px 1fr 50px 80px;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sep);
  color: var(--sub);
}
.market-sp .sp-h-row:last-child { border-bottom: 0; }
.market-sp .sp-h-row.sp-up { color: #ef4444; }
.market-sp .sp-h-row.sp-dn { color: #3b82f6; }
.market-sp .sp-h-sym { font-size: 13px; font-weight: 800; color: var(--text); }
.market-sp .sp-h-spark { width: 100%; height: 32px; }
.market-sp .sp-h-w { font-size: 11px; color: var(--sub); text-align: center; }
.market-sp .sp-h-pct { font-size: 13px; font-weight: 800; text-align: right; }
.market-sp .sp-h-row-num { grid-template-columns: 1fr 100px; }
.market-sp .sp-h-empty {
  padding: 18px 14px; text-align: center;
  font-size: 12.5px; color: var(--sub); font-weight: 600;
}
.market-sp .snap-h {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--sub); text-transform: uppercase;
  margin: 18px 4px 10px;
}
.market-sp .snap-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.market-sp .snap-card {
  background: var(--card); border: 1px solid var(--sep);
  border-radius: 12px; padding: 12px 14px;
  text-align: left;
}
[data-theme="light"] .market-sp .snap-card { background: #fff; border-color: #ececec; }
.market-sp .snap-l { font-size: 11px; color: var(--sub); font-weight: 800; letter-spacing: 0.02em; }
.market-sp .snap-v { font-size: 16px; font-weight: 800; color: var(--text); margin: 4px 0 2px; }
.market-sp .snap-card.sp-up .snap-v { color: #ef4444; }
.market-sp .snap-card.sp-dn .snap-v { color: #3b82f6; }
.market-sp .snap-s { font-size: 11px; color: var(--sub); }
/* 장중/전일 마감 배지 (snap-l 안 인라인) */
.market-sp .snap-live, .market-sp .snap-eod {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.market-sp .snap-live { background: rgba(16,185,129,0.15); color: #10b981; }
.market-sp .snap-eod  { background: rgba(148,163,184,0.18); color: #64748b; }
/* 5 시안 캐러셀 인프라 + 시안 2~5 (2026-05-29) — 캐러셀 폐기 후 단일 시안 1 사용. -16 margin 제거. */
#market-variants-carousel { margin: 0 0 18px; position: relative; }
.mv-track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px; gap: 12px;
}
.mv-track::-webkit-scrollbar { display: none; }
.mv-slide {
  flex: 0 0 calc(100% - 4px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 4px 2px 16px;
  position: relative;
}
.mv-num {
  position: absolute; top: 0; right: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(245,158,11,0.16); color: #f59e0b;
  z-index: 2;
}
.mv-dots { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.mv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.2s, transform 0.2s;
}
.mv-dot.active { background: #f59e0b; transform: scale(1.3); }
[data-theme="light"] .mv-dot { background: rgba(0,0,0,0.15); }
[data-theme="light"] .mv-dot.active { background: #ea580c; }
.mv-hint { text-align: center; font-size: 10.5px; color: var(--sub); margin: 4px 0 0; }

/* 시안 2: Editorial */
.mv-v2ed { font-family: Georgia, "Times New Roman", serif; color: var(--text); padding-top: 12px; }
.mv-v2ed .ed-kicker {
  font-family: Arial, sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--sub); text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 2px solid var(--text);
}
.mv-v2ed .ed-headline { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 12px 0 4px; }
.mv-v2ed .ed-headline em { color: var(--green); font-style: italic; }
.mv-v2ed .ed-byline { font-size: 11.5px; color: var(--sub); font-style: italic; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
.mv-v2ed .ed-sub-h {
  font-family: Arial, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 0;
  border-top: 2px solid var(--text); border-bottom: 1px solid var(--sep);
  margin: 14px 0 10px;
}
.mv-v2ed .ed-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mv-v2ed .ed-table th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--sep); font-weight: 700; }
.mv-v2ed .ed-table td { padding: 8px 6px; border-bottom: 1px solid var(--sep); text-align: right; }
.mv-v2ed .ed-table td.ed-s { color: var(--sub); font-style: italic; font-size: 11.5px; }
.mv-v2ed .ed-pos { color: var(--green); font-weight: 700; }
.mv-v2ed .ed-neg { color: var(--red); font-weight: 700; }

/* 시안 3: Bento Grid */
.mv-v3bn .bento-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px; margin-top: 16px;
}
.mv-v3bn .bento {
  background: var(--card); border: 1px solid var(--sep);
  border-radius: 16px; padding: 12px 14px;
}
[data-theme="light"] .mv-v3bn .bento { background: #fff; border-color: #ececec; }
.mv-v3bn .bento-vix, .mv-v3bn .bento-vol, .mv-v3bn .bento-pc, .mv-v3bn .bento-tnx { grid-column: span 2; }
.mv-v3bn .bento-breadth, .mv-v3bn .bento-spread { grid-column: span 4; }
.mv-v3bn .b-lab { font-size: 10.5px; color: var(--sub); font-weight: 800; }
.mv-v3bn .b-val { font-size: 22px; font-weight: 800; margin: 4px 0; }
.mv-v3bn .b-sub { font-size: 11px; color: var(--sub); }
.mv-v3bn .b-pos { color: var(--green); }
.mv-v3bn .b-neg { color: var(--red); }
.mv-v3bn .b-warn { color: #f59e0b; }
.mv-v3bn .bb-bar {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(128,128,128,0.16); margin: 8px 0 6px;
}
.mv-v3bn .bb-up { background: var(--green); }
.mv-v3bn .bb-dn { background: var(--red); }
.mv-v3bn .bb-text { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; }
.mv-v3bn .bento-hold-h { font-size: 11px; font-weight: 800; color: var(--sub); text-transform: uppercase; margin: 18px 4px 10px; letter-spacing: 0.1em; }
.mv-v3bn .bento-hold { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mv-v3bn .bh-card { background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 10px 8px; text-align: center; }
[data-theme="light"] .mv-v3bn .bh-card { background: #fff; border-color: #ececec; }
.mv-v3bn .bh-sym { font-size: 13px; font-weight: 800; }
.mv-v3bn .bh-w { font-size: 10.5px; color: var(--sub); margin: 2px 0; }
.mv-v3bn .bh-pct { font-size: 12px; font-weight: 800; }

/* 시안 4: Liquid Glass */
.mv-v4lg { position: relative; overflow: hidden; padding-top: 16px; }
.mv-v4lg .lg-bg {
  position: absolute; inset: -40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(245,158,11,0.18), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(168,85,247,0.18), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(16,185,129,0.16), transparent 40%);
  filter: blur(20px); z-index: -1;
}
.mv-v4lg .lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mv-v4lg .lg-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 14px;
}
[data-theme="light"] .mv-v4lg .lg-card { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.7); }
.mv-v4lg .lg-glow-orange { box-shadow: inset 0 0 20px rgba(245,158,11,0.15); }
.mv-v4lg .lg-glow-blue   { box-shadow: inset 0 0 20px rgba(59,130,246,0.15); }
.mv-v4lg .lg-glow-purple { box-shadow: inset 0 0 20px rgba(168,85,247,0.15); }
.mv-v4lg .lg-glow-green  { box-shadow: inset 0 0 20px rgba(16,185,129,0.15); }
.mv-v4lg .lg-glow-red    { box-shadow: inset 0 0 20px rgba(239,68,68,0.15); }
.mv-v4lg .lg-lab { font-size: 10.5px; color: var(--sub); font-weight: 800; }
.mv-v4lg .lg-v { font-size: 22px; font-weight: 800; margin: 4px 0; }
.mv-v4lg .lg-s { font-size: 11px; color: var(--sub); }
.mv-v4lg .lg-spread { margin-bottom: 10px; }
.mv-v4lg .lg-breadth { margin-bottom: 14px; }
.mv-v4lg .lg-bar { height: 10px; border-radius: 999px; background: rgba(239,68,68,0.2); margin: 8px 0 6px; overflow: hidden; }
.mv-v4lg .lg-bar-up { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); }
.mv-v4lg .lg-bar-lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.mv-v4lg .lg-section-h { font-size: 11px; color: var(--sub); font-weight: 800; letter-spacing: 0.15em; margin: 10px 4px 8px; }
.mv-v4lg .lg-hold { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mv-v4lg .lg-h-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 6px; text-align: center; backdrop-filter: blur(12px); }
[data-theme="light"] .mv-v4lg .lg-h-card { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.6); }
.mv-v4lg .lg-h-sym { font-size: 13px; font-weight: 800; }
.mv-v4lg .lg-h-w { font-size: 10.5px; color: var(--sub); margin: 2px 0; }
.mv-v4lg .lg-h-pct { font-size: 12px; font-weight: 800; }
.mv-v4lg .lg-pos { color: var(--green); }
.mv-v4lg .lg-neg { color: var(--red); }

/* 시안 5: Swiss Minimal */
.mv-v5sw { font-family: "Inter", Helvetica, Arial, sans-serif; padding-top: 14px; }
.mv-v5sw .sm-head { padding: 8px 0 16px; }
.mv-v5sw .sm-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--sub); text-transform: uppercase; margin-bottom: 10px; }
.mv-v5sw .sm-headline-sm { font-size: 32px; font-weight: 300; line-height: 1.15; color: var(--text); margin-bottom: 8px; letter-spacing: -0.03em; }
.mv-v5sw .sm-meta { font-size: 12px; color: var(--sub); }
.mv-v5sw .sm-line { height: 1px; background: var(--text); opacity: 0.85; margin: 18px 0; }
.mv-v5sw .sm-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.mv-v5sw .sm-m { display: grid; grid-template-columns: 60px 1fr auto; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sep); }
.mv-v5sw .sm-m span { font-size: 12px; color: var(--sub); font-weight: 700; }
.mv-v5sw .sm-m b { font-size: 18px; font-weight: 600; }
.mv-v5sw .sm-m em { font-size: 10.5px; color: var(--sub); font-style: normal; }
.mv-v5sw .sm-hold { display: flex; flex-direction: column; }
.mv-v5sw .sm-h { display: grid; grid-template-columns: 1fr 60px 80px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sep); font-size: 13px; }
.mv-v5sw .sm-h:last-child { border-bottom: 0; }
.mv-v5sw .sm-h span:first-child { font-weight: 800; }
.mv-v5sw .sm-h span:nth-child(2) { color: var(--sub); font-size: 11.5px; }
.mv-v5sw .sm-h b { font-size: 14px; font-weight: 600; text-align: right; }