feat NJTW5.html

2026-05-14 11:05:12 +08:00
parent c278df23e1
commit 3fe60db22f
18 changed files with 1021 additions and 179 deletions
@@ -1,27 +1,27 @@
---
-description: 變更範圍與全站樣式：未點名的檔案與 class 預設不碰；跨頁／共用 CSS 須先確認。
-alwaysApply: true
---
-
-# AI 變更邊界（sechskies）
-
-## 預設只做「被點名」的範圍
-
- 使用者若只提某頁（例如 **`minister_ge.html`**）、某區塊、某句文案：**只改該處**，不順手改 `index.html`、`minister.html`、`assets/js/portal-nav.js`、`assets/css/style.css` 全站區、或 **`assets/css/index.css`** 裡與首頁共用的規則。
- **未寫到的檔案＝不開、不刪、不重構**；需要動到時，先用**一句話**說明「為何必須動」並等使用者確認，或改在回覆裡列出將被波及的檔案請使用者選是否要做。
-
-## 共用樣式（`assets/css/style.css`、全站 class）
-
- **禁止**因為某一頁要對齊視覺，就擅自改掉全站 class（例如 `.slogan-quote`、`.mark_b`、`section` 預設）在**其他頁**的呈現。
- **金句已分流**：覺醒稿用 **`slogan-quote slogan-quote--awakening`**（副標語彙：雙線＋中置小字），首頁使命稿用 **`slogan-quote slogan-quote--mission`**（獨立奶油卡）；基底 **`.slogan-quote` 不帶視覺**，**禁止**再只改基底就套兩種金句。
- 若使用者說「參考某區塊的樣式」：只代表**該次交辦的那一段／那一頁**可以長得像它；**不要**在未說明下把既有全站 class 整組換成另一套語彙。應優先：**該頁專用 wrapper class**、或**只加在該頁父層下的選取器**（例如 `.home-page #某區 …`），且仍須落在使用者允許的檔案範圍內。
-
-## 一句話可避免的誤會
-
- 若需求可能影響多檔（導覽、首頁、共用 CSS）：**先問**「是否只改 A，還是 B/C 也要一起？」再改。
-
-## 文件與規則檔
-
- **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。
-
-（與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`** 為準。）
+---
+description: 變更範圍與全站樣式：未點名的檔案與 class 預設不碰；跨頁／共用 CSS 須先確認。
+alwaysApply: true
+---
+
+# AI 變更邊界（sechskies）
+
+## 預設只做「被點名」的範圍
+
+- 使用者若只提某頁（例如 **`minister_ge.html`**）、某區塊、某句文案：**只改該處**，不順手改 `index.html`、`minister.html`、`assets/js/portal-nav.js`、`assets/css/style.css` 全站區、或 **`assets/css/index.css`** 裡與首頁共用的規則。
+- **未寫到的檔案＝不開、不刪、不重構**；需要動到時，先用**一句話**說明「為何必須動」並等使用者確認，或改在回覆裡列出將被波及的檔案請使用者選是否要做。
+
+## 共用樣式（`assets/css/style.css`、全站 class）
+
+- **禁止**因為某一頁要對齊視覺，就擅自改掉全站 class（例如 `.slogan-quote`、`.mark_b`、`section` 預設）在**其他頁**的呈現。
+- **金句已分流**：覺醒稿用 **`slogan-quote slogan-quote--awakening`**（副標語彙：雙線＋中置小字），首頁使命稿用 **`slogan-quote slogan-quote--mission`**（獨立奶油卡）；基底 **`.slogan-quote` 不帶視覺**，**禁止**再只改基底就套兩種金句。
+- 若使用者說「參考某區塊的樣式」：只代表**該次交辦的那一段／那一頁**可以長得像它；**不要**在未說明下把既有全站 class 整組換成另一套語彙。應優先：**該頁專用 wrapper class**、或**只加在該頁父層下的選取器**（例如 `.home-page #某區 …`），且仍須落在使用者允許的檔案範圍內。
+
+## 一句話可避免的誤會
+
+- 若需求可能影響多檔（導覽、首頁、共用 CSS）：**先問**「是否只改 A，還是 B/C 也要一起？」再改。
+
+## 文件與規則檔
+
+- **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。
+
+（與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`** 為準。）
@@ -1,28 +1,28 @@
---
-description: 未經使用者明確交代，不得擅自開放導覽、改連結或擴充需求範圍（本 repo 含全站導覽與 totoga2 等）。
-alwaysApply: true
---
-
-# 使用者意圖與導覽（sechskies）
-
-## 只做被交代的事
-
- **不得**在未被使用者**明確要求**的情況下：把導覽連結從「籌備中／尚無開放」改成可點、更換 `href` 成真實頁面、從 `COMING_SOON_PAGES` 移除、或把錨點加入 `INDEX_NAV_OPEN_HASHES`。
- **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
- 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。
-
-## 「傳奇的轉折」導覽（特別記牢）
-
- 使用者**沒有說要開放**時：導覽上的「傳奇的轉折」必須維持 **尚無開放**（例如維持 `index.html#story` 且 **`#story` 不在 `INDEX_NAV_OPEN_HASHES`**，或等價的籌備中處理）。
- **禁止**在未獲使用者同意下，將該項改為連到 `totoga2.html` 或其他已上線頁面。
-
-## 實作前自檢
-
- 若變更會影響 `assets/js/portal-nav.js`（`buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`）：**對照使用者原句**，確認每一項連結的開／關都有被明確交代。
-
-## 名詞對齊（避免做錯檔）
-
- **頂部橫列導覽（常稱 navbar）**：`assets/js/portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `buildPortalNavInnerHTML` 模板。
- **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。
-
-（變更哪些檔、可否動共用 CSS：見 **`ai-change-boundaries.mdc`**。）
+---
+description: 未經使用者明確交代，不得擅自開放導覽、改連結或擴充需求範圍（本 repo 含全站導覽與 totoga2 等）。
+alwaysApply: true
+---
+
+# 使用者意圖與導覽（sechskies）
+
+## 只做被交代的事
+
+- **不得**在未被使用者**明確要求**的情況下：把導覽連結從「籌備中／尚無開放」改成可點、更換 `href` 成真實頁面、從 `COMING_SOON_PAGES` 移除、或把錨點加入 `INDEX_NAV_OPEN_HASHES`。
+- **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
+- 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。
+
+## 「傳奇的轉折」導覽（特別記牢）
+
+- 使用者**沒有說要開放**時：導覽上的「傳奇的轉折」必須維持 **尚無開放**（例如維持 `index.html#story` 且 **`#story` 不在 `INDEX_NAV_OPEN_HASHES`**，或等價的籌備中處理）。
+- **禁止**在未獲使用者同意下，將該項改為連到 `totoga2.html` 或其他已上線頁面。
+
+## 實作前自檢
+
+- 若變更會影響 `assets/js/portal-nav.js`（`buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`）：**對照使用者原句**，確認每一項連結的開／關都有被明確交代。
+
+## 名詞對齊（避免做錯檔）
+
+- **頂部橫列導覽（常稱 navbar）**：`assets/js/portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `buildPortalNavInnerHTML` 模板。
+- **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。
+
+（變更哪些檔、可否動共用 CSS：見 **`ai-change-boundaries.mdc`**。）
@@ -113,6 +113,54 @@ nav a:hover {
 .portal-nav {
    position: relative;
    z-index: 60;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+}
+
+.portal-nav>ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: flex-end;
+    gap: clamp(8px, 1.4vw, 18px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+    flex: 1 1 200px;
+}
+
+.portal-nav>ul>li>a {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 2px;
+    line-height: 1.15;
+    text-decoration: none;
+    color: var(--primary);
+    font-size: 0.95rem;
+    letter-spacing: 1px;
+    padding: 2px 4px;
+}
+
+.portal-nav__label {
+    font-weight: 700;
+}
+
+.portal-nav__sub {
+    display: block;
+    max-width: 12.5rem;
+    font-size: 0.55rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    line-height: 1.25;
+    opacity: 0.82;
+    white-space: normal;
 }

 .portal-nav .portal-submenu {
@@ -120,7 +168,7 @@ nav a:hover {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
-    min-width: 220px;
+    min-width: 248px;
    padding: 10px;
    border-radius: 12px;
    background: #ffffff;
@@ -134,8 +182,11 @@ nav a:hover {
 }

 .portal-nav .portal-submenu a {
-    display: block;
-    padding: 6px 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    padding: 8px 10px;
    border-radius: 8px;
    color: #5f5f5f;
    font-size: 0.84rem;
@@ -143,6 +194,15 @@ nav a:hover {
    letter-spacing: 0;
 }

+.portal-nav .portal-submenu .portal-nav__sub {
+    font-size: 0.62rem;
+    font-weight: 500;
+    letter-spacing: 0.03em;
+    line-height: 1.3;
+    opacity: 0.78;
+    max-width: 18rem;
+}
+
 .portal-nav .portal-submenu a:hover {
    background: #fff8df;
    color: #3a300a;
@@ -152,6 +212,11 @@ nav a:hover {
    color: #ffffff;
 }

+.portal-nav a.nav-current .portal-nav__sub {
+    color: rgba(255, 255, 255, 0.82);
+    opacity: 1;
+}
+
 .portal-nav>ul>li.coming-soon>a {
    cursor: default;
    opacity: 0.82;
@@ -1009,12 +1074,15 @@ footer a .mark_b {
 }

 .map-page .portal-nav>ul>li>a {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-end;
+    text-align: right;
+    white-space: normal;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 1px;
-    white-space: nowrap;
    padding: 4px 2px;
    border-bottom: 0;
    transition: color 0.2s ease;
@@ -1047,8 +1115,12 @@ footer a .mark_b {
 }

 .map-page .portal-nav .portal-submenu a {
-    display: block;
-    padding: 6px 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    text-align: right;
+    gap: 2px;
+    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #5f5f5f;
@@ -1509,6 +1581,8 @@ footer a .mark_b {
    padding-bottom: 48px;
 }

+/* variety/NJTW/NJTW5.html — 樣式改為同資料夾 njtw5.css，避免與全站 style 雙重定義 */
+
 /* Chronicle (webcomic-like reader) */
 .chronicle-controls {
    max-width: 1200px;
@@ -1667,6 +1741,54 @@ body.ebook-ssg2-page .ebook-back-link {
 }

 /* totoga2.html — 六六歌2 整合（影片／電子書／長文＋網漫／分頁） */
+body.totoga2-page .map-archive-header .main-content-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.35rem;
+    margin-top: clamp(12px, 2.5vw, 22px);
+}
+
+body.totoga2-page .map-archive-header .highlight-text {
+    font-size: clamp(1.45rem, 4vw, 2.65rem);
+    font-weight: 800;
+    color: #fff;
+    letter-spacing: 0.1em;
+    line-height: 1.2;
+    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
+}
+
+body.totoga2-page .map-archive-header .eng-title {
+    font-size: clamp(0.72rem, 2vw, 0.95rem);
+    letter-spacing: 0.26em;
+    color: var(--yellow);
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+body.totoga2-page .map-archive-header .subtitle-wrap {
+    flex-direction: column;
+    gap: 0.4rem;
+    margin-top: clamp(14px, 2.5vw, 24px);
+}
+
+body.totoga2-page .map-archive-header .subtitle-wrap::before,
+body.totoga2-page .map-archive-header .subtitle-wrap::after {
+    display: none;
+}
+
+body.totoga2-page .map-archive-header .sub-title {
+    margin: 0;
+}
+
+body.totoga2-page .map-archive-header .event-date {
+    display: block;
+    font-size: 0.72rem;
+    letter-spacing: 0.22em;
+    color: #c8c8c8;
+    font-weight: 600;
+}
+
 body.totoga2-page .totoga2-hub-controls {
    max-width: 1200px;
    margin: 24px auto 10px;
@@ -1753,6 +1875,265 @@ body.totoga2-page .ebook-back-link {
    gap: 12px;
 }

+/* extra/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
+body.member-crystal-page .member-crystal-main {
+    padding: 1.75rem 14px 3rem;
+    max-width: 1240px;
+    margin: 0 auto;
+}
+
+body.member-crystal-page .member-crystal-lead {
+    text-align: center;
+    max-width: 46rem;
+    margin: 0 auto 1.75rem;
+    color: #3d3d3d;
+    line-height: 1.75;
+    font-size: 1rem;
+}
+
+body.member-crystal-page .member-crystal-board {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: clamp(14px, 2vw, 22px);
+    align-items: stretch;
+    grid-template-areas:
+        "b1 b2 b3 ib"
+        "iw w1 w2 w3";
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="b1"] {
+    grid-area: b1;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="b2"] {
+    grid-area: b2;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="b3"] {
+    grid-area: b3;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="intro-black"] {
+    grid-area: ib;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="intro-white"] {
+    grid-area: iw;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="w1"] {
+    grid-area: w1;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="w2"] {
+    grid-area: w2;
+}
+
+body.member-crystal-page .member-crystal-cell[data-area="w3"] {
+    grid-area: w3;
+}
+
+body.member-crystal-page .member-crystal-intro {
+    height: 100%;
+    min-height: 280px;
+    padding: 1.25rem 1.2rem;
+    border-radius: 12px;
+    border: 3px solid #3a2a18;
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+        0 10px 26px rgba(0, 0, 0, 0.18);
+    background:
+        linear-gradient(165deg, rgba(255, 248, 230, 0.95) 0%, #e8d8bc 48%, #d2bfa3 100%);
+    color: #2b2118;
+    line-height: 1.65;
+    font-size: 0.92rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+body.member-crystal-page .member-crystal-intro--black {
+    border-color: #1f1410;
+    background:
+        linear-gradient(165deg, #4a3a32 0%, #2d2420 55%, #1a1412 100%);
+    color: #f2e6d8;
+}
+
+body.member-crystal-page .member-crystal-intro--white {
+    border-color: #5c4a38;
+}
+
+body.member-crystal-page .member-crystal-intro__title {
+    margin: 0 0 0.2rem;
+    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
+    font-weight: 900;
+    letter-spacing: 0.12em;
+}
+
+body.member-crystal-page .member-crystal-intro--black .member-crystal-intro__title {
+    color: var(--yellow);
+}
+
+body.member-crystal-page .member-crystal-intro__en {
+    margin: 0 0 0.75rem;
+    font-size: 0.78rem;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    opacity: 0.88;
+}
+
+body.member-crystal-page .member-crystal-intro p {
+    margin: 0 0 0.65rem;
+}
+
+body.member-crystal-page .member-crystal-intro p:last-child {
+    margin-bottom: 0;
+}
+
+body.member-crystal-page .member-poster {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 4px solid #5c4030;
+    box-shadow:
+        0 0 0 2px #c9a574,
+        0 14px 32px rgba(0, 0, 0, 0.22);
+    background: linear-gradient(180deg, #8b6f52 0%, #5c4030 100%);
+}
+
+body.member-crystal-page .member-poster--white {
+    border-color: #6e5a48;
+    box-shadow:
+        0 0 0 2px #e6d2b2,
+        0 14px 32px rgba(0, 0, 0, 0.18);
+    background: linear-gradient(180deg, #b9a08a 0%, #7d6854 100%);
+}
+
+body.member-crystal-page .member-poster__wanted {
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: 0.35em;
+    font-size: clamp(0.68rem, 1.6vw, 0.82rem);
+    padding: 0.45rem 0.35rem;
+    color: #f8eecf;
+    text-shadow: 0 1px 0 #1a120e;
+    background: linear-gradient(180deg, #2a1f1a 0%, #120d0b 100%);
+}
+
+body.member-crystal-page .member-poster--white .member-poster__wanted {
+    color: #2a2118;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
+    background: linear-gradient(180deg, #efe2cf 0%, #cbb59d 100%);
+}
+
+body.member-crystal-page .member-poster__sheet {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 0.65rem 0.55rem 0.85rem;
+    background: linear-gradient(180deg, #f4e8d4 0%, #dec9ae 55%, #c9b198 100%);
+    color: #1f1814;
+}
+
+body.member-crystal-page .member-poster__photo {
+    width: 100%;
+    max-width: 220px;
+    aspect-ratio: 4 / 5;
+    margin: 0 auto 0.45rem;
+    border: 3px solid #2a2118;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #2a2118;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+body.member-crystal-page .member-poster__photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+    display: block;
+}
+
+body.member-crystal-page .member-poster__role {
+    margin: 0 0 0.15rem;
+    font-size: 0.68rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #4a3b32;
+}
+
+body.member-crystal-page .member-poster__name {
+    margin: 0;
+    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    line-height: 1.15;
+}
+
+body.member-crystal-page .member-poster__name-en {
+    margin: 0.15rem 0 0.35rem;
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    color: #5c4a40;
+}
+
+body.member-crystal-page .member-poster__stamp {
+    margin: 0.25rem 0 0;
+    align-self: flex-end;
+    font-size: 0.58rem;
+    letter-spacing: 0.22em;
+    font-weight: 800;
+    color: #6a5244;
+}
+
+@media (max-width: 960px) {
+    body.member-crystal-page .member-crystal-board {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-areas:
+            "ib ib"
+            "b1 b2"
+            "b3 b3"
+            "iw iw"
+            "w1 w2"
+            "w3 w3";
+    }
+
+    body.member-crystal-page .member-crystal-cell[data-area="b3"],
+    body.member-crystal-page .member-crystal-cell[data-area="w3"] {
+        justify-self: center;
+        max-width: min(100%, 360px);
+        width: 100%;
+    }
+}
+
+@media (max-width: 600px) {
+    body.member-crystal-page .member-crystal-board {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "ib"
+            "b1"
+            "b2"
+            "b3"
+            "iw"
+            "w1"
+            "w2"
+            "w3";
+    }
+
+    body.member-crystal-page .member-crystal-cell[data-area="b3"],
+    body.member-crystal-page .member-crystal-cell[data-area="w3"] {
+        justify-self: stretch;
+        max-width: none;
+    }
+}
+
 /* site-guide.html — 全站導覽索引 */
 body.site-guide-page .site-guide-main {
    padding: 28px 14px 56px;
@@ -37,7 +37,9 @@
    .portal-nav>ul>li>a {
        min-height: 44px;
        display: inline-flex;
+        flex-direction: column;
        align-items: center;
+        justify-content: center;
    }

    nav ul {
@@ -1,7 +1,7 @@
 (() => {
    /**
     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
-     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
+     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含演唱會／典藏／地圖／視覺進化論等；綜藝主頁已開以利子選單）。
     * ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
     * ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
     *    浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
@@ -27,7 +27,6 @@
    }

    const COMING_SOON_PAGES = new Set([
-        "variety.html",
        "concert.html",
        "albums.html",
        "map.html",
@@ -62,7 +61,8 @@
    }

    function markLinkComingSoon(link, originalHref) {
-        const visibleTitle = link.textContent.trim();
+        const labelEl = link.querySelector(".portal-nav__label");
+        const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
        link.setAttribute("data-coming-soon", "true");
        link.setAttribute("aria-disabled", "true");
        link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
@@ -152,36 +152,42 @@
        return `
 <a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
 <ul>
-    <li><a href="${rp}index.html#origin">淪陷瞬間</a>
+    <li><a href="${rp}index.html#origin"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}index.html#start">好奇的開端</a></li>
-            <li><a href="${rp}index.html#mission">成立的初衷</a></li>
-            <li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
-            <li><a href="${rp}index.html#story">傳奇的轉折</a></li>
+            <li><a href="${rp}index.html#start"><span class="portal-nav__label">好奇的開端</span><span class="portal-nav__sub">從好奇觀看到淪陷的起點</span></a></li>
+            <li><a href="${rp}index.html#mission"><span class="portal-nav__label">成立的初衷</span><span class="portal-nav__sub">推廣部與黃色奇蹟</span></a></li>
+            <li><a href="${rp}index.html#timeline"><span class="portal-nav__label">跨時空軌跡</span><span class="portal-nav__sub">年表與作品節點</span></a></li>
+            <li><a href="${rp}index.html#story"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">重逢與敘事主線</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}variety/variety.html">瘋子與天才</a>
+    <li><a href="${rp}variety/variety.html"><span class="portal-nav__label">瘋子與天才</span><span class="portal-nav__sub">EUN JI-WON × VARIETY GRAVITY</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}variety/variety.html#variety">瘋狂出演中</a></li>
-            <li><a href="${rp}variety/variety.html#stage">隊長的氣場</a></li>
+            <li><a href="${rp}variety/variety.html#variety"><span class="portal-nav__label">瘋狂出演中</span><span class="portal-nav__sub">綜藝鏡頭與名場面</span></a></li>
+            <li><a href="${rp}variety/variety.html#stage"><span class="portal-nav__label">隊長的氣場</span><span class="portal-nav__sub">控場與隊內互動</span></a></li>
+            <li><a href="${rp}variety/NJTW/NJTW5.html"><span class="portal-nav__label">新西遊記</span><span class="portal-nav__sub">成員介紹 · MEMBER GUIDE</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}concert/concert.html">現場的震撼</a>
+    <li><a href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
-            <li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
+            <li><a href="${rp}concert/concert.html#stage-now"><span class="portal-nav__label">永恆的重逢</span><span class="portal-nav__sub">近年與重聚舞台</span></a></li>
+            <li><a href="${rp}concert/concert.html#stage-past"><span class="portal-nav__label">燦爛的最初</span><span class="portal-nav__sub">全盛期經典場次</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}albums/albums.html">黃色留聲機</a>
+    <li><a href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span><span class="portal-nav__sub">YELLOW PHONOGRAPH</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
-            <li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
+            <li><a href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span><span class="portal-nav__sub">重啟後作品與單曲</span></a></li>
+            <li><a href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span><span class="portal-nav__sub">1997–1999 年表</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}map/map.html">聖地巡禮</a>
+    <li><a href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
-            <li><a href="${rp}map/map.html#global">海外遠征</a></li>
+            <li><a href="${rp}map/map.html#taipei"><span class="portal-nav__label">台北聖地</span><span class="portal-nav__sub">行程與地點整理</span></a></li>
+            <li><a href="${rp}map/map.html#global"><span class="portal-nav__label">海外遠征</span><span class="portal-nav__sub">跨國足跡</span></a></li>
+        </ul>
+    </li>
+    <li><a href="${rp}extra/member.html"><span class="portal-nav__label">六顆水晶</span><span class="portal-nav__sub">BLACK KIES · WHITE KIES</span></a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}extra/member.html#crystal-board"><span class="portal-nav__label">黑白分流</span><span class="portal-nav__sub">海報牆與分組介紹</span></a></li>
        </ul>
    </li>
 </ul>
@@ -94,5 +94,9 @@
 |------|------|
 | `assets/js/portal-nav.js` | `buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
 | `assets/css/style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
+| `.cursor/rules/user-scope-and-nav.mdc` | 與本頁對齊的 Cursor 規則（意圖／導覽開放） |
+| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍與共用 CSS 邊界 |
+| `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記 |
+| `docs/sql/sql_plan.md` | SQL 練習／筆記 |

 （導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
@@ -1,98 +1,98 @@
-# 💎 水晶男孩推廣部：SQL 三日修煉手冊
-
-> **任務清單 (SOP)**
-> * style(file): 檔案命名為 .md
-> * fix(db): 確保最後不帶多餘逗號
-> * perf(save): 隨手 Ctrl + S 存檔
-
---
-
-## 📅 DAY 1：連連看基礎 (JOIN)
-**邏輯**：用 album_id 把「歌曲」與「專輯」黏起來。
-### 1. 傳統連表 (WHERE)
-```sql
-SELECT songs.title, albums.title 
-FROM songs, albums 
-WHERE songs.album_id = albums.id 
-ORDER BY songs.id;
-```
-
-### 2. 標準內連線 (INNER JOIN)
-```sql
-SELECT songs.title, albums.title 
-FROM songs
-INNER JOIN albums ON songs.album_id = albums.id 
-ORDER BY songs.id;
-```
-### 3. 左外連線 (LEFT JOIN)
-```sql
-SELECT songs.title, albums.title 
-FROM songs
-LEFT JOIN albums ON songs.album_id = albums.id;
-```
-### 4. 右外連線 (RIGHT JOIN)
-```
-SELECT songs.title, albums.title 
-FROM songs
-RIGHT JOIN albums ON songs.album_id = albums.id;
-```
-## 📅 DAY 2：資料美化與彙整
-**邏輯**：處理空值與統計數量。
-
-### 1. 處理空值 (IFNULL)
-```sql
-SELECT 
-    IFNULL(songs.title, '未命名') AS '歌名',
-    IFNULL(albums.title, '未知') AS '專輯'
-FROM songs
-RIGHT JOIN albums ON songs.album_id = albums.id;
-```
-### 2. 分組統計 (COUNT)
-```sql
-SELECT 
-    albums.title AS '專輯名稱',
-    COUNT(songs.id) AS '歌曲總數'
-FROM albums
-LEFT JOIN songs ON albums.id = songs.album_id
-GROUP BY albums.id;
-```
-## 📅 DAY 3：魔王級子查詢 (Subquery)
-
-### 1. 巢狀條件查詢
-```sql
-SELECT * FROM songs 
-WHERE album_id = (SELECT id FROM albums WHERE title = 'Road Fighter');
-```
-- 在每首歌後面顯示目前所有歌曲 album_id 的平均值（對比用）
-
-### 2.多表關聯查詢
-```sql
-- 邏輯：同時連三張表（歌曲、專輯、成員）
-SELECT 
-    songs.title AS '歌名',
-    albums.title AS '專輯名稱',
-    albums.release_date AS '發行日期'
-FROM 
-    songs, 
-    albums
-WHERE 
-    songs.album_id = albums.id AND 
-    albums.id = 1; -- 這裡的 1 代表第一張專輯（對應老師的 dept=1）
-
-```
-### 3. 計算式子查詢
-```sql
-SELECT 
-    title, 
-    album_id, 
-    (SELECT AVG(album_id) FROM songs) AS '全庫平均編號'
-FROM 
-    songs;
-```
-
-
-## 🛠 努比的開發 SOP 筆記
- **feat(db)**: 修改語法後先按 `Ctrl + S` 存檔。
- **style(code)**: 關鍵字大寫，欄位名小寫。
- **fix(db)**: 確保最後一個欄位沒有多餘的逗號。
+# 💎 水晶男孩推廣部：SQL 三日修煉手冊
+
+> **任務清單 (SOP)**
+> * style(file): 檔案命名為 .md
+> * fix(db): 確保最後不帶多餘逗號
+> * perf(save): 隨手 Ctrl + S 存檔
+
+---
+
+## 📅 DAY 1：連連看基礎 (JOIN)
+**邏輯**：用 album_id 把「歌曲」與「專輯」黏起來。
+### 1. 傳統連表 (WHERE)
+```sql
+SELECT songs.title, albums.title 
+FROM songs, albums 
+WHERE songs.album_id = albums.id 
+ORDER BY songs.id;
+```
+
+### 2. 標準內連線 (INNER JOIN)
+```sql
+SELECT songs.title, albums.title 
+FROM songs
+INNER JOIN albums ON songs.album_id = albums.id 
+ORDER BY songs.id;
+```
+### 3. 左外連線 (LEFT JOIN)
+```sql
+SELECT songs.title, albums.title 
+FROM songs
+LEFT JOIN albums ON songs.album_id = albums.id;
+```
+### 4. 右外連線 (RIGHT JOIN)
+```
+SELECT songs.title, albums.title 
+FROM songs
+RIGHT JOIN albums ON songs.album_id = albums.id;
+```
+## 📅 DAY 2：資料美化與彙整
+**邏輯**：處理空值與統計數量。
+
+### 1. 處理空值 (IFNULL)
+```sql
+SELECT 
+    IFNULL(songs.title, '未命名') AS '歌名',
+    IFNULL(albums.title, '未知') AS '專輯'
+FROM songs
+RIGHT JOIN albums ON songs.album_id = albums.id;
+```
+### 2. 分組統計 (COUNT)
+```sql
+SELECT 
+    albums.title AS '專輯名稱',
+    COUNT(songs.id) AS '歌曲總數'
+FROM albums
+LEFT JOIN songs ON albums.id = songs.album_id
+GROUP BY albums.id;
+```
+## 📅 DAY 3：魔王級子查詢 (Subquery)
+
+### 1. 巢狀條件查詢
+```sql
+SELECT * FROM songs 
+WHERE album_id = (SELECT id FROM albums WHERE title = 'Road Fighter');
+```
+-- 在每首歌後面顯示目前所有歌曲 album_id 的平均值（對比用）
+
+### 2.多表關聯查詢
+```sql
+-- 邏輯：同時連三張表（歌曲、專輯、成員）
+SELECT 
+    songs.title AS '歌名',
+    albums.title AS '專輯名稱',
+    albums.release_date AS '發行日期'
+FROM 
+    songs, 
+    albums
+WHERE 
+    songs.album_id = albums.id AND 
+    albums.id = 1; -- 這裡的 1 代表第一張專輯（對應老師的 dept=1）
+
+```
+### 3. 計算式子查詢
+```sql
+SELECT 
+    title, 
+    album_id, 
+    (SELECT AVG(album_id) FROM songs) AS '全庫平均編號'
+FROM 
+    songs;
+```
+
+
+## 🛠 努比的開發 SOP 筆記
+- **feat(db)**: 修改語法後先按 `Ctrl + S` 存檔。
+- **style(code)**: 關鍵字大寫，欄位名小寫。
+- **fix(db)**: 確保最後一個欄位沒有多餘的逗號。
 - **perf(note)**: 執行成功後，截圖貼到你的筆記網站。
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水晶男孩｜六顆水晶 · 黑白分流</title>
+    <link rel="stylesheet" href="../assets/css/style.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="member-crystal-page">
+    <header class="map-archive-header">
+        <div class="header-inner">
+            <h1 class="main-title">六顆水晶</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">BLACK KIES · WHITE KIES</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <main class="content-container member-crystal-main" id="crystal-board">
+        <p class="member-crystal-lead">
+            團名源自德語「六顆水晶」：六位成員依聲線與舞台角色分為<strong>黑水晶</strong>（Rap／舞蹈）與<strong>白水晶</strong>（主唱），並排成經典的黑白分流印象。
+        </p>
+
+        <!-- 2×4 交錯：上排左三黑水晶、右一介紹；下排左一介紹、右三白水晶 -->
+        <div class="member-crystal-board" role="region" aria-label="黑水晶與白水晶成員配置">
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="b1">
+                <article class="member-poster member-poster--black" aria-labelledby="poster-ejw">
+                    <div class="member-poster__wanted">BLACK</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Leader · Rap · Dance</p>
+                        <h2 class="member-poster__name" id="poster-ejw">殷志源</h2>
+                        <p class="member-poster__name-en">EUN JI WON</p>
+                        <p class="member-poster__stamp">BLACK KIES</p>
+                    </div>
+                </article>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="b2">
+                <article class="member-poster member-poster--black" aria-labelledby="poster-ljj">
+                    <div class="member-poster__wanted">BLACK</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/member/1595330620293.jpg" alt="李宰鎮肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Rap · Dance</p>
+                        <h2 class="member-poster__name" id="poster-ljj">李宰鎮</h2>
+                        <p class="member-poster__name-en">LEE JAE JIN</p>
+                        <p class="member-poster__stamp">BLACK KIES</p>
+                    </div>
+                </article>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="b3">
+                <article class="member-poster member-poster--black" aria-labelledby="poster-kjd">
+                    <div class="member-poster__wanted">BLACK</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Rap · Dance</p>
+                        <h2 class="member-poster__name" id="poster-kjd">金在德</h2>
+                        <p class="member-poster__name-en">KIM JAE DUC</p>
+                        <p class="member-poster__stamp">BLACK KIES</p>
+                    </div>
+                </article>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-black" data-area="intro-black">
+                <div class="member-crystal-intro member-crystal-intro--black">
+                    <h2 class="member-crystal-intro__title">黑水晶</h2>
+                    <p class="member-crystal-intro__en">Black Kies</p>
+                    <p>殷志源、李宰鎮、金在德：偏重節奏與舞台張力的路線，Rap 與舞蹈撐起現場骨架，也是團體在舞曲與嘻哈語彙上最容易被第一眼認出的「深色稜線」。</p>
+                    <p>視覺上常以俐落、酷感與強烈節拍感與白水晶區隔；在編曲結構裡，常負責推進段落與製造記憶點的「引擎室」。</p>
+                </div>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-white" data-area="intro-white">
+                <div class="member-crystal-intro member-crystal-intro--white">
+                    <h2 class="member-crystal-intro__title">白水晶</h2>
+                    <p class="member-crystal-intro__en">White Kies</p>
+                    <p>姜成勳、高志溶、張水院：以主唱與和聲線條為核心，負責旋律的延展與情緒堆疊；許多主打裡讓人一聽就忘不掉的副歌與高音色彩，多半與這條「亮色聲帶」有關。</p>
+                    <p>與黑水晶並列時，剛好形成「節奏骨架 × 旋律羽翼」的經典分工想像，也是團名裡「水晶」雙色對照最常見的說法來源。</p>
+                </div>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="w1">
+                <article class="member-poster member-poster--white" aria-labelledby="poster-ksh">
+                    <div class="member-poster__wanted">WHITE</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Main Vocal</p>
+                        <h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
+                        <p class="member-poster__name-en">KANG SUNG HOON</p>
+                        <p class="member-poster__stamp">WHITE KIES</p>
+                    </div>
+                </article>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="w2">
+                <article class="member-poster member-poster--white" aria-labelledby="poster-kjy">
+                    <div class="member-poster__wanted">WHITE</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Vocal</p>
+                        <h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
+                        <p class="member-poster__name-en">KO JI YONG</p>
+                        <p class="member-poster__stamp">WHITE KIES</p>
+                    </div>
+                </article>
+            </div>
+
+            <div class="member-crystal-cell member-crystal-cell--poster" data-area="w3">
+                <article class="member-poster member-poster--white" aria-labelledby="poster-jsw">
+                    <div class="member-poster__wanted">WHITE</div>
+                    <div class="member-poster__sheet">
+                        <div class="member-poster__photo">
+                            <img src="../assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg" alt="張水院肖像" width="280" height="340" loading="lazy">
+                        </div>
+                        <p class="member-poster__role">Vocal</p>
+                        <h2 class="member-poster__name" id="poster-jsw">張水院</h2>
+                        <p class="member-poster__name-en">JANG SU WON</p>
+                        <p class="member-poster__stamp">WHITE KIES</p>
+                    </div>
+                </article>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 — 六顆水晶 · 黑白分流</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <script src="../assets/js/portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
+</body>
+
+</html>
@@ -61,6 +61,16 @@
                        <li><a href="grok.html#now">#now</a></li>
                    </ul>
                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="member.html">member.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜六顆水晶 · 黑白分流</cite></p>
+                    <p class="site-guide-note">2×4 交錯格：左上三張黑水晶海報、右上黑水晶介紹；左下白水晶介紹、右下三張白水晶海報。</p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="member.html#crystal-board">#crystal-board</a></li>
+                    </ul>
+                </article>
            </div>
        </section>

@@ -114,6 +124,12 @@
                    </ul>
                </article>

+                <article class="site-guide-card">
+                    <h3><a href="../variety/NJTW/NJTW5.html">variety/NJTW/NJTW5.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>新西遊記：成員介紹</cite></p>
+                    <p class="site-guide-note">綜藝子頁；全站導覽「瘋子與天才」子選單第三項可進入。</p>
+                </article>
+
                <article class="site-guide-card">
                    <h3><a href="sunghoon.html">sunghoon.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
@@ -13,9 +13,17 @@
 <body class="ebook-ssg2-page totoga2-page">
    <header class="map-archive-header">
        <div class="header-inner">
+            <!-- 核心特輯名稱 -->
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
+
+            <div class="main-content-title">
+                <span class="highlight-text">水晶男孩回來啦！</span>
+                <span class="eng-title">SECHSKIES COM' BACK</span>
+            </div>
+
            <div class="subtitle-wrap">
                <span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
+                <span class="event-date">APRIL 14, 2016</span>
            </div>
        </div>
    </header>
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>新西遊記：成員介紹</title>
+    <link rel="stylesheet" href="../../assets/css/style.css">
+    <link rel="stylesheet" href="../../assets/css/tablet.css">
+    <link rel="stylesheet" href="njtw5.css">
+    <style>
+        /* 本頁專用：.nickname 只寫在 HTML（依你要求，未再放到 njtw5.css） */
+        body.njtw5-page .member-card .nickname {
+            display: block;
+            margin-top: 0.65rem;
+            padding: 0.15rem 0;
+            font-size: max(14px, 0.92rem);
+            font-weight: 700;
+            color: #3d240c;
+            line-height: 1.5;
+            word-break: break-word;
+            overflow-wrap: anywhere;
+            opacity: 1;
+            visibility: visible;
+            position: relative;
+            z-index: 1;
+        }
+
+        .main-header {
+            text-align: center;
+            margin-bottom: 50px;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body class="njtw5-page">
+    <header class="main-header">
+        <h1>新西遊記 5：與鬼神同行</h1>
+        <p class="intro">
+            這是一場驚心動魄（搞笑）的鬼怪盛宴！<br>
+            六位成員化身世界各地的經典鬼怪，展開一場前往香港與北海道的爆笑冒險。
+        </p>
+    </header>
+    <div class="container">
+        <!-- 第一排 -->
+        <div class="member-card m1">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">姜鎬童</div>
+                <div class="role">無臉男 (鎬童臉)</div>
+                <span class="nickname">#吃貨精靈 #低聲細語</span>
+            </div>
+        </div>
+
+        <div class="member-card m2">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">李壽根</div>
+                <div class="role">恰吉</div>
+                <span class="nickname">#最強短腿 #瘋狂跑動</span>
+            </div>
+        </div>
+
+        <div class="member-card m3">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">殷志源</div>
+                <div class="role">陰間使者</div>
+                <span class="nickname">#瘋子使者 #最帥鬼怪</span>
+            </div>
+        </div>
+
+        <!-- 第二排 -->
+        <div class="member-card m4">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">安宰賢</div>
+                <div class="role">殭屍 (新瘋)</div>
+                <span class="nickname">#美男殭屍 #運動白痴</span>
+            </div>
+        </div>
+
+        <div class="member-card m5">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">宋旻浩</div>
+                <div class="role">處女鬼</div>
+                <span class="nickname">#長髮宋 #綜藝神降臨</span>
+            </div>
+        </div>
+
+        <div class="member-card m6">
+            <div class="member-image"></div>
+            <div class="info">
+                <div class="name">P.O</div>
+                <div class="role">吸血鬼</div>
+                <span class="nickname">#新弟子 #德古拉</span>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
@@ -0,0 +1,166 @@
+/**
+ * NJTW5 專用（與 NJTW5.html 同資料夾）
+ * 長條圖、各卡裁切位置請只改此檔。
+ */
+body.njtw5-page {
+    background-color: var(--surface-soft, #fff9e8);
+    color: var(--text-color, #333);
+    font-family: 'Noto Sans TC', system-ui, sans-serif;
+    margin: 0;
+    padding: clamp(16px, 4vw, 40px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: clamp(20px, 3.5vw, 32px);
+    overflow-x: hidden;
+    box-sizing: border-box;
+}
+
+body.njtw5-page .main-header {
+    width: 100%;
+    max-width: min(1000px, 100%);
+    box-sizing: border-box;
+    text-align: center;
+    padding: 0 clamp(4px, 2vw, 12px);
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+body.njtw5-page .main-header h1 {
+    margin: 0 0 0.65rem;
+    font-size: clamp(1.35rem, 4vw, 1.85rem);
+    font-weight: 800;
+    color: var(--dark-yellow, #4e492b);
+    line-height: 1.25;
+    letter-spacing: 0.02em;
+}
+
+body.njtw5-page .main-header .intro {
+    margin: 0;
+    font-size: clamp(0.9rem, 2.3vw, 1.05rem);
+    color: #444;
+    line-height: 1.65;
+    max-width: 42em;
+    margin-inline: auto;
+}
+
+body.njtw5-page .container {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: clamp(12px, 2.5vw, 20px);
+    width: 100%;
+    max-width: min(1000px, 100%);
+    box-sizing: border-box;
+}
+
+body.njtw5-page .member-card {
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    background-color: var(--surface, #fffdf7);
+    border: 1px solid rgba(255, 204, 0, 0.38);
+    border-radius: 15px;
+    /* 勿對整卡 hidden，否則底部 .nickname 可能被裁掉、像「看不到」 */
+    overflow: visible;
+    text-align: center;
+    box-shadow: 0 8px 0 rgba(255, 204, 0, 0.28), 0 12px 24px rgba(0, 0, 0, 0.08);
+    transition: transform 0.2s ease;
+}
+
+body.njtw5-page .member-card:hover {
+    transform: translateY(-5px);
+}
+
+body.njtw5-page .member-image {
+    width: 100%;
+    height: clamp(200px, 32vw, 280px);
+    box-sizing: border-box;
+    background-color: #1a1812;
+    /* 長條圖檔與此 CSS 同資料夾；檔名不同請改 url */
+    background-image: url("1538074991_Fm.jpg");
+    /* background-size 改由各 .m1–.m6 單獨設定 */
+    background-repeat: no-repeat;
+    border-bottom: 1px solid rgba(255, 204, 0, 0.4);
+    border-radius: 14px 14px 0 0;
+    overflow: hidden;
+}
+
+/* 各卡：background-size、background-position 可逐張微調（圖檔見 .member-image） */
+body.njtw5-page .m1 .member-image {
+    background-size: 600% auto;
+    background-position: 47% 48%;
+}
+
+body.njtw5-page .m2 .member-image {
+    background-size: 600% auto;
+    background-position: 16% 81%;
+}
+
+body.njtw5-page .m3 .member-image {
+    background-size: 600% auto;
+    background-position: 92% 18%;
+}
+
+body.njtw5-page .m4 .member-image {
+    background-size: 600% auto;
+    background-position: 64% 8%;
+}
+
+body.njtw5-page .m5 .member-image {
+    background-size: 600% auto;
+    background-position: 0% 17%;
+}
+
+body.njtw5-page .m6 .member-image {
+    background-size: 600% auto;
+    background-position: 25% 0%;
+}
+
+body.njtw5-page .info {
+    padding: clamp(10px, 2vw, 15px);
+    min-width: 0;
+}
+
+body.njtw5-page .name {
+    font-size: clamp(1.1rem, 3.2vw, 1.5rem);
+    font-weight: 800;
+    color: var(--dark-yellow, #4e492b);
+    margin: 0 0 0.35rem;
+    line-height: 1.2;
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+}
+
+body.njtw5-page .role {
+    font-size: clamp(0.85rem, 2.2vw, 1rem);
+    color: #555;
+    background: rgba(255, 204, 0, 0.16);
+    display: inline-block;
+    max-width: 100%;
+    padding: 0.2rem 0.55rem;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 204, 0, 0.35);
+    line-height: 1.35;
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    body.njtw5-page .container {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    body.njtw5-page .member-card {
+        transition: none;
+    }
+
+    body.njtw5-page .member-card:hover {
+        transform: none;
+    }
+}