/*
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 16px;
}
  */
.control-panel {
  text-align: center;
  margin-bottom: 20px;
}
/* 複数カードをタイル状に配置（画面時: 自然に折返し） */
#bingoCardsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;           /* 外側コンテナに余白を伝播させない */
}

.bingo-card {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  /* 色テーマ（デフォルトは白系） */
  --card-bg: #ffffff;
  --card-border: #666666;
  --card-width: 320px;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  width: var(--card-width);       /* 幅を変数化して比率を安定させる */
  font-size: calc(var(--card-width) / 20); /* 文字サイズをカード幅に比例 */
  padding: 16px 16px 0; /* 下端は0にしてマス目のmargin-bottomで24pxを確保 */
  margin-bottom: 20px; /* 旧余白（後方互換） */
  box-sizing: border-box;
}
.bingo-card__table {
  border-collapse: separate;  /* 正方形制御のため separate + 内側枠で表現 */
  border-spacing: 0;
  table-layout: fixed;    /* 列幅を均等に固定 */
  width: 100%;            /* カード幅いっぱい */
  border: 2px solid var(--card-border);
  margin: 0 auto 24px; /* カード幅内で中央寄せ + 下24px */
}
.bingo-card__header {
  display: block;
  width: 80%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px; /* タイトルとマス目の間: 24px */
}
.bingo-cell {
  width: 20%;               /* 5列で均等 */
  padding: 0;
  border: 0;                /* 罫線は内側要素で引く */
  vertical-align: top;
}
/* 正方形を厳密に維持する内側ボックス */
.bingo-cell__inner {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background-color: #fff;
  color: #333;
  font-size: 2em;
  box-sizing: border-box;
  border-top: 2px solid var(--card-border);
  border-left: 2px solid var(--card-border);
}
/* 右端・下端の線を補完して二重線を防ぐ */
.bingo-card__table tr td:last-child .bingo-cell__inner {
  border-right: 2px solid var(--card-border);
}
.bingo-card__table tr:last-child td .bingo-cell__inner {
  border-bottom: 2px solid var(--card-border);
}
.bingo-cell--cell { }
.bingo-cell--free { font-size: 1em; }

select, button {
  font-size: 16px;
  padding: 5px;
  margin-top: 10px;
}

/* 用紙設定（A4縦） */
@page {
  size: A4 landscape;
  margin: 10mm;
}
/* 印刷用スタイル */
@media print {
  .control-panel { display: none; }
  /* A4縦 / 横2枚で敷き詰め */
  #bingoCardsContainer {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6mm;
    margin: 0;
    justify-content: start;
  }
  .bingo-card {
    --card-width: 120mm!important;
    width: var(--card-width);
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .bingo-card__table { border: 1px solid var(--card-border); }
}

/* 色バリエーション（背景=薄い色 / 線=濃い色） */
.color--white { --card-bg: #ffffff; --card-border: #333333; }
.color--blue  { --card-bg: #e6f2ff; --card-border: #1e6fb9; }
.color--green { --card-bg: #e9f7ef; --card-border: #2e7d32; }
.color--yellow{ --card-bg: #fff9e6; --card-border: #b28704; }
.color--orange{ --card-bg: #fff0e6; --card-border: #bf4b00; }
.color--red   { --card-bg: #ffe6e6; --card-border: #c62828; }
.color--purple{ --card-bg: #f2e6ff; --card-border: #6a1b9a; }