製品マスタへの原価構成比ウォーターフォールチャート表示とコスト比率警告バッジの追加

## 1. 目的
製品マスタ一覧・編集画面において、各製品の「原材料費・その他変動費・固定費按分・粗利」の構成比を視覚的に把握できるようにする。担当者がどの製品の原価構造がリスクにさらされているかを一目で判断でき、シミュレーション対象の選定精度を上げることが目的。

## 2. 具体的な仕様

### 2-1. 製品一覧テーブルへの「コスト比率バー」列の追加
- 現行の製品一覧テーブル（pages/products.php）の「粗利率」列の右隣に「原価構成」列を追加する。
- 列の中にインラインのミニ横棒グラフ（横幅100px固定のSVG or CSSのみで実装）を描画する。
- 色分け: 原材料費=オレンジ(#f97316)、その他変動費=黄(#eab308)、固定費按分=グレー(#94a3b8)、粗利=緑(#22c55e)
- 各セグメントの幅 = 各費目 / current_price × 100px（粗利がマイナスの場合は赤(#ef4444)で表示）
- ホバー時にtitle属性でそれぞれの円額と比率をツールチップ表示（例: `原材料費: ¥310 (39.7%)`）

### 2-2. コスト比率警告バッジ
- 原材料費 / current_price が 60% 以上の製品には「⚠ 原価高」の赤バッジを製品名の右に表示する。
- 粗利率が 10% 未満の製品には「⚠ 低粗利」のオレンジバッジを表示する。
- バッジはspanタグ＋インラインスタイルで実装（外部CSSの既存定義を壊さないよう class="badge-warn" を追加定義）。

### 2-3. 製品編集フォームへのリアルタイム構成比プレビュー
- 製品追加・編集フォーム（pages/products.php の左カード内）の保存ボタン上部に、数値入力をリアルタイムで反映するミニ構成比バーを追加する。
- JavaScript（素のJS、既存コードに追記）で `current_price`, `material_cost`, `variable_cost`, `fixed_cost_alloc` の各inputの `input` イベントを監視し、SVGまたはdivのwidth%をリアルタイム更新する。
- 原価合計が売価を超えた場合は「⚠ 原価が売価を超えています」の警告テキストを赤で表示する（フォーム送信は妨げない）。

## 3. 実装範囲・ファイル変更箇所
- `pages/products.php` のみ変更（一覧テーブルへの列追加 + フォーム内JSプレビュー追加）
- 既存のDB構造・ルーティング・他ページは一切変更しない
- 新たなDB列・API呼び出しは不要（表示計算はPHP側で行い、インタラクション部分のみJS）
- 印刷・CSV出力には影響しない（no-printクラスは付与しないが、列幅が小さいため印刷崩れは最小限）

## 4. 既存機能との整合
- 製品一覧のページネーション・絞り込み・CSVインポート・削除動作は変更しない
- 新列は既存テーブルの末尾（「操作」列の左）に挿入し、レスポンシブ対応としてスマホ幅（max-width:600px）では `display:none` にする
- バッジ用CSSは `<style>` タグをこのページのrender_layout内に局所的に追記し、既存のグローバルCSSを上書きしない