/* ============================================
   口添え — ハッチ（応援帳）のデザイン言語に合わせる
   ルーズリーフ／紺インク／手描き風の不揃い角丸
   ============================================ */
:root{
  /* 紙 */
  --bg:#f8f7f0;
  --rule:rgba(96,134,189,.16);          /* 罫線 */
  --margin-line:rgba(224,108,118,.4);   /* 左の赤線 */
  --hole:rgba(43,51,68,.13);            /* パンチ穴 */
  --surface:#ffffff;
  --surface-2:#f1efe6;

  /* インク */
  --ink:#2b3344;
  --ink-soft:#5c6577;
  --ink-faint:#979dab;
  --line:#ded9c8;
  --line-strong:#c2bca6;

  /* 色 */
  --accent:#3e4a77;
  --accent-deep:#313c64;
  --accent-soft:#e7eaf4;
  --accent-glow:rgba(62,74,119,.2);
  --highlight:#edce16;
  --highlight-soft:#fdf3bb;
  --mint:#9eddd5;
  --mint-soft:#d9f0eb;
  --danger:#cc4f47;
  --danger-soft:#f9e3e0;
  --ok:#35935f;
  --ok-soft:#dcefe2;

  /* 影 */
  --shadow-sm:0 1px 2px rgba(60,55,40,.08), 0 2px 5px rgba(60,55,40,.05);
  --shadow-lg:0 14px 36px rgba(60,55,40,.18), 0 4px 12px rgba(60,55,40,.08);
  --shadow-accent:2.5px 3.5px 0 var(--accent-glow);

  /* 手描きの不揃いな角 */
  --wob-sm:9px 5px 10px 6px / 6px 9px 5px 10px;
  --wob:15px 9px 17px 10px / 10px 16px 9px 15px;
  --wob-lg:22px 13px 25px 14px / 14px 23px 13px 22px;
  --pill:999px;

  --maxw:600px;
  --appbar-h:56px;
  --tabbar-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}