/* bets.css — 모의 투표(내 예측·구매 내역·표 카드·모달·차트·세트). app.css 에서 주제별로 나눔; layout.html 이 base → … 순서로 전부 링크한다. */
/* 주석은 **한 줄 안에서** 닫는다 (test_layout_css_comments_are_closed). 여러 줄로 쓰면 뒤 규칙을 통째로 삼킨 적이 있어 줄 단위로 검사한다. */
  .bid, table.blist .bid { color: var(--muted); font-size: 12px; margin-left: 4px; font-variant-numeric: tabular-nums; } /* 구매 내역: 잘리는 조합 요약 대신 고유번호 */
  @media (min-width: 701px) {
    table.aitab td.pk .jt { display: block; width: fit-content; margin: 0 auto 2px; }
  }
  @media (max-width: 700px) {
    table.aitab td.pk .jt { display: block; width: fit-content; margin: 0 auto 2px; font-size: 11px; padding: 1px 4px; }
  } /* 픽 칸: 좁은 폰(≤390px)에서 '언더 9.5 70%'가 잘리지 않게 여백·글자 축소, 그래도 모자라면 줄바꿈 */ /* 모바일: 배지 한 줄 + 픽 문구('두산 승 80%') 한 줄로 모든 칸을 같은 모양으로 */ /* 모바일: 표가 화면 밖으로 밀리지 않게, 적중 배지는 앞에 */
  @media (max-width: 700px) {
    table.t.bx th, table.t.bx td { padding: 4px 3px; font-size: 12px; }
    table.t.bx td.l small { display: none; }
  }
  table.t.bx { min-width: 0; width: 100%; margin-bottom: 8px; }
  table.t.bx th, table.t.bx td { text-align: center; padding: 5px 4px; font-size: 13px; white-space: nowrap; }
  table.t.bx th.l, table.t.bx td.l { text-align: left; }
  table.t.bx td.l small { color: var(--muted); font-size: 11px; }
  table.t.bx tr.sub td { color: var(--muted); }
  table.t.bx .o { color: var(--muted); font-weight: 400; width: 14px; display: inline-block; }
  .ticket .addcart { display: block; width: calc(100% - 24px); margin: 10px 12px 4px; padding: 10px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; border: 1px solid var(--navy); border-radius: var(--r-sm); cursor: pointer; }
  .ticket .addcart:hover { background: var(--blue-light); }
  .cart .setslink { display: block; text-align: center; font-size: 13px; color: var(--blue); padding: 8px 12px 14px; }   /* 아래 여백: 패널 끝에 붙어 보이던 것 */
  /* 보관 세트 (10/5): 예측판 카트와 같은 모양 — 다리 줄·투표금·합계는 .ticket.cart 규칙을 그대로 쓰고 카드 틀만 여기서 */
  .setsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; padding: 12px; }
  .setcard.ticket.cart { display: block; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
  .setsgrid > .empty { grid-column: 1 / -1; }
  .setcard.old { opacity: .7; }
  .setcard .sh { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; }
  .setcard .sh span { color: var(--muted); flex: 1; }
  .setcard .sh .warn { color: var(--red); font-style: normal; font-weight: 700; }
  .setcard .sh .rm { color: var(--red); font-weight: 700; cursor: pointer; padding: 0 4px; }
  .setcard .leg.rrow:last-of-type { border-bottom: 1px solid var(--line); }
  .setcard .stake { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
  .setcard .stake label { white-space: nowrap; }
  .setcard .stake input { padding: 6px 8px; }
  .setcard .stake .quick { grid-column: 1 / -1; margin-top: 0; }
  .setcard .tot { display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 14px; }   /* 예상 적중금이 길어 넓게 (모바일에서 라벨과 붙던 것) */
  .setcard .tot div { border-bottom: none; }
  .setsfoot { margin: 0 12px 12px; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
  .setsfoot .tot { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px; padding: 2px 14px; }
  .setsfoot .tot div { border-bottom: none; }
  .setsfoot .buyall { display: block; width: calc(100% - 24px); margin: 4px 12px 12px; padding: 12px; background: var(--buy); color: #fff; font-weight: 800; font-size: 16px; border: none; cursor: pointer; border-radius: 6px; }
  .setsfoot .buyall:disabled { background: #c9ced8; cursor: default; }
  @media (max-width: 700px) {
    .setsgrid { grid-template-columns: 1fr; padding: 8px; gap: 10px; }
    .setsfoot { margin: 0 8px 8px; }
    .setsfoot .tot { grid-template-columns: 1fr 1fr; }
    .setsfoot .tot div:last-child { grid-column: 1 / -1; }
  }
  .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .kpi { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; color: var(--text); }
  .kpi span { display: block; font-size: 13px; color: var(--muted); }
  .kpi b { display: block; font-size: 22px; margin: 2px 0; }
  .kpi small { color: var(--muted); font-size: 12px; }
  .kpi.pos b, .kpi b.pos { color: var(--green); }
  .kpi b.neg { color: var(--red); }
  .kpi.rank b { display: flex; align-items: baseline; gap: 6px; }
  .kpi.rank b small { font-size: 13px; color: var(--muted); }
  .kpi .edit { font-size: 12px; color: var(--blue); margin-left: 6px; }
  .kpi .nick { color: var(--navy); font-weight: 700; border-bottom: 1px dotted var(--muted); }
  .kpi small a { color: var(--blue); }
/* 펼침 카드(베트맨 상세 참고): 경기 헤더 줄 + 스코어·종목 + 선택 박스 2개 (선택 = ✓, 실제 결과 = 파랑 채움) */
  .bleg2 { border-bottom: 1px solid var(--line); }
  .bleg2 .lh { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #f7f8fa; font-size: 13px; }
  .bleg2 .lh .when { color: var(--muted); min-width: 34px; }
  .bleg2 .lh .gm { font-size: 14px; }
  .bleg2 .lh .gm i { font-style: normal; color: var(--muted); font-size: 12px; margin: 0 4px; }
  .bleg2 .lh .lr { margin-left: auto; }
  .bleg2 .lb { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; padding: 8px 12px; }
  .bleg2 .mk b { display: block; font-size: 16px; }
  .bleg2 .mk small { color: var(--muted); font-size: 12px; }
  .bleg2 .mk .mkl { white-space: nowrap; } /* 기준선('LG -2.5', '10.5')은 중간에서 끊기지 않게 */
  .bleg2 .mk .sb.fin { display: block; width: max-content; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); background: #3f4b5e; color: #fff; margin: 1px 0 2px; }
  .bleg2 .mk .sb.live { display: block; width: max-content; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); background: var(--red); color: #fff; margin: 1px 0 2px; }
  .jt.pending { background: var(--blue-light); color: var(--blue); }
  .jt.prov { background: #fff; border: 1px dashed currentColor; } /* 진행 중 잠정 판정: 점선 테두리 (확정은 채움) */
  /* 두 칸 줄과 세 칸 줄의 폭을 같게 — 전엔 360 vs 420 이라 줄마다 상자 시작점이 어긋났다 (10/9 제보). 폭이 같으면 1fr 분배라 양쪽 모서리가 저절로 맞는다 */
  .bleg2 .boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 420px; justify-self: end; }
  .bleg2 .boxes.three { grid-template-columns: 1fr 1fr 1fr; } /* 승①패 세 칸 */
  .bleg2 .bx { position: relative; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 7px 6px 6px; font-size: 13px; color: var(--muted); background: #fff; min-height: 48px; box-sizing: border-box; }
  .bleg2 .bx b { display: block; font-size: 15px; color: var(--text); margin-top: 1px; }
  .bleg2 .bx { word-break: keep-all; }   /* 띄어쓰기에서만 줄바꿈 ('2점차+' 의 '+' 는 템플릿에서 붙여 둠) */
  .bleg2 .bx.sel { border-color: var(--blue); }
  .bleg2 .bx.sel::before { content: "✓"; position: absolute; top: -8px; left: 6px; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); color: var(--blue); font-size: 10px; font-weight: 800; }
  .bleg2 .bx.actual { background: var(--blue); border-color: var(--blue); color: #e6eefc; }
  .bleg2 .bx.actual b { color: #fff; }
  @media (max-width: 700px) {
    .bleg2 .lb { grid-template-columns: 64px 1fr; gap: 6px; padding: 6px 8px; }
    .bleg2 .mk b { font-size: 14px; }
    .bleg2 .mk .mkl { display: block; } /* 좁은 칸: 시장 이름 아래 줄에 기준선 (언더오버 / 9.5) */
    .bleg2 .lh { padding: 6px 8px; gap: 6px; }
    .bleg2 .lh .gm { font-size: 13px; }
    .bleg2 .boxes { gap: 6px; }
  }
  .jt { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-sm); background: var(--hover); color: var(--muted); }
  .jt.win { background: var(--green-bg); color: var(--green); }
  .jt.loss { background: var(--red-bg); color: var(--red); }
  .jt.pending { background: var(--blue-light); color: var(--blue); }
  .bfilter .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .bfilter .dot.win { background: var(--green); }
  .bfilter .dot.loss { background: var(--red); }
  .bfilter .dot.pending { background: var(--blue); }
  .bfilter { padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 14px; }
  .bfilter .frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
  .bfilter .fl { width: 52px; color: var(--muted); font-weight: 700; }
  .bfilter .presets { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
  .bfilter .presets a { padding: 5px 10px; color: var(--muted); border-right: 1px solid var(--line); }
  .bfilter .presets a:last-child { border-right: none; }
  .bfilter .presets a.on { background: var(--navy); color: #fff; }
  .bfilter .dates input { font: inherit; font-size: 13px; padding: 3px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
  .bfilter label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .bsum { padding: 8px 12px; font-size: 14px; color: var(--muted); }
  table.blist th, table.blist td { white-space: nowrap; }
  table.blist td.l small { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; } /* 게임 열: 경기 전부 늘어놓지 않고 말줄임 */
  table.blist tr.bdetail td, table.blist tr.bdetail td .note { white-space: normal; overflow-wrap: anywhere; }
  table.blist td.pl { text-align: right; font-variant-numeric: tabular-nums; min-width: 96px; }
  table.blist td.l { white-space: normal; }
  table.blist td.l small { display: block; font-size: 12px; margin-top: 1px; }
  table.blist tr.brow { cursor: pointer; }
  table.blist tr.brow:hover td { background: var(--surface-2); }
  table.blist tr.brow.open td { background: var(--blue-light); }
  table.blist .plus { display: inline-block; width: 18px; height: 18px; line-height: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 700; color: var(--muted); }
  table.blist tr.open .plus { color: var(--blue); border-color: var(--blue); }
  table.blist .st { font-weight: 700; padding: 2px 7px; border-radius: var(--r-sm); font-size: 13px; white-space: nowrap; }
  table.blist .st.win { background: var(--green-bg); color: var(--green); }
  table.blist .st.loss { background: var(--red-bg); color: var(--red); }
  table.blist .st.pending { background: var(--blue-light); color: var(--blue); }
  table.blist .st.push { background: var(--hover); color: var(--muted); }
  table.blist tr.bdetail td { padding: 0 8px; background: var(--surface); text-align: left; }
  .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; }
  .modal.on { display: flex; }
  .mbox { background: #fff; border-radius: 8px; width: 100%; max-width: 960px; max-height: calc(100vh - 60px); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  .mh { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .mclose { cursor: pointer; color: var(--muted); font-size: 18px; padding: 0 4px; border: 0; background: transparent; min-width: 32px; min-height: 32px; border-radius: 6px; font-family: inherit; }
  .mclose:hover { background: var(--hover); color: var(--text); }
  .mbody { overflow-y: auto; }
  @media (max-width: 700px) {
    .modal { padding: 0; }
    .mbox { max-width: none; max-height: 100vh; border-radius: 0; }
    .bfilter .fl { width: 100%; }
  }
  .uoh { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
  .opt.pick .uoh, .opt.actual .uoh { color: inherit; opacity: .85; }
  @media (max-width: 700px) {
    table.blist { width: 100%; font-size: 13px; }
    table.blist td.l small { display: none; }
    table.blist th:first-child, table.blist td:first-child { width: 34px; }
    table.blist th:last-child, table.blist tr.brow td:last-child { display: none; }
    table.blist td.pl { min-width: 0; }
    table.blist .st { font-size: 12px; padding: 2px 5px; }
    table.blist td, table.blist th { padding-left: 4px; padding-right: 4px; }
    table.blist td.l { white-space: normal; min-width: 72px; }
    table.blist td.l b { white-space: nowrap; }
    table.blist tr.bdetail td { padding: 0 2px; }
    table.blist tr.bdetail td > .bcard { width: 0; min-width: 100%; }
    .bcard .bh { flex-wrap: wrap; gap: 4px; }
  }
  .bcard .o small { margin-left: 4px; font-size: 12px; }
  @media (max-width: 860px) {
    .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi { padding: 10px 12px; }
    .kpi b { font-size: 19px; }
    .kpis .kpi.rank { grid-column: 1 / -1; }
    .bets { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  }
  .bets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 12px; }
  .bcard { border: 1px solid var(--line); border-radius: 4px; background: var(--white); display: flex; flex-direction: column; }
  .bcard .bh { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #f0f3f8; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .bcard .bh b { color: var(--navy); }
  .rcpt { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--navy); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } /* 가상영수증 저장·공유 (static/js/receipt.js) */
  .rcpt:hover { background: var(--surface-2); }
  .ticket .note .rcpt { margin-left: 8px; vertical-align: middle; }
  .bcard .st { font-weight: 800; font-size: 14px; padding: 2px 8px; border-radius: var(--r-sm); }
  .bcard .st.win { background: var(--green-bg); color: var(--green); }
  .bcard .st.loss { background: var(--red-bg); color: var(--red); }
  .bcard .st.pending { background: var(--blue-light); color: var(--blue); }
  .bcard .st.push { background: var(--hover); color: var(--muted); }
  .bcard .tot { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); }
  .bet .h .st.win { color: var(--green); font-weight: 800; }
  .bet .h .st.loss { color: var(--red); font-weight: 800; }
  .bet .h .st.pending { color: var(--blue); font-weight: 700; }
  .bet .sum { display: flex; justify-content: space-between; font-weight: 700; margin-top: 4px; }
  .mrow .mname .pno { margin: 0 6px 0 0; font-size: 11px; color: var(--blue); font-weight: 700; border: 1px solid var(--blue); border-radius: var(--r-sm); padding: 0 4px; vertical-align: 1px; }
  .side .tabs2 a.sum { display: none; text-align: left; padding: 10px 12px; color: var(--navy); } /* 모바일 접힌 시트: 탭 대신 지금 보는 표 한 줄 요약 */
  @media (max-width: 860px) {
    .side.folded .tabs2 a.sum { display: block; }
  }
/* 내 예측: 구매 현황 밴드 + 차트 탭 (베트맨 구매현황 참고) */
  .cband { display: grid; grid-template-columns: 1fr 1.2fr; }
  .cband .best { background: var(--navy); color: #fff; padding: 16px 18px; display: flex; flex-direction: column; }
  .cband .best span { font-weight: 800; font-size: 15px; }
  .cband .best small { color: #c9d4ea; font-size: 13px; margin-top: 2px; }
  .cband .best b { font-size: 26px; margin-top: auto; text-align: right; padding-top: 10px; }
  .cband .cstat { display: flex; flex-direction: column; justify-content: center; padding: 4px 18px; }
  .cband .cstat div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .cband .cstat div:last-child { border-bottom: none; }
  .cband .cstat span { color: var(--muted); }
  .cband .cstat span::before { content: "· "; }
  .cband .cstat b { font-size: 17px; }
  @media (max-width: 700px) {
    .cband { grid-template-columns: 1fr; }
    .cband .best b { font-size: 22px; }
  }
  .leg .lb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .bleg2 .lh .gm .pno { margin-right: 4px; vertical-align: 1px; } /* 내 예측 카드: 번호가 경기명 앞 */
  .blist .pnos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
  .blist .pnos .pno.nono { color: var(--muted); border-color: var(--line); } /* 번호 없는 다리(해외 배당 시장)도 자리를 채워 배지 수 = 경기 수 */
  @media (max-width: 700px) {
    .blist .pnos { gap: 2px; }
    .blist .pnos .pno { font-size: 10px; padding: 0 3px; }
  }
  .blist .pnos .pno { display: inline-flex; align-items: center; height: 18px; box-sizing: border-box; line-height: 1; font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-sm); padding: 0 4px; font-weight: 700; } /* 고정 높이 + 가운데 정렬: 글꼴 기준선 탓에 위아래 여백이 달라 보이던 것 */ /* 접힌 행: 조합의 프로토 번호 나열 */
  .bleg2 .bx .uoh { font-size: 11px; color: var(--muted); margin-left: 3px; } /* 언더 8점 이하 / 오버 9점 이상 */
  .leg .lm .pno, .bleg2 .pno { font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-sm); padding: 0 4px; font-weight: 700; } /* 프로토 번호: '홈' 배지와 같은 파란 글자 */
  .leg .s .uoh { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; white-space: nowrap; } /* 조합 다리 한 줄 해석(12점 이상 / 3점 차 이상 이기면)은 선택 아래 줄에 — 옆에 두면 좁은 패널에서 줄바꿈 */
  .leg .g .jt { margin-left: 6px; vertical-align: 1px; }
  .tot { padding: 4px 12px; font-size: 14px; }
  .tot div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .tot div:last-child { border-bottom: none; }
  .tot div > span { color: var(--muted); }
  .tot div > b { font-variant-numeric: tabular-nums; font-size: 14px; }
  .tot div > b.big { font-size: 16px; font-weight: 800; color: var(--navy); }
  .tot .res.win { color: var(--green); font-weight: 800; }
  .tot .res.loss { color: var(--red); font-weight: 800; }
  .cdrawer .ph .sum { flex: 1; text-align: right; margin-right: 8px; white-space: nowrap; font-size: 13px; }
  @media (min-width: 701px) and (max-width: 1100px) {
    .opt .lab:has(.tscore) .uoh { display: none; }
  } /* 종료 경기의 '합 11'이 둘째 줄로 내려가 박스가 커지지 않게 (힌트는 생략) */
/* 랭킹 모달 조각: 탭 2개(내역 / 구매 현황 분석) + 베트맨식 요약 카드 */
  .ftabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .fpanel .cband { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0 12px; }
  .fpanel .cstat.frate { padding: 4px 30px; }
  .fpanel .cstat.frate div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .fpanel .cstat.frate div:last-child { border-bottom: none; }
  .fpanel .cstat.frate span { color: var(--muted); }
  .fpanel .cstat.frate span::before { content: "· "; }
  .fpanel .cstat.frate b { font-size: 16px; text-align: right; }
  .fpanel .cstat.frate small { font-weight: 400; color: var(--muted); font-size: 12px; }
  .fpanel .cstat b.pos { color: var(--green); }
  .fpanel .cstat b.neg { color: var(--red); }
  @media (max-width: 700px) {
    .fpanel .cband { margin: 0 8px; }
    .fpanel .cstat.frate { padding: 4px 18px; }
    .fpanel .cstat.frate b small { display: block; font-size: 12px; }
  }

/* 내 예측 KPI 의 시즌 선택 (라벨 자리에 작은 알약) */
  .kpi .ksel { display: inline-flex; width: auto; vertical-align: middle; margin-right: 2px; }   /* 라벨(span)이 블록이라 알약이 가로로 늘어나 ▾가 카드 끝에 붙던 것 */
  .kpi .ksel select { height: 24px; font-size: 12px; padding: 0 22px 0 8px; border-radius: 12px; font-weight: 700; }
  .kpi .ksel::after { right: 8px; font-size: 10px; }

/* 내 예측 사용성 (2026-10-04): 행마다 영수증 칩 · 상태 필터는 눌러서 바로 적용(검색 버튼 없음) · 모바일 요약 카드 압축 */
  table.blist .rchip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 18px; box-sizing: border-box; margin-left: 3px; padding: 0; border: 1px solid var(--navy); border-radius: var(--r-sm); background: #fff; color: var(--navy); line-height: 1; cursor: pointer; } /* 행마다 영수증 바로 열기: 번호 배지와 같은 높이의 SVG 아이콘(이모지는 Windows에서 흐릿) */
  table.blist .rchip svg { display: block; width: 13px; height: 13px; }
  @media (min-width: 701px) { table.blist td.l small.bid { display: inline; } .blist .pnos { display: inline-flex; vertical-align: 1px; margin: 0 0 0 10px; } } /* PC: 제목·번호·영수증을 한 줄로 */
  table.blist .rchip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
  .bfilter .fst label { padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font-size: 13px; }
  .bfilter .fst label:has(input:checked) { border-color: var(--navy); background: var(--blue-light); color: var(--navy); font-weight: 700; }
  .bfilter .fst input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
  @media (max-width: 700px) {
    .bfilter { padding: 8px 10px; }
    .bfilter .fl { display: none; }
    .bfilter .frow { gap: 6px; padding: 3px 0; }
    .bfilter .presets { display: flex; width: 100%; }
    .bfilter .presets a { flex: 1; text-align: center; padding: 6px 0; font-size: 13px; }
    .bfilter .dates { display: flex; align-items: center; gap: 4px; width: 100%; }
    .bfilter .dates input { flex: 1; min-width: 0; font-size: 13px; }
    .bfilter .fst label { padding: 3px 8px; font-size: 12px; }
    .kpis { gap: 6px; }
    .kpi { padding: 8px 10px; }
    .kpi span { font-size: 12px; }
    .kpi b { font-size: 18px; margin: 1px 0; }
    .kpi small { font-size: 11px; }
  }
/* 내 예측 머리 줄 + 카드 통일(라벨 · 숫자 · 보조 한 줄) */
  .myhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 0 2px; flex-wrap: wrap; }
  .myhead .who { font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .myhead .who b { color: var(--navy); font-weight: 800; }
  .myhead .edit { margin-left: 8px; font-size: 13px; color: var(--blue); }
  .myhead .ksel select { height: 28px; font-size: 13px; padding: 0 26px 0 11px; border-radius: var(--r-pill); font-weight: 700; }
  .kpi span { font-weight: 600; }
  .kpi b { font-size: 22px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
  .kpi small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  a.kpi.rank { color: var(--text); }
  a.kpi.rank:hover { border-color: var(--navy); }
  a.kpi.rank b { display: block; color: var(--navy); }
  .kpi .go { float: right; font-style: normal; font-size: 16px; line-height: 1; color: var(--muted); }
  @media (max-width: 700px) { .kpi b { font-size: 19px; } .myhead .who { font-size: 13px; } }
  .blist small.hidn, table.blist td.l small.hidn { display: inline; color: var(--muted); font-size: 12px; margin-left: 4px; }
  .bleg2.hidn { padding: 10px 12px; color: var(--muted); font-size: 13px; background: #f6f7f9; border-radius: 4px; }
  .privacy .pvopts { display: grid; gap: 6px; margin: 6px 0 4px; }
  .privacy .pv { display: flex; align-items: baseline; gap: 6px; font-weight: 400; cursor: pointer; }
  .privacy .pv small { color: var(--muted); font-size: 12px; margin-left: 4px; }
  table.blist td.pl .stk { display: none; }
  @media (max-width: 400px) {   /* 360px: 금액 열을 손익 아래로 합쳐 손익·펼침 열이 잘리지 않게 */
    table.blist th.amt, table.blist td.amt { display: none; }
    table.blist td.pl .stk { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
  }
  /* 터치 영역: 모바일에서 작은 조작 요소를 최소 32px 정도로 */
  @media (max-width: 860px) {
    .cart .leg .rm { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin-left: 2px; }
    .cart .quick a { padding: 8px 0; }
    .setcard .rm { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
    table.blist .rchip { width: 32px; height: 26px; }
  }
  .privacy .pv { display: grid; grid-template-columns: 20px auto; column-gap: 8px; align-items: center; text-align: left; margin: 0; }
  .privacy .pv input[type=radio] { width: 18px; height: 18px; margin: 0; padding: 0; grid-row: span 2; }
  .privacy .pv b { font-size: 14px; }
  .privacy .pv small { grid-column: 2; margin: 0; }

  .blist .bodd, table.blist td.l small.bodd { display: inline; color: var(--blue); font-weight: 700; font-size: 12px; margin: 0 0 0 4px; } /* 모바일: 배당 칸이 없어 게임 칸에 배당 (비공개 표는 구간) — 게임 칸 small 숨김 규칙보다 구체적으로 */
  @media (min-width: 701px) { .blist .bodd, table.blist td.l small.bodd { display: none; } }
  @media (max-width: 700px) { .blist small.hidn, table.blist td.l small.hidn { display: block; margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* 모바일: '🔒 N경기 시작 전 비공개' 는 배당 아래 한 줄 (중간에서 줄이 갈리던 것) */
  .bsafe, table.blist td.l small.bsafe, .orank table.otab td.l small.bsafe { display: inline-block; max-width: none; overflow: visible; margin-left: 5px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 17px; color: #0b6b4f; background: #e3f5ee; border: 1px solid #b7e3d1; vertical-align: 1px; white-space: nowrap; } /* AI 두 번째 장(B 조합) — 같은 날 두 줄을 구분 (10/7) */
  .orank table.otab td.l small.bsafe { margin: 0 0 0 4px; vertical-align: 2px; }