/*
 * 読み物のページの見た目。「よくある質問」（/faq/）・「正誤判定基準ガイド」（/guide/）・
 * 「問い合わせ」（/contact/）で共用する（どれも class 名は faq-* のまま使う。問い合わせの
 * フォームの体裁は /contact/ にしか出ない）。
 *
 * 色・書体・角丸・余白の元は web/style.css の :root（ライト／ダークの切り替えもそちら）。
 * ここに足すのは読み物としての体裁だけ——本文の幅、見出しの間、目次、表、チェックリスト。
 * 本文は 1 段組みで、行が長くなりすぎないように 72ch で止め、その柱（.faq-column）を画面の
 * 中央に置く（文字は左寄せのまま）。題・目次・本文（/contact/ では説明とフォーム）は柱の中で左端がそろう。
 */

.faq {
  padding-top: 0.6rem;
}

.faq-column {
  max-width: 72ch;
  margin: 0 auto;
}

.faq-title {
  margin: 0.6rem 0 1.2rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* ---------- 目次 ---------- */

.faq-toc {
  margin-bottom: 2.4rem;
  padding: 1rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.faq-toc-head {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.faq-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.15rem 1.2rem;
}

.faq-toc-list a {
  display: inline-block;
  padding: 0.15rem 0;
  font-size: 0.9rem;
  text-decoration: none;
}

.faq-toc-list a:hover {
  text-decoration: underline;
}

/* ---------- 本文 ---------- */

.faq-body {
}

/* 質問。1 つずつ離して、上に細い罫線を引いて区切る。 */
.faq-body h2 {
  margin: 2.8rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1.22rem;
  line-height: 1.5;
  scroll-margin-top: 1rem;
}

.faq-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* 差し込んだ「作問のコツ」の節。質問より一段内側の見出しなので、罫線は引かない。 */
.faq-body h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  scroll-margin-top: 1rem;
}

.faq-body h4 {
  margin: 1.4rem 0 0.5rem;
  font-size: 0.94rem;
}

.faq-body p {
  margin: 0.8rem 0;
}

.faq-body ul,
.faq-body ol {
  margin: 0.8rem 0;
  padding-left: 1.4rem;
}

.faq-body li {
  margin: 0.3rem 0;
}

.faq-body li > ul,
.faq-body li > ol {
  margin: 0.3rem 0;
}

.faq-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* 表の 1 列目は見出し語（列名など）なので折り返さない。 */
.faq-body td:first-child {
  white-space: nowrap;
}

/* 複数行の例（``` の枠）。行内のコードの飾りは付けず、横にはみ出す分は枠の中でスクロールさせる。 */
.faq-body pre {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.7;
}

.faq-body pre code {
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
}
.faq-body hr {
  margin: 2.4rem 0;
  border: none;
  border-top: 1px solid var(--line);
}

/* ---------- 表 ---------- */

/*
 * 表は列が多いので、狭い画面では箱ごと横に流す（ページ全体は横に動かさない）。
 * 生成のときに <table> を必ずこの箱で包んでいる。
 */
.table-scroll {
  max-width: 72ch;
  margin: 1rem 0 1.4rem;
  overflow-x: auto;
}

.faq-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.faq-body th,
.faq-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.faq-body th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/*
 * 1 列目は「正解」「読み」のような短い見出し語が入る。ほかの列が長いと 1 文字ずつ
 * 縦に折り返されてしまうので、数文字ぶんの幅は確保しておく。
 */
.faq-body th:first-child,
.faq-body td:first-child {
  min-width: 4.5em;
}

/* ---------- チェックリスト ---------- */

/* チェックリストは印を行の頭に出し、折り返しは文字の位置にそろえる。 */
.faq-body li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.4rem;
  padding-left: 1.7em;
  text-indent: -1.7em;
}

.faq-body input[type="checkbox"] {
  margin-right: 0.4rem;
  accent-color: var(--accent);
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 30rem) {
  .faq-title {
    font-size: 1.35rem;
  }

  .faq-body h2 {
    font-size: 1.1rem;
  }

  .faq-toc {
    padding: 0.9rem 1rem;
  }
}

/* ---------- 問い合わせ ---------- */
/* /contact/ のフォーム（web/contact/index.html）。/faq/ ・ /guide/ には出ない。 */

.inquiry-form {
  margin-top: 1rem;
}

.inquiry-field {
  display: block;
  margin-bottom: 0.8rem;
}

.inquiry-field > span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.inquiry-status {
  margin: 0.7rem 0 0;
}

.inquiry-status:empty {
  display: none;
}

/* ボットよけの隠し欄。画面の外に出し、人には見せない。 */
.inquiry-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}