# 水晶萬年曆 2026 — 設計決策與改版重點

> 來源：Cursor 對話串整理（可直接貼 Notion）  
> 範圍：`calendar2026.html`、`assets/css/calendar.css`  
> 日期：2026-07

---

## 一、站主設計偏好（從公開頁歸納）

對照已公開頁（首頁、bangxiao、variety-shows、ebook、NJTW5）讀到的設計感：

| 面向 | 偏好 |
|------|------|
| 色調 | 頁面黑底，內容落在奶油色 section；金 `#ffcc00` 當點綴／底線，不當整片 UI 底色 |
| 氣氛 | 偶像粉絲紀念冊、藝廊策展，不是生產力工具／SaaS 儀表板 |
| 版型 | 單欄敘事、扁平區塊；卡片只在「要互動」時出現 |
| 元件 | 金色實心膠囊按鈕、淺底 tabs；陰影溫柔；glow 只用在重點字 |
| 文案感 | 溫柔策展、具體回憶，不堆 emoji 狀態列 |

### 萬年曆初期違和點

- 深色玻璃卡片、霓虹色事件點（紅／綠／橘 glow）
- 篩選 chip＋emoji（🎂🌟🎤）
- 側欄內嵌捲軸
- 整體偏「AI 日曆 dashboard」，與全站暖紙面藝廊感不符

---

## 二、改版原則（站主明確指示）

### ✅ 可以做

- **只改設計感（換皮）**：顏色、字級、陰影、圓角、照片呈現
- 對齊全站暖紙面 section 視覺
- 用 color token，避免硬寫霓虹色

### ❌ 不可以做

- **不要擅自改版型**（例：雙欄改單欄）
- 沒說「執行」前不應改檔（本次站主後來說直接做）
- 只改被點名的頁／區塊

> 站主原話重點：  
> 「我只覺擬改設計，沒有叫你動版型」

---

## 三、已落地的視覺調整

### 整體皮

- 深色玻璃卡 → 暖色 `section` 卡（`--color-surface` / `--color-surface-soft`）
- 控制列與篩選：淺底膠囊＋金色 active
- 日期格、週末色、today／selected：低調暖色系
- 事件點統一品牌金，拿掉多色霓虹
- Modal 改暖紙底

### 版型（維持原狀）

- `calendar-layout` **維持雙欄**（`1fr 380px`）
- 手機 `max-width: 900px` 才改單欄

---

## 四、成員／演唱會照片規則（重點）

### 站主意圖

- **要曬成員美照**，不是小頭像＋蛋糕 icon
- 成員名字要清楚可見
- 不要一堆 🎂 之類花字
- 右側生日卡可上下排（圖上、字下）

### 裁切規則（A4）

| 規則 | 說明 |
|------|------|
| 外框比例 | **A4 直式**（`aspect-ratio: 210 / 297`） |
| 填滿方式 | `object-fit: cover`（**不留黑邊**） |
| 縮放原則 | 以 A4 為裁切框，放大縮小盡量保留原圖主體 |
| 對焦 | `object-position: center 28%`（優先臉／上半身） |

> 站主原話重點：  
> 「以 A4 尺寸為裁切尺寸，放大縮小盡量保持原本的圖」  
> 「怎麼有留黑」→ 禁止用 `contain` 造成黑邊

### 適用範圍（必須一致）

- ✅ 右側生日卡
- ✅ 右側演唱會卡
- ✅ Modal 演唱會圖
- ❌ 不可只改生日、漏掉演唱會

### 右側生日卡版型

- **上下排**：照片在上、名字／英文／日期在下
- 照片用 A4 比例大圖卡（海報感）
- 標題顯示成員名，不顯示「生日快樂🎂」

---

## 五、文案／顯示清理

- 篩選按鈕拿掉 emoji（成員生日／出道重逢／演唱會）
- 事件標題顯示時清掉 `🎂🌟🎤`
- 生日卡拿掉蛋糕 icon
- Modal 生日標題改成員名

---

## 六、待確認／可選下一步

- [ ] 不同成員圖各自對焦點微調（例：`center 20%` / `center 35%`）
- [ ] 相紙邊框／海報感細節
- [ ] 字級層級、卡片密度再微調
- [ ] 是否要把月曆格內生日照再放大

---

## 七、相關檔案

| 檔案 | 用途 |
|------|------|
| `calendar2026.html` | 萬年曆頁面與 JS 邏輯 |
| `assets/css/calendar.css` | 萬年曆專用樣式（本次主要改動） |
| `assets/css/style.css` | 全站 color token |

---

## 八、一句話結論

> 萬年曆只換皮、不換版型；右側生日／演唱會照以 **A4 裁切框＋cover 填滿** 曬海報，不留黑邊、不堆蛋糕 emoji，成員名字要清楚。