/* special/triple.blade.php 스타일 추출 — 2026-08-12 */
.st-hist-cards{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.st-hist-card{flex:1;min-width:180px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px}
.st-hist-big{font-size:19px;font-weight:800;margin:4px 0}

.st { --st-blue:#2563eb; --st-line:#e5e7eb; color:#1f2937; }
.st-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.st-head h1 { margin:0; }
.st-round { padding:7px 12px; font-size:15px; border:1px solid #d1d5db; border-radius:8px; margin-left:auto; }
/* 경기 카드 + 프로토 국내배당 (반응형: 데스크톱 3열, 모바일 1열) */
/* 3경기 프로토 승부식 종합표 */
.st-ptbl-wrap { overflow-x:auto; margin:14px 0; }
/* ≤480px: 종합표(프로토·자체 여론)는 가로 스크롤 대신 경기별 카드 스택 — 히트맵(st-vtbl)은 스크롤 유지 */
@media (max-width:480px){
  .st-main-wrap { overflow:visible; }
  .st-main-wrap .st-ptbl, .st-main-wrap .st-ptbl tbody { display:block; }
  .st-main-wrap .st-ptbl thead { display:none; }
  .st-main-wrap .st-ptbl tr { display:block; border:1px solid var(--st-line); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:#fff; }
  .st-main-wrap .st-ptbl td { display:block; border:0; padding:0; text-align:left; }
  .st-main-wrap .st-ptbl td.st-pg { display:inline; font-weight:800; color:var(--st-blue); padding-right:6px; }
  .st-main-wrap .st-ptbl td.ta-left { display:inline; white-space:normal; }
  .st-main-wrap .st-ptbl td.st-pv { margin-top:9px; min-width:0; }
  .st-main-wrap .st-ptbl td.st-pou { margin-top:10px; }
  .st-main-wrap .st-ptbl td.muted { margin-top:6px; font-size:12px; }
  .st-main-wrap .st-pou-g { min-width:0; }
  .st-main-wrap .st-pvn { font-size:11.5px; }
  .st-main-wrap .st-pvn span { white-space:nowrap; }
  /* 자체 투표 히트맵 — 경기 열 숨기고 셀 압축해 가로 스크롤 없이 전폭 표시 */
  .st-vtbl { table-layout:fixed; width:100%; }
  .st-vtbl th:first-child, .st-vtbl td.st-pg { display:none; }
  .st-vtbl thead th.ta-left { width:92px; }  /* fixed 레이아웃은 헤더가 열폭 결정 */
  .st-vtbl th, .st-vtbl td { padding:5px 2px; font-size:11px; }
  .st-vtbl .vt-team { width:90px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:4px; }
  .st-vtbl .vt-ha { padding:0 3px; font-size:9px; margin-left:1px; }
  .st-vtbl .vt-cell b { font-size:11.5px; }
  .st-vtbl .vt-cell i { font-size:8.5px; }
  .st-vtbl tbody tr.vn-h td { border-top:2px solid #cbd5e1; }  /* 경기 구분선(경기 열 대신) */
  .st-vtbl tbody tr:first-child td { border-top:0; }
}
.st-ptbl { width:100%; border-collapse:collapse; font-size:14px; }
.st-ptbl th, .st-ptbl td { border:1px solid var(--st-line); padding:9px 12px; text-align:center; vertical-align:middle; }
.st-ptbl thead th { background:#f1f5f9; color:#475569; font-size:12.5px; font-weight:700; white-space:nowrap; }
.st-ptbl thead th .muted { font-weight:600; }
.st-ptbl .ta-left { text-align:left; white-space:nowrap; }
.st-gc-lg { font-size:11px; color:#94a3b8; margin-left:5px; }
.st-pg { font-weight:800; color:var(--st-blue); background:#f8fafc; white-space:nowrap; font-size:12.5px; }
/* 국내배당 승/무/패 */
.st-po { white-space:nowrap; }
.st-po span { display:inline-block; min-width:44px; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }
.st-po .win { color:#dc2626; } .st-po .draw { color:#64748b; } .st-po .lose { color:#2563eb; }
.st-wl-tag { display:inline-block; font-size:10px; font-weight:700; color:#7c3aed; background:#f3e8ff; border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle; }
/* 투표비중 */
.st-pv { min-width:230px; }
.st-gc-bar { display:flex; height:11px; border-radius:6px; overflow:hidden; background:#f1f5f9; }
/* 출처 2단 줄(프로토/자체) — 칩 + 게이지, 칩 hover·탭 시 설명 말풍선 */
.st-src { display:flex; align-items:center; gap:8px; }
.st-src + .st-src { margin-top:7px; padding-top:7px; border-top:1px dashed #eef1f5; }
.st-src-g { flex:1; min-width:0; }
.st-chip { position:relative; flex:0 0 46px; text-align:center; font-size:10.5px; font-weight:800; border-radius:5px; padding:2px 0; cursor:help; user-select:none; }
.st-chip.pr { background:#eef2ff; color:#4f46e5; }
.st-chip.nv { background:#ecfdf5; color:#059669; }
/* display:none 필수 — visibility:hidden 은 자리를 차지해 래퍼에 유령 세로 스크롤을 만든다 */
.st-chip::after { content:attr(data-tip); position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:240px; background:#0f172a; color:#fff; font-size:11.5px; font-weight:500; line-height:1.55; text-align:left; border-radius:8px; padding:8px 10px; display:none; white-space:normal; box-shadow:0 8px 24px rgba(0,0,0,.25); }
@media (hover:hover) { .st-chip:hover::after { display:block; } }
.st-chip.tipon::after { display:block; }
/* 실측표 ? 안내 마커 — st-chip 말풍선 재사용, 소형 원형 */
.st-chip.st-q { display:inline-flex; align-items:center; justify-content:center; flex:none; width:15px; height:15px; border-radius:50%; padding:0; font-size:10px; color:var(--sub); background:color-mix(in srgb, var(--sub) 14%, transparent); vertical-align:1px; }
.st-chip.st-q::after { width:260px; }
/* 하단 행은 말풍선을 위로 — 아래로 펼치면 표 래퍼(overflow) 바닥을 넘겨 세로 스크롤 발생.
   위쪽 넘침은 스크롤바를 안 만든다(클리핑은 상단 행에서만 문제라 하단 5행만 위로). */
.st-ptbl tbody tr:nth-last-child(-n+5) .st-chip.st-q::after { top:auto; bottom:calc(100% + 6px); }
/* 데스크톱은 표가 컨테이너에 다 들어가므로 래퍼 클립 해제 — 말풍선이 표 밖으로 자연스럽게 펼쳐짐 */
@media (min-width:900px) { .st-main-wrap { overflow:visible; } }
/* 자체 줄 가운데 구간(무·접전/경계) — 혼재 의미라 프로토 무(민무늬 회색)와 다르게 빗금 */
.st-gc-bar .md { background:repeating-linear-gradient(45deg,#e2e8f0 0 4px,#cbd5e1 4px 8px); }
.st-gc-bar i { display:block; height:100%; }
.st-gc-bar .w { background:#f87171; } .st-gc-bar .d { background:#cbd5e1; } .st-gc-bar .l { background:#60a5fa; }
.st-gc-bar .o { background:#fb923c; } .st-gc-bar .u { background:#2dd4bf; }
.st-pvn { display:flex; justify-content:space-between; margin-top:4px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.st-pvn i { font-style:normal; color:#94a3b8; font-size:11px; font-weight:600; margin-left:3px; }
.st-pvn .win { color:#dc2626; } .st-pvn .draw { color:#94a3b8; } .st-pvn .lose { color:#2563eb; }
/* 언더오버 */
.st-pou { white-space:nowrap; font-size:13px; }
.st-pou-wrap { display:flex; align-items:center; gap:10px; }
.st-pou-g { flex:1; min-width:170px; }
.st-pou .ln { flex:0 0 42px; box-sizing:border-box; text-align:center; background:#f1f5f9; border-radius:5px; padding:1px 0; font-weight:800; color:#0f172a; font-variant-numeric:tabular-nums; }
.st-pou .ln.tmp { background:#fef9c3; color:#a16207; text-align:center; }
.st-pou .ln.tmp i { display:block; font-style:normal; font-size:9px; font-weight:700; line-height:1.1; }
.st-pou .over, .st-pou .under { font-weight:700; }
.st-pou .over { color:#ea580c; } .st-pou .under { color:#0d9488; }
.st-pou i { font-style:normal; color:#94a3b8; font-size:11px; font-weight:600; margin-left:3px; }
.st-note { padding:20px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:12px; color:#64748b; margin:14px 0; text-align:center; }
/* 순수 트리플 투표비중 히트맵 표 */
.st-vote-native { margin:18px 0; }
.st-vn-head { font-size:15px; font-weight:800; color:#0f172a; margin-bottom:8px; }
.st-vn-head .muted { font-weight:600; font-size:13px; }
.st-vtbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.st-vtbl th, .st-vtbl td { border:1px solid var(--st-line); padding:7px 6px; text-align:center; }
.st-vtbl thead th { background:#f1f5f9; color:#475569; font-size:12px; font-weight:700; white-space:nowrap; }
.st-vtbl .ta-left { text-align:left; }
.st-vtbl .st-pg { font-weight:800; color:var(--st-blue); background:#f8fafc; white-space:nowrap; font-size:12.5px; vertical-align:middle; }
.vt-team { white-space:nowrap; font-weight:700; }
.vt-ha { font-size:10.5px; font-weight:800; border-radius:4px; padding:1px 5px; margin-left:3px; vertical-align:middle; }
.vt-ha.h { background:#fee2e2; color:#dc2626; } .vt-ha.a { background:#dbeafe; color:#2563eb; }
.vt-cell { font-variant-numeric:tabular-nums; min-width:40px; }
.vt-cell b { font-weight:800; color:#0f172a; } .vt-cell i { font-style:normal; font-size:10px; color:#64748b; margin-left:1px; }
.st-vn-note { font-size:12px; margin:6px 2px 0; }
/* 결과 배너 */
.st-result { display:flex; gap:16px; flex-wrap:wrap; align-items:center; background:linear-gradient(180deg,#fffbeb,#fff7ed); border:1px solid #fde68a; border-radius:12px; padding:12px 16px; margin:14px 0; font-size:14px; }
.st-result > b { color:#92400e; }
.st-rv em { color:#dc2626; font-style:normal; font-weight:800; }
.st-odds { margin-left:auto; color:#78350f; }
.st-odds.st-cancel { color:#dc2626; }
/* 선택 테이블 (betman 구매투표지 양식) */
.st-pick-tbl { width:100%; border-collapse:collapse; font-size:14px; margin-top:4px; }
.st-pick-tbl th, .st-pick-tbl td { border:1px solid var(--st-line); padding:9px 10px; text-align:center; }
.st-pick-tbl thead th { background:#f1f5f9; color:#475569; font-size:12.5px; font-weight:700; }
.st-pick-tbl .ta-left { text-align:left; } .st-pick-tbl .ta-right { text-align:right; }
.st-pg { font-weight:800; color:var(--st-blue); background:#f8fafc; white-space:nowrap; }
.st-pt { font-size:12px; color:#64748b; white-space:nowrap; line-height:1.4; } .st-pt b { color:#111827; font-size:14px; }
.st-pd { color:#64748b; font-size:12.5px; width:44px; }
.st-pm { font-weight:700; min-width:70px; white-space:nowrap; }
.st-pb { white-space:nowrap; }
.st-pb { padding:8px 10px; }
.st-pb .st-bk { margin:3px 4px; }
.st-pc { font-weight:800; color:#111827; background:#f8fafc; min-width:56px; }
.st-pc-h, .st-pg-h { white-space:nowrap; }
.st-ptot td { background:#eef2ff; font-weight:800; }
.st-ptot .st-pc { color:var(--st-blue); }
.st-bk { position:relative; min-width:62px; padding:12px 6px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#374151; cursor:pointer; font-size:15px; font-weight:800; text-align:center; transition:.1s; }
@media (hover:hover) { .st-bk:hover { background:#eff6ff; border-color:#93c5fd; } }
.st-bk.on, .st-bk.on:hover { background:var(--st-blue); color:#fff; border-color:var(--st-blue); box-shadow:0 2px 6px rgba(37,99,235,.3); }
.st-bk.live { outline:2px solid #f59e0b; outline-offset:1px; }   /* 진행중 현재 스코어 버킷(잠정) */
/* 실제 결과 버킷 = 빨강 + ✓ (승무패 방식) */
.st-bk.hit { background:#fef2f2; border-color:#f87171; color:#dc2626; }
.st-bk.hit::after { content:"✓"; position:absolute; top:2px; right:5px; font-size:11px; font-weight:900; line-height:1; color:#dc2626; }
.st-bk.on.hit { background:var(--st-blue); color:#fff; border-color:var(--st-blue); }
.st-bk.on.hit::after { color:#fff; }
/* 컨트롤 */
.st-ctrl { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:16px 2px 10px; font-size:14px; }
.st-ctrl label { display:flex; align-items:center; gap:7px; font-weight:600; }
.st-ctrl input, .st-ctrl select { padding:6px 10px; border:1px solid #d1d5db; border-radius:7px; font-size:14px; }
.st-ctrl input { width:110px; text-align:right; }
.st-cnt { margin-left:auto; color:#64748b; }
/* 결과 표 */
.st-tbl-wrap { overflow-x:auto; border:1px solid var(--st-line); border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.st-tbl { width:100%; border-collapse:collapse; font-size:14px; white-space:nowrap; }
.st-tbl th, .st-tbl td { padding:11px 14px; }
.st-tbl thead th { background:#f8fafc; text-align:center; font-size:12.5px; color:#475569; border-bottom:2px solid var(--st-line); }
.st-tbl tbody tr { border-bottom:1px solid #f1f5f9; }
.st-crow { cursor:pointer; }
.st-tbl tbody tr.st-crow:hover { background:#eff6ff; }
.st-tbl tbody tr:last-child { border-bottom:none; }
.st-th-o, .st-th-p { text-align:right !important; }
.st-th-g { min-width:130px; }
.st-gseq { display:block; color:var(--st-blue); font-size:11px; font-weight:800; margin-bottom:1px; }
.st-o { font-weight:800; color:var(--st-blue); text-align:right; font-size:15px; }
.st-o .st-wtag { margin-left:6px; }
.st-p { text-align:right; color:#111827; font-weight:600; }
.st-sc { text-align:center; font-weight:700; letter-spacing:.5px; color:#334155; }
.st-win { background:#fef9c3 !important; }
.st-win .st-sc { color:#b45309; }
.st-win .st-o { color:#b45309; }
.st-wtag { display:inline-block; background:#dc2626; color:#fff; font-weight:800; font-size:10.5px; padding:1px 6px; border-radius:5px; vertical-align:middle; }
@media (max-width:640px){ .st-team{ width:auto; text-align:left; } .st-round{ margin-left:0; } }

/* ── 구매투표지 모바일 카드형(≤640px) — 가로스크롤 제거, 경기별 [헤더줄 → 팀줄 → 버킷 6열 풀폭] ── */
@media (max-width:640px){
  .st-pick-tbl, .st-pick-tbl tbody { display:block; }
  .st-pick-tbl thead { display:none; }
  .st-pick-tbl tr { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:7px;
      padding:6px 2px; border:0; }
  .st-pick-tbl td { display:block; border:0; padding:0; background:none; width:auto; min-width:0; }
  .st-pick-tbl tr.st-grow { border-top:2px solid #e2e8f0; padding-top:13px; margin-top:8px; }
  .st-pick-tbl tbody tr.st-grow:first-child { border-top:0; margin-top:0; }
  /* 헤더줄: [1경기][날짜 시간]········[조합 N] → 강제 개행 → 팀줄 */
  .st-pg { order:0; font-size:13px; padding:2px 9px; background:#eff6ff; border-radius:6px; white-space:nowrap; }
  .st-pt { order:0; font-size:12px; line-height:1.2; white-space:nowrap; color:#64748b; }
  .st-pt br { display:none; }
  .st-pt b { font-size:12.5px; margin-left:3px; color:#111827; }
  .st-pc { order:0; margin-left:auto; font-size:12.5px; color:#64748b; font-weight:700; }
  .st-pc::before { content:'조합 '; font-weight:600; color:#94a3b8; }
  .st-pick-tbl tr::after { content:''; order:1; flex-basis:100%; height:0; }   /* 헤더줄 뒤 개행 */
  .st-pd { order:2; font-size:11px; font-weight:800; color:#94a3b8; background:#f8fafc; border:1px solid #e2e8f0;
      border-radius:5px; padding:1px 6px; }
  .st-pm { order:2; font-size:15.5px; font-weight:800; }
  /* 버킷 6개 = 화면 폭 자동 균등분배(1fr). td 셀렉터(.st-pick-tbl td)보다 구체성 높여 grid 보장 */
  .st-pick-tbl td.st-pb { order:3; flex-basis:100%; width:100%; display:grid;
      grid-template-columns:repeat(6,1fr); gap:6px; padding:0; white-space:normal; }
  .st-pick-tbl td.st-pb .st-bk { margin:0; min-width:0; width:100%; padding:14px 0; font-size:14.5px; border-radius:10px; }
  /* 합계 행 */
  .st-pick-tbl tr.st-ptot { border-top:2px solid #e2e8f0; margin-top:8px; padding-top:11px; }
  .st-pick-tbl tr.st-ptot::after { display:none; }
  .st-ptot td.ta-right { order:0; font-size:13px; color:#64748b; }
  .st-ptot .st-pc { margin-left:auto; font-size:16px; color:var(--st-blue); }
  .st-ptot .st-pc::before { content:''; }
}