/* public/css/pregame.css — 야구 경기전 4화면 재구축 토큰 (STEP 0-2)
 *
 * 왜 별도 파일인가
 *   기존 :root(views/partials/head.ejs)에는 색·크기가 수십 개다. 거기를 고치면 13리그
 *   전 화면이 함께 움직인다. 재구축 대상은 4화면뿐이므로 **덧붙이는 층**으로 둔다.
 *   STEP 1~4 가 이 클래스만 쓰면 옛 화면은 한 픽셀도 안 움직인다.
 *
 * 이 파일이 지키는 인수 기준: D1 D2 D3 D4 D7 D8 D9 D10 (docs/acceptance/pregame.md)
 * 검사기: ops/design-check.js
 *
 * 여기에 새 색·새 크기를 늘리지 않는다. 늘리는 순간 D7·D8 이 무의미해진다.
 * 필요하면 인수 기준의 D 번호를 먼저 고친다.
 */

:root{
  /* D7 글자 크기 3단만 — 제목 / 본문 / 보조. 네 번째 크기를 만들지 않는다.
     값은 기존 화면의 상용값을 그대로 가져왔다. 새 숫자를 발명하면 옛 화면과
     나란히 놓았을 때 어긋나 보인다. */
  --pg-fs-title: 17px;
  --pg-fs-body:  15px;
  --pg-fs-sub:   13px;

  /* D3 블록 간격 하나 */
  --pg-gap: 14px;

  /* D8 색 역할 3종만
       홈팀색·원정팀색 — 팀명과 그 팀의 값에만
       강조색 1 — 결론 문장에만(.pg-em)
       나머지 전부 흑백
     팀 고유색(teams.color)은 데이터라 인라인으로 들어온다. 아래 둘은 그 색이 없을 때 기본값. */
  --pg-home: var(--home);
  --pg-away: var(--away);
  --pg-em:   var(--accent);
  --pg-ink:     #111827;
  --pg-ink-sub: #5b6570;
}

/* D1 강조는 클래스 하나. 화면당 3개 이내(ops/design-check.js 가 센다).
   b·strong·인라인 color 로 강조하지 않는다 — 세는 대상이 안 되어 상한이 무너진다. */
.pg-em{ color: var(--pg-em); font-weight: 800; }

/* D2 회색 보조 텍스트는 블록당 한 줄 (partials/pg-sub.ejs 가 강제) */
.pg-sub{ font-size: var(--pg-fs-sub); color: var(--pg-ink-sub); line-height: 1.55; }

/* 글자 3단 */
.pg-title{ font-size: var(--pg-fs-title); font-weight: 800; color: var(--pg-ink); line-height: 1.4; }
.pg-body { font-size: var(--pg-fs-body);  color: var(--pg-ink); line-height: 1.65; }

/* D3 블록 */
.pg-block{ margin-bottom: var(--pg-gap); }
.pg-stack > * + *{ margin-top: var(--pg-gap); }

/* D9 순위 칩 — 「리그 N위」 하나로 전 화면 통일 (partials/pg-rank.ejs) */
.pg-rank{
  display:inline-block; font-size:var(--pg-fs-sub); font-weight:800; line-height:1.2;
  padding:3px 8px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--pg-ink); white-space:nowrap;
}
.pg-rank[data-side="home"]{ color:var(--pg-home); border-color:currentColor; }
.pg-rank[data-side="away"]{ color:var(--pg-away); border-color:currentColor; }

/* D4·D10 공용 표 — 항목명 왼쪽 · 두 팀 값 오른쪽 나란히 · 마지막 열 「그래서」.
   비교표·핵심 데이터·조건부 지표가 이 표 하나를 쓴다(partials/pg-table.ejs). */
.pg-table{ width:100%; border-collapse:collapse; font-size:var(--pg-fs-body); color:var(--pg-ink); }
.pg-table th, .pg-table td{ padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.pg-table thead th{ font-size:var(--pg-fs-sub); color:var(--pg-ink-sub); font-weight:700; border-bottom-width:2px; }
.pg-table th[scope="row"]{ text-align:left; font-weight:700; white-space:nowrap; }
.pg-table .pg-v{ text-align:right; white-space:nowrap; font-weight:700; }
.pg-table .pg-v[data-side="home"]{ color:var(--pg-home); }
.pg-table .pg-v[data-side="away"]{ color:var(--pg-away); }
.pg-table .pg-so{ font-size:var(--pg-fs-sub); color:var(--pg-ink-sub); line-height:1.5; }
/* 「그래서」는 마크업에 두 벌 있다(파셜 주석 참조). 폭에 따라 한 벌만 보인다.
   PC: 4번째 열 / 모바일: 값 줄 아래 한 줄. 4열을 390px 에 밀어 넣으면 값이 줄바꿈된다. */
.pg-table tr.pg-so-row{ display:none; }
@media (max-width:560px){
  .pg-table thead .pg-so-h,
  .pg-table td.pg-so-col{ display:none; }
  .pg-table tr.pg-so-row{ display:table-row; }
  .pg-table tr.pg-row th, .pg-table tr.pg-row td{ border-bottom:0; padding-bottom:2px; }
  .pg-table tr.pg-so-row td{ padding-top:0; }
}