/* ============================================================
material-notice.css — 教材版本提醒（四個顯示點共用）
顯示點一 商品總覽卡片 plan.aspx ／ 顯示點二 商品詳細頁 feature.aspx
顯示點三 購物車 shopping.aspx ／ 顯示點四 訂單明細
⚠️ 由**各顯示點的頁面自行載入**（file-ticks 自動 cache-bust），不掛 main.master：
掛 master 對 27 個用不到的公開頁是多餘的 render-blocking 往返，
而顯示點四 buyrecord.aspx 走的是 member.master，掛了也蓋不到 ⟹ 過寬又不完整。
🔴 這份「已載入」清單就是後續 Task 的檢查依據，改動載入點時**必須同步這裡**：
漏掉不會報錯，只會讓琥珀標籤靜默退化成無樣式純文字。
目前已載入：
· web/plan.aspx:18 （顯示點一／商品總覽卡片，Task 5）
· web/feature.aspx:20 （顯示點二／商品詳細頁，Task 6）
尚待補上：
· Task 7 → web/shopping.aspx（顯示點三／購物車品項）
· Task 8 → web/buyrecord.aspx（顯示點四／訂單明細）
⚠️ buyrecord.aspx 走的是 member.master 不是 main.master，
掛在 main.master 上蓋不到它——這正是本檔改成逐頁掛的原因。
視覺沿用站上既有的琥珀色提醒語彙（「規範改版提醒」「教材新版提醒」兩個先例）。
🔴 rem 的基準是 **10px，不是瀏覽器預設的 16px**（2026-08-14 複審抓出，本檔全數換算）：
css/bootstrap.css:1079-1080 html { font-size: 10px; } ← 不在任何 @media 內
main.master:41 （feature.aspx／plan.aspx 都吃得到）
全站沒有第二處樣式表把它改回來；本專案自己的 css/web/buyrecord-v2.css:5 檔頭也早已把
「站台 html{font-size:10px}」寫成已知事實，全站 4 支 iv2 CSS 的 rem 字級值域（1.2～5.8rem）
也都是按 10px 基準寫的 —— 本檔是跟上同一慣例，不是另立一套。
⟹ 本檔所有 font-size 的 rem 值一律以 10px 換算：**1.68rem = 16.8px（內文下限）**、
**1.84rem = 18.4px（按鈕下限）**、1.76rem = 17.6px。
⛔ 不得再寫 1.05／1.1／1.15rem 這類「照 16px 基準想出來」的值 —— 它們實際只渲染出
10.5／11／11.5px，比旁邊的內文小約 40%，而且**不會有任何錯誤提示**。
============================================================ */
/* 區塊：總覽卡片與詳細頁用（.mn-line 保留給購物車／訂單的單行版） */
.mn-block {
margin: 0.6em 0 0;
}
/* 琥珀標籤 */
.mn-tag {
display: inline-flex;
align-items: center;
gap: 0.35em;
max-width: 100%;
background: #FEF3C7;
color: #92400E;
border: 1px solid #FCD34D;
border-radius: 999px;
padding: 0.25em 0.8em;
font-size: 1.68rem;
font-weight: 600;
line-height: 1.4;
}
/* 一句摘要 */
.mn-summary {
font-size: 1.68rem;
color: #78350F;
line-height: 1.6;
margin: 0.4em 0 0;
word-break: break-word;
overflow-wrap: break-word;
}
/* 🔴 全站 css/style.css:143 的 p{font-size:15px} 會直接命中 並蓋過容器繼承字級。
沒有這一條，.mn-summary 以外的任何
（例如詳細頁的完整說明段落）都會被壓回 15px。 */
.mn-block p,
.mn-line p {
font-size: inherit;
}
/* 🔴 上面那條 `.mn-block p`(0,1,1) 的特異度高於 `.mn-summary`(0,1,0)，**與原始碼順序無關**，
會讓 :55 的 font-size 變成死宣告，摘要一律吃容器的環境字級。
顯示點一僥倖沒事（.iv2-root 有 17px 基準，見 css/web/plan-v2.css:53），
但顯示點三（購物車）／四（訂單明細）沒有那個基準，摘要會**靜默**縮到 13px。
⚠️ 13px 是實查值不是估值（2026-08-14 複審 N-6）：main.master 上**最後一條** body 規則是
css/style.css:51-59（`font-size: 13px` 在 :53、`line-height: 21px` 在 :54），
它以相同特異度 (0,0,1) 蓋過 css/bootstrap.css:1086 的 `font-size: 14px`（同一個 `body{}`
區塊起於 :1084）——決勝的是載入順序（main.master:41 bootstrap.min.css → main.master:55 style.css）。
⛔ 不用 !important（要留覆寫空間給後續三個顯示點）；
⛔ 也不把上面那條改成 :not(.mn-summary)（會變成每新增一個 class 就要維護的排除清單）。 */
/* 🔴 同理，css/web/plan-v2.css 的 `.iv2-root p{margin:0}`(0,1,1) 與全站 style.css 的
`p{font-size:15px}` 都會以更高特異度壓過單一 class 的 `.mn-summary`(0,1,0)：
:58 的 margin 在顯示點一（.iv2-root 底下）會被歸零，標籤與摘要間距失效。
把 margin 併進這條 (0,2,0) 規則才追得上，理由與上面 font-size 那條完全對稱。 */
.mn-block .mn-summary,
.mn-line .mn-summary {
font-size: 1.68rem;
margin: 0.4em 0 0;
}
/* 設定錯誤：同一組版型但降低彩度，避免看起來像一則「真的有提醒」。
⛔ 不得改成隱藏——那等於在該提醒的科目上靜默失去揭露。 */
.mn-error .mn-tag {
background: #F3F4F6;
color: #4B5563;
border-color: #D1D5DB;
}
.mn-error .mn-summary {
color: #4B5563;
}
/* 顯示點一：.iv2-prod-body 本身是 flex column 且已有 gap:12px，
若再吃 .mn-block 的上外距會多出一段空白，故在卡片情境歸零。 */
.iv2-prod-body .mn-block {
margin-top: 0;
}
/* ============================================================
顯示點二（商品詳細頁 feature.aspx）：常駐完整說明
------------------------------------------------------------
🔴 特異度策略（Task 5 為此吃了兩次虧，這裡改成從根本迴避）：
本站有兩條後代選擇器會壓過任何單一 class (0,1,0)——
css/style.css:143 p { color: #666; font-size: 15px }
css/web/feature-v2.css:80-84 .iv2-root h1,h2,h3,h4,p { margin: 0 } (0,1,1)
而顯示點二的區塊是插進 #planContents（.iv2-rich-content）內，那裡還有更狠的：
feature-v2.css:553-555 .iv2-root .iv2-rich-content:not(.iv2-hero-infos) p { font-size: 1em } (0,3,1)
feature-v2.css:567 .iv2-root .iv2-rich-content p { margin-bottom: … } (0,2,1)
要贏過 (0,3,1) 得寫到四層 class，那是在跟樣式表打軍備競賽。
⟹ **本區塊的新標記刻意一個
都不用**：說明文字用
，
.iv2-rich-content 底下沒有任何針對 div 的元素選擇器（style.css 亦無 `div {}`／`span {}`），
單一 class 就能定案，不必也不會被靜默壓掉。
仍需要提高特異度的只有
：
css/style.css:128 h4 { font-size: 16px; line-height: 22px } (0,0,1)
css/style.css:101-111 h1..h6 { margin: 0; color: #444 } (0,0,1)
css/web/feature-v2.css:80-84 .iv2-root h4 { margin: 0 }（h4 在 :83）(0,1,1) ← 這條要贏
故一律寫成 .mn-block .mn-title (0,2,0)。⛔ 不用 !important。
============================================================ */
/* 科目名稱：一個方案可能含多個科目、而只有其中幾個受影響，提醒必須點名科目
——否則學生看到「本科目上課教材將出新版」卻不知道是哪一科。 */
.mn-subject {
display: inline-block;
margin-left: 0.5em;
font-size: 1.68rem;
font-weight: 600;
color: #92400E;
word-break: break-word;
}
/* 提醒標題（後台 title 欄，一句話） */
.mn-block .mn-title {
font-size: 1.84rem;
font-weight: 700;
line-height: 1.5;
color: #78350F;
margin: 0.55em 0 0.3em;
word-break: break-word;
}
/* 完整說明（後台 content 欄，長文；換行已由 JS 轉成
）
🔴 white-space: pre-wrap 必須有，否則**後台所見 ≠ 前台所得**：
後台預覽區用的就是 pre-wrap（Admin/html/material-notice.html:60），
作者在 textarea 打的連續空白／縮排（例如條列對齊）在前台會被 HTML 預設的
white-space:normal 摺疊成一個空白，而且不會有任何錯誤提示。
⚠️ 與 JS 的「換行轉
」不衝突：mnTextToHtml 是把 \r\n／\n **取代**成
，
換行字元已經消失，pre-wrap 不會再多算一次而變成雙倍行距。 */
.mn-block .mn-content {
font-size: 1.76rem;
line-height: 1.8;
color: #78350F;
margin: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
}
/* 詳細頁版型：沿用站上既有「規範改版提醒」的琥珀 callout 語彙
（blockquote.iv2-warn，見 _migrations/2026-07-02_add_regulation_notice_steel_rc_books.sql），
讓兩種提醒在同一個位置看起來是同一件事。
⚠️ 只在 .iv2-rich-content 情境套用，總覽卡片（顯示點一）維持無框的輕量版。 */
.iv2-rich-content .mn-block {
background: #FFFBEB;
border: 1px solid #FDE68A;
border-left: 4px solid #F59E0B;
border-radius: 8px;
padding: 0.9em 1.1em;
margin: 1.2em 0;
}
/* 設定錯誤：降彩度但不隱藏（⛔ 隱藏＝在該科目上靜默失去揭露）。
⚠️ 這兩條必須排在上面兩條之後：.mn-error .mn-content 與 .mn-block .mn-content
同為 (0,2,0)，靠原始碼順序決勝。 */
.mn-error .mn-content {
color: #4B5563;
}
.iv2-rich-content .mn-block.mn-error {
background: #F9FAFB;
border-color: #E5E7EB;
border-left-color: #9CA3AF;
}
/* ============================================================
顯示點二 位置①（購買面板 .iv2-buy-panel，feature.aspx:73）：摘要 ＋ 可展開
------------------------------------------------------------
🔴 為什麼要另寫一段作用域規則：.iv2-buy-panel **不是** .iv2-rich-content，
上面那條 `.iv2-rich-content .mn-block` 的 callout 版型在這裡完全不會套用，
不補這一段就會退化成沒有底色／沒有邊框的裸文字，混在深藍價格區與白色 CTA 之間看不出是提醒。
🔴 字級環境與位置②不同（審查已點名的坑）：
位置②在 .iv2-rich-content:not(.iv2-hero-infos)（feature-v2.css:552）底下 → 1.05em 放大；
位置①只有 .iv2-root 的 17px（feature-v2.css:54；≤600px 為 16px），**沒有那層放大**。
⟹ .mn-tag／.mn-subject／.mn-title／.mn-content 一律用 **rem 絕對單位**，環境換了字級也不會跟著縮。
⛔ 這個「不用 em」的理由本身沒變、仍然成立：顯示點三（購物車）／四（訂單明細）**沒有**
.iv2-root 的 17px 基準，用 em 會讓字級跟著各自容器**靜默**縮到 **13px**
——依據是 css/style.css:53 的 `body { font-size: 13px }`（區塊 :51-59），它以相同特異度
(0,0,1) 但更晚的載入順序（main.master:41 → main.master:55）蓋過 css/bootstrap.css:1086
的 14px。這是實查值，不是估值（2026-08-14 複審 N-6）。
⚠️ 但 rem 的基準是 **10px 不是 16px**（依據見本檔開頭：css/bootstrap.css:1079-1080，
由 main.master:41 載入）。2026-08-14 前這裡寫的 1.05／1.15／1.1rem 是照 16px 想的，
實際只渲染出 10.5／11.5／11px，已全數換算成 1.68／1.84／1.76rem。
⛔ 改任何 .mn-* 字級前，先回頭讀本檔開頭那段基準說明，不要再憑 16px 心算。
🔴 **顯示點四（web/buyrecord.aspx:1）走的是 member.master，那裡沒有 bootstrap**：
member.master:5-12 只掛 Google Fonts ＋ css/web/member-shell-v2.css，
**不載 bootstrap.min.css**——而 `html{font-size:10px}` 全站只有 bootstrap 那一處。
⟹ 在該頁 rem 基準會退回瀏覽器預設 16px，本檔的 1.68rem 會渲染成 26.9px 而非 16.8px，
一樣**沒有任何錯誤提示**。⛔ Task 8 接上顯示點四前必須先處理，本輪只記錄不動。
⚠️ .iv2-buy-panel 是 padding:0 ＋ overflow:hidden（feature-v2.css:373-381），
區塊內縮距離由本規則自己給：對齊 .iv2-actions 的 padding-inline
（桌機 24px，feature-v2.css:452；≤980px 為 18px，:521），取 20px 折中，不另開 media query。
⚠️ ≤980px 時 .iv2-buy-panel 會變 position:static 並單欄堆疊（feature-v2.css:513-514），
本區塊跟著走版不需要另外處理；至於懸浮條 .iv2-buy-fixed 這個「hero 之外的第三個購買入口」，
已由本檔最下方的**位置③**（.iv2-buy-fixed .mn-strip-tag）另行涵蓋，不再是已知缺口。
============================================================ */
.iv2-buy-panel .mn-block {
background: #FFFBEB;
border: 1px solid #FDE68A;
border-left: 4px solid #F59E0B;
border-radius: 8px;
padding: 0.85em 1em;
margin: 16px 20px 0;
}
.iv2-buy-panel .mn-block.mn-error {
background: #F9FAFB;
border-color: #E5E7EB;
border-left-color: #9CA3AF;
}
/* 展開按鈕。
🔴 特異度必須到 (0,2,0)：feature-v2.css:85 的 `.iv2-root button { font: inherit; border: none;
background: none; color: inherit }` 是 (0,1,1)，會壓過任何單一 class 的 font-size／border／
background／color——單寫 `.mn-toggle` 這四個宣告全部是死宣告，按鈕會長得跟一段純文字一樣。
⚠️ font-size 1.84rem ＝ 專案規則的按鈕下限 18.4px（rem 基準 10px，見本檔開頭）。 */
.mn-block .mn-toggle {
display: inline-block;
margin-top: 0.5em;
padding: 0.3em 0.9em;
border: 1px solid #FCD34D;
border-radius: 999px;
background: #FFFFFF;
color: #92400E;
font-size: 1.84rem;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
}
.mn-block .mn-toggle:hover,
.mn-block .mn-toggle:focus {
background: #FEF3C7;
border-color: #F59E0B;
}
/* 收合態。
🔴 不能只靠 hidden 屬性：舊瀏覽器（含部分 Android WebView）不套 UA 的 [hidden]{display:none}，
沒有這一條的話完整長文會直接攤在購買面板裡，把加入購物車／直接結帳擠出首屏——
那正是位置①改成摘要版要避免的失敗模式。
特異度 (0,3,0)，勝過 normalize/bootstrap 的 `[hidden]`(0,1,0)（css/bootstrap.css:41-43）。
⚠️ 這裡不需要跟同檔 .mn-block .mn-content(0,2,0) 比 —— 那條**沒有宣告 display**，沒有東西要勝過
（2026-08-14 複審 M-4：原註解多寫了這個不成立的理由，已刪）。 */
.mn-block .mn-detail[hidden] {
display: none;
}
/* 展開後的說明與標題之間留一點距離（.mn-content 的 margin 為 0，此處只在展開版加回） */
.mn-block .mn-detail {
margin-top: 0.5em;
}
/* ============================================================
顯示點二 位置③（懸浮條 .iv2-buy-fixed，web/feature.aspx:174-182）：極簡揭露標籤
------------------------------------------------------------
🔴 為什麼位置①還不夠（2026-08-14 使用者裁決「補」）：
懸浮條在 ≤980px 顯示（css/web/feature-v2.css:895-896）、window.scrollY > 400 就出現
（js/web/feature.js:61-64），內含可直接加入購物車的 #bfBuyBtn（feature.aspx:180）；
而 ≤980px 時 hero grid 單欄堆疊（feature-v2.css:286-288），購買面板（