/* board.css — 예측판(경기 카드·배당 박스·오른쪽 패널·카트·보기 선택). app.css 에서 주제별로 나눔; layout.html 이 base → … 순서로 전부 링크한다. */
/* 주석은 **한 줄 안에서** 닫는다 (test_layout_css_comments_are_closed) — 여러 줄 주석이 뒤 규칙을 삼킨 적이 있어 줄 단위로 검사한다. */
  @media (max-width: 860px) {
    .bar { flex-wrap: nowrap; gap: 6px; padding: 8px; }
    .bar .btn { height: 32px; padding: 0 9px; font-size: 13px; }
    .bar input[type=date] { height: 32px; padding: 0 4px; font-size: 13px; flex: 1; min-width: 0; }
    .bar .stat, .bar .ai-line { display: none !important; }
    .bar #tglAll { width: 28px; height: 30px; flex: none; border: 0; background: transparent; color: var(--muted); font-size: 15px; } /* 모바일에도 전체 접기/펼치기 — PC와 같은 순서(보기 선택 뒤), 테두리 없는 아이콘 */
    .bar .datebtn { flex: 1; justify-content: center; padding: 0 6px; height: 30px; }
    .bar .datebtn b { font-size: 14px; }
    .bar .btn.nav { width: 30px; height: 30px; font-size: 18px; }
    .bar .today { font-size: 12px; }
  }
  .wrap { max-width: 1320px; margin: 12px auto; padding: 0 12px; display: grid; grid-template-columns: 1fr 320px; gap: 12px; }
  .wrap.single { grid-template-columns: 1fr; }
  .wrap.narrow { max-width: 980px; } /* 페이지 폭 3단계: 표·대시보드형 1320(기본) · 목록형 980(.narrow — 알림·경기 상세·관리·사이드 없는 예측판, 일정 카드) · 폼 460(.form-page — 로그인·가입·설정) */
  .wrap.form-page { max-width: 460px; }
  @media (max-width: 860px) {
    .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
    .side { position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.18); max-height: 72vh; overflow-y: auto; }
    .side.folded { overflow: hidden; }
    .side .tabs2 { position: sticky; top: 0; z-index: 1; background: #fff; }
  }
  .bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .bar .sp { flex: 1; }
  .bar .btn.nav { width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1; }
  .bar .datebtn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; cursor: pointer; white-space: nowrap; }
  .bar .datebtn b { font-size: 15px; }
  .bar .btn.icon { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 16px; line-height: 1; color: var(--muted); border: 0; background: transparent; align-self: center; }
  @media (min-width: 701px) { .bar #tglAll.btn.icon { width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; font-size: 11px; } .bar #tglAll.btn.icon:hover { border-color: var(--navy); } }   /* PC: 경기 카드의 동그란 접기 단추와 같은 모양 (10/13) */
  .bar .btn.icon:hover { color: var(--navy); } /* 전체 접기(▲)/펼치기(▼): 드롭다운과 같은 높이(34px)의 테두리 없는 회색 아이콘 */
  .bar .viewwrap { display: flex; align-items: center; gap: 4px; min-width: 0; } /* 보기 드롭다운 (되돌리기 ↺는 없음 — 드롭다운에서 SCOUT 예측을 다시 고르면 된다) */
  .bar .datebtn input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; pointer-events: none; } /* 보이지 않는 달력 입력(달력은 버튼 클릭 → showPicker()) */
  .bar .today { font-size: 13px; color: var(--blue); white-space: nowrap; }
  .wrap.nopred .seg.one b { background: var(--muted); }
  .bar .viewsel { height: 30px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: #fff; max-width: 400px; cursor: pointer; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; } /* 알약 셀렉트 (경기 상세의 다른 경기 선택 .gamesel 이 쓴다) */
  .viewsel optgroup { font-weight: 800; color: var(--muted); }
  .viewsel option { text-align: left; font-weight: 500; padding: 4px 6px; }
/* 보기·조합 선택기: 셀렉트(#viewSel·#recSel)는 값만 들고 숨기고, 보이는 건 칩 → 누르면 결과 색 칩 목록(.vpick: PC 팝오버 / 모바일 아래 시트) */
  .vsel { position: relative; display: inline-flex; min-width: 0; }
  .vsel select { position: absolute; inset: 0; width: 100% !important; height: 100%; opacity: 0; margin: 0; pointer-events: none; }
  .vchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font-size: 13px; font-weight: 700; color: var(--navy); max-width: 400px; min-width: 0; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
  .vchip .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .vchip::after { content: "▾"; color: var(--muted); font-size: 11px; flex: none; }
  .recchip { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
  /* 누르는 칸이지 읽는 글이 아니다 — 두 번 누르면 글자만 파랗게 선택돼 '파란 바가 중간에 끊긴' 것처럼 보였다 (10/9 제보) */
  .vchip, .recchip, .vpick .vc, .vpick .vtabs .vt { -webkit-user-select: none; user-select: none; }
  .recchip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recchip::after { content: "▾"; color: var(--muted); font-size: 12px; }
  .side .recbar select { display: none; }
  /* 결과 표시 — 칩 앞의 점 하나만 색을 입힌다 (칩 배경까지 칠하면 목록이 난잡): 적중 초록 · 미적중 빨강 · 무효 회색 · 진행 중은 빈 점 */
  .sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--navy); box-sizing: border-box; flex: none; background: #fff; } /* 이름을 .d 로 두면 경기 상세(.ent .d)·관리(.srow .d)와 충돌 */
  .sdot[hidden] { display: none; }
  .st-win .sdot, .sdot.st-win { background: var(--green); border-color: var(--green); }
  .st-loss .sdot, .sdot.st-loss { background: var(--red); border-color: var(--red); }
  .st-push .sdot, .sdot.st-push { background: #98a2b3; border-color: #98a2b3; }
  .vpick { position: fixed; inset: 0; z-index: 70; }
  .vpick[hidden] { display: none; }
  .vpick .bd { position: absolute; inset: 0; }
  .vpick .pn { position: absolute; width: 400px; max-width: calc(100vw - 24px); max-height: 72vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18); padding-bottom: 6px; }
  .vpick .vsh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; }
  .vpick .vsh .x { color: var(--muted); font-size: 17px; padding: 2px 6px; cursor: pointer; }
  /* 예측 켜기/끄기 스위치 — 머리줄 오른쪽 (10/9). 아래 칩들은 '무엇을 볼까' 라 성격이 다르다 */
  .vpick .vsh { gap: 10px; }
  .vpick .vsw { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; cursor: pointer; -webkit-user-select: none; user-select: none; }
  .vpick .vsw[hidden] { display: none; }
  .vpick .vsw .vsl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .vpick .vsw.on .vsl { color: var(--navy); }
  .vpick .vsw input { position: absolute; opacity: 0; width: 0; height: 0; }
  .vpick .vsw .vsk { flex: none; position: relative; width: 40px; height: 23px; border-radius: 999px; background: #c3cad6; transition: background .15s; }
  .vpick .vsw .vsk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
  .vpick .vsw.on .vsk { background: var(--navy); }
  .vpick .vsw.on .vsk::after { transform: translateX(17px); }
  .vpick .vsw input:focus-visible + .vsk { outline: 2px solid var(--blue); outline-offset: 2px; }
  /* 꺼졌을 때: 아래가 흐려지고 선택도 풀린 채로 보인다 */
  .vpick .vbody.off { opacity: .42; }
  .vpick .vgrp { padding: 10px 14px 2px; }
  .vpick .vgh { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
  .vpick .vgrp[hidden] { display: none; }
  .vpick .vtabs { display: flex; gap: 4px; margin: 12px 14px 0; padding: 3px; background: var(--hover); border-radius: 10px; } /* 그룹 탭 (10/6) */
  .vpick .vtabs .vt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; }
  .vpick .vtabs .vt small { font-size: 11px; font-weight: 600; color: var(--muted); }
  .vpick .vtabs .vt.on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  .vpick .vcs { display: flex; flex-wrap: wrap; gap: 8px; }
  .vpick .vc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--text); background: #fff; cursor: pointer; }
  .vpick .vc small { font-weight: 500; color: var(--muted); font-size: 12px; }
  .vpick .vc.on { box-shadow: 0 0 0 2px var(--navy); } /* 지금 고른 것: 테두리 두 겹 (결과 색은 그대로) */
  .vpick .vc.on::after { content: "✓"; font-size: 11px; color: var(--navy); }
  .vpick .vlg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding: 10px 14px 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  .vpick .vlg span { display: inline-flex; align-items: center; gap: 5px; }
  @media (max-width: 860px) {
    .vpick .bd { background: rgba(10, 20, 40, .38); }
    .vpick .pn { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 78vh; border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .22); padding-bottom: 12px; }
  }
  @media (max-width: 860px) {
    #topBar .btn.nav { width: 24px; height: 28px; font-size: 18px; border: 0; background: transparent; color: var(--text); }
    #topBar .btn.nav.dim { color: #c9ced8; }
    #topBar .datebtn { border: 0; background: transparent; padding: 0 1px; height: 28px; flex: 0 0 auto !important; }
    #topBar .datebtn b { font-size: 15px; }
    #topBar .today { margin-left: 1px; font-size: 12px; }
    #topBar .viewwrap { margin-left: auto; flex: 0 1 auto; min-width: 0; gap: 4px; }
    #topBar .vsel { flex: 0 1 auto; min-width: 0; }
    #topBar.twoline .viewwrap { flex: 1 1 calc(100% - 40px); width: auto; justify-content: flex-end; margin-top: 2px; }
    #topBar.twoline .vsel { flex: 0 1 auto; }
    #topBar .vchip { height: 30px; padding: 0 8px 0 11px; max-width: 100%; }
  }
/* 내 구매 조합 보기: 내 예측 박스에 남색 테두리 + "내 예측" 태그, 끝난 경기는 적중(초록)/미적중(빨강)/무효(회색) */
  .wrap.myview .mrow:has(.opt.mine) .opt { padding-top: 9px; } /* 배지가 박스 위 글자('LG (-2.5)')에 붙지 않게 — 같은 줄 두 칸 모두 내려 높이를 맞춤 (10/6) */
  .wrap.myview .opt.mine { position: relative; } /* 테두리 없음 — 예측 보기와 같이 태그('내 예측'·'SCOUT 3게임')와 카드 왼쪽 띠로만 표시 (2026-09-27 통일) */
  .wrap.myview .game.notmine { display: none; } /* 내 예측을 보는 동안엔 그 표에 든 경기만 남긴다 */
  .wrap.myview .opt.mine::before { content: "내 예측"; position: absolute; top: -11px; left: 6px; background: var(--navy); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: var(--r-sm); opacity: 1; }
/* 조합 보기(패널에서 고른 SCOUT/AI 조합): 배지 글자는 조합 이름. SCOUT·AI 모두 같은 파랑 (배지 글자로 구분, 결과 색은 아래 mw/ml/mt 가 우선) */
  .wrap.myview .opt.mine.cm::before { content: attr(data-tag); background: var(--blue); }
  .wrap.myview .opt.mine.cm.mw::before { content: attr(data-tag) " · 적중"; }
  .wrap.myview .opt.mine.cm.ml::before { content: attr(data-tag) " · 미적중"; }
  .wrap.myview .opt.mine.cm.mt::before { content: attr(data-tag) " · 무효"; }
  .wrap.myview .opt.mine.cm.mp::before { content: attr(data-tag) " · 진행 중"; }
  .wrap.myview .opt.mine.mw::before { content: "내 예측 · 적중"; background: var(--green); }
  .wrap.myview .opt.mine.ml::before { content: "내 예측 · 미적중"; background: var(--red); }
  .wrap.myview .opt.mine.mt::before { content: "내 예측 · 무효"; background: var(--muted-2); }
  .wrap.myview .opt.mine.mt { border-color: var(--muted-2) !important; }
  .wrap.myview .opt.mine.mp::before { content: "내 예측 · 진행 중"; background: var(--navy); opacity: .85; }
  .wrap.myview .opt.mine.mpw::before { content: "내 예측 · 적중 중"; background: var(--green); opacity: .85; }
  .wrap.myview .opt.mine.mpl::before { content: "내 예측 · 미적중 중"; background: var(--red); opacity: .85; }
  .wrap.myview .opt.mine.cm.mpw::before { content: attr(data-tag) " · 적중 중"; }
/* 내 예측·조합 보기: 카드 머리줄 왼쪽 띠 색으로 그 표의 결과 — 적중 초록, 미적중 빨강 (진행 중이면 현재 점수 기준). 배경은 경기 상태 색 그대로 */
  .wrap.myview .game.gw > .head, .wrap.myview .game.gpw > .head { box-shadow: inset 4px 0 0 var(--green); }
  .wrap.myview .game.gl > .head, .wrap.myview .game.gpl > .head { box-shadow: inset 4px 0 0 var(--red); }
  .wrap.myview .opt.mine.cm.mpl::before { content: attr(data-tag) " · 미적중 중"; }
  .wrap.myview .mrow.notmine { display: none; } /* 표에 없는 마켓 줄(프로토 게임)은 감춤 */
/* 배지는 한 줄로 (10/7: 승①패 세 칸에서 'SCOUT 승①패 2게임 · 적중'이 두 줄로 꺾여 선택 글자를 가림). 좁은 세 칸에선 결과만 — 조합 이름은 위 보기 줄에 있음 */
  .wrap.myview .opt.mine::before { white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
  .wrap.myview .opts.three .opt.mine.cm::before, .wrap.myview .opts.three .opt.mine.cm.cb::before { content: "선택"; }
  .wrap.myview .opts.three .opt.mine.mw::before, .wrap.myview .opts.three .opt.mine.cm.mw::before { content: "적중"; }
  .wrap.myview .opts.three .opt.mine.ml::before, .wrap.myview .opts.three .opt.mine.cm.ml::before { content: "미적중"; }
  .wrap.myview .opts.three .opt.mine.mt::before, .wrap.myview .opts.three .opt.mine.cm.mt::before { content: "무효"; }
  .wrap.myview .opts.three .opt.mine.mp::before, .wrap.myview .opts.three .opt.mine.cm.mp::before { content: "진행 중"; }
  .wrap.myview .opts.three .opt.mine.mpw::before, .wrap.myview .opts.three .opt.mine.cm.mpw::before { content: "적중 중"; }
  .wrap.myview .opts.three .opt.mine.mpl::before, .wrap.myview .opts.three .opt.mine.cm.mpl::before { content: "미적중 중"; }
  .wrap.myview .opts.three .opt.mine:not(.cm):not(.mw):not(.ml):not(.mt):not(.mp):not(.mpw):not(.mpl)::before { content: "내 예측"; }
  .wrap.nopred.myview .mrows .mrow .mname::after { content: none; } /* 표를 볼 땐 카드마다 "표시 중/예측 숨김" 문구를 반복하지 않는다 (상단 드롭다운이 상태를 보여 줌) · 아래 "예측 숨김" 규칙보다 구체적으로 */
  /* 내가 산 칸 = ✓ + 파란 테두리 — 내 예측 상세(모달·내예측)와 같은 표시 (10/11). 라벨은 결과(적중·미적중)를, ✓는 '내 선택'을. 추천 조합 보기(.cm)엔 없음 */
  .wrap.myview .opt.mine:not(.cm):not(.actual) { border-color: var(--blue); }
  .wrap.myview .opt.mine:not(.cm):not(.sel)::after { content: "✓"; position: absolute; top: -9px; right: 6px; width: 16px; height: 16px; line-height: 15px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); color: var(--blue); font-size: 10px; font-weight: 800; text-align: center; box-sizing: border-box; }
  .wrap.nopred.myview .opt.mine::before { display: inline-block !important; } /* 예측 숨김 규칙(.nopred .opt.pick::before)보다 우선 */
  .wrap.nopred.comboview.aiview .side-info > .aitab-wrap { display: block !important; } /* AI 조합 보기: 예측 숨김 중에도 AI 의견 표는 보인다 (그 AI 행만) */
  .wrap.aiview .aitab tr.aioff { display: none; }
/* 확률이 높은 예측은 글자색으로 구분: 60% 이상 초록, 55% 이상 남색 (흰 바탕) · 파란 예측 박스 안에선 노랑/흰색 */
  .cf { color: var(--muted); font-weight: 600; }
  .cf.hi { color: var(--green); font-weight: 800; }
  .cf.mid { color: var(--blue); font-weight: 700; }
  .cf.weak { font-weight: 400; cursor: help; }   /* U/O 55% 미만: 반반에 가까운 예측 (10/7) */
  .opt.pick .pct.hi { color: #ffe786; font-weight: 800; opacity: 1; }
  .opt.pick .pct.mid { color: #fff; font-weight: 700; opacity: 1; }
  .game.done .opt.pick .pct.hi, .game.live .opt.pick.loss .pct.hi, .game.live .opt.pick.win .pct.hi { color: var(--green); }
  .game.done .opt.pick .pct.mid, .game.live .opt.pick.loss .pct.mid, .game.live .opt.pick.win .pct.mid { color: var(--blue); }
  .opt.actual .pct.hi { color: #ffe786 !important; }
  .opt.actual .pct.mid { color: #fff !important; }
  .mybets { border-top: 1px solid var(--line); padding: 10px 12px 4px; }
  .mybets.fold .mb { display: none; }
  .mybets.fold.open .mb { display: flex; } /* 카트에선 카트에 집중: 오늘 구매 목록은 접어 두고 눌러서 펼침 */
  .mybets .mb { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; font-size: 13px; padding: 7px 0; border-top: 1px dashed var(--line); }
  .mybets .mb > span:first-child { white-space: nowrap; }
  .mybets .mb .lk { margin-left: auto; white-space: nowrap; }
  .mybets .mb .lk a { display: inline-block; color: var(--blue); cursor: pointer; margin-left: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 2px 8px; background: #fff; }
/* SCOUT 예측 OFF: 예측 태그·색·적중 표시·요약을 감춘다 (실제 결과 파랑 채움은 유지) */
  .wrap.nopred .opt.pick:not(.actual):not(.sel) { background: var(--white); border-color: var(--line-strong); color: var(--text); }   /* 카트에 담은 칸(.sel)은 SCOUT 예측 칸이어도 주황 그대로 (10/12: 예측 숨김·조합 보기에서 그 칸만 흰색이라 담긴 게 안 보였다) */
  .wrap.nopred .opt.pick:not(.actual):not(.sel) .lab, .wrap.nopred .opt.pick:not(.actual):not(.sel) .val { color: var(--text); }
  .wrap.nopred .opt.pick::before, .wrap.nopred .opt .mark, .wrap.nopred .opt .pct, .wrap.nopred .mname .pk, .wrap.nopred .brief, .wrap.nopred .bar .stat.done, .wrap.nopred .ai-line, .wrap.nopred .aitab-wrap, .wrap.nopred .side-info > div { display: none !important; }
  .wrap.nopred .mname b:empty::after, .wrap.nopred .mname .pk::after { content: ""; }
  .wrap.nopred .mrow:first-child .mname::after { content: "예측 숨김"; color: var(--muted); font-weight: 400; font-size: 13px; display: block; }
  .bar input[type=date] { box-sizing: border-box; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: 14px; background: #fff; }
  .bar > b { font-size: 15px; }
  .bar .stat { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; white-space: nowrap; }
  .bar > b { white-space: nowrap; }
  .bar .btn { white-space: nowrap; }
  .bar .stat.done { background: var(--hover); color: var(--text); }
  .bar .stat.done b { color: var(--blue); }
  .bar .stat.live { background: var(--red-bg); color: var(--red); }
  .bar .stat.pre { background: var(--blue-light); color: var(--blue); }
  .thead { display: grid; grid-template-columns: 180px 1fr 250px; background: var(--navy); color: #fff; font-weight: 600; padding: 8px 12px; font-size: 14px; }
  .thead span:nth-child(2) { text-align: center; }
  .game { border-bottom: 1px solid var(--line); }
  .game .pre-note { padding: 10px 14px; font-size: 13px; color: var(--muted); background: var(--surface); border-top: 1px dashed var(--line); } /* 예측 파일 없는 날(내일~)의 카드 본문 */
  .game .head { display: grid; grid-template-columns: 180px 1fr 250px; align-items: center; padding: 10px 12px; } /* 첫 칸 180px = 마켓 행(.mrow)의 이름 칸과 같아 팀 블록과 배당 카드가 같은 열에서 시작 · 상태 칸 고정폭(요약 길이에 따라 밀리지 않게) */
  .game .when small { display: block; color: var(--muted); font-size: 11px; }
  .game .head { cursor: pointer; }
  .game .tg { display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 11px; color: var(--muted); margin-left: 8px; background: #fff; }
  .game.closed .tg { color: var(--blue); border-color: var(--blue); }
  .game .brief { display: none; font-size: 12px; color: var(--muted); font-weight: 400; margin-right: 6px; white-space: nowrap; }
  .game.closed .brief { display: inline-grid; grid-template-columns: 28px auto 30px 8px auto 30px; column-gap: 2px; align-items: center; vertical-align: middle; } /* 칸 고정: 행마다 승·언더오버 배지 x 가 같게 */
  .game .brief .bt { text-align: right; overflow: hidden; text-overflow: ellipsis; } .game .brief .bp { text-align: left; font-variant-numeric: tabular-nums; } .game .brief .bd { text-align: center; }
  .game.done .brief, .game.live .brief { display: none !important; } /* 점수가 있는 경기는 상태 칸에 점수만 (요약 줄이 밀려 나오던 문제) */
/* 접은 카드(PC): 상태 칸 = 첫 줄 [예정][▲], 둘째 줄 예측 요약 — 한 줄이면 요약(159px)+배지+버튼이 칸(190~250px)을 넘어 접기 버튼이 카드 밖으로 튀어나왔다 (10/10) */
  .game.closed .state { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 0; row-gap: 3px; }
  .game.closed .state .brief { order: 2; flex: 0 0 100%; margin-right: 0; justify-content: end; }
  .game .when { color: var(--muted); font-size: 14px; }
  .game .when b { display: block; font-size: 18px; color: var(--text); }
/* 홈 | vs(또는 스코어) | 원정 — 아래 배당 버튼도 같은 640px 격자에 맞춰 vs 선에서 나뉜다 */
  .game .teams { font-size: 19px; font-weight: 700; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; }
  .tm { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .tm.home { flex-direction: row-reverse; justify-content: flex-start; } /* 로고는 vs 옆, 팀명은 로고에 붙여(원정 쪽과 대칭) */
  .tm.home .nm { text-align: right; } /* 홈 팀명·선발은 로고 쪽 끝을 맞춤 — 원정(로고에서 시작)과 거울 대칭 */
  .tm .nm { line-height: 1.15; min-width: 0; }
  .tm .nm .short { display: none; } /* 모바일에서는 짧은 팀명 */
  .tm .nm .full { white-space: nowrap; } /* '롯데 자이언츠'가 '자이언/츠'로 꺾이지 않게 */
/* 오른쪽 패널이 있는 보통 PC 폭(~1400px): 머리 행의 시각 칸 180→100px·상태 칸 250→190px(점수+종료 배지) 로 팀 칸을 넓히고(마켓 행도 같은 열), 팀명은 17px — '롯데 자이언츠'가 홈 배지와 함께 한 줄에 */
  @media (min-width: 701px) and (max-width: 1400px) {
    .thead, .game .head { grid-template-columns: 100px 1fr 190px; }
    .mrow { grid-template-columns: 100px 1fr 190px; }
    .game .teams { font-size: 17px; }
  }
  .tm .nm small .now { color: var(--red); font-weight: 700; white-space: nowrap; }
  .tm .nm small .now .sep { font-style: normal; color: var(--muted); font-weight: 400; }
  .tm .nm small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 선발·ERA·현재 투수는 한 줄 (길면 말줄임) */
  .teams .sc-m { display: none; } /* 모바일: vs 자리에 점수 */
  .tm .nm small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }
  .game .teams .vs { color: var(--muted); font-weight: 400; font-size: 13px; text-align: center; }
  .ptag { display: inline-block; box-sizing: border-box; font-style: normal; font-size: 11px; line-height: 15px; height: 17px; font-weight: 700; color: var(--red); border: 1px solid var(--red); border-radius: var(--r-sm); padding: 0 4px; vertical-align: 1px; white-space: nowrap; } /* 예측 라벨: 승 / 오버 / 언더 ('홈' 라벨과 같은 형태) */
  .ptag.under, .ptag.w { color: var(--blue); border-color: var(--blue); }
  .ptag.l { color: var(--muted); border-color: var(--line-strong); }
  .game .teams .home-tag { font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-sm); padding: 0 4px; margin-left: 6px; vertical-align: middle; }
  .game .state { text-align: right; font-weight: 700; white-space: nowrap; }
  .game .state .score { display: inline-grid; grid-template-columns: 2.4ch 0.8ch 2.4ch; font-size: 22px; margin-right: 8px; vertical-align: middle; font-variant-numeric: tabular-nums; }
  .game .state .score i { font-style: normal; text-align: right; }
  .game .state .score i:last-child { text-align: left; }
  .game .state .score em { font-style: normal; text-align: center; color: var(--muted); }
  .opt .lab .tscore { color: var(--text); font-size: 13px; }
  .opt.pick .lab .tscore, .opt.sel .lab .tscore { color: #fff; }
  /* 결과가 난 뒤 예측 박스는 흰 배경으로 돌아간다 — 점수까지 흰색이면 **안 보인다** (10/11 전수 검수: .opt.pick.loss 에서 흰 글씨/흰 배경). 바로 아래 .noodds 에는 같은 규칙이 이미 있었다 */
  .game.done .opt.pick .lab .tscore, .game.live .opt.pick.loss .lab .tscore, .game.live .opt.pick.win .lab .tscore { color: var(--text); }
  .opt .noodds { font-size: 12px; font-weight: 400; color: var(--muted); }
  .opt.pick .noodds { color: #e6eefc; }
  .game.done .opt.pick .noodds, .game.live .opt.pick.loss .noodds, .game.live .opt.pick.win .noodds { color: var(--muted); } /* 결과 후 흰 배경으로 바뀐 예측 박스: 배당 없음 글자 회색 */
  .game .state .badge { display: inline-block; font-size: 14px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--blue-light); color: var(--blue); font-weight: 700; }
  .game .state .badge.done { background: #3f4b5e; color: #fff; } /* 끝난 경기: 진한 회색 채움 (진행 중과 한눈에 구분) */
  .game .state .badge.live { background: var(--red); color: #fff; }
  .game .state .badge.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: blink 1.2s infinite; }
/* 카드 머리줄 배경 = 경기 상태 (일정 탭과 같은 규칙): 예정 흰색 · 진행 중 연한 파랑 + 파란 띠 · 연장(10회~) 한 단계 진한 파랑 + 남색 띠 · 종료 옅은 회색. 상태 칩은 그대로 */
  .game.live > .row, .game.live > .head { background: #eaf2fd; }
  .game.live > .head { box-shadow: inset 4px 0 0 var(--blue); }
  .game.live.extra > .row, .game.live.extra > .head { background: #d9e6fb; }
  .game.live.extra > .head { box-shadow: inset 4px 0 0 var(--navy); }
  .game.done > .head, .game.cancelled > .head { background: #f1f3f6; }   /* 종료·취소 모두 옅은 회색 (일정 탭과 같은 규칙) */
  .game .state .badge.cancel { background: var(--red-bg); color: var(--red); position: relative; cursor: pointer; }   /* 누르면 안내 툴팁 (카드 아래 안내 줄 대신) */
  .badge.cancel .ico { font-style: normal; }
  .badge.cancel .box { display: none; position: absolute; top: 30px; right: 0; z-index: 30; width: 280px; padding: 10px 12px; background: #fff; border: 1px solid #f3c2c2; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--text); white-space: normal; text-align: left; cursor: default; }
  .badge.cancel.on .box { display: block; }
  .game.cancelled .teams { color: var(--muted); }   /* 취소 경기: 팀·투수는 회색만 (취소선 없음 — 상태 칩·안내 줄·우측 패널 '무효'로 충분) */
  .bar .cxlsum { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--red); background: var(--red-bg); white-space: nowrap; }
  .mrows { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .game:not(.closed) { border-bottom: 2px solid var(--line-strong); }
  .side-info { border-top: 1px dotted var(--line); margin-top: 8px; padding: 10px 0 2px; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; color: var(--muted); }
  .side-info > div { flex: 1 1 280px; }
  .side-info b { color: var(--text); font-weight: 700; }
  .side-info .k { display: inline-block; min-width: 76px; color: var(--muted); }
  .side-info .aitab-wrap { flex: 1 1 100%; overflow-x: auto; }
  table.aitab { margin: 2px 0 0; font-size: 13px; }
  table.aitab th { padding: 6px 8px; font-size: 13px; background: var(--slate); }
  table.aitab td { padding: 6px 8px; vertical-align: top; }
  table.aitab th { white-space: nowrap; }
  table.aitab td.who { white-space: nowrap; font-weight: 700; color: var(--purple); }
/* 열 폭 고정: 적중/미적중 배지는 픽 위 줄에 두어 '미적중 삼성 승 68%' 가 한 줄로 늘어나며 열을 밀지 않게 */
  @media (min-width: 701px) {
    table.aitab { table-layout: fixed; width: 100%; }
    table.aitab th:nth-child(1) { width: 20%; }
    table.aitab th:nth-child(2), table.aitab th:nth-child(3), table.aitab th:nth-child(4) { width: 114px; } /* 픽 칸은 '언더 9.5 70%'가 한 줄에 들어가는 폭을 고정 (표가 좁아도 칸 밖으로 삐져나오지 않게) */
    .game table.aitab td.pk { padding-left: 5px; padding-right: 5px; white-space: normal; word-break: keep-all; }
    table.aitab td.why { white-space: normal; word-break: keep-all; }
  }
  table.aitab td.pk { white-space: nowrap; font-weight: 700; color: var(--text); } /* 승패·핸디·U/O 칸은 내용 폭, 근거 칸이 남는 폭을 씀 */
  table.aitab td.why { white-space: normal; overflow-wrap: anywhere; color: #7c6fa6; font-size: 13px; line-height: 1.45; min-width: 200px; }
  table.aitab tr.why-row { display: none; } /* 모바일에서만: 근거를 별도 줄로 */
  @media (max-width: 700px) {
    table.aitab { font-size: 12px; }
    table.aitab td, table.aitab th { padding: 5px 5px; }
    table.aitab th:nth-child(5), table.aitab td.why:not([colspan]) { display: none; }
    /* 근거 줄은 접어 두고(참가자 8명이면 카드가 화면 두세 배) 참가자 행을 누르면 그 줄만 펼친다 (board.html aitab 클릭 핸들러) */
    table.aitab tr.why-row { display: none; }
    table.aitab tr.why-row.on { display: table-row; }
    table.aitab tr[data-ai]:not(.why-row) { cursor: pointer; }
    table.aitab td.who { position: relative; padding-right: 13px; }
    table.aitab td.who::after { content: '▾'; position: absolute; right: 3px; top: 6px; color: var(--muted); font-weight: 400; font-size: 10px; }
    table.aitab tr.on td.who::after { content: '▴'; }
    table.aitab tr.why-row td { min-width: 0; font-size: 12px; padding: 2px 6px 7px; border-top: none; }
    table.aitab td.who { white-space: normal; }
    table.aitab { table-layout: fixed; width: 100%; }
    table.aitab th:nth-child(1), table.aitab td.who { width: 27%; }
    table.infotab { table-layout: fixed; width: 100%; } table.infotab th:first-child, table.infotab td:first-child { width: 27%; } /* 위 '항목' 표의 첫 열 폭을 AI 표의 'AI' 열과 같게 — 두 표의 세로 경계선이 한 줄로 */
    table.aitab td.pk { white-space: normal; word-break: keep-all; font-size: 11px; padding-left: 3px; padding-right: 3px; }
    table.aitab td.pk .pt { white-space: normal; }
  }
/* 부가 정보(예상 점수·승률·AI 의견)는 화면 크기와 상관없이 눌러서 펼침 */
  .more-tg { display: block; text-align: right; font-size: 13px; color: var(--blue); padding: 8px 4px 0; cursor: pointer; }
/* 경기코드(시장)마다 '상세 ›' — 시장 이름 바로 뒤. 모달은 이 시장 탭으로 열린다 (10/9) */
  /* '상세 ›' 는 행의 셋째 칸(상태 열) — 줄마다 오른쪽 끝에서 줄을 선다. 셋을 모두 명시한다: 하나만 칸을 주면 나머지가 자동 배치로 밀려 카드가 깨진다 (10/9 실제로 깨짐) */
  .mrow .mname { grid-column: 1; }
  .mrow .opts { grid-column: 2; }
  .mrow .mkdet { grid-column: 3; justify-self: end; font-size: 12px; font-weight: 700; color: var(--blue); cursor: pointer; white-space: nowrap; }
  .mrow .mkdet:hover { text-decoration: underline; }
  @media (min-width: 701px) {
    .mrow > .mname, .mrow > .opts, .mrow > .mkdet { grid-row: 1; }   /* 이름 | 보기 | 상세 한 줄, 상세는 모든 줄 오른쪽 끝 (10/10 A안) — HTML 순서(이름·상세·보기)대로 자동 배치되면 보기 상자가 둘째 줄로 밀려 빈 줄이 생겼다 */
  }
/* 시장 이름(승패·승①패·핸디·언더오버·전반…)을 누르면 규칙 말풍선 (tip.js title) — 점선 밑줄로 눌러 볼 수 있음을 표시 (10/10) */
  .mrow .mname .mkn { border-bottom: 1px dotted var(--line-strong); cursor: help; }
  .mrow .mname .tip + .line { margin-left: 4px; }   /* 홀짝 'ⓘ 총득점' — 모바일(flex)에서 붙던 것 */
/* 상세 모달 탭 (10/9): 고른 시장 것만 보이고, 공통 근거는 '공통 근거' 탭에 */
  .modal.gdet .mtabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .modal.gdet .mtabs::-webkit-scrollbar { display: none; }
  /* 탭 글자가 세로로 안 맞던 것: '승①패' 의 ① 는 글자 높이가 달라 줄상자를 밀어낸다 → 높이를 고정하고 가운데 정렬 */
  .modal.gdet .mtabs a { flex: none; display: flex; align-items: center; height: 38px; padding: 0 12px; line-height: 1; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .modal.gdet .mtabs a:hover { color: var(--navy); }
  .modal.gdet .mtabs a.on { color: var(--blue); border-bottom-color: var(--blue); }
  @media (max-width: 700px) { .modal.gdet .mtabs { padding: 0 8px; } .modal.gdet .mtabs a { height: 42px; padding: 0 10px; } }
  .modal.gdet .mkempty { margin: 0 14px 16px; padding: 14px; background: var(--bg); border: 1px dashed var(--line-strong); border-radius: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }
  .modal.gdet .mkempty b { color: var(--text-2); }
/* 시장별 근거 줄 (10/9): 실체는 본문 크기, 확률 출처는 한 단 작고 연하게 */
  .infotab td .wline { font-size: 13px; line-height: 1.6; color: var(--text-2); }
  .infotab td .wsrc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* 시장 비교 (10/9): 출처마다 한 줄 — 이름 | (기준선) | 막대 | 숫자. 우리 줄은 파랑. 숫자만 늘어놓으면 '29.0 / 30.2 / 27.6 / 40.1' 중 무엇이 튀는지 한 번에 안 들어온다 — 막대가 그걸 보여 준다 */
  /* 출처 | 예상(오버·승) | (기준선) | 막대 | 숫자 — 예상을 제 칸으로 빼야 세로로 맞는다 (10/9) */
  .srccmp { display: grid; grid-template-columns: max-content max-content minmax(60px, 1fr) 48px; gap: 4px 10px; align-items: center; max-width: 420px; }
  .srccmp.uo { grid-template-columns: max-content max-content max-content minmax(50px, 1fr) 48px; }
  .srccmp .sc-r { display: contents; }
  .srccmp .sc-l { font-size: 13px; color: var(--text-2); white-space: nowrap; }
  .srccmp .sc-p { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }   /* 그 출처가 예상하는 결과 (승/패·오버/언더) */
  .srccmp .sc-r.ours .sc-p { color: var(--blue); opacity: .8; }
  .srccmp .sc-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
  .srccmp .sc-b { position: relative; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
  .srccmp .sc-b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--muted-2); border-radius: 4px; }
  .srccmp .sc-v { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .srccmp .sc-r.ours .sc-l, .srccmp .sc-r.ours .sc-v { color: var(--blue); font-weight: 800; }
  .srccmp .sc-r.ours .sc-b i { background: var(--blue); }
  .srccmp .sc-r.ours .sc-b { box-shadow: inset 0 0 0 1px rgba(32, 96, 200, .18); }
  .infotab td.why .sc-note, .infotab td .sc-note { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
  @media (max-width: 700px) { .srccmp { max-width: none; gap: 4px 8px; } }
  .note.legend { display: flex; flex-wrap: nowrap; gap: 3px 14px; word-break: keep-all; overflow: hidden; } /* 한 줄 고정: 자리가 모자라면 뒤쪽 항목이 …으로 잘리고 전체는 툴팁(title) */
  .note.legend span { white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .note.legend { cursor: pointer; }
  .note.legend.open { flex-wrap: wrap; }
  .note.legend.open span { overflow: visible; } /* 누르면 펼쳐서 전부 보임 (모바일) */
  .note.legend .sw { display: inline-block; width: 12px; height: 12px; vertical-align: middle; border-radius: var(--r-sm); }
  @media (max-width: 700px) {
    table.t.sb .tm { font-size: 12px; }
    table.t.sb .tm .home-tag { display: none; }
  }
  table.t.lu th .home-tag { margin-left: 2px; }
  table.t.lu td.nm { font-weight: 700; color: var(--text); }
  table.t.sb .tm { font-weight: 700; white-space: nowrap; }
  .game .side-info { display: none; } /* 상세(예상 점수·근거·승률·AI 의견)는 카드에 펼치지 않고 '예상 점수 · 승률 · AI 의견 ›' 모달에서만 — AI 예측 보기에서도 (10/6) */
/* AI 픽 요약 줄: 접힌 카드에서 항상 보임, 펼치면 상세 표로 대체 */
  @media (max-width: 1000px) {
    .more-tg { text-align: center; }
  }
  .opt.can { cursor: pointer; }
  .opt.can:hover { box-shadow: 0 0 0 2px var(--blue-light); }
  .opt.sel { background: var(--orange); border-color: var(--orange); color: #fff; }
  .opt.sel .lab, .opt.sel .val { color: #fff; }
  .opt.sel::after { content: "카트"; position: absolute; top: -9px; right: 6px; background: var(--orange); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: var(--r-sm); }
  .opt.pick::before { content: "예측"; position: absolute; top: -9px; left: 6px; background: var(--blue); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: var(--r-sm); }
  .game .state .badge.closed { background: var(--hover); color: var(--muted); }
  .cart .leg .rm { color: var(--red); cursor: pointer; margin-left: 8px; font-weight: 700; }
  .cart .stake { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .cart .stake input { width: 100%; padding: 8px; font-size: 16px; text-align: right; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
  .cart .quick { display: flex; gap: 6px; margin-top: 6px; }
  .cart .quick a { flex: 1; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 5px 0; font-size: 13px; cursor: pointer; }
  .cart .buy { display: block; width: 100%; padding: 12px; background: var(--buy); color: #fff; font-weight: 800; font-size: 16px; border: none; cursor: pointer; }
  .cart .buy:disabled { background: #c9ced8; cursor: default; }
  .cart .buyrow { display: flex; }
  .cart .buyrow .buy { flex: 2; }
  .cart .keep { flex: 1; padding: 12px 8px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; border: 1px solid var(--line-strong); border-left: 0; cursor: pointer; white-space: nowrap; }
  .cart .keep:disabled { color: #b5bccb; cursor: default; }
  .bet { border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .bet .h { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
  .bet .lg { display: flex; justify-content: space-between; padding: 3px 0; }
  .bet .lg .o { color: var(--blue); font-weight: 700; }
  .mrow { display: grid; grid-template-columns: 180px 1fr 170px; align-items: center; gap: 0; padding: 0; } /* 헤더(개최일시|경기|상태)와 같은 열 */
  /* 아래 '기록 · 중계 ›' 도 '상세 ›' 와 같은 열 끝에 (같은 격자를 써서 저절로 맞는다) */
  .markets .mlinks { display: grid; grid-template-columns: 180px 1fr 170px; align-items: center; }
  .markets .mlinks .glink { grid-column: 3; justify-self: end; }
  @media (max-width: 700px) { .markets .mlinks { display: flex; justify-content: flex-end; } }
  .mrow .mname { padding-right: 10px; }
  .mrow .mname { font-size: 14px; color: var(--muted); line-height: 1.5; white-space: nowrap; }
  .mrow .mname b { color: var(--text); display: block; margin-top: 3px; } /* 마켓 이름 줄과 예측 줄 사이 약간의 여백 */
  .mrow .mname .line { color: var(--green); font-weight: 700; }
  .opts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; width: 100%; max-width: 640px; margin: 0 auto; padding-top: 9px; }
  .opts.three { grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; } /* 승①패: 홈 2점차+ · 1점차 · 원정 2점차+ */
  .wrap:not(.adv) .mrow.adv { display: none; } /* 고급 시장(승①패 등)은 기본 보기에서 숨김 — 보기 선택기의 토글로 켬 (localStorage kbo_adv) */ /* 팀 격자(홈 | 64px vs | 원정)와 같은 선에서 나뉨 */
  .opt { min-width: 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white); text-align: center; position: relative; }
  .opt .lab { font-size: 14px; color: var(--muted); }
  .opt .val { font-size: 18px; font-weight: 800; }
  .opt.pick { background: var(--blue); border-color: var(--blue); color: #fff; }
  .opt.pick.sel { background: var(--orange); border-color: var(--orange); } /* 카트에 담으면 예측과 같은 쪽이어도 주황 (예측 태그는 그대로 두어 둘 다 보이게) */
  .opt.sel .pct { color: #fff; opacity: 1; }
/* 결과가 나온 경기(.done)·진행 중 확정(.actual): 색은 맞은 쪽(실제 결과)에만. 우리 픽은 "예측" 태그 + 테두리(초록 적중/빨강 실패) */
  .game.done .opt.pick, .game.live .opt.pick.loss, .game.live .opt.pick.win { background: var(--white); color: var(--text); border-width: 2px; }
  .game.done .opt.pick .lab, .game.done .opt.pick .val, .game.live .opt.pick.loss .lab, .game.live .opt.pick.loss .val { color: var(--text); }
  .game.done .opt.pick, .game.live .opt.pick.loss, .game.live .opt.pick.win { border-width: 1px; border-color: var(--line-strong); }
  .opt.actual { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
  .opt.actual .lab, .opt.actual .val, .opt.actual .lab .tscore, .opt.actual .noodds { color: #fff !important; }
/* 진행 중 언더오버가 이미 결정된 경우: 결과는 우리 예측 박스의 적중/미적중 태그로만 표시 ('확정' 태그 없음) */
  .opt.pick .lab, .opt.pick .val { color: #fff; }
  .opt .pct { font-size: 13px; margin-left: 5px; opacity: .9; }
/* 결과 태그: 예측 박스 오른쪽 위 (왼쪽 위 "예측" 태그와 짝). 테두리 색 대신 이 태그로만 적중/미적중을 표시 */
/* 결과는 예측 태그 하나로: '예측' → '예측 · 적중'(초록) / '예측 · 미적중'(빨강). 별도 오른쪽 위 뱃지는 쓰지 않는다 */
  .opt .mark { display: none; }
  .opt.pick.win::before { content: "예측 · 적중"; background: var(--green); }
  .opt.pick.loss::before { content: "예측 · 미적중"; background: var(--red); }
  .opt.pick.push::before { content: "예측 · 무승부(무효)"; background: var(--muted); } /* 승패 픽인데 무승부로 끝남 — 적중도 미적중도 아님 */
/* 진행 중 잠정: 현재 점수 기준(경기 끝나면 확정 표기로 바뀜) */
  .opt.pick.lw::before { content: "예측 · 적중 중"; background: var(--green); opacity: .85; }
  .opt.pick.ll::before { content: "예측 · 미적중 중"; background: var(--red); opacity: .85; }
  .opt.pick.lt::before { content: "예측 · 동점"; background: var(--muted-2); }
  .info { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--muted); padding: 8px 0 3px; border-top: 1px dotted var(--line); margin-top: 4px; grid-column: 1 / -1; }
  .info b { color: var(--text); font-weight: 600; }
  .side { position: sticky; top: 16px; align-self: start; }
  .side .tabs2 { display: flex; }
  .side .tabs2 a { flex: 1; text-align: center; padding: 10px 4px; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--line); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 탭 셋(조합·카트·내 예측)이 한 줄에 */
  .side .tabs2 a.on { color: #fff; background: var(--navy); border-color: var(--navy); }
  .side .tabs2 a.fold { flex: 0 0 34px; padding: 10px 0; font-size: 11px; color: var(--muted); background: var(--bg); }
  @media (max-width: 860px) {
    .side.folded .tabs2 a[data-t] { display: none; }
  }
  .side.folded .ticket, .side.folded .empty { display: none; } /* 접힌 패널: 탭 줄만 남김 */
  .side .recbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .side .recbar select { flex: 1; min-width: 0; max-width: 100%; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; }
  .side.folded .recbar { display: none; }
  @media (max-width: 700px) {
    .wrap { min-height: calc(100vh - 230px); align-content: start; }
  }
  .ticket { display: none; }
  .ticket.on { display: block; }
  .leg { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .leg .g { font-size: 13px; color: var(--muted); }
  .leg .why { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .leg .s { font-weight: 700; }
  .leg .o { font-weight: 700; color: var(--blue); }
  .leg .o small { color: var(--text); font-weight: 700; font-size: 13px; margin-left: 6px; }
  .leg.push .s { color: var(--muted); }
/* 카트: 오른쪽 아래 플로팅 버튼 + 오버레이 서랍 (경기 고를 때만 등장, 전부 마감이면 숨김) */
  .cart-fab { position: fixed; right: 20px; bottom: 24px; z-index: 45; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer; }
  .cart-fab[hidden] { display: none; }
  .cart-fab .n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-sizing: border-box; }
  .cart-fab .n:empty { display: none; }
  .cart-fab.bump { animation: fabbump .35s ease; }
/* 서랍은 모달이 아니다: 배경을 막지 않아 열어 둔 채 왼쪽 예측판에서 계속 담을 수 있다 (담을 때마다 서랍 내용이 갱신) */
  .cdrawer { position: fixed; inset: 0; z-index: 50; display: none; pointer-events: none; }
  .cdrawer.open { display: block; }
  .cdrawer .pn { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; background: #fff; overflow-y: auto; box-shadow: -6px 0 24px rgba(0,0,0,.22); pointer-events: auto; border-left: 1px solid var(--line); }
  .cdrawer .ph { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--navy); color: #fff; font-weight: 800; font-size: 15px; }
  .cdrawer .ph small { font-weight: 400; opacity: .85; margin-left: 4px; }
  .cdrawer .ph .chev { display: none; font-style: normal; font-size: 11px; opacity: .8; margin-right: 10px; }
  .cdrawer .ph .x { cursor: pointer; font-size: 18px; padding: 2px 6px; color: #fff; }
  .cdrawer .ticket.cart { display: block; }
  @media (min-width: 861px) {
    .cart-fab, .cdrawer { display: none !important; }
  } /* PC: 카트는 오른쪽 패널 탭 */
  @media (max-width: 860px) {
    .side .tabs2 a[data-t="cart"] { display: none; } /* 모바일: 카트는 🛒 버튼 + 시트 */
    .cart-fab { right: 14px; bottom: 14px; width: auto; height: 52px; padding: 0 16px 0 14px; gap: 6px; border-radius: var(--r-round); font-size: 24px; } /* 하단 시트 탭 줄 위 · 아이콘만으론 작고 뜻이 안 보여 글자 붙은 알약 버튼 */
    .cart-fab .lb { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
    .cart-fab .n { position: static; min-width: 24px; height: 24px; border: 0; font-size: 13px; }
    .cdrawer .pn { top: auto; left: 0; right: 0; width: auto; max-height: 52vh; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.22); border-left: 0; } /* 화면 절반만 차지, 안에서 스크롤 — 위쪽 예측판에서 계속 고를 수 있게 */
    .cdrawer.folded .pn { max-height: 46px; overflow: hidden; } /* 헤더 줄만 남기고 접힘: 경기 목록을 보며 담고, 줄을 누르면 다시 펼침 */
    .cdrawer .ph { cursor: pointer; }
    .cdrawer .ph .chev { display: inline-block; }
    body.cart-open .cart-fab, body.cart-open .side { display: none; } /* 카트가 떠 있는 동안 하단 SCOUT 시트는 숨김 (둘이 겹치지 않게) */
    .side.folded { display: none !important; } /* 하단 고정 바 없음: 패널은 상단 '티켓' 버튼으로 여는 아래 시트 */
  }
/* 모바일 보기 선택 시트 */
  @media (max-width: 700px) {
    .thead, .game .head { grid-template-columns: 56px 1fr 60px; padding: 8px 6px; }
    /* 모바일: 이름 | 상세 가 한 줄, 보기 상자는 아래 줄 전체 */
    .mrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
    .mrow .mname { grid-column: 1; }
    .mrow .mkdet { grid-column: 2; display: inline-flex; align-items: center; min-height: 28px; }
    .mrow .opts { grid-column: 1 / -1; }
    /* 모바일: '승패 1397  한화 승 61%  상세 ›' 한 줄. 줄이 길면 가운데(기준선·예측)만 말줄임하고 '상세'는 오른쪽에 붙여 둔다 — 전처럼 줄 전체를 말줄임하면 맨 끝 '상세'가 먼저 잘려 사라진다 */
    .mrow .mname { padding-right: 0; display: flex; align-items: center; min-width: 0; white-space: nowrap; }
    .mrow .mname .line { margin-left: 5px; }   /* flex 안에선 사이 공백이 사라져 '전반 승무패5이닝'·'언더오버6.5' 처럼 붙어 보였다 (10/12) */
    .mrow .mname > b { display: block; margin: 0 0 0 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .opts { column-gap: 12px; }
    .opts.three { column-gap: 6px; }
    .game .brief { display: none !important; }
    .game .state .score { display: block; margin: 0 0 2px; font-size: 18px; }
    .game .when b { font-size: 15px; }
    .game .when small { font-size: 11px; }
    .game .teams { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 2px; font-size: 15px; }
    .tm { gap: 4px; }
    .tm.home { justify-content: flex-start; gap: 6px; }
    .tm.home .nm { text-align: right; } /* 모바일: 홈 팀명·선발을 로고에 붙이고 오른쪽 끝을 맞춤 — 원정(로고에서 시작)과 거울 대칭, 홈만 떨어져 보이지 않게 */
    .game.done .teams .vs.plain, .game.live .teams .vs.plain { display: none; }
    .game.done .teams .sc-m, .game.live .teams .sc-m { display: inline; font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; letter-spacing: -0.5px; }
    .game .state .score { display: none; }
    .tm .nm .full { display: none; }
    .tm .nm .short { display: inline; }
    .tm .nm { overflow: hidden; }
    .tm .nm .full, .tm .nm .short { white-space: nowrap; }
    .tm .nm small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tm .nm .era { display: none; }
    .tm .nm small.haslive .stn, .tm .nm small.haslive .sep { display: none; } /* 모바일 진행 중: 선발은 숨기고 현재 투수만 */
    .game .teams .home-tag { display: none; }
    .game .teams .logo { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
    .game .tg { display: none; }
    .game .state .badge { font-size: 12px; padding: 3px 7px; white-space: nowrap; }
    .game .state .badge.cancel { padding: 3px 5px; }   /* 상태 칸 60px 안에 '경기취소' 한 줄 */
    .game .state .badge.cancel .ico { display: none; }
    .badge.cancel .box { width: min(280px, 86vw); }
  }
/* 사용성: 선수 이름 링크(기록으로) · 기록 표 강조 행 · 카드 근거 행 · 모바일 범례 접힘 · 좁은 PC 폭의 U/O 박스 한 줄 */
  a.plink { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* 밑줄은 글자에 붙여서 (터치 화면에서 누르는 영역을 위아래로 늘려도 밑줄이 다음 줄로 밀리지 않게 — 테두리 밑줄은 영역 끝에 그려짐) */
  a.plink:hover { color: var(--blue); text-decoration-style: solid; }
  @media (max-width: 700px) {
    .game .head .tm .nm a.plink { pointer-events: none; text-decoration: none; }
  } /* 모바일: 카드 머리를 눌러 펼칠 때 선발 이름 링크가 가로채 페이지가 이동하지 않게 (경기 상세·라인업의 링크는 유지) */
/* 근거 행: 항목 칩(선발 ERA · 라인업 WAR · ELO · 최근 10경기) — 칩 안에서는 줄이 안 바뀌고 칩 단위로만 줄바꿈, 유리한 쪽 파란색 */
  .infotab td.why { line-height: 1.5; padding-top: 5px; padding-bottom: 5px; }
  .infotab td.why .wi { display: inline-block; white-space: nowrap; margin: 2px 14px 2px 0; }
  .infotab td.why .wi.hd { color: var(--muted); font-weight: 700; }
  .infotab td.why .wi small { color: var(--muted); margin-right: 5px; }
  .infotab td.why .wi i { font-style: normal; color: var(--muted); margin: 0 5px; font-size: 12px; }
  .infotab td.why .wi b { color: var(--text); }
  .infotab td.why .wi b.adv { color: var(--blue); }
  .infotab td.why .wi em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 3px; }
  @media (max-width: 700px) {
    .note.legend:not(.open) span { display: none; }
    .note.legend:not(.open)::before { content: '색깔·태그 설명 보기 ▾'; color: var(--muted); }
  } /* 모바일: 접힌 범례는 말줄임 대신 한 줄 안내 */
  .viewnote { margin: 6px 0 0; padding: 6px 10px; background: #fff7e0; border: 1px solid #f2d58a; border-radius: 4px; font-size: 13px; color: #6b4e00; }
  .viewnote a { color: var(--blue); cursor: pointer; font-weight: 700; margin-left: 6px; } /* 조합·내 예측 보기로 경기가 숨겨졌을 때 */
/* 배당 변동: 배당 옆 화살표(▲ 올랐음 · ▼ 내렸음, 툴팁에 발매 시 값) + 정보 표 '배당 변동' 행 */
  .opt .val i.mv { font-style: normal; font-size: 10px; margin-left: 3px; vertical-align: 2px; }
  i.mv.up { color: var(--red); }
  i.mv.down { color: var(--blue); }
  .opt.pick .val i.mv, .opt.actual .val i.mv { color: #fff; opacity: .95; } /* 파란 박스 위에서는 흰색 (방향은 ▲▼ 기호로) */
  .infotab td.why > small.mut { display: inline-block; white-space: nowrap; }
  .infotab td.why .wi b i.mv { font-style: normal; font-size: 10px; margin-left: 2px; }
  .infotab td.why .wi b + b { margin-left: 8px; }
/* 배당 변동 표 (10/9): 한 줄에 몰아 쓰던 것을 칸 맞춘 표로 — 시장 | 대상 | 발매값 → 지금값 | 방향. 숫자는 등폭·오른쪽 맞춤이라 위아래로 자릿수가 선다. 같은 시장이 이어지면 시장 이름은 한 번만 */
  .mvtab { display: grid; grid-template-columns: max-content max-content max-content 11px max-content 13px max-content; gap: 2px 8px; align-items: baseline; font-size: 13px; }
  .mvtab .mvr { display: contents; }
  .mvtab .mv-k { color: var(--muted); font-weight: 700; }
  .mvtab .mv-w { color: var(--text-2); }
  .mvtab .mv-o, .mvtab .mv-n { font-variant-numeric: tabular-nums; text-align: right; }
  .mvtab .mv-o { color: var(--muted); }
  .mvtab .mv-n { color: var(--text); font-weight: 700; }
  .mvtab .mv-ar { font-style: normal; color: var(--muted-2); text-align: center; }
  .mvtab i.mv { font-style: normal; font-size: 11px; }
  .mvtab .mv-c { font-size: 11px; color: var(--muted); cursor: help; }   /* 여러 번 바뀐 줄: '3번' (발매값 → 지금값 사이 중간 값은 그래프에) */
  .infotab td.why .mv-at { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
  @media (max-width: 700px) { .mvtab { gap: 2px 6px; } }
  /* 배당 추이 (10/12): 계단 그래프 — 홈/언더 파랑, 원정/오버 주황, 기준선이 바뀐 자리는 회색 점선 */
  .otrw { padding-top: 2px; }
  .otr { display: block; width: 100%; max-width: 420px; height: auto; background: #f4f6f9; border-radius: 6px; }
  .otr .ax { stroke: var(--line); stroke-width: 1; }
  .otr .ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; } .otr .ln.h { stroke: var(--blue); } .otr .ln.a { stroke: #e0702c; }
  .otr .dt.h { fill: var(--blue); } .otr .dt.a { fill: #e0702c; } .otr .ln.d { stroke: #8a94a6; } .otr .dt.d { fill: #8a94a6; } .otr .ev.d { fill: #6b7486; }
  .otr .ln.p0 { stroke: var(--blue); } .otr .ln.p1 { stroke: #2e9e5b; stroke-dasharray: 5 3; } .otr .ln.p2 { stroke: #7b5cd6; stroke-dasharray: 2 3; } .otr .ln.p3 { stroke: #d6457b; stroke-dasharray: 2 3; }
  .otr .dt.p0 { fill: var(--blue); } .otr .dt.p1 { fill: #2e9e5b; } .otr .dt.p2 { fill: #7b5cd6; } .otr .dt.p3 { fill: #d6457b; }
  .otr .ev.p0 { fill: var(--blue); } .otr .ev.p1 { fill: #2e9e5b; } .otr .ev.p2 { fill: #7b5cd6; } .otr .ev.p3 { fill: #d6457b; }
  .otr .half { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 1 3; }
  .otd > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--text-2); padding: 2px 0; -webkit-tap-highlight-color: transparent; }
  .otd > summary::-webkit-details-marker { display: none; }
  .otd > summary::after { content: " 펼치기 ▾"; color: var(--blue); font-weight: 600; } .otd[open] > summary::after { content: " 접기 ▴"; }
  .otd[open] > summary { margin-bottom: 6px; }
  .otsw { display: inline-flex; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; }
  .otsw a { padding: 3px 11px; color: var(--muted); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .otsw a.on { background: var(--navy); color: #fff; }
  .otp.off { display: none; }
  .otlg { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
  .otlg span { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
  .otlg svg { width: 18px; height: 6px; overflow: visible; } .otlg .ln { fill: none; stroke-width: 2; }
  .otlg .ln.p0 { stroke: var(--blue); } .otlg .ln.p1 { stroke: #2e9e5b; stroke-dasharray: 5 3; } .otlg .ln.p2 { stroke: #7b5cd6; stroke-dasharray: 2 3; } .otlg .ln.p3 { stroke: #d6457b; stroke-dasharray: 2 3; }
  .otsub { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
  .otr .ev { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .otr .ev.h { fill: var(--blue); } .otr .ev.a { fill: #e0702c; }
  .otr .en { font-size: 9px; fill: var(--muted); } .otr .sv { font-size: 9.5px; font-weight: 700; fill: #8a94a6; }
  .otr .dl { font-size: 10px; font-weight: 800; } .otr .dl.h, .otr .dl.p0 { fill: var(--blue); } .otr .dl.a { fill: #e0702c; } .otr .dl.d { fill: #6b7486; }
  .otr .op { stroke: #8a94a6; stroke-width: 1; stroke-dasharray: 4 3; }   /* 발매 기준선 */
  .otr .tk { font-size: 9.5px; fill: var(--muted); } .otr .tm { stroke: var(--line-strong); stroke-width: 1; }
  .otr.prb .ln { stroke-width: 1.5; opacity: .85; } .otr.prb .ln.p0 { stroke-width: 2.6; opacity: 1; }   /* 겹쳐 보기 (10/14): 국내만 굵게 */
  .otr.prb .sv { paint-order: stroke; stroke: #f4f6f9; stroke-width: 3px; stroke-linejoin: round; }   /* 선 위에 얹혀도 읽히게 */
  .otr .gr { stroke: #e3e7ee; stroke-width: 1; } .otr .yl { font-size: 9px; fill: #9aa3b2; font-variant-numeric: tabular-nums; }
  .otr .el .en { font-size: 9.5px; fill: var(--muted); font-weight: 600; }
  .otr .lc { stroke: #98a3b4; stroke-width: 1; stroke-dasharray: 3 3; } .otr .lct { font-size: 9px; fill: var(--muted); font-weight: 700; }
/* 포스트시즌 배지 (시각 칸 아래): WC · 준PO · PO · KS + N차전, 예측판은 시리즈 현황(홈 승-원정 승) */
  .when .stg { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: var(--r-sm); font-size: 11px; font-weight: 800; color: #fff; background: var(--purple); letter-spacing: .2px; white-space: nowrap; }
  .when .stg.ks { background: var(--amber); }
  .when .stg.po { background: #1d4ed8; }
  .when .stg.spo { background: #0f766e; }
  .when .stg.wc { background: var(--purple); }
  .game .when .stg small { display: inline; color: inherit; font-size: inherit; font-weight: 700; margin-left: 4px; opacity: .9; } /* '.game .when small'(구장명: 회색 블록)이 배지 안 시리즈 현황까지 회색으로 만들던 것 */
  .when .stg em { font-style: normal; }
  @media (max-width: 700px) {
    .when .stg { font-size: 10px; padding: 0 4px; white-space: normal; text-align: center; line-height: 1.3; } /* 좁은 시각 칸: '준PO' / 'N차전' 두 줄 (예측판·일정·상세 머리줄은 이제 위 띠(.psb)로 보여 주고 이 배지는 쓰지 않음) */
    .when .stg em { display: block; white-space: nowrap; }
    .game .when .stg small { margin-left: 2px; }
  }
/* 프로토 발매 전: '경기 전 예측' 박스 안에 ⓘ (테두리 없음), 박스를 누르면 설명 풍선. 모바일은 숨겨진 박스 대신 ⓘ만 */
  .bar .stat.ptip { position: relative; cursor: pointer; }
  .stat .pi { font-style: normal; font-size: 15px; line-height: 1; opacity: .85; }
  .ptip .box { display: none; position: absolute; top: 38px; left: 0; z-index: 30; width: 280px; padding: 10px 12px; background: #fff; border: 1px solid #f2d58a; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--text); white-space: normal; cursor: default; }
  .ptip.on .box { display: block; }
  @media (max-width: 700px) {
    .bar .stat.ptip { display: inline-flex !important; height: 30px; padding: 0 4px; background: transparent; color: var(--gold-text); }
    .bar .stat.ptip .tl { display: none; }
    .stat .pi { font-size: 17px; }
    .ptip .box { top: 34px; left: -100px; width: 260px; }
  }
/* 시즌 마감 카드 (예측판 맨 위, KS 종료 뒤 경기 없는 날) */
  .swrap { margin-bottom: 12px; border-top: 3px solid var(--navy); }
  .swrap .swhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px 6px; font-size: 17px; font-weight: 800; color: var(--navy); }
  .swrap .champ { font-size: 14px; font-weight: 700; color: var(--gold-text); background: var(--gold-bg); border: 1px solid #f2d58a; border-radius: var(--r-pill); padding: 3px 10px; }
  .swrap .champ small { font-weight: 400; color: var(--gold-text); }
  .swrap .swgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 14px 6px; }
  .swrap .swgrid > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: #f7f8fa; border-radius: 6px; min-width: 0; }
  .swrap .swgrid span { font-size: 13px; color: var(--muted); }
  .swrap .swgrid b { font-size: 18px; color: var(--text); }
  .swrap .swgrid b small { font-size: 12px; font-weight: 400; color: var(--muted); }
  .swrap .swgrid b em { display: block; font-style: normal; font-size: 14px; }
  .swrap .swgrid a { font-size: 13px; color: var(--blue); font-weight: 700; margin-top: auto; }
  .swrap .swgrid .dim { font-size: 12px; color: var(--muted); }
  @media (max-width: 700px) {
    .swrap .swgrid { grid-template-columns: 1fr; }
    .swrap .swhead { font-size: 15px; }
  }
  .game .when .gd { color: var(--muted); font-weight: 700; font-size: 13px; } /* 포스트시즌 상세: 시리즈 경기가 여러 날짜라 카드에 날짜 */
  .mname .tip .tipbox .ti b { display: block; margin-bottom: 2px; } /* 행 이름의 ⓘ 툴팁 제목 줄 — .mname b 의 표시 규칙보다 우선 */
  /* 카트 안 탭: 🛒 담기 | 🧾 오늘 구매(영수증) — 버튼 하나로 담기와 영수증을 오간다 */
  .cseg { display: flex; gap: 4px; padding: 8px 10px 0; }
  .cseg a { flex: 1; text-align: center; padding: 7px 4px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); background: #fff; cursor: pointer; white-space: nowrap; }
  .cseg a.on { color: var(--navy); border-color: var(--navy); background: var(--blue-light); }
  .cseg a small { font-size: 12px; }
  .cseg a small:empty { display: none; }
  .cseg a[hidden], .cpane[hidden] { display: none; }
  #cpRc { border-top: 0; padding-top: 4px; }
  #cpRc .mb .lk { display: inline-flex; gap: 6px; align-items: center; }
  #cpRc .mb .lk a { margin-left: 0; }
  #cpRc .mb.win b { color: var(--green, var(--green)); } #cpRc .mb.loss b { color: var(--muted); }
  #cpRc .setslink { display: block; text-align: center; font-size: 13px; color: var(--blue); padding: 10px 0 6px; }
  .cart-fab i { font-style: normal; }
  .cart-fab.rc { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
  @media (min-width: 701px) { .cart .stake .tip .tipbox { left: auto; right: -150px; width: 260px; font-weight: 400; } } /* 좁은 오른쪽 패널: 툴팁을 패널 안으로 */
  .cart .stake .tip .tipbox { font-weight: 400; }
/* 모바일: 날짜·보기 줄은 스크롤해도 위에 붙고(지금 보는 예측이 늘 보임), 고른 예측의 요약·담기는 그 아래 안내 줄. 화면 아래엔 카트/영수증 버튼 하나만 */
  .sidebd { display: none; }
  @media (max-width: 860px) {
    .card.bcard { overflow: visible; }
    #topBar { position: sticky; top: 0; z-index: 30; background: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 1px 0 var(--line); }
    body.side-open .sidebd { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(15, 23, 42, .35); }
    body.side-open .cart-fab { display: none; }
    .wrap { padding-bottom: 72px; } /* 맨 아래 내용이 카트 버튼에 가리지 않게 */
  }
  @media (max-width: 380px) { #topBar #tglAll { width: 20px; } #topBar .vchip { padding: 0 6px 0 9px; gap: 4px; } } /* 360px: 'SCOUT 예측'이 잘리지 않게 */
/* 카트 압축: 빈 카트는 안내 한 줄(+추천 바로 담기)만, 담기면 금액 한 줄 · 합계 2×2 · 구매 버튼은 시트 아래 고정 */
  #cpBuy.is-empty .stake, #cpBuy.is-empty .tot, #cpBuy.is-empty .cpay, #cpBuy.is-empty .buyrow { display: none; }
/* 카트 금액 (10/10): 잔고는 투표금 옆 작은 회색, 예상 적중금은 따로 강조 한 줄 — 둘이 같은 칸에 나란히 있어 헷갈리던 것 */
  .cart .slab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .cart .slab .sbal { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  html.balhide .cart .slab .sbal { visibility: hidden; }   /* 상단 잔고 가림을 켜 두면 여기도 */
  .cart .slab .sbal .short { display: none; }
  .cart .slab .sbal.long .full { display: none; }        /* 1천만원 이상은 '987.65억'처럼 줄여 — '카트 비우기'와 같은 줄이라 (PC 카트 패널도 좁음) */
  .cart .slab .sbal.long .short { display: inline; }
  .cart .cpay { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 12px 10px; padding: 9px 12px; background: var(--blue-light); border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }
  .cart .cpay b { font-size: 19px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cart .cpay > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .cart .cpay small { font-size: inherit; color: var(--muted); }   /* '예상 적중금'과 '배당 x5.41' 같은 크기 */
  .cart .cpay small em { font-style: normal; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
  .cart #cartLegs > .empty { padding: 14px 12px 10px; font-size: 14px; }
  .cart .stake label { font-size: 13px; color: var(--muted); }
/* 투표금 줄 (10/10): [투표금 ⓘ  잔고 987.65억 … 카트 비우기] / 입력칸(한 줄) / 금액 버튼 — 전엔 '카트 비우기' 혼자 한 줄을 써서 여백이 컸음 */
  .cart .stake .stkrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .cart .stake .slab { flex-direction: row; align-items: baseline; gap: 10px; margin-bottom: 0; min-width: 0; }
  .cart .stake .slab label { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
  .cart .stake .slab .sbal { font-size: 12.5px; }
  .cart .stake .slab .sbal .full, .cart .stake .slab .sbal .short { color: var(--text); font-weight: 600; margin-left: 2px; }
  .cart .stake .cclr { font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; white-space: nowrap; }
  @media (max-width: 860px) {
    .cart .stake { padding: 8px 12px; }
    .cart .stake input { padding: 6px 8px; font-size: 16px; }
    .cart .quick a { padding: 4px 0; }
    .cart .tot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; padding: 2px 12px; }
    .cart .tot div { padding: 6px 0; font-size: 13px; }
    .cdrawer .cart .tot { display: none; }                  /* 모바일 카트: 경기 수·배당은 카트 머리줄(3경기 · x5.41)에 이미 있어 빼고, 예상 적중금이 구매 버튼에 가리지 않게 */
    .cart .tot div { border-bottom: none; }
    .cart .cpay { margin: 8px 12px; padding: 7px 12px; }
    .cart .cpay b { font-size: 18px; }
    .cart .cpay > span { flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; }
    .cart .cpay > span small::before { content: "· "; }   /* '예상 적중금 · 배당 x5.41' */   /* 모바일: '예상 적중금 배당 x5.41' 한 줄 — 두 줄이면 구매 버튼에 가림 */
    .cart .tot div > b.big { font-size: 15px; }
    .cdrawer .cart .buyrow { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
    .cdrawer .cart .buy, .cdrawer .cart .keep { padding: 11px 8px; }
  }
/* 카트 '오늘 구매': 줄 전체가 영수증 버튼 */
  #cpRc .rcrow { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
  #cpRc .rcrow:active, #cpRc .rcrow:hover { background: var(--surface-2); }
  #cpRc .rcrow .ri { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  #cpRc .rcrow .ri b { font-size: 15px; color: var(--text); }
  #cpRc .rcrow .ri small { font-size: 13px; color: var(--muted); }
  #cpRc .rcrow .ri small a { color: var(--blue); cursor: pointer; }
  #cpRc .rcrow .rst { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--blue-light); color: var(--navy); white-space: nowrap; }
  #cpRc .rcrow .rst.win { background: #e3f4ea; color: #1a7f43; } #cpRc .rcrow .rst.loss { background: var(--red-bg); color: var(--red-strong); } #cpRc .rcrow .rst.push { background: #eef0f3; color: #6b7280; }
  #cpRc .rcrow .rgo { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
  .tm .tbd { color: var(--muted); font-size: 12px; } /* 선발 미정: 링크 없이 회색 */
  .cdrawer.rcmode #cartHN, .cdrawer.rcmode #cartSum { display: none; }
  .cart .leg .o .chg { margin-right: 5px; padding: 0 4px; border-radius: var(--r-sm); background: #fff3df; color: #b26a00; font-size: 11px; font-weight: 700; vertical-align: 1px; }
  .wrap.vboot .game { display: none; } /* 새로고침 때 저장된 표 보기: 거르기 전 전체 카드가 잠깐 보이던 것 (applyView 가 뗌) */
  @media (max-width: 860px) { html.boot .side { display: none !important; } } /* 모바일 아래 패널: 접기 전에 잠깐 펼쳐 보이던 것 */
@media (max-width: 700px) {   /* 날짜 줄 한 줄: 결과 칩(.stat.done)은 모바일에서 숨기는데 그 칩 때문에 줄바꿈 규칙이 켜져 ▲ 만 둘째 줄로 밀리던 것 (10/7) */
  #topBar.bar.bar:not(.twoline) { flex-wrap: nowrap; gap: 4px; }
  #topBar .btn.nav { width: 28px; min-width: 28px; }
  #topBar #tglAll { width: 22px; min-width: 22px; }
}

.wrap.myview .opt.mine.cm.cb::before { content: attr(data-tag); background: var(--gold); color: #3d2e00; }   /* 최고배당 = 금색 (초록 적중·빨강 미적중·주황 카트와 구분, 랭킹 1위 메달 계열) */   /* 최고배당은 산 표가 아니라 ' · 적중' 같은 결과 꼬리를 붙이지 않는다 (10/7) */