/* ============================================================================
   yd-coaching 全站自訂 CSS（style_e）
   ----------------------------------------------------------------------------
   ⚠⚠ **一定要從後台貼，不要用 FTP 覆蓋檔案** ⚠⚠
       https://yd-coaching.com/admin/system/customized_css_list

   `/customize/customized_css.css` 那支檔案是**後台產生出來的產物，不是原始檔**。
   真正的來源是資料庫 `customized_css_list.css_text`。
   用 FTP 蓋檔看起來會生效，但下次任何人在後台按存檔，就會被 DB 的內容整個蓋回去，
   改動無聲無息消失。（2026-08-12 差點踩到，dry-run 才發現。）

   → 這支檔案在 repo 裡的角色是**母版／真相來源**，改完人工貼進後台。

   ⚠ 顏色不要寫死在這裡。主色、按鈕、頁首頁尾連結色是後台
     https://yd-coaching.com/admin/system/style_setting
     的 CSS 變數，改那邊才是對的（清單見本檔最後）。
     這支檔案只放「style_setting 做不到的版面修正」。

   本檔所有規則都是 2026-08-12 在 style_e 實測 DOM 與 computed style 後寫的，
   不是照 CSS 檔推的。實測到的關鍵數字寫在各段註解裡。
   ============================================================================ */


/* ============================================================================
   0. 字型：源流明體 GenRyuMin TW
   ----------------------------------------------------------------------------
   舊站**所有標題**都用這支明體（實測 computed style），不是 Noto Serif TC。
   README 原本的規格表寫成 Noto Serif TC，是錯的——站上真正在跑的是 GenRyuMin TW。
   少了這支，整站的質感會完全不同（明體是這個品牌調性的主要來源）。

   ⚠ 舊站是直接掛 **17MB 的 .ttf**，而且每一頁都載。
     這裡改成「子集化 + woff2」：只保留站上實際用到的 1,179 個字元。

         GenRyuMinTW-SB.ttf       16,948,124 bytes  →  woff2  244,688 bytes
         GenRyuMinTW-Medium.ttf   15,555,136 bytes  →  woff2  251,348 bytes

     **字型完全一樣，體積剩下 1.4%。** 視覺沒有任何差別，只是不再讓
     每個訪客下載 17MB。

   ⚠ 之後如果新增了子集裡沒有的罕用字，那個字會 fallback 到系統明體。
     重新子集化的做法：把新文案加進來源，重跑
         python3 -m fontTools.subset reference/舊站擷取/字型/GenRyuMinTW-SB.ttf \
           --text-file=<字元檔> --output-file=web/fonts/GenRyuMinTW-SB.woff2 --flavor=woff2
     原始 .ttf 保留在 reference/舊站擷取/字型/，不要刪。

   ⚠ 授權：源流明體衍生自思源宋體（Source Han Serif），SIL Open Font License，
     可自由使用與轉散布，自架沒有問題。

   檔案已用 FTP 放在 /fonts/（不是後台檔案庫，字型不是圖片）。
   ========================================================================== */

@font-face{
  font-family:'GenRyuMin TW';
  font-weight:500;
  font-display:swap;          /* 字型還沒下載完先用系統字，不要讓標題空白 */
  src:url('/fonts/GenRyuMinTW-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'GenRyuMin TW';
  font-weight:600;
  font-display:swap;
  src:url('/fonts/GenRyuMinTW-SB.woff2') format('woff2');
}


/* ============================================================================
   1. 頁首 logo 位置
   ----------------------------------------------------------------------------
   ⚠⚠ 先修正一個 README 裡的錯誤推論 ⚠⚠

   README 說「logo 被釘在右上角，改一條 .navi-item:first-child{right:auto;left:0}
   就好」。實測 DOM 之後確認**這是錯的**，那條規則改了不會有任何效果。

   實際的 .navbar 底下有三個 .navi-item：

       [0] <div class="navi-item">            ← 空的！只有空白字元，高 15px
       [1] <div class="navi-item">            ← logo 在這裡（.navbar-brand）
       [2] <div class="navi-item naviMain">   ← 主選單

   style_e 的 `.navi-item:first-child{position:fixed;top:0;right:0}`
   釘住的是 [0] 那個**空 div**，不是 logo。改它的 left/right 等於在搬一個
   看不見的空盒子。logo 在 [1]，由 `.navi-item:nth-child(2) .navbar-brand
   {margin:0 auto}` 置中，跟 :first-child 完全無關。

   捲動後（.navbar.fixed）style_e 自己就會把版面換成：
       [0] display:none
       [1] flex:0 0 160px; order:0   ← logo 變成左側 160px 欄
       [2] flex:1 1 0;   order:1     ← 選單佔滿剩下
   也就是**捲動後 logo 本來就已經在左邊了，不用改**。

   要改的只有「還沒捲動」那個狀態：預設是 logo 置中、選單另起一列（總高 91px）。
   舊站是 logo 靠左、選單同一列。下面這段把未捲動狀態拉成跟捲動後一致。
   ========================================================================== */

/* 未捲動時也用「logo 左 + 選單右」的一列式版面，跟捲動後一致，也跟舊站一致 */
.navbar .navi-item:first-child{
  display: none;                 /* 那個空 div，只會多佔 15px */
}
.navbar .navi-item:nth-child(2){
  flex: 0 0 160px;
  max-width: 160px;
  order: 0;
  display: flex;
  align-items: center;
}
.navbar .navi-item.naviMain{
  flex: 1 1 0;
  max-width: 100%;
  order: 1;
}
/* logo 靠左（原本是 margin:0 auto 置中） */
.navbar .navi-item:nth-child(2) .navbar-brand{
  margin: 0 auto 0 0;
}

/* ⚠⚠ logo 一定要限高，不然會把內容壓掉 ⚠⚠
   主題只給了 `.navbar-brand{max-width:150px}`，**沒有限高**。
   實測：放進 123×101 的 logo 之後 navbar 從 91px 變成 **127px**，
   但主題用來墊開內容的那個空 <header> 是**固定 100px**、不會跟著長，
   於是 navbar 反過來蓋住內容 27px。

   所以限高比補 padding 好：把 navbar 壓回 100px 以內，
   主題原本的墊片就繼續有效，不用去動它。
   52px 是實測後 navbar 約 78px（含上下 padding），留得夠。 */
.navbar-brand img{
  max-height: 52px;
  width: auto;
}

/* ✅ 2026-08-12 已在 /about-us 實測注入驗證過這一段：
   套用後未捲動與捲動後**完全一致**——navbar 高 51px、
   logo 欄 160px 在 x=143、選單 x=303 寬 980。
   附帶好處：原本捲動瞬間 navbar 會從 91px 縮成 51px、選單整個跳位，
   統一之後那個跳動也消失了。

   ⚠ 副作用（可接受）：navbar 從 91px 變 51px，而主題的墊片 <header> 固定 100px，
     所以內容頁選單下緣到內容之間的留白會從 9px 變成 49px。
     那是合理的呼吸空間、不是破版；但之後**上傳 logo 後 navbar 可能會變高**，
     到時候要回來重看一次這個數字。 */

/* ⚠ 頁首目前是「文字模式」：<div class="content nav-text">，
   而 style_e 有一條 `.content.nav-text .navbar-brand{display:none}`
   ——也就是說**現在就算上傳了 logo 也不會顯示**。
   後台要把頁首切成 logo 模式（會變成 class="content nav-logo"），
   logo 才出得來。目前 .navbar-brand 是空的、站名也是空的，
   所以頁首現在完全沒有品牌識別。 */


/* ============================================================================
   2. 固定選單造成的內容被蓋住
   ----------------------------------------------------------------------------
   ⚠ 修正 README 的假設：**內容頁不需要自己補 padding-top，主題已經處理好了。**

   實測 /about-us（1440px 視窗）：
     .navbar 高 91px
     #pjax-container 裡有一個**空的 <header>，高剛好 100px**
         <header><a><div class="pagging-header"></div></a></header>
     它就是主題用來墊開固定選單的墊片，<section> 從 y=100 開始
     → 內容本來就落在選單底下，沒有被蓋住

   所以**不要**再加 `.html-info{padding-top:96px}` 這種規則，
   會變成 100px + 96px 兩倍留白。README 原本寫「第一個區塊要補 padding-top」
   是在還沒實測前的推論，實際上不用。

   反而要處理的是**相反**的狀況：滿版主視覺想要墊到半透明選單底下時，
   得先把那 100px 的墊片收掉。
   ========================================================================== */

:root{
  --yd-nav-h: 96px;              /* 91px navbar / 80px 白底條，取 96 當統一基準 */
}

/* 滿版主視覺：收掉主題的 100px 墊片，讓 hero 頂到最上面、選單浮在上面。
   用法：該頁第一個 row 加 class="yd-hero"。
   ⚠ 只有真的做滿版主視覺的頁面才加，一般內容頁不要加。 */
body:has(.yd-hero) #pjax-container > header{
  display: none;
}

/* ❌ 錨點偏移：這裡本來有一條 `.html-info :where(h1,h2,h3,h4,h5,[id])
      { scroll-margin-top: var(--yd-nav-h) }`，**2026-08-13 拿掉了**。

   原因：主題自己就有了，而且是全站的 ——

       static/css/common.css 第 2 行
       :root{ scroll-padding-top:110px; scroll-behavior:smooth; }

   兩個會**相加**。實測 /service-items 跳 #sevice-1，區段頂端停在視窗
   y=**206**（110 + 96），而 navbar 只有 40px、捲動後的白底條 80px ——
   等於跳過去之後上面多留一大段空白，還看得到上一段的下緣 110px。

   README 當初寫「錨點被固定選單蓋住，要自己補 scroll-margin-top」是**還沒實測
   主題之前的推論**，跟本檔第 2 段開頭那個「內容被蓋住要補 padding-top」是同一種
   誤判：主題其實都處理好了。

   ⚠ 如果哪天主題改版把 common.css 那條拿掉，錨點才會需要我們自己補。
     `--yd-nav-h` 先留著當實測紀錄。 */


/* ============================================================================
   3. 透明頁首在深色主視覺上的文字顏色
   ----------------------------------------------------------------------------
   style_e 未捲動時 --header-bg-color 是 transparent，選單浮在主視覺上；
   捲動後底下是白色橫條。但 --header-link-color 只有**一個值**，
   沒辦法同時滿足「深色主視覺上要白字」與「白底橫條上要深色字」。

   解法：style_setting 裡把 --header-link-color 設成深藍（配白底橫條），
   然後只在「有滿版主視覺的頁面 + 還沒捲動」時改成白字。
   用 :has() 偵測頁面裡有沒有 .yd-hero，不需要後台幫每頁加 class。

   ⚠ 沒有主視覺的頁面（文章頁、聯絡我們…）不會套到，維持深色字，
     因為那些頁面選單底下就是白色頁面背景，白字會看不見。
   ========================================================================== */

body:has(.yd-hero) .navbar:not(.fixed) .naviMain ul > li > a,
body:has(.yd-hero) .navbar:not(.fixed) .web-title > a{
  color: #fff;
}
body:has(.yd-hero) .navbar:not(.fixed) .naviMain ul > li > a:hover{
  color: rgba(255,255,255,.75);
}


/* ============================================================================
   4. 進場動效：淡入 + 上浮
   ----------------------------------------------------------------------------
   照 README 的三個原則寫：
     1) 時間驅動（animation + both），不是 animation-timeline:view()
     2) opacity:0 只存在 keyframes 裡，元素靜態樣式維持可見
        → 動畫沒跑（不支援／被擋／編輯器）內容還是看得到
     3) 只掛 .html-info，不雙寫
        → 前台有這層 wrapper、後台區塊編輯器沒有，
          所以客戶在編輯器看到的是最終狀態，不會一片空白

   ⚠⚠ 2026-08-12 實測到一件 README 沒寫的事：
       **首頁目前沒有 .html-info 這層 wrapper**（其他 9 頁都有）。
       現在首頁是完全空白的，wrapper 可能是有區塊內容才會輸出。
       **首頁貼進第一個區塊之後，一定要回來確認 .html-info 有沒有出現**——
       如果沒有，首頁的進場動效不會跑，要另外想辦法。
       其他 9 頁實測都有 `<div class="middle html-info cke_editable …">`，沒問題。
   ========================================================================== */

.html-info .yd-rise{
  animation: ydRise .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ydRise{
  from{ opacity: 0; transform: translateY(18px); }
  to  { opacity: 1; transform: none; }
}

/* 同一區塊的項目錯開 60ms，做出層次。
   時間驅動是整頁載入就一起跑，錯開之後視覺上仍有先後。
   ⚠ 用 class 指定、不要用 :nth-child——客戶在編輯器複製 col 時
     :nth-child 會整組跑掉（drjeanyang 的規範也是這條）。 */
.html-info .yd-d1{ animation-delay: .06s; }
.html-info .yd-d2{ animation-delay: .12s; }
.html-info .yd-d3{ animation-delay: .18s; }
.html-info .yd-d4{ animation-delay: .24s; }
.html-info .yd-d5{ animation-delay: .30s; }
.html-info .yd-d6{ animation-delay: .36s; }

@media (prefers-reduced-motion: reduce){
  .html-info .yd-rise{ animation: none; }
}


/* ============================================================================
   5. 報名／聯絡 CTA 區塊（取代舊站的 Elementor 表單）
   ----------------------------------------------------------------------------
   舊站有 6 頁內嵌 Elementor Pro 表單，**一個都沒搬過來**。
   2026-08-12 決定：不重做表單，改成 CTA 導到 /contact（aten 的聯絡模組，
   那裡有真正能送出的表單）。

   ⚠ 是 `/contact` 不是 `/contact-us`：
       /contact     = aten 聯絡模組，有真表單（name / email / tele + CSRF）
       /contact-us  = 搬過來的內容頁，寫著「請填寫下列資料」但**下面沒有欄位**
     （主選單的「聯絡我們」目前指向 /contact-us 那個死路，見 README 待辦）

   用法：把區塊裡原本放表單的位置換成 web/_片段-CTA報名.html 的整個 row。
   ========================================================================== */

.html-info .yd-cta{
  background: #1A3652;
  color: #fff;
  padding: 3.5rem 1.5rem;
  text-align: center;
  border-radius: 4px;
}
.html-info .yd-cta__title{
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.4;
  margin: 0 0 .75rem;
}
.html-info .yd-cta__desc{
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 auto 2rem;
  max-width: 34em;
}
/* 主按鈕：深藍底上用白底深藍字，對比最高 */
.html-info .yd-cta__btn{
  display: inline-block;
  background: #fff;
  color: #1A3652;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .05em;
  padding: .9rem 2.75rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.html-info .yd-cta__btn:hover,
.html-info .yd-cta__btn:focus{
  background: #E3E6E9;
  color: #081B2D;
  text-decoration: none;
  transform: translateY(-1px);
}
/* 按鈕下方的補充（電話、營業時間之類），可留可拿掉 */
.html-info .yd-cta__note{
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  margin: 1.25rem 0 0;
}

@media (max-width: 767px){
  .html-info .yd-cta{ padding: 2.5rem 1.25rem; }
  .html-info .yd-cta__title{ font-size: 1.375rem; }
  .html-info .yd-cta__btn{ display: block; padding: .9rem 1.5rem; }
}


/* ============================================================================
   6. 內容頁的圖片間距（抵銷後台內容樣式表）
   ----------------------------------------------------------------------------
   正式站每一頁除了 style_e 的 main.css，還會載一支**後台區塊編輯器的內容樣式表**：

       /admin/assets/minimalist-blocks/content-front.min.css      ← 第 5 支載入

   裡面有一條：

       .html-info .container img{ margin:1.4rem 0 1rem }          ← 特異度 0,2,1

   它會壓過母版慣用的 `.html-info .yd-x`（0,2,0），**把圖片的 margin 整條換掉**。
   跟 `.html-info.middle p{font-size:1rem}` 是同一類的坑，只是這次打在 <img> 上。

   實測災情（2026-08-13）：
     /service-items  手機版圖示的 `margin:0 auto` 被吃掉 → 不置中，每項多長 18px
     /about-us       9 張圖全被塞 22.4px/16px，里程碑那 6 張在固定高度的格子裡
                     被 overflow:hidden **切掉下緣 22px**

   ⚠ 影響範圍：只有**一般內容頁**（page_list.description 那 9 頁）。
     實測文章頁的 `.html-info` 裡**沒有**那層 `.container`（數量 0），
     所以 31 篇專欄文章完全不受這條規則影響。

   為什麼不直接 `.html-info .container img{margin:0}` 全部歸零？
   → 那樣客戶之後在後台自己插一張圖進內容頁，就完全沒有上下間距了。
     所以只打**我們自己的元件**：class 帶 `yd-` 的圖，或包在 `yd-` 元件裡的圖。
     客戶自己插的 <img> 維持主題預設的 1.4rem/1rem。

   特異度 0,3,1 > 0,2,1；而且 customized_css.css 是**最後**一支載入（第 10 支），
   同分也贏，不需要 !important。
   ========================================================================== */

.html-info .container [class*="yd-"] img,
.html-info .container img[class*="yd-"]{
  margin: 0;
}


/* ============================================================================
   7. 站台預設間距／連結色的覆寫（PM 的標準片段，2026-08-13 導入）
   ----------------------------------------------------------------------------
   這一段是 PM 在其他 aten 案子上慣用的覆寫，2026-08-13 在本站逐條實測過才導入。
   下面每一條都附「導入前實測到的數字」，不是照抄。

   先確認本站真的有那幾個 body class（實測 <body class='…'>）：

       /                        （空）        → 首頁 home 模組，區塊是 section.index-editor
       /about-us /service-items  blank-page   → 9 個一般內容頁都是這個
       /contact                  b_contact_detail
       /blog/<slug>              b_blog_detail

   ⚠ 導入前 /service-items 的實測：
       section 的 padding 是 **32px / 24px** → 滿版深藍橫幅上方多一條 32px 白邊
         （舊站的橫幅是直接接在頁首下面的，沒有這條白邊）
       .html-info margin-bottom **24px**
         → 最後一個 row 結束於 y2678，頁尾卻從 y2726 開始，中間空了 48px（24+24）
           舊站是最後一段結束就直接接頁尾，**0**
       內容裡的普通 <a> 顏色是 **rgb(0,158,145)**（#009e91 青綠色）
         → 來自 content-front.min.css 的 `.html-info :where(a,…){color:#009e91}`
           完全不是這個品牌的顏色。我們自己的按鈕都有明寫顏色所以沒發現，
           但客戶只要在內容裡放一個普通連結就會是青綠色。
   ========================================================================== */

/* ---------- 一般內容頁（9 頁都是 body.blank-page） ---------- */
.blank-page section{
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- 聯絡我們（body.b_contact_detail） ---------- */
/* ⚠ .page-title 只在這一頁藏，**不要**擴大到 .blank-page ——
   還沒重做的內容頁還靠系統標題當頁面標題。
   已重做的頁面各自在自己的區塊 CSS 裡藏（服務項目、關於我們都是這樣）。 */
.b_contact_detail .page-title{
  display: none;
}
.b_contact_detail section{
  padding-top: 0;
  padding-bottom: 0;
}
.b_contact_detail .row{
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- 首頁 home 模組 ---------- */
/* 首頁母版原本每一個區塊都自己寫一次這幾條，改成全域之後新增區塊不用再重複。
   ⚠ background-color 是唯一有實際改變的一條：實測 section.index-editor 的底色是
     #FBFBFB，不是透明。目前每個區塊都有自己的底色所以蓋掉了，但只要有一個區塊
     沒鋪滿就會露出來。 */
section.index-editor{
  padding-top: 0;
  padding-bottom: 0;
}
.index-editor .row{
  padding-top: 0;
  padding-bottom: 0;
}
.index-editor .html-info{
  margin-bottom: 0;
}
.index-editor{
  background-color: transparent;
}

/* ---------- 全站 ---------- */
/* ⚠ 這條是全站的，文章頁（b_blog_detail）也會套到。
   實測文章頁的 .html-info 是 .blog-info 的最後一個子元素，那 24px 只是尾端留白，
   拿掉不影響版面。 */
.html-info{
  margin-bottom: 0;
}

/* 內容裡的連結色：把 content-front 的 #009e91 青綠色換成後台設定的連結色。
   ⚠ 現在 --link-color 還是佈景預設的 #666666（灰），等後台
     /admin/system/style_setting 把它改成 #1A3652 之後這裡會自動變深藍，
     不用回來改這支檔案。（灰色至少不會像青綠那樣完全跑掉。）
   ⚠ 五個狀態都指到同一個 --link-color 是 PM 的標準寫法（確保青綠色在任何狀態
     都不會冒出來）。如果之後想要 hover 變色，把 :hover 那個改成
     var(--link-hover-color) 即可。 */
/* ⚠⚠ 2026-08-27 修正：一定要排除按鈕元件（`yd-*Btn`）。
   原本這裡是 `.html-info a, :active, :focus, :hover, :visited`，把**所有**狀態
   都綁死在 --link-color，於是每一顆按鈕自己寫的 color 都被蓋掉：
     - 深藍實心按鈕 → 深色字疊深藍底，看起來像「按鈕沒有字」
     - 白底外框按鈕 → hover 填深藍時字沒跟著變白，一樣看不見
   （客戶在 /leadership-class、/leadership-class-2、/service-items 三頁都回報到。）

   ⚠ 不要改成「一顆按鈕寫一條覆寫」——那是治標，而且客戶之後在編輯器複製出
     新按鈕就會漏掉。排除掉之後，按鈕的顏色一律由該區塊自己的 <style> 決定，
     命名只要照慣例帶 `Btn` 就會自動生效。

   ⚠ getComputedStyle 驗不出這個問題：瀏覽器為了隱私，:visited 一律回報
     「未訪問過」的顏色。只能用眼睛看。 */
.html-info a:not([class*="Btn"]),
.html-info a:not([class*="Btn"]):active,
.html-info a:not([class*="Btn"]):focus,
.html-info a:not([class*="Btn"]):hover,
.html-info a:not([class*="Btn"]):visited{
  color: var(--link-color);
}

/* ⚠ PM 的片段裡還有一條 `.html-info .container img{margin:0}`（全部歸零）。
   這裡**沒有照抄**，本站用的是第 6 段那個只打 `yd-` 元件的版本 ——
   差別只在「客戶自己在編輯器插的圖」要不要保留主題預設的 1.4rem/1rem 間距。
   如果要跟其他案子統一成全部歸零，把第 6 段換成那一行就好，我們的元件不受影響。 */


/* ============================================================================
   8. 顏色請改後台，不要寫在這裡
   ----------------------------------------------------------------------------
   https://yd-coaching.com/admin/system/style_setting

   下面是「目前值 → 建議值」。目前全是佈景主題預設的金色系(#e6c332)，
   跟舊站的深藍完全不同，這是新站現在看起來不像 yd-coaching 的主因之一。
   建議值取自 README 量到的舊站規格（主色 #1A3652、更深 #081B2D、內文 #62676C）。

     --primary-color                     #e6c332  →  #1A3652
     --link-color                        #666666  →  #1A3652
     --link-hover-color                  #cca919  →  #081B2D

     --button-bg-color                   #e6c332  →  #1A3652   （主要按鈕：深藍底白字）
     --button-text-color                 #ffffff  →  #ffffff   （不用改）
     --button-bg-hover-color             #e6c332  →  #081B2D
     --button-text-hover-color           #ffffff  →  #ffffff   （不用改）

     --outline-button-border-color       #666666  →  #1A3652   （次要按鈕：白底深藍字）
     --outline-button-text-color         #666666  →  #1A3652
     --outline-button-bg-color        transparent →  transparent（不用改）
     --outline-button-border-hover-color #e6c332  →  #1A3652
     --outline-button-bg-hover-color     #e6c332  →  #1A3652
     --outline-button-text-hover-color   #ffffff  →  #ffffff   （不用改）

     --header-bg-color              transparent  →  transparent（不用改，主視覺要透出來）
     --header-link-color                #101010  →  #1A3652   （配捲動後的白底橫條）
     --header-link-hover-color          #696969  →  #081B2D
     --header-icon-color                #101010  →  #1A3652
     --header-icon-hover-color          #f9f2d1  →  #081B2D

     --footer-bg-color        rgba(51,51,51,.9)  →  #081B2D   （舊站頁尾是最深的藍）
     --footer-text-color                #afafaf  →  #C7CDD3
     --footer-link-color                #afafaf  →  #C7CDD3
     --footer-link-hover-color             #fff  →  #ffffff   （不用改）

     --base-font-size / --mobile-font-size  16px →  16px      （不用改）

   ⚠ --header-link-color 同時要服務「透明浮在主視覺上」與「白底橫條」兩種背景，
     一個變數吃不下兩種需求，所以設深藍配白底，主視覺上的白字由本檔第 3 段處理。
   ========================================================================== */

/* ============================================================================
   9. 橫向輪播 yd-slick（取代原本的 scroll-snap 水平捲動列）
   ----------------------------------------------------------------------------
   2026-08-27。客戶回報「有的應該是輪播，但變成水平卷軸」。
   舊站那幾區都是 Elementor 的 swiper（一次 3 張、左右箭頭、自動輪播 5 秒、無限循環），
   新站當初以為區塊內容不能放 <script> 才改成 CSS scroll-snap ——
   **那個前提是錯的，區塊吃得下 <script>（要包在 .row > .col-md-12 裡）。**

   站台本來就全站載了 jQuery（在 <head>）＋ slick-carousel 1.9.0＋slick.css 1.8.1，
   所以不用再引任何外部檔，只要在區塊裡呼叫 .slick() 即可。

   用法：捲動容器（原本那個 row）加 class="yd-slick"，
        每一張卡仍然是它的直接子元素 col。初始化參數寫在區塊的 <script> 裡。

   ⚠ 一定要帶 rows:0。slick 1.8+ 預設 rows:1 會把每個 slide 再包一層 div，
     DOM 被改掉之後 col 就不是 row 的直接子元素了，區塊編輯器會認不得。
   ⚠ 初始化只在前台跑（前台有 .html-info，後台編輯器沒有）。
     不擋的話，客戶一進區塊編輯器 slick 就會改寫 DOM，一存檔就把輪播後的
     殘骸寫回資料庫。
   ========================================================================== */

/* 初始化之前：只露出容器寬度內的卡片，不要出現捲軸、也不要閃一排 */
.yd-slick:not(.slick-initialized){
  display:flex; flex-wrap:nowrap; overflow:hidden;
}
.yd-slick{ position:relative; }

/* slick 用 float 排 slide，改成 flex 才能讓同一列的卡等高 */
.yd-slick .slick-list{ overflow:hidden; }
.yd-slick .slick-track{ display:flex; align-items:stretch; }
.yd-slick .slick-slide{ height:auto; float:none; }
/* ⚠ 只有首頁客戶回饋的卡片需要撐滿 slide 高度（.yd-voice 自己沒有 height:100%）。
   不要寫成 .yd-slick .slick-slide > * —— /about-us 的里程碑那一格是 display:grid，
   對 grid item 下 height:100% 會讓 auto 那一列（線下方的內容）算不出高度而塌掉。 */
.yd-hmVoice.yd-slick .slick-slide > *{ height:100%; }

/* ---- 箭頭：舊站是細框圓圈 + 山形箭頭，不用 slick-theme 的字型圖示 ---- */
.yd-slick .slick-prev,
.yd-slick .slick-next{
  width:34px; height:34px; padding:0;
  top:50%; transform:translateY(-50%);
  border:1px solid #C9CDD2; border-radius:50%;
  background:transparent; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background-color .2s;
}
.yd-slick .slick-prev{ left:0; }
.yd-slick .slick-next{ right:0; }
.yd-slick .slick-prev:hover,
.yd-slick .slick-next:hover{
  border-color:var(--navy,#1A3652); background:rgba(255,255,255,.75);
}
/* slick-theme.css 的 :before 是 slick 字型的箭頭字，覆寫成 CSS 畫的山形 */
.yd-slick .slick-prev:before,
.yd-slick .slick-next:before{
  content:''; display:block; width:9px; height:9px; opacity:1;
  border-top:1.5px solid var(--navy,#1A3652);
  border-right:1.5px solid var(--navy,#1A3652);
}
.yd-slick .slick-prev:before{ transform:rotate(-135deg); margin-left:3px; }
.yd-slick .slick-next:before{ transform:rotate(45deg);  margin-right:3px; }

/* 容器兩側的留白不夠放箭頭時，改成半透明白底疊在卡片邊緣上 */
@media (max-width:1330px){
  .yd-slick .slick-prev,
  .yd-slick .slick-next{ background:rgba(255,255,255,.9); }
}
/* 手機：收掉箭頭，用手指滑 */
@media (max-width:767px){
  .yd-slick .slick-prev,
  .yd-slick .slick-next{ display:none !important; }
}

/* 只放初始化 <script> 的 row：前台不佔高度。
   ⚠ 用 height:0 而不是 display:none —— 區塊編輯器還是要看得到這個 row，
     客戶才不會在不知情的狀況下把它連同上一段一起刪掉。 */
.html-info .row.yd-jsRow{
  height:0; min-height:0; padding:0; margin:0; overflow:hidden;
}

/* ---- 分頁圓點：只有 /leadership-class-2 的「課程花絮」用得到（舊站有 3 顆） ---- */
.yd-slick .slick-dots{ bottom:-26px; line-height:0; }
.yd-slick .slick-dots li{ width:10px; height:10px; margin:0 6px; }
.yd-slick .slick-dots li button{ width:10px; height:10px; padding:0; }
/* slick-theme.css 的圓點是 slick 字型的 '•'，覆寫成畫出來的圓 */
.yd-slick .slick-dots li button:before{
  content:''; width:10px; height:10px; border-radius:50%;
  background:#C9CDD2; opacity:1;
}
.yd-slick .slick-dots li.slick-active button:before{ background:var(--navy,#1A3652); }
/* 課程花絮的容器下面留了 130px（100 段落 padding + 30 給圓點），圓點要落在那 30px 裡 */
.yd-lcHl .slick-dots{ bottom:100px; }


/* ============================================================================
   10. 首頁「最新文章」模組的 READ MORE 按鈕
   ----------------------------------------------------------------------------
   2026-08-27 客戶反映「現在設計不好看」。
   主題原本的 .btn-sideline 是「一條 2px 灰線橫貫整個容器 + 中間一塊白底把線挖空、
   裡面放 24px Playfair 的 READ MORE」——那條灰線 (#afafaf) 不在本站色票裡，
   白底挖空在淺灰底上也看不出是挖空，只像文字被切了一段。

   改成跟站上既有的按鈕同一套語言（比照首頁服務項目的 .yd-svcBtn）：
   白底 / 0.5px 深藍框 / 圓角 10px / 14px Noto Sans TC / 字距 2px / 尾巴一個 →，
   hover 反白成深藍底。只改首頁這個模組（#index-blog），不動其他地方的 .btn-sideline。
   ========================================================================== */

#index-blog .btn-sideline{
  display:inline-block; width:auto; padding:0;
}
/* 那條橫貫的灰線 */
#index-blog .btn-sideline::after{ display:none; }

#index-blog .btn-sideline > span{
  display:inline-block;
  padding:9px 26px 9.5px;
  background:#fff;
  border:0.5px solid var(--navy,#1A3652);
  border-radius:10px;
  font-family:"Noto Sans TC","微軟正黑體",system-ui,sans-serif;
  font-size:14px; line-height:1.4; font-weight:400; letter-spacing:2px;
  color:var(--navy,#1A3652);
  transition:background-color .25s ease, color .25s ease;
}
#index-blog .btn-sideline > span::after{ content:" →"; letter-spacing:0; }
#index-blog .btn-sideline:hover > span,
#index-blog .btn-sideline:focus-visible > span{
  background:var(--navy,#1A3652); color:#fff;
}

/* ============================================================================
   11. 選單：比照舊站
   ----------------------------------------------------------------------------
   2026-08-27 客戶比對後指出「選單的設計跟原站不太相同」。實測兩邊的差異：

   | 項目        | 舊站                              | 新站（改之前）                    |
   |-------------|-----------------------------------|-----------------------------------|
   | 主選單排列  | 靠右集中，項目間距 100px           | ul 是 space-around，攤開整條      |
   | 中文字體    | Noto Serif TC（明體）              | Playfair Display → 中文 fallback  |
   |             |                                   | 到 Noto Sans TC（黑體）           |
   | 聯絡我們    | 深藍 #1A3652 實心按鈕 120×31       | 一般文字連結                      |
   | 搜尋        | 沒有                               | 多一個放大鏡 icon                 |
   | 內容寬度    | 1200 置中（logo x33、按鈕右緣 1233）| .container 1140，而且 logo 欄與   |
   |             |                                   | 選單各自置中，兩邊對不齊          |

   ⚠ 舊站的明體是 GenRyuMin TW（見第 0 段），Noto Serif TC 只是 fallback。
   ⚠ 按鈕的白字要在「透明浮在主視覺上」與「捲動後白底」兩種狀態都成立，
     所以顏色寫在 <span> 上，不靠第 3 段那條 <a> 的 color 繼承。
   ========================================================================== */

/* ---- 內容寬度：logo 與選單靠同一組 1200 邊界，跟舊站對齊 ---- */
/* ⚠ 主題把 .navbar 自己鎖成 max-width:1140 並置中（實測 1280 視窗下 navbar
     只有 x=63 寬 1140），所以要先解開 navbar 本身，再用 padding 做 1200 置中。
     只解桌機，手機維持主題原本的漢堡版面。 */
@media (min-width:992px){
  .navbar{
    max-width:none; width:auto;
    margin-left:0; margin-right:0;
    padding-left:max(20px, calc(50% - 600px));
    padding-right:max(20px, calc(50% - 600px));
  }
}
.navbar .navi-item.naviMain > .container,
.navbar .navi-item:nth-child(2) > .container{
  max-width:none; padding-left:0; padding-right:0;
}

/* ---- 主選單靠右集中（原本是 space-around） ---- */
.navbar .naviMain ul{
  justify-content:flex-end;
  align-items:center;
}
.navbar .naviMain ul > li > a{ padding:0 16px; }

/* ---- 字體：舊站選單是明體，不是黑體 ---- */
.navbar .naviMain ul > li > a,
.navbar .naviMain ul > li > a > span{
  font-family:'GenRyuMin TW','Noto Serif TC',serif;
  font-size:16px; letter-spacing:1px;
}

/* ---- 搜尋 icon：舊站沒有這個 ---- */
.navbar .naviMain ul > li.nav-search-toggle{ display:none; }

/* ---- 聯絡我們：深藍實心按鈕 ----
   ⚠⚠ span 一定要自己給 line-height。主題的選單 <a> 是 line-height:40px，
      span 會繼承下去，再加上下 padding 就變成 53px 高 —— 比 40px 的選單列
      高出 13px，整顆按鈕往下凸出白底條（2026-08-27 客戶回報「選單樣式歪歪的」）。
   ⚠ <a> 改成 flex + align-items:center，靠 flex 置中，不要靠 inline 的基線對齊。 */
.navbar .naviMain ul > li > a[href="/contact"]{
  padding:0 0 0 20px;
  display:flex; align-items:center;
}
.navbar .naviMain ul > li > a[href="/contact"] > span{
  /* ⚠ 用 inline-flex 置中，不要靠 padding 湊。
     上下 padding 只要差 1px，中文字看起來就是偏上或偏下
     （2026-08-27 客戶回報「文字好像沒有垂直置中」，就是 7/8 這 1px）。 */
  display:inline-flex; align-items:center; justify-content:center;
  height:33px;                      /* 跟舊站的 31 一致 */
  /* ⚠ 上 2px、下 0：這是**中文字的視覺補正**，不是隨手加的。
     flex 置中對齊的是「行框」，而行框含字型的 descent（實測 ascent 13 + descent 4）。
     中文字的墨水不會往下伸到 descent（實測 ink descent 只有 1.3px），
     所以行框正中時，墨水中心會比框中心**高 1.15px**，看起來就是上緊下鬆。
     補 2px 的上內距把內容往下推 1px，墨水中心落在 49.85 對框中心 50。
     （2026-08-27 客戶回報「內部上下間距不一樣」，實測數字：墨水上緣離框 8.4、下緣 10.7。） */
  padding:2px 20px 0;
  line-height:1;
  background:var(--navy,#1A3652);
  color:#fff;
  border-radius:6px;
  font-size:15px; letter-spacing:1.5px;
  transition:background-color .2s ease;
}
.navbar .naviMain ul > li > a[href="/contact"]:hover > span{ background:#081B2D; }

/* ---- logo 與選單列高度：比照舊站（2026-08-27 實測 1280 視窗）----
     |            | 舊站                 | 這裡              |
     |------------|----------------------|-------------------|
     | 未捲動 bar | 103px                | 100px（見下方⚠）  |
     | 未捲動 logo| 82×67，上下各留 18    | max-height 67     |
     | 捲動後 bar | 95px                 | 95px              |
     | 捲動後 logo| 67×55，上下各留 20    | max-height 55     |

   ⚠ 未捲動取 100 不取 103：主題用來墊開內容的那個空 <header> 是**固定 100px**
     （見第 2 段），navbar 再高就會反過來蓋住內容。100 對 103 視覺上看不出來。 */
.navbar-brand img{ max-height:67px; }
.navbar .navi-item:nth-child(2){ flex:0 0 180px; max-width:180px; }
@media (min-width:992px){
  .navbar{ min-height:100px; align-items:center; }
}

@media (max-width:991px){
  /* 手機是主題自己的漢堡選單，上面那些桌機規則不要干擾 */
  .navbar{ padding-left:15px; padding-right:15px; }
}

/* ---- 下拉選單：舊站是 240px 白底、14px、長標題自己折行 ----
   ⚠ 主題預設 white-space:nowrap，最長那筆「企業主升級計畫-人員自主化運作系統工作坊」
     會把整片下拉撐到 630px，一路頂到視窗右緣。 */
.navbar .naviMain .dropdown-menu{
  min-width:0; width:250px;
  padding:8px 0;
  background:#fff;
  border:0; border-radius:0;
  box-shadow:0 4px 10px -2px rgba(0,0,0,.1);
}
.navbar .naviMain .dropdown-menu .dropdown-item{
  white-space:normal;
  padding:8px 20px;
  font-family:'GenRyuMin TW','Noto Serif TC',serif;
  font-size:14px; line-height:22px; letter-spacing:1px;
  color:var(--navy,#1A3652);
}
.navbar .naviMain .dropdown-menu .dropdown-item:hover,
.navbar .naviMain .dropdown-menu .dropdown-item:focus{
  background:#F2F4F6; color:#081B2D;
}

/* ============================================================================
   12. 不在 .html-info 底下的兩顆按鈕
   ----------------------------------------------------------------------------
   區塊裡的 `yd-*Btn` 已經由第 7 段的 :not([class*="Btn"]) 放行，各自的 <style>
   說了算，這裡不用再列。但下面這兩顆不是區塊內容，吃的是主題自己的連結色，
   所以要各自把五個狀態釘住。
   ========================================================================== */

/* 選單的「聯絡我們」深藍實心按鈕 → 永遠白字 */
.navbar .naviMain ul > li > a[href="/contact"] > span,
.navbar .naviMain ul > li > a[href="/contact"]:link > span,
.navbar .naviMain ul > li > a[href="/contact"]:visited > span,
.navbar .naviMain ul > li > a[href="/contact"]:hover > span,
.navbar .naviMain ul > li > a[href="/contact"]:focus > span,
.navbar .naviMain ul > li > a[href="/contact"]:active > span{
  color:#fff;
}

/* 首頁最新文章模組的 READ MORE → 平常深藍字，hover 填深藍才轉白字 */
#index-blog .btn-sideline > span,
#index-blog .btn-sideline:link > span,
#index-blog .btn-sideline:visited > span,
#index-blog .btn-sideline:active > span{
  color:var(--navy,#1A3652);
}
#index-blog .btn-sideline:hover > span,
#index-blog .btn-sideline:focus > span,
#index-blog .btn-sideline:visited:hover > span{
  color:#fff;
}


/* ============================================================================
   13. 捲動後（.navbar.fixed）logo 貼到白底條下緣
   ----------------------------------------------------------------------------
   2026-08-27 客戶回報「下滑 logo 圖會貼到下緣，怪怪的」。
   style_e 捲動後會補一條 `.navbar.fixed::after` 的 80px 白底，但 navbar 本身
   的高度是內容撐出來的（logo 60px + padding），兩者沒有綁在一起，
   logo 就會壓在白底條的下緣、甚至凸出去。

   解法：捲動後把 navbar 自己也鎖成 80px 並垂直置中，logo 再收小一點。
   ========================================================================== */

@media (min-width:992px){
  .navbar.fixed{
    height:95px;                    /* 舊站捲動後的白底條就是 95px */
    min-height:0;                   /* ⚠ 蓋掉未捲動的 min-height:100px，否則 height:95 沒用，
                                          logo 會在 100px 的盒子裡置中、對 95px 的白底條偏下 */
    padding-top:0; padding-bottom:0;
    align-items:center;
  }
  /* style_e 自己那條白底是 ::after 固定 80px，一起拉到 95 才不會露出邊 */
  .navbar.fixed::after{ height:95px; }
  .navbar.fixed .navbar-brand img{ max-height:55px; }   /* 舊站 67×55 */
}

/* ============================================================================
   14. 手機版 logo 貼到選單列下緣
   ----------------------------------------------------------------------------
   2026-08-27 客戶回報「測試版手機 logo 有點偏下」。

   成因是主題自己的尺寸打架，不是我們改出來的：
     .mobile-menu  height:67px; padding:16px 0;   → 內容框只有 35px
     .mobile-menu img  max-height:50px;           → logo 比內容框高 15px

   logo 從內容框頂端（y=16）往下排，50px 一路撐到 y=66，而列高 67
   → 上面留 16、下面只剩 1，看起來就是整顆沉在底部。

   ⚠ 不要改 .mobile-menu 的 padding —— 漢堡與搜尋 icon 也吃這個 padding，
     一起往上移就換成它們偏高了（漢堡目前中線 35、列中線 33.5，本來就對得不錯）。
   所以只把 logo 自己往上拉，讓它在 67px 裡置中：(67-50)/2 ≈ 8。
   ========================================================================== */

@media (max-width:991px){
  .mobile-menu .mobile-logo{ margin-top:-8px; }
}