/* ══ 장중테마 카드 — 「지금」(/24h/) 카드 모양 덧씌우기 (2026-09-30, 진석님 요청) ══════════
   진석님: "「하나의 모듈」 느낌으로" · 차트 없이 **모양만** 맞춘다(데이터·JS·서버 부담 0).

   🔴 이 파일은 pmv2.css **뒤에** 붙는 덮어쓰기 전용이다. pmv2.css 는 건드리지 않았다.
      ↩️ 롤백 = index.html 에서 이 파일의 <link> 한 줄만 지우면 옛 모양으로 돌아간다.
   🔴 마크업(pmv2.js _renderStockCard)은 그대로다. 배치는 CSS grid + `display:contents` 로만 바꾼다:
        .sc-bottom 을 상자에서 풀어(contents) 그 안의 가격·등락률·거래대금을 카드 격자에 직접 놓는다.
   기준 모양 = 24h/index.html 의 .card/.nm/.pc/.pv/.vol · .grid(1→2→3→4열)
══════════════════════════════════════════════════════════════════════════════ */

/* ── 카드 격자 — 24h .grid 와 같은 열 수 ── */
.theme-stocks {
  display: grid; gap: 10px; grid-template-columns: 1fr;
  padding: 10px var(--wrap-pad) 14px;
  background: var(--bg);
}
@media (min-width: 600px)  { .theme-stocks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .theme-stocks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .theme-stocks { grid-template-columns: repeat(4, 1fr); } }
.theme-group.collapsed .theme-stocks { display: none; }

/* ── 카드 = 24h .card ──
   왼쪽 위: 순위·종목명·배지   │  오른쪽 위: 큰 등락률
   왼쪽   : 소속 테마 태그     │  오른쪽   : 현재가
   맨 아래(구분선 밑): 거래대금                                  */
.stock-card,
.stock-card:hover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top  chg"
    "tags price"
    "amt  amt";
  column-gap: 10px; row-gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px 11px;
  min-width: 0;
}
.stock-card:hover { border-color: #3a4250; }
@media (min-width: 600px) { .stock-card { border-right: 1px solid var(--line); } }
.sc-bottom { display: contents; }

/* 이름 줄 — 24h .nm */
.sc-top { grid-area: top; min-width: 0; align-items: center; gap: 5px; flex-wrap: nowrap; }
.sc-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.3px;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-spacer { flex: 1 1 0; min-width: 0; }

/* 큰 등락률 — 24h .pc */
.sc-bottom .sc-chg {
  grid-area: chg; align-self: start;
  font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.8px;
  text-align: right; min-width: 0; margin: 0;
  font-variant-numeric: tabular-nums;
}
.sc-bottom > .sc-chg:not(.sc-delta + .sc-chg) { margin-left: 0; }

/* 현재가 — 24h .pv (등락률 밑 작은 회색 숫자) */
.sc-bottom .sc-price {
  grid-area: price; align-self: start;
  font-size: 11.5px; font-weight: 500; color: var(--tx3);
  text-align: right; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.sc-bottom .sc-price::after { content: '원'; margin-left: 1px; }

/* 소속 테마 — 24h .sb 자리(이름 밑 한 줄) */
.sc-theme-row {
  grid-area: tags; justify-content: flex-start; padding: 3px 0 0;
  flex-wrap: nowrap; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.sc-theme-tag { font-size: 10px; color: var(--tx3); background: var(--card2); border: 1px solid var(--line); }

/* 거래대금 — 24h .vol (구분선 밑 한 줄) */
.sc-amt {
  grid-area: amt;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--tx2);
}
.sc-amt::before { content: '거래대금(KRX) '; color: var(--tx3); }   /* 🆕 09-30 t8407 = KRX 전용(영웅문은 NXT 포함 통합이라 더 크다) */
.sc-amt:empty { display: none; }

/* 순위 배지 — 24h .tk(종목 코드 꼬리표)와 같은 결의 작은 상자. 노란 바탕은 유지(순위는 눈에 띄어야 한다) */
.sc-rank { font-size: 10.5px; border-radius: 4px; padding: 1px 6px; flex: 0 0 auto; }

/* 핀·N — 카드 오른쪽 위가 등락률이라 이름 줄 끝에 작게 */
.pin-btn { margin-left: 0; font-size: 12px; }
.naver-btn { font-size: 9.5px; }

/* 핀 고정 카드 — 왼쪽 굵은 선 대신 둥근 테두리 전체를 강조 */
.pinned-card { border-left: 1px solid #f59e0b !important; border-color: #f59e0b !important; }
/* 크론값(폴링 미도달) 카드는 흐리게 — 기존 규칙 유지, 둥근 모서리에 맞춰 선 모양만 */
.cron-only > .stock-card { border-left: 1px dashed var(--tx3) !important; border-style: dashed !important; }

/* ── 테마 제목 = 24h .sec (카드 위 소제목) ── */
.theme-group { border-bottom: 0; }
.theme-hdr,
.theme-hdr:active {
  background: var(--bg);
  padding: 16px var(--wrap-pad) 2px;
  font-size: 13.5px; font-weight: 700;
}
.theme-hdr .theme-meta,
.theme-hdr .theme-amt { font-size: 11.5px; font-weight: 400; color: var(--tx3); }
.theme-group.vol-top > .theme-hdr { border-left: 0; }
.cohesion-group { border-bottom: 0; }
.cohesion-theme-hdr { border-left: 0; }
.th-rel-bar { padding: 4px var(--wrap-pad) 0; background: var(--bg); }