/* =====================================================================
   AIドラフト 共通デザイン（E：ドラフト指名票）
   ★ 2026-10-27 オーナー決定：なんでもドラフトで試したデザインを、サイト全体のデザインとして採用。
     影響の小さいページ（読み物）から順に、このファイルを読み込む形に変えていく。
   - 色：紙白の背景・内容面・墨の文字・補助の文字・朱赤（主要なボタンと判子だけ）・注意の背景と文字
   - 文字：見出しは端末の明朝体、本文と操作はゴシック体（Webフォントは読み込まない）
   - 線：大きな区切りは墨の太い線（3px）、中の区切りは細い罫線（1px）
   - 朱赤は「主要な確定操作のボタン」と「判子」だけ。アフィリエイトのリンクやPR表記を朱赤で目立たせない
   読み込む位置：各ページの <style> より前、css/tailwind.css より前（同じ強さなら、ページの <style> と Tailwind が勝つ）
   ===================================================================== */
:root {
  --paper: #F4F1E8;    /* 紙白（背景） */
  --sheet: #FFFEFA;    /* 内容面 */
  --ink: #232320;      /* 墨（文字・太い線） */
  --ink-2: #625F58;    /* 補助の文字 */
  --shu: #B6382D;      /* 朱赤（主要なボタン・判子だけ） */
  --hair: #CFC9BA;     /* 細い罫線 */
  --muted-bg: #ECE8DD; /* 押せない・選択中の面 */
  --warn-bg: #FFF1C7;  /* 注意の背景 */
  --warn-ink: #795600; /* 注意の文字 */
  --focus: #1D4ED8;    /* キーボード操作の枠 */
  --field-line: #8E887B; /* 入力欄の枠（白地に対して3:1以上） */
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
}

/* ---------- 土台 ---------- */
body.paper { font-family: var(--gothic); background-color: var(--paper); color: var(--ink); }
.paper :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- 文字 ---------- */
.p-mincho, .p-h, .p-h2, .p-title { font-family: var(--mincho); font-weight: 700; letter-spacing: .04em; }
.p-sub { color: var(--ink-2); }
.p-em { color: var(--ink); font-weight: 800; }
.p-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .p-link:hover { color: var(--ink-2); } }

/* ---------- 線 ---------- */
.p-h { border-bottom: 3px solid var(--ink); padding-bottom: .25rem; }
.p-h2 { border-bottom: 3px solid var(--ink); padding-bottom: .25rem; }
.p-rule-top { border-top: 1px solid var(--hair); }
.p-rule-thick { border-top: 3px solid var(--ink); }
.p-sec { border-top: 3px solid var(--ink); padding-top: .75rem; }
.p-sec-h { font-size: 1rem; font-weight: 800; display: flex; align-items: baseline; gap: .5rem; }
.p-sec-no { font-size: .7rem; font-weight: 700; color: var(--ink-2); letter-spacing: .08em; }
.p-sub-h { font-size: .8rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: .5rem; }

/* ---------- 面（見出しの帯・メニュー・内容面・お知らせ） ---------- */
.p-head { background: var(--sheet); border-bottom: 3px solid var(--ink); }
.p-menu { background: var(--sheet); border: 1px solid var(--ink); box-shadow: 0 6px 14px rgba(35,35,32,.12); }
.p-menu a { color: var(--ink); }
.p-menu a:hover { text-decoration: underline; }
.p-menu .p-menu-h { color: var(--ink-2); border-bottom: 1px solid var(--hair); }
.p-sheet { background: var(--sheet); border: 1px solid var(--hair); border-top: 3px solid var(--ink); border-radius: 2px; }
.p-card { background: var(--sheet); border: 1px solid var(--hair); border-radius: 2px; }
.p-notice { background: var(--sheet); border: 2px solid var(--ink); border-radius: 2px; }

/* ---------- ボタン：角は小さく。塗りは墨（進める操作）か朱赤（主要な確定操作だけ）。ほかは白地に墨の枠 ---------- */
.p-btn { min-height: 44px; padding: 0 1.25rem; border-radius: 4px; font-weight: 700; }
.b-ink { background: var(--ink); color: var(--sheet); border: 1px solid var(--ink); }
.b-shu { background: var(--shu); color: #fff; border: 1px solid var(--shu); font-weight: 800; letter-spacing: .04em; }
.b-ghost { background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); }
/* ★ スマホでは、押した位置に次の画面のボタンが出ると「マウスが乗った」色のまま残ることがある。色の変化はマウスで操作できる端末だけ */
@media (hover: hover) {
  .b-ink:hover { background: #3A3A36; } .b-shu:hover { background: #9E2F25; } .b-ghost:hover { background: var(--paper); }
}
.p-btn[disabled] { background: var(--muted-bg); color: var(--ink-2); border-color: var(--hair); }

/* ---------- 入力欄・選ぶ欄 ---------- */
.p-field { width: 100%; background: var(--sheet); border: 1px solid var(--field-line); border-radius: 2px; padding: .5rem .75rem; font-size: 16px; color: var(--ink); }
.p-field:focus { border-color: var(--ink); }
.p-field::placeholder { color: #6F6B63; }
.p-field:disabled { background: var(--muted-bg); }
/* 選択肢：枠は常に2px。選んだときは色だけ変える（太さを変えて隣が動かないように） */
.p-choice { background: var(--sheet); border: 2px solid #C9C2B2; border-radius: 2px; cursor: pointer; }
.p-choice:has(input:checked) { border-color: var(--ink); background: #FBF9F2; }
.p-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.p-choice input, .p-check input { accent-color: var(--ink); }
.p-chip { background: var(--sheet); border: 1px solid var(--hair); border-radius: 2px; }
.p-filter { background: var(--sheet); border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); }
.p-filter[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
@media (hover: hover) { .p-filter:hover { background: var(--paper); } .p-filter[aria-pressed="true"]:hover { background: var(--ink); } }

/* ---------- 状態のラベル・知らせ ---------- */
/* ラベル：墨（基本）・補助（灰）・注意（黄）・朱（判子と同じ扱い。「優勝」など、ごく一部だけ） */
.p-badge { display: inline-block; background: var(--ink); color: var(--sheet); font-size: .75rem; padding: 0 .4rem; border-radius: 2px; vertical-align: 2px; }
.p-badge.is-muted { background: var(--muted-bg); color: var(--ink-2); border: 1px solid var(--hair); }
.p-badge.is-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-ink); }
.p-badge.is-line { background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); }
.p-badge.is-shu { background: var(--sheet); color: var(--shu); border: 1px solid var(--shu); }
.p-alert:not(:empty) { background: var(--warn-bg); color: var(--warn-ink); border-left: 4px solid var(--warn-ink); padding: .5rem .75rem; }
.p-status { background: var(--warn-bg); color: var(--warn-ink); border-left: 4px solid var(--warn-ink); }
.p-ok { color: var(--ink-2); }

/* ---------- ダイアログ ---------- */
.p-dialog { background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); border-top: 3px solid var(--ink); border-radius: 2px; }
.p-dialog::backdrop { background: rgba(35,35,32,.5); }

/* ---------- 読み物のページ（運営者情報・プライバシーポリシーなど） ---------- */
/* 見出しの帯の小さなボタン（「ゲームに戻る」など）。帯の中だけ少し低くする */
.p-btn-sm { min-height: 36px; padding: 0 .75rem; font-size: .75rem; }
/* 押せるカード（404 の行き先など）。マウスを乗せたときだけ枠を墨に */
a.p-card { display: block; color: var(--ink); }
@media (hover: hover) { a.p-card:hover { border-color: var(--ink); } }