/* ページをまたいで使い回す部品。
   盤まわりの部品は board.css に置く —— あれは対局面だけのもので、
   ここへ混ぜると本文だけのページも読み込むことになる。 */

/* ── 見出しの前に立つ緑の棒 ── */
.h2-bar {
  width: 8px;
  height: 22px;
  background: var(--accent);
  border-radius: var(--r-bar);
  flex: none;
}

/* h1 の下の一行 */
.lead {
  margin: 0 0 12px;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--muted);
}

/* ── ボタン ──
   色の役どころだけをここで決め、大きさは使う側が持つ。
   design 稿はボタンごとに 44/46/48/50/52px と細かく違い、
   まとめると版面がずれる（トークンの注記を参照）。 */
.btn {
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--r-btn);
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn:disabled { opacity: .5; cursor: default; }

/* 主。緑で塗る */
.btn--primary {
  color: var(--on-fill);
  background: var(--accent);
  border: none;
}
.btn--primary:not(:disabled):hover { background: var(--accent-hover); }

/* 次点。深緑の縁取り */
.btn--outline {
  color: var(--accent-deep);
  background: var(--surface);
  border: 1.5px solid var(--accent-deep);
}
.btn--outline:not(:disabled):hover { background: var(--btn-green-hover); }

/* 三番手。灰の縁取り。「やめる」「メニュー」など引き下がる操作 */
.btn--gray {
  color: var(--btn-gray-ink);
  background: var(--surface);
  border: 1.5px solid var(--line-btn);
}
.btn--gray:not(:disabled):hover { background: var(--btn-gray-hover); }

/* ── 分節ボタン（強さ・手番の択一）── */
.seg {
  flex: 1;
  font-family: inherit;
  font-size: var(--fs-footnav);
  font-weight: 500;
  padding: 9px 2px;
  min-height: var(--tap-seg);
  border-radius: var(--r-seg);
  cursor: pointer;
  transition: background .15s;
  background: var(--surface);
  color: var(--body);
  border: 1.5px solid var(--line-btn);
}

.seg[aria-checked="true"] {
  font-weight: 700;
  background: var(--accent-deep);
  color: var(--on-fill);
  border-color: var(--accent-deep);
}

/* ── カード ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
}

.card__label {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--accent);
}

.card__title {
  font-weight: 700;
  font-size: var(--fs-card-title);
  margin: 2px 0 4px;
}

.card__text {
  font-size: var(--fs-nav);
  color: var(--body);
}

/* ── FAQ ── */
.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* card-grid と右端をそろえる。枠の中の行長は padding 込みで約 45 字に収まる */
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 16px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-btn);
  padding: 14px 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.faq p {
  margin: 0 0 14px;
  font-size: var(--fs-body);
  color: var(--body);
}