/* ============================================================
   theme.css — 色トークンとライト配色 Option
   スコープ: :root / data-theme / data-lpal の CSS 変数、レイアウト定数
   ============================================================ */
/* 色の設定（ライト／ダークの色の数字はここ） */
:root{color-scheme:light;--page-bg:linear-gradient(180deg,#c9e7f9 0%,#e6f3fc 100%);--primary:#2f6fd6;--on-primary:#fff;--btn-text:#2f6fd6;--tint:#e3edfc;--pill-bg:#eaf0fa;--bg:#d9ecf9;--card-bg:#fff;--text:#1b2a4a;--border:#e1e7f1;--sub:#4a5a78;--tab-bg:#fff;--input-bg:#fff;--input-border:#dde4f0;--date-bg:#eaf0fa;--grid:#e5e5ea;--sheet-bg:#fff;--sheet-text:#000;--table-line:#333;--th-bg:#f0f0f0;--sat:#00f;--sun:red;--high:#d70015;--low:#0040dd;--am-bg:#fff3c4;--pm-bg:#d6e6ff;--sep-line:#333;--c1:#1f7ae0;--c2:#12a37a;--c3:#e67a00;--c4:#8f4fe0;--rp-grid:#c4cad6;--rp-am-head:#fdeab4;--rp-pm-head:#dbe7fb;--rp-am-cell:#fdf6e4;--rp-pm-cell:#eaf0fc;--rp-sat-bg:#dbe8ff;--rp-sun-bg:#ffdede;--meas-am-bg:#ffdfac;--meas-am-bg2:#fffbf2;--meas-am-line:#f5b26b;--meas-am-text:#7a4300;--meas-am-no:#9a5200;--meas-pm-bg:#bdd1f8;--meas-pm-bg2:#f2f6fe;--meas-pm-line:#9db4f0;--meas-pm-text:#1f2f8a;--meas-pm-no:#1f2f8a;}
:root[data-theme=dark]{color-scheme:dark;--page-bg:#000;--primary:#4f9bff;--on-primary:#000;--btn-text:#fff;--tint:#22304a;--pill-bg:#2c2c2e;--bg:#000;--card-bg:#1c1c1e;--text:#f2f2f7;--border:#38383a;--sub:#b4b4bb;--tab-bg:#1c1c1e;--input-bg:#2c2c2e;--input-border:#48484a;--date-bg:#3a3a3c;--grid:#38383a;--sheet-bg:#1c1c1e;--sheet-text:#f2f2f7;--table-line:#8e8e93;--th-bg:#2c2c2e;--sat:#6ea8ff;--sun:#ff6b6b;--high:#ff6b6b;--low:#6ea8ff;--am-bg:#4d4421;--pm-bg:#213a5c;--sep-line:#aeaeb2;--c1:#4aa3ff;--c2:#3dd6a0;--c3:#ff9f0a;--c4:#c58bff;--rp-grid:#3f3f43;--rp-am-head:#62531c;--rp-pm-head:#254b82;--rp-am-cell:#26210f;--rp-pm-cell:#172233;--rp-sat-bg:#1c2e52;--rp-sun-bg:#4a2326;--meas-am-bg:#3a2a14;--meas-am-bg2:#2a2010;--meas-am-line:#7a5420;--meas-am-text:#ffd9a0;--meas-am-no:#ffc977;--meas-pm-bg:#1f2a4a;--meas-pm-bg2:#171f38;--meas-pm-line:#3c4f8f;--meas-pm-text:#fff;--meas-pm-no:#a9bdff;}

/* ライトの色（設定の「ライトの色」Option1〜3）。ライトのときだけ効く。標準はOption1。印刷には効かせない */
@media screen{
:root[data-theme=light][data-lpal="1"]{--bg:#e3e9ef;--page-bg:#e3e9ef;--card-bg:#f7f9fb;--tab-bg:#f7f9fb;--input-bg:#f7f9fb;--pill-bg:#e3e9ef;--date-bg:#e3e9ef;--tint:#dbe3ec;--border:#d6dee7;--input-border:#cdd6e0}
:root[data-theme=light][data-lpal="2"]{--bg:#dfe5ec;--page-bg:#dfe5ec;--card-bg:#f2f4f7;--tab-bg:#f2f4f7;--input-bg:#f2f4f7;--pill-bg:#dfe5ec;--date-bg:#dfe5ec;--tint:#d6dee8;--border:#d1d9e2;--input-border:#c8d1dc}
:root[data-theme=light][data-lpal="3"]{--bg:#e8e3dc;--page-bg:#e8e3dc;--card-bg:#f8f6f3;--tab-bg:#f8f6f3;--input-bg:#f8f6f3;--pill-bg:#e8e3dc;--date-bg:#e8e3dc;--tint:#e1dacf;--border:#dcd5ca;--input-border:#d2cabe}
}
/* ライト以外のときは「ライトの色」の行ごと隠す（v211。隠し方は js/theme.js の applyTheme が display で切り替える）。ボタン自体も押せないままにしておく（保険） */
#lightPalSeg button:disabled{opacity:.35;cursor:default}

/* レイアウト定数（画面高さ計算用。ID応急処置を減らす） */
:root{
  --tab-bar-h:64px;
  --tab-bar-h-lg:78px;
  --graph-chrome-h:98px;
  --graph-chrome-h-lg:112px;
}

/* ===== 立体感のトークン（v141）=====
   ライト：やさしい影＋上の縁の白いハイライト。ダーク：影は見えにくいので、明るい縁＋深い影。
   --elev-1 小さな部品（ボタン・マス・日付）／--elev-2 目立たせたい部品／--elev-card カード
   --elev-pri 青い（選択中・主役の）ボタン／--sunk へこみ（入力中・入力欄）／--press 押している間
   --ring 入力中の青い縁の外側のうっすらした光／--face・--face-pri 面の上のうっすらしたツヤ
   赤・青の色分け（--high / --low）はここでは使わない（数字の意味専用）。印刷・PDFは立体感なし（白地固定） */
:root{
  --sh:40,56,90;
  /* v143：左上の白いハイライト＋右下の濃いめの影（斜めから光が当たる）。ダークは下の :root[data-theme=dark] で別に決める */
  --elev-1:inset 1px 1px 0 rgba(255,255,255,.9),-3px -3px 7px rgba(255,255,255,.9),3px 4px 9px rgba(var(--sh),.22),1px 1px 2px rgba(var(--sh),.14);
  --elev-2:inset 1px 1px 0 rgba(255,255,255,.95),-4px -4px 9px rgba(255,255,255,.95),4px 6px 14px rgba(var(--sh),.26),1px 2px 3px rgba(var(--sh),.16);
  --elev-card:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(var(--sh),.10),6px 10px 26px rgba(var(--sh),.12);
  --elev-pri:inset 0 1px 0 rgba(255,255,255,.35),0 3px 7px rgba(47,111,214,.42),3px 8px 18px rgba(47,111,214,.26);
  --sunk:inset 3px 3px 7px rgba(var(--sh),.22),inset -3px -3px 6px rgba(255,255,255,.9);
  --press:inset 2px 3px 6px rgba(var(--sh),.28),inset -2px -2px 4px rgba(255,255,255,.8);
  --ring:0 0 0 2px rgba(47,111,214,.22);
  --face:linear-gradient(145deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 42%),linear-gradient(145deg,rgba(var(--sh),.02) 30%,rgba(var(--sh),.09) 100%);
  --face-pri:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 60%);
  --num-shadow:0 -.5px 0 rgba(255,255,255,.9),0 2px 2.5px rgba(var(--sh),.38);   /* レポートの赤・青の数字を浮かせる影（v149）。ダークは下で別の値 */
  --g-shadow:rgb(40,56,90);   /* 推移グラフの線・点の影の色 */
}
:root[data-theme=dark]{
  --sh:0,0,0;
  --elev-1:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.4);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.75),0 8px 18px rgba(0,0,0,.5);
  --elev-card:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.4);
  --elev-pri:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.6),0 4px 14px rgba(79,155,255,.22);
  --sunk:inset 0 2px 5px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.06);
  --press:inset 0 2px 5px rgba(0,0,0,.7);
  --ring:0 0 0 2px rgba(79,155,255,.30);
  --face:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);
  --face-pri:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%);
  --num-shadow:0 -.5px 0 rgba(255,255,255,.18),0 2px 2.5px rgba(var(--sh),.7);
  --g-shadow:rgb(0,0,0);
}
/* Option3（暖かグレージュ）は影も少し暖かい色にする */
@media screen{
:root[data-theme=light][data-lpal="3"]{--sh:70,58,44}
}

/* ===== 白黒（data-theme=mono）v152 =====
   お年寄り・白内障の方向け。黒と白だけ。影・ぼかし・グラデーション・光沢なし（立体感のトークンは「なし」に）。
   太い枠線などの形の指定は css/mono.css。印刷・PDF・印刷プレビューは白黒の影響を受けない（report.css の PRINT / PREVIEW で白地固定） */
:root[data-theme=mono]{
  color-scheme:light;
  --page-bg:#fff;--bg:#fff;--primary:#000;--on-primary:#fff;--btn-text:#000;--tint:#fff;--pill-bg:#fff;--card-bg:#fff;
  --text:#000;--border:#000;--sub:#000;--tab-bg:#fff;--input-bg:#fff;--input-border:#000;--date-bg:#fff;--grid:#000;
  --sheet-bg:#fff;--sheet-text:#000;--table-line:#000;--th-bg:#fff;--sat:#000;--sun:#000;--high:#000;--low:#000;
  --am-bg:#fff;--pm-bg:#fff;--sep-line:#000;--c1:#000;--c2:#000;--c3:#000;--c4:#000;
  --rp-grid:#000;--rp-am-head:#fff;--rp-pm-head:#fff;--rp-am-cell:#fff;--rp-pm-cell:#fff;--rp-sat-bg:#fff;--rp-sun-bg:#fff;
  --sh:0,0,0;
  --elev-1:0 0 0 0 transparent;--elev-2:0 0 0 0 transparent;--elev-card:0 0 0 0 transparent;--elev-pri:0 0 0 0 transparent;
  --sunk:0 0 0 0 transparent;--press:0 0 0 0 transparent;--ring:0 0 0 0 transparent;
  --face:none;--face-pri:none;--num-shadow:none;--g-shadow:#000;
  --tab-bar-h:72px;--tab-bar-h-lg:88px;
}

/* ===== 試作品（2026-11-08・版番号なし）デザイン刷新モック最終形の適用 =====
   本番v225とは別枠の試作コピー専用。ライトのOption1/2を背景とカード同色にし、
   立体感トークンを参考画像寄りの値へ差し替える。ダーク・白黒は属性セレクタの
   詳細度が高い既存定義が勝つため、この :root 上書きはライトにだけ効く。 */
@media screen{
  /* Option 1：クールグレー質感（背景とカードを同色に統一） */
  :root[data-theme=light][data-lpal="1"]{
    --bg:#dfe6ee;--page-bg:#dfe6ee;--card-bg:#dfe6ee;--tab-bg:#e5ebf2;
    --input-bg:#dfe6ee;--pill-bg:#dfe6ee;--date-bg:#dfe6ee;--tint:#d5dde7;
    --border:rgba(255,255,255,0.45);--input-border:#c9d3df;
  }
  /* Option 2：少し深めのスレートグレー */
  :root[data-theme=light][data-lpal="2"]{
    --bg:#d6dfe9;--page-bg:#d6dfe9;--card-bg:#d6dfe9;--tab-bg:#dde5ee;
    --input-bg:#d6dfe9;--pill-bg:#d6dfe9;--date-bg:#d6dfe9;--tint:#cbd5e1;
    --border:rgba(255,255,255,0.4);--input-border:#bec9d6;
  }
}
/* 立体感トークン（--elev-card に外側の白い光を追加し、カードに厚みを持たせる） */
:root{
  --sh:152,166,184;
  --elev-1:inset 1px 1px 1px rgba(255,255,255,.85),-4px -4px 9px rgba(255,255,255,.88),4px 4px 10px rgba(var(--sh),.55);
  --elev-2:inset 1px 1px 1px rgba(255,255,255,.9),-5px -5px 12px rgba(255,255,255,.9),5px 5px 12px rgba(var(--sh),.6);
  --elev-card:inset 1.5px 1.5px 2px rgba(255,255,255,.9),-7px -7px 16px rgba(255,255,255,.88),7px 7px 16px rgba(var(--sh),.58);
  --sunk:inset 4px 4px 8px rgba(var(--sh),.55),inset -4px -4px 8px rgba(255,255,255,.88);
  --press:inset 3px 3px 6px rgba(var(--sh),.65),inset -2px -2px 5px rgba(255,255,255,.8);
  /* マットで均一な質感にするため、グラデーションのツヤは極薄に調整 */
  --face:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 60%);
}