/* 本文のページ（法務・ルール・攻略）の版面。
   盤を持たないページはこれを読み、board.css は読まない。

   行の長さを 720px で止めるのは、16px の全角で 45 字前後になる幅だから。
   920px のまま流すと 1 行 57 字を超えて、目が次の行の頭を見失う
   （PLAYBOOK §6 の「1 行 60 字」はこの上限の話）。 */

.article {
  max-width: var(--w-article);
  margin: 0 auto;
  padding: 8px 0 56px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.9;
  text-align: justify;   /* 和文の本文は両端揃えが基本。行末の凸凹をなくす */
}

/* 節の中に埋め込んで使うとき（トップの本文ブロック）。
   単独ページでは .article が版面そのものなので中央寄せが正しいが、
   節の中では h2 の頭と揃わないと 85px ずれて見える（実測）。
   下の余白も節どうしの間隔と二重に効くので落とす */
.article.section__body {
  margin-inline: 0;
  padding-bottom: 0;
}

.article h1 {
  text-align: left;
  margin: 0 0 6px;
  color: var(--ink);
}

/* 制定日・更新日。見出しのすぐ下に小さく置く */
.article__updated {
  margin: 0 0 28px;
  font-size: var(--fs-label);
  color: var(--muted);
}

.article h2 {
  display: block;
  margin: 34px 0 10px;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.5;
}

.article h3 {
  margin: 22px 0 6px;
  font-size: var(--fs-card-title);
  color: var(--ink);
}

.article p { margin: 0 0 14px; }

.article ul,
.article ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
}

.article li { margin-bottom: 6px; }

/* 運営者情報のような「項目と値」。狭い画面では縦に積む */
.article dl {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
}
.article dt { font-weight: 700; color: var(--ink); }
.article dd { margin: 0; }

@media (max-width: 480px) {
  .article dl { grid-template-columns: 1fr; gap: 2px 0; }
  .article dd { margin-bottom: 10px; }
}

/* ── 表 ──
   外部送信の一覧は 3 列あり、狭い画面では必ず横にはみ出す。
   ページごと横スクロールさせると本文まで動いてしまうので、
   表だけを自分の中で巻かせる */
.article__table {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}

.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-nav);
  min-width: 520px;   /* これ以下に詰めると 3 列目が縦書きのように潰れる */
}

.article th,
.article td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.7;
}

.article th {
  font-weight: 700;
  color: var(--ink);
  background: var(--nav-hover);
  white-space: nowrap;
}

.article tbody tr:last-child th,
.article tbody tr:last-child td { border-bottom: none; }

/* 補足・注記 */
.article__note {
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: 1.8;
}

/* 本文からの送り出し。ページの末尾に置く */
.article__next {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: var(--fs-nav);
}


/* 単図の器（V6）。スクリーンショット 1 枚 ＋ 説明文だけを持つ。
   V2 は icon 用で画像の器ではなく、V3/V7 は「複数枚が揃っている」前提、
   V4 は表なので図を抱えられない —— 既存の器がどれも合わないので新設した。
   見た目は既存トークンだけで組み、新しい色・角丸・影は足していない */
.figure {
  margin: 22px 0;
}

.figure img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--board-wood-a);
}

.figure figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: 1.7;
}

/* 齊套の図（V6 の横並び）。1 枚では成立しない「三つ並べて初めて意味が出る」図用。
   .figure をそのまま入れ子にするので、枠・角丸・caption は単図と共通 */
.figure-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 8px 0 22px;
}

.figure-row .figure { margin: 0; }

.figure-row .figure img {
  max-width: 100%;
}

.figure-row figcaption {
  text-align: left;
}

@media (max-width: 760px) {
  .figure-row { grid-template-columns: 1fr; gap: 22px; }
  .figure-row .figure img { max-width: 420px; }
  .figure-row figcaption { text-align: center; }
}