/* ══════════════════════════════════════════════════════════════════════
   마추 모바일 v3 — 적중률 리포트 (racing/stats.php · jtm_m3_css('stats'))
   ⚠ 모든 규칙은 max-width:900px 안. PC(≥901px)는 한 줄도 바뀌지 않는다.
   ⚠ 클래스는 m3-st- 접두. 색은 --m3-* 토큰(다크모드 body.jt-dark 대응).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

/* ── 기존 화면 중 새 블록이 '같은 내용'을 대신하는 것만 숨긴다 ──
   ① 페이지 머리(제목·설명·실전픽/백테스트 탭) → 새 히어로 + 탭(누르면 기존 탭도 함께 바뀜)
   ② 고신뢰 마추픽 오늘/이번주/누적 카드 → 새 고신뢰 카드(같은 jtm_stats_overview 호출)
   ③ 모바일 타일 오늘/이번주/누적 적중 → 새 KPI(오늘 줄 포함) — 두 벌이 같은 화면에 겹치지 않게
   (②는 :has() 없이 — 기존 타일 바로 다음 형제 카드. 구형 브라우저에서도 숨는다) */
.jt2-fadeup > .jt2-pagehead { display: none; }
[data-pane-group="rep"][data-pane="live"] > .jt2-mvtiles { display: none; }
[data-pane-group="rep"][data-pane="live"] > .jt2-mvtiles + .jt2-card { display: none; }

.m3-stats { margin-bottom: 26px; }
/* 기본 간격 — :where 로 우선순위를 낮춰 아래 개별 여백이 이기게 한다 */
.m3-stats :where(.m3-st-body > [data-m3-pane] > * + *, .m3-st-body > * + *) { margin-top: 14px; }

/* 히어로 — 본문 거터(.jt-wrap) 안에 둥근 판으로 */
.m3-stats .m3-st-hero { border-radius: 22px; margin: 0 0 16px; padding: 22px 16px 16px; min-height: 0; }
.m3-stats .m3-st-hero .m3-hero-tx { max-width: 66%; }
.m3-stats .m3-st-hero .m3-h1 { margin-top: 0; }
.m3-stats .m3-st-hero .m3-h1 em { color: var(--m3-green); }
.m3-stats .m3-st-hero .m3-lead { font-size: 15px; }
.m3-stats .m3-st-hero .m3-script { top: 18px; font-size: 21px; }
.m3-stats .m3-st-mode { position: relative; z-index: 3; display: flex; width: 100%; margin-top: 18px; background: var(--m3-card); border: 1px solid var(--m3-line); }
.m3-stats .m3-st-mode button { min-height: 44px; font-size: 16px; }

/* ── KPI: ① 30일(전폭) + ②③ 2열 — 360px 에서 "182 / 294"·알약이 넘치지 않게 ── */
.m3-stats .m3-st-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m3-stats .m3-st-kpis .m3-kpi { padding: 16px 14px; }
.m3-stats .m3-st-kpi1 { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.m3-stats .m3-st-kpi1-l { min-width: 0; }
.m3-stats .m3-st-kpi1-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 0; }
.m3-stats .m3-st-kpi1-r .m3-kpi-s { margin-top: 0; }
.m3-stats .m3-kpi-l .m3-ico { color: var(--m3-green); flex: none; }
.m3-stats .m3-st-big { font-size: 40px; }
.m3-stats .m3-st-big small { font-size: 22px; color: var(--m3-green); }
.m3-stats .m3-st-delta { display: inline-block; padding: 4px 9px; border-radius: 9px; font-size: 15px; font-weight: 900; white-space: nowrap; }
.m3-stats .m3-st-delta--up   { background: var(--m3-green-tint); color: var(--m3-green-tx); }
.m3-stats .m3-st-delta--down { background: var(--m3-line-2); color: var(--m3-sub); }
.m3-stats .m3-st-delta--flat { background: var(--m3-line-2); color: var(--m3-sub); }
.m3-stats .m3-st-delta-n { font-size: 14px; font-weight: 600; color: var(--m3-sub); }
.m3-stats .m3-st-frac { font-size: clamp(22px, 6.6vw, 28px); white-space: normal; }
.m3-stats .m3-st-frac b { font-weight: 900; }
.m3-stats .m3-st-frac small { font-size: 17px; }
.m3-stats .m3-st-kpis .m3-state { font-size: 19px; }
.m3-stats .m3-st-wk { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--m3-sub); }
/* 오늘 적중 — 전폭 한 줄 (라벨 왼쪽 · 값/상태 오른쪽) */
.m3-stats .m3-st-today { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 14px; }
.m3-stats .m3-st-today .m3-kpi-l { margin: 0; }
.m3-stats .m3-st-today-v { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.m3-stats .m3-st-today-v > b { font-size: 20px; font-weight: 900; color: var(--m3-navy); }
.m3-stats .m3-st-today-v .m3-kpi-pill { margin: 0; }
.m3-stats .m3-st-today-s { font-size: 15px; font-weight: 800; color: var(--m3-sub); }
.m3-stats .m3-st-basis { margin: 8px 2px 0; font-size: 14px; font-weight: 600; color: var(--m3-sub); line-height: 1.5; }
.m3-stats .m3-st-basis b { color: var(--m3-navy); font-weight: 800; }

/* ── 고신뢰 카드 (연초록·짙은 초록 — --m3-gold* 토큰은 2026-09-15 짙은 초록 값) ── */
.m3-stats .m3-st-hi { position: relative; border-color: var(--m3-gold); }
.m3-stats .m3-st-hi .m3-card-head { align-items: center; }
.m3-stats .m3-st-hi-t { flex: 1; min-width: 0; }
.m3-stats .m3-st-hi-row { display: flex; align-items: center; gap: 6px; }
.m3-stats .m3-st-hi-s { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--m3-gold-tx); }
.m3-stats .m3-st-tip { display: inline-block; }
.m3-stats .m3-st-tip summary { list-style: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--m3-gold);
  color: var(--m3-gold-tx); font-size: 14px; font-weight: 900; font-style: italic; line-height: 21px; text-align: center; cursor: pointer; }
.m3-stats .m3-st-tip summary::-webkit-details-marker { display: none; }
.m3-stats .m3-st-tip-b { position: absolute; left: 14px; right: 14px; top: 74px; z-index: 5; padding: 12px 14px; border-radius: 14px;
  background: var(--m3-card); border: 1px solid var(--m3-gold-line); box-shadow: var(--m3-sh-hi);
  font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--m3-navy); letter-spacing: -.02em; }
.m3-stats .m3-st-hi-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m3-stats .m3-st-hi-cell { min-width: 0; padding: 12px 6px; border-radius: 14px; text-align: center;
  background: var(--m3-card); border: 1px solid var(--m3-gold-line); }
.m3-stats .m3-st-hi-l { display: block; font-size: 14px; font-weight: 800; color: var(--m3-gold-tx); }
.m3-stats .m3-st-hi-v { display: block; margin-top: 4px; font-size: clamp(21px, 6.4vw, 27px); line-height: 1.1; font-weight: 900;
  color: var(--m3-gold); letter-spacing: -.04em; white-space: nowrap; }
.m3-stats .m3-st-hi-v--mute { color: var(--m3-faint); }
.m3-stats .m3-st-hi-n { display: block; margin-top: 5px; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--m3-sub); overflow-wrap: anywhere; }
.m3-stats .m3-st-nw { display: inline-block; white-space: nowrap; }
.m3-stats .m3-st-hi-n.m3-st-wk { margin-top: 2px; font-weight: 600; }

/* ── 최근 성과 흐름 ── */
.m3-stats .m3-st-rng { display: flex; width: 100%; }
.m3-stats .m3-st-flow-d { margin: 12px 0 6px; }
.m3-stats .m3-st-flow .m3-chart { margin-top: 4px; }
.m3-stats .m3-st-flow-f { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--m3-sub); }
.m3-stats .m3-st-flow-w { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--m3-line-2);
  font-size: 14px; font-weight: 700; color: var(--m3-sub); }

/* ── 섹션 머리: 본문 거터 안이라 좌우 여백은 뺀다 ── */
.m3-stats .m3-st-sec { margin: 24px 2px 12px; }
.m3-stats .m3-st-h2i { display: flex; align-items: center; gap: 8px; }
.m3-stats .m3-st-h2i .m3-ico { color: var(--m3-green); flex: none; }

/* ── 최근 적중 기록 ── */
.m3-stats .m3-st-hits > * + * { margin-top: 10px; }
.m3-stats a.m3-st-hit { display: flex; gap: 10px; }   /* 공용 .m3 a.m3-card{display:block} 을 이긴다 */
.m3-stats .m3-st-hit-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m3-stats .m3-st-hit-tx b { font-size: 17px; font-weight: 900; color: var(--m3-navy); }
.m3-stats .m3-st-hit-tx small { font-size: 14px; font-weight: 600; color: var(--m3-sub); line-height: 1.35; }
.m3-stats .m3-st-hit .m3-badge--gen { flex: none; }
.m3-stats .m3-st-hits-n { margin: 10px 2px 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--m3-sub); }

/* ── 추천 ── */
.m3-stats .m3-st-recs > * + * { margin-top: 10px; }
.m3-stats .m3-st-rec-tx { flex: 1; min-width: 0; }
.m3-stats .m3-st-rec-tx b { display: block; font-size: 16px; font-weight: 900; color: var(--m3-navy); }
.m3-stats .m3-st-rec-tx small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--m3-sub); }

.m3-stats .m3-st-note { margin-top: 22px; }
.m3-stats .m3-st-note .m3-checks .m3-check { display: inline-flex; margin-top: 0; }
.m3-stats .m3-st-cta { margin: 22px 0 0; }
.m3-stats .m3-st-cta > .m3-ico { width: 30px; height: 30px; }

@media (max-width: 360px) {
  .m3-stats .m3-st-big { font-size: 34px; }
  .m3-stats .m3-st-hero .m3-hero-tx { max-width: 70%; }
  .m3-stats .m3-st-kpis .m3-kpi { padding: 14px 10px; }
}

} /* @media max-width:900px */