@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Serif+TC:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
/* ⚠ 上面這行 @import 必須是整張樣式表的第一條規則，前面不能有任何 CSS 規則，否則整條會被瀏覽器丟掉。
   字型組合與範例站 group.mikoguitar.com.tw 相同（實測它就是載這一支）。 */

/* =========================================================================
   米可吉他 — 全站自訂 CSS
   佈景：style_e

   ── 設計來源 ──
   版面與字型：範例站 group.mikoguitar.com.tw（全部開瀏覽器實測，非靜態推論）
   金色：原站 mikoguitar.com.tw 的 #F6AC1A（實測就是 logo 火焰的顏色 rgb(246,172,26)）

   ── 色票（附白底實測對比，AA 需 4.5:1）──
   #F6AC1A  金・只當底色與線條      深字放上去 10.20:1 ✅
   #825B0E  金・當文字用            白底 6.08:1 ✅
   ⚠ 2026-08-21 決定：品牌一致優先 —— READ MORE 與標題的英文行改用原色 --miko-gold
     （白底 1.94:1，未達 AA），不用壓暗版。壓暗版 --miko-gold-ink 保留給
     選單 hover／會員列 hover／手機側選單 hover 這些互動狀態。
            （原站金同色相，亮度對齊範例站 light 主題的 #7A5E20）
   #0C0A07  標題                    白底 19.77:1 ✅   ← 範例站 --obsidian
   #5A5347  內文                    白底  7.60:1 ✅   ← 範例站 light .card p
   #4A4035  次要內文                白底 10.12:1 ✅   ← 範例站 light p.intro
   ⚠ 範例站的 --gold #C49A3C 在白底只有 2.61:1，不能當文字。
     範例站自己的 light 主題也是換成暗金 #7A5E20，這裡照同一個邏輯處理。

   載入序：main.css → common.css → tholos.css → 本檔 → 色彩變數 <style>
   本檔在主題 CSS 之後，同分靠順序就贏，所以幾乎不需要 !important。
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. 本檔用的色彩變數 —— 從後台主色推導，換主色時這裡會自己跟著變

   ⚠ 這段的用意：本檔的金色不要寫死。後台「網站樣式設定」改 --primary-color 之後，
     選單底線、READ MORE、頁尾小標都會一起變，不用回來改 CSS。

   --miko-gold      = 後台主色本身，只當底色與線條
   --miko-gold-ink  = 同一個金壓暗到 53%，給「金色文字」用
                      （對原站金 #F6AC1A 剛好得到 #825B0E，白底 6.08:1）
                      換成其他主色也都還過 AA：範例站金 7.46:1、紅 12.03:1、藍 9.70:1
   ⚠ color-mix 是現代瀏覽器語法；主題本身已經在用，所以這個站沒有相容性問題。
   ------------------------------------------------------------------------- */
:root {
  --miko-gold:     var(--primary-color, #F6AC1A);
  --miko-gold-ink: color-mix(in srgb, var(--primary-color, #F6AC1A) 53%, #000);

  /* ⚠ --secondary-color 在後台是被藏起來的欄位（父層 div.col-md-6 是 display:none），
     存檔時會被略過，所以永遠停在佈景預設 #e6c332，不會跟著主色走。
     主題的 .title > span:nth-child(2)（標題的中文行）就是吃這個變數，這裡強制讓它跟著主色。 */
  --secondary-color: var(--primary-color, #F6AC1A);
}


/* -------------------------------------------------------------------------
   0b. 全站字排修正：英文單字不要從中間被切開

   common.css 裡有 :root { word-break: break-all }，會繼承到全站每一個元素，
   結果所有英文單字都可能被從中間斷行（實測手機上 Passkey 說明那行切成「Fac / e ID」）。

   word-break:normal  → 英文照單字邊界斷行；中文本來就能自由斷，不受影響
   overflow-wrap:break-word → 保留「超長網址／連續字串塞不下時仍會斷」的行為，不會撐破版面
   ------------------------------------------------------------------------- */
:root,
body { word-break: normal; overflow-wrap: break-word; }

/* ⚠ 只蓋 :root/body 不夠：主題 main.css 另有一條 a { word-break: break-all }，
   直接命中 <a> 元素，會贏過從 body 繼承來的值 —— 連結裡的英文照樣被腰斬。
   （平台原始碼 alumi 已修掉那條，但要重新編譯 + 部署才會下來，這裡先自己蓋。） */
a { word-break: normal; overflow-wrap: break-word; }


/* -------------------------------------------------------------------------
   1. 自由編輯區塊：拿掉預設灰底
   來源：style_e main.css → .index-editor { background-color:#fbfbfb }
   區塊模板永遠會吐 inline style="background-color:#<欄位>"，欄位空白時吐出的是
   無效值 "#"，於是主題那條灰就露出來。
   ⚠ 客戶在區塊設定裡真的填了背景色，inline style 仍會蓋過這裡，不影響他自訂。
   ------------------------------------------------------------------------- */
.index-editor { background-color: transparent; }


/* -------------------------------------------------------------------------
   2. 自由編輯區塊：拿掉主題硬加的上下間距
   主題三層都在加，實測每個區塊上多 48px、下多 56px：
     section{padding:2rem/1.5rem} .row{padding:1rem/.5rem} .html-info{margin-bottom:1.5rem}
   ⚠ 只打 .index-editor 範圍內；系統模組頁（課程／文章／購物車）的間距不動。
   ------------------------------------------------------------------------- */
section.index-editor              { padding-top: 0; padding-bottom: 0; }
section.index-editor > .html-info { margin-bottom: 0; }
section.index-editor .row         { padding-top: 0; padding-bottom: 0; }


/* -------------------------------------------------------------------------
   3. 內容圖片：拿掉後台內容樣式表塞的 margin
   來源：/admin/assets/minimalist-blocks/content-front.min.css
         .html-info .container img { margin:1.4rem 0 1rem }（實測上下多 22.4/16px）
   ------------------------------------------------------------------------- */
.html-info .container img { margin: 0; }


/* -------------------------------------------------------------------------
   4. 頁首（桌機）：白底 ＋ 固定 ＋ 滿版 ＋ logo 左／選單中／會員右

   照範例站的頁首規格：
     高度 77px（= 上下 padding 18 + logo 40 + 1px 邊框）
     滿版、左右 padding 56px（範例站 nav.site-nav { padding:18px 56px }）
     logo 用「高度」定尺寸（範例站 .nav-logo { height:40px; width:auto }）

   ⚠ 每條都同時寫 .navbar 與 .navbar.fixed，否則捲動時主題的 .navbar.fixed（0,3,0）
     會把 logo 欄改掉，看得出跳動。
   ⚠ 手機不套用：< 769px 時 .navbar 本來就 display:none，手機走 .mobile-menu。
   ⚠ 整段刪掉即可回到主題原本行為，其他段落不受影響。
   ------------------------------------------------------------------------- */
@media all and (min-width: 769px) {

  .navbar,
  .navbar.fixed {
    max-width: none; width: auto; margin: 0;
    padding: 0 56px;
    height: 77px; min-height: 77px;
    flex-wrap: nowrap; align-items: center;
  }

  /* 白色橫條：滿版鋪底 */
  .navbar::after {
    content: "";
    display: block;
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 77px;
    z-index: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  /* 內容疊在白條之上 */
  .navbar .navi-item { position: relative; z-index: 5; }

  /* 三欄：左右兩軌 flex:1 1 0 等寬 → 中間的選單才會真的置中（實測偏移 0px） */

  /* 左：logo */
  .navbar .navi-item:nth-child(2),
  .navbar.fixed .navi-item:nth-child(2) {
    order: 0; flex: 1 1 0; max-width: none; width: auto;
    display: flex; justify-content: flex-start; align-items: center;
  }
  .navbar .navi-item:nth-child(2) > .container { width: auto; max-width: none; padding: 0; margin: 0; }
  .navbar .navbar-brand,
  .navbar.fixed .navbar-brand { width: auto; max-width: none; }
  .navbar .navbar-brand img { width: auto; height: 40px; }

  /* 中：主選單 */
  .navbar .navi-item.naviMain,
  .navbar.fixed .navi-item.naviMain {
    order: 1; flex: 0 0 auto; max-width: none; width: auto;
  }
  .naviMain > .container { width: auto; max-width: none !important; padding: 0; margin: 0; }
  .naviMain ul { width: auto; justify-content: center; align-items: center; gap: 22px; }
  .naviMain ul > li { margin: 0; }

  /* 右：會員列（註冊／登入／購物車）
     主題原本 position:fixed 浮在右上角，這裡排進同一列。
     ⚠ 2026-08-21：這裡原本寫 display:none 把整排藏掉（誤以為購物車沒開啟時是空的），
       結果把註冊／登入／購物車弄不見了。不要再藏。 */
  .navbar .navi-item:first-child,
  .navbar.fixed .navi-item:first-child {
    order: 2; flex: 1 1 0; width: auto; padding: 0;
    display: flex; justify-content: flex-end; align-items: center;
    height: auto;   /* ⚠ 主題的 .navbar.fixed .navi-item:first-child 有 height:0，
                       只蓋 display 不夠，捲動後這排會塌成 0 高 */
  }
  .navbar .member-item { float: none; display: flex; align-items: center; margin: 0; height: auto; }
  .navbar .member-item li { display: flex; align-items: center; height: auto; }
  /* ⚠ 購物車那格是 <a><i class="fas">…</i><span id="pc_cart_quantity">0</span></a>，
     圖示 12px、數字卻繼承成 16px，中心差 2.2px，看起來沒對齊。
     用 inline-flex + align-items:center 並統一 line-height 才會齊。 */
  .navbar .member-item li a {
    color: #212121; padding: 6px 8px; font-size: 13px; letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  }
  .navbar .member-item li a i { font-size: 14px; line-height: 1; }
  .navbar .member-item li a span { font-size: 13px; line-height: 1; letter-spacing: 0; }
  .navbar .member-item li a:hover { color: var(--miko-gold-ink); }

  /* 頁首固定後，內容要空出 77px */
  .content { padding-top: 77px; }
}


/* -------------------------------------------------------------------------
   5. 選單文字與 hover —— 照範例站 nav .menu a 實測值

   範例站（1440 實測）：Inter / 12px / 500 / letter-spacing 1.4px / uppercase
     ::after → left:0 right:0 bottom:-4px height:1px
               transform:scaleX(0) transition:.4s
               transform-origin: right center → hover 翻成 left center
               （origin 翻面 = 底線「從左掃進來、往右收出去」）

   ⚠ 字級不是問題：兩站「四個中文字」實測都是 48.0px。看起來小是因為間距 ——
     範例站 gap:22px 緊湊，aten 預設 space-around 均分成 86px，散開就顯得字小。
   ⚠ 底線掛在 <span> 上不是 <a> 上，而且要把 a 的盒子收緊
     （主題原本 height:40px/line-height:40px 會把 span 撐成 40 高，底線離文字 16px；
      收成 line-height:1.8 + padding:4px 0 之後量到 6.6px，範例站是 7.0px）。
   ⚠ text-transform:uppercase 對中文沒作用，只影響拉丁字（跟範例站一致，保留）。
   ⚠ hover 文字色不能用範例站的 #C49A3C（白底 2.61:1），改用 #825B0E（6.08:1）。
   ------------------------------------------------------------------------- */
.naviMain ul > li > a { color: #212121; transition: color .3s; }

.naviMain ul > li > a > span {
  display: inline-block;
  position: relative;
  font-family: "Inter", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 13px;   /* 範例站是 12px，但中文在 12px 偏小，2026-08-21 調成 13px */
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.naviMain ul > li > a > span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--miko-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s;
}
/* ⚠ 不做 hover 變色：範例站是深底，文字轉金是「提亮」；
   我們白底上轉成暗金會變成濁褐色，看起來像壞掉而不是 highlight。
   互動回饋交給下面的金色底線動畫就夠了。 */
/* ⚠ 光是「不寫」還不夠：主題本身有一條
     .naviMain ul > li > a:hover { color: color-mix(in srgb, var(--header-link-hover-color), #fff 35%) }
   把我們的覆蓋拿掉之後那條就會復活，hover 會變成 #6F6F6F 灰。
   所以要明寫成跟平常一樣的顏色，才是真的「不變色」。 */
.naviMain ul > li > a:hover { color: #212121; }
.naviMain ul > li > a:hover > span::after,
.naviMain ul > li > a:focus-visible > span::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media all and (min-width: 769px) {
  /* 收緊 a 的盒子，底線才會貼著文字 */
  .naviMain ul > li > a { height: auto; line-height: 1.8; padding: 4px 0; }
}

/* 手機選單文字照範例站的 @media(max-width:820px)：14px / 字距 2px */
@media all and (max-width: 768px) {
  .mobile-nav .drilldown ul li a,
  .mobile-nav ul li a { font-size: 14px; letter-spacing: 2px; }
}


/* -------------------------------------------------------------------------
   6. 字型系統 —— 照範例站的三支字型分工

     中文標題      "Noto Serif TC", serif        weight 600–700、字距 2.5–5px
     英文小標／裝飾 "Cormorant Garamond", serif   weight 600–700、字距大、uppercase、金色
     UI 小標籤     "Inter", sans-serif           11–12px、字距 1.4–2.5px、uppercase
     內文          繼承 body 襯線                weight 300、行高 1.9–2.2
   ------------------------------------------------------------------------- */

/* 內文：中文襯線打底（範例站 body { font-family:"Noto Serif TC","Cormorant Garamond",serif; line-height:1.8 }）
   ⚠ 主題原本 body 是 letter-spacing:1px，範例站內文是 0.4–1.2px，這裡取 .5px。 */
body {
  font-family: "Noto Serif TC", "Cormorant Garamond", serif;
  line-height: 1.8;
  letter-spacing: .5px;
  color: #5A5347;
}
.html-info p,
.html-info li { font-weight: 300; line-height: 2; letter-spacing: .6px; }

/* 標題 */
h1, h2, h3, h4, h5, h6,
.title, .pagging-title {
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  letter-spacing: 3px;
  color: #0C0A07;
}

/* 模組頁標題（.title）—— 照範例站 section-head 的層級感
   結構是 <h2 class="title"><span>English</span><span>中文</span></h2>。
   範例站是「小金字上標 ＋ 大中文主標」，這裡把英文行當上標、中文行當主標，不動 DOM 順序。
   ⚠ 主題原本 .title 有 1px solid #666 灰框，範例站沒有框，拿掉。 */
/* ⚠ .title 在套版裡有四種 markup，而 CSS 只分得出「有幾個 span」，
   分不出裸文字節點裝的是中文還是英文（CSS 選不到文字節點）：

     A 兩個 span      <span>English</span><span>中文</span>      33 處  login／join／contact…
     B 裸中文+span英   忘記密碼 <span>Forget Password</span>        5 處  member／edm
     D 單一 span       <span>師資介紹</span>                       11 處  page/main（自訂頁面）／
                                                                        blog/detail／cart 三頁
     E 只有裸文字      活動報名完成                                 7 處  passkey_setup／search…

   B 與 D 都是「一個 span」，選擇器無法區分。試過用祖先元素分（section vs container），
   普查 83 處後確認父層有重疊、分不開。

   → 策略：金色英文上標只在「兩個 span」時才套（A 型）。
     單一 span 一律當中文主標 —— 因為 D 型是自訂頁面／文章／購物車，客戶會大量用到，
     誤把中文套成金色斜體 uppercase 的代價遠大於 B 型少一行金字。

   ⚠ B 型那 5 頁因此少了金色英文上標，變成「中文 ＋ 英文」兩行深色主標。
     若之後平台把那 5 個檔的 markup 統一成兩個 span，B 型會自動變成 A 型、
     金色上標自己回來 —— 這裡不需要再改第二次。 */
.title { border: 0; padding: 0; display: block; }

/* A 型：兩個 span → 第一個當金色英文上標 */
.title > span:first-child:not(:only-child) {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; font-weight: 600; font-style: italic;
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--miko-gold);
  margin-bottom: 6px;
}
.title > span:nth-child(2) {
  display: block;
  font-family: "Noto Serif TC", serif;
  font-size: 2rem; font-weight: 600; letter-spacing: 5px;
  color: #0C0A07; padding-top: 0;
}
/* 主題用這個 ::before 畫白帶去遮灰框的線，框拿掉後就不需要了 */
.title > span:nth-child(2)::before { display: none; }

/* B／D 型：單一 span → 一律當中文主標，不套金色英文樣式 */
.title > span:only-child {
  display: block;
  font-family: "Noto Serif TC", serif;
  font-size: 2rem; font-weight: 600; font-style: normal;
  letter-spacing: 5px; text-transform: none;
  color: #0C0A07; padding-top: 0;
}

/* B 型的裸中文、E 型的裸文字都選不到，字級只能下在 h2 本身。
   A 型不受影響（兩個 span 各自有明確字級，h2 的字級對它們沒作用）。 */
.title:has(> span:only-child),
.title:not(:has(> span)) {
  font-size: 2rem; letter-spacing: 5px;
}

/* .pagging-title —— 跟 .title 同一套處理，但結構不同：
   .title         是 <span>english</span><span>中文</span>（news／about／service／contact）
   .pagging-title 是 english 純文字節點 + <span>中文</span>（blog／product）
   純文字節點選不到，所以英文那行的樣式直接下在 h2 本身，中文那行下在 > span。 */
.pagging-title {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--miko-gold);
}
.pagging-title > span,
.pagging-title h1 {
  display: block;
  font-family: "Noto Serif TC", serif;
  font-size: 2rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 5px;
  text-transform: none;
  color: #0C0A07;
  padding: 6px 0 0;
}

/* ⚠ 頁尾的標題不能套內容區的標題色：頁尾版權列的結構是
     div.copyright > h5 > sup，套上 #0C0A07 之後在近黑頁尾上等於隱形。 */
footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 { color: var(--footer-text-color); }

/* UI 小標籤 */
.member-item { font-family: "Inter", "Noto Sans TC", sans-serif; }


/* -------------------------------------------------------------------------
   7. READ MORE（.btn-sideline）—— 照範例站 .card-link

   範例站 .card-link 實測：
     display:inline-flex; align-items:center; gap:10px
     Inter / 11px / 600 / letter-spacing 2.5px / uppercase / 金色
     padding-top:14px; border-top:1px solid（上方一條細線）
     ⚠ 那條 border-top 我們不抄：範例站的 .card-link 待在卡片底部，線是用來跟卡片內容分隔的；
       我們的 READ MORE 單獨浮在空白裡，沒有東西可分隔，那條線會變成憑空多一條。
     ::after content:"↗"      :hover → gap:16px（箭頭往外拉開）

   ⚠ 主題的 .btn-sideline::after 會畫一條滿寬 2px 灰線（#afafaf）穿過中間，
     主題原本是靠 span 的「不透明白底」把線遮斷，做出「文字兩側拉線」的效果。
     改成無框無底之後線會直接穿過文字 —— 所以要關掉。
   ------------------------------------------------------------------------- */
.btn-sideline::after { display: none; }

.btn-sideline > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--miko-gold);
  background: transparent;
  border: 0;
  padding: 0;
  transition: gap .3s, color .3s;
}
.btn-sideline > span::after { content: "↗"; }
/* hover 照範例站 .card-link：只把箭頭拉開，不變色 */
.btn-sideline:hover > span { gap: 16px; background: transparent; }


/* -------------------------------------------------------------------------
   8. 頁尾字型 —— 照範例站
   範例站頁尾：`"Noto Serif TC","Cormorant Garamond",serif`，連結 13px/300/字距 1px，
   小標 .foot-col h5 是 Cormorant Garamond / 13px / 700 / 字距 3px / uppercase / 金。
   顏色沿用後台色彩設定（底 #050401、字 #a89c88、連結 #e9dcbe、hover #f6ac1a）。
   ------------------------------------------------------------------------- */
footer,
footer a { font-family: "Noto Serif TC", "Cormorant Garamond", serif; }
footer a { font-size: 13px; font-weight: 300; letter-spacing: 1px; }
footer .small-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--miko-gold);
}


/* -------------------------------------------------------------------------
   9. 內頁：收掉沒設圖的 banner 佔位
   內頁模板 page_banner.php：
     <header><a><div class="pagging-header"> …只有 $has_image 才吐 <picture>… </div></a></header>
   沒設 banner 圖時仍佔 100px，加上 .row 16px ＋ section 32px，
   頁首到標題就空了 148px（實測）。收掉之後剩 48px。
   ⚠ 不能用 :empty —— 那個 div 裡有換行空白，:empty 不匹配含空白文字節點的元素。
   ⚠ 之後客戶設了 banner 圖，裡面會有 <picture>，就不會被收掉。
   ------------------------------------------------------------------------- */
.content header:not(:has(picture)) { display: none; }


/* -------------------------------------------------------------------------
   10. 手機（< 769px）
   ------------------------------------------------------------------------- */
@media all and (max-width: 768px) {

  /* logo 放大、icon 收一點，讓兩者平衡
     ⚠ 實測原本 logo 只有 19px 高、icon 卻是 20.8px，icon 比 logo 還大。
     ⚠ 範例站手機 logo 是 32px，但那是方形 logo；我們是 265×45 的寬幅字標（比例 5.89），
       32px 會變成 188px 寬，直接撞到右邊的搜尋 icon。
       實測 logo 可用寬度只有 151px → 最大 25px，取 24px 留餘裕（約 141px 寬）。 */
  .mobile-menu .logo-img img { height: 24px; width: auto; max-width: none; }

  /* 手機頁首收斂：主題預設的比例偏笨重
     ⚠ 實測問題：購物車數字是 20.8px，比 19px 的 icon 還大；漢堡線 30×2px 且是灰色 #666，
       跟旁邊 #212121 的 icon 不同色。整排看起來就是「不夠精緻」。 */
  .mobile-menu i { font-size: 17px; }
  #mobile_cart_quantity { font-size: 13px; line-height: 1; margin-left: 2px; }
  .mobile-btn { display: flex; align-items: center; gap: 12px; }
  .mobile-btn a { display: inline-flex; align-items: center; }
  .hamburger { width: 22px; }
  .hamburger .line { width: 22px; height: 1.5px; background-color: #212121; }

  /* 展開的側選單：改成範例站淺色主題那一版
     範例站 [data-theme="light"] nav .menu { background: rgba(250,246,239,.98) }
     連結 color: var(--obsidian)、分隔線 rgba(20,17,13,.08)
     ⚠ 只改「展開的側選單」；最上面那條主選單列維持白色（主題本來就是白的）。 */
  /* 2026-08-21 改純白：本站底色是純白，抽屜拉開時上方就是白色頁首，
     用範例站的米色 #FAF6EF 會在交界處讀成「有點髒的白」。
     純白讓頁首與抽屜連成同一片，金色點綴也更跳。
     ⚠ 純白配純白少了「浮起的面板」暗示，所以補一道淡陰影（遮罩本身已是 rgba(0,0,0,.7)）。 */
  .mobile-nav,
  .mobile-nav .drilldown,
  .mobile-nav .drilldown-container { background-color: #fff; }
  .mobile-nav { box-shadow: 2px 0 16px rgba(0, 0, 0, .10); }

  .mobile-nav .drilldown ul li a,
  .mobile-nav ul li a {
    color: #0C0A07;
    border-bottom: 1px solid rgba(20, 17, 13, .08);
  }
  /* ⚠ 主題為「黑底抽屜」寫的深色狀態，改成淺底之後全部要蓋掉，
     否則 hover 會冒出一塊近黑色，次選單也還是黑的。
     .mobile-nav ul > li > a:hover { background-color: rgb(27,27,1) }
     .mobile-nav .submenu        { background-color: rgb(0,0,0) }
     .mobile-nav .submenu > label{ color: var(--primary-color) }  ← 淺底上只有 1.94:1 */
  /* hover：只有文字轉主色，背景不變
     ⚠ 主題原本 .mobile-nav ul > li > a:hover 會上一塊 rgb(27,27,1) 近黑底，一定要蓋成 transparent。 */
  .mobile-nav ul > li > a:hover,
  .mobile-nav .drilldown ul li a:hover {
    background-color: transparent;
    color: var(--miko-gold);
    border-radius: 0;
  }

  /* 次選單（目前選單還沒有子項目，之後客戶加了才會用到） */
  .mobile-nav .submenu { background-color: #fff; }
  .mobile-nav .submenu > label { color: var(--miko-gold-ink); opacity: 1; }
  .mobile-nav .submenu-header > a { color: #0C0A07; }

  /* ⚠ 主題的 .mobile-nav ul > li:not(:last-child) > a 把分隔線設成 rgb(31,30,30) 深色。
     上面那條 .mobile-nav .drilldown ul li a 跟它特異度剛好打平（0,2,3），
     只是靠載入順序贏 —— 太脆弱。這裡補一條明確勝出的（0,3,3）。 */
  .mobile-nav ul > li:not(:last-child) > a,
  .mobile-nav .drilldown ul > li:not(:last-child) > a { border-bottom-color: rgba(20, 17, 13, .08); }

  /* ⚠ 次選單的「返回」箭頭原本是 fonts/menu-back.svg，顏色寫死 #DADADA（給黑底用的），
     淺底上等於看不見。那是 background-image，CSS 改不了 fill，只能整個換成深色的 inline SVG。 */
  .mobile-nav .submenu-header {
    border-bottom: 1px solid rgba(20, 17, 13, .08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%230C0A07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}


/* -------------------------------------------------------------------------
   11. 會員表單（登入／註冊／忘記密碼）—— 純 CSS，不動 markup

   原本的問題：
   1. 三顆按鈕（登入／註冊／Passkey）都是 .btn-full 滿版實心金，沒有主次，像一面橘牆
   2. 標籤重複：左欄 <label for=""> 「E-mail/帳號」＋ 欄位內又一個 <label for="email">「帳號（email）」
   3. 表單寬 850px，登入表單不需要這麼寬
   4. 「忘記密碼」是裸連結，沒有安排

   ⚠ 三頁的外層容器不一樣，這是 2026-08-24 才發現的坑：

     /member/login            <div class="form">        ← 有 .form
     /member/join             <form autocomplete="off"> ← 沒有 .form
     /member/forget_password  <form action="">          ← 沒有 .form，body class 還是空的

     所以第一版只寫 `.form` 的話，只有登入頁會生效，註冊與忘記密碼完全沒吃到。
     改用 `:is(.form, form:has(.col-form-label))` 一次涵蓋三頁。

   ⚠ 為什麼是 :has(.col-form-label) 而不是裸 form：
     頁首的手機／桌機搜尋框也是 <form>，裸選擇器會把它們一起收窄成 460px 置中。
     實測 /contact、/about、/product、/blog、/news 的 col-form-label 數量都是 0，
     只有會員這三頁有，所以這個條件夠精準。

   ⚠ 註冊那顆按鈕（登入頁上的）沒有 id，用 [onclick*="member/join"] 屬性選擇器抓，
     比 :nth-child 穩 —— 之後表單順序改了也不會選錯。
     註冊頁自己的送出鈕則有 id：#join_submit。
   ------------------------------------------------------------------------- */

/* 收窄置中，標籤改成疊在欄位上方 */
:is(.form, form:has(.col-form-label)) {
  max-width: 460px; width: 100%; margin: 0 auto;
}
:is(.form, form:has(.col-form-label)) .form-group.row {
  display: block; margin: 0 0 18px;
}
:is(.form, form:has(.col-form-label)) .form-group.row > .col {
  padding: 0; flex: none; max-width: none; width: auto;
}
:is(.form, form:has(.col-form-label)) .col-form-label {
  display: block; width: auto; max-width: none; flex: none;
  padding: 0 0 6px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  color: #5A5347;
}

/* ⚠ 重複的欄位內標籤只做「視覺隱藏」，不能 display:none ——
   左欄那個 <label for=""> 的 for 是空的、沒有真正關聯欄位，
   有關聯的是內層 for="email" 這個。拿掉它會讓螢幕閱讀器失去關聯。 */
:is(.form, form:has(.col-form-label)) .col > label[for="email"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 輸入框 */
:is(.form, form:has(.col-form-label)) .form-control {
  width: 100%; max-width: 100%; box-sizing: border-box;
  height: auto; padding: 12px 14px;
  border: 1px solid rgba(20, 17, 13, .18);
  border-radius: 0;
  font-size: 15px; color: #0C0A07;
  transition: border-color .2s, box-shadow .2s;
}
:is(.form, form:has(.col-form-label)) .form-control:focus {
  border-color: var(--miko-gold);
  box-shadow: 0 0 0 3px rgba(246, 172, 26, .15);
  outline: none;
}

/* ⚠ 忘記密碼頁的欄位包在 .input-group 裡（輸入框＋送出鈕並排），
   Bootstrap 靠 flex:1 1 auto; width:1% 讓它伸縮。
   上面那條 width:100% 會把按鈕擠出去，所以這裡要還原。 */
:is(.form, form:has(.col-form-label)) .input-group > .form-control {
  width: 1%; min-width: 0;
}

/* 忘記密碼靠右 */
:is(.form, form:has(.col-form-label)) .col > small {
  display: block; position: relative; text-align: right; margin-top: 6px;
}
:is(.form, form:has(.col-form-label)) .col > small a {
  font-size: 12px; color: #5A5347; letter-spacing: .5px;
}
:is(.form, form:has(.col-form-label)) .col > small a:hover { color: var(--miko-gold-ink); }

/* 註冊頁：密碼吻合／不吻合的提示 */
:is(.form, form:has(.col-form-label)) .valid-feedback,
:is(.form, form:has(.col-form-label)) .invalid-feedback {
  font-size: 12px; letter-spacing: .5px; margin-top: 6px;
}
:is(.form, form:has(.col-form-label)) .valid-feedback   { color: var(--miko-gold-ink); }
:is(.form, form:has(.col-form-label)) .invalid-feedback { color: #B3261E; }

/* 按鈕：三個層級 */
:is(.form, form:has(.col-form-label)) .btn.btn-block,
#button_reset_password {
  border-radius: 0; padding: 13px 20px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  transition: .25s ease;
}
/* 主要：登入／加入會員／重設密碼 —— 實心金 */
#login,
#join_submit,
#button_reset_password {
  background: var(--miko-gold); color: #0C0A07; border: 1px solid var(--miko-gold);
}
#login:hover,
#join_submit:hover,
#button_reset_password:hover { background: #DE9A0F; border-color: #DE9A0F; }

/* 次要：登入頁上的「註冊」—— 金框透明底 */
.btn[onclick*="member/join"] {
  background: transparent !important;
  color: #0C0A07 !important;
  border: 1px solid var(--miko-gold) !important;
}
.btn[onclick*="member/join"]:hover { background: var(--miko-gold) !important; }

/* 第三層：Passkey —— 淡框灰字，不搶戲 */
#passkey_login {
  background: transparent !important;
  color: #5A5347 !important;
  border: 1px solid rgba(20, 17, 13, .15) !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
}
#passkey_login:hover { border-color: rgba(20, 17, 13, .35) !important; color: #0C0A07 !important; }
#passkey_login i { color: var(--miko-gold); margin-right: 6px; }
#passkey_login_row .text-muted {
  font-size: 12px; line-height: 1.7; color: #8A8378; text-align: center;
}
.index-editor .row {
    padding-top: 0;
    padding-bottom: 0;
}
.index-editor .html-info {
    margin-bottom: 0;
}
.html-info {
    margin-bottom: 0;
}
.blank-page section {
    padding-top: 0;
    padding-bottom: 0;
}
.html-info .container img {
    margin: 0;
}
section.index-editor  {
    padding-top: 0;
    padding-bottom: 0;
}