/* ================================================================
   テーマ（配色）の正本。アプリ本体（app.html）と入口3画面（login/register/forgot）が共用する。

   選び方は2つ（どちらも html の data-theme 属性にテーマ名を入れるだけ）：
     - ユーザー設定 sg_theme … アプリ内・人ごと（app.html の applyTheme()）
     - 全体設定 entry_theme … 入口3画面・未ログインの人向け（config.php → app/entry_theme.php）
   'system' はテーマ名ではなく「選び方」。JSで dark / light に解決してから属性に入れる。

   ★テーマを増やすときの型★
   ① 下のテーマブロックを丸ごとコピーして data-theme="名前" を変え、色を差し替える
      ★ボタン4変数（--btn-bg 背景・--btn-text 文字・--btn-hover ホバー背景・--btn2-hover 白抜きボタンのホバー背景）
        も必ず定義する。文字と背景のコントラスト比 4.5:1 以上を確認すること（2026-08-02。
        以前は app.html にダーク前提の固定色があり、明るいテーマのホバーで文字が読めなくなっていた）★
   ② 固定色の上書き（body背景・nav・.card・.ad-slot・.metro-fab・hover）も一緒にコピーする
      ※ダークだけは従来のまま app.html 内の基本CSSが実体（他テーマはそれを上書きする方式）
   ③ app.html の THEME_LABEL に「名前:'表示名'」を1行足す（設定モーダルのボタンは自動で増える）
   ④ 入口で使うなら config.php の entry_theme にその名前を書く
   ⑤ ★このファイルを変えたら、読み込み側の「?v=数字」を上げる★（app.html:7 と app/entry_theme.php の2箇所。
      上げないとブラウザが古いCSSをキャッシュし続け、新テーマの定義が無い＝画面が真っ暗になる。2026-08-01 実際に発生）
   ================================================================ */

/* ---- ダーク（従来の見た目）。変数のみ＝装飾の実体は app.html の基本CSS ---- */
html[data-theme="dark"]{
  --bg:#1c1712; --panel:#2a2219; --panel2:#332a1f; --line:#463829;
  --text:#f3e9db; --muted:#b6a48b; --accent:#e0a04a; --accent2:#c8772f;
  --good:#7bb661; --warn:#e0a04a; --done:#6fa8dc; --danger:#d9534f;
  --link:#e8b04b; --err-bg:#4a1f1f; --err-line:#7a3030; --err-text:#ffb3b3;
  --btn-bg:#e0a04a; --btn-text:#241b12; --btn-hover:#eeb35f; --btn2-hover:#3d3123;
  --shadow:0 6px 20px rgba(0,0,0,.35);
}
html[data-theme="dark"] body{
  background:linear-gradient(rgba(28,23,18,.82),rgba(28,23,18,.9)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #1c1712;
}

/* ---- 明るい（既定・2026-08-01 本人決定） ---- */
html[data-theme="light"]{
  --bg:#f5efe3; --panel:#fffdf8; --panel2:#f0e7d6; --line:#ddd2bc;
  --text:#3b2f1f; --muted:#8d7c60; --accent:#c9861d; --accent2:#b06a20;
  --good:#5a9a44; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#8a5c10; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  --btn-bg:#c9861d; --btn-text:#241b12; --btn-hover:#dfa22e; --btn2-hover:#e2d4b8;
  --shadow:0 6px 20px rgba(120,90,40,.15);
}
html[data-theme="light"] body{
  background:linear-gradient(rgba(245,239,227,.88),rgba(245,239,227,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #f5efe3;
}
html[data-theme="light"] nav{background:rgba(250,246,238,.96)}
html[data-theme="light"] .gear:hover,html[data-theme="light"] .help:hover,html[data-theme="light"] .user:hover{background:#e6dcc8}
html[data-theme="light"] .card{background:rgba(255,252,244,.92)}
html[data-theme="light"] .ad-slot{background:rgba(245,239,227,.6)}
html[data-theme="light"] .metro-fab{background:rgba(250,246,238,.96);box-shadow:0 6px 24px rgba(120,90,40,.3)}

/* ---- 薄い青（スカイ）・明るい系（2026-08-01 追加） ---- */
html[data-theme="sky"]{
  --bg:#e8f1f8; --panel:#fbfdff; --panel2:#e2ecf5; --line:#c5d6e6;
  --text:#1f3242; --muted:#5f7a90; --accent:#2e7fc2; --accent2:#1f639d;
  --good:#4a9a5a; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#1f639d; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  /* btn-bg はアクセントより濃い青（#2e7fc2 だと白文字でも濃文字でも 4.5:1 に届かない） */
  --btn-bg:#276fae; --btn-text:#fff; --btn-hover:#1f639d; --btn2-hover:#d0e0ef;
  --shadow:0 6px 20px rgba(50,90,140,.15);
}
html[data-theme="sky"] body{
  background:linear-gradient(rgba(232,241,248,.88),rgba(232,241,248,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #e8f1f8;
}
html[data-theme="sky"] nav{background:rgba(240,247,252,.96)}
html[data-theme="sky"] .gear:hover,html[data-theme="sky"] .help:hover,html[data-theme="sky"] .user:hover{background:#d4e3f0}
html[data-theme="sky"] .card{background:rgba(251,253,255,.92)}
html[data-theme="sky"] .ad-slot{background:rgba(232,241,248,.6)}
html[data-theme="sky"] .metro-fab{background:rgba(240,247,252,.96);box-shadow:0 6px 24px rgba(50,90,140,.3)}

/* ---- 濃い青（ネイビー）・暗い系 ---- */
html[data-theme="navy"]{
  --bg:#101a2b; --panel:#18263c; --panel2:#1f3049; --line:#2e4363;
  --text:#e3ecf7; --muted:#8fa5c0; --accent:#5aa2e8; --accent2:#3d7fc4;
  --good:#6cbf78; --warn:#e0a04a; --done:#6fa8dc; --danger:#e06060;
  --link:#7ab5ef; --err-bg:#3a1f2a; --err-line:#6d3048; --err-text:#ffb3c1;
  --btn-bg:#5aa2e8; --btn-text:#0f2136; --btn-hover:#7ab5ef; --btn2-hover:#2a4066;
  --shadow:0 6px 20px rgba(0,0,0,.4);
}
html[data-theme="navy"] body{
  background:linear-gradient(rgba(16,26,43,.84),rgba(16,26,43,.9)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #101a2b;
}
html[data-theme="navy"] nav{background:rgba(20,31,50,.96)}
html[data-theme="navy"] .gear:hover,html[data-theme="navy"] .help:hover,html[data-theme="navy"] .user:hover{background:#27395a}
html[data-theme="navy"] .card{background:rgba(24,38,60,.92)}
html[data-theme="navy"] .ad-slot{background:rgba(16,26,43,.6)}
html[data-theme="navy"] .metro-fab{background:rgba(20,31,50,.96);box-shadow:0 6px 24px rgba(0,0,0,.5)}

/* ---- 赤・明るい系（赤は差し色。全面赤にすると目が疲れるため下地は淡く） ---- */
html[data-theme="red"]{
  --bg:#f9eeec; --panel:#fffaf9; --panel2:#f4e3e0; --line:#e3c8c3;
  --text:#41221e; --muted:#94706a; --accent:#c94a3d; --accent2:#a83a30;
  --good:#5a9a44; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#a83a30; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  --btn-bg:#c94a3d; --btn-text:#fff; --btn-hover:#a83a30; --btn2-hover:#e8cfc9;
  --shadow:0 6px 20px rgba(150,60,50,.15);
}
html[data-theme="red"] body{
  background:linear-gradient(rgba(249,238,236,.88),rgba(249,238,236,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #f9eeec;
}
html[data-theme="red"] nav{background:rgba(252,244,242,.96)}
html[data-theme="red"] .gear:hover,html[data-theme="red"] .help:hover,html[data-theme="red"] .user:hover{background:#eed7d2}
html[data-theme="red"] .card{background:rgba(255,250,249,.92)}
html[data-theme="red"] .ad-slot{background:rgba(249,238,236,.6)}
html[data-theme="red"] .metro-fab{background:rgba(252,244,242,.96);box-shadow:0 6px 24px rgba(150,60,50,.3)}

/* ---- ピンク・明るい系 ---- */
html[data-theme="pink"]{
  --bg:#faeef4; --panel:#fffafc; --panel2:#f5e1eb; --line:#e6c6d6;
  --text:#43222f; --muted:#996f82; --accent:#d4548e; --accent2:#b83f75;
  --good:#5a9a44; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#b83f75; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  /* btn-bg はアクセントより濃いピンク（#d4548e だと白文字でも濃文字でも 4.5:1 に届かない） */
  --btn-bg:#c73f7c; --btn-text:#fff; --btn-hover:#a93669; --btn2-hover:#ebcfdd;
  --shadow:0 6px 20px rgba(180,70,120,.15);
}
html[data-theme="pink"] body{
  background:linear-gradient(rgba(250,238,244,.88),rgba(250,238,244,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #faeef4;
}
html[data-theme="pink"] nav{background:rgba(252,244,248,.96)}
html[data-theme="pink"] .gear:hover,html[data-theme="pink"] .help:hover,html[data-theme="pink"] .user:hover{background:#efd6e2}
html[data-theme="pink"] .card{background:rgba(255,250,252,.92)}
html[data-theme="pink"] .ad-slot{background:rgba(250,238,244,.6)}
html[data-theme="pink"] .metro-fab{background:rgba(252,244,248,.96);box-shadow:0 6px 24px rgba(180,70,120,.3)}

/* ---- グリーン・明るい系 ---- */
html[data-theme="green"]{
  --bg:#ecf3ea; --panel:#fbfefa; --panel2:#e0ecdd; --line:#c6d9c2;
  --text:#24361f; --muted:#6d8567; --accent:#4d9a3f; --accent2:#3a7a30;
  --good:#4d9a3f; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#3a7a30; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  /* btn-bg はアクセントより濃い緑（#4d9a3f だと白文字でも濃文字でも 4.5:1 に届かない） */
  --btn-bg:#41843a; --btn-text:#fff; --btn-hover:#3a7a30; --btn2-hover:#cfe0ca;
  --shadow:0 6px 20px rgba(60,110,50,.15);
}
html[data-theme="green"] body{
  background:linear-gradient(rgba(236,243,234,.88),rgba(236,243,234,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #ecf3ea;
}
html[data-theme="green"] nav{background:rgba(243,249,241,.96)}
html[data-theme="green"] .gear:hover,html[data-theme="green"] .help:hover,html[data-theme="green"] .user:hover{background:#d6e6d1}
html[data-theme="green"] .card{background:rgba(251,254,250,.92)}
html[data-theme="green"] .ad-slot{background:rgba(236,243,234,.6)}
html[data-theme="green"] .metro-fab{background:rgba(243,249,241,.96);box-shadow:0 6px 24px rgba(60,110,50,.3)}

/* ---- 黄色・明るい系 ---- */
html[data-theme="yellow"]{
  --bg:#faf4dd; --panel:#fffdf2; --panel2:#f3ead0; --line:#e0d3a8;
  --text:#3e3312; --muted:#8d7f56; --accent:#b8901a; --accent2:#96750f;
  --good:#5a9a44; --warn:#c9861d; --done:#4a86c8; --danger:#c34540;
  --link:#8a6f10; --err-bg:#fbeaea; --err-line:#e0b4b4; --err-text:#a33636;
  --btn-bg:#b8901a; --btn-text:#241b12; --btn-hover:#d1a72e; --btn2-hover:#e6d8ae;
  --shadow:0 6px 20px rgba(140,110,30,.15);
}
html[data-theme="yellow"] body{
  background:linear-gradient(rgba(250,244,221,.88),rgba(250,244,221,.94)), var(--bg-image,url('background.jpg')) center/cover fixed no-repeat, #faf4dd;
}
html[data-theme="yellow"] nav{background:rgba(252,248,232,.96)}
html[data-theme="yellow"] .gear:hover,html[data-theme="yellow"] .help:hover,html[data-theme="yellow"] .user:hover{background:#ece1c2}
html[data-theme="yellow"] .card{background:rgba(255,253,242,.92)}
html[data-theme="yellow"] .ad-slot{background:rgba(250,244,221,.6)}
html[data-theme="yellow"] .metro-fab{background:rgba(252,248,232,.96);box-shadow:0 6px 24px rgba(140,110,30,.3)}