:root { /* Brand */ --ies-jade: #00A86B; --ies-jade-dark: #00794E; /* ★★K-1219（2026-08-30）: 主要ボタンの hover 用。★★**新設した理由 = 基準が数で決まったから。** ★旧実装は「地 = jade(#00A86B) ／ hover = jade-dark(#00794E)」だったが、 ★★**jade の上の白文字は 3.08:1 で 4.5:1 を満たしていなかった**（★実測・ブラウザ）。 ★→ 地を jade-dark（**5.46:1**）へ下げたので、hover はさらに 1 段濃い色が要る。 ★★**白文字 × #006843 = 6.86:1**（★実測）。 */ --ies-jade-hover: #006843; --ies-jade-soft: #E6F5EE; --ies-jade-light: #3EC580; /* K-277: 明緑/強調 (旧 #3ec580 系) */ /* ★★K-1187（2026-08-28）: 期間予定の帯の文字色。★★**暗いテーマでも変えない。** ★理由 = 帯の地（--period-color）は **カテゴリ色 ＝ テーマで変わらない固定色**だから。 ★文字だけテーマで反転させると、暗いテーマで「明るい緑に明るい文字」になって破綻する。 ★★**だから下のダークのブロックにこの名前を書かないこと。**★書いた瞬間に壊れる。 ★実測 = 地 #3EC580 に対して 比 7.85（★白だと 2.21 で AA の 4.5 に届かない）。 */ --nb-period-ink: #1A1A1E; --ies-coral: #FF6B4A; --ies-coral-dark: #E8553A; /* K-282: coral 濃色 (danger ボタン hover 等。旧 #e8553a/#e55a3a 統一) */ --ies-coral-soft: #FFE8E1; /* ★★2026-08-23: コーラルの塗りの **上に載る文字色**（★K-1129 の未読バッジで要った）。 ★★**明るい配色でも暗い配色でも白のまま**——★下の [data-theme="dark"] でも同じ値を置く。 ★★**なぜ専用のトークンが要るか** = ★`--ies-surface` は暗い配色で**暗色に反転する**ので、 ★コーラルの上に置くと**読めなくなる**。★かといって `#fff` を直に書くと ★★commit の門（生 hex の禁止）に止まる——★★実際に止まった（★迂回せずここを作った）。 ★★**塗りが変わっても文字が付いてくる**ように、名前は「何の上か」で付けている。 ★★注意 = 白 × コーラルの明暗比は **約 2.8 : 1** で、★読みやすさの目安（4.5 : 1）に届いていない （★未決 [321]）。★既存の `.ies-sidebar__unread` と同じ値。★直すなら 2 か所同時。 */ --ies-on-coral: #FFFFFF; /* ★★★2026-09-06: **「決まった行」の面**（★問い合わせ管理の契約済み）。★★K-651 が「役割トークン化予定」と 書いていたものを、★表の器（`nb-tbl`）が要ったのでここで果たす（★旧 = `pages/inquiries.css` の生 hex 2 色）。 ★★**相澤さんのご決定（2026-09-06・逐語）** =「**これはピンクのままでいいです**」。 ★★**K-1229「意味の色は緑とコーラルの 2 色相だけ」の唯一の例外。★名指しで残す。** ★緑は「いま選んでいる行」が使用中で衝突する。★コーラルは「手が要る」側なので意味が逆になる。 ★明るい配色の明暗比 = 文字 #1C1C1C 対 この地で **14.66 : 1**（★計算値）。 */ --ies-settled: #FCE7F3; /* K-277: 二次アクセント青 (リンク/audienceチップ/checked)。--ies-info(#2F7CE0)とは別系統で両立。 真実源 = docs/architecture/color-tokens.md。旧 #0017c1/#3460fb/#c5d7fb/#7db9d8 系を集約。 */ --ies-blue: #0017C1; --ies-blue-soft: #C5D7FB; /* Surface */ /* ★★★2026-09-04（K-1460・相澤さんのご指摘「WEB ページっぽくて 10 年以上前の UI」）: * ★★**`#FAFAFA` → `#F2F2F2`。★地を一段沈めた。**★★これが全画面に効く 1 手である。 * * ★★**直した理由（★実測）** = ★地 `#FAFAFA` と面 `#FFFFFF` の差が **1.02 倍**しかなかった。 * ★★**＝ ほぼ同じ色なので、★境目を *全部 1px の線で描く* しかなかった**（★実測 = 枠線 150 か所）。 * ★★**線で区切るのが 2013 年、★面と地の差で分けるのが今。**★ほぼそれだけの差である。 * * ★★★**さらに、順序が逆転していた**: ★旧 `#FAFAFA`（98.0%）は * ★★**副地 `#F4F4F4`（95.7%）より *明るかった*。**★★＝ ページの地がいちばん明るく、 * ★★**白い面が浮きようがなかった。**★★いまは 地 `#F2F2F2` < 副地 `#F4F4F4` < 面 `#FFFFFF` で単調。 * * ★先例 = **Windows 11 の設定** = 地 `#F3F3F3` / カード `#FBFBFB`（★カードに枠線が無い）。 * ★★**中立を保った**（★K-278 の「暖み除去」の判断を覆さない）。 * * ★★**暗い配色は 1 バイトも触っていない**（★元から 地 `#16161a` / 面 `#1e1e22` で差が付いている）。 * ★★**戻し方 = この 1 行を `#FAFAFA` に戻す。**★他に何も要らない。 * * ★★**測っていないこと** = ★実物の画面を 1 度も見ていない（★Local はログインできない）。 * ★機械で見たのは **文字の読みやすさ**だけ（★`nb-test-visual-static` / `nb-test-soft-ground`）。 * ★★**「きれいになった」とは書けない。★本番へ出して見ていただく必要がある。** */ --ies-bg: #F2F2F2; /* ★2026-09-04 K-1460（旧 #FAFAFA ← K-278 で旧 #FAFAF7 から暖み除去） */ --ies-surface: #FFFFFF; /* ★★★2026-09-05（相澤さんのご報告「★地の色に近い色の帯などとつながって見える」→ ご決定「動かす」）: * ★★**`#F4F4F4` → `#F8F8F8`。★副地だけを動かした。★地（`--ies-bg`）は 1 バイトも触っていない。** * * ★★**動かす前（★丸めない比）**: ★地 #F2F2F2 → 副地 #F4F4F4 = **1.0178**（★床 1.06 の 1/3）。 * ★★＝ 副地で塗った帯を *地の上* に置くと消える。★相澤さんが見られた現象そのもの。 * ★★**動かした後**: ★地 → 副地 = **1.0541**（★3.0 倍）／ 副地 → 面 #FFFFFF = **1.0620**。 * * ★★★**床 1.06 には *原理的に* 届かない。★これは値の選び方の問題ではない** * （★区間で示した。★総当たりの標本ではない）: * ・★地 #F2F2F2 と 面 #FFFFFF の **総量は 1.1195** しかない。 * ・★両側で 1.06 を満たすには **1.06 × 1.06 = 1.1236** 要る。★**0.0041 足りない。** * ・★あいだに置く解の区間 = [0.994199, 0.990566] ＝ **空**（★どんな色でも不可能）。 * ・★地より *暗い* 側へ出す手も塞がっている ——★そこまで暗くすると * ★★`--ies-border-strong`(#8C8C8C) が枠の床 3.0 を割る（★区間 [0.936752, 0.884833] ＝ 空）。 * ★★**＝ この値は「床を満たす値」ではなく、★*弱いほうの段を最大にする* 値**である（★max-min）。 * ★#F7F7F7 は 1.0450 ／ #F9F9F9 は 1.0633 だが**面の側が 1.0528 へ落ちる**。★#F8F8F8 が均衡点。 * * ★★**引き換えに悪くなったもの（★隠さない）**: ★副地 → 面 が **1.0999 → 1.0620**。 * ★白い面の上の撫でた色（表の行・メニュー・パンくず）が **11/255 → 7/255** に薄まる。★床は越えている。 * * ★★★**もう 1 つの物差し（★この repo が既に持っているほう）で測り直した** —— * ★`header-shared.css` の注記 =「★#F2F2F2 × #FFFFFF の **dE 4.51** ＝ 人が『面が違う』と読める既知の差」。 * ★★**私の式はその 4.51 をぴたりと再現した**（★陽性対照。★同色は 0.00 ＝ 陰性対照）。 * ・★明るい配色 いま … 地→副地 **0.70** ／ 副地→面 3.81（★弱いほうが読める差の **15%**） * ・★明るい配色 あと … 地→副地 **2.09** ／ 副地→面 2.42（★弱いほうが **46%**） * ・★暗い配色（★動かしていない）… 2.19 ／ 2.11（★弱いほうが **47%**） * ★★**＝ この 1 手で、明るい配色の釣り合いが *暗い配色と同じ形* になる。** * ★★★**それでも「読める差」には届いていない（★46%）。★これは値の選び方では埋まらない**: * ★3 段すべてを 4.51 にするには総量 **9.02** 要るが、★明るい配色の総量は **4.51（50%）**、 * ★暗い配色は **4.02（45%）** しかない。★総量 9.02 を作るには地を **#E5E5E5**（★13 段暗く）まで * 沈める必要があり、★そこでは文字も枠も床を割る。 * ★★**＝ 本当の選択は「中立の段を 3 つ持つのをやめる」かどうかである**（★相澤さんの判断）。 * ★★**良くなったもの**: ★副地の上の文字と枠が全部上がった * （★薄文字 4.75→**4.92** ／ 副文字 6.08→**6.30** ／ 緑の字 4.97→**5.14** ／ 枠 3.06→**3.17**）。 * * ★★**暗い配色は動かしていない**（★下の `[data-theme="dark"]`）。★理由 = ★総量が **1.0861** しかなく、 * ★あいだに置いた最良（等分）が **1.0422**。★いまの #1a1a1f は **1.0410 / 1.0434** ＝ * ★★**すでに最良から 0.001 の位置に在る。★動かしても得るものが無い。** * ★★**戻し方 = この 1 行を `#F4F4F4` に戻す**（★ただし下の「同時に直すもの」も一緒に戻すこと）。 * ★★**同時に直さないと静かに食い違うもの**（★門が止める）: * ・`assets/css/sidebar-shared.css` の同名の 1 行（★教室サイトでは**唯一のトークン定義元**） * ・★**控え付きの参照で「旧値を控えに書いている」行 22 か所**（★5 枚の CSS）。 * ★★**別名も同じ値へ解決される**ので一緒に動く（`--ies-bg-soft` / `--ies-bg-mute` / * `--ies-bg-hover` / `--ies-surface-hover` の 4 つ。★このファイルの下のほうで定義している）。 * ★★**ここに旧値と控えの形をそのまま書かないこと** ——★注記の中の 1 行が * `nb-test-token-fallback` に *実物の参照* として数えられる（★私はこの便で実際に踏んだ）。 * ★★**測っていないこと** = ★実物の画面を 1 度も見ていない。★機械で見たのは比だけ。 */ --ies-surface-alt: #F8F8F8; /* ★2026-09-05（旧 #F4F4F4 ← K-278 で旧 #F3F3EE から暖み除去） */ --ies-surface-tint: #E8F1FE; /* K-277: 淡青 情報地 (旧 #e8f1fe/#f1f5fd) */ --ies-border: #E3E3E3; /* K-278: 暖み除去 neutral 化 (旧 #E4E4DD) */ /* ★★★2026-08-30（K-1230・機械の実測）: #C8C8C8 → **#949494**。 * ★★**なぜ** = ★★**この枠は「見える」ことが仕事なのに、白地に対して 1.67:1 しか無かった。** * ★WCAG 1.4.11（非文字コントラスト）は、★**部品の輪郭に 3:1** を求める。 * ★入力欄・プルダウン・複数行の枠は**これで描かれている** ＝ ★★**欄の境目が見えていなかった。** * ★実測（★別プロセスがブラウザで計算）= 明 **191 辺** ／ 暗 **211 辺**が 3:1 未達。 * ★★**値の決め方は K-1219 と同じ**——★色相と彩度をそのままに、明度だけ下げて * ★**3:1 を最初に満たした値**を機械に選ばせた（★#949494 = **3.03:1**）。 * ★★**名前どおりになった**——★「strong（強い）」と名乗りながら 1.67 だったのが誤りだった。 * ★★**影響 = 19 か所**（★入力欄・パンくずの区切り・仕切り線ほか）。★どれも「見えるべき線」である。 */ --ies-border-strong: #8C8C8C; /* ★2026-08-30 追記: #949494 は白地では 3.03 だが、★地(#FAFAFA)で 2.91・副地(#F4F4F4)で 2.76 と落ちた。★★この枠は 3 つの面すべての上に載るので、★**全部で 3:1 を満たす値**を選び直した（白 3.36 ／ 地 3.22 ／ 副地 3.06）。 */ --ies-black: #000000; /* K-277: 純黒 (影以外。旧 #000000/black) */ /* Text */ --ies-text: #1C1C1C; /* K-278: 暖み除去 neutral 化 (旧 #1C1C1A) */ --ies-text-sub: #5C5C5C; /* K-278: 暖み除去 neutral 化 (旧 #5C5C56) */ /* K-936 (2026-08-17): #8A8A8A→#6B7280。白地で3.45:1(未達)→4.83:1(達成)。 本体層 --cl-muted と同値へ統一(層のズレ解消・決定4)。★ies-text-sub(#5C5C5C)より明るいままなので sub>mute の階層は維持。★surface-alt(#F4F4F4)地では4.40:1に留まり僅かに未達(報告に明記)。 */ /* ★★★2026-09-04（K-1460）: `#6B7280` → `#636D7E`。★★**K-936 が「僅かに未達」と *報告に明記して * 通していた穴* を、★ここで閉じた。** * * ★★**閉じる必要が出た理由** = ★同じ便で地を `#FAFAFA` → `#F2F2F2` に沈めた。 * ★★**＝ K-936 が「副地でだけ 4.40:1」と書いていた状態が、★*主役の地* に来てしまう。** * ★★門（`nb-test-visual-static`）が **新規 5 件**として実際に止めた（★schedule.css の 5 か所）。 * ★★**押し通していない。★色のほうを直した。** * * ★★**実測（★4.5:1 の床に対して）**: * ・地 `#F2F2F2` 上 … 4.32 → ★**4.66** * ・副地 `#F4F4F4` 上 … 4.40（★K-936 の既知の未達） → ★**4.71** * ・白 `#FFFFFF` 上 … 4.83 → ★**5.22** * ★★**＝ 3 つの面すべてで床を越える。★K-936 の宿題もここで終わる。** * * ★★**階層は保っている** ——★`--ies-text-sub` (#5C5C5C) より **明るいまま**（sub > mute）。 * ★Tailwind の gray-600 (#4B5563) は sub より暗くなり階層が反転するので採らなかった。 * ★★**暗い配色は触っていない**（★`[data-theme="dark"]` 側の `#868681` はそのまま）。 */ --ies-text-mute: #636D7E; /* State */ --ies-info: #2F7CE0; --ies-warn: #D97706; --ies-warn-soft: #FEF3C7; /* K-277: 警告 soft 地 (旧 #fcd34d/#fde68a/#fef3c7 系) */ --ies-danger: #DC2626; /* K-277: 危険の正値 (#c0392b 等はこれへ統一) */ --ies-danger-soft: #FEE2E2; /* K-277: 危険 soft 地 (旧 #fee2e2/#fef2f2/#fdeeee) */ /* ★★K-1219（2026-08-30）: soft 地の**上に載せる文字**の色と、その hover 地。 ★★**なぜ `--ies-danger`（#DC2626）を使わないか** = ★soft 地の上で **3.95:1** しかなく、 ★4.5:1 を満たさない（★実測・ブラウザ）。★#B91C1C なら **5.30:1**。 ★★**hover 地は「4.5:1 を保てる範囲でいちばん濃い値」を機械に選ばせた** = #FBD0D0（**4.63:1**）。 ★1 段濃い #FACACA は 4.43:1 で**落ちる**（★目では見分けられない差）。 */ --ies-danger-ink: #B91C1C; --ies-danger-soft-hover: #FBD0D0; /* ★★★2026-08-30（K-1228・部品の完遂）: 淡い地の **上に載せる文字**の色を 3 つ足した。 * ★★**なぜ要るか（★機械で出した数）**: ★共通部品のバッジ・アイコンの器・告知は * 「淡い地 ＋ 濃い文字」で作る。★ところが既存の色をそのまま載せると、 * ★★**明るい配色で 3 組とも 4.5:1 に届かない**: * ・`--ies-coral-dark`(#E8553A) × `--ies-coral-soft`(#FFE8E1) = **3.09:1** * ・`--ies-warn`(#D97706) × `--ies-warn-soft`(#FEF3C7) = **2.86:1** * ・`--ies-info`(#2F7CE0) × `--ies-surface-tint`(#E8F1FE) = **3.63:1** * ★★**値の決め方は K-1219 とまったく同じ**——★色相と彩度をそのままに、 * ★**明度だけを下げて 4.5:1 を最初に満たした値**を機械に選ばせた（★好みで選んでいない）。 * ・`#BA442E` … 淡地 **4.52:1** ／ 白地 5.31:1 * ・`#A75C05` … 淡地 **4.52:1** ／ 白地 5.03:1 * ・`#296DC5` … 淡地 **4.51:1** ／ 白地 5.14:1 * ★★**暗い配色では既存の色がそのまま通るので、新しい色を 1 つも作っていない** * （★4.67 / 6.72 / 5.62。★下の [data-theme="dark"] を見よ）。 * ★★**名前の付け方は「何の上に載るか」**（★`--ies-on-coral` と同じ考え）。 * * ★★★2026-08-30 訂正（K-1229・相澤さんのご決定）: **琥珀と青の `-ink` は作らなかった。** * ★★**意味の色は緑とコーラルの 2 色相だけ**にしたので、★琥珀と青は部品から外れた。 * ★★**使わない色の「読める濃さ」を先に作らない**（★作ると、次に誰かが使ってしまう）。 * ★★**値は記録として残す**（★もし将来また要るなら、この 2 行を復活させればよい）: * ・琥珀の淡地の上 = `#A75C05`（★4.52:1）／ 暗い配色は `#e0a030`（★6.72:1） * ・青の淡地の上 = `#296DC5`（★4.51:1）／ 暗い配色は `#4d9bf0`（★5.62:1） * ★決定 = `docs/decisions.md` の **K-1229**。 * * ★★★2026-09-03 訂正（K-1409）: **上の「琥珀と青は部品から外れた」という前提が、実測で崩れた。** * ★★K-1229 が `-ink` を作らなかった理由は「**使わない色**の読める濃さを先に作らない」だった。 * ★★**ところが画面側の CSS は、琥珀と青の淡い地を実際に使い続けていた**（★下は 2026-09-03 の実測・ * `tools/nb-test-soft-ground.php`）: * ・`--ies-warn`(#D97706) × `--ies-warn-soft`(#FEF3C7) = **2.86:1** … **11 か所** * ・`--ies-info`(#2F7CE0) × `--ies-surface-tint`(#E8F1FE) = **3.63:1** … **1 か所** * ★★**＝「使わない色」ではなかった。★前提が違えば結論も変わる。** * ★★**だから、ここに記録として残してあった 2 行を実際に作る**（★値は 1 つも動かしていない）。 * ★★**部品（`components.css`）は今も緑とコーラルの 2 色相だけ**である ——★K-1229 の中身は生きている。 * ★この 2 つは **画面側の淡い地**のためのものであり、★部品の修飾子を増やしてはいない。 * ★★**相澤さんへの問い**（`docs/pending-answers.md`）= ★琥珀と青の淡い地そのものを、 * ★緑とコーラルへ寄せてしまう案も在る。★そちらを採るなら、この 2 行は消せる。 */ --ies-coral-ink: #BA442E; --ies-warn-ink: #A75C05; /* ★淡い琥珀地 #FEF3C7 の上で 4.52:1（★白地 5.03:1）。K-1409 */ --ies-info-ink: #296DC5; /* ★情報地 #E8F1FE の上で 4.51:1（★白地 5.14:1）。K-1409 */ /* ★2026-08-30（K-1230）: モーダルの覆い（★暗幕）。★★値の家を 1 つにする —— ★`components.css` に生で書いていたら、`impeccable` の検出器が「一覧の外の色」として拾った。 ★不透明度つきなので hex では書けない。★明暗で同じ値でよい（★どちらでも下が透けて見える濃さ）。 */ --ies-scrim: rgba(20, 20, 20, .5); /* K-283: 未定義参照だった色トークンの alias(実在トークンへ集約)。 * 各 CSS の var(--ies-bg-soft, #fallback) 等が今後 alias 経由で実在トークンを引く * → Dark 等でフォールバック Light 色に化ける地雷を除去(実在トークンの変化に自動追従)。 * 由来: K-279〜282 の色 audit で発見。詳細 docs/architecture/color-tokens.md。 */ --ies-emerald: var(--ies-jade); /* 役割名アクセント層(K-649): 色名(--ies-jade)を役割名で参照。テーマ複数化に備え、 画面側は accent を参照する。Dark は --ies-jade 上書きに自動追従(--ies-emerald と同型)。 */ --ies-accent: var(--ies-jade); --ies-accent-strong: var(--ies-jade-dark); --ies-accent-soft: var(--ies-jade-soft); --ies-bg-soft: var(--ies-surface-alt); --ies-bg-mute: var(--ies-surface-alt); --ies-bg-hover: var(--ies-surface-alt); --ies-surface-hover: var(--ies-surface-alt); --ies-surface-2: var(--ies-bg); --ies-border-soft: var(--ies-border); /* ★罫線の共通トーン（★`--ies-border` より淡い。★面が主役で線は控えめ、という v0 の方針）。 ★★★**2026-08-30 訂正（★別の頭の指摘。★私の初版の記述は誤りだった）**: ★★旧記述「**これまでどこにも定義されていなかった**」「値を解決できず currentColor（#1C1C1C）に 落ちていた」「白地に対し **17.04:1**」は **すべて失効**。★★**事実に反していた。** ★★**実際には定義は在った** —— `templates/page-dashboard.php` の `.ies-dash-week, .ies-dash-fullrow, .ies-dash-focus { --ies-week-rule: … }`（★同値）。 ★週グリッドはどちらの経路でも**この 3 つのどれかの中に描かれる**ので、継承して解決していた。 ★★**私が 17.04:1 を実測したのは、私が焼いた *絵の見本* の中だけ**である —— ★あの絵では週グリッドを `.ies-dash-focus` の外へ素の兄弟として置いたので、 ★★**その絵でだけ**変数が解決せず `currentColor` に落ちていた。★★**本番の欠陥ではない。** ★★＝ `pages/schedule.css:3449` の注記「ウィジェットの --ies-week-rule と同じ値」は**正しかった**。 ★★**それでもここへ上げる理由**（★残す判断）: ★定義があの 3 クラスの *中にしか無い* ため、 ★★**器の外へ 1 段でも出た瞬間に解決できない**。★実際、私はその形で踏んだ。 ★`:root` に置けば、どこに置いても同じ色になる（★値は 1 文字も変えていない）。 */ --ies-week-rule: color-mix(in srgb, var(--ies-border) 55%, transparent); /* ═══════════════════════════════════════════════════════════════════════════ * ★★★`--ies-row-rule` —— **格子（カレンダー・座席・時間割）の「行の区切り」の色**。★2026-09-08 * * ★★**なぜ在るか（★相澤さんの実機のご指摘・逐語）**: * 「①行の枠線をもっと濃くしたほうがいい？　同じような濃度の線なので区切りがわかりにくいです」 * 「③ブースのメモの上の線があるけどこれは消しちゃダメかな？…あえて分けなくてはいけない * 明確かつ強い理由はないんだよね」 * * ★★**何が起きていたか（★実測）** = ★座席管理の日ビューに **1px の線が 2 本**在り、 * ★行の区切り **1.28:1** ／ 升の中の線 **1.13:1** ＝ ★★**差が 0.15 しかなかった。** * ★★ゲシュタルトの **類同**の法則では、★同じ見た目の要素は同じ意味だと読まれる。 * ＝ ★**同じ線が 2 つの違う仕事をしていた**（★区切りが追えないのは目ではなく設計の問題）。 * * ★★**決めたこと（★2 段構え。★順序を逆にしない）**: * ①★★**升の中に横線を引かない。**★区分けは **近接**（余白）で作る。 * ★これで格子の中に線が 1 本だけになり、★★**残った 1 本が「行の区切り」の意味を独占する。** * ②★そのうえで、行の区切りだけをこの色にする（★**1.82:1**・★列の区切りは `--ies-border` のまま）。 * ★★**行 > 列 の順位を作る。★両方濃くしない**（★格子が主役になる）。 * * ★★**なぜ 3:1（WCAG 1.4.11）を狙わないか** ——★★**狙っても届かないからである。** * ★この線は白い升だけでなく、見出しの列（#F4F4EE）や、空き升を撫でたとき（#E9E9E3）にも載る。 * ★実測 = `--ies-border-strong`（#8C8C8C）に上げても **撫でたときは 2.76** で床を割る。 * ★★＝「規則を満たすために濃くする」という理由が成立しない。 * ★★表の罫線は **装飾的な区切り**であり、同じ情報は **行の位置と余白**が既に運んでいる * （★線が消えても、どの行かは読める）。★1.4.11 が 3:1 を課すのは「操作できる部品」と「意味を運ぶ図」。 * ★★**床を本気で満たすなら、線ではなく「撫でたときの色」から見直す。**★それは別の判断。 * * ★★**作り方は発明していない** = すぐ上の `--ies-week-rule` と同じ「強い線を % で薄める」形。 * ★★**新しいカレンダー・格子を作るときは、この 2 段構えをそのまま使う** * （★正本 = `docs/ui/system/acceptance.md` の「格子の線」。★この議論をもう一度やらない）。 * ★★**間違いだった場合の兆候** = ★「行がまだ追えない」なら ① を先に確かめる（★升の中に線が残っている）。 * ★「線が濃すぎる／格子っぽい」なら 55% を下げる（★`--ies-border-strong` そのものには上げない）。 * ═══════════════════════════════════════════════════════════════════════════ */ --ies-row-rule: color-mix(in srgb, var(--ies-border-strong) 55%, transparent); --ies-ink: var(--ies-text); --ies-link: var(--ies-info); /* Layout */ /* ★★2026-08-19（相澤さんの指示）: 10px → 5px。★角丸を全体的に締める。 ★この 1 語が portal 層の角丸の正本（★実測 = 8 ファイル 10 か所がこれを参照）。 ★★`--ies-radius-sm`（6px）は指示どおり据え置いた。★ただし **大小が逆転する** 　（★「小さいほうの角丸」6px ＞「基準の角丸」5px）。★相澤さんに報告済・判断待ち。 　★下げるなら 4px が刻みに乗る（★未決に積んである）。 */ /* ★★旧名。★K-1206 で **`-sm` の別名**にした（★値を持たせない＝ 二重管理を作らない）。 * ★19 か所がまだこれを見ている。★新しく書かない —— 使うのは `--ies-radius-sm`。 */ --ies-radius: var(--ies-radius-sm); /* ★★2026-08-29（K-1198・相澤さんの「少しずつ共通の部品にしていけるように」）: * ★★**xs と md を足した。★値は新しくない** —— どちらも既に CSS が生で書いていた値である * （★実測 = `docs/ui/system/SHAPE-LEDGER.md`。★4px が 47 件 ／ 8px が 40 件）。 * ★★**この 2 つを足す目的は、見た目を変えることではなく「口を 1 つにする」こと。** * ★生の px は 274 件あり、★そのうち **トークンを通っていたのは 39 件だけ**だった。 * ★口が 1 つになれば、★あとで刻みを変えるのは **この数行の編集で済む**。 * ★★**この便では値を 1 つも変えていない**（★見た目は 1px も動かない・実測で確認済）。 * ★★残っている食い違い（★次に決めること）: * ・`--ies-radius`（5px）だけが刻み（4/6/8/16）から外れている ——★19 か所が見ている * ・`--ies-radius-sm`（6px）＞ `--ies-radius`（5px）で **大小が逆転**したまま（★下の旧注記） * ・`DESIGN.md` は 8/12/16/9999 と宣言しており、★**この一覧とも食い違う** * ★★どれも「どの刻みに揃えるか」という**見た目の判断**なので、★私は決めない。 */ /* ★★★2026-08-29（K-1206・相澤さんの「君の判断で統一や整合性を確定させてください」）: * ★★**角丸の刻みを 4 / 8 / 12 / 16 / 9999 の 5 段に確定した。**★意味で割り当てる: * xs 4px … 小さな印（色見本・極小の札） * sm 8px … **操作するもの**（ボタン・入力欄・タブ・メニュー・札） * md 12px … 中の器（パネル・通知・統計の箱） * lg 16px … カード・モーダル * full … 丸薬（チップ・バッジ） * ★★**値ごとにトークンを作らない**（impeccable の extract = 「トークンは意味を持つこと」）。 * ★★**なぜ 8px か** = カードが 16px と決まっている（相澤さんがモックから確定）。 * ★操作するものをその **半分**にすると、器と部品の丸みが比で揃う。 * ★5〜6px だと 16px のカードの中で丸みが噛み合わず、★「よく見ると細部が違う」の元になる。 * * ★★**変わる値（★正直に書く）**: * `--ies-radius-sm` 6px → **8px**（★144 か所・+2px） * `--ies-radius-md` 8px → **12px**（★20 か所・+4px。★意味を「器」に付け替えた） * `--ies-radius` 5px → **sm の別名（8px）**（★+3px） * ★生の 1〜3px は xs(4px) へ、9〜10px は sm(8px) へ、13〜24px は lg(16px) へ寄せた * ★★**2026-08-19 の「10px → 5px・角丸を全体的に締める」を一部戻すことになる。** * ★理由 = 5px はどの刻みにも乗っておらず、★しかも `-sm`(6px) より小さくて**大小が逆転**していた。 * ★相澤さんに報告済で判断待ちだった項目であり、★今回「私の判断で確定させてよい」と委ねられた。 * * ★実測 = 生の指定 **102 → 3 件**（★残り 3 件は角ごと指定 `4px 4px 0 0`）／ * トークン経由 **308 件**（xs 67 ／ sm 144 ／ md 20 ／ lg 5 ／ full 55）。 */ --ies-radius-xs: 4px; --ies-radius-sm: 8px; --ies-radius-md: 12px; /* ★★2026-08-29（K-1191・相澤さんのご決定「A（トークンを変えて全画面を揃える）」）: **カードの角丸**。★本体層の `--cl-radius-lg`（1rem = 16px・カード用）と **同じ値**にしてある。 ★★**なぜ足したか（★実測）**: ★同じ「カード」なのに層で角丸が違っていた —— ・portal 層（`--ies-radius`）… **5px** ← ダッシュボードはこちらを見ていた ・本体層（`--cl-radius-lg`）… **16px** ← 他の画面はこちら ★★これがまさに相澤さんの仰る「ぱっと見たら同じだけど、よく見たら細部が異なっている」の実体。 ★★**`--ies-radius`（5px）はそのまま**にしてある。★あれはボタン・入力欄など 59 か所が見ており、 ★16px にすると**丸すぎる部品**ができる。★カードだけを分けるのが正しい。 ★出どころ = `docs/ui/screens/社員ダッシュボード/mock-full.html`（★カードは 16px）。 */ --ies-radius-lg: 16px; /* ★★2026-08-18: チップ・バッジ用のピル。★portal 層にだけ無かったので足した。 ★本体層（header.php）には既に `--cl-radius-full: 9999px` が在り、★値を合わせてある。 ★★足した理由（★実測）= `templates/page-yoyaku-grid.php` が **本体層の `--cl-*` を 21 か所** 使っていたが、★この画面が読む頭は `parts/header-portal.php` で `--cl-*` は **1 つも定義されない** （★本番で `getComputedStyle` を撃って確認。★`--cl-primary` すら未定義／★`--ies-*` は生きている）。 ★★＝ 余白と角丸が **効かないまま本番に出ていた**。★20 か所は `--ies-sp-1..4` に **同じ値（4/8/12/16px）で** 置き換えられたが、★ピルだけ受け皿が無かった。 */ --ies-radius-full: 9999px; /* ★★2026-09-25（書く欄を ChatGPT 型に・spec = `docs/ui/screens/社内メッセージ/editor-spec.md` §1 の 5）: **書く欄（`.ies-editor`）の外枠だけの角丸**。★★**角丸の段（4 / 8 / 12 / 16 / 丸）の外の値 ＝ 例外**。 ★出どころ = ChatGPT の入力欄の実測（2026-09-24・ログインなしのトップ・幅 1280px・計算後の値）= 28px。 ★1 行の高さ 52px の半分 26 より大きいので、★1 行のうちは両端がまるい形になる（複数行でも同じ値）。 ★★相澤さんの逐語 =「chat gptのような角丸を完全再現してほしい」。★★**ほかの部品に使わない** （★使うと段の外の角丸が広がる）。★色ではないので暗い配色の節には書かない。 */ --ies-radius-editor: 28px; --ies-shadow-sm: 0 1px 2px rgba(0,0,0,.04); --ies-shadow-md: 0 4px 12px rgba(0,0,0,.06); /* Typography */ /* K-842 (2026-08-07): "Noto Sans JP" を先頭へ。相澤さんの指示「フォントは Noto Sans がいい」。 * 旧: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif * ★旧並びだと Noto Sans JP は 4 番目で、Mac/iOS は Hiragino Sans・Windows は OS 既定が出ていた * ＝portal 層(サイドバー/共通ヘッダー/個人設定)だけ本体層と別の書体になっていた(実測)。 * ★webfont は header.php:34 の Google Fonts で既に読込済み。追加読込は不要。 * ★★これは見た目が変わる変更(特に Mac/iOS)。本体層 header.php:82 と同じ並びに揃えた。 */ --ies-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; /* ★2026-10-03（W-271 ②・本棚 [668]）: `monospace` の手前に "Noto Sans JP" を置いた。旧は「…, Menlo, monospace」＝ 数字の書体は JetBrains Mono でも、和文の字（「件」「コマ」）が来ると * 最後の `monospace`（Windows は MS Gothic）に落ちていた（[668] の実測）。数字の字は変わらず、和文だけが本文と同じ字になる（K-842「フォントは Noto Sans がいい」の延長）。 * ★★同じ穴が `--cl-font-mono`（:848）と Tailwind の `font-mono` に残っている（★注記が「tailwind.config の fontFamily.mono と同一の文字列」と約束している・組み立ては共有の成果物＝ここでは触らない）。 */ --ies-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans JP", monospace; /* 文字サイズ調整は K-242 で rem 化。基準は html { font-size: var(--ies-fs-scale,100%) }（base.css）。 * 旧 --ies-fs-delta(px加算方式) は全廃。スケールは JS が --ies-fs-scale に % をセット。 */ /* Spacing scale */ --ies-sp-1: 4px; --ies-sp-2: 8px; --ies-sp-3: 12px; --ies-sp-4: 16px; --ies-sp-5: 24px; --ies-sp-6: 32px; --ies-sp-7: 48px; /* ★★★2026-09-06: 押せる高さの 3 段。★★**両方のサイトへ届くのはこの層だけ**。 ★同じ 3 段が `header.php` の `:root` に `--cl-tap-s/m/l` として在るが、★あちらは教室サイト専用で、 ★★共通の CSS（`components.css` / `header-shared.css` / `sidebar-shared.css`）から引くと ★★**社員サイトで解決せず、指定そのものが落ちる**。★だから同じ値をここにも置く。 ★正本 = `docs/ui/system/acceptance.md`「タップ領域」。★★**新しい値を決めたのではなく、写しである。** ★★**40px を作らない**（★2026-08-28・K-1185 で廃止済）。 */ --ies-tap-s: 24px; /* 行の中の小さな押しもの・パンくず */ --ies-tap-m: 32px; /* 既定。行の中の操作とアイコンボタン */ --ies-tap-l: 44px; /* 主要ボタン・メニューの行 */ /* Sidebar */ /* ★★K-1039 (2026-08-21): 240px → 225px。★`assets/css/sidebar-shared.css` と値を揃えた。 ★★これは見た目の変更ではない。**実際の画面はもう 225px だった。** ★実測（本番 `ies.noberu.net/dashboard/`・2026-08-21）= `aside.ies-sidebar` の実幅 **225px**。 ★★なぜ 240px と書いてあるのに 225px で描かれていたか = ★このトークンは **2 か所**にあり、★社員サイトでは**両方読まれる**。 ★積む順は登録の優先度で決まり（★pdash 側 **10** ／ sidebar 側 **100**）、 ★★**後に積まれる sidebar 側（225px）が勝っていた**。 ★★つまりこの 240px は **1 度も効いていない死んだ値**であり、★読む人を欺いていた。 ★決定 K-1026 が「社員サイト側は変わらない」と書いたのは、この行を見て書かれたもの。 ★★**相澤さんの判断（2026-08-21）= 225px で追認**。★逐語 =「サイドバーの幅は社員側も ２２５pxでいいですけど これ僕が昨日２２５ｐｘに修正させたと思うんですけど なので追認でいいです」。 ★★**兆候**: ★この 2 ファイルの `:root` がまた食い違ったら、★同じ「後勝ち」で **書いてある値と描かれる値が別物**になる。★詳細 = K-1035。 */ /* ★★★2026-08-26（K-1181・相澤さんのご指示）: 225px → **215px**。 * ★逐語 =「サイドバー beta の表示をサイドバーから削除したので **その分幅を 10px 狭くして**ください * ただし条件分岐して **フォントが特大の時には今と同じ幅** とかって出来る？」 * ★★特大（delta 6）のときだけ 225px に戻す規則は `assets/css/sidebar-shared.css` の末尾。 * ★あちらは **両方のサイトで**読まれるので、規則の置き場としてそちらが正しい。 * ★★**この 2 本は同じ値にすること**（★上のコメントの「兆候」がまさにそれ）。 */ /* ★★★2026-09-05（相澤さんのご指示④）: 215px → **200px**（★−15px）。 * ★★**`assets/css/sidebar-shared.css` の同名と同じ便で変えてある**（★上のコメントの「兆候」がまさにそれ）。 * ★入り切ることの実測と、この変更が見ていないものは、あちらの同じ行の注記に 1 か所だけ書いた。 * ★機械の見張り = `.githooks/check-token-drift.php`（★食い違ったら commit が止まる）と * `tools/nb-test-sidebar-metrics.php`（★項目名が入り切らなくなったら落ちる）。 */ --ies-sidebar-w: 200px; --ies-sidebar-w-rail: 64px; /* ★★★2026-08-25 訂正: 42px → **45px**。★これは「帯を厚くした」のではなく、 * ★★**もともと 45px だったものを、宣言の側が 42px と嘘をついていた**のを直したもの。 * ★実測（★本番の実画面）= 通知ベル 44px ／ 氏名メニュー 44px ／ 下線 1px ＝ **45px**。 * ★★嘘になった日 = 通知ベル（K-1123・2026-08-24）を帯に足した日。 * ★★この 3px が引き起こしていたもの（★相澤さんの実機報告 3 件は全部これ 1 つ）: * ①社内メッセージの左レールがスクロールで少し動く（★`top: 42px` で 3px 潜る） * ②レールが画面の下から 3px はみ出す（★`100vh - 42px` で計算していた） * ③そのはみ出しだけのために、★**ページ全体の縦スクロールバーが右端に出る** * ★★併せて `layout.css` の `.ies-header` を `min-height` から **`height`** にした * ＝ ★以後、宣言した値と実際の高さは **食い違えない**。 * ★★下の旧記述の「※42px で窮屈なら 44/45px に緩める」は、★実際にはもう 45px で描かれていた。 */ /* ★★K-1382 (2026-09-03): 本文の枠の余白と最大幅。★出どころは `layout.css` の `.ies-content`。 * ★★**社員サイトの器だけがその枠を開ける**ので、★教室サイトへ移した画面は自分で開ける必要がある * （★`templates/page-leads.php` の `.nb-leads-page`）。★★値をここに 1 つ置き、★写しを作らない。 * ★門 = `tools/nb-test-leads-layout.php` が `.ies-content` と突き合わせる（★var を解決してから比べる）。 */ --ies-content-pad: clamp(16px, 1.2%, 24px) clamp(16px, 2vw, 32px); --ies-content-max: 1600px; /* ★列の幅の段（K-1621・K-1753・`docs/ui/system/width-by-template.md` §3・2026-09-23 UNIFY T-1）。★画面は数字を持たず、器がこの段を使う。 * ★990 = 一覧＋文（一覧の器の既定・`list-shell.css` の `--nb-ls-measure`）／ 720 = 1 枚ものの中身（箱は 768）。 * ★どちらも今ある値を名前で持っただけ（★見た目は 1px も変わらない）。 */ --ies-col-text: 990px; --ies-col-page: 720px; --ies-header-h: 45px; /* K-222 (2026-06-01・社長FB): 56→48→42。固定占有縦領域をさらに削り可読領域を拡大。ヘッダーは flex align-items:center ゆえ子要素の中央揃えは維持。※42px で窮屈なら 44/45px に緩める(Local確認後確定)。★旧記述「参照は layout.css:110 の1箇所のみ、スマホは min-height:auto で無影響」は失効（W-269・2026-10-03）= いまは表の見出し・タブの帯・設定の柱・一覧の柱・右上の知らせ・scroll-margin が帯の下に貼りつくために読む。狭い窓（767px 以下）は直下の @media が 57px（普段の帯の計算値）に替え、parts/header-shared.php の台本が帯の実寸で上書きする。 */ } /* ★W-269（2026-10-03）: 狭い窓の帯は min-height:auto で折り返す（上下 6px ＋ 押す的 44px ＋ 下線 1px ＝ 57px）。45px のままだと帯の下に貼りつくものが 12px 潜る。 * ★同じ 1 行を assets/css/header-shared.css の `:root { --ies-header-h: 45px; }` の直後にも置く（教室サイトは tokens.css を読まない時代の名残で両方に持つ・値は同じ）。 * ★`:root{ --ies-header-h: 45px }` の行は消さない（tools/nb-test-header-parity.php が最初に当たった値を読む）。 * ★ベータの画面・講師の帯・特大の字は 57 と一致しない ＝ 台本（parts/header-shared.php）が実寸を `` に書いて上書きする。広い窓は台本が消す（帯が自分の高さを min-height:var(--ies-header-h) で決めるので、実寸を書くと「一度高くなると戻らない」になる）。 */ @media (max-width: 767px) { :root { --ies-header-h: 57px; } } /* ========================================================= * Dark テーマ(K-288 仮当て → K-291 で本実装・正式採用。値は K-288 のまま変更なし) * のとき色トークンを Dark 値で上書き。Light(:root)は無変更。 * 方向性 = Linear/Vercel 風(浮いた黒地 + オフホワイト文字 + 低彩度アクセント)。 * alias(--ies-emerald/bg-soft/ink/link 等)は var(--実在) ゆえ自動追従(再定義不要)。 * ★切替は個人設定(schedule-settings ⑨)で usermeta _ies_theme に保存し、 * parts/header-portal.php がサーバ側で を先出し(FOUC なし)。 * 'light' は :root 既定ゆえ属性を出さない(非 light のみ data-theme を持つ)。 * (偵察用 Console 切替: document.documentElement.setAttribute('data-theme','dark') / removeAttribute で戻す) * ========================================================= */ [data-theme="dark"] { /* K-290: ネイティブフォーム要素(select/input/checkbox/radio/date/scrollbar)を Dark UA 描画に。 白く浮く native コントロールを一括で黒系化(自分の予定 select / 日付ナビ / CC チェックボックス等)。 */ color-scheme: dark; /* ★★2026-08-23: コーラルの上の文字色は **暗い配色でも白のまま**（★明るい配色と同じ値）。 ★★**わざと同じ値を置いている**——★ここを書かないと「暗い配色では未定義」に見え、 ★次に読む人が「反転させ忘れでは？」と疑って直してしまう。★★**反転させないことが仕様である。** ★理由 = 塗り（`--ies-coral`）が暗い配色でも明るいコーラルのままだから（★下の :171 付近）。 */ --ies-on-coral: #FFFFFF; /* Surface 階層(地<副地<カード) */ --ies-bg: #16161a; --ies-surface: #1e1e22; --ies-surface-alt: #1a1a1f; --ies-surface-tint: #1a2030; /* 情報地(暗い青み) */ --ies-border: #33333a; /* ★2026-08-30（K-1230）: #44444c → #68686E（★暗い面 #1e1e22 の上で **3.00:1**）。★上の :root と同じ理由。 */ /* ★2026-08-30（K-1230）: #44444c → #707076。★暗い側の 3 つの面すべてで 3:1 以上 （★面 #1e1e22 = 3.38 ／ 地 #16161a = 3.67 ／ 副地 #1a1a1f = 3.52）。★明るい側と同じ理由。 */ --ies-border-strong: #707076; /* Text(オフホワイト〜中間グレー) */ --ies-text: #e8e8e6; --ies-text-sub: #a8a8a4; /* K-936 (2026-08-17): #7a7a76→#868681。--cl-muted(dark) #a8a8a4 への単純統一は試したが、 (1) --ies-text-sub と同値になり sub/mute の二段階が消える (2) messages.css の .rank--2(白文字を乗せた地) が 4.31:1→2.39:1 まで悪化する、の2点が判明したため見送った。 代わりに自前の値そのもの(H60°/S1.7%を保持)でLだけ最小限動かした: 暗地の文字用途(surface #1e1e22) 3.86:1→4.54:1、(bg #16161a) 4.19:1→4.93:1。 ★.rank--2(白文字)は 4.31:1→3.66:1 とわずかに悪化するが、a8a8a4案(2.39:1)より小さい影響に留めた (この1箇所はどの案でも改善しない。報告に明記・messages.css は編集対象外)。 */ --ies-text-mute: #868681; --ies-black: #e8e8e6; /* Dark では「最濃文字」= オフホワイト相当に(純黒は不可視ゆえ) */ /* Brand / アクセント(暗背景で沈まぬよう明度↑・低彩度) */ --ies-jade: #2ecf8f; /* ★★2026-08-22 訂正: #1f9e6c は失効 → #1f9f6c。 ★★理由 = **同じ役の緑が、暗い配色で 2 つに割れていた**（★緑の実数え上げで出た）: ・portal 層 --ies-jade-dark = #1f9e6c ・本体層 --cl-primary-dark = #1f9f6c（header.php:414） ★★緑の 1 段だけが違う＝ 見て分かる差ではないが、★**同じ役に 2 つの値**が在る状態。 ★★どちらへ寄せたか = **本体層の #1f9f6c**。★根拠 = K-936 がこの値を選んだときの実測 （★淡色面の上の文字 4.46:1 → 4.51:1 ／ 暗地の文字 5.30:1 → 5.36:1）。 ★★＝ 明るい側へ寄せると、K-936 が直した 4.5:1 未達へ**戻ってしまう**。 ★★実測（laneJ が計算・検算 #000/#fff=21.00・#767676/#fff=4.54 と一致）: #1f9e6c は面 #1e1e22 の上で 4.88:1 ／ #1f9f6c は **4.93:1**。★どちらも 4.5:1 を満たす。 ★★**明るい配色は 1 バイトも触っていない**（★この節は [data-theme="dark"] の中）。 ★同じ訂正を assets/css/sidebar-shared.css:99 にも入れた（★教室サイトはそちらが唯一の定義元）。 */ --ies-jade-dark: #1f9f6c; /* ★★K-1219（2026-08-30）: ★★**hover の向きが明るいテーマと逆になる。** ★暗いテーマのボタンは「暗い文字 × 明るい緑」なので、hover は**明るく**する。 ★実測 = 文字 #1e1e22 × #2ecf8f = **8.26:1**（★通常時の #1f9f6c は 4.93:1）。 ★★明るいテーマと同じ「濃くする」をやると、暗い文字との差が縮んで**落ちる**。 */ --ies-jade-hover: #2ecf8f; --ies-jade-soft: #142a20; /* 暗い緑地 */ --ies-jade-light: #3ee0a0; --ies-coral: #ff7a5c; --ies-coral-dark: #e85a3a; --ies-coral-soft: #2e1a14; /* 暗いコーラル地 */ /* ★★2026-09-06: 「決まった行」の面（★暗い配色）。★★値は **相澤さんが目視で採られたもの**（K-649）。 ★実測（★当時の記録）= 副文字 6.29:1 ／ 緑の札 7.46:1 ／ ふつうの行との差 1.107。★勝手に動かさない。 */ --ies-settled: #3a1f22; --ies-blue: #6b8cff; /* #0017c1 は暗背景で沈むため明度↑ */ --ies-blue-soft: #1e2640; /* 暗い青地 */ --ies-info: #4d9bf0; /* State */ --ies-warn: #e0a030; --ies-warn-soft: #2e2410; /* 暗い琥珀地 */ --ies-danger: #f2564f; /* 暗背景で視認できる赤 */ --ies-danger-soft: #2e1616; /* 暗い赤地 */ /* ★★K-1219（2026-08-30）: ★★**明るいテーマの値をそのまま使うと壊れる。** ★実測 = 明るい側で選んだ #B91C1C を暗い地 #2e1616 に載せると **2.61:1**（★4.5 未達）。 ★→ 暗いテーマでは既存の `--ies-danger`（#f2564f）がそのまま文字色になる（**5.01:1**）。 ★hover 地も向きが逆（明るくする）= #3a1c1c（**4.56:1**）。★1 段明るい #3d1d1d は 4.47:1 で落ちる。 */ --ies-danger-ink: #f2564f; --ies-danger-soft-hover: #3a1c1c; /* ★★2026-08-30（K-1228）: 淡い地の上の文字（★明るい配色の相方）。 ★★**暗い配色では既存の色がそのまま 4.5:1 を満たす**ので、★新しい色を作っていない。 ・`#e85a3a`（= `--ies-coral-dark`）× 暗いコーラル地 #2e1a14 = **4.67:1** ・`#e0a030`（= `--ies-warn`） × 暗い琥珀地 #2e2410 = **6.72:1** ・`#4d9bf0`（= `--ies-info`） × 暗い青地 #1a2030 = **5.62:1** ★★**別名（`var(--ies-coral-dark)`）ではなく実値を書いている理由** = ★明るい側と暗い側で ★**参照先が別のトークンになる**（★明るい側は専用の濃色）。★別名で書くと片側だけ意味が変わる。 */ /* ★2026-08-30（K-1229）: 琥珀と青の `-ink` は作らなかった（★上の :root の注記を見よ）。 */ --ies-coral-ink: #e85a3a; /* ★★2026-09-03（K-1409）: 琥珀と青の相方（★上の :root の訂正を見よ）。 ★★**暗い配色では既存の色がそのまま 4.5:1 を満たす**ので、新しい値を 1 つも作っていない （★実測 = #e0a030 × #2e2410 = **6.72:1** ／ #4d9bf0 × #1a2030 = **5.62:1**）。 */ --ies-warn-ink: #e0a030; --ies-info-ink: #4d9bf0; --ies-scrim: rgba(20, 20, 20, .5); /* ★明るい配色と同値（★暗幕は配色で変えない） */ /* 影(暗背景では黒影を強めに) */ --ies-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ies-shadow-md: 0 4px 14px rgba(0,0,0,.5); } /* ═══════════════════════════════════════════════════════════════════════════ * ★★★本体層のトークン（`--cl-*`）——★2026-09-07（段 B・配りの 1 本化）に `header.php` の `