/* ============================================================
   OKYA LEAGUE — 디자인 토큰  (design.md 2·3·4장과 1:1)
   컨셉: 스포츠 중계 그래픽 — 흰 배경 + 팀 컬러 + 잉크 블랙
   팀 컬러가 확정되면 아래 "팀 컬러" 표만 바꾸면 앱 전체에 반영됨
   ============================================================ */
:root {
  /* ---------- 기본 ---------- */
  --paper: #ffffff;        /* 화면 배경 */
  --panel: #f3f4f6;        /* 카드·입력칸 배경 */
  --panel-2: #e6e8ec;      /* 눌림·진행바 바탕 */
  --line: #dde0e6;         /* 1px 구분선 */
  --ink: #0b0d12;          /* 제목·중계 띠·다크 버튼 */
  --ink-2: #464c58;        /* 본문 보조 */
  --ink-3: #8a919e;        /* 캡션·비활성 */
  --hot: #ffe14d;          /* 하이라이트 (언더독·확정·1위) — 잉크 글씨와만 */
  --live: #ff2e4d;         /* LIVE·마감 임박·오류 */
  --win: #12b76a;          /* 적중·승 */

  /* ---------- 팀 컬러 (임시: 빨/파/노/초) ---------- */
  --team1: #ff3b47; --team1-deep: #c8102e; --team1-ink: #e8182b; --team1-tint: #ffe9eb; --team1-on: #ffffff;
  --team2: #2f6bff; --team2-deep: #1745c9; --team2-ink: #1f55e0; --team2-tint: #e6eeff; --team2-on: #ffffff;
  --team3: #ffc31f; --team3-deep: #e09a00; --team3-ink: #b58400; --team3-tint: #fff6d6; --team3-on: #0b0d12;
  --team4: #19c26b; --team4-deep: #0b8f4c; --team4-ink: #0c9a50; --team4-tint: #e3f8ec; --team4-on: #ffffff;

  /* 로그인한 학생의 반 (html[data-team]으로 교체) */
  --team: #8a919e;
  --team-deep: #5b6270;
  --team-ink: #5b6270;
  --team-tint: #f3f4f6;
  --team-on: #ffffff;
  --team-soft: color-mix(in srgb, var(--team) 16%, transparent);

  /* ---------- 타이포 ---------- */
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Black Han Sans", "Pretendard Variable", sans-serif;
  --font-num: "Barlow Condensed", "Pretendard Variable", sans-serif;   /* 숫자·영문 (기울임 굵게) */

  /* ---------- 모양 ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --slant: 12px;                     /* 평행사변형·띠가 기울어지는 폭 */
  --gap: clamp(10px, 1.6vmin, 16px);
  --pad: clamp(14px, 2.4vmin, 24px);
  --shadow: 0 12px 32px rgba(11, 13, 18, 0.14);
  --hatch: repeating-linear-gradient(45deg, transparent 0 6px, rgba(11, 13, 18, 0.05) 6px 12px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- 옛 이름 (기존 CSS 호환용) ---------- */
  --bg: var(--paper);
  --bg-2: var(--panel);
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --locked: var(--panel-2);
  --danger: var(--live);
}

html[data-team="1"] { --team: var(--team1); --team-deep: var(--team1-deep); --team-ink: var(--team1-ink); --team-tint: var(--team1-tint); --team-on: var(--team1-on); }
html[data-team="2"] { --team: var(--team2); --team-deep: var(--team2-deep); --team-ink: var(--team2-ink); --team-tint: var(--team2-tint); --team-on: var(--team2-on); }
html[data-team="3"] { --team: var(--team3); --team-deep: var(--team3-deep); --team-ink: var(--team3-ink); --team-tint: var(--team3-tint); --team-on: var(--team3-on); }
html[data-team="4"] { --team: var(--team4); --team-deep: var(--team4-deep); --team-ink: var(--team4-ink); --team-tint: var(--team4-tint); --team-on: var(--team4-on); }