style 統一header

.cursor/collaboration-notes.md

@@ -36,10 +36,20 @@
 
 ---
 
-## 5. 相關規則檔
+## 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/rules/agent-must-ask.mdc

@@ -0,0 +1,29 @@
+---
+description: 助手必問再改（站主明講）；防擅自改名、批次改檔、編碼毀檔
+alwaysApply: true
+---
+
+# 必問再改（站主已多次強調）
+
+## 硬規則
+
+1. **站主沒說「執行」→ 不改檔**（可先說明、對照、列計畫）。
+2. **站主說「先改一頁」→ 只改那一頁**，不得順手全站套用。
+3. **class 改名／全站換名**：先問站主**確切 class 字串**，不得自創（例如不得擅自 `inner-page-header`）；不得用 PowerShell 批次替換 HTML。
+4. **導覽文案**：不得自加括號、副標、路徑說明（例如禁止擅自「傳奇的轉折（六六歌2）」）；`portal-nav.js` 改字前先對站主原句。
+5. **CSS 對齊 devtools**：站主給的勾選／數值照抄；若必須補 `min-height`、`padding` 等 devtools 沒有的值，**先寫明「這是我補的」**，等站主說執行再寫入。
+
+## 禁止（曾毀站）
+
+- **禁止**用 PowerShell `Get-Content` / `Set-Content`（或未指定 `-Encoding utf8`）批次改 **`.html`** → 會把 UTF-8 中文弄成 `?`、標籤斷裂（如 `?/span>`）。
+- 若需批次改 HTML：只用 **UTF-8 安全**方式（例如逐檔 `StrReplace`、或 `git` 還原後手改），改完抽查 `index.html` 首屏中文是否正常。
+
+## 內頁 header（約定方向，名稱待站主定）
+
+- 全站內頁共用**一個** header class；**不要**用單頁主題名（如 `map-archive-header` 當全站名）— 要改名須站主指定後再執行。
+- 首頁僅 **`header#origin`** 全屏 Hero，與內頁 header class 分開。
+- 樣式以站主在**電子書頁** devtools 調過的為準後，再談是否套其他內頁（須站主說執行）。
+
+## 回覆
+
+- 站主說字太多時：**短句**，先答「做沒做、為什麼壞」，不要長篇道歉後又擅自改一輪。

assets/css/style.css

@@ -44,7 +44,7 @@ body {
     line-height: 1.6;
 }
 
-/* 首頁 Hero 全屏；內頁 banner 見 .map-archive-header／.concert-archive-header */
+/* 首頁 Hero 全屏；內頁 banner 僅 .map-archive-header（全站共用一 class） */
 header#origin {
     width: 100%;
     height: 100vh;
@@ -488,7 +488,7 @@ a.btn[data-coming-soon="true"],
     pointer-events: none;
 }
 
-header:not(.map-archive-header):not(.concert-archive-header),
+header:not(.map-archive-header),
 nav:not(.portal-nav),
 .container,
 footer {
@@ -1543,12 +1543,11 @@ footer a .mark_b {
     transform: translateY(-50%);
 }
 
-/* 內頁頂部 banner：全屏 100vh（首頁 Hero 僅 header#origin） */
-.map-archive-header,
-.concert-archive-header {
+/* 內頁頂部 banner（全站 .map-archive-header 同電子書複本；首頁僅 header#origin 全屏） */
+header.map-archive-header {
     width: 100%;
-    height: 100vh;
-    min-height: 100dvh;
+    height: auto;
+    min-height: clamp(14rem, 38vh, 24rem);
     background-image: url('../images/header.jpg');
     background-position: center 78%;
     background-repeat: no-repeat;
@@ -1558,14 +1557,13 @@ footer a .mark_b {
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding: 0 20px;
+    padding: clamp(1.75rem, 4vh, 2.75rem) 20px;
     overflow: hidden;
     position: relative;
     box-sizing: border-box;
 }
 
-.map-archive-header .main-title,
-.concert-archive-header .main-title {
+.map-archive-header .main-title {
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 900;
     color: var(--yellow, var(--primary));
@@ -1575,22 +1573,18 @@ footer a .mark_b {
     text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
 }
 
-.map-archive-header .subtitle-wrap,
-.concert-archive-header .subtitle-wrap {
+.map-archive-header .subtitle-wrap {
     margin-top: 20px;
 }
 
 .map-archive-header .subtitle-wrap::before,
-.map-archive-header .subtitle-wrap::after,
-.concert-archive-header .subtitle-wrap::before,
-.concert-archive-header .subtitle-wrap::after {
+.map-archive-header .subtitle-wrap::after {
     height: 3px;
     background-color: #ffcc00;
     max-width: 56px;
 }
 
-.map-archive-header .sub-title,
-.concert-archive-header .sub-title {
+.map-archive-header .sub-title {
     font-size: 0.92rem;
     letter-spacing: 4px;
     color: #d4d4d4;
@@ -1898,8 +1892,7 @@ footer a .mark_b {
 }
 
 @media (max-width: 920px) {
-    .map-archive-header .main-title,
-    .concert-archive-header .main-title {
+    .map-archive-header .main-title {
         letter-spacing: 4px;
     }
 
@@ -2285,8 +2278,6 @@ body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .page {
     border-radius: 0;
 }
 
-/* totoga2 整合／複本頁：頂部結構與其他 map-archive-header 內頁一致（僅 main-title + subtitle-wrap） */
-
 body.totoga2-page .totoga2-hub-controls {
     max-width: 1200px;
     margin: 24px auto 10px;

assets/css/tablet.css

@@ -134,8 +134,7 @@
         padding: clamp(18px, 4vw, 22px);
     }
 
-    .map-archive-header .main-title,
-    .concert-archive-header .main-title {
+    .map-archive-header .main-title {
         letter-spacing: clamp(3px, 1vw, 6px);
     }
 

assets/js/portal-nav.js

@@ -216,8 +216,8 @@
     <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span></a>
         <ul class="portal-submenu">
             <li class="portal-nav__subgroup">
-                <span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折（六六歌2）</span></span>
-                <ul class="portal-submenu-nested" aria-label="傳奇的轉折（六六歌2）">
+                <span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折</span></span>
+                <ul class="portal-submenu-nested" aria-label="傳奇的轉折">
                     <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-copy-timeline.html"><span class="portal-nav__label">時間軸</span></a></li>
                     <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-copy-ebook.html"><span class="portal-nav__label">電子書</span></a></li>
                     <li><a target="_blank" rel="noopener noreferrer" href="${rp}fallen/totoga2.html"><span class="portal-nav__label">圖文好讀版</span></a></li>