/* ============================================================ theme.css — sharoushi-agent ツール面のデザインシステム強化層 （ダークモード / Linear品質のフォーカス・モーション / Stripe品質のkbd・Copy） 前提と設計: - 既定はライト（現行の質感を維持）。data-theme="dark" のときだけ暗色に切替える。 - 色トークンSSOTは inline-helpers.css / 各 blk-*.css の :root。ここでは :root[data-theme="dark"]（詳細度 0,2,0）でトークンを上書きし、多数の var(--...) 参照を一括で反転させる。ハードコード色を持つクラスのみ個別上書き。 - CSP strict: 本ファイルは外部CSS。インラインstyle/JSは一切増やさない。 - 適用は theme-init.js が を先出しするページ（ツール面）のみ。 ============================================================ */ /* ---- color-scheme（ネイティブUI・スクロールバー等の追従）---- */ :root[data-theme="light"]{ color-scheme: light; } /* ============================================================ 1) ダークトークン（SSOT一括反転） ============================================================ */ :root[data-theme="dark"]{ color-scheme: dark; /* ページ / サーフェス */ --bg:#0B1120; --surface:#111827; --bg2:#1B2536; --bg3:#243146; /* テキスト */ --text:#E5E7EB; --text2:#CBD5E1; --text3:#94A3B8; /* 罫線 */ --border:#334155; --border2:#3F4E63; /* 青（アクセント） */ --blue:#60A5FA; --blue-dark:#93C5FD; --blue-light:#7DB3FB; --blue-bg:rgba(59,130,246,.16); --blue-bg2:rgba(59,130,246,.24); --accent:#60A5FA; --accent-ink:#93C5FD; /* 緑 / 橙 / 赤 / 琥珀（結果の状態色）*/ --green:#34D399; --green-bg:rgba(16,185,129,.14); --green-text:#6EE7B7; --green-border:rgba(52,211,153,.34); --orange:#FB923C; --orange-bg:rgba(234,88,12,.16); --red:#F87171; --red-bg:rgba(220,38,38,.16); --red-text:#FCA5A5; --amber:#FBBF24; --amber-bg:rgba(217,119,6,.16); --amber-text:#FCD34D; /* 影（暗色では弱め・黒基調） */ --rc-e1:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); --rc-e2:0 6px 16px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.3); --rc-e3:0 16px 40px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35); /* フォーカスリング / 発光 */ --focus-ring:rgba(96,165,250,.30); --amount-glow:rgba(96,165,250,.42); } :root[data-theme="light"]{ --focus-ring:rgba(37,99,235,.16); --amount-glow:rgba(37,99,235,.34); } /* ============================================================ 2) ダーク: ハードコード色を持つ共通コンポーネント上書き （blk-*.css / rich-tools.css の #fff・淡色グラデ・淡色ボックス） ============================================================ */ /* nav（rich-tools が !important で白ガラス指定 → !important で上書き）*/ [data-theme="dark"] .nav{ background:rgba(17,24,39,.82)!important; border-bottom-color:var(--border); } [data-theme="dark"] nav[aria-label]{ background:rgba(17,24,39,.9); border-bottom-color:var(--border); } /* hero（各ツールの淡色パステルグラデ → 落ち着いた暗色グラデ）*/ [data-theme="dark"] .hero{ background:linear-gradient(135deg,#0E1A32 0%,#0B1120 100%); } [data-theme="dark"] .lp-hero{ background:linear-gradient(180deg,#0E1A32 0%,#0B1120 100%); } [data-theme="dark"] .hero-badge{ background:var(--surface); border-color:var(--border2); } [data-theme="dark"] .lp-hero-badge{ background:var(--green-bg); border-color:var(--green-border); } /* サーフェス（カード・結果・解説・入力・FAQ・ツールカード等）*/ [data-theme="dark"] .card, [data-theme="dark"] .result-card, [data-theme="dark"] .explainer, [data-theme="dark"] .faq-item, [data-theme="dark"] .tool-card, [data-theme="dark"] .doc, [data-theme="dark"] .checker-card, [data-theme="dark"] .info-card, [data-theme="dark"] .limit-item, [data-theme="dark"] .result-cta-box{ background:var(--surface); border-color:var(--border); } /* rich-tools の border:!important（薄い黒罫）を暗色で見えるように */ [data-theme="dark"] .card, [data-theme="dark"] .result-card, [data-theme="dark"] .tool-card{ border-color:var(--border)!important; } /* フォーム: select/input の白地とプルダウン矢印 */ [data-theme="dark"] .select, [data-theme="dark"] .lm-input, [data-theme="dark"] .signup-input{ background:var(--surface); border-color:var(--border2); color:var(--text); } [data-theme="dark"] .input, [data-theme="dark"] .input-group input[type="number"]{ background:var(--surface); border-color:var(--border2); color:var(--text); } [data-theme="dark"] .btn-outline{ background:var(--surface); border-color:var(--border2); color:var(--text2); } /* 情報ボックス（青系・橙系のハードコード淡色）*/ [data-theme="dark"] .info-box{ background:var(--blue-bg); border-color:var(--border2); color:var(--text2); } /* CTAカード（淡色グラデ → 暗色サーフェス）*/ [data-theme="dark"] .cta-card{ background:linear-gradient(135deg,#16233c 0%,#111827 100%); border-color:var(--border2); } /* 判定バッジ（shoubyou: verdict / 36kyotei: result-box）— 半透明地なのでトークンで概ね反転。 ハードコードの赤地/緑地のみ補正 */ [data-theme="dark"] .verdict.ng{ background:var(--red-bg); } [data-theme="dark"] .result-box.red{ background:var(--red-bg); border-color:var(--red-text); } [data-theme="dark"] .result-box.green{ background:var(--green-bg); border-color:var(--green-border); } [data-theme="dark"] .result-box.amber{ background:var(--amber-bg); border-color:var(--amber-text); } [data-theme="dark"] .special-row{ background:var(--amber-bg); border-color:var(--amber-text); } /* checklist（taishoku）*/ [data-theme="dark"] .cl-item{ border-bottom-color:var(--border); } [data-theme="dark"] .cl-tag.deadline{ background:var(--orange-bg); color:var(--orange); } [data-theme="dark"] .cl-tag.where{ background:var(--blue-bg); color:var(--blue); } [data-theme="dark"] .radio-opt:has(input:checked){ background:var(--blue-bg); border-color:var(--blue); } /* テンプレ（shugyokisoku / jitsumu）*/ [data-theme="dark"] .tpl-kind{ background:var(--blue-bg); color:var(--blue); } [data-theme="dark"] .notice{ color:var(--green-text); } [data-theme="dark"] .form-card{ background:var(--green-bg); border-color:var(--green-border); } /* search/tools: ai-cta は既に濃紺グラデ（暗色でも可）、btn-white は白のまま可読 */ [data-theme="dark"] .tool-tag{ background:var(--blue-bg)!important; color:var(--blue)!important; } /* 共通の淡色ボックス（inline-helpers の u-ヘルパ・#F8FAFC/#fff/#EFF6FF/緑地） 詳細度を :root[data-theme] 接頭辞で担保（doubled u-selector 0,2,0 を上回る 0,3,0） */ :root[data-theme="dark"] .u1477e5e, :root[data-theme="dark"] .u1c47b16, :root[data-theme="dark"] .u2b9c31d, :root[data-theme="dark"] .u3c8ee03, :root[data-theme="dark"] .u3f4d7ff, :root[data-theme="dark"] .u4bf2659, :root[data-theme="dark"] .u62f0b1c, :root[data-theme="dark"] .uc0cc9c4, :root[data-theme="dark"] .ue62f5c3, :root[data-theme="dark"] .uff7f616, :root[data-theme="dark"] .u1f0266e, :root[data-theme="dark"] .ue79641d{ background:var(--surface); border-color:var(--border); } :root[data-theme="dark"] .uebd24a6{ background:var(--surface); border-top-color:var(--border); } :root[data-theme="dark"] .u1869af3{ background:var(--blue-bg); } :root[data-theme="dark"] .ue308bcb{ background:var(--orange-bg); } :root[data-theme="dark"] .u2c4532b, :root[data-theme="dark"] .u82eb436, :root[data-theme="dark"] .ua55ba90, :root[data-theme="dark"] .u2d2a505, :root[data-theme="dark"] .u8e59c16{ background:var(--green-bg); border-color:var(--green-border); } /* u-ヘルパの濃色テキスト（ハードコード）を暗色で可読に */ :root[data-theme="dark"] .u59bb88f, :root[data-theme="dark"] .uaaaed5a, :root[data-theme="dark"] .ubd05173, :root[data-theme="dark"] .u9c2efac, :root[data-theme="dark"] .ud6fd09f, :root[data-theme="dark"] .u69b3004{ color:var(--text); } :root[data-theme="dark"] .u68de3c9, :root[data-theme="dark"] .u728c42d, :root[data-theme="dark"] .u72dc9ef, :root[data-theme="dark"] .ue822b95, :root[data-theme="dark"] .ubc218a9{ color:var(--text2); } :root[data-theme="dark"] .ubc218a9{ border-top-color:var(--border); } :root[data-theme="dark"] .u471bdb0, :root[data-theme="dark"] .uf0d7c27, :root[data-theme="dark"] .u9038611{ color:var(--text3); } :root[data-theme="dark"] .u2c4532b{ color:var(--green-text); } :root[data-theme="dark"] .u19afbb3{ background:var(--surface); border-color:var(--border2); color:var(--text); } /* 濃インディゴのアイキャッチ見出し（#4F46E5）は暗色で沈むため明るい青へ */ :root[data-theme="dark"] .u6f47219{ color:var(--blue); } /* search/tools は素の