/* game.css — 경기 상세(문자중계·박스스코어·라인업·승률 그래프). app.css 에서 주제별로 나눔; layout.html 이 base → … 순서로 전부 링크한다. */
/* 주석은 **한 줄 안에서** 닫는다 (test_layout_css_comments_are_closed) — 여러 줄 주석이 뒤 규칙을 삼킨 적이 있어 줄 단위로 검사한다. */
  .bar .ppw.gsel { max-width: 260px; min-width: 0; } .bar .viewsel.gamesel { width: 100%; text-align: left; text-align-last: left; } /* 경기 상세: 같은 날 다른 경기 선택 (감싼 칸을 누르면 사이트 선택 창 — pillpick.js) */
  @media (max-width: 860px) {
    .gpage .bar .ppw.gsel { max-width: none; flex: 1 1 58%; min-width: 0; }
    .gpage .bar .sp { display: none; }
    .gpage .bar > b { flex: 0 0 auto; min-width: 0; white-space: nowrap; font-size: 14px; }
    .gpage .bar > b .stad { display: none; }   /* 모바일: 구장명은 아래 경기 줄에 있으니 헤더에선 숨김 — 날짜가 '…'로 잘리지 않게 */
  } /* 경기 상세(모바일): 경기 선택 드롭다운이 줄의 절반 이상을 쓰고 날짜·구장은 줄어든다 */
  .game.closed .markets { display: none; }
  .markets { background: var(--surface); border-top: 1px dashed var(--line); padding: 12px 12px 14px; }
  table.infotab { width: 100%; margin-bottom: 8px; }
  table.infotab td.k { color: var(--muted); white-space: nowrap; width: 90px; }
  table.infotab td .mut { color: var(--muted); font-size: 13px; }
  table.infotab th:first-child { width: 90px; }
  .mlinks { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mlinks .glink { font-size: 13px; color: var(--muted); padding: 8px 4px 0; white-space: nowrap; }
  .mlinks .glink:hover { color: var(--blue); }
/* 경기 상세 페이지 (/game/ID): 문자중계 · 박스스코어 · 승률 그래프 · 라인업 */
  .gstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 14px; background: #fff9f7; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .gstate .inn { font-weight: 800; color: var(--red); }
  .gstate .run { color: var(--text); }
  .gstate .who b { color: var(--navy); }
  .gstate .dia { position: relative; display: inline-block; width: 26px; height: 26px; vertical-align: middle; }
  .gstate .dia i { position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--line-strong); background: #fff; transform: rotate(45deg); }
  .gstate .dia i.on { background: var(--red); border-color: var(--red); }
  .gstate .dia .b1 { right: 0; top: 9px; }
  .gstate .dia .b2 { left: 8.5px; top: 0; }
  .gstate .dia .b3 { left: 0; top: 9px; }
  .gstate .cnt { display: inline-flex; align-items: center; gap: 3px; }
  .gstate .cnt b { color: var(--muted); font-size: 11px; margin: 0 1px 0 6px; }
  .gstate .cnt b:first-child { margin-left: 0; }
  .gstate .cnt .d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; }
  .gstate .cnt .d.b.on { background: #2e9e4f; border-color: #2e9e4f; }
  .gstate .cnt .d.s.on { background: var(--gold); border-color: var(--gold); }
  .gstate .cnt .d.o.on { background: var(--red); border-color: var(--red); }
  .gstate .cnt .d.fl { animation: cflash .9s ease-out; }   /* 방금 늘어난 볼·스트라이크·아웃 */
  @keyframes cflash { 0% { transform: scale(1.9); box-shadow: 0 0 0 0 rgba(0, 0, 0, .25); } 40% { transform: scale(1); box-shadow: 0 0 0 5px rgba(0, 0, 0, .06); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
  .gstate .whos { display: inline-flex; gap: 14px; }
  @media (max-width: 700px) {
    .gstate { gap: 4px 10px; padding: 7px 8px; font-size: 12px; }
    .gstate .whos { flex-basis: 100%; gap: 12px; }
  } /* 모바일: 투수·타자는 경기마다 다르게 꺾이지 않고 늘 둘째 줄 */
  .h2hsum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .h2hsum b { font-size: 16px; color: var(--navy); }
  .h2hsum small { font-size: 12px; }
  table.t.h2h { min-width: 0; width: 100%; margin-bottom: 10px; }
  table.t.h2h th, table.t.h2h td { text-align: center; padding: 6px 6px; font-size: 13px; white-space: nowrap; }
  table.t.h2h th.l, table.t.h2h td.l { text-align: left; }
  table.t.h2h td.sc { font-variant-numeric: tabular-nums; font-weight: 700; }
  table.t.h2h td.l small { color: var(--muted); font-size: 11px; }
  .fr { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: var(--r-sm); font-size: 12px; font-weight: 800; color: #fff; background: var(--muted-2); text-align: center; }
  .fr.W { background: var(--green); }
  .fr.L { background: var(--red); }
  .formcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
  .formbox h4 { margin: 4px 0 6px; font-size: 14px; color: var(--navy); }
  .formbox h4 .seq { margin-left: 6px; display: inline-flex; gap: 3px; vertical-align: middle; }
  .gtabs .ts { display: none; }
  @media (max-width: 700px) {
    .formcols { grid-template-columns: 1fr; }
    .gtabs a { padding: 9px 0; font-size: 13px; }
    .gtabs .tl { display: none; }
    .gtabs .ts { display: inline; }
    .innsel, .innbar { gap: 5px; }
    .innsel a { padding: 3px 8px; font-size: 12px; }
    table.t.h2h th, table.t.h2h td { padding: 5px 4px; font-size: 13px; }
  }
  .entbox { margin-top: 12px; border-top: 1px dotted var(--line); padding-top: 10px; }
  .entbox .ent { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
  .entbox .ent .d { color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
  .entbox .ent b { color: var(--navy); margin-right: 6px; }
  .entbox .ent .in { color: var(--green); font-weight: 600; margin-right: 8px; }
  .entbox .ent .outp { color: var(--red); font-weight: 600; }
  .gpage .gpick { padding: 8px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
  .gpage .gpick b { color: var(--navy); }
  .gtabs { display: flex; border-bottom: 2px solid var(--line); }
  .gtabs a { flex: 1; text-align: center; padding: 10px 6px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
  .gtabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
  .gpanel { padding: 12px; }
  .gpanel .luh, .wpbox .wph { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 4px; flex-wrap: wrap; }
  .gpanel .luh small, .wpbox .wph small { font-size: 12px; }
  /* 예상 라인업: KBO 발표 전 직전 경기 기준이라 바뀐다 — 회색 글씨로는 확정처럼 읽힌다 (2026-10-11) */
  .gpanel .luh .k.est { padding: 2px 8px; border-radius: var(--r-pill); background: #fdebc8; color: #7a4a00; font-weight: 800; }
  .gpanel .luh .k.fix { padding: 2px 8px; border-radius: var(--r-pill); background: var(--blue-light); color: var(--navy); font-weight: 800; }
  .wpbox .wph .cur { font-size: 16px; font-weight: 500; }
  .wpbox .wph .cur .lead { font-weight: 800; }
  .wpbox .wph .cur i { font-style: normal; color: var(--muted); }
  .wpbox .wph .cur small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
  .wpbox .wpsvg svg { display: block; } /* 두 팀 % 나란히, 우세 팀 진하게 */
  .lucols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }   /* 두 팀 표를 같은 높이로 늘리지 않음 (줄 수가 적은 팀의 줄이 늘어나 양쪽이 어긋나던 것) */
  .sbwrap { overflow-x: auto; margin-bottom: 12px; }
  .boxcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .boxteam h4 { margin: 4px 0 6px; font-size: 14px; color: var(--navy); }
  .innbar { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .innsel { position: relative; display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }   /* 한 줄 가로 슬라이드 (10/14) */
  .innsel::-webkit-scrollbar { display: none; }
  #p-relay .rlist, #p-relay > .empty { touch-action: pan-y; }   /* 좌우 밀기 = 이닝 전환 (JS) — 브라우저 '뒤로 가기' 제스처로 새지 않게. 칩 줄은 가로 스크롤 그대로 */
  .innsel a { flex: none; white-space: nowrap; }
  .innbar .rf { flex: none; white-space: nowrap; }
  .innsel a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; box-sizing: border-box; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; background: #fff; }
  .innsel a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
  .rlist .rh { font-size: 13px; font-weight: 700; color: var(--navy); background: var(--bg); padding: 6px 10px; margin: 8px 0 4px; border-radius: var(--r-sm); }
  .rlist .rl { padding: 6px 10px; font-size: 14px; border-bottom: 1px dashed var(--line); line-height: 1.45; }
  .rlist .rl.mut { color: var(--muted); }
  .rlist .rl.good { color: var(--text); font-weight: 600; }
  .rlist .rl.big { color: var(--red); font-weight: 800; }
/* 문자중계 타석 카드: 헤더(타순·이름·타율·결과·점수·시각) → 오늘 성적 한 줄 → 펼치면 승리 확률·부가 문장·투구 목록 */
  .innsel a.sc { border-color: var(--red); color: var(--red); }
  .innsel a.sc.on { background: var(--red); color: #fff; }
  /* 중계 '지금 다시 받기' — 이닝 칩 줄 오른쪽 끝. 자동 폴링은 10초마다지만 서버 스냅샷은 그보다 뜸해서, 급할 땐 눌러서 당긴다 */
  /* 이닝 칩과 같은 알약으로 마지막 칩 바로 뒤에 — 전엔 동그라미를 오른쪽 끝에 밀어 둬서, 칩이 두 줄로 접히면 빈 줄 한가운데 떠 '멈춘 스피너'처럼 보였다 (10/12 제보) */
  .innbar .rf { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 32px; padding: 0; box-sizing: border-box;   /* 아이콘만 (10/14) */
    border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; color: var(--muted);
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
  .innbar .rf svg { width: 15px; height: 15px; flex: none; }
  .innbar .rf:hover { color: var(--navy); border-color: var(--navy); }
  .innbar .rf:disabled { cursor: default; opacity: .55; }
  .innbar .rf.spin svg { animation: rfspin .7s linear infinite; transform-origin: 50% 50%; }
  @keyframes rfspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .innbar .rf.spin { animation: none; opacity: .55; } }
  .innbar .rfnote { position: absolute; z-index: 5; top: calc(100% + 4px); left: 100%; transform: translateX(-100%); padding: 4px 9px; border-radius: 8px; background: #2b3445; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.18); pointer-events: none; }   /* 칩 줄 폭을 먹지 않는 말풍선 (10/14: 옆에 붙어 칩이 잘렸다) */
  .rlist .ab { border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; background: #fff; cursor: pointer; }
  .rlist .ab.scored { border-left: 3px solid var(--red); }
  .rlist .abh { display: flex; align-items: center; gap: 8px; padding: 8px 10px; } /* PC: [타순 이름 타율] ... [결과 점수 시각 ▾] 한 줄 */
  .rlist .abh .l1, .rlist .abh .l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .rlist .abh .l2 { margin-left: auto; }
  .rlist .abh .ord { font-size: 12px; color: var(--muted); font-weight: 700; }
  .rlist .abh .nm { font-size: 15px; }
  .rlist .abh .avg { font-size: 12px; color: var(--muted); }
  .rlist .abh .res { font-weight: 700; font-size: 14px; text-align: right; }
  .rlist .abh .res i { font-style: normal; font-weight: 400; color: var(--muted); }
  .rlist .ab.hr .res, .rlist .ab.run .res { color: var(--red); }
  .rlist .ab.hit .res { color: var(--blue); }
  .rlist .ab.bb .res { color: var(--green); }
  .rlist .ab.so .res { color: #7c3aed; }
  .rlist .ab.out .res { color: var(--muted); }
  .rlist .abh .sc { font-weight: 800; color: var(--red); font-size: 14px; }
  .rlist .abh .tm { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .rlist .abh .chev { font-style: normal; color: var(--muted); font-size: 12px; transition: transform .15s; }
  .rlist .ab.open .abh .chev { transform: rotate(180deg); }
  .rlist .abs { padding: 0 10px 7px; font-size: 12px; color: var(--muted); }
  .rlist .abd { display: none; border-top: 1px dashed var(--line); padding: 6px 10px 8px; }
  .rlist .ab.open .abd { display: block; }
  .rlist .wpl { font-size: 13px; margin: 2px 0 6px; color: var(--text); }
  .rlist .wpl b.up { color: var(--red); }
  .rlist .wpl b.dn { color: var(--blue); }
  .rlist .ol { font-size: 13px; padding: 3px 0; color: var(--text); }
  .rlist .ol.run, .rlist .ol.hr { color: var(--red); font-weight: 700; }
  .rlist .ol.hit { color: var(--blue); font-weight: 700; }
  .rlist .ol .rep { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .rlist .pt { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; border-top: 1px dotted var(--line); }
  .rlist .pt:first-of-type { border-top: 0; }
  .rlist .pt .n { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .rlist .pt .n.b { background: #22a06b; }
  .rlist .pt .n.s { background: #e0a100; }
  .rlist .pt .n.x { background: var(--blue); }
  .rlist .pt small { color: var(--muted); }
  .rlist .pt .cnt { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  @media (max-width: 700px) {
    /* 모바일: 1줄 [타순 이름 타율] · 2줄 [결과 점수 ............ 시각 ▾] — 긴 결과가 이름 옆에서 꺾이지 않게 */
    .rlist .abh { flex-wrap: wrap; gap: 4px 6px; padding: 8px; }
    .rlist .abh .l1 { flex: 1 1 100%; }
    .rlist .abh .l2 { flex: 1 1 100%; margin-left: 0; }
    .rlist .abh .l2 .res { text-align: left; font-size: 14px; flex: 1 1 auto; min-width: 0; }
    .rlist .abh .l2 .sc { white-space: nowrap; }
    .rlist .abh .l2 .tm { margin-left: auto; white-space: nowrap; }
    .rlist .abh .nm { font-size: 14px; }
    .rlist .abs { font-size: 11px; padding-top: 2px; }
  }
  @media (max-width: 700px) {
    .gtabs a { font-size: 13px; padding: 9px 2px; }
    .gpanel { padding: 10px 8px; }
    .lucols { gap: 6px; }
    .boxcols { grid-template-columns: 1fr; }
    .wpbox .wph small { display: none; }
  }
  @media (max-width: 700px) {
    .markets { padding: 8px 8px 10px; }
  }
  .bar .ppw.gsel::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; }
  .bar .ppw.gsel .viewsel.gamesel { padding-right: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 고르는 칸임을 알 수 있게 ▾ (다른 알약 선택과 같게) */
  /* 승률 탭: 곡선 전환(타석별·이닝별) + 결정적 순간 (10/9) */
  .wpbox .wph { flex-wrap: wrap; }
  .wpseg { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; background: var(--hover); border-radius: 999px; }
  .wpseg a { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; -webkit-user-select: none; user-select: none; }
  .wpseg a.on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  .moms { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
  .moms .mh { display: block; margin-bottom: 8px; font-size: 13px; color: var(--navy); }
  .mlist { display: grid; gap: 6px; }
  .mom { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
  .mom.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
  .mom .mn { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #2d6cdf; }
  .mom.a .mn { background: #c0561f; }
  .mom .mtx { flex: 1 1 auto; min-width: 0; }
  .mom .mtx b { display: block; font-size: 13.5px; color: var(--text); }
  .mom .mtx em { display: block; margin-top: 1px; font-style: normal; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mom .mtx small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
  /* 어느 팀 쪽인지는 왼쪽 띠로 — 네 줄이 다 비슷해 보이던 것 (10/9 제보) */
  .mom { border-left: 4px solid #2d6cdf; }
  .mom.a { border-left-color: #c0561f; }
  .mom .mtx small .ms { color: #2d6cdf; font-weight: 700; }
  .mom.a .mtx small .ms { color: #c0561f; }
  .mom .mtx small b { color: var(--text); }
  /* 결과 종류 꼬리표 */
  .mom .mk { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
  .mom .mk.hr { background: #ffe3d6; color: #c0470f; }
  .mom .mk.hit { background: #e4f5ea; color: #1d7a3e; }
  .mom .mk.bb { background: #eef4ff; color: var(--navy); }
  .mom .mk.so, .mom .mk.out, .mom .mk.dp { background: var(--hover); color: var(--muted); }
  /* 오른쪽: 숫자 + 흔든 크기 막대 (서열이 눈에 보이게) */
  .mom .mr { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 62px; }
  .mom .mv { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: #2d6cdf; }
  .mom.a .mv { color: #c0561f; }
  .mom .mbar { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
  .mom .mbar > i { display: block; height: 100%; background: #2d6cdf; }
  .mom.a .mbar > i { background: #c0561f; }
  @media (max-width: 700px) { .mom { padding: 7px 8px; gap: 8px; } .mom .mtx b { font-size: 13px; } .mom .mv { font-size: 13px; } }
  /* 중계 탭 위의 '결정적 순간' (끝난 경기) */
  .momsd { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
  .momsd > summary { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; background: var(--hover); cursor: pointer; list-style: none; }
  .momsd > summary::-webkit-details-marker { display: none; }
  .momsd > summary b { font-size: 13.5px; color: var(--navy); }
  .momsd > summary small { font-size: 11.5px; color: var(--muted); }
  .momsd > summary::after { content: '▾'; margin-left: auto; color: var(--muted); font-size: 11px; }
  .momsd[open] > summary::after { content: '▴'; }
  .momsd .mlist { padding: 8px; gap: 6px; }
  /* 경기 끝 요약 (승리·패전·세이브) — 네이버가 '=====' 와 함께 중계 줄처럼 흘려보내던 것 (10/9) */
  .rend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; background: var(--hover); }
  .rend > b { font-size: 13px; color: var(--navy); }
  .rend span { font-size: 13px; color: var(--text); }
  .rend span i { margin-right: 5px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }