# EwoooC × MOMO Pro — Claude Design Brief
**Version:** 1.0 (2026-05-01)
**Purpose:** 供 Claude Design 理解現況並繼續 UI/UX 視覺設計優化。

---

## 1. 專案概覽

| 欄位 | 內容 |
|------|------|
| 產品名稱 | EwoooC 商家後台（原名 MOMO Pro）|
| 產品類型 | B2B 電商監控與管理系統（商品價格監控、活動管理、業績分析）|
| 語言 | 繁體中文 (zh-TW) |
| 渲染方式 | Server-side Jinja2 (Flask)，無 SPA |
| CSS 框架 | Bootstrap 5.3.3 |
| 圖標庫 | Font Awesome 6.0.0 |
| 圖表 | Chart.js 3.9.1 + ECharts 5.4.3 |

---

## 2. 設計語言宣言

> **"Claude 暖系 × Nothing Phone 點陣機械感"**

### 核心哲學
- **底色**：溫暖米紙感（`#ebe6dc`）— 不刺眼的辦公室頁面底
- **主調**：焦糖橘（`#c96442`）— 暖而有力的品牌色，取自 Claude AI 色調
- **黑白對比**：Nothing Phone 風格的純黑側欄（`#1a1a1a`）搭配鮮明白字
- **排版**：標題用 JetBrains Mono 等寬字，機械儀表板感；內文用 Inter + Noto Sans TC
- **裝飾**：8px 點陣背景（dot matrix）作為深色卡片的背景紋路
- **陰影哲學**：線條優先（`1px solid rgba(...)`），避免大陰影，方角為主（radius 最大 6px）

---

## 3. 兩套 Layout 系統（重要！現況）

目前有**兩個共存的 Base Template**，正處於從舊版遷移至新版的過渡期：

### 3-A. 舊版（`base.html` + `_navbar.html`）
- **Layout**：頂部固定 Navbar，全頁 container 排版
- **Navbar**：深藍漸層 `#1e3c72 → #2a5298`，固定頂部 `position: fixed`
- **背景**：淺灰冷色 `linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%)`
- **Accent 顏色**：藍紫漸層 `#667eea → #764ba2`（舊品牌色，仍在多數頁面中）
- **使用頁面**：`dashboard.html`、`sales_analysis.html`、`monthly_summary_analysis.html` 等主要功能頁

### 3-B. 新版（`ewoooc_base.html` + `ewoooc-tokens.css` + `ewoooc-shell.css`）
- **Layout**：CSS Grid Sidebar（240px）+ 主內容區，Topbar 64px sticky
- **Sidebar**：純黑背景 `#1a1a1a`，白色文字，焦糖橘 accent 高亮
- **背景**：米色紙張感 `#ebe6dc`
- **Accent 顏色**：焦糖橘 `#c96442`（新品牌色）
- **使用頁面**：`vendor_stockout/`、部分新功能頁面（EwoooC 路由下的頁面）

**設計方向**：以 3-B 新版為目標方向，所有優化/新設計請對齊新版設計系統。

---

## 4. 完整 Design Token（Source of Truth）

### 4.1 色彩系統

#### 背景層次（米色系）
```
--momo-bg-body:     #ebe6dc   ← 頁面底色（最深）
--momo-bg-surface:  #faf7f0   ← 卡片表面（預設）
--momo-bg-elevated: #fdfaf3   ← 懸浮/選中卡片
--momo-bg-subtle:   #e2dccf   ← 分隔區塊底色
--momo-bg-muted:    #cfc7b5   ← 更暗的區塊
--momo-bg-paper:    #f3eee2   ← Sidebar 底色、特殊卡片
```

#### 文字層次（暖墨系）
```
--momo-text-primary:   #2a2520   ← 主要內文
--momo-text-secondary: #645c52   ← 次要說明
--momo-text-tertiary:  #9b9081   ← 標籤標題、placeholder
--momo-text-disabled:  #c4baa8   ← 禁用狀態
--momo-text-inverse:   #faf7f0   ← 深色背景上的白字
--momo-text-link:      #c96442   ← 連結色
--momo-text-link-hover:#8f4530   ← 連結懸停
```

#### 主色調（焦糖橘）
```
--momo-accent:     #c96442   ← 主 accent，Button/Active/Badge
--momo-accent-50:  #fbf2ef   ← 極淡（hover 背景）
--momo-accent-100: #f5e1d9   ← 淡（選中 tag 背景）
--momo-accent-200: #ecc3b3   ← 較淡
--momo-accent-500: #c96442   ← = accent（主）
--momo-accent-600: #b1543a   ← hover 按鈕
--momo-accent-700: #8f4530   ← active/pressed 按鈕
--momo-accent-soft: rgba(201,100,66,0.12)  ← 懸停背景
```

#### 狀態色（去飽和，適配米色底）
```
成功 success:  text #2a7a3f | bg #e3ebd9 | border #c5d4b0
危險 danger:   text #b5342f | bg #f0d8d4 | border #d9b1ac
警告 warning:  text #b88416 | bg #f3e7c4 | border #d9c590
資訊 info:     text #2d5d80 | bg #d8e2ea | border #b5c5d2
```

#### 邊框與分隔線
```
--momo-border:       #2a2520 （實線邊框）
--momo-border-light: rgba(42,37,32,0.16)  ← 淡分隔線
--momo-border-focus: #c96442  ← 聚焦狀態
--momo-divider:      rgba(42,37,32,0.12)
```

#### 導航色（Nothing 黑）— Sidebar 專用
```
sidebar background:  #1a1612（深暖黑）
nav-link hover bg:   rgba(201,100,66,0.12)（accent-soft）
nav-link active bg:  #c96442（實色焦糖橘）
nav-link active text: #faf7f0（反色）
status-card border:  rgba(201,100,66,0.35)（橘色描邊）
```

### 4.2 Typography

#### 字型堆疊
```
Display（標題）: "JetBrains Mono", "Space Mono", "SF Mono", Menlo, Consolas, monospace
Body（內文）:   "Inter", -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif
Mono（數據）:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace
```

#### 字型大小
```
xs   → 0.75rem  (12px)  ← 極小標籤
sm   → 0.8125rem (13px) ← 次要內文、導航項目
base → 0.9375rem (15px) ← 主要內文
lg   → 1.0625rem (17px) ← 稍大內文
xl   → 1.625rem  (26px) ← 頁面主標題
2xl  → 2.25rem   (36px) ← 大數字顯示
```

#### 字重與行高
```
normal:   400   base line-height: 1.5
medium:   500   tight line-height: 1.15（標題）
semibold: 600   loose line-height: 1.7（長文）
bold:     700
black:    800（品牌名稱、數字展示用）
```

#### 特殊文字工具類
```css
.momo-display  → JetBrains Mono，標題用，搭配 font-feature-settings: "tnum", "ss01"
.momo-mono     → 等寬字體，數字/代碼，搭配 font-feature-settings: "tnum"
.momo-label    → JetBrains Mono 10px，font-weight 600，letter-spacing 0.12em，text-transform uppercase
                 用於分類標題、狀態標籤（如 "監控" "營運" "系統"）
```

### 4.3 間距系統（8px 基數）
```
--momo-space-1: 0.25rem  (4px)
--momo-space-2: 0.5rem   (8px)
--momo-space-3: 0.75rem  (12px)
--momo-space-4: 1rem     (16px)
--momo-space-5: 1.5rem   (24px)
--momo-space-6: 2rem     (32px)
--momo-space-7: 3rem     (48px)
--momo-space-8: 4rem     (64px)
```

頁面內容區 padding：`28px 32px 40px`（desktop），`20px 16px 32px`（mobile）

### 4.4 圓角系統（方角優先）
```
--momo-radius-sm:     2px   (0.125rem) ← badge、code、shortcut
--momo-radius-md:     4px   (0.25rem)  ← 按鈕、輸入框、卡片 → 預設
--momo-radius-lg:     6px   (0.375rem) ← 較大卡片、modal
--momo-radius-pill:   50rem            ← 圓形按鈕、chip
--momo-radius-circle: 50%              ← 頭像
```

> 注意：舊版頁面（dashboard.html）使用更大的圓角（16px~20px）。新設計請用 4px~6px。

### 4.5 陰影系統（線條感優先）
```
--momo-shadow-sm:      0 0 0 1px rgba(26,26,26,0.08)
--momo-shadow-md:      0 0 0 1px rgba(26,26,26,0.10)
--momo-shadow-lg:      0 12px 40px -8px rgba(26,26,26,0.18), 0 0 0 1px rgba(26,26,26,0.10)
--momo-shadow-colored: 0 0 0 2px rgba(201,100,66,0.25) ← accent 聚焦輪廓
```

> 陰影哲學：主要靠 `1px solid border` 定義邊界，大投影只用於 Modal/Popover。

### 4.6 動畫系統
```
--momo-duration-fast:   0.12s   ← hover/focus 狀態切換
--momo-duration-normal: 0.2s    ← sidebar 展收、dropdown
--momo-duration-slow:   0.4s    ← Modal 出現、頁面過渡
--momo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
--momo-ease-out:    cubic-bezier(0, 0, 0.2, 1)

基礎過渡（所有互動元件預設）：
  color / background-color / border-color / box-shadow，各 0.12s ease-in-out
```

特殊動畫：
```css
@keyframes momo-pulse-dot    ← sidebar 底部爬蟲狀態 live dot（2s 閃爍）
@keyframes momo-fade-in      ← 元素出現（opacity + translateY 2px）
@keyframes momo-slide-up     ← Toast 進場（opacity + translateY 12px）
```

### 4.7 Z-Index 層級
```
1     → base
1000  → dropdown
1020  → sticky topbar
1030  → fixed elements
1040  → modal backdrop
1050  → modal
1060  → popover
1070  → tooltip
1080  → toast
```

### 4.8 Layout 尺寸
```
sidebar width:           240px
sidebar collapsed width: 72px（1180px 以下自動切換）
topbar height:           64px
```

---

## 5. 版面結構（新版 EwoooC Shell）

```
┌─────────────────────────────────────────────────────┐
│  .momo-shell  (CSS Grid: sidebar | main)            │
│                                                      │
│  ┌──────────┐  ┌──────────────────────────────────┐ │
│  │ .momo-   │  │  .momo-main-shell                │ │
│  │  sidebar │  │                                  │ │
│  │          │  │  ┌──────────────────────────────┐│ │
│  │  Logo    │  │  │ .momo-topbar (sticky, 64px)  ││ │
│  │  Nav     │  │  │  [hamburger] [search] [user] ││ │
│  │  Groups  │  │  └──────────────────────────────┘│ │
│  │          │  │                                  │ │
│  │  Status  │  │  ┌──────────────────────────────┐│ │
│  │  Card    │  │  │ .momo-content (28px 32px pad) ││ │
│  │          │  │  │   {% block ewooo_content %}  ││ │
│  │          │  │  └──────────────────────────────┘│ │
│  └──────────┘  └──────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
```

### Sidebar 細節
- **Logo 區**：`momo-logo-mark`（3×3 點陣格，黑底白點，右上角點空缺）+ `momo-brand-name`（JetBrains Mono, 18px, 800 weight）
- **Nav Group 標題**：`.momo-label`（10px 大寫等寬），右側延伸分隔線 `::after`
- **Nav Link**：左 icon（16px）+ label + 右側數字代碼（opacity 0.48）
  - Default：透明底，暖墨字
  - Hover：`accent-soft` 背景（rgba(201,100,66,0.12)）
  - Active：`accent` 實色背景（#c96442），白字
- **Status Card**：sidebar 底部，暖黑底 `#1a1612` + 橘色描邊 + 點陣背景紋，顯示爬蟲狀態

### Topbar 細節
- 左：mobile 漢堡選單（hidden on desktop）
- 中左：搜尋框（flex-grow，最大 480px），`⌘K` 快捷鍵 badge
- 中右彈性空間
- 右側：排程時間 pill（深黑底+橘邊）、圖示按鈕（問號/鈴鐺）、使用者 chip（頭像+姓名+角色）

---

## 6. 元件規格

### 6.1 按鈕

#### Primary Button（CTA）
```
背景：--momo-accent (#c96442)
文字：--momo-text-inverse (#faf7f0)
邊框：none
圓角：--momo-radius-md (4px)
Hover：--momo-accent-600 (#b1543a)
Active：--momo-accent-700 (#8f4530)
Padding：9px 20px
Font：0.875rem，600 weight
```

#### Secondary / Ghost Button
```
背景：transparent
文字：--momo-text-primary (#2a2520)
邊框：1px solid --momo-border-light
圓角：4px
Hover：bg --momo-bg-subtle
```

#### Danger Button
```
背景：--momo-danger (#b5342f)
文字：white
```

#### Icon Button（.momo-icon-button）
```
尺寸：36×36px
背景：transparent
圓角：4px
Hover：bg --momo-bg-subtle
Color：--momo-text-secondary → primary on hover
```

### 6.2 卡片（Card）
```
背景：--momo-bg-surface (#faf7f0)
邊框：1px solid --momo-border-light
圓角：--momo-radius-lg (6px)
陰影：--momo-shadow-sm
Padding：24px (1.5rem)
Hover（可選）：--momo-shadow-md
```

特殊：深色 Status Card（sidebar 底部）
```
背景：--momo-ink-strong (#1a1612)
邊框：1px solid rgba(201,100,66,0.35)
點陣背景紋路：radial-gradient dots，6px×6px
文字：rgba(250,247,240,0.55) 標題 / rgba(250,247,240,0.62) 內文
```

### 6.3 表格
```
Border：none（預設），行底部 border-bottom: 1px solid --momo-divider
Header：--momo-bg-paper 底色，--momo-label 樣式欄位標題
Hover Row：--momo-accent-soft 背景
Cell Padding：12px 16px
Data 數字：.momo-mono 字體
狀態 Badge：pill 形（border-radius: 2px），對應狀態色
```

### 6.4 徽章（Badge）
```
圓角：2px（方角）
Font：10px，800 weight，全大寫
Color：--momo-text-inverse (#faf7f0)
背景：--momo-accent（主要），或對應狀態色
Padding：1px 6px
```

### 6.5 搜尋框（.momo-search-box）
```
高度：38px
背景：--momo-bg-paper
邊框：1px solid --momo-border
圓角：4px
Placeholder：--momo-text-secondary
Focus border：--momo-accent
左側 icon：fa-search，margin-right 10px
右側：⌘K shortcut badge（accent 背景，2px 圓角）
```

### 6.6 Toast 通知
```
位置：右上角固定（top: 24px, right: 24px），z-index: 1080
寬度：max 360px
圓角：6px
自動消失：3秒
進場動畫：slide-up（opacity + translateY 12px → 0）
類型色：成功綠 / 危險紅 / 警告黃 / 資訊藍
```

### 6.7 Modal
```
背景：--momo-bg-surface
圓角：--momo-radius-lg (6px)
Header：--momo-ink 背景，白字（舊版用 #667eea 漸層，新版請改用暖墨色）
Backdrop：rgba(26,26,26,0.70)
最大寬度：sm 400px / md 640px / lg 960px / xl 1140px
```

### 6.8 用戶頭像 Chip（.momo-user-chip）
```
高度：40px
Padding：4px 10px 4px 4px
圓角：pill（50rem）
Avatar：32×32px 圓形，背景 --momo-ink，白字，13px 800weight
Hover：bg --momo-bg-subtle
```

### 6.9 點陣裝飾（.momo-dot-bg）
```css
background-image: radial-gradient(circle, rgba(26,26,26,0.12) 1px, transparent 1px);
background-size: 8px 8px;
```
用於深色背景卡片（Status Card）或特殊區塊裝飾。

---

## 7. 導航結構

```
Sidebar Nav
├── 【監控】
│   ├── 01 商品看板      /              → fa-border-all
│   ├── 02 活動看板      /edm           → fa-bullhorn
│   └── 03 分析報表      /sales_analysis → fa-chart-line
├── 【營運】
│   ├── 04 廠商缺貨      /vendor-stockout → fa-box-open
│   ├── 05 AI 助手       /ai_recommend   → fa-wand-magic-sparkles
│   └── 06 雲端匯入      /auto_import    → fa-download
└── 【系統】
    └── 07 系統管理      /settings       → fa-gear
```

舊版 Navbar（base.html 頁面）另有獨立下拉選單結構（業績分析/AI助手/系統管理各含多個子項目）。

---

## 8. 主要頁面清單

> **完整逐頁深度盤點請見 [`claude_design_brief_pages.md`](claude_design_brief_pages.md)（Appendix A）**
> 該附錄涵蓋 41 個 template + 3 個 component，每頁包含路徑/路由/Layout/區塊/元件/互動/配色/設計問題/改造重點 9 個欄位。

### 8.1 設計風格分布總覽（深掃後校正）

實際發現 **4 種視覺風格混雜**，不只 2 種：

| 風格 | 背景 | Accent | 頁面數 | 處置 |
|------|------|--------|--------|------|
| **A. 深藍 + 藍紫漸層**（舊主流）| `#f5f7fa` | `#1e3c72→#2a5298` + `#667eea→#764ba2` | 23+ | **全部遷移至 B** |
| **B. 焦糖橘暖系**（目標） | `#ebe6dc` | `#c96442` | 6+ | 維持並擴張 |
| **C. 紫色獨立入口頁** | `#667eea→#764ba2` | `#4F46E5` | 4 (login/403/maintenance/_loading) | 改用焦糖橘色相 |
| **D. GitHub Dark Terminal** | `#0d1117` | `#3fb950/#58a6ff/#bc8cff` | 2 (ai_automation_smoke/code_review) | 保留深色但與焦糖橘對齊 |

### 8.2 風格 B（目標設計）參考頁面

Claude Design 可直接參考這幾頁的 Pattern 作為其他頁面遷移的樣板：

| 頁面 | 路徑 | 為何是樣板 |
|------|------|-----------|
| `vendor_stockout_index_v2.html` | `/vendor-stockout` | 風格 B 最完整實作：Hero+Pulse Box+KPI Grid+Flow Cards+Summary |
| `edm_dashboard_v2.html` | `/edm/dashboard_v2` | 含 Chart.js 整合的範例（Modal 內動態載圖）|
| `vendor_stockout_import_v2.html` | `/vendor-stockout/import` | Dropzone + 多狀態面板（File/Progress/Result/Error）|
| `_ewoooc_shell.html` | (component) | Sidebar 導航結構與 Status Card |

### 8.3 重點優化頁面 Top 10

依照「使用頻率 × 設計債務 × 影響範圍」排序：

| 排名 | 頁面 | 行數 | 主要債務 |
|------|------|------|---------|
| 1 | `dashboard.html` | 1405 | 流量最大首頁，舊藍紫，無空狀態 |
| 2 | `sales_analysis.html` | 3165 | 系統最複雜頁，三種圖表庫並存 |
| 3 | `web/templates/vendor_stockout/list.html` | 1793 | 1600+ 行 inline JS 無模組化 |
| 4 | `daily_sales.html` | 1905 | 自訂月曆 878 行 CSS，行動版爆表 |
| 5 | `settings.html` | 1650 | 巨型設定頁，padding 重疊 bug |
| 6 | `monthly_summary_analysis.html` | 1473 | ECharts 待換 Chart.js |
| 7 | `edm_dashboard_v2.html` | 1130 | 已是 B 風格但 CSS 600+ 行待精簡 |
| 8 | `ai_recommend.html` | 1000+ | AI 互動 UX 流式輸出未實作 |
| 9 | `user_management.html` | 906 | 權限矩陣未視覺化 |
| 10 | `logs.html` | 872 | 篩選器邏輯複雜，最佳重構樣本 |

---

## 9. 色彩衝突說明（設計遷移中）

目前有**三種 Accent 色系混用**，這是技術債，新設計一律使用 **焦糖橘**：

| 色系 | Hex | 出現位置 | 備注 |
|------|-----|---------|------|
| 焦糖橘 ✓ | `#c96442` | ewoooc 新版頁面 | **目標設計色** |
| 藍紫 ✗ | `#667eea → #764ba2` | dashboard.html、表格 header、按鈕 | 舊版，待替換 |
| 深藍 ✗ | `#1e3c72 → #2a5298` | 舊版 Navbar、base.html | 舊版，待替換 |

---

## 10. 響應式斷點

| 斷點 | 寬度 | 行為 |
|------|------|------|
| Desktop | ≥1180px | Sidebar 240px 全展開，顯示文字 |
| Collapsed | 1180px–820px | Sidebar 收至 72px，只顯示圖標 |
| Mobile | ≤820px | Sidebar 隱藏（slide-in 抽屜式），hamburger 按鈕出現 |

Topbar 漸進隱藏（Container Query）：
- ≤1024px：隱藏排程 pill
- ≤880px：隱藏使用者名稱/角色
- ≤720px：隱藏搜尋框文字

---

## 11. 圖表設計規範

### Chart.js（折線圖、柱狀圖、圓餅圖）
目前使用舊藍紫色系，應遷移至：
```
主線色：#c96442（焦糖橘）
輔助線：#b5342f（暗紅，下跌）、#2a7a3f（深綠，上漲）
Fill 漸層：從 rgba(201,100,66,0.3) → rgba(201,100,66,0.05)
格線：rgba(42,37,32,0.06)（極淡）
Tooltip：背景 rgba(26,26,26,0.88)，白字，焦糖橘描邊
```

### ECharts（複雜多維圖表）
應使用同色系調色板，確保視覺一致。

---

## 12. 互動模式

| 模式 | 實現方式 |
|------|---------|
| 表格行點擊展開詳情 | onclick → Bootstrap Modal |
| KPI Card 點擊鑽取 | onclick → Modal + fetch API |
| 搜尋篩選 | form GET 提交（非 SPA） |
| 操作回饋 | Toast 通知（右上角滑入） |
| 複製品號 | Clipboard API + 視覺回饋（文字變 ✅ 已複製）|
| 載入狀態 | Bootstrap spinner-border |
| 全頁載入 | 自訂 overlay 動畫（WOOO 品牌）|

---

## 13. 品牌資產

### Logo 變體
```
logo.png             → 標準 logo
logo_transparent.png → 透明底
logo_v4_gradient.png → 漸層版
logo_v4_glass.png    → 玻璃質感
logo_navbar.svg      → 導航列向量版
logo_circle.svg      → 圓形版
```

### 品牌名稱
- 老品牌：**WOOO** / **WOOO TECH**
- 新品牌：**EwoooC**（等寬字體呈現，副標：「價格監控 V2」）

### Logo Mark（點陣格設計）
```
3×3 格，32×32px，gap 1.5px，padding 5px
背景：--momo-ink (#1a1612)，圓角 2px
點：圓形白點
中心格（第5格）：空白
→ 點陣 ⠿ 風格，Nothing Phone 美學
```

---

## 14. 當前設計亮點（可保留延伸）

1. **JetBrains Mono 標題** — 機械儀表板感，數字排版優秀
2. **點陣背景裝飾** — Status Card 深色背景上的橘色點陣，獨特品牌感
3. **Live Dot 動畫** — 橘色脈衝點，搭配發光陰影 `box-shadow: 0 0 8px #c96442`
4. **Nav Code 數字** — 每個導航項目右側的灰色數字代碼（01~07），Like a terminal
5. **焦糖橘 × 暖墨 × 米白** — 三色搭配溫暖而不俗氣
6. **⌘K 搜尋框** — 開發者友善，鍵盤優先設計

---

## 15. 當前設計弱點（優化方向）

1. **兩套設計系統未統一** — 舊版藍紫 vs 新版焦糖橘，視覺割裂感強
2. **Dashboard 主頁** — 流量最大的頁面仍用舊版，設計待升級
3. **大圓角** — 舊版 16~20px border-radius，與新版方角設計衝突
4. **無 Dark Mode** — Design Token 已備妥，只缺 JS 實現
5. **Modal Header** — 舊版用藍紫漸層，應統一為暖墨色
6. **缺共用元件庫** — 卡片/表格/表單 Pattern 散落各頁面，未抽象化
7. **無 Focus Style** — Accessibility 待加強（focus-visible 輪廓）
8. **空狀態 (Empty State)** — 多數頁面僅有文字，缺圖示/插圖

---

## 16. 技術限制（設計時須知）

- **無 CSS Build Tool**：無法使用 SCSS/PostCSS，所有 CSS 必須是原生 CSS 或內嵌 `<style>`
- **無前端框架**：無 React/Vue，互動依賴 Bootstrap 5 JS + Vanilla JS
- **CDN 引用**：Bootstrap、Font Awesome、Chart.js 等均從 CDN 載入
- **Jinja2 模板**：設計元素需考慮 Flask 模板語法（`{{ variable }}`、`{% if %}`）
- **Bootstrap 5 共存**：新設計的元件需能與 Bootstrap 5 Class 共存，不衝突

---

*此文件由 Claude Code 自動掃描 45+ 個 template 檔案及 CSS token 系統生成，2026-05-01。*
