## Context

目前首頁以 Next.js App Router + Tailwind v4 撐起，三大卡片元件直接寫死於 `app/page.tsx`：
- 上半 `lg:grid-cols-12` → 行事曆 8 / 待辦 4
- 下半 `w-full` → 對話紀錄 300px 高
- 主背景 `bg-gradient-to-br from-indigo-50 to-blue-100`

行事曆每日格目前是 7×6 grid，每格高度 ~80px。標題加上「日期 + 假日字 + 事件指示器」後，剩下能顯示「行程標題」的高度只剩 ~28px——足夠塞 1-2 條 12-14px 字體的單行 chip。

Task 1 已加上 `Event.category`（WORK/PERSONAL/IMPORTANT），但目前只在 Day List 和月曆計數泡泡裡做了視覺化。

## Goals / Non-Goals

**Goals:**
- 行事曆月覽「**一眼看到當天有什麼**」，毋須點擊。
- 三類別在所有 UI 表面（月曆、Day List、Modal 表單、LINE Flex Message）以**同一組色票**呈現。
- 三卡片佈局**由使用者掌控**（不是工程師寫死），但預設仍保留現行 8/4 平衡。
- 整體色調**更溫暖**：去除藍紫主導，改用米白 + 焦糖 + 木質粉。

**Non-Goals:**
- 不重寫 Tailwind config（v4 是 zero-config，CSS variable 即可）。
- 不引入 drag-and-drop 佈局編輯（v1 只提供 4 個 preset）。
- 不做行事曆週覽 / 日覽（v1 仍只有月覽，但格內變密）。
- 不動 Prisma schema、不動 API、不動 LINE webhook。

## Decisions

### D1. 色票系統採 CSS Variables，不動 Tailwind config

在 `app/globals.css` 加：

```css
:root {
  --bg-app: linear-gradient(135deg, #FFF8F1 0%, #FBEEDC 100%);
  --accent-primary: #C2410C;     /* warm caramel */
  --accent-soft:    #FED7AA;
  --cat-work:       #2563EB;     /* trusty blue */
  --cat-work-bg:    #DBEAFE;
  --cat-personal:   #059669;     /* fresh teal-green */
  --cat-personal-bg:#D1FAE5;
  --cat-important:  #DB2777;     /* warm magenta — 避開假日紅 */
  --cat-important-bg:#FCE7F3;
  --today:          #7C3AED;
}
```

- 各元件以 inline style `var(--cat-work)` 或自訂 Tailwind plugin 使用。
- **重要特殊改用 magenta**（非紅），避免與「假日 / 紀念日紅字」相撞。

### D2. 月曆格內 inline 行程設計

每格佈局（高度 ~96px，緊湊模式 ~84px）：

```
┌─────────────────┐
│  15      (假日字) │ ← 日期列
│ ▪ 09:00 客戶會議 │ ← chip 1 (category color)
│ ▪ 14:30 看牙醫   │ ← chip 2
│           +3    │ ← overflow indicator
└─────────────────┘
```

- chip：左 3px category 邊條 + 透明背景 + 12px 字 + 1 行 truncate。
- 順序：依 `startTime` ASC；無時間者排最後。
- 超過 2 條（緊湊模式 3 條）顯示 `+N`，點擊整格進 Day List 看全部。
- 點 chip 本身直接打開該行程編輯 Modal（stopPropagation）。

### D3. 三卡片 layout preset

在 `app/page.tsx` 上加一個 `LayoutSwitcher` 元件，提供：

| Preset | 行事曆 | 待辦 | 對話紀錄 |
|---|---|---|---|
| `focus-calendar`（預設） | 8 cols | 4 cols 右上 | 12 cols 下方 300px |
| `balanced` | 6 cols | 6 cols 右 | 12 cols 下方 300px |
| `three-column` | 5 cols | 4 cols | 3 cols 同列 |
| `stack-mobile` | 12 cols | 12 cols | 12 cols（單欄垂直） |

- preset 值存 `localStorage.layoutPreset`，預設 `focus-calendar`。
- 切換按鈕放在頁首右側（icon button + dropdown 或 segmented control）。
- 手機（<lg）強制 `stack-mobile`，桌機才尊重 preset。

### D4. 暖色 palette 套用範圍

- `<main>` 背景：以 var 取代 indigo→blue。
- header `h1` 漸層：`from-orange-600 to-rose-500`（取代 blue→purple）。
- Card 容器 `bg-white/80` 保留但邊框改 `border-orange-100/50`。
- 按鈕主色 `bg-gradient-to-r from-orange-500 to-rose-500`，但「今日」「儲存」維持紫色作差異。

### D5. 行事曆密度切換

- 在月曆 header 加一個 segment：「舒適 / 緊湊」。
- 舒適：格高 96px，chip 13px 字，最多顯示 2 條。
- 緊湊：格高 84px，chip 11px 字，最多顯示 3 條。
- 偏好存 `localStorage.calendarDensity`。

## Risks / Trade-offs

| 風險 | 緩解 |
|---|---|
| 行事曆格內塞太多文字，6 行月份（如 2026/05）會擠到底 | 用 `min-h-[84px]` 而非 fixed height；底部留 4px buffer；超出顯示 `+N` |
| 暖色 palette 對於「紅色 = 假日 = 國定假日字」造成混淆 | 重要特殊改用 magenta；假日紅保留現行 red-500 |
| Layout preset 切換時 SWR 重渲染可能閃爍 | preset 改變不影響 fetch URL；只動外層 grid className，SWR cache 保留 |
| 手機尺寸下 layout preset 強制覆寫，使用者疑惑「為什麼沒效」 | 在 switcher 旁顯示「桌機可用」提示；手機按鈕 disabled |
| 行事曆 chip 字 truncate 後使用者看不清標題 | hover 顯示 tooltip（瀏覽器原生 `title`），且點擊整格進 Day List 仍看得到完整 |
| 第一次部署視覺差異大，使用者不適應 | 提供 console 隱藏旗標 `localStorage.legacyTheme = 1` 回到舊配色（過渡 1 個月後移除） |

## Open Questions

1. 是否要把 TaskList 與 ChatLog 的卡片大小也做成可拖曳調整（v2）？
2. 月曆 chip 顯示「時間 + 標題」是否會排擠標題長度？v1 先保留時間，必要時改成只顯示標題、時間移到 tooltip。
3. 是否要做 Dark Mode？目前暖色 palette 在 dark 下需要另一組 CSS variables。