/* EasyChef のスタイル。
*
* 🔴 Tailwind に依存しない。理由は 2 つ:
* 1. Typography プラグインが未導入 (tailwind.config.js:63 が plugins: []) なので
* prose クラスは何も効かない
* 2. static/css/tailwind.css は事前ビルド成果物で再生成されないため、
* 後から書いた dark: クラスは黙って無効になる。実測で dark:bg-amber-900 と
* dark:text-amber-100 が「無い」ことを確認済み。片方だけ効くと判読不能になる
*
* 🔴 ダークは html.dark クラス (tailwind.config.js:3 が darkMode: 'class')。
* @media (prefers-color-scheme: dark) では効かない。
*
* 色は全てコントラスト比を計算して選んである (WCAG AA = 4.5:1 以上)。
* 背景を指定した要素には必ず文字色をセットで書く。
*/
/* ---- ライト ---- */
.easychef-page { background: #fffbeb; color: #1f2937; } /* 14.0:1 */
.easychef-card { background: #ffffff; color: #1f2937; } /* 14.7:1 */
.easychef-hero { background: #fde68a; color: #451a03; } /* 11.9:1 */
.easychef-hero p { color: #4c2a05; } /* 10.4:1 */
/* 🔴 句の途中で折り返さない (2026-08-21 ユーザー指示)。包まないと
「揚げ物の衣・吸/油量を、」のような割れ方をする。色は持たないので
`test_every_light_rule_has_a_dark_counterpart` の対象外。 */
.ec-phrase { white-space: nowrap; }
.easychef-note { color: #57534e; } /* 7.0:1 */
.easychef-toc-link { color: #9a3412; text-decoration: none; } /* 7.5:1 */
.easychef-toc-link:hover { text-decoration: underline; }
.easychef-doc h1 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem; color: #1f2937; }
/* 🔴 h2 の上罫線は出さない (2026-08-18 ユーザー指示「水平線を削除」)。
`
` を全廃しても画面には線が残っていた — 正体はここの border-top で、
節見出しごとに 39 本引かれていた (実測)。見出しの余白だけで十分に区切れる。
余白は border が無くなる分を margin 側で確保する。 */
.easychef-doc h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 .75rem; color: #1f2937; }
.easychef-doc h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #1f2937; }
.easychef-doc p { margin: .5rem 0; line-height: 1.8; color: #1f2937; }
/* 🔴 ul と ol を 1 つの規則にまとめると ol まで disc になり連番が消える。
正典の「黄金比の 3 つの構造的限界」は順序に意味があるので分けて書く。 */
.easychef-doc ul, .easychef-doc ol { margin: .5rem 0 .5rem 1.5rem; color: #1f2937; }
.easychef-doc ul { list-style: disc; }
.easychef-doc ol { list-style: decimal; }
.easychef-doc blockquote { border-left: 4px solid #d97706; padding-left: 1rem;
margin: 1rem 0; color: #44403c; } /* 9.7:1 */
.easychef-doc a { color: #9a3412; text-decoration: underline; word-break: break-all; } /* 7.5:1 */
/* 🔴 は必ず横スクロールさせる。tailwind の preflight は pre に
margin:0 を当てるだけで overflow を面倒見ないため、既定の white-space:pre で
ページ全体が横スクロールする。生成物には が 35 個あり、最長行は
61 文字 / 全角換算 99 桁 (等幅で約 950px)。375px 端末のカード内幅は約 295px。 */
.easychef-doc pre { overflow-x: auto; margin: 1rem 0; padding: .75rem 1rem;
background: #f5f5f4; color: #1c1917; /* 16.0:1 */
border: 1px solid #78716c; /* 4.8:1 (対カード) */
border-radius: .5rem; font-size: .875rem; line-height: 1.7; }
.easychef-doc code { background: #f5f5f4; color: #1c1917; /* 16.0:1 */
padding: .1rem .3rem; border-radius: .25rem; font-size: .9em; }
/* pre の中の code は二重の背景・枠になるので打ち消す。 */
.easychef-doc pre code { background: transparent; color: inherit;
padding: 0; border-radius: 0; font-size: inherit; }
/* 🔴
は章区切り。preflight の `hr{border-top-width:1px}` +
`*{border-color:#e5e7eb}` (tailwind.css:127) のままだと白背景で 1.24:1 になり
実質不可視。`hr,figure,p,pre{margin:0}` で余白も消えるので余白も与える。
非テキストコントラスト (WCAG 1.4.11) の 3:1 を満たす色を選ぶ。 */
.easychef-doc hr { height: 0; border: 0; border-top: 1px solid #78716c; /* 4.8:1 */
margin: 2rem 0; }
/* 🔴 固定ヘッダーの下にアンカー先が潜り込むのを防ぐ。
base.html:310 のナビが fixed top-0 min-h-[64px]、混在版ユーザーは
base.html:288 の 2 本目 (fixed top-16・py-3 + text-sm + border-b ≒ 45px) が
加わる。base.html:548 の が混在時に使う pt-28 = 112px が
プロジェクト自身の最大値なので、それに 8px の余裕を足して 120px。 */
.easychef-doc [id^="sec-"],
.easychef-page [id="sources"] { scroll-margin-top: 120px; }
/* 🔴 表は「折り返して収める」を基本にする (2026-08-12 ユーザー指摘)。
以前は table 自身に display:block + white-space:nowrap を当てていたが、
- display:block は table のレイアウト計算 (列幅の自動配分) を無効にする
- nowrap が全セルの折り返しを禁止するので、表は必ず横に伸びる
の 2 点で、どの画面幅でも横スクロールが必須になっていた。
スクロールは包み div (.easychef-table-wrap) 側の保険に降格し、
通常は折り返しで収まるようにする。 */
.easychef-table-wrap { overflow-x: auto; margin: 1rem 0;
-webkit-overflow-scrolling: touch; }
.easychef-doc table { width: 100%; border-collapse: collapse; font-size: .875rem; }
/* 🔴 折り返せない長い連続文字 (URL・型番) だけを分割する。
break-all にすると日本語が不自然に切れるので break-word にとどめる。 */
.easychef-doc th, .easychef-doc td { overflow-wrap: break-word; word-break: normal; }
/* 🔴 罫線には
と同じ基準 (WCAG 1.4.11 非テキスト 3:1 以上) を当てる。
このページは表が主役 (65 個・最大 11 列) で、横スクロールする幅広の表では
罫線だけが行と列を追う手がかりになる。Task 5 の初期値 #d6d3d1 は
白背景で 1.49:1 しかなく、区切りが見えていなかった。
🔴 th は背景が違う (#fde68a) ので同じ色では足りない。td 用の #8a8580 は
#fde68a 上で 2.93:1 と 3:1 を割るため、th だけ罫線色を分ける。 */
.easychef-doc th, .easychef-doc td { border: 1px solid #8a8580; /* 3.65:1 (対 #ffffff) */
padding: .4rem .6rem; color: #1f2937; }
.easychef-doc th { background: #fde68a; color: #451a03; font-weight: 600; /* 文字 12.03:1 */
border-color: #78716c; } /* 3.85:1 (対 #fde68a) / 4.80:1 (対 #ffffff) */
/* 🔴 減算記号 U+2212 は、本文の書体 (Kiwi Maru 等の CJK フォント) だと
短く細く見え、ハイフンやダッシュと見分けにくい (ユーザー指摘 2026-08-12)。
正典の文字は変えず、build_easychef.py が span で包んだものをここで整える。
🔴 色は指定しない (親の色を継承する)。コントラスト比は変わらない。 */
.easychef-minus { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
font-size: 1.15em; font-weight: 700; padding: 0 .12em; }
/* 数字の桁を揃えて式を読みやすくする (色・サイズは変えない)。 */
.easychef-doc td, .easychef-doc th, .easychef-doc pre, .easychef-doc code {
font-variant-numeric: tabular-nums; }
/* ---- ダーク (html.dark) ---- */
html.dark .easychef-page { background: #111827; color: #f3f4f6; } /* 15.8:1 */
html.dark .easychef-card { background: #1f2937; color: #f3f4f6; } /* 12.6:1 */
html.dark .easychef-hero { background: #451a03; color: #fde68a; } /* 10.1:1 */
html.dark .easychef-hero p { color: #fcd34d; } /* 8.9:1 */
html.dark .easychef-note { color: #d6d3d1; } /* 9.9:1 */
html.dark .easychef-toc-link { color: #fcd34d; } /* 10.2:1 */
html.dark .easychef-doc h1,
html.dark .easychef-doc h2,
html.dark .easychef-doc h3,
html.dark .easychef-doc p,
html.dark .easychef-doc ul,
html.dark .easychef-doc ol { color: #f3f4f6; } /* 12.6:1 */
/* 🔴 h2 の border-top はライト側で撤去したので、ダークの対の指定も消す (2026-08-18)。
片方だけ残すと「色は指定されているのに線が無い」死んだ設定になる。 */
html.dark .easychef-doc blockquote { border-left-color: #fbbf24; color: #d6d3d1; }
html.dark .easychef-doc a { color: #fcd34d; } /* 10.2:1 */
/* 🔴 ダークも
と同じ 3:1 基準。初期値 #57534e は #1f2937 上で 1.92:1 だった。
ダークは 1 色で足りる (#8a8580 は td 背景 4.02:1 / th 背景 4.10:1 の両方で 3:1 超)。
参考値の #78716c はダークの td 背景で 3.06:1 と余裕が無いので採らなかった。 */
html.dark .easychef-doc th, html.dark .easychef-doc td { border-color: #8a8580; /* td 4.02:1 */
color: #f3f4f6; }
html.dark .easychef-doc th { background: #451a03; color: #fde68a; } /* 文字 12.03:1 · 罫線 4.10:1 */
html.dark .easychef-doc pre { background: #111827; color: #f3f4f6; /* 16.1:1 */
border-color: #6b7280; } /* 3.7:1 (対 pre 背景) */
html.dark .easychef-doc code { background: #111827; color: #f3f4f6; } /* 16.1:1 */
html.dark .easychef-doc pre code { background: transparent; color: inherit; }
html.dark .easychef-doc hr { border-top-color: #a8a29e; } /* 5.8:1 */
/* ============================================================
計算ツール (easychef_tools.html) — 丸めの案内 (2026-08-20)
🔴 ユーザー指定の逐語文言を常時出す帯。読めないと出す意味が無いので
両テーマでコントラストを実測して決めた (末尾のコメントが実測値)。
🔴 色だけで意味を伝えないよう、左の縦線とアイコンも併せて出す。
============================================================ */
.easychef-rounding-notice { background: #fffbeb; color: #78350f; /* 8.75:1 */
border-left: 4px solid #b45309;
line-height: 1.7; }
html.dark .easychef-rounding-notice { background: #292524; color: #fde68a; /* 12.18:1 */
border-left-color: #f59e0b; }
/* ============================================================
計算ツールへの導線 (easychef.html のヒーロー内 · 2026-08-20)
🔴 契約者にだけ出るボタン。表示条件は view 側 (`can_use_easychef_tools`)。
🔴 末尾のコメントが実測コントラスト。文字は 4.5:1・面は 3:1 (WCAG 1.4.11) が基準。
面のコントラストはヒーロー背景 (ライト #fde68a / ダーク #451a03) に対して測る。
🔴 高さ 2.75rem = 44px は指で押せる最小寸法。リボンの `.ec-tab` と揃える。
============================================================ */
.easychef-cta { display: inline-flex; align-items: center; justify-content: center;
min-height: 2.75rem; padding: 0 1.5rem;
border-radius: 9999px; font-weight: 600; text-decoration: none;
background: #78350f; color: #fffbeb; /* 文字 8.75:1 · 面 7.28:1 */
transition: background-color .15s ease; }
.easychef-cta:hover { background: #5c280b; } /* 文字 11.48:1 · 面 9.56:1 */
.easychef-cta:focus-visible { outline: 3px solid #7c2d12; outline-offset: 2px; } /* 7.52:1 */
html.dark .easychef-cta { background: #fcd34d; color: #451a03; } /* 文字 10.39:1 · 面 10.39:1 */
html.dark .easychef-cta:hover { background: #fbbf24; } /* 文字 8.97:1 · 面 8.97:1 */
html.dark .easychef-cta:focus-visible { outline-color: #fde68a; } /* 12.03:1 */