/* ============================================================
   はむはむサイト部 共通CSS v1（2026-09-06 デザインチーム）
   仕様: docs/03_design/design_system.md
   方針: 紙色の地・墨色の文字・アクセント1色。システムフォント。影なし。
         動くのはあみだの駒だけ。ダークモードは非対応（color-scheme: light）。
   ============================================================ */

/* ---------- 1. 変数 ---------- */
:root {
  color-scheme: light;

  /* 基本色（--accent と --paper は絵が来たら差し替える。design_system 1.1） */
  --paper:      #FBF7EE;   /* 地色（紙） */
  --ink:        #3A322B;   /* 文字色（墨） */
  --ink-weak:   #6B5F53;   /* 薄い文字 */
  --accent:     #96551C;   /* アクセント（ハムスターの毛色・暫定） */
  --line:       #D9CFC0;   /* 罫線 */
  --field:      #FFFFFF;   /* 入力欄の地 */
  --on-accent:  #FFFFFF;   /* アクセント上の文字 */

  /* たどり線 8色（画面専用。印刷では使わない） */
  --trace-1: #C8102E;
  --trace-2: #1F6FB2;
  --trace-3: #2E8B3D;
  --trace-4: #C96A10;
  --trace-5: #7B3FA0;
  --trace-6: #0F8A8A;
  --trace-7: #B5327A;
  --trace-8: #7A5C1E;

  /* フォント */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium", "Yu Gothic", YuGothic,
               Meiryo, "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-num:  "Segoe UI", "Hiragino Sans", system-ui, sans-serif;

  --fs-base:  16px;
  --fs-small: 13px;
  --fs-h1:    22px;
  --fs-h2:    18px;
  --fs-h3:    16px;
  --fs-num:   20px;
  --lh:       1.7;
  --lh-tight: 1.3;

  /* 余白・幅・角丸 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --wrap: 720px;
  --gutter: 16px;
  --radius: 4px;
  --radius-box: 6px;
  --tap: 44px;

  /* あみだくじ（SVG の描画値。JS からも参照する） */
  --amida-col: 28px;        /* 縦線間隔の最小値 */
  --amida-col-max: 64px;    /* 縦線間隔の最大値（人数が少ないとき） */
  --amida-row: 24px;        /* 段間隔 */
  --amida-stroke: 2px;      /* 縦線・自動横線 */
  --amida-stroke-manual: 3px;
  --amida-stroke-trace: 4px;
  --amida-piece: 20px;      /* 駒 */
}

/* ---------- 2. リセット最小限 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  font-feature-settings: "palt" 0;
}
img, svg { max-width: 100%; height: auto; }
img { vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding-left: 1.4em; }

/* ---------- 3. 幅・ヘッダー・フッター ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header {
  height: 32px;
  display: flex;
  align-items: center;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}
.site-header a {
  color: var(--ink-weak);
  text-decoration: none;
  padding: var(--sp-2) 0;         /* タップ領域確保（見た目は変えない） */
}
.site-header a:hover { text-decoration: underline; }

.site-footer {
  margin-top: var(--sp-7);
  padding: var(--sp-4) 0 var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-weak);
  line-height: 1.9;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer a { color: var(--ink-weak); }

/* ---------- 4. 文字 ---------- */
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 700;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-2);
}
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 700; margin-bottom: var(--sp-1); }
p + p { margin-top: var(--sp-3); }
small, .small { font-size: var(--fs-small); }
.weak { color: var(--ink-weak); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 道具名の行（h1 ＋ ロゴ扱いのハムスター） */
.tool-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-bottom: var(--sp-2);
}
.top-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.top-head h1 { font-size: 26px; }

/* 章（道具の下の解説） */
.section { margin-top: var(--sp-5); }
.explain .section { margin-top: var(--sp-6); }
.explain p, .explain li { font-size: 15px; }
.faq h3 { margin-top: var(--sp-4); }
.faq h3::before { content: "Q. "; color: var(--ink-weak); }
.updated { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ink-weak); }

/* ---------- 5. ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--ink-weak);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--paper); }
.btn:active { filter: brightness(.92); }
.btn--primary {
  min-height: 48px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  width: 100%;
}
.btn--primary:hover { background: var(--accent); filter: brightness(1.05); }
.btn--small {
  min-height: 36px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
  position: relative;
}
.btn--small::after {          /* 見た目 36px、タップ領域 44px */
  content: "";
  position: absolute;
  inset: -4px 0;
}
.btn[disabled], .seg input[disabled] + span, .check input[disabled] + span {
  opacity: .45;
  cursor: default;
  filter: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (min-width: 600px) {
  .btn--primary { width: auto; min-width: 200px; }
}

/* ---------- 6. 切替（segmented） ---------- */
.seg {
  display: flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--field);
  overflow: hidden;
}
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg__item { flex: 1 1 0; position: relative; display: block; }
.seg__item + .seg__item { border-left: 1px solid var(--ink); }
.seg__item input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;              /* 枠1px込みで 44px */
  padding: 0 var(--sp-1);
  font-size: 14px;
  line-height: var(--lh-tight);
  white-space: nowrap;
  color: var(--ink);
}
.seg__item input:checked + span { background: var(--ink); color: var(--paper); }
.seg__item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
.seg__item input:checked:focus-visible + span { outline-color: var(--paper); }   /* 選択中（墨地）は紙色の枠。墨に対して 11.75:1（B-05） */
.seg--inline { display: inline-flex; }         /* 「横線: 少なめ／ふつう／多め」など補助3択 */
.seg--inline .seg__item span { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-small); }
.seg--inline .seg__item { padding: 4px 0; }   /* 見た目 36px、タップ 44px */

/* ---------- 7. 入力欄 ---------- */
.field {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ink-weak);
  border-radius: var(--radius);
  background: var(--field);
  font-size: var(--fs-base);      /* iOS の自動ズーム防止のため 16px 未満にしない */
  line-height: var(--lh-tight);
}
.field--multi { min-height: 8.5em; resize: vertical; line-height: 1.6; }
.field--short { width: 6em; display: inline-block; text-align: center; }
.field::placeholder { color: var(--ink-weak); opacity: 1; }
label.lbl { display: block; font-size: 14px; margin-bottom: var(--sp-1); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row--inline { display: inline-flex; }
.row > .lbl { margin: 0; white-space: nowrap; }

/* 人数（−／数字／＋） */
.stepper { display: inline-flex; align-items: center; gap: var(--sp-1); }
.stepper__btn {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  font-size: var(--fs-num);
  line-height: 1;
}
.stepper__num {
  width: 64px;
  height: var(--tap);
  text-align: center;
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-variant-numeric: tabular-nums;
  padding: 0;
  -moz-appearance: textfield;
}
.stepper__num::-webkit-outer-spin-button,
.stepper__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 折りたたみ（名前を貼る） */
.fold { border-bottom: 1px solid var(--line); }
.fold > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
  font-size: 15px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; display: inline-block; width: 1.2em; color: var(--ink-weak); }
.fold[open] > summary::before { content: "▾"; }
.fold > .fold__body { padding: var(--sp-1) 0 var(--sp-3); }

/* チェック（演出なし） */
.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check span { font-size: 14px; }

/* ---------- 8. 案内・エラー ---------- */
.note {
  margin: var(--sp-1) 0;
  padding: 2px 0 2px var(--sp-2);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  line-height: 1.5;
}
.note .hamster { margin-right: var(--sp-1); }
.note[hidden] { display: none; }

/* ---------- 9. ハムスター ---------- */
.hamster {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex: none;
}
.hamster--piece { width: 20px; height: 20px; }
.hamster--icon  { width: 24px; height: 24px; }
.hamster--logo  { width: 40px; height: 40px; }
.hamster--md    { width: 48px; height: 48px; }
.hamster--top   { width: 64px; height: 64px; }

/* 画像が届くまでのプレースホルダー: 薄い丸＋耳。<span> に付ける（<img> には付けない） */
.hamster--ph {
  position: relative;
  border-radius: 50%;
  background: var(--line);
  border: 1px dashed var(--ink-weak);
  opacity: .8;
}
.hamster--ph::before, .hamster--ph::after {
  content: "";
  position: absolute;
  top: -12%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--line);
  border: 1px dashed var(--ink-weak);
}
.hamster--ph::before { left: 4%; }
.hamster--ph::after  { right: 4%; }
.hamster--icon.hamster--ph::before, .hamster--icon.hamster--ph::after,
.hamster--piece.hamster--ph::before, .hamster--piece.hamster--ph::after { display: none; } /* 小さいときは耳を省く */

/* ---------- 10. あみだくじ ---------- */
.tool-controls { display: grid; gap: var(--sp-2); }

.amida { margin-top: var(--sp-2); }
.amida-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.amida-svg {
  display: block;
  margin: 0 auto;                 /* 人数が少なく幅が余るときは中央寄せ */
  font-family: var(--font-sans);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}
.amida-svg text { fill: var(--ink); font-size: 13px; }
.amida-label--tilt { font-size: 12px; }
.amida-svg .amida-label--weak { fill: var(--ink-weak); }   /* 「？」など薄い文字。.amida-svg text より詳細度を上げて効かせる（発注書009） */

.amida-line--v,
.amida-line--h {
  stroke: var(--ink);
  stroke-width: var(--amida-stroke);
  stroke-linecap: butt;
  fill: none;
}
.amida-line--manual {
  stroke: var(--accent);
  stroke-width: var(--amida-stroke-manual);
  stroke-linecap: round;
}
.amida-line--manual-dot { fill: var(--accent); }     /* 手動線の両端の丸 r=3。色が分からなくても区別できるように */

.amida-trace {
  stroke: var(--trace-1);
  stroke-width: var(--amida-stroke-trace);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: .85;
  transition: stroke-dashoffset 1.5s linear;          /* 速さは JS が transition-duration を上書き */
}
.amida-trace[data-c="1"] { stroke: var(--trace-1); }
.amida-trace[data-c="2"] { stroke: var(--trace-2); }
.amida-trace[data-c="3"] { stroke: var(--trace-3); }
.amida-trace[data-c="4"] { stroke: var(--trace-4); }
.amida-trace[data-c="5"] { stroke: var(--trace-5); }
.amida-trace[data-c="6"] { stroke: var(--trace-6); }
.amida-trace[data-c="7"] { stroke: var(--trace-7); }
.amida-trace[data-c="8"] { stroke: var(--trace-8); }

.amida-piece { transition: transform .12s linear; will-change: transform; }
.amida-piece__ph { fill: var(--accent); opacity: .35; }
.amida-hit { fill: transparent; cursor: crosshair; }   /* タップ判定用の透明矩形 */
.amida-svg[data-state="drawing"] .amida-hit,
.amida-svg[data-state="done"] .amida-hit { cursor: default; }

/* 名前欄「あり」で空欄の縦線（印刷用の手書き枠） */
.amida-blank { fill: none; stroke: var(--ink-weak); stroke-width: 1px; stroke-dasharray: 3 2; }

/* くじ直下（横スクロールの外側。常に見える） */
.amida-actions { margin-top: var(--sp-2); display: grid; gap: var(--sp-2); }
.amida-aside { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; font-size: 14px; }

/* 結果一覧の色見本（たどり線と同色） */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--sp-2);
  vertical-align: 0;
  background: var(--trace-1);
}
.swatch[data-c="1"] { background: var(--trace-1); }
.swatch[data-c="2"] { background: var(--trace-2); }
.swatch[data-c="3"] { background: var(--trace-3); }
.swatch[data-c="4"] { background: var(--trace-4); }
.swatch[data-c="5"] { background: var(--trace-5); }
.swatch[data-c="6"] { background: var(--trace-6); }
.swatch[data-c="7"] { background: var(--trace-7); }
.swatch[data-c="8"] { background: var(--trace-8); }

/* 演出なし・OS の「動き控えめ」 */
@media (prefers-reduced-motion: reduce) {
  .amida-piece, .amida-trace { transition: none; }
}
.amida[data-no-motion="true"] .amida-piece,
.amida[data-no-motion="true"] .amida-trace { transition: none; }

/* ---------- 11. 結果 ---------- */
.result { margin-top: var(--sp-5); }
.result__head { display: flex; align-items: center; gap: var(--sp-2); }
.result__head h2 { flex: 1; }
.result__list { list-style: none; padding: 0; margin: var(--sp-2) 0; font-variant-numeric: tabular-nums; }
.result__list li { padding: 2px 0; border-bottom: 1px dotted var(--line); }
.result__list li:last-child { border-bottom: 0; }
.result__sub { margin-top: var(--sp-3); }

/* ---------- 12. ほかの道具・道具一覧 ---------- */
.others {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
}
.others__head { display: flex; align-items: center; gap: var(--sp-2); }
.others__head h2 { flex: 1; margin-bottom: 0; border-bottom: 0; }
.tools { list-style: none; padding: 0; margin-top: var(--sp-2); }
.tools li { padding: var(--sp-1) 0; line-height: 1.6; }
.tools .tools__name { font-weight: 700; }
.tools .tools__desc { display: block; font-size: 14px; }
.tools .is-pending .tools__name { color: var(--ink-weak); font-weight: 400; }
.tools .tools__status { font-size: var(--fs-small); color: var(--ink-weak); margin-left: var(--sp-2); }
.others[data-current="amida"]   li[data-tool="amida"],
.others[data-current="warikan"] li[data-tool="warikan"],
.others[data-current="percent"] li[data-tool="percent"] { display: none; }
@media (min-width: 600px) {
  .tools .tools__desc { display: inline; margin-left: var(--sp-2); }
  .tools .tools__desc::before { content: "— "; color: var(--ink-weak); }
}

/* ---------- 13. 広告 ---------- */
.ad { margin: var(--sp-5) 0; min-height: 280px; }
.ad::before { content: "広告"; display: block; font-size: var(--fs-small); color: var(--ink-weak); }
@media (min-width: 600px) { .ad { min-height: 100px; } }

/* ---------- 14. 印刷プレビュー（画面上） ---------- */
.print-preview {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  overflow: hidden;
}
.print-preview .print-sheet + .print-sheet,
.print-preview .print-answer { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--line); }
.print-sheet__meta { display: flex; justify-content: flex-end; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-weak); }
.print-answer table { border-collapse: collapse; font-size: 14px; }
.print-answer td, .print-answer th { padding: 2px var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
.print-only { display: none; }

/* ---------- 15. 印刷 ---------- */
@page { size: A4 landscape; margin: 12mm; }
/* 既定は横（発注書008）。縦向きは head 末尾に id="page-size" の style 要素（@page{size:A4 portrait}）を差し込んで上書きする */

@media print {
  :root { --paper: #fff; --ink: #000; --ink-weak: #000; --line: #000; --field: #fff; }
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }

  /* 隠す: 入力欄・ボタン・解説・回遊枠・広告・ヘッダー・フッター・結果・案内 */
  .site-header, .site-footer, .tool-controls, .amida-actions, .amida-aside,
  .explain, .others, .ad, .result, .note, .fold, .no-print, .tool-head .hamster { display: none !important; }
  .print-only { display: block; }

  /* プレビューの箱は枠を外して紙そのものに */
  .print-preview { border: 0; padding: 0; margin: 0; border-radius: 0; overflow: visible; }
  .print-preview .print-sheet + .print-sheet,
  .print-preview .print-answer { margin: 0; padding: 0; border: 0; }
  .print-sheet { break-after: page; page-break-after: always; }
  .print-sheet:last-child { break-after: auto; page-break-after: auto; }
  .print-answer { break-before: page; page-break-before: always; }
  .print-sheet__meta { font-size: 8pt; color: #000; }

  /* くじ: 白黒。手動線も自動線と同じ。たどり線と駒は出さない */
  .amida-scroll { overflow: visible; }
  .amida-svg { width: 100%; height: auto; max-height: 250mm; }
  .amida-svg text { fill: #000; font-size: 10pt; }
  .amida-label--tilt { font-size: 9pt; }
  .amida-line--v, .amida-line--h, .amida-line--manual {
    stroke: #000;
    stroke-width: 1.5px;
    stroke-linecap: butt;
  }
  .amida-line--manual-dot, .amida-trace, .amida-piece, .amida-hit { display: none; }
  .amida-blank { stroke: #000; stroke-dasharray: none; stroke-width: .8px; }
  .swatch { display: none; }

  /* 答えの紙 */
  .print-answer table { font-size: 10pt; }
  .print-answer td, .print-answer th { border-bottom: 1px solid #000; }

  a { color: #000; text-decoration: none; }
  .hamster--ph { display: none; }
}