/*
 * 「ひもとき」の動く図解（/himotoki/*.html）の共通テーマ。
 *
 * 各ページは自己完結の HTML で、図ごとの規則は自分の <style> に持つ。色の変数と、
 * 15本に共通の部品（見出し・戻るボタン・タブ・手順の札・舞台の枠・まとめ）だけをここに置く。
 * 各ページは <style> のあとでこのファイルを読むので、同じ詳細度ならここの規則が勝つ。
 *
 * 色と線はサイト本体（web/tailwind.config.ts の「AI社員の事務所」）に揃える:
 * 地は淡い緑、輪郭は 2px の濃い線、影は付けない。
 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap');

:root{
  --ink:#1F2A2E;             /* 本文・輪郭線 */
  --bg:#EAF1EE;              /* ページの地 */
  --surface:#ffffff;
  --surface-2:#F4FAF8;
  --text:#1F2A2E;
  --text-2:#4A5A5E;
  --muted:#4A5A5E;
  --line:#C9D6D1;            /* 中の細い区切り線 */
  --line-strong:#B8C6C2;

  --accent:#0F7B6C;          /* 主色。いま動いている所 */
  --accent-soft:#DDF1EC;
  --accent-text:#0F6B5E;
  --cyan:#0A5F54;            /* 通った・解決した（主色の濃い側） */
  --cyan-soft:#DDF1EC;
  --indigo:#1F2A2E;          /* 別の種類・人へ渡す（色を付けず濃い線で示す） */
  --indigo-soft:#E4EBE8;
  --alert:#C8361F;           /* 誤り・不一致 */
  --alert-soft:#FBE5E0;
  --ok:#0F7B6C;
  --flag:#B35A0E;            /* 人の確認が要る（サイトの「承認待ち」と同じ橙） */
  --flag-soft:#FCEBDD;
  --flag-line:#E07B22;

  --radius:12px;
  --shadow:none;
  --font-maru:"Zen Maru Gothic","M PLUS 1p","Hiragino Maru Gothic ProN",sans-serif;
}

body{font-family:"M PLUS 1p","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}

/* ---------- 見出し ---------- */
header{background:var(--bg);border-bottom:2px solid var(--ink)}
.eyebrow{color:var(--accent-text);letter-spacing:.08em}
h1{font-family:var(--font-maru);letter-spacing:0}
h1 .thin{color:var(--muted);font-weight:500}
.back-link{
  border:2px solid var(--ink);background:var(--surface);
  color:var(--ink);font-weight:700;
}
.back-link:hover{color:var(--ink);border-color:var(--ink);background:var(--accent-soft)}

/* ---------- タブ ---------- */
.tab{border:2px solid var(--ink);box-shadow:none}
.tab .t-name{font-family:var(--font-maru)}
.tab:hover{border-color:var(--ink);background:var(--surface-2)}
.tab.active{border-color:var(--ink);background:var(--accent-soft)}
.tab.active .t-num,.tab.active .t-verb{color:var(--accent-text)}

/* ---------- 舞台 ---------- */
.stage{border:2px solid var(--ink);box-shadow:none}

/* ---------- 手順の札（丸い札にしない） ---------- */
.stepchip{border:2px solid var(--line);border-radius:8px;background:var(--surface)}
.stepchip b{background:var(--muted)}
.stepchip.on{border-color:var(--ink);background:var(--accent-soft);color:var(--ink)}
.stepchip.on b{background:var(--accent)}

/* ---------- まとめ ---------- */
.take{
  border:2px solid var(--ink);
  background:var(--surface-2);box-shadow:none;
  color:var(--text);
}