習慣の「達成率目標」アラートと週次レポートカードの追加

## 1. 目的

現在のアプリは「記録する・振り返る」機能は充実しているが、「今週このままでは目標に届かない」という能動的な気づきを与える仕組みがない。週の途中で達成ペースが遅れている習慣を目立たせるウィジェットを「今日」タブの最上部に追加し、ユーザーの行動を後押しする。

---

## 2. 具体的な仕様

### 2-1. 「今週のペース確認」カード（今日タブ最上部に追加）

- 毎週月曜〜日曜を1週間として、**今日時点（月〜今日）で対象曜日が何日あったか**を分母、実際の達成数を分子として各習慣のペース達成率を計算する。
- 週の残り日数（今日〜日曜）に対象曜日が1日以上ある習慣のうち、**ペース達成率が70%未満**のものを「要注意」として最大3件リストアップする。
- カードの表示条件：週火曜日以降かつ要注意習慣が1件以上の場合のみ表示（月曜は判定データが少ないため非表示）。
- カードのデザイン：
- 見出し「📊 今週のペース確認」
- 要注意習慣を `絵文字 習慣名 ── 今週 X/Y日達成 (ペースより▲Z日遅れ)` の形式で1行ずつ表示
- カード右上に「×」で折りたたみ可能（折りたたみ状態はsessionStorageに保存し、ページリロードでリセット）
- アクセントカラーは `--accent` のやや薄い背景（`rgba(var(--accent-rgb), 0.08)`、ダークモード対応）

### 2-2. 計算ロジック（JavaScript、既存データ活用）

```js
function getWeeklyPaceAlerts(habits, records) {
const today = todayStr(); // 'YYYY-MM-DD'
const dow = new Date().getDay(); // 0=日
if (dow === 1) return []; // 月曜は非表示

// 今週の月曜から今日までの日付リストを生成
const weekStart = getMonday(today);
const daysUpToToday = dateRange(weekStart, today);
// 今日から日曜までの残り日付
const daysLeft = dateRange(tomorrow(today), getSunday(today));

const alerts = [];
for (const habit of habits) {
// 残り曜日に対象日が1日以上あるか確認
const remainTarget = daysLeft.filter(d => isTargetDay(habit, d));
if (remainTarget.length === 0) continue; // 既に今週の対象日は終了

const targetDays = daysUpToToday.filter(d => isTargetDay(habit, d));
if (targetDays.length === 0) continue;

const doneDays = targetDays.filter(d => records[habit.id]?.[d]?.done);
const paceRate = doneDays.length / targetDays.length;
if (paceRate < 0.7) {
const behind = targetDays.length - doneDays.length;
alerts.push({ habit, done: doneDays.length, target: targetDays.length, behind });
}
}
// ペース達成率が低い順に最大3件
alerts.sort((a, b) => (a.done/a.target) - (b.done/b.target));
return alerts.slice(0, 3);
}
```

- `isTargetDay(habit, dateStr)` は既存の曜日判定ロジックを流用する。
- `getMonday`, `getSunday`, `dateRange` はシンプルなDate計算ヘルパーを追加する（各10行未満）。

### 2-3. カードのHTML構造（DOMで動的生成）

```html
<div id="paceAlertCard" class="card" style="background: var(--pace-bg); display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
<span style="font-weight:700;font-size:14px;">📊 今週のペース確認</span>
<button id="paceAlertClose" class="btn btn-sub" style="padding:4px 10px;min-height:30px;font-size:12px;">×</button>
</div>
<div id="paceAlertList"></div>
</div>
```

CSS変数追加：
```css
:root { --pace-bg: rgba(91,141,239,0.07); }
html[data-theme="dark"] { --pace-bg: rgba(111,157,255,0.10); }
```

### 2-4. 折りたたみ処理

```js
document.getElementById('paceAlertClose').onclick = () => {
document.getElementById('paceAlertCard').style.display = 'none';
sessionStorage.setItem('habitring.paceAlertClosed', '1');
};
// 描画時
if (sessionStorage.getItem('habitring.paceAlertClosed')) return; // 表示しない
```

---

## 3. 既存機能との整合（壊さない点）

- localStorage のデータ構造（habits / records）を**読み取るだけで変更しない**。
- 新規追加のUIは「今日」タブの習慣リストより上に挿入するだけで、既存の習慣カード・チェックボタン・メモ機能・並び替えには一切触れない。
- PHP / MySQL 側の変更は一切不要（フロントエンドJSのみ）。
- ダークモード対応はCSS変数で対応済みのため既存テーマ切替に追従する。
- スマホ・PC両対応（既存の`.card`クラスを使用するため自動対応）。

---

## 4. 実装ファイル

変更対象：`pages/main.php` の `<style>` ブロックにCSS変数2行追加、JSの`renderToday()`関数の先頭で`updatePaceAlert()`を呼び出す処理を追加、`updatePaceAlert()`関数とヘルパー関数を追記する（合計追加行数は約80行程度）。