/* ============================================================= smartco-ui.css — smartco 共通UIライブラリ v2（2026-08-06） ------------------------------------------------------------- 管理: 粋（ui-designer）デザイン / 匠（dev-catalog）配置正本: catalog/system-default を基に切り出した「全システム共通の実体」 ■ 使い方（住人エージェント向け） 1. 末尾に1行貼るだけ: 2. に data-mode を付ける: ← または "dark" 3. 自分のシステムのアクセント1色だけ上書きする（下の「アクセント上書き」参照） 4. あとは class を付けるだけで全システム細部まで完全一致: A ■ v2 で変わったこと（dev-rules §1-0 を構造で満たす） ① 文字サイズは6段だけ（--fs-xs 〜 --fs-2xl ＋ --fs-kpi）。中間値を作らない ② 本文の床を 14px → 15px に。表のデータも 13.4px → 15px ③ --text-dim を #9ca3af（2.54:1・不合格）→ #6b7280（4.83:1）へ。 ★名前は変えていないので、使う側は1行も直さずに全システムが直る ④ 文字に使える色は --text / --text-sec / --text-dim の3段だけ。全部AA合格。装飾用の薄い色は --deco / --deco-light に分けた（名前で使い分けられる） ⑤ 文字から opacity を追放（濃さは必ず色で決める） ⑥ 密度は「画面の性格」を1つ宣言して決める（下記 .dense / .field） ■ 鉄則 - このファイルの中身を各システムにコピペしない（で参照する） - 色・余白・角丸・文字サイズを手で書かない（トークンを使う） - font-size に px / rem を直接書かない。6段から選ぶ - 新パターンが要る時は粋に相談（部屋に入れる=承認制 / dev-rules §4-3） ============================================================= */ /* ===== 共通トークン（mode非依存・色固定） ===== */ :root { /* ■ 段階を表す色（2026-08-08 改定）原色の青・黄・赤（フレームワークの初期値）をやめ、藍・オレンジ・弁柄へ。 ★考え方: 色が付いているほど、あなたが動く必要がある。読むだけでよい情報に色を持たせない。3つとも色を付けると、どれも目立たない。 */ --ok: #1e7e5f; /* 合格・稼働中 */ --info: #0e7490; /* 補足藍（シアン寄り。うちのティールと同系統） */ --warn: #b45309; /* 確認中オレンジ（原色の黄色を使わない） */ --err: #a63a30; /* 未解決弁柄寄りの赤 */ --rule: 3px; /* ★注記などの縦罫の太さ。段ごとに変えない（段階は色だけで出す） */ /* ■ 文字サイズ（6段＋数字用）。これ以外の値は使わない */ --fs-xs: 13px; /* 最小。バッジ・チップ・単位。これ以下は存在しない */ --fs-sm: 14px; /* 補助情報の下限（品番・日時・件数・出典・ラベル） */ --fs-md: 15px; /* 本文・データ本体（既定） */ --fs-lg: 17px; /* カードタイトル・小見出し */ --fs-xl: 20px; /* セクション見出し・ページタイトル */ --fs-2xl: 26px; /* 画面名・大見出し */ --fs-kpi: 30px; /* 読ませる数字 */ /* ■ 角丸（ここ3個で全システムの角の硬さが決まる） 2026-08-08 更新: 2px は「カクッ」でなく「切りっぱなし」に見えたため、角を少しだけ取った。丸ピル(999px)や6pxのチップには戻さない。 ★面が大きいものほど少しだけ角を取る（モーダル6px > 中のボタン4px）。 */ --r: 4px; /* 入力フィールド */ --rb: 4px; /* ボタン・バッジ・タブ・ナビ */ --rl: 6px; /* カード・モーダル・囲み */ --tr: .15s ease; } /* ============================================================= ■ 画面の「呼吸」を1つ宣言する（dev-rules §1-0）個別に font-size を書くのではなく、外側のコンテナに class を1つ付ける。これで中の文字が全部まとめて1段動く。宣言＝記録になる（grepで一覧できる）。

…

密度優先：一覧・監視ボード・帳票・突合表（既定）標準：ほとんどの業務画面

…

現場優先：クリニック受付・店舗レジ・工場 ★ .dense でも 13px は割らない。12px以下は smartco には存在しない。 ★ 色（濃さ）は3段階のどれでも変わらない。薄さは交渉の対象ではない。 ============================================================= */ .dense { --fs-xs:13px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px; --fs-kpi:26px; } .field { --fs-xs:14px; --fs-sm:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-kpi:36px; } /* ============================================================= ■ 角の丸みも1つ宣言する（2026-08-08 水谷さん指示・3段階）文字の呼吸（dense / 既定 / field）と同じ形。個別に border-radius を書かない。ほんのちょっと削った密度高・監査系・帳票（既定・無指定 = round-2）ちょうど削ったほとんどの画面もう少し削った対外・見せる画面 ★2px は「カクッ」ではなく「切りっぱなし」に見えるので、既定にも段階にも入れない。 ★丸ピル（border-radius:999px）は全廃。どの段階でも使わない。 ★面が大きいものほど少しだけ角を取る（カード＞中のボタン）。この関係を崩さない。 ============================================================= */ .round-1 { --r:3px; --rb:3px; --rl:4px; } .round-2 { --r:4px; --rb:4px; --rl:6px; } /* = 既定。明示して書いてもよい */ .round-3 { --r:6px; --rb:6px; --rl:10px; } /* ===== Light Mode ===== */ html[data-mode="light"] { --bg: #ffffff; --bg-elev: #fafbfc; --surface: #ffffff; --surface-dim: #f3f4f6; --surface-hi: #e9ebef; --border: #d1d5db; --border-light: #e5e7eb; /* ▼ 文字に使える色（全部AA合格。これ以外を文字に使わない） */ --text: #111827; /* 17.7:1 */ --text-sec: #4b5563; /* 7.56:1 */ --text-dim: #6b7280; /* 4.83:1 ← これが一番薄い。これ以下は無い */ /* ▼ 装飾専用（罫線・ノブ・区切り。文字に使うと違反） */ --deco: #d1d5db; --deco-light: #e5e7eb; /* アクセント初期 = 深ネイビー（各システムが上書きする） */ --primary: #2d4a5c; --primary-soft: #eef2f5; --primary-dim: #eef2f5; --primary-hover: #1e3240; --primary-text: #ffffff; --accent: #2d4a5c; --accent-dim: #eef2f5; /* 面を敷くのはバッジ等の小さいものだけ。注記には敷かない（下の .note 参照） */ --ok-bg: #e8f5ee; --info-bg: #edf6f8; --warn-bg: #fdf3e8; --err-bg: #faf1ef; --sh: none; --sh2: 0 2px 8px rgba(0,0,0,.06); --modal-bg: rgba(0,0,0,.4); --table-row-hover: #fafbfc; } /* ===== Dark Mode ===== */ html[data-mode="dark"] { --bg: #0e0e10; --bg-elev: #131316; --surface: #17171b; --surface-dim: #1f1f24; --surface-hi: #25252b; --border: #2c2c34; --border-light: #232329; --text: #ececf0; --text-sec: #a8a8b3; /* 8.19:1 */ --text-dim: #8a8a94; /* 5.65:1（旧 #6b6b75 は 3.66:1 で不合格だった） */ --deco: #3a3a44; --deco-light: #2c2c34; /* アクセント初期 = Honey Glow（各システムが上書きする） */ --primary: #d4943a; --primary-soft: #ecc88e; --primary-dim: rgba(212,148,58,.14); --primary-hover: #c08529; --primary-text: #1a1004; --accent: #d4943a; --accent-dim: rgba(212,148,58,.14); --ok-bg: rgba(52,211,153,.12); --warn-bg: rgba(251,191,36,.12); --err-bg: rgba(248,113,113,.12); --info-bg: rgba(96,165,250,.12); /* ダークでは段階の色も明るく（色相は light と同じ＝藍・オレンジ・弁柄） */ --ok: #34d399; --info: #3ec8db; --warn: #eda45c; --err: #ef8377; --sh: 0 4px 16px rgba(0,0,0,.4); --sh2: 0 8px 28px rgba(0,0,0,.55); --modal-bg: rgba(0,0,0,.7); --table-row-hover: #1f1f24; } /* ============================================================= ■ アクセント上書きの書き方（各システムが自分のCSSでやる）システム別アクセント1色だけ変える。構造・余白・角丸・文字は触らない。 ------------------------------------------------------------- ============================================================= */ /* ===== リセット・ベース ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Hiragino Sans', 'Noto Sans JP', sans-serif; background: var(--bg); color: var(--text); font-size: var(--fs-md); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::placeholder { color: var(--text-dim); } a { color: var(--accent); } /* ===== レイアウト ===== */ .app { display: flex; flex-direction: column; min-height: 100vh; } .main-area { display: flex; flex: 1; overflow: hidden; } /* ===== ヘッダー ===== */ .header { height: 54px; background: var(--primary); display: flex; align-items: center; padding: 0 20px; gap: 16px; flex-shrink: 0; transition: background var(--tr); border-bottom: 1px solid rgba(0,0,0,.12); } .header .logo-area { display: flex; align-items: center; gap: 8px; color: var(--primary-text); } .header .logo-area .ic { color: var(--primary-text); } .header .logo-area h1 { font-size: var(--fs-lg); font-weight: 800; color: var(--primary-text); white-space: nowrap; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-text); display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:.75} 50%{opacity:.25} } /* 印であって文字ではない */ .user-badge { font-size: var(--fs-sm); color: var(--primary-text); font-weight: 600; } .btn-logout { font-size: var(--fs-xs); color: var(--primary-text); padding: 6px 11px; border-radius: var(--rb); border: 1px solid; border-color: rgba(255,255,255,.35); font-weight: 700; } html[data-mode="dark"] .btn-logout { border-color: rgba(17,17,13,.35); } .btn-logout:hover { background: rgba(255,255,255,.14); } html[data-mode="dark"] .btn-logout:hover { background: rgba(17,17,13,.14); } /* ===== ライト/ダーク切替トグル ===== */ .mode-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: var(--rb); padding: 3px; gap: 2px; } html[data-mode="dark"] .mode-toggle { background: rgba(17,17,13,.25); border-color: rgba(17,17,13,.35); } .mode-toggle button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--rb); font-size: var(--fs-xs); font-weight: 700; color: var(--primary-text); /* ★opacity で薄くしない。選択中は下の背景で示す */ transition: background var(--tr); white-space: nowrap; } .mode-toggle button:hover { background: rgba(255,255,255,.14); } .mode-toggle button.active { background: rgba(255,255,255,.95); color: var(--primary); } html[data-mode="dark"] .mode-toggle button.active { background: rgba(17,17,13,.85); color: var(--primary); } .mode-toggle .ic { width: 13px; height: 13px; } /* ===== サイドナビ ===== */ .side-nav { width: 208px; background: var(--bg-elev); border-right: 1px solid var(--border); padding: 12px 8px; flex-shrink: 0; overflow-y: auto; } .nav-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-sec); letter-spacing: .06em; padding: 10px 12px 4px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--rb); font-size: var(--fs-md); color: var(--text-sec); cursor: pointer; transition: all var(--tr); border-left: 3px solid transparent; } .nav-item:hover { background: var(--surface-dim); color: var(--text); } .nav-item.active { background: var(--primary-dim); color: var(--primary); font-weight: 700; border-left-color: var(--primary); } .nav-item .ic { width: 17px; height: 17px; } .nav-item .cnt { margin-left: auto; font-size: var(--fs-xs); background: var(--surface-dim); padding: 1px 7px; border-radius: var(--rb); color: var(--text-sec); font-weight: 700; } .nav-item.active .cnt { background: var(--primary); color: var(--primary-text); } /* ===== コンテンツ・見出し ===== */ .content { flex: 1; overflow-y: auto; padding: 24px 28px; max-width: 1200px; } .page-title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--text); } .page-title .badge { font-size: var(--fs-xs); background: var(--accent-dim); color: var(--accent); padding: 3px 10px; border-radius: var(--rb); font-weight: 700; } .page-title .ic { width: 22px; height: 22px; color: var(--primary); } .section-h { font-size: var(--fs-lg); font-weight: 700; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); color: var(--text); } /* ===== カード ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 20px; margin-bottom: 16px; } .card-title { font-size: var(--fs-lg); font-weight: 700; margin: -20px -20px 14px; padding: 11px 16px; display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border-bottom: 1px solid var(--border-light); border-radius: var(--rl) var(--rl) 0 0; color: var(--text); } .card-title .ic { width: 17px; height: 17px; color: var(--primary); } /* ===== ボタン（正本：写経のズレを撲滅する基準） ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--rb); font-size: var(--fs-sm); font-weight: 700; transition: all var(--tr); border: 1px solid transparent; } .btn .ic { width: 16px; height: 16px; stroke: currentColor !important; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* 状態であって、重要度の表現ではない */ .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: brightness(1.05); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-dim); border-color: var(--text-sec); } .btn-success { background: var(--ok); color: #fff; border-color: var(--ok); } html[data-mode="dark"] .btn-success { color: #08120c; } .btn-success:hover { filter: brightness(1.08); } .btn-danger { background: var(--err); color: #fff; border-color: var(--err); } html[data-mode="dark"] .btn-danger { color: #1a0808; } .btn-danger:hover { filter: brightness(1.08); } .btn-ghost-danger { background: var(--err-bg); color: var(--err); border-color: var(--err); } .btn-ghost-danger:hover { background: var(--err); color: #fff; } html[data-mode="dark"] .btn-ghost-danger:hover { color: #1a0808; } .btn-sm { padding: 6px 13px; font-size: var(--fs-xs); } .btn-lg { padding: 14px 28px; font-size: var(--fs-lg); } .btn-icon { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--rb); color: var(--text-sec); border: 1px solid var(--border); background: var(--surface); } .btn-icon:hover { background: var(--surface-dim); color: var(--text); border-color: var(--text-sec); } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } /* ===== フォーム ===== */ .form-row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end; flex-wrap: wrap; } .form-group { display: flex; flex-direction: column; gap: 4px; } .form-group.flex1 { flex: 1; min-width: 0; } .form-group label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-sec); } .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--border); border-radius: var(--r); padding: 8px 10px; font-size: var(--fs-md); background: var(--bg-elev); color: var(--text); transition: all var(--tr); } html[data-mode="light"] .form-group input, html[data-mode="light"] .form-group select, html[data-mode="light"] .form-group textarea { background: var(--surface); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); } .form-group textarea { resize: vertical; min-height: 60px; } /* ===== トグルスイッチ ===== */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .slider { position: absolute; inset: 0; background: var(--surface-hi); border: 1px solid var(--border); border-radius: 999px; transition: var(--tr); } .toggle .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: var(--deco); border-radius: 50%; transition: var(--tr); } .toggle input:checked + .slider { background: var(--primary-dim); border-color: var(--primary); } .toggle input:checked + .slider::before { transform: translateX(20px); background: var(--primary); } /* ===== テーブル ===== */ .tbl-wrap { overflow-x: auto; padding-right: 2px; } .tbl-wrap table { min-width: 600px; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } th { background: var(--bg-elev); font-weight: 700; text-align: left; padding: 10px 12px; border: 1px solid var(--border); color: var(--text); white-space: nowrap; font-size: var(--fs-sm); letter-spacing: .02em; } td { padding: 10px 12px; border: 1px solid var(--border-light); background: var(--surface); } tr:hover td { background: var(--table-row-hover); } .cat-header { background: var(--primary-dim); font-weight: 700; color: var(--primary); } .cat-header td { padding: 7px 10px; font-size: var(--fs-sm); background: transparent; border-color: var(--border); } .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pos { color: var(--ok); } .neg { color: var(--err); } /* ===== 合計エリア ===== */ .totals-area { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 20px; margin-top: 16px; } .totals-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--fs-md); } .totals-row .label { color: var(--text-sec); } .totals-row.grand { font-size: var(--fs-xl); font-weight: 700; border-top: 2px solid var(--border); padding-top: 8px; margin-top: 4px; color: var(--primary); } /* ===== 数字を読ませる（KPI） ===== */ .kpi { border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 18px; background: var(--surface); } .kpi .kl { font-size: var(--fs-sm); color: var(--text-sec); font-weight: 600; } .kpi .kn { font-size: var(--fs-kpi); font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .kpi .ku { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; margin-left: 4px; } .kpi .kd { font-size: var(--fs-sm); margin-top: 2px; } .kpi .kd.up { color: var(--ok); } .kpi .kd.down { color: var(--err); } /* ===== ステータスバッジ ===== */ .status-badge { display: inline-block; padding: 3px 10px; border-radius: var(--rb); font-size: var(--fs-xs); font-weight: 700; } .status-draft { background: var(--surface-hi); color: var(--text-sec); } .status-sent { background: var(--info-bg); color: var(--info); } .status-accepted { background: var(--ok-bg); color: var(--ok); } .status-overdue { background: var(--err-bg); color: var(--err); } .status-paid { background: var(--warn-bg); color: var(--warn); } /* ===== ON/OFFステータスピル（v2でカクッに統一） ===== */ .st { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--rb); } .st-on { background: var(--ok-bg); color: var(--ok); } .st-off { background: var(--surface-hi); color: var(--text-sec); } /* ===== チップ（v2 新規・現場が4つの別名で作り直していたものを1つに） ===== */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--rb); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-dim); color: var(--text-sec); border: 1px solid var(--border-light); } .chip.on { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); } /* ===== キー・バリュー行（v2 新規） ===== */ .kv { border-top: 1px solid var(--border-light); } .kv .kvrow { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-light); } .kv .k { flex: 0 0 116px; font-size: var(--fs-sm); color: var(--text-sec); font-weight: 600; } .kv .v { flex: 1; font-size: var(--fs-md); min-width: 0; } .kv .v .u { font-size: var(--fs-sm); color: var(--text-dim); margin-left: 3px; } /* ============================================================= 注記 3段（補足／確認中／未解決）★2026-08-08 改定 ------------------------------------------------------------- ・色の面（ベタ塗り）を敷かない。縦罫とラベルの色だけで段階を出す → 面を3つ敷くと虹に見え、フレームワークの初期値そのものの顔になる・★線の太さは3段とも同じ（--rule）。太さと色の両方で段階を出さない（同じことを2回言うことになり、うるさく見える）・囲みが無いので本文に混ぜても文章の流れが切れない ============================================================= */ .note { border-left: var(--rule) solid var(--info); padding: 3px 0 3px 14px; font-size: var(--fs-md); color: var(--text); margin: 14px 0; } .note.warn { border-left-color: var(--warn); } .note.err { border-left-color: var(--err); } .note .nh { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; color: var(--info); margin-bottom: 1px; } .note.warn .nh { color: var(--warn); } .note.err .nh { color: var(--err); } /* ===== 出典（v2 新規・数字を出したら隣に出所を書く） ===== */ .src { font-size: var(--fs-sm); color: var(--text-dim); display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; } .src::before { content: "出典"; flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 800; color: var(--text-sec); background: var(--surface-dim); padding: 1px 7px; border-radius: var(--rb); border: 1px solid var(--border-light); line-height: 1.6; } /* ===== 中身が無いとき（v2 新規） ===== */ .empty-state { border: 1px dashed var(--border); border-radius: var(--rl); padding: 28px 20px; text-align: center; color: var(--text-sec); font-size: var(--fs-md); background: var(--bg-elev); } .empty-state .es { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin-top: 4px; } /* ===== タブ（v2 新規） ===== */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; } .tabs button { padding: 9px 16px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-sec); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--tr); } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); } /* ============================================================= ABCD連番カラーバッジ（旧 .method-tag を汎用標準化）使い方: A 後方互換: .method-tag も同義エイリアスとして残す。 ============================================================= */ .badge-letter, .method-tag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--rb); font-weight: 800; font-size: var(--fs-xs); color: #fff; flex-shrink: 0; } .m-A { background: #6da4b5; color: #061318; } /* ウォーターブルー */ .m-B { background: #8b8bdb; } /* インディゴ */ .m-C { background: #5fb09a; color: #04140f; } /* ティールグリーン */ .m-D { background: #d99a5c; color: #1a0f02; } /* アンバー */ .m-E { background: #c47fb5; color: #200818; } /* ピンクパープル */ .m-F { background: #7f9ac4; color: #050d18; } /* スティールブルー */ /* ===== 環境切替（LIVE/PRACTICE等の2値トグル群） ===== */ .env-switch { display: inline-flex; gap: 4px; background: var(--surface-dim); padding: 4px; border-radius: var(--rl); margin-bottom: 16px; } .env-switch button { padding: 8px 24px; border-radius: var(--rb); font-size: var(--fs-sm); font-weight: 800; color: var(--text-sec); transition: all var(--tr); } .env-switch button.active[data-env="live"] { background: var(--err); color: #fff; } html[data-mode="dark"] .env-switch button.active[data-env="live"] { color: #1a0808; } .env-switch button.active[data-env="practice"] { background: var(--primary); color: var(--primary-text); } .env-badge { font-size: var(--fs-xs); font-weight: 800; padding: 3px 11px; border-radius: var(--rb); letter-spacing: .03em; } .env-badge-live { background: var(--err); color: #fff; } html[data-mode="dark"] .env-badge-live { color: #1a0808; } .env-badge-practice { background: var(--primary); color: var(--primary-text); } /* ===== モーダル ===== */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-bg); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; } .modal-overlay.show { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh2); } .modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); } .modal-head h3 { font-size: var(--fs-lg); font-weight: 700; } .modal-body { padding: 20px; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg-elev); } /* ===== トースト ===== */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface-hi); color: var(--text); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--r); font-size: var(--fs-md); box-shadow: var(--sh2); z-index: 9999; transform: translateY(100px); opacity: 0; transition: all .3s ease; display: flex; align-items: center; gap: 12px; } html[data-mode="light"] .toast { background: #1e293b; color: #fff; border-color: #1e293b; } .toast.show { transform: translateY(0); opacity: 1; } .toast.success { border-color: var(--ok); } .toast.success .ic { color: var(--ok); } /* ===== Lucide アイコン ===== */ .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: inline-block; vertical-align: -3px; } .ic-lg { width: 20px; height: 20px; vertical-align: -4px; } /* ===== レスポンシブ ===== */ @media (max-width: 767px) { .side-nav { display: none; } .content { padding: 16px; } .header { padding: 0 14px; } }