## 1. 色票與全域樣式

- [ ] 1.1 在 `app/globals.css` 加入 `:root` CSS variables（bg-app、accent、3 個 category 色 + 對應背景色、today）
- [ ] 1.2 把 `app/page.tsx` 主背景從 `from-indigo-50 to-blue-100` 換成 `bg-[image:var(--bg-app)]`（或對應寫法）
- [ ] 1.3 把 header `h1` 漸層從 blue→purple 改成 orange→rose
- [ ] 1.4 在 globals.css 加 utility class `.text-cat-work`、`.bg-cat-work-bg` 等 6 個（或於組件內 inline 使用 var）

## 2. 行事曆 inline 行程

- [ ] 2.1 `EventList.tsx` 中把現有 dot+count 區塊改成「最多 N 條 chip + +N 溢位」
- [ ] 2.2 chip 元件：左 3px category 邊條 + 時間 + 標題 truncate；點擊呼叫 `openModal(event)` 並 `e.stopPropagation()`
- [ ] 2.3 chip 顏色透過 `style={{ borderColor: 'var(--cat-X)' }}` 套用，或讀 CATEGORY_META 既有 Tailwind class
- [ ] 2.4 排序：先有 startTime 者按 ASC，其餘排最後
- [ ] 2.5 確認 `min-h-[84px]`、6 行佈局與手機尺寸（<lg）能正確自動降密

## 3. 行事曆密度切換

- [ ] 3.1 在月曆 header 加 segmented control「舒適 / 緊湊」
- [ ] 3.2 兩種模式以 prop 傳入：cell minHeight、chip 字大小、最多顯示數
- [ ] 3.3 偏好存 `localStorage.calendarDensity`，首次載入 read

## 4. Dashboard layout preset

- [ ] 4.1 新增 `components/LayoutSwitcher.tsx`，提供 4 個 preset 按鈕
- [ ] 4.2 將 `app/page.tsx` 的 grid 改為動態（依 preset 切 className）
- [ ] 4.3 preset 存 `localStorage.layoutPreset`，未設定時用 `focus-calendar`
- [ ] 4.4 `<lg` 強制 stack-mobile；switcher 按鈕在小螢幕 disabled
- [ ] 4.5 切換時保留 SWR cache，避免閃爍

## 5. Category 顏色同步至 LINE Flex Message

- [ ] 5.1 將 `app/api/webhook/line/route.ts` 的 `CATEGORY_META.color` 換成同步的色票 hex（與 globals.css 一致）
- [ ] 5.2 保留 LINE 端硬編碼（LINE 不吃 CSS variable），但加註解標記來源

## 6. 邊角細節

- [ ] 6.1 TaskList 卡片：標題色 / 按鈕色換成暖色，保留 emerald check
- [ ] 6.2 ChatLog 卡片：訊息泡泡背景從 blue-50 改成 orange-50/30
- [ ] 6.3 globals.css 的 `.custom-scrollbar` 軌道色改為暖色
- [ ] 6.4 跑 `npx next build` 確認無 TS / build 錯誤
- [ ] 6.5 桌機 / 手機 / 平板三種尺寸實測 + 截圖