jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 新增 color-tokens 規範文件

Browse Source
This commit is contained in:
jekkinoopy
2026-06-11 15:34:47 +08:00
parent b0cb52fec9
commit 945adc79f6
60 changed files with 17908 additions and 17842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
待確認/.cursor/collaboration-notes.md
+57 -57
View File
@@ -1,57 +1,57 @@
# 站主與助手協作備忘
> **明天先看** → [`.cursor/明天先看.md`](./明天先看.md) → 內頁 header 整理 [`inner-page-header-audit.md`](./inner-page-header-audit.md)
由對話整理；**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」，不取代規則檔。
---
## 1. 邊界（站主明講）
- **沒有叫你做的，不要順手做**（含刪註解、順手整理、自訂「以後我都會……」流程）。
- **看不懂先問**；你說「執行」再改檔。你說「檢查」就只對照回報，**不擅自改**。
- **不要自己訂規則**代替站主（例如自創「只調樣式就保留註解」這類概括）。
---
## 2. 參考圖怎麼讀
- **畫線／粉線**：提醒「這一段要看」，**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。
- **實際標記**：對照圖裡**字重、黃標、一般內文**，再對應既有 class（`mark_y`、`mark_b`），自己判斷。
- **開發者工具截圖**（勾選／刪除線）：照**屬性開關**改 CSS；沒叫動註解就不要動註解。
---
## 3. 首頁 `#mission`（做法，非定稿內容）
- 第一段：站主若只說調 span，**只**增刪 `<span>` 與既有 class；未要求不改 CSS。實際哪些詞要 `mark_y`／`mark_b` **會變**，以當下 `index.html` 與站主圖為準，**不寫死**在筆記。
- 第二段金句：未要求時**只改內文**、不改 span 結構。
- devtools 截圖：照屬性開關改；沒叫動註解就不要動註解。
---
## 4. 籌備中連結（`portal-nav.js`，若後續對話有改動以檔案為準）
- 頂欄與頁內按鈕：**`NAV_SOON_PHRASES` 隨機氣泡**（滑過）；無障礙 aria「尚無開放」。
- 頁內按鈕：**不加**可見「（籌備中）」後綴。
- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）。
---
## 5. 2026-05 慘痛教訓（務必讀 `agent-must-ask.mdc`）
- 用 PowerShell 批次改全站 HTML **沒 UTF-8** → 首頁中文全毀、`</span>` 露出；已 `git checkout` 還原 HTML。
- **擅自**把 `map-archive-header` 改成 `inner-page-header`（站主沒點頭、沒給名字）。
- 站主說先電子書 + dev `center 78%`，助手卻自加 `clamp`／全站 `100vh`／又全站改掉。
- 頂欄擅自「傳奇的轉折（六六歌2）」— 已改回「傳奇的轉折」；以後 nav 文案不自擴。
---
## 6. 相關規則檔
| 檔案 | 用途 |
|------|------|
| `.cursor/rules/agent-must-ask.mdc` | **必問再改**、禁止批次毀 UTF-8、header／nav 勿擅自改名 |
| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍、共用 CSS |
| `.cursor/rules/user-scope-and-nav.mdc` | 導覽開放、錨點刪除 |
| `.cursor/rules/portal-nav-rules.mdc` | `portal-nav.js` 技術細節 |
# 站主與助手協作備忘
> **明天先看** → [`.cursor/明天先看.md`](./明天先看.md) → 內頁 header 整理 [`inner-page-header-audit.md`](./inner-page-header-audit.md)
由對話整理；**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」，不取代規則檔。
---
## 1. 邊界（站主明講）
- **沒有叫你做的，不要順手做**（含刪註解、順手整理、自訂「以後我都會……」流程）。
- **看不懂先問**；你說「執行」再改檔。你說「檢查」就只對照回報，**不擅自改**。
- **不要自己訂規則**代替站主（例如自創「只調樣式就保留註解」這類概括）。
---
## 2. 參考圖怎麼讀
- **畫線／粉線**：提醒「這一段要看」，**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。
- **實際標記**：對照圖裡**字重、黃標、一般內文**，再對應既有 class（`mark_y`、`mark_b`），自己判斷。
- **開發者工具截圖**（勾選／刪除線）：照**屬性開關**改 CSS；沒叫動註解就不要動註解。
---
## 3. 首頁 `#mission`（做法，非定稿內容）
- 第一段：站主若只說調 span，**只**增刪 `<span>` 與既有 class；未要求不改 CSS。實際哪些詞要 `mark_y`／`mark_b` **會變**，以當下 `index.html` 與站主圖為準，**不寫死**在筆記。
- 第二段金句：未要求時**只改內文**、不改 span 結構。
- devtools 截圖：照屬性開關改；沒叫動註解就不要動註解。
---
## 4. 籌備中連結（`portal-nav.js`，若後續對話有改動以檔案為準）
- 頂欄與頁內按鈕：**`NAV_SOON_PHRASES` 隨機氣泡**（滑過）；無障礙 aria「尚無開放」。
- 頁內按鈕：**不加**可見「（籌備中）」後綴。
- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）。
---
## 5. 2026-05 慘痛教訓（務必讀 `agent-must-ask.mdc`）
- 用 PowerShell 批次改全站 HTML **沒 UTF-8** → 首頁中文全毀、`</span>` 露出；已 `git checkout` 還原 HTML。
- **擅自**把 `map-archive-header` 改成 `inner-page-header`（站主沒點頭、沒給名字）。
- 站主說先電子書 + dev `center 78%`，助手卻自加 `clamp`／全站 `100vh`／又全站改掉。
- 頂欄擅自「傳奇的轉折（六六歌2）」— 已改回「傳奇的轉折」；以後 nav 文案不自擴。
---
## 6. 相關規則檔
| 檔案 | 用途 |
|------|------|
| `.cursor/rules/agent-must-ask.mdc` | **必問再改**、禁止批次毀 UTF-8、header／nav 勿擅自改名 |
| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍、共用 CSS |
| `.cursor/rules/user-scope-and-nav.mdc` | 導覽開放、錨點刪除 |
| `.cursor/rules/portal-nav-rules.mdc` | `portal-nav.js` 技術細節 |
待確認/.cursor/inner-page-header-audit.md
+128 -128
View File
@@ -1,128 +1,128 @@
# 內頁頂部 header／header-inner 差異整理
站主自用；整理日：2026-05。程式真值以 repo 為準，改檔前請再對一次檔案。
---
## 重點
- **全 repo 沒有任何 `.header-inner` 的 CSS**；差異在外層 `header` 的 class 與內層 `.main-title`、`.subtitle-wrap`、`.sub-title`。
- 標準內頁 HTML 幾乎相同；視覺不統一多半是 **CSS 疊加** 或 **少數頁根本沒用同一套 class**。
---
## 一、HTML 結構對照
| 類型 | 頁面 | 結構 |
|------|------|------|
| **標準** | `extra/totoga2-copy-ebook.html`、`extra/totoga2-copy-timeline.html`、`concert/concert.html`、`yellow-note/map.html`、`member/member.html`、`albums/albums.html`、`variety/variety.html`、`fallen/totoga2.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`yellow-note/minister.html`、`extra/minister_ge.html`、`extra/totoga2 copy.html` 等 | `header.map-archive-header` → `motion.header-inner` → `h1.main-title` + `motion.subtitle-wrap` → `span.sub-title` |
| **首頁** | `index.html` | `header#origin` → `motion.hero`（**無** `header-inner`） |
| **無 header** | `extra/totoga2-video.html` | 無頂部 banner 區塊 |
| **另一套** | `extra/grok.html` | 裸 `<header>` → `motion.hero` |
| **另一套** | `variety/NJTW/NJTW5.html` | `header.main-header`（無 `header-inner`） |
---
## 二、CSS 來源（誰在管頂部）
### 1. 多數內頁共用 — `assets/css/style.css`
| 選擇器 | 內容摘要 |
|--------|----------|
| `header.map-archive-header` | `height: auto`；`min-height: clamp(14rem, 38vh, 24rem)`；`background-position: center 78%`；`background-size: cover`；`padding: clamp(1.75rem, 4vh, 2.75rem) 20px` |
| `.map-archive-header .main-title` | `clamp(2rem, 4.5vw, 3.2rem)`、黃字、字距 6px |
| `.map-archive-header .subtitle-wrap` | `margin-top: 20px` |
| `.map-archive-header .subtitle-wrap::before/::after` | 黃線 3px、`max-width: 56px` |
| `.map-archive-header .sub-title` | `0.92rem`、`#d4d4d4`、`letter-spacing: 4px` |
| `@media (max-width: 920px)` `.map-archive-header .main-title` | `letter-spacing: 4px` |
**沒有** `.header-inner { … }`。
### 2. 首頁專用（不套在內頁 `map-archive-header`）
| 檔案 | 選擇器 | 與內頁差異 |
|------|--------|------------|
| `style.css` | `header#origin` | **100vh**、背景 `center`、`background-size: 108%` |
| `style.css` | `.hero`、`.hero h1`、`.hero p` | 首頁 hero 字級 |
| `index.css` | `.home-page header .hero .subtitle-wrap` 等 | 副標更大、描邊、字距不同 |
### 3. 容易造成「這頁長不一樣」的例外
| 頁面 | 額外 CSS | 說明 |
|------|----------|------|
| **`concert/concert.html`** | `assets/css/concert.css`（載入順序：**先** concert，**後** style） | 檔內有**裸** `.main-title`、`.subtitle-wrap`、`.sub-title`（無 `.map-archive-header` 前綴）→ 會影響**整頁**同名 class；header 內仍以 `.map-archive-header .…` 為準（優先權較高） |
| **`extra/minister_ge.html`** | 多載 `index.css`，`body.home-page` | 只改 `.home-page header .hero`，不直接改 `map-archive-header` |
| **全站** | `style.css` 裸 `.subtitle-wrap`、`.sub-title`（約 577 行起） | 區塊內非 header 的副標也會用到；header **內**由 `.map-archive-header .…` 覆寫 |
`concert.css` 裸選擇器摘要（與 `style.css` 內頁 header 不同）：
```css
.main-title { font-size: 3.5rem; letter-spacing: 8px; … }
.subtitle-wrap { margin-top: 25px; … }
.subtitle-wrap::before/::after { max-width: 60px; height: 3px; … }
.sub-title { font-size: 1rem; letter-spacing: 6px; margin: 0 25px; … }
```
### 4. 完全不是 `map-archive-header` 的頁
| 頁面 | CSS | 說明 |
|------|-----|------|
| `variety/NJTW/NJTW5.html` | `variety/NJTW/njtw5.css` | `body.njtw5-page header.main-header`：自訂背景圖、`aspect-ratio: 1280/706`、全寬 breakout，**無** 氣球 `header.jpg` |
| `extra/grok.html` | 僅 `style.css` | 裸 `header` + `.hero` |
### 5. 平板 — `assets/css/tablet.css`（≤1180px）
- `.map-archive-header .main-title`（與全站內頁相同）
---
## 三、為什麼會覺得 header-inner 不統一
1. `.header-inner` **零樣式**，只是包裝 div。
2. **演唱會**多 `concert.css` 裸 class，整頁標題語彙混在一起。
3. **首頁 / NJTW5 / grok / 影片頁**不是同一套 header 系統。
4. 全站裸 `.subtitle-wrap` 與 header 專用規則並存。
---
## 四、明天可決定的方向（改前請說「執行」）
1. **標準是否 = 電子書** — 現行 `header.map-archive-header` + `style.css` 約 1547 行起？
2. **`concert.css` 裸標題** — 改為只作用在主內容，或刪除改吃全站？
3. **是否新增** `.header-inner` 共用樣式？
4. **class 改名** — 全站內頁是否要改掉 `map-archive-header`（需站主指定新名稱；**禁止** PowerShell 批次改 HTML，須 UTF-8 安全）？
5. **grok / NJTW5 / 影片頁** — 併入標準 header，或維持特例？
---
## 五、相關檔案路徑
| 用途 | 路徑 |
|------|------|
| 內頁 banner 主規則 | `assets/css/style.css`（`header.map-archive-header` 區塊） |
| 首頁 hero | `assets/css/style.css`（`header#origin`）、`assets/css/index.css` |
| 演唱會頁額外 | `assets/css/concert.css` |
| NJTW5 頂部 | `variety/NJTW/njtw5.css` |
| 協作規則 | `.cursor/rules/agent-must-ask.mdc` |
---
## 六、有 `header-inner`：頂欄內標題／副標「長得不一樣」的 CSS 套別
只談 **`header.map-archive-header` → `.header-inner` 裡的 `h1.main-title`、`.subtitle-wrap`、`.sub-title`**（顏色、陰影、字級、字距、兩側黃線）。
連結基準：`待確認/.cursor/` → `../../` 到站根，**Ctrl+點** 開 HTML。
> **線上 `assets/css/style.css` 現況**：內頁頂欄字樣幾乎都吃 **套別 A** 同一組 `.map-archive-header .…`；若你肉眼覺得某頁不同，先用下面代表頁並排，再回報頁名。
| 套別 | 頂欄內字樣差在哪（摘要） | CSS 來源 | 點一頁確認 |
|------|--------------------------|----------|------------|
| **A｜內頁標準** | 主標 `clamp(2rem, 4.5vw, 3.2rem)`、黃字、`text-shadow` 黃光；副標 `0.92rem`、`#d4d4d4`、字距 `4px`；黃線 `3px` / `max-width 56px` | `style.css` → `.map-archive-header .main-title` 等（約 1566 行起） | [六六歌2 電子書](../../extra/totoga2-copy-ebook.html) |
| **B｜演唱會** | 頂欄**仍應**是套別 A（`.map-archive-header .…` 優先）；另載 `concert.css` 的裸 `.main-title`（`3.5rem`）、`.sub-title`（`1rem`）主要搞**主內容**同名 class — 請專看 **banner 裡** 那組字與 A 是否真不同 | `concert.css` 先載 + `style.css` | [演唱會列表](../../concert/concert.html) |
| **C｜首頁 hero（對照）** | **沒有** `header-inner`；`header#origin` + `.hero`：`h1` 約 `2.5rem`，`index.css` 再疊**描邊＋暈光**；副標 `clamp(1.12rem～1.52rem)`、`#e6e6e6`、字距 `0.22em` — 通常比內頁副標**大、亮** | `style.css` `.hero h1` + `index.css` `.home-page header .hero …` | [首頁](../../index.html) |
**套別 A — 同套還有（頂欄字樣應與電子書相同，不必每頁點）**
`member/member.html`、`variety/variety.html`、`yellow-note/map.html`、`yellow-note/minister.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`extra/minister_ge.html`（頂欄是 `map-archive-header`，**不是** `.hero`；`index.css` 只改首頁 hero）、`fallen/totoga2.html`、`extra/totoga2-copy-timeline.html`、`albums/albums.html`（有載 `index.css` 但 `body` 無 `home-page`，頂欄不受影響）。
**沒有 `header-inner`、不列入上表**（結構就不是同一顆球）：`index` 以外見上文 §一 grok／NJTW5／影片／歌詞。
**備份勿當線上**：`待確認/assets/css/style.css` 曾有 `body.totoga2-page .map-archive-header` 壓矮 banner、舊版 `100vh` 氣球圖 — 與目前站根 `assets/css/style.css` 可能不一致。
# 內頁頂部 header／header-inner 差異整理
站主自用；整理日：2026-05。程式真值以 repo 為準，改檔前請再對一次檔案。
---
## 重點
- **全 repo 沒有任何 `.header-inner` 的 CSS**；差異在外層 `header` 的 class 與內層 `.main-title`、`.subtitle-wrap`、`.sub-title`。
- 標準內頁 HTML 幾乎相同；視覺不統一多半是 **CSS 疊加** 或 **少數頁根本沒用同一套 class**。
---
## 一、HTML 結構對照
| 類型 | 頁面 | 結構 |
|------|------|------|
| **標準** | `extra/totoga2-copy-ebook.html`、`extra/totoga2-copy-timeline.html`、`concert/concert.html`、`yellow-note/map.html`、`member/member.html`、`albums/albums.html`、`variety/variety.html`、`fallen/totoga2.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`yellow-note/minister.html`、`extra/minister_ge.html`、`extra/totoga2 copy.html` 等 | `header.map-archive-header` → `motion.header-inner` → `h1.main-title` + `motion.subtitle-wrap` → `span.sub-title` |
| **首頁** | `index.html` | `header#origin` → `motion.hero`（**無** `header-inner`） |
| **無 header** | `extra/totoga2-video.html` | 無頂部 banner 區塊 |
| **另一套** | `extra/grok.html` | 裸 `<header>` → `motion.hero` |
| **另一套** | `variety/NJTW/NJTW5.html` | `header.main-header`（無 `header-inner`） |
---
## 二、CSS 來源（誰在管頂部）
### 1. 多數內頁共用 — `assets/css/style.css`
| 選擇器 | 內容摘要 |
|--------|----------|
| `header.map-archive-header` | `height: auto`；`min-height: clamp(14rem, 38vh, 24rem)`；`background-position: center 78%`；`background-size: cover`；`padding: clamp(1.75rem, 4vh, 2.75rem) 20px` |
| `.map-archive-header .main-title` | `clamp(2rem, 4.5vw, 3.2rem)`、黃字、字距 6px |
| `.map-archive-header .subtitle-wrap` | `margin-top: 20px` |
| `.map-archive-header .subtitle-wrap::before/::after` | 黃線 3px、`max-width: 56px` |
| `.map-archive-header .sub-title` | `0.92rem`、`#d4d4d4`、`letter-spacing: 4px` |
| `@media (max-width: 920px)` `.map-archive-header .main-title` | `letter-spacing: 4px` |
**沒有** `.header-inner { … }`。
### 2. 首頁專用（不套在內頁 `map-archive-header`）
| 檔案 | 選擇器 | 與內頁差異 |
|------|--------|------------|
| `style.css` | `header#origin` | **100vh**、背景 `center`、`background-size: 108%` |
| `style.css` | `.hero`、`.hero h1`、`.hero p` | 首頁 hero 字級 |
| `index.css` | `.home-page header .hero .subtitle-wrap` 等 | 副標更大、描邊、字距不同 |
### 3. 容易造成「這頁長不一樣」的例外
| 頁面 | 額外 CSS | 說明 |
|------|----------|------|
| **`concert/concert.html`** | `assets/css/concert.css`（載入順序：**先** concert，**後** style） | 檔內有**裸** `.main-title`、`.subtitle-wrap`、`.sub-title`（無 `.map-archive-header` 前綴）→ 會影響**整頁**同名 class；header 內仍以 `.map-archive-header .…` 為準（優先權較高） |
| **`extra/minister_ge.html`** | 多載 `index.css`，`body.home-page` | 只改 `.home-page header .hero`，不直接改 `map-archive-header` |
| **全站** | `style.css` 裸 `.subtitle-wrap`、`.sub-title`（約 577 行起） | 區塊內非 header 的副標也會用到；header **內**由 `.map-archive-header .…` 覆寫 |
`concert.css` 裸選擇器摘要（與 `style.css` 內頁 header 不同）：
```css
.main-title { font-size: 3.5rem; letter-spacing: 8px; … }
.subtitle-wrap { margin-top: 25px; … }
.subtitle-wrap::before/::after { max-width: 60px; height: 3px; … }
.sub-title { font-size: 1rem; letter-spacing: 6px; margin: 0 25px; … }
```
### 4. 完全不是 `map-archive-header` 的頁
| 頁面 | CSS | 說明 |
|------|-----|------|
| `variety/NJTW/NJTW5.html` | `variety/NJTW/njtw5.css` | `body.njtw5-page header.main-header`：自訂背景圖、`aspect-ratio: 1280/706`、全寬 breakout，**無** 氣球 `header.jpg` |
| `extra/grok.html` | 僅 `style.css` | 裸 `header` + `.hero` |
### 5. 平板 — `assets/css/tablet.css`（≤1180px）
- `.map-archive-header .main-title`（與全站內頁相同）
---
## 三、為什麼會覺得 header-inner 不統一
1. `.header-inner` **零樣式**，只是包裝 div。
2. **演唱會**多 `concert.css` 裸 class，整頁標題語彙混在一起。
3. **首頁 / NJTW5 / grok / 影片頁**不是同一套 header 系統。
4. 全站裸 `.subtitle-wrap` 與 header 專用規則並存。
---
## 四、明天可決定的方向（改前請說「執行」）
1. **標準是否 = 電子書** — 現行 `header.map-archive-header` + `style.css` 約 1547 行起？
2. **`concert.css` 裸標題** — 改為只作用在主內容，或刪除改吃全站？
3. **是否新增** `.header-inner` 共用樣式？
4. **class 改名** — 全站內頁是否要改掉 `map-archive-header`（需站主指定新名稱；**禁止** PowerShell 批次改 HTML，須 UTF-8 安全）？
5. **grok / NJTW5 / 影片頁** — 併入標準 header，或維持特例？
---
## 五、相關檔案路徑
| 用途 | 路徑 |
|------|------|
| 內頁 banner 主規則 | `assets/css/style.css`（`header.map-archive-header` 區塊） |
| 首頁 hero | `assets/css/style.css`（`header#origin`）、`assets/css/index.css` |
| 演唱會頁額外 | `assets/css/concert.css` |
| NJTW5 頂部 | `variety/NJTW/njtw5.css` |
| 協作規則 | `.cursor/rules/agent-must-ask.mdc` |
---
## 六、有 `header-inner`：頂欄內標題／副標「長得不一樣」的 CSS 套別
只談 **`header.map-archive-header` → `.header-inner` 裡的 `h1.main-title`、`.subtitle-wrap`、`.sub-title`**（顏色、陰影、字級、字距、兩側黃線）。
連結基準：`待確認/.cursor/` → `../../` 到站根，**Ctrl+點** 開 HTML。
> **線上 `assets/css/style.css` 現況**：內頁頂欄字樣幾乎都吃 **套別 A** 同一組 `.map-archive-header .…`；若你肉眼覺得某頁不同，先用下面代表頁並排，再回報頁名。
| 套別 | 頂欄內字樣差在哪（摘要） | CSS 來源 | 點一頁確認 |
|------|--------------------------|----------|------------|
| **A｜內頁標準** | 主標 `clamp(2rem, 4.5vw, 3.2rem)`、黃字、`text-shadow` 黃光；副標 `0.92rem`、`#d4d4d4`、字距 `4px`；黃線 `3px` / `max-width 56px` | `style.css` → `.map-archive-header .main-title` 等（約 1566 行起） | [六六歌2 電子書](../../extra/totoga2-copy-ebook.html) |
| **B｜演唱會** | 頂欄**仍應**是套別 A（`.map-archive-header .…` 優先）；另載 `concert.css` 的裸 `.main-title`（`3.5rem`）、`.sub-title`（`1rem`）主要搞**主內容**同名 class — 請專看 **banner 裡** 那組字與 A 是否真不同 | `concert.css` 先載 + `style.css` | [演唱會列表](../../concert/concert.html) |
| **C｜首頁 hero（對照）** | **沒有** `header-inner`；`header#origin` + `.hero`：`h1` 約 `2.5rem`，`index.css` 再疊**描邊＋暈光**；副標 `clamp(1.12rem～1.52rem)`、`#e6e6e6`、字距 `0.22em` — 通常比內頁副標**大、亮** | `style.css` `.hero h1` + `index.css` `.home-page header .hero …` | [首頁](../../index.html) |
**套別 A — 同套還有（頂欄字樣應與電子書相同，不必每頁點）**
`member/member.html`、`variety/variety.html`、`yellow-note/map.html`、`yellow-note/minister.html`、`extra/site-guide.html`、`extra/sunghoon.html`、`extra/minister_ge.html`（頂欄是 `map-archive-header`，**不是** `.hero`；`index.css` 只改首頁 hero）、`fallen/totoga2.html`、`extra/totoga2-copy-timeline.html`、`albums/albums.html`（有載 `index.css` 但 `body` 無 `home-page`，頂欄不受影響）。
**沒有 `header-inner`、不列入上表**（結構就不是同一顆球）：`index` 以外見上文 §一 grok／NJTW5／影片／歌詞。
**備份勿當線上**：`待確認/assets/css/style.css` 曾有 `body.totoga2-page .map-archive-header` 壓矮 banner、舊版 `100vh` 氣球圖 — 與目前站根 `assets/css/style.css` 可能不一致。
待確認/.cursor/明天先看.md
+6 -6
View File
@@ -1,6 +1,6 @@
# 明天打開專案先看這裡
1. **[內頁 header 差異整理 → `inner-page-header-audit.md`](./inner-page-header-audit.md)**
（`header-inner` 各頁哪裡不同、演唱會／NJTW 例外、要決定怎麼統一）
改檔前記得：先跟你確認再 **執行**（見 `rules/agent-must-ask.mdc`）。
# 明天打開專案先看這裡
1. **[內頁 header 差異整理 → `inner-page-header-audit.md`](./inner-page-header-audit.md)**
（`header-inner` 各頁哪裡不同、演唱會／NJTW 例外、要決定怎麼統一）
改檔前記得：先跟你確認再 **執行**（見 `rules/agent-must-ask.mdc`）。
待確認/_snapshot-note.txt
+1 -1
View File
@@ -1,3 +1,3 @@
備份時間：2026-05-16 15:56
基準 commit：fa8b04d（style 統一header）
內容：相對 fa8b04d 未提交的修改與未追蹤新檔（還原前工作區快照）
內容：相對 fa8b04d 未提交的修改與未追蹤新檔（還原前工作區快照）
待確認/assets/css/style.css
+3301 -3301
View File
File diff suppressed because it is too large Load Diff
待確認/extra/site-guide.html
+523 -523
View File
File diff suppressed because it is too large Load Diff
待確認/index.html
+235 -235
View File
@@ -1,236 +1,236 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="assets/css/tablet.css">
</head>
<body class="home-page">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<div class="subtitle-wrap">
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
</div>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="core-description">
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我被這些熱血、真誠且專業的大男孩所震撼。
</p>
<p class="call-to-action">
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
role="text">路人&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;入坑否定期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;瘋狂考古期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;坑底躺平深陷其中</span></span>的過程，證明了魅力可以跨越時間，也正是這一切自我覺醒的起點，驅動我不斷進化的無限可能。
</p>
</div>
</section>
<section id="mission" class="mission-section">
<div class="mission-zigzag">
<div class="mission-row mission-row--intro">
<div class="mission-row__visual">
<div class="logo-wrapper">
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
<div class="caption">
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
aria-hidden="true">↑</span>設計概念：</span>
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
</div>
</div>
</div>
<div class="mission-row__body">
<h2 class="section-title mission-block-title">成立的初衷</h2>
<p class="mission-lead">
以推廣 SECHSKIES <span class="mark_y">水晶男孩</span> 為核心，旨在透過 <span
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
<span class="mark_b">靈感主軸</span>，延伸至
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
</p>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span
class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</div>
</div>
<div class="mission-row mission-row--concept">
<div class="mission-row__body">
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
<p>
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台，成員脫下眼罩的剎那，整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span class="mark_b">黃色海洋</span>，<span
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機，設計成<span
class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
<div class="mission-row__visual">
<div class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
<!-- 若改為 GIF 動圖，將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↑</span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
</div>
</div>
</div>
</section>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>傳奇的誕生：六道光芒劃破韓流夜空</h3>
<p>1997年4月15日，水晶男孩以強悍的《學園別曲》為起點，「黑水晶｜Rap與舞蹈」、「白水晶｜主唱」的雙色魅力交織，奠定了
K-POP第一代傳奇的地位，開創了屬於黃色海洋的盛世與巔峰。</p>
<p>在那段被韓劇<a
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">《請回答1997》</span><i
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡，水晶男孩與
H.O.T.
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰，還是為了買票露宿街頭的狂熱，白與黃的旗幟對決，成了那個世代集體記憶的起點。</p>
</article>
<article class="story-node" data-era="2000">
<h3>遺憾的休止符：凍結有你的世界</h3>
<p>在最燦爛的時刻，這首華麗的樂章卻被迫畫下了休止符，2000年5月正式解散。成員各自發展走出了不同道路，水晶進入休眠期。
</p>
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場，將未完的旋律封存在冷冽的空氣中。這一停頓，就是長達十六年的靜默，成為我們心中最完整、卻也最令人心碎的凝煉模樣。
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>感動合體：那一晚，我們找回了完整</h3>
<p>塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000
年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。</p>
<span class="timeline-ebook-cta" aria-label="傳奇書寫中，連結暫停">
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</span>
</article>
<!-- 2016 年後續發展與情感轉折區塊 -->
<article class="story-node" data-era="2016.05">
<h3>從路人到鐵粉：從夢境進現實</h3>
<p>《無限挑戰》落幕後，原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡，5 月 11
日的簽約消息像是一記響亮的耳光，將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點，奇蹟真的在現實生了根。</p>
<p>四月的重逢是老小黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
</p>
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台，卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的樣子，我們才明白：原來大家只是換個方式一起變老，這份情誼早已超越了表演。
</p>
</article>
<article class="story-node" data-era="2016">
<h3>從路人到鐵粉：從夢境進現實</h3>
<p>當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG
簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。</p>
<p>而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。
</p>
### 餘溫與新生：從奇蹟走向恆久
<p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG
簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。
</p>
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。
</p>
</article>
<article class="story-node" data-era="2019">
<h3>體制調整與穩定</h3>
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
</article>
<article class="story-node" data-era="NOW">
<h3>至今：個人與團體並行</h3>
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
</article>
</div>
</section>
<!--
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
<a href="fallen/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
</p>
<div class="story-ebook-cta">
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
</div>
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section> -->
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="assets/js/particles.js"></script>
<script src="assets/js/portal-nav.js"></script>
</body>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="assets/css/tablet.css">
</head>
<body class="home-page">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<div class="subtitle-wrap">
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
</div>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<div class="container">
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="core-description">
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我被這些熱血、真誠且專業的大男孩所震撼。
</p>
<p class="call-to-action">
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
role="text">路人&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;入坑否定期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;瘋狂考古期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;坑底躺平深陷其中</span></span>的過程，證明了魅力可以跨越時間，也正是這一切自我覺醒的起點，驅動我不斷進化的無限可能。
</p>
</div>
</section>
<section id="mission" class="mission-section">
<div class="mission-zigzag">
<div class="mission-row mission-row--intro">
<div class="mission-row__visual">
<div class="logo-wrapper">
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
<div class="caption">
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
aria-hidden="true">↑</span>設計概念：</span>
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
</div>
</div>
</div>
<div class="mission-row__body">
<h2 class="section-title mission-block-title">成立的初衷</h2>
<p class="mission-lead">
以推廣 SECHSKIES <span class="mark_y">水晶男孩</span> 為核心，旨在透過 <span
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
<span class="mark_b">靈感主軸</span>，延伸至
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
</p>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span
class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</div>
</div>
<div class="mission-row mission-row--concept">
<div class="mission-row__body">
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
<p>
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台，成員脫下眼罩的剎那，整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span class="mark_b">黃色海洋</span>，<span
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機，設計成<span
class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
<div class="mission-row__visual">
<div class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
<!-- 若改為 GIF 動圖，將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↑</span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
</div>
</div>
</div>
</section>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
</div>
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>傳奇的誕生：六道光芒劃破韓流夜空</h3>
<p>1997年4月15日，水晶男孩以強悍的《學園別曲》為起點，「黑水晶｜Rap與舞蹈」、「白水晶｜主唱」的雙色魅力交織，奠定了
K-POP第一代傳奇的地位，開創了屬於黃色海洋的盛世與巔峰。</p>
<p>在那段被韓劇<a
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">《請回答1997》</span><i
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡，水晶男孩與
H.O.T.
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰，還是為了買票露宿街頭的狂熱，白與黃的旗幟對決，成了那個世代集體記憶的起點。</p>
</article>
<article class="story-node" data-era="2000">
<h3>遺憾的休止符：凍結有你的世界</h3>
<p>在最燦爛的時刻，這首華麗的樂章卻被迫畫下了休止符，2000年5月正式解散。成員各自發展走出了不同道路，水晶進入休眠期。
</p>
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場，將未完的旋律封存在冷冽的空氣中。這一停頓，就是長達十六年的靜默，成為我們心中最完整、卻也最令人心碎的凝煉模樣。
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>感動合體：那一晚，我們找回了完整</h3>
<p>塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000
年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。</p>
<span class="timeline-ebook-cta" aria-label="傳奇書寫中，連結暫停">
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</span>
</article>
<!-- 2016 年後續發展與情感轉折區塊 -->
<article class="story-node" data-era="2016.05">
<h3>從路人到鐵粉：從夢境進現實</h3>
<p>《無限挑戰》落幕後，原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡，5 月 11
日的簽約消息像是一記響亮的耳光，將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點，奇蹟真的在現實生了根。</p>
<p>四月的重逢是老小黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
</p>
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台，卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的樣子，我們才明白：原來大家只是換個方式一起變老，這份情誼早已超越了表演。
</p>
</article>
<article class="story-node" data-era="2016">
<h3>從路人到鐵粉：從夢境進現實</h3>
<p>當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG
簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。</p>
<p>而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。
</p>
### 餘溫與新生：從奇蹟走向恆久
<p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG
簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。
</p>
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。
</p>
</article>
<article class="story-node" data-era="2019">
<h3>體制調整與穩定</h3>
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
</article>
<article class="story-node" data-era="NOW">
<h3>至今：個人與團體並行</h3>
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
</article>
</div>
</section>
<!--
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
<a href="fallen/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
</p>
<div class="story-ebook-cta">
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
<a href="fallen/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
</div>
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
<p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section> -->
</div>
<footer>
<p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
Design by <span class="mark_b">Jekkinoopy Studio</span>
</a>
</footer>
<script src="assets/js/particles.js"></script>
<script src="assets/js/portal-nav.js"></script>
</body>
</html>