/* ブレークポイント(CSS 変数は @media で使えないため、ここに宣言して全ファイルで同じ値を使う)
   sp: 768px / pc: 1024px */
:root {
  /* 色(案件 CLAUDE.md のパレット表と対) */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-line: #000000;
  --color-red: #d7261e;
  --color-blue: #1e4fd7;
  --color-green: #1f8a3b;
  --color-dark: #454545;
  --color-white: #ffffff;
  --color-error: #c00000;
  --color-shadow: rgba(0, 0, 0, 0.45);

  /* フォント */
  --font-display: "Oswald", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;

  /* 文字サイズ(画面幅に追従。会場モニターとスマホの両方で収める) */
  --text-title: clamp(1.8rem, 5vw, 4.2rem);
  --text-title-sub: clamp(0.9rem, 1.8vw, 1.4rem);
  --text-button: clamp(1rem, 2.2vw, 1.8rem);
  --text-letter: clamp(2.4rem, 5vw, 4.5rem);
  --text-label: clamp(0.7rem, 1.1vw, 1rem);
  --text-button-lg: clamp(1.3rem, 3vw, 2.4rem);
  --text-band: clamp(1.2rem, 3vw, 2.4rem);
  --text-cell: clamp(0.7rem, 2vw, 2rem);
  --text-cell-lg: clamp(0.8rem, 2.4vw, 2.4rem);
  /* 一覧ページ(board.html)の表の文字。CSS 側で列数(--board-cols)で割って使う */
  --text-cell-board: 2.4vw;
  --text-board-name: clamp(0.7rem, 1.2vw, 1.3rem);

  /* 余白 */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 1rem;  --space-4: 1.5rem;
  --space-5: 2rem;     --space-6: 3rem;    --space-7: 5rem;  --space-8: 8rem;
  --space-section: var(--space-6);
  --space-section-sp: var(--space-4);

  /* 形 */
  --radius: 10px;
  --line-w: 1px;
  --underline-w: 6px;
  --shadow-btn: 4px 4px 6px var(--color-shadow);
  --gutter: 1rem;
  --container: 1400px;
  --winner-h: 500px;
  --winner-row-h-sp: 2.6rem;
  --btn-final-w: 48rem;
  --logo-w: 12rem;

  /* 一覧ページ(board.html)。--board-cols / --board-rows は board.js が画面比から上書きする */
  --board-cols: 1;
  --board-rows: 1;
  --board-gap: var(--space-2);
  --board-fade: 0.6s;
}