@charset "UTF-8";
/* ============================================================
   themes.css — 画面の配色（カラーテーマ）
   ------------------------------------------------------------
   選ぶところ： 設定メニュー ＞ 画面の配色
   効かせ方  ： <html data-od-theme="ocean"> のように、いちばん外側に印を付ける。
                印を付けるのは public/js/color-themes.js。

   ⚠ ここに書くのは **色の変数だけ**。かたちの指定（大きさ・並び）は書かない。
     かたちまで配色ごとに変えると、どのテーマで何が崩れているのか分からなくなる。
   ⚠ 変数のもとの値（標準の配色）は public/css/style.css の :root にある。
     ここでは「そこから変えるぶん」だけを書く。
   ⚠ 新しい配色を足すときは、この4か所をそろえること。
       ① このファイルに html[data-od-theme="キー"] を足す
       ② public/js/color-themes.js の THEMES に1行足す
       ③ lib/perm.js …（不要）／サーバー側の変更は要りません（prefs にそのまま入ります）
       ④ node test/ui-check.js で「配色」の検査を通す
   ⚠ 暗い配色（dark）と高コントラストは、**面と文字も入れ替わります**。
     色みだけ変えると、白い面に白い字が出て読めなくなります。
   ============================================================ */

/* ---------- 標準（オフィスブルー）＝ もとの色 ----------
   ⚠ ここが「印を付けないとき」の色。下の各テーマは、ここから変えるぶんだけを書く。
   ⚠ このファイルは index.html だけでなく Grid・Page・Stage・LOM からも読み込みます。
     色の変数をここに置いているのは、そのためです。 */
:root{
  /* ---- 配色（カラーテーマ）で入れ替わるところ -------------------------
   * テーマの中身は public/css/themes.css が
   *   html[data-od-theme="…"] { … }
   * で上書きする。選ぶのは 設定メニュー ＞ 画面の配色。
   * ⚠ 画面の色は、かならずここの変数を通すこと。
   *   直に色を書くと、そのテーマでだけ元の色が残り、着せ替えから漏れる。
   * ⚠ 「帯の上に置く白いもの」は --on-hd を使う。--card にすると、
   *   暗い配色のときにヘッダーのロゴまで暗くなって見えなくなる。 */
  --hd1:#0b5ea8; --hd2:#08497f;                                  /* 上のヘッダー（帯） */
  --mn1:#6fb2e4; --mn-mid:#4a95d2; --mn2:#2b78bd; --mn-bd:#1f5f95;  /* メニューの見出し帯 */
  --blue:#0068b7; --blue-d:#004f8c; --blue-l:#e8f1f9;            /* 主役の色 */
  --accent:#f08300; --red:#d0021b; --green:#5b9e2d; --purple:#7b68b6;
  --bg:#eef2f6; --card:#fff; --card2:#f4f7fa; --card3:#fafcfd;   /* 画面の地／面／沈んだ面 */
  --line:#d5dee6; --line2:#e6ecf1; --line3:#c8d4de; --edge:#a8c4dd; --dash:#c9d6e0;  /* 罫線・囲み・点線 */
  --hdr1:#f7f9fb; --hdr2:#e9eef3;                                /* 見出しの帯（上→下） */
  --hov:#e6f1fa; --sel:#dceaf7; --act:#d3e6f6; --rowhov:#f7fafc; /* 乗せた／選んだ／押した／行 */
  --tx:#20303e; --mut:#6c7d8c; --tx2:#3d4d5c; --tx3:#4a5b6a; --arrow:#b3c1cc;
  --navy:#12314c; --fld:#fff; --on-hd:#fff;
  /* ⚠ --paper は「刷ったときの紙」。暗い配色でも白のままにする。
     ここを暗くすると、画面と印刷結果が食い違い、文字が読めない資料が刷られる。 */
  --paper:#ffffff; --paper-ink:#20303e;
  --btnf1:#fff; --btnf2:#f2f5f8; --btn-hov-bd:#a9cdea;           /* ふつうのボタン */
  --btn1:#f89b2a; --btn2:#e57d00; --btn-bd:#cf7100;              /* 目立たせるボタン */
  --bl1:#3d92d8; --bl2:#1f6fb5; --bl-bd:#1a5f9c;                 /* 青のボタン */
  --lg1:#0b5ea8; --lg2:#08497f; --lg3:#063a66;                   /* ログイン画面の地 */
  /* 「気に留めてほしい面」の色（注意書き・警告・今日・練習の光っているところ）。
     ⚠ 2026-09-09 まで、ここは style.css に直に薄い黄色（#fff8e6 など）で書いてあり、
       しかも `#fff` → `var(--card)` の置き換えを巻き込んで `var(--card)8e6` という
       **成り立たない値**になっていた。ブラウザはその1行を丸ごと捨てるので、
       注意書きも警告も「今日」も、色が付かないまま8か所ぶん出ていた。 */
  --note:#fff8e6; --note-bd:#f0d9a8; --note-tx:#7a5a00;   /* 注意書き */
  --warn:#fff3e0; --warn-bd:#f0c089; --warn-tx:#b3540b;   /* 警告 */
  --mark:#fffbe8; --mark-bd:#e6d59a;                       /* 目印を付けた面 */
  --today:#fffdf6;                                          /* 今日の升 */
  --hit:#fff8e2;                                            /* 練習の「ここを押す」 */
  --shadow:rgba(0,0,0,.06);
}

/* ---------- ネイビー（濃紺） ---------- */
html[data-od-theme="navy"]{
  --hd1:#1b3d63; --hd2:#132c48;
  --mn1:#5b82ad; --mn-mid:#3c6690; --mn2:#2a4c70; --mn-bd:#1e3a57;
  --blue:#2f6fb2; --blue-d:#1d4f85; --blue-l:#eaf1f8;
  --accent:#e08a2c;
  --bg:#eef1f5; --card2:#f2f5f9; --card3:#f8fafc;
  --line:#d3dbe5; --line2:#e6ebf1; --line3:#c2cddb; --edge:#b3c4d8; --dash:#c3cfdd;
  --hdr1:#f7f9fb; --hdr2:#e7ecf2;
  --hov:#e9eff7; --sel:#dbe5f2; --act:#cdddef; --rowhov:#f5f8fb;
  --btn-hov-bd:#9fb8d4;
  --bl1:#4a7fbe; --bl2:#2a5a94; --bl-bd:#22497a;
  --lg1:#1b3d63; --lg2:#132c48; --lg3:#0d2136;
  --navy:#132c48;
}

/* ---------- オーシャン（青緑） ---------- */
html[data-od-theme="ocean"]{
  --hd1:#0f6f7a; --hd2:#0b545d;
  --mn1:#63c3c8; --mn-mid:#31a2ab; --mn2:#17828d; --mn-bd:#0f6a74;
  --blue:#0e8f96; --blue-d:#0a6a70; --blue-l:#e4f4f4;
  --accent:#e88b2f;
  --bg:#eef4f4; --card2:#f1f7f7; --card3:#f8fcfc;
  --line:#d0e0e0; --line2:#e2eded; --line3:#bcd4d4; --edge:#a4d0d3; --dash:#bcd8da;
  --hdr1:#f6fbfb; --hdr2:#e3eeee;
  --hov:#e2f3f3; --sel:#cfeaea; --act:#bde2e2; --rowhov:#f3fafa;
  --btn-hov-bd:#8fc9cc;
  --bl1:#35b0b6; --bl2:#14848c; --bl-bd:#0e6d74;
  --lg1:#0f6f7a; --lg2:#0b545d; --lg3:#073d44;
  --navy:#0d3f46;
}

/* ---------- フォレスト（緑） ---------- */
html[data-od-theme="forest"]{
  --hd1:#2c6b3f; --hd2:#215130;
  --mn1:#79bd86; --mn-mid:#4f9d61; --mn2:#357f48; --mn-bd:#2a6739;
  --blue:#2f8a4a; --blue-d:#216236; --blue-l:#eaf5ec;
  --accent:#d98324;
  --bg:#eff4ef; --card2:#f3f8f3; --card3:#f9fcf9;
  --line:#d4e0d5; --line2:#e6eee7; --line3:#c2d2c4; --edge:#aecfb5; --dash:#c2d9c6;
  --hdr1:#f7fbf7; --hdr2:#e7efe7;
  --hov:#e7f4ea; --sel:#d6ecdb; --act:#c3e2ca; --rowhov:#f4faf5;
  --btn-hov-bd:#9cc9a5;
  --bl1:#5aab6c; --bl2:#2f8046; --bl-bd:#256a39;
  --lg1:#2c6b3f; --lg2:#215130; --lg3:#173a22;
  --navy:#20402a;
}

/* ---------- プラム（葡萄） ---------- */
html[data-od-theme="plum"]{
  --hd1:#5c2f66; --hd2:#46234e;
  --mn1:#b183bd; --mn-mid:#8d59a0; --mn2:#6f3e83; --mn-bd:#5a3069;
  --blue:#7c4b96; --blue-d:#5b3470; --blue-l:#f3ecf6;
  --accent:#d97e2c;
  --bg:#f3eff4; --card2:#f7f2f8; --card3:#fbf8fc;
  --line:#e0d5e4; --line2:#ede6f0; --line3:#d3c4d8; --edge:#c9b0d3; --dash:#d6c3de;
  --hdr1:#faf7fb; --hdr2:#ece5ef;
  --hov:#f1e8f4; --sel:#e6d7ec; --act:#d9c4e2; --rowhov:#f9f5fa;
  --btn-hov-bd:#bfa2cb;
  --bl1:#9a63b3; --bl2:#6f3e8c; --bl-bd:#5a3173;
  --lg1:#5c2f66; --lg2:#46234e; --lg3:#331739;
  --navy:#3f2148;
}

/* ---------- ウォーム（茶） ---------- */
html[data-od-theme="warm"]{
  --hd1:#7a4a26; --hd2:#5d371a;
  --mn1:#cfa176; --mn-mid:#b57c48; --mn2:#96602f; --mn-bd:#7c4e26;
  --blue:#a3622c; --blue-d:#7a4720; --blue-l:#f7efe6;
  --accent:#c2792f;
  --bg:#f5f1ea; --card2:#f8f4ee; --card3:#fcfaf6;
  --line:#e2d8c9; --line2:#efe8dd; --line3:#d8ccb8; --edge:#d5bfa2; --dash:#ddcbb2;
  --hdr1:#fbf8f3; --hdr2:#eee6da;
  --hov:#f6eee2; --sel:#eee0cc; --act:#e2ceb0; --rowhov:#fbf7f1;
  --btn-hov-bd:#cbb191;
  --bl1:#c08a4e; --bl2:#96602f; --bl-bd:#7c4e26;
  --lg1:#7a4a26; --lg2:#5d371a; --lg3:#42260f;
  --navy:#4b2f18;
}

/* ---------- サクラ（桜） ---------- */
html[data-od-theme="sakura"]{
  --hd1:#b3517a; --hd2:#8f3d60;
  --mn1:#efa6c2; --mn-mid:#e07fa5; --mn2:#c75f88; --mn-bd:#a84a70;
  --blue:#c1547f; --blue-d:#94395c; --blue-l:#fdeef4;
  --accent:#e98a2f;
  --bg:#f8f0f3; --card2:#fbf4f7; --card3:#fdfafb;
  --line:#e9dbe1; --line2:#f3e9ee; --line3:#e0ccd4; --edge:#e6b9cb; --dash:#eccbd8;
  --hdr1:#fdf8fa; --hdr2:#f2e4ea;
  --hov:#fceef3; --sel:#f8dde8; --act:#f2c9da; --rowhov:#fdf6f9;
  --btn-hov-bd:#e0aabf;
  --bl1:#e07fa5; --bl2:#bd5580; --bl-bd:#9e4468;
  --lg1:#b3517a; --lg2:#8f3d60; --lg3:#6b2a45;
  --navy:#6b2a45;
}

/* ---------- スレート（落ち着いた灰） ---------- */
html[data-od-theme="slate"]{
  --hd1:#4a5765; --hd2:#37424e;
  --mn1:#94a3b2; --mn-mid:#71818f; --mn2:#55636f; --mn-bd:#44505b;
  --blue:#4f6479; --blue-d:#3a4b5c; --blue-l:#eef1f4;
  --accent:#c07a2a;
  --bg:#f0f2f4; --card2:#f4f6f8; --card3:#fafbfc;
  --line:#d8dde3; --line2:#e8ebee; --line3:#c8ced6; --edge:#bcc5ce; --dash:#c8d0d8;
  --hdr1:#f9fafb; --hdr2:#e9ecef;
  --hov:#eceff2; --sel:#dfe4e9; --act:#d0d7de; --rowhov:#f6f7f9;
  --btn-hov-bd:#b0bac4;
  --bl1:#78899a; --bl2:#516272; --bl-bd:#42505d;
  --lg1:#4a5765; --lg2:#37424e; --lg3:#262e37;
  --navy:#2f3944;
}

/* ---------- ダーク（暗い背景） ----------
   ⚠ ここは色みだけでなく、**面（--card）と文字（--tx）も入れ替えます**。
     色みだけ変えると、白い面に白い字が出て読めません。 */
html[data-od-theme="dark"]{
  --hd1:#1a1f27; --hd2:#12161d;
  --mn1:#3a4657; --mn-mid:#2e3846; --mn2:#242c37; --mn-bd:#161b22;
  --blue:#5aa0e8; --blue-d:#8cc0f5; --blue-l:#1d2a3a;
  --accent:#e8a33d; --red:#f0736a; --green:#6dc47f; --purple:#a992e0;
  --bg:#161a21; --card:#1e232b; --card2:#232933; --card3:#242a34;
  --line:#39424f; --line2:#2e3641; --line3:#46515f; --edge:#3a4553; --dash:#3f4a58;
  --hdr1:#272e38; --hdr2:#212832;
  --hov:#2a3542; --sel:#2f4257; --act:#36506c; --rowhov:#252c36;
  --tx:#dbe2ea; --mut:#94a2b2; --tx2:#c3ccd6; --tx3:#aab6c2; --arrow:#5d6c7c;
  --navy:#0f141a; --fld:#171b22;
  --btnf1:#2b323d; --btnf2:#242a34; --btn-hov-bd:#4a5768;
  --btn1:#d98a25; --btn2:#b56d13; --btn-bd:#8c520a;
  --bl1:#3d7fc4; --bl2:#2a5f96; --bl-bd:#1f4a76;
  --lg1:#12161d; --lg2:#0d1116; --lg3:#080b0f;
  /* ⚠ 薄い黄色のままだと、暗い画面でそこだけ光って目に刺さる。
     暗い側の「気に留めてほしい面」に置き換える。 */
  --note:#2e2a1d; --note-bd:#5c5232; --note-tx:#e8c774;
  --warn:#33261a; --warn-bd:#6b4a28; --warn-tx:#f0b071;
  --mark:#2b2820; --mark-bd:#544b31;
  --today:#262c22;
  --hit:#3a3016;
  --shadow:rgba(0,0,0,.5);
}
/* 暗い配色でだけ要る手当て。
   ⚠ 白のまま残ると、そこだけ光って見える（目に刺さる）ところを拾っています。 */
html[data-od-theme="dark"] input,
html[data-od-theme="dark"] select,
html[data-od-theme="dark"] textarea{ background:var(--fld); color:var(--tx); border-color:var(--line); }
html[data-od-theme="dark"] .tag{ background:var(--card2); }
html[data-od-theme="dark"] .ev.more{ background:var(--card2); color:var(--mut); }
html[data-od-theme="dark"] .modal,
html[data-od-theme="dark"] .modal-b{ background:var(--card); color:var(--tx); }
html[data-od-theme="dark"] img:not([src$=".svg"]){ filter:brightness(.94); }

/* ---------- 高コントラスト ----------
   目が見えにくい方・明るい場所で使う方むけ。白黒＋濃い青で、境目をはっきりさせます。 */
html[data-od-theme="contrast"]{
  --hd1:#000000; --hd2:#000000;
  --mn1:#333333; --mn-mid:#222222; --mn2:#000000; --mn-bd:#000000;
  --blue:#0040a8; --blue-d:#002d78; --blue-l:#e4ecff;
  --accent:#a34a00; --red:#b00013; --green:#1c6b2a; --purple:#4b2a8f;
  --bg:#ffffff; --card:#ffffff; --card2:#f2f2f2; --card3:#f7f7f7;
  --line:#000000; --line2:#666666; --line3:#000000; --edge:#000000; --dash:#000000;
  --hdr1:#eaeaea; --hdr2:#dcdcdc;
  --hov:#e4ecff; --sel:#cfdcff; --act:#b8caf8; --rowhov:#f0f0f0;
  --tx:#000000; --mut:#333333; --tx2:#000000; --tx3:#000000; --arrow:#000000;
  --navy:#000000; --fld:#ffffff;
  --btnf1:#ffffff; --btnf2:#e8e8e8; --btn-hov-bd:#000000;
  --btn1:#b35c00; --btn2:#8a4600; --btn-bd:#000000;
  --bl1:#0050c8; --bl2:#003a95; --bl-bd:#000000;
  --lg1:#000000; --lg2:#000000; --lg3:#000000;
  /* ⚠ 薄い黄色は「差」にならない。囲みを黒くして、面ははっきり付ける。 */
  --note:#fff8d0; --note-bd:#000000; --note-tx:#000000;
  --warn:#ffe4c4; --warn-bd:#000000; --warn-tx:#7a2e00;
  --mark:#fff2b0; --mark-bd:#000000;
  --today:#fff8d0;
  --hit:#ffe680;
  --shadow:rgba(0,0,0,.35);
}
html[data-od-theme="contrast"] .pnl,
html[data-od-theme="contrast"] .side,
html[data-od-theme="contrast"] .menu,
html[data-od-theme="contrast"] .tbl,
html[data-od-theme="contrast"] .btn{ border-width:2px; }
html[data-od-theme="contrast"] a{ text-decoration:underline; }