/* ============================================================================
   伊美教育 新網站｜設計系統
   im-design-system.css
   ----------------------------------------------------------------------------
   建立：2026-08-25　·　產出線：實作 A
   版面依據：13_新視覺改版/01_設計稿/02_學院系列_版本1（淺）、03_學院系列_版本2（深）
   色彩依據：主色鎖定 11_intake/brand-bibles/00-COLOR-SYSTEM.md
             中性色階取樣自設計稿實際像素（HEX 紀錄見 00_設計系統說明.md）

   ⚠️ 2026-10-04 業主：淺／深是「兩種版型」（排法不同，深＝版本2、淺＝版本1），下面這句是早期說法，已不適用：
   「一份樣板 ＋ 兩組顏色。淺／深不是兩個版型，是同一個版型的兩組變數。」
   最外層 class 決定一切：
       <div class="im-academy is-light" style="--im-brand:#DAA520">
       <div class="im-academy is-dark"  style="--im-brand:#DAA520">

   分層（照順序讀）
   L0  Reset 與字體
   L1  Token｜全域（字級／間距／圓角／動效／容器）
   L2  Token｜色彩開關（is-light / is-dark 兩組同名變數）
   L3  Token｜編排密度（對齊、留白、節奏）
   L4  元件（按鈕、卡片、標籤、表單、手風琴…）
       L4之2 列表頁／L4之3 全站彙整頁／L4之4 懸浮按鈕與免費了解視窗
   L5  區塊（S1~S10 骨架，兩版共用的部分）
       L5之2 全站層級（集團）：全站導覽列、集團粉互動色與按鈕、標題、學院標籤、四欄頁尾
   L6  變體（六個區塊的兩種排法）
   L7  RWD（1200 / 900 / 640）

   ----------------------------------------------------------------------------
   ★ 已定規則摘要（全文：13_新視覺改版/設計系統規則.md；兩邊一起改）
   ----------------------------------------------------------------------------
   1 寬度：文字內容最寬 1440（--im-content）置中＝min(1440px, 100vw − 80px)；桌機側邊距 --im-gutter 40px、
           手機（≤750）clamp(20px,5vw,56px) 不變；--im-container＝1440＋兩側邊距（.im-wrap 外框）。
           導覽列與頁尾跟螢幕寬：左右 64px、最寬 1760、超寬置中（手機不變）。
           照片選擇性滿版：頁首主視覺、照片條、首頁十院入口出血到視窗邊；資訊型左文右圖留在內容框。 業主 10-12
   2 版型：深＝純黑 #000、淺＝暖米白 #F5F1ED，兩種排法（版本2／版本1）。        業主 10-04／10-05
   3 顏色：重點色一律讀 --im-brand／--im-brand-ink，不寫死金色（金色只屬微刺青）；
           造型純黑在深底改用米白 #E3D9CD（總控暫定）；「伊美教育」眉標固定品牌粉紅。 業主 10-05
   4 字：--im-font-serif 標題／數字、--im-font-sans 內文與小字、--im-font-en 英文小字（:root）；
           最小 14px；對比 ≥ 4.5（大字 ≥ 3）；不藏字。                          業主 10-04／10-05
   5 留白：--im-sec-pad 桌機 72／手機 48；--im-sec-head 桌機 32／手機 20；頁尾前不留空隙。 業主 10-05
   6 頁尾：全站共用完整版、白字、滑過白色＋底線；最下列不放立案資訊、不放 YouTube。 業主 10-05
   7 懸浮按鈕：每顆一樣大（48／手機 44）、有回到頂端（捲 400px 出現）；
           學院頁帶該學院社群，全站頁不放社群；疊到 data-im-float-avoid 區塊時淡出。 業主 10-05
   8 照片：不調暗（只在放字處用漸層）、同頁不重複、學院首頁 Hero 與各總覽頁頁首不同張；
           首頁學院入口圖可再用於該學院頁；個資圖不用。                         業主 10-05
   9 功能：表單區在正式表單前一律「按鈕開彈窗」（data-im-open="free-consult"）；
           不做站內搜尋；影片單純嵌入。                                         業主 09-22／10-05
   ============================================================================ */


/* ==========================================================================
   L0　RESET 與字體
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--im-font-sans);
  background: var(--im-bg);
  color: var(--im-text);
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--im-brand-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   L1　TOKEN｜全域
   這一層跟淺／深無關，也跟學院無關。兩版共用。
   ========================================================================== */

:root {
  /* --- 字族 ------------------------------------------------------------ */
  /* 宋體下載前／失敗時的替代字：Mac 用宋體－繁，Windows 用微軟正黑體。
     2026-09-22 業主反映看到新細明體 —— 原本最後一個是 serif，在 Windows 上就是新細明體。
     2026-10-05 首頁線：從 .im-academy 提到 :root，首頁等不在 .im-academy 裡的頁面也讀得到（值不變）。 */
  --im-font-serif : "Noto Serif TC", "Songti TC", "Microsoft JhengHei", serif;
  --im-font-sans  : "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --im-font-en    : "Montserrat", "Noto Sans TC", sans-serif;

  /* --- 版心（2026-10-05 首頁線：提到 :root，首頁與一般頁共用）--------------
     業主 2026-09-07：內容寬度統一 1320；業主 2026-10-05：兩側邊距至少約 5%。
     業主 2026-10-12：文字內容寬改 1440（--im-content），桌機側邊距 40px（L4 前的 751px 以上規則）；
     --im-container 是 .im-wrap 的外框（含兩側邊距），由 --im-content 算出，各頁不要寫死 1320。 */
  --im-content   : 1440px;
  --im-gutter    : clamp(1.25rem, 5vw, 3.5rem);
  --im-container : calc(var(--im-content) + 2 * var(--im-gutter));
  --im-wide-max  : 1760px;   /* 導覽列與頁尾「跟螢幕寬」的最寬內容 */
  --im-wide-pad  : 64px;     /* 導覽列與頁尾左右留白 */

  /* --- 區塊留白（2026-10-05 業主決定：首頁 v8 定案的一組，全站共用）--------
     --im-sec-pad：每個區塊上下各留多少；--im-sec-head：區塊標題到內容。 */
  --im-sec-pad   : 72px;
  --im-sec-head  : 32px;
}
@media (max-width: 750px) {
  :root { --im-sec-pad: 48px; --im-sec-head: 20px; }
}

.im-academy {

  /* --- 字級階（流體，clamp 內建 RWD） --------------------------------- */
  /* 業主 2026-09-07 定案：只調整「資訊性文字」，裝飾與大標一律不動。
     原本 39 個元素擠在 11~14px 四個級距裡，分不出階層；下面把它們拉開。 */
  --im-fs-3xs     : 0.6875rem;   /* 11px 註記層：全大寫英文小標、徽章（不動）*/
  --im-fs-2xs     : 0.8125rem;   /* 13px 標籤層（原 12）：表單 label、講師職稱、頁尾地址 */
  --im-fs-xs      : 0.875rem;    /* 14px 附屬層（原 13）：活動說明、校區、新知摘要 */
  --im-fs-sm      : 0.9375rem;   /* 15px 內文層（原 14）：說明、按鈕、連結、價格、FAQ 答案 */
  --im-fs-base    : 1rem;        /* 16px */
  --im-fs-md      : 1.125rem;    /* 18px 卡片標題（原 17）*/
  --im-fs-lg      : clamp(1.125rem, 0.95rem + 0.55vw, 1.375rem);
  --im-fs-xl      : clamp(1.375rem, 1.05rem + 1.0vw, 1.875rem);
  --im-fs-2xl     : clamp(1.75rem,  1.25rem + 1.8vw, 2.625rem);   /* 區塊大標 */
  --im-fs-3xl     : clamp(2.125rem, 1.3rem + 3.2vw, 3.75rem);     /* 頁面 H1 */
  --im-fs-display : clamp(2.5rem,   0.6rem + 6.4vw, 6.5rem);      /* 院代碼字樣 */
  --im-fs-numeral : clamp(1.75rem,  1.1rem + 2.6vw, 3.25rem);     /* 01 / 02 / 03 */

  /* --- 字重 ------------------------------------------------------------ */
  --im-fw-light   : 300;
  --im-fw-normal  : 400;
  --im-fw-medium  : 500;
  --im-fw-bold    : 700;

  /* --- 字距（中文標題需要拉開才有雜誌感） ----------------------------- */
  --im-ls-tight   : -0.01em;
  --im-ls-normal  : 0.02em;
  --im-ls-wide    : 0.14em;   /* 英文小標 EMTATTOO / COURSE */
  --im-ls-widest  : 0.3em;    /* 直排、VOL.01 */

  /* --- 間距階（4px base） ---------------------------------------------- */
  --im-s-1  : 0.25rem;   /*  4 */
  --im-s-2  : 0.5rem;    /*  8 */
  --im-s-3  : 0.75rem;   /* 12 */
  --im-s-4  : 1rem;      /* 16 */
  --im-s-5  : 1.25rem;   /* 20 */
  --im-s-6  : 1.5rem;    /* 24 */
  --im-s-7  : 2rem;      /* 32 */
  --im-s-8  : 2.5rem;    /* 40 */
  --im-s-9  : 3rem;      /* 48 */
  --im-s-10 : 4rem;      /* 64 */
  --im-s-11 : 5rem;      /* 80 */
  --im-s-12 : 6rem;      /* 96 */

  /* --- 圓角 ------------------------------------------------------------ */
  --im-radius-sm   : 2px;
  --im-radius      : 4px;
  --im-radius-lg   : 10px;
  --im-radius-pill : 999px;

  /* --- 線 -------------------------------------------------------------- */
  --im-hairline : 1px;

  /* --- 動效 ------------------------------------------------------------ */
  --im-dur      : 260ms;
  --im-dur-slow : 480ms;
  --im-ease     : cubic-bezier(.22, .61, .36, 1);

  /* --- 版面 ------------------------------------------------------------ */
  --im-container : calc(var(--im-content) + 2 * var(--im-gutter));   /* 2026-10-12：原 1200，由 --im-content 算 */
  --im-gutter    : clamp(1.25rem, 5vw, 3.5rem);   /* 2026-10-05：4vw → 5vw（業主：兩側至少約 5%）*/
  --im-z-nav     : 100;
  --im-z-float   : 90;    /* 懸浮按鈕：低於導覽列（手機選單抽屜要蓋得過它）*/
  --im-z-modal   : 200;   /* 免費了解視窗：蓋過一切 */

  /* --- 基礎排版 --------------------------------------------------------- */
  font-family: var(--im-font-sans);
  font-size: var(--im-fs-base);
  line-height: var(--im-rhythm);
  background: var(--im-bg);
  color: var(--im-text);
  -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   L2　TOKEN｜色彩開關
   --------------------------------------------------------------------------
   兩組同名變數。HTML 結構、區塊順序、間距、字級完全共用，只有這裡不一樣。

   ★ 換學院只要換一個值：--im-brand
     11 個學院不寫 11 段 CSS，最外層 inline 覆寫即可：
         <div class="im-academy is-dark" style="--im-brand:#694012">
     進 WordPress 之後，這一行就是 ACF 欄位直接吐出來的。

   ★ 可讀的品牌色（--im-brand-ink）由 --im-brand 自動衍生，不是另外指定的：
     淺底 → 壓深（金色直接放在米白上讀不到）
     深底 → 提亮（設計稿的深色版金色本來就比主色亮）
     衍生用 color-mix，舊瀏覽器吃前面那行 fallback（微刺青實色）。
   ========================================================================== */

/* ---- 集團桃粉：點綴色 -----------------------------------------------------
   規則：**粉色＝伊美教育（集團）**。只出現在集團識別露臉的地方，
   不當隨機裝飾用。目前四處：Hero 的「伊美教育」小線、Hero H1 下的短線、
   表單必填星號、頁尾的集團 LOGO 與回首頁按鈕。
   （講師學院與 AI 學院的主色本來就是這個粉，那兩院會自然融合，不衝突。）*/
.im-academy {
  --im-group     : #eb6da5;   /* 原色：只給 2px 裝飾線用（純裝飾，不承載資訊）*/
  --im-group-ink : #eb6da5;   /* 可讀版：給會傳達意義的粉色（必填星號等）*/
}
.im-academy.is-light { --im-group-ink: #A7456F; }   /* 淺底上的粉，壓深到 4.68:1 */

/* ---- 學院主色 -----------------------------------------------------------
   唯一真相：13_新視覺改版/04_實作交辦文件.md 第 3 節（＋ CLAUDE.md 學院清單）
   ⚠ 2026/08/26 業主定案：11 → 10 學院。
     emspa（SPA 肌膚管理）＋ emwaxtw（熱蠟除毛）合併為 emskin 肌膚學院，
     主色沿用原 emspa 的鼠尾草綠。舊 slug 301 導向，不再是獨立學院。
   六深四淺，主色鎖死不可改。 ---------------------------------------------- */
.im-academy { --im-brand: #DAA520; }             /* 預設＝微刺青學院 */

/* 深色版六所（.im-home [data-academy]＝首頁學院入口與卡片學院小標籤，2026-10-05／10-06 首頁線加入，共用同一組學院色）*/
.im-home [data-academy="emtattoo"],
.im-academy[data-academy="emtattoo"]       { --im-brand: #DAA520; } /* 蜂蜜金 */
.im-home [data-academy="emnail"],
.im-academy[data-academy="emnail"]         { --im-brand: #694012; } /* 深棕 */
.im-home [data-academy="emstylist"],
.im-academy[data-academy="emstylist"]      { --im-brand: #000000; } /* 黑 */
.im-home [data-academy="emeyelash"],
.im-academy[data-academy="emeyelash"]      { --im-brand: #533C3A; } /* 深玫瑰棕 */
.im-home [data-academy="eminstructor"],
.im-academy[data-academy="eminstructor"]   { --im-brand: #eb6da5; } /* 桃粉 */
.im-home [data-academy="emai"],
.im-academy[data-academy="emai"]           { --im-brand: #eb6da5; } /* 桃粉 */

/* 淺色版四所 */
.im-home [data-academy="emmicroblading"],
.im-academy[data-academy="emmicroblading"] { --im-brand: #FAB89B; } /* 杏粉 */
.im-home [data-academy="emskin"],
.im-academy[data-academy="emskin"]         { --im-brand: #748B71; } /* 鼠尾草綠 ⭐新 */
.im-home [data-academy="emtamna"],
.im-academy[data-academy="emtamna"]        { --im-brand: #2F459A; } /* 深藍 */
.im-home [data-academy="emlicense"],
.im-academy[data-academy="emlicense"]      { --im-brand: #97807D; } /* 莫蘭迪粉棕 */

/* 集團層級（首頁、全站彙整頁）*/
.im-academy[data-academy="emedu"]          { --im-brand: #eb6da5; } /* 桃粉 */

/* 已廢除的 slug —— 正常情況會被 301 導向 emskin，不會走到樣板。
   這兩行只是保險：萬一有漏網的舊連結渲染出來，顏色不會變成預設金色。 */
.im-academy[data-academy="emspa"],
.im-academy[data-academy="emwaxtw"]        { --im-brand: #748B71; }


/* ---------------------------------------------------------------- 淺色版 -- */
.im-academy.is-light {
  /* 底層 */
  --im-bg          : #F5F1ED;   /* 頁面底：暖米白，取樣自設計稿 */
  --im-surface     : #FBF8F4;   /* 浮起的卡片 */
  --im-surface-2   : #EFE9E1;   /* 下沉的區塊底（近期開課、FAQ 條） */
  --im-surface-3   : #E7DED3;   /* 更重的色塊、圖片佔位 */
  --im-invert-bg   : #2E2C2A;   /* 反轉帶：淺色版裡的深色段（頁尾） */
  --im-invert-text : #F7F3EF;

  /* 字 */
  --im-text        : #2E2A26;   /* 主要文字 */
  --im-text-strong : #1C1917;   /* 大標 */
  --im-text-muted  : #6E6862;   /* 說明、註記 */
  --im-text-faint  : #736C64;   /* 更輕的註記、佔位提示（已壓到 AA 4.5:1）*/

  /* 線與陰影 */
  --im-line        : #DED5CA;
  --im-line-strong : #C6B9A8;
  --im-shadow      : 0 1px 2px rgba(46,42,38,.04), 0 12px 32px -18px rgba(46,42,38,.28);
  --im-shadow-lg   : 0 2px 4px rgba(46,42,38,.05), 0 28px 60px -28px rgba(46,42,38,.34);

  /* 品牌色的三個用法 */
  --im-brand-ink   : #825E12;   /* fallback（微刺青）：可讀的品牌色，用在字、線與按鈕底 */
  --im-brand-soft  : #EFE2CE;   /* fallback：品牌色的極淡底 */
  --im-on-brand    : #FFFFFF;   /* 品牌色按鈕上的字 */

  color-scheme: light;
}

/* ---------------------------------------------------------------- 深色版 -- */
.im-academy.is-dark {
  --im-bg          : #000000;   /* 設計稿是純黑，不是深灰 */
  --im-surface     : #0F0D0A;
  --im-surface-2   : #17130D;
  --im-surface-3   : #241C13;
  --im-invert-bg   : #D4CDCA;   /* 反轉帶：深色版裡的淺色段（成果作品、常見問題） */
  --im-invert-text : #2E2A26;

  --im-text        : #F2EEE8;
  --im-text-strong : #FFFFFF;
  --im-text-muted  : #A79F94;
  --im-text-faint  : #81796F;   /* 黑底 4.9:1；深色媒體底 #0F0D0A 仍約 4.5:1 */

  --im-line        : #342C20;
  --im-line-strong : #574632;
  --im-shadow      : 0 1px 2px rgba(0,0,0,.6), 0 18px 48px -24px rgba(0,0,0,.9);
  --im-shadow-lg   : 0 2px 6px rgba(0,0,0,.7), 0 36px 80px -32px rgba(0,0,0,1);

  --im-brand-ink   : #EDAA54;   /* fallback（微刺青）：深底上提亮的金 */
  --im-brand-soft  : #241B0C;
  --im-on-brand    : #14100A;

  color-scheme: dark;
}

/* ---- 品牌色衍生：支援 color-mix 的瀏覽器覆蓋掉上面的 fallback ---------- */
@supports (color: color-mix(in oklab, red, blue)) {
  .im-academy.is-light {
    /* 2026-09-11 重算：原本的 60% 配方只驗過「卡片底 #FBF8F4」，
       但品牌色也會出現在「頁面底 #F5F1ED」與「下沉面板 #EFE9E1」上（FAQ、表單的英文小標），
       在那兩個底色上只有 4.33 與 4.04，沒過 AA。壓到 52% 之後三種底色全部 ≥ 4.89。 */
    --im-brand-ink  : color-mix(in oklab, var(--im-brand) 52%, #2E1A04 48%);
    --im-brand-soft : color-mix(in oklab, var(--im-brand) 20%, var(--im-surface) 80%);
    --im-on-brand   : #FFFFFF;
  }
  .im-academy.is-dark {
    --im-brand-ink  : color-mix(in oklab, var(--im-brand) 62%, #FFF0D4 38%);
    --im-brand-soft : color-mix(in oklab, var(--im-brand) 16%, #000000 84%);
    --im-on-brand   : color-mix(in oklab, var(--im-brand) 14%, #000000 86%);
  }
  /* 紋繡主色是杏粉，淺色版用通用配方壓不到 AA，單獨再壓一階 */
  .im-academy.is-light[data-academy="emmicroblading"] {
    --im-brand-ink : color-mix(in oklab, var(--im-brand) 44%, #2E1A04 56%);
  }
  /* 主色本身就很淺（紋繡杏粉、SPA 綠…）時，深色版不要再提亮到刺眼 */
  .im-academy.is-dark[data-academy="emmicroblading"],
  .im-academy.is-dark[data-academy="emskin"] {
    --im-brand-ink : color-mix(in oklab, var(--im-brand) 86%, #FFFFFF 14%);
  }
  /* 主色是黑（整體造型）時，深色版拿輔色頂上，否則在黑底上等於消失 */
  .im-academy.is-dark[data-academy="emstylist"] {
    --im-brand-ink : #E3D9CD;
  }
}

/* ---- 反轉帶：深色版裡翻成淺底的段（設計稿的成果作品、常見問題） --------
   ⚠ 只在深色版生效。淺色版的這兩區維持淺底，不反轉。 */
.im-academy.is-dark .im-band--invert {
  background: var(--im-invert-bg);
  --im-bg          : var(--im-invert-bg);
  --im-surface     : color-mix(in oklab, var(--im-invert-bg) 88%, #FFFFFF 12%);
  --im-surface-2   : color-mix(in oklab, var(--im-invert-bg) 92%, #000000 8%);
  --im-text        : var(--im-invert-text);
  --im-text-strong : color-mix(in oklab, var(--im-invert-text) 88%, #000000 12%);
  --im-text-muted  : color-mix(in oklab, var(--im-invert-text) 62%, var(--im-invert-bg) 38%);
  --im-line        : color-mix(in oklab, var(--im-invert-text) 18%, var(--im-invert-bg) 82%);
  color: var(--im-text);
}
.im-academy.is-dark .im-band--invert {
  --im-brand-ink : color-mix(in oklab, var(--im-brand) 74%, #3A2508 26%);
}


/* ==========================================================================
   L3　TOKEN｜編排密度
   --------------------------------------------------------------------------
   交辦文件第 3 節：「對齊與留白：用變數控制」。
   淺色＝雜誌感，多置中、留白大、行距鬆。
   深色＝全靠左、緊湊、行距緊。
   結構完全一樣，改的只是下面這幾個值。
   ========================================================================== */

.im-academy.is-light {
  --im-align        : center;        /* 區塊標題預設對齊 */
  --im-align-flex   : center;
  --im-section-gap  : clamp(4rem, 6.5vw, 7.5rem);   /* 區塊之間 */
  --im-section-pad  : clamp(2.5rem, 4vw, 4.5rem);   /* 區塊內距 */
  --im-block-gap    : clamp(1.5rem, 2.4vw, 2.5rem); /* 卡片之間 */
  --im-head-gap     : clamp(1.75rem, 3vw, 3rem);    /* 標題到內容 */
  --im-rhythm       : 1.95;                         /* 內文行高 */
  --im-rhythm-tight : 1.55;                         /* 標題行高 */
  --im-container    : calc(var(--im-content) + 2 * var(--im-gutter));   /* 業主 2026-09-07 兩版統一；10-12 改由 --im-content（1440）算 */
  --im-card-radius  : var(--im-radius);
  --im-media-radius : var(--im-radius);
  /* 第86件：首頁首屏照片與全站／學院總覽、單篇共用的量測高度。 */
  --im-hero-media-h : clamp(500px, calc(100vh - 224px), 860px);   /* 第86件乙線驗收修正：＝淺色學院首頁 ah-hx--tall 第一區照片公式（原 600px 取自已不用的舊頁首規則） */
  --im-hero-media-h-mobile : clamp(240px, calc(100svh - 500px), 520px);
  --im-page-flow-gap : var(--im-sec-pad, 72px);   /* ＝首頁與學院首頁的區塊節奏（72／手機 48） */
}

.im-academy.is-dark {
  --im-align        : left;
  --im-align-flex   : flex-start;
  --im-section-gap  : clamp(3.75rem, 6vw, 7rem);    /* 業主 2026-09-07：區塊之間太擠，放寬 */
  --im-section-pad  : clamp(2rem, 3.2vw, 3.5rem);
  --im-block-gap    : clamp(1rem, 1.6vw, 1.5rem);
  --im-head-gap     : clamp(1.25rem, 2vw, 2rem);
  --im-rhythm       : 1.75;
  --im-rhythm-tight : 1.4;
  --im-container    : calc(var(--im-content) + 2 * var(--im-gutter));
  --im-card-radius  : var(--im-radius-sm);
  --im-media-radius : var(--im-radius-sm);
  --im-hero-media-h : clamp(380px, 52vh, 600px);   /* 第86件乙線驗收修正：＝深色學院首頁 ah-hx--cover 照片公式 */
  --im-hero-media-h-mobile : clamp(280px, 38svh, 340px);
  --im-page-flow-gap : var(--im-sec-pad, 72px);
}


/* ---- 2026-10-12 業主定案：1440 內容框＋寬版導覽列頁尾（桌機；手機 750 以下不變）----
   內容：文字寬＝min(1440px, 100vw − 80px)，左右最少 40px。
   導覽列與頁尾：跟螢幕寬，左右 64px、最寬 1760、超寬置中。 */
@media (min-width: 751px) {
  :root, .im-academy, .im-academy.is-light, .im-academy.is-dark { --im-gutter: 40px; }
  .im-nav > .im-nav__inner,
  .im-footer > .im-wrap {
    max-width: calc(var(--im-wide-max) + 2 * var(--im-wide-pad));
    padding-inline: var(--im-wide-pad);
  }
}

/* ==========================================================================
   L4　元件
   兩版共用。元件本身不知道自己在淺色還深色，只讀 L2 的變數。
   ========================================================================== */

/* ---- hidden 一律有效（2026-09-22，B1 回報）-------------------------------
   瀏覽器的 hidden 只是預設 display:none，元件自己有 display:flex/grid 就會蓋過它。
   沒資料就整塊隱藏（三件硬性要求之三）靠的就是 hidden，所以全域補強。 */
.im-academy [hidden] { display: none !important; }

/* ---- 版心 --------------------------------------------------------------- */
.im-wrap {
  width: 100%;
  max-width: var(--im-container);
  margin-inline: auto;
  padding-inline: var(--im-gutter);
}
.im-wrap--wide { max-width: min(1560px, 100%); }
.im-wrap--flush { padding-inline: 0; }

/* ---- 區塊外殼 ----------------------------------------------------------- */
.im-section { padding-block: calc(var(--im-section-gap) * .5); }
/* 產業新知下面緊接著常見問題的反轉底色帶，卡片下緣會貼到交界 → 多給一段 */
.im-insights { padding-block-end: var(--im-section-gap); }
.im-section.im-band--invert { padding-block: var(--im-section-gap); }
/* 三件硬性要求之三：沒有資料就整區隱藏，不留空框 */
.im-section[hidden] { display: none !important; }

/* ---- 區塊標題組 --------------------------------------------------------- */
.im-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--im-s-5);
  margin-block-end: var(--im-head-gap);
  text-align: var(--im-head-align, var(--im-align));
}
.im-head--stack {
  flex-direction: column;
  align-items: var(--im-align-flex);
}
.im-head__main { display: flex; flex-direction: column; gap: var(--im-s-2); min-width: 0; }
.im-head--stack .im-head__main { align-items: var(--im-align-flex); }

.im-eyebrow {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-2xs);
  font-weight: var(--im-fw-medium);
  letter-spacing: var(--im-ls-wide);
  text-transform: uppercase;
  color: var(--im-brand-ink);
}
.im-title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-2xl);
  font-weight: var(--im-fw-medium);
  line-height: var(--im-rhythm-tight);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text-strong);
}
.im-title--lg { font-size: var(--im-fs-3xl); }
.im-subtitle {
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
  max-width: 46ch;
}
.im-head--stack .im-subtitle { margin-inline: var(--im-subtitle-margin, 0); }
.im-academy.is-light .im-head--stack .im-subtitle { margin-inline: auto; }

/* ---- 文字連結（→ 出口） ------------------------------------------------- */
/* 三件硬性要求之一：每個區塊都要有通往子頁的出口 */
.im-link {
  display: inline-flex;
  align-items: center;
  gap: var(--im-s-2);
  font-size: var(--im-fs-sm);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text);
  white-space: nowrap;
  transition: color var(--im-dur) var(--im-ease), gap var(--im-dur) var(--im-ease);
}
.im-link::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  transition: width var(--im-dur) var(--im-ease);
}
.im-link:hover { color: var(--im-brand-ink); gap: var(--im-s-3); }
.im-link:hover::after { width: 2.5rem; }
.im-link--brand { color: var(--im-brand-ink); }

/* ---- 按鈕 --------------------------------------------------------------- */
.im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--im-s-2);
  padding: var(--im-s-3) var(--im-s-6);
  border: var(--im-hairline) solid transparent;
  border-radius: var(--im-radius-sm);
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-medium);
  letter-spacing: var(--im-ls-normal);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--im-dur) var(--im-ease),
              color var(--im-dur) var(--im-ease),
              border-color var(--im-dur) var(--im-ease),
              transform var(--im-dur) var(--im-ease);
}
.im-btn:hover { transform: translateY(-1px); }
.im-btn:active { transform: translateY(0); }

.im-btn--brand {
  background: var(--im-brand-ink);
  color: var(--im-on-brand);
  border-color: var(--im-brand-ink);
}
.im-btn--brand:hover {
  background: color-mix(in oklab, var(--im-brand-ink) 84%, #000000 16%);
  border-color: color-mix(in oklab, var(--im-brand-ink) 84%, #000000 16%);
  color: var(--im-on-brand);
}
.im-academy.is-dark .im-btn--brand:hover {
  background: color-mix(in oklab, var(--im-brand-ink) 84%, #FFFFFF 16%);
  border-color: color-mix(in oklab, var(--im-brand-ink) 84%, #FFFFFF 16%);
}
.im-academy.is-dark .im-btn--brand { color: #14100A; }

.im-btn--outline {
  border-color: var(--im-line-strong);
  color: var(--im-text);
}
.im-btn--outline:hover { border-color: var(--im-brand-ink); color: var(--im-brand-ink); }

.im-btn--ghost { color: var(--im-text); padding-inline: 0; }
.im-btn--lg { padding: var(--im-s-4) var(--im-s-8); font-size: var(--im-fs-base); }
.im-btn--block { width: 100%; }

/* ---- 標籤 / 徽章 -------------------------------------------------------- */
.im-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--im-s-1);
  padding: 0.2rem var(--im-s-3);
  border-radius: var(--im-radius-pill);
  background: var(--im-brand-soft);
  color: var(--im-brand-ink);
  font-size: var(--im-fs-2xs);
  letter-spacing: var(--im-ls-normal);
  line-height: 1.6;
  white-space: nowrap;
}
.im-tag--line {
  background: transparent;
  border: var(--im-hairline) solid var(--im-line-strong);
  color: var(--im-text-muted);
}
.im-tag--dot::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- 編號（01 / 02 / 03） ---------------------------------------------- */
.im-numeral {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-numeral);
  font-weight: var(--im-fw-light);
  line-height: 1;
  letter-spacing: var(--im-ls-tight);
  /* 壓在照片遮罩上的大數字：用提亮的主色，不用壓深的 brand-ink，
     否則在深色遮罩上會糊掉、也看不出是蜂蜜金 */
  color: color-mix(in oklab, var(--im-brand) 64%, #FFF6E4 36%);
}

/* ---- 圖片佔位 ----------------------------------------------------------- */
/* 靜態階段沒有真實圖片。這個佔位塊到了實作 C 會換成 <img>／ACF 圖片欄位。
   保留 aspect-ratio 讓版面比例跟接上真圖之後一致。 */
.im-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--im-media-radius);
  background: var(--im-surface-3);
  aspect-ratio: var(--im-ratio, 4 / 3);
}
.im-media > img { width: 100%; height: 100%; object-fit: cover; }
.im-media--ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--im-brand) 16%, var(--im-surface-3)) 0%,
      var(--im-surface-3) 46%,
      color-mix(in oklab, var(--im-surface-3) 84%, #000000) 100%);
}
.im-media--ph::after {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: grid; place-content: center;
  padding: var(--im-s-4);
  text-align: center;
  font-family: var(--im-font-en);
  font-size: var(--im-fs-3xs);
  letter-spacing: var(--im-ls-wide);
  text-transform: uppercase;
  color: var(--im-text-faint);
}
.im-media--portrait { --im-ratio: 3 / 4; }
.im-media--square   { --im-ratio: 1 / 1; }
.im-media--wide     { --im-ratio: 16 / 9; }
.im-media--tall     { --im-ratio: 2 / 3; }

/* ---- 卡片 --------------------------------------------------------------- */
.im-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--im-card-radius);
  background: var(--im-surface);
  transition: transform var(--im-dur) var(--im-ease), box-shadow var(--im-dur) var(--im-ease);
}
.im-card__body { padding: var(--im-s-5); display: flex; flex-direction: column; gap: var(--im-s-2); }
.im-card__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  font-weight: var(--im-fw-medium);
  line-height: var(--im-rhythm-tight);
  color: var(--im-text-strong);
}
.im-card__meta { font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-card__desc { font-size: var(--im-fs-sm); color: var(--im-text-muted); }
.im-card__price {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-sm);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text);
}
.im-card__price small { font-family: var(--im-font-sans); color: var(--im-text-muted); }
.im-card:hover { transform: translateY(-3px); box-shadow: var(--im-shadow); }
.im-card--flat:hover { background: var(--im-surface); }
.im-card--flat { background: transparent; }
.im-card--line { border: var(--im-hairline) solid var(--im-line); }

/* ---- 手風琴（常見問題） ------------------------------------------------- */
.im-acc { border-block-end: var(--im-hairline) solid var(--im-line); }
.im-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--im-s-4);
  width: 100%;
  padding-block: var(--im-s-4);
  text-align: start;
  font-size: 1.0625rem;          /* 17px：問句是掃讀入口，要比答案大一階 */
  color: var(--im-text);
  list-style: none;
  cursor: pointer;
  transition: color var(--im-dur) var(--im-ease);
}
.im-acc__q::-webkit-details-marker { display: none; }
.im-acc__q::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform var(--im-dur) var(--im-ease);
}
.im-acc[open] > .im-acc__q { color: var(--im-brand-ink); }
.im-acc[open] > .im-acc__q::after { transform: rotate(90deg); background-size: 100% 1px, 0 0; }
.im-acc__q:hover { color: var(--im-brand-ink); }
.im-acc__a {
  padding-block-end: var(--im-s-5);
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
  max-width: 62ch;
}

/* ---- 表單元件 ----------------------------------------------------------- */
.im-field { display: flex; flex-direction: column; gap: var(--im-s-2); min-width: 0; }
.im-label {
  font-size: var(--im-fs-2xs);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text-muted);
}
.im-label__req { color: var(--im-brand-ink); margin-inline-start: 2px; }
.im-input,
.im-select,
.im-textarea {
  width: 100%;
  padding: var(--im-s-3) var(--im-s-4);
  background: var(--im-surface);
  border: var(--im-hairline) solid var(--im-line);
  border-radius: var(--im-radius-sm);
  font-size: var(--im-fs-sm);
  color: var(--im-text);
  transition: border-color var(--im-dur) var(--im-ease), background-color var(--im-dur) var(--im-ease);
}
.im-input::placeholder,
.im-textarea::placeholder { color: var(--im-text-faint); }
.im-input:focus,
.im-select:focus,
.im-textarea:focus { border-color: var(--im-brand-ink); outline: none; }
.im-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--im-s-4) center, calc(100% - var(--im-s-4) + 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--im-s-8);
}
.im-textarea { min-height: 5.5rem; resize: vertical; }
.im-check {
  display: flex;
  align-items: flex-start;
  gap: var(--im-s-3);
  font-size: var(--im-fs-2xs);
  color: var(--im-text-muted);
  line-height: 1.7;
}
.im-check input { margin-block-start: 0.25rem; accent-color: var(--im-brand); flex: none; }

/* ---- 信任訊息（三個位置之二：表單開頭、送出鈕旁） --------------------- */
.im-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--im-s-2) var(--im-s-5);
  justify-content: var(--im-align-flex);
  font-size: var(--im-fs-2xs);
  color: var(--im-text-muted);
}
.im-trust li { display: flex; align-items: center; gap: var(--im-s-2); }
.im-trust li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--im-group);   /* 粉色點綴 ③：政府立案／履約保障是「機構」的信譽 */
  flex: none;
}
.im-privacy {
  font-size: var(--im-fs-2xs);
  color: var(--im-text-faint);
  text-align: center;
}

/* ---- 輪播控制（產業新知、精選課程） ----------------------------------- */
.im-arrows { display: flex; gap: var(--im-s-3); }
.im-arrow {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-content: center;
  border: var(--im-hairline) solid var(--im-line-strong);
  border-radius: 50%;
  color: var(--im-text-muted);
  transition: color var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-arrow:hover { color: var(--im-brand-ink); border-color: var(--im-brand-ink); }
.im-arrow svg { width: 13px; height: 13px; }
.im-dots { display: flex; gap: var(--im-s-2); justify-content: center; }
.im-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--im-line-strong); }
.im-dots span[aria-current] { background: var(--im-brand-ink); }

/* ---- 分隔線 ------------------------------------------------------------- */
.im-rule { height: var(--im-hairline); background: var(--im-line); border: 0; }
.im-rule--brand { background: var(--im-brand-ink); width: 2.5rem; height: 2px; }

/* ---- 只給螢幕閱讀器 ----------------------------------------------------- */
.im-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   L4之2　元件｜列表頁（學院層級）
   --------------------------------------------------------------------------
   2026-09-20 新增。給實作 B1 的六個學院子頁用。

   依據：01_設計稿/02_學院系列_版本1/學院課程 (1).png、學院最新活動 (1).png
         01_設計稿/03_學院系列_版本2/學院課程 (2).png、學院最新活動 (2).png

   ⚠️ 這一層跟 L4 一樣「不知道自己在淺色還深色」，只讀 L2 的顏色變數
      與 L3 的密度變數。所以同一份 class 在兩版會自動變成兩種疏密。
      不要在這裡寫 .is-light / .is-dark。

   總覽頁的骨架（兩張設計稿共用的八層）：
      ① 麵包屑  ② 頁首區  ③ 搜尋列  ④ 置頂特色
      ⑤ 網格列表 ⑥ 分頁    ⑦ 頁尾 CTA ⑧ 頁尾（沿用學院頁那份）
   ========================================================================== */

/* ---- ① 麵包屑 ----------------------------------------------------------- */
/* 注意：麵包屑一律靠左，不吃 --im-align。
   置中的麵包屑在淺色版會變得很難掃讀，而且它是導航不是標題。 */
.im-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--im-s-2);
  margin-block-end: var(--im-s-6);
  font-size: var(--im-fs-2xs);
  color: var(--im-text-muted);
}
.im-crumb a { color: var(--im-text-muted); transition: color var(--im-dur) var(--im-ease); }
.im-crumb a:hover { color: var(--im-brand-ink); }
.im-crumb li + li::before {
  content: "/";
  margin-inline-end: var(--im-s-2);
  color: var(--im-text-faint);
}
.im-crumb li { display: flex; align-items: center; }
.im-crumb [aria-current] { color: var(--im-text); }

/* ---- ② 頁首區 ----------------------------------------------------------- */
/* 左邊標題組、右邊一張情境照。設計稿的照片是貼齊右上、比版心再往外一點，
   所以 .im-phead__media 允許用 --im-phead-bleed 往外溢。 */
.im-phead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: start;
  gap: var(--im-s-8);
  padding-block-end: var(--im-section-pad);
}
.im-phead__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 頁首一律靠左：右邊有圖，置中會失衡 */
  gap: var(--im-s-4);
  padding-block-start: var(--im-s-6);
}
.im-phead__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-3xl);
  font-weight: var(--im-fw-normal);
  line-height: var(--im-rhythm-tight);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text-strong);
}
/* 大標下面那條金色短線 —— 沿用 L4 的 .im-rule--brand，不另外發明 */
.im-phead__lede {
  max-width: 34em;
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
}
.im-phead__media {
  border-radius: var(--im-media-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

/* ---- ③ 搜尋列 ----------------------------------------------------------- */
.im-search { margin-block-end: var(--im-section-pad); }
.im-search__label {
  display: block;
  margin-block-end: var(--im-s-3);
  font-size: var(--im-fs-2xs);
  color: var(--im-text-muted);
}
.im-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--im-s-4);
}
.im-search__input {
  width: 100%;
  padding: var(--im-s-4) var(--im-s-5);
  border: var(--im-hairline) solid var(--im-line);
  border-radius: var(--im-radius-sm);
  background: var(--im-surface);
  font-size: var(--im-fs-sm);
  color: var(--im-text);
  transition: border-color var(--im-dur) var(--im-ease);
}
.im-search__input::placeholder { color: var(--im-text-faint); }
.im-search__input:focus-visible {
  outline: none;
  border-color: var(--im-brand-ink);
}
.im-search__btn {
  padding-inline: var(--im-s-9);
  border-radius: var(--im-radius-sm);
  background: var(--im-brand-ink);
  color: var(--im-on-brand);
  font-size: var(--im-fs-sm);
  letter-spacing: var(--im-ls-normal);
  transition: filter var(--im-dur) var(--im-ease);
}
.im-search__btn:hover { filter: brightness(1.08); }

/* 膠囊版：全站彙整頁用（設計稿是圓角膠囊、搜尋 icon 在左、無獨立按鈕） */
.im-search--pill .im-search__row { grid-template-columns: minmax(0, 1fr); }
.im-search--pill .im-search__input {
  padding-inline-start: var(--im-s-10);
  border-radius: var(--im-radius-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736C64' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--im-s-5) center;
  background-size: 18px 18px;
}

/* ---- ④ 置頂特色（一筆橫幅，形狀刻意跟下面的網格不同） ------------------ */
.im-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-block-end: var(--im-block-gap);
  border-radius: var(--im-card-radius);
  overflow: hidden;
  background: var(--im-surface);
}
.im-feature__media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.im-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--im-s-3);
  padding: var(--im-s-8);
}
.im-feature__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-xl);
  font-weight: var(--im-fw-normal);
  line-height: var(--im-rhythm-tight);
  color: var(--im-text-strong);
}
/* 右半再切一欄放「說明＋價格＋了解課程」—— 設計稿課程頁是這個排法 */
.im-feature__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--im-s-7);
  align-items: center;
  width: 100%;
}
.im-feature__split > * + * {
  padding-inline-start: var(--im-s-7);
  border-inline-start: var(--im-hairline) solid var(--im-line);
}

/* ---- ⑤ 網格列表 --------------------------------------------------------- */
/* 一個網格吃所有列表頁。欄數用 modifier 換，不要每頁各寫一份。 */
/* ⚠️ 軌道數是「欄數 × 6」，不是欄數。
   為什麼：設計稿課程總覽最後一列放的是**兩張半寬卡**（＝1.5 欄），
   三欄網格放不下 1.5 欄。開六倍軌之後：一般卡 span 6（一列三張）、
   半寬卡 span 9（一列兩張），數學剛好對齊 —— 跨 N 軌會自然吃掉內部的 gap。
   不要為了「看起來乾淨」改回 repeat(3, 1fr)，半寬卡會掉到各自一列。 */
.im-grid {
  display: grid;
  grid-template-columns: repeat(calc(var(--im-cols, 3) * 6), minmax(0, 1fr));
  gap: var(--im-block-gap);
}
.im-grid > * { grid-column: span 6; }
.im-grid--2 { --im-cols: 2; }
.im-grid--3 { --im-cols: 3; }
.im-grid--4 { --im-cols: 4; }

/* 半寬卡（1.5 欄）：設計稿刻意打破三欄節奏的地方。不是 bug，是節奏 ——
   整頁都是三欄會很像型錄。 */
.im-grid__wide { grid-column: span 9; }

/* 橫式卡（圖在側、文字在旁）。用在 .im-grid__wide 裡面。 */
.im-card--row {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
  align-items: stretch;
}
.im-card--row .im-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.im-card--row .im-card__body { justify-content: center; }
/* 圖在右：加這個 modifier，不要另外寫一組 class */
.im-card--row-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr); }
.im-card--row-rev .im-media { order: 2; }

/* 第94件：半列卡片共用尺寸；各頁以自己的選擇器套用此量測。 */
:root { --im-r94-row-card-h: 290px; --im-r94-row-card-media-w: 264px; }

/* 卡片底部那一行 metadata（日期｜校區、或 價格｜了解課程 →） */
/* .im-card 是 flex column，但 __body 不撐滿的話，__foot 的 margin-top:auto 無效
   —— 三張卡等高、底列卻各自高低不齊。這一行是讓底列對齊的關鍵。 */
.im-grid > .im-card > .im-card__body,
.im-feature .im-card__body { flex: 1; }

.im-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--im-s-4);
  margin-block-start: auto;
  padding-block-start: var(--im-s-4);
  font-size: var(--im-fs-xs);
  color: var(--im-text-muted);
}
.im-card__foot .im-link { flex: none; }

/* 標籤在 flex column 容器裡預設會被 stretch 成一條滿版長條。
   設計稿的標籤是貼左的小膠囊，所以這裡把它收回內容寬度。 */
.im-card__body > .im-tag,
.im-feature__body > .im-tag,
.im-pickcard > .im-tag,
.im-groupcard > .im-tag { align-self: flex-start; }

/* ---- ⑥ 分頁 ------------------------------------------------------------- */
.im-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--im-s-2);
  margin-block-start: var(--im-section-pad);
}
.im-pager a,
.im-pager span {
  min-width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  padding-inline: var(--im-s-2);
  border-radius: 50%;
  font-family: var(--im-font-en);
  font-size: var(--im-fs-xs);
  color: var(--im-text-muted);
  transition: color var(--im-dur) var(--im-ease), background var(--im-dur) var(--im-ease);
}
.im-pager a:hover { color: var(--im-brand-ink); }
.im-pager [aria-current] {
  background: var(--im-brand-ink);
  color: var(--im-on-brand);
}

/* 載入更多：全站彙整頁用這個，不用數字分頁（設計稿如此） */
.im-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--im-s-4);
  width: 100%;
  margin-block-start: var(--im-section-pad);
  padding-block: var(--im-s-5);
  border: var(--im-hairline) solid var(--im-line-strong);
  border-radius: var(--im-card-radius);
  font-size: var(--im-fs-sm);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text);
  transition: border-color var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease);
}
.im-more:hover { border-color: var(--im-brand-ink); color: var(--im-brand-ink); }

/* ---- ⑦ 頁尾 CTA bar ----------------------------------------------------- */
.im-ctabar {
  display: flex;
  align-items: center;
  gap: var(--im-s-7);
  margin-block-start: var(--im-section-pad);
  padding: var(--im-s-7) var(--im-s-8);
  border-radius: var(--im-card-radius);
  background: var(--im-surface-2);
}
.im-ctabar__icon {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-content: center;
  color: var(--im-brand-ink);
}
.im-ctabar__icon svg { width: 100%; height: 100%; }
.im-ctabar__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--im-s-1); min-width: 0; }
.im-ctabar__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  color: var(--im-text-strong);
}
.im-ctabar__desc { font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-ctabar__action { margin-inline-start: auto; flex: none; }

/* 課程總覽那一版右半要塞「近期開課」四個日期 —— 用 grid 版 */
.im-ctabar--split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: center;
  gap: var(--im-s-8);
}
.im-ctabar__dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--im-s-5);
  font-size: var(--im-fs-xs);
}
.im-ctabar__dates b {
  display: block;
  font-weight: var(--im-fw-normal);
  color: var(--im-text);
}
.im-ctabar__dates span { color: var(--im-text-muted); }
/* 「尚有名額」前面那個點 —— 粉色點綴，機構層級的狀態訊息 */
.im-ctabar__dates em {
  display: flex; align-items: center; gap: var(--im-s-2);
  font-style: normal;
  color: var(--im-text-muted);
}
.im-ctabar__dates em::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--im-group); flex: none;
}

/* ---- 無資料狀態 --------------------------------------------------------- */
/* 硬性要求之三是「沒有資料就整區隱藏」，但**列表頁本身**不能整頁隱藏，
   所以列表頁需要一個空狀態。這不是隱藏文字，使用者看得到。 */
.im-empty {
  padding-block: var(--im-s-11);
  text-align: center;
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
}


/* ==========================================================================
   L4之3　元件｜全站彙整頁（集團層級）
   --------------------------------------------------------------------------
   2026-09-20 新增。給實作 B2 用。

   依據：01_設計稿/04_全站彙整頁/全站專業課程總覽.png ＋ 手機版

   🔴 全站彙整頁跟學院彙整頁**不是同一個版型**，設計稿上差很多：
        · 全站版：拼貼 banner 頁首、膠囊搜尋、本期精選 1大2小、
                  **依學院分群**的列表、載入更多
        · 學院版：左標題右圖頁首、方框搜尋、置頂一筆、平列網格、數字分頁
      交辦文件第 4 節寫「共用同一個樣板，差別只在預設篩選」——
      **設計稿否定了這個假設**。詳見 00_設計系統說明.md 第 16 節。

   ⚠️ 全站頁不屬於任何學院：外層不要加 data-academy，
      強調色一律用 --im-group（伊美粉 #eb6da5）。
   ========================================================================== */

/* ---- 全站頁首（拼貼 banner） -------------------------------------------- */
.im-sitehead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--im-s-8);
  min-height: clamp(16rem, 26vw, 24rem);
}
.im-sitehead__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--im-s-3);
  padding-block: var(--im-s-9);
}
.im-sitehead__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-3xl);
  font-weight: var(--im-fw-normal);
  line-height: var(--im-rhythm-tight);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text-strong);
}
.im-sitehead__en {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-sm);
  letter-spacing: var(--im-ls-widest);
  text-transform: uppercase;
  color: var(--im-brand-ink);
}
.im-sitehead__lede { font-size: var(--im-fs-sm); color: var(--im-text-muted); }
/* 標題下面那條短線在全站頁是**粉色**（集團層級），不是學院色 */
.im-sitehead .im-rule--brand { background: var(--im-group); }

/* 右邊的拼貼：等寬直條，數量由 HTML 決定，CSS 不限制 */
.im-sitehead__collage {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  align-self: stretch;
  overflow: hidden;
}
.im-sitehead__collage .im-media { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* ---- 本期精選（1 大 ＋ 2 小） ------------------------------------------- */
.im-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: var(--im-block-gap);
}
.im-pick__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--im-block-gap);
}
/* 精選卡：圖當底、文字壓在上面。深色版設計稿是這個做法。 */
.im-pickcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--im-s-2);
  min-height: 11rem;
  padding: var(--im-s-7);
  border-radius: var(--im-card-radius);
  overflow: hidden;
  isolation: isolate;
}
.im-pickcard > .im-media {
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 0;
  aspect-ratio: auto;
}
.im-pickcard::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--im-bg) 88%, transparent) 0%,
    color-mix(in oklab, var(--im-bg) 62%, transparent) 52%,
    color-mix(in oklab, var(--im-bg) 14%, transparent) 100%);
}
.im-pickcard__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-xl);
  font-weight: var(--im-fw-normal);
  line-height: var(--im-rhythm-tight);
  color: var(--im-text-strong);
}
.im-pickcard--lead { min-height: 17rem; }
.im-pickcard--lead .im-pickcard__title { font-size: var(--im-fs-2xl); }
.im-pickcard__meta { font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-pickcard__price {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-md);
  color: var(--im-text);
}
.im-pickcard__price small { font-family: var(--im-font-sans); color: var(--im-group); }

/* ---- 依學院分群的列表列 ------------------------------------------------- */
/* 一列 ＝ 左邊學院標籤卡 ＋ 右邊三張課程卡。
   學院色靠 data-academy 帶進來（L2 已經定義好十個學院的 --im-brand）。 */
/* 卡片包一層 __items（不要讓卡片直接當 .im-grouprow 的子元素）——
   手機版要把這一群變成橫向滑動輪播，沒有包裝層就做不到。 */
.im-grouprow {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: var(--im-block-gap);
  align-items: stretch;
}
.im-grouprow__items {
  display: grid;
  grid-template-columns: repeat(var(--im-cols, 3), minmax(0, 1fr));
  gap: var(--im-block-gap);
}
.im-grouprow + .im-grouprow { margin-block-start: var(--im-block-gap); }
.im-grouprow__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--im-s-3);
  padding: var(--im-s-6);
  border: var(--im-hairline) solid var(--im-line);
  border-radius: var(--im-card-radius);
  background: var(--im-surface);
}
.im-grouprow__name {
  display: flex;
  align-items: center;
  gap: var(--im-s-3);
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  color: var(--im-brand-ink);   /* 這裡吃該列的學院色 */
}
.im-grouprow__name svg { width: 1.35rem; height: 1.35rem; flex: none; }
.im-grouprow__desc {
  font-size: var(--im-fs-xs);
  color: var(--im-text-muted);
  margin-block-end: var(--im-s-2);
}
.im-grouprow__more { margin-block-start: auto; }

/* 分群列裡的課程卡：圖在上、文字壓在圖下緣（設計稿的做法） */
.im-groupcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--im-s-1);
  min-height: 10rem;
  padding: var(--im-s-5);
  border-radius: var(--im-card-radius);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--im-dur) var(--im-ease);
}
.im-groupcard > .im-media {
  position: absolute; inset: 0; z-index: -1;
  border-radius: 0; aspect-ratio: auto;
}
.im-groupcard::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    transparent 30%,
    color-mix(in oklab, var(--im-bg) 82%, transparent) 100%);
}
.im-groupcard:hover { transform: translateY(-3px); }
.im-groupcard__title {
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-medium);
  color: var(--im-text-strong);
}
.im-groupcard__price {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-sm);
  color: var(--im-text);
}
.im-groupcard__price small { font-family: var(--im-font-sans); color: var(--im-group); }


/* ==========================================================================
   L4之4　元件｜懸浮按鈕 ＋ 免費了解視窗（2026-09-22 新增）
   --------------------------------------------------------------------------
   依據：16_業主決議紀錄.md 第 82 項、42_給實作A的指令。
   取代舊站 footer.html 的 #im-float ／ #im-inquiry-modal（立即諮詢 → 免費了解，拿掉 YouTube）。

   兩個元件都放在 .im-academy 最外層「裡面」、頁尾之後 —— 顏色變數在那裡才讀得到。
   全站彙整頁（不掛 data-academy）一樣放在 .im-academy 裡，懸浮按鈕加 .im-float--group 換成集團粉。

   ▍懸浮按鈕 .im-float
     桌機（> 640）：右下角直排三顆 —— LINE ／ 免費了解 ／ 回到頂端
     手機（≤ 640）：底部整條 —— [LINE][ 免費了解 ]，回到頂端浮在長條右上方
     .im-float 本身是「墊高塊」：手機版它在文件流裡佔一條長條的高度，
     所以頁尾最後一行不會被長條蓋住，不用另外幫 body 加 padding。
     回到頂端：捲超過一個螢幕高才出現（JS 在 .im-float 加 .is-scrolled）。

   ▍免費了解視窗 .im-modal
     裡面只放 thankyou 那份 iframe（紅線：不做原生表單，框裡的內容不是我們的）。
     桌機置中卡片、手機全螢幕。開啟時 <html> 加 .im-modal-open 鎖背景捲動。
     沒開的時候用 hidden 屬性藏起來 —— 本元件自己寫了 [hidden]，不依賴全域規則。
   ========================================================================== */

/* ---- 懸浮按鈕 ----------------------------------------------------------- */
.im-float {
  /* 顏色開關：學院頁吃學院色，全站頁用 .im-float--group 換集團粉 */
  --im-float-cta-bg : var(--im-brand-ink);
  --im-float-cta-fg : var(--im-on-brand);
  --im-float-bar-h  : 3.5rem;              /* 手機長條高度（不含 iPhone 底部安全區）*/
  --im-float-edge   : var(--im-s-6);       /* 桌機離螢幕邊緣的距離 */
}
.im-academy.is-dark .im-float { --im-float-cta-fg: #14100A; }   /* 跟 .im-btn--brand 深色版一致 */
.im-float--group,
.im-academy.is-dark .im-float--group {
  --im-float-cta-bg : var(--im-group);
  --im-float-cta-fg : #1A0E14;
}

.im-float__stack {
  position: fixed;
  inset-block-end: var(--im-float-edge);
  inset-inline-end: var(--im-float-edge);
  z-index: var(--im-z-float);
  display: flex;
  flex-direction: column;
  align-items: center;             /* 三顆圓（免費了解略大）中心對齊 */
  gap: var(--im-s-3);
  max-inline-size: calc(100vw - (2 * var(--im-float-edge)));
  pointer-events: none;            /* 三顆按鈕之間的空隙不擋底下的內容 */
}
.im-float__stack > * { pointer-events: auto; }

/* 圓形小鈕：LINE、回到頂端 */
.im-float__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--im-radius-pill);
  background: var(--im-surface);
  border: var(--im-hairline) solid var(--im-line);
  color: var(--im-text);
  box-shadow: var(--im-shadow);
  transition: transform var(--im-dur) var(--im-ease),
              border-color var(--im-dur) var(--im-ease),
              opacity var(--im-dur) var(--im-ease),
              visibility var(--im-dur) var(--im-ease);
}
.im-float__icon:hover { transform: translateY(-2px); border-color: var(--im-line-strong); }
.im-float__icon svg { width: 1.375rem; height: 1.375rem; }
.im-float__line svg { color: #06C755; }   /* LINE 官方綠，只用在這個圖示上 */

/* 免費了解：主按鈕 */
.im-float__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--im-s-2);
  min-height: 3rem;
  padding: 0 var(--im-s-6);
  border-radius: var(--im-radius-pill);
  background: var(--im-float-cta-bg);
  color: var(--im-float-cta-fg);
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-medium);
  letter-spacing: var(--im-ls-normal);
  white-space: nowrap;
  box-shadow: var(--im-shadow-lg);
  transition: transform var(--im-dur) var(--im-ease), background-color var(--im-dur) var(--im-ease);
}
.im-float__cta:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--im-float-cta-bg) 88%, #000000 12%);
}
.im-academy.is-dark .im-float__cta:hover {
  background: color-mix(in oklab, var(--im-float-cta-bg) 86%, #FFFFFF 14%);
}
.im-float__cta svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* 桌機直排的免費了解：只有圖示（業主 2026-09-22），跟 LINE、回到頂端同一個圓，
   但比較大、有顏色，一眼看得出是主要按鈕。字寫在 aria-label，滑過／鍵盤移到時浮出提示。 */
.im-float__stack .im-float__cta {
  position: relative;
  width: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
}
.im-float__stack .im-float__cta svg { width: 1.5rem; height: 1.5rem; }
.im-float__stack .im-float__cta::after {
  content: attr(aria-label);
  position: absolute;
  inset-inline-end: calc(100% + var(--im-s-3));
  top: 50%;
  transform: translate(.25rem, -50%);
  padding: var(--im-s-2) var(--im-s-3);
  border-radius: var(--im-radius);
  background: var(--im-surface);
  border: var(--im-hairline) solid var(--im-line);
  color: var(--im-text-strong);
  font-size: var(--im-fs-xs);
  white-space: nowrap;
  max-inline-size: calc(100vw - (2 * var(--im-float-edge)) - 3.5rem - var(--im-s-3));
  overflow-wrap: anywhere;
  box-shadow: var(--im-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--im-dur) var(--im-ease), transform var(--im-dur) var(--im-ease), visibility var(--im-dur) var(--im-ease);
}
.im-float__stack .im-float__cta:hover::after,
.im-float__stack .im-float__cta:focus-visible::after { opacity: 1; visibility: visible; transform: translate(0, -50%); }

/* 回到頂端：還在第一屏時不出現 */
.im-float__top { opacity: 0; visibility: hidden; transform: translateY(.5rem); }
.im-float.is-scrolled .im-float__top { opacity: 1; visibility: visible; transform: none; }

/* 手機長條：桌機不顯示 */
.im-float__bar { display: none; }


/* ---- 免費了解視窗 ------------------------------------------------------- */
.im-modal {
  position: fixed;
  inset: 0;
  z-index: var(--im-z-modal);
  display: grid;
  place-items: center;
  padding: var(--im-s-7) var(--im-gutter);
}
.im-modal[hidden] { display: none; }

.im-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, .62);
  backdrop-filter: blur(3px);
}

.im-modal__panel {
  position: relative;               /* 疊在 backdrop 上面 */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  max-height: 100%;                 /* ＝視窗高度扣掉上下留白 */
  background: var(--im-surface);
  color: var(--im-text);
  border: var(--im-hairline) solid var(--im-line);
  border-radius: var(--im-radius-lg);
  box-shadow: var(--im-shadow-lg);
  overflow: hidden;
}

.im-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--im-s-4);
  padding: var(--im-s-6) var(--im-s-6) var(--im-s-5);
  border-block-end: var(--im-hairline) solid var(--im-line);
  flex: none;
}
.im-modal__titles { display: flex; flex-direction: column; gap: var(--im-s-1); min-width: 0; }
.im-modal__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-xl);
  font-weight: var(--im-fw-medium);
  line-height: var(--im-rhythm-tight);
  color: var(--im-text-strong);
}
.im-modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: calc(var(--im-s-2) * -1) calc(var(--im-s-2) * -1) 0 0;
  border-radius: var(--im-radius-pill);
  color: var(--im-text-muted);
  transition: background-color var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease);
}
.im-modal__close:hover { background: var(--im-surface-2); color: var(--im-text-strong); }
.im-modal__close svg { width: 1.25rem; height: 1.25rem; }

/* 內容區自己捲：iframe 比視窗高時，捲的是這一層，不是背後的頁面 */
.im-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--im-s-5) var(--im-s-6) var(--im-s-6);
}
/* iframe 的框是我們的，框裡面不是（08_ 第 0 節）。表單本身是白底，外框跟著給白底 */
.im-modal__frame {
  background: #FFFFFF;
  border-radius: var(--im-radius-sm);
}
.im-modal__frame iframe {
  display: block;
  width: 100%;
  min-height: 56.25rem;             /* 900px，沿用舊版與首頁 B2 的值；表單欄位增減要重調（08_ 第 3 節 ②）*/
  border: 0;
  background: #FFFFFF;
  border-radius: inherit;
}

/* 開啟時鎖住背景 */
html.im-modal-open,
html.im-modal-open body { overflow: hidden; }


/* ==========================================================================
   L5　區塊骨架（S1~S10 ＋ 導覽列 ＋ 頁尾）
   --------------------------------------------------------------------------
   這一層寫「兩版共用的部分」：語意結構、間距、字級、出口連結。
   排法不同的六個區塊（Hero／成果作品／專業師資／近期開課／產業新知／
   常見問題）在 L6 才分岔。
   ========================================================================== */

/* ---------------------------------------------------- 導覽列（學院自己的） */
/* 學院頁不掛全站共用 header。院名＝回本院首頁。 */
.im-nav {
  position: sticky;
  top: 0;
  z-index: var(--im-z-nav);
  background: color-mix(in oklab, var(--im-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-block-end: var(--im-hairline) solid transparent;
  transition: border-color var(--im-dur) var(--im-ease);
}
.im-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--im-s-6);
  min-height: 4.25rem;
  padding-block: var(--im-s-3);
}
.im-nav__brand { display: flex; flex-direction: column; gap: 2px; flex: none; }
.im-nav__name {
  font-family: var(--im-font-serif);
  font-size: 1.1875rem;          /* 19px：logo 位 */
  font-weight: var(--im-fw-medium);
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--im-text-strong);
}
.im-nav__code {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-xs);
  font-weight: var(--im-fw-bold);
  letter-spacing: .16em;
  color: var(--im-brand-ink);
}
.im-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(var(--im-s-3), 1.3vw, var(--im-s-5));
  margin-inline-start: auto;
}
.im-nav__link {
  position: relative;
  font-size: var(--im-fs-sm);   /* 13 → 15：導覽列是要「讀」的，不是標籤 */
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text);
  white-space: nowrap;
  padding-block: var(--im-s-2);
  transition: color var(--im-dur) var(--im-ease);
}
.im-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--im-brand-ink);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--im-dur) var(--im-ease);
}
.im-nav__link:hover { color: var(--im-brand-ink); }
.im-nav__link:hover::after,
.im-nav__link[aria-current]::after { transform: scaleX(1); }
.im-nav__link[aria-current] { color: var(--im-brand-ink); }
/* 「學院首頁」是第一項，跟後面六項之間拉一條細分隔 */
.im-nav__link--home { padding-inline-end: clamp(var(--im-s-3), 1.6vw, var(--im-s-6)); }
.im-nav__link--home::before {
  content: "";
  position: absolute;
  inset-block: 25%;
  inset-inline-end: 0;
  width: 1px;
  background: var(--im-line);
}

/* 其他學院 ▾：小下拉，不搶戲 */
.im-nav__more { position: relative; flex: none; }
.im-nav__more > summary {
  display: flex;
  align-items: center;
  gap: var(--im-s-2);
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  padding-block: var(--im-s-2);
}
.im-nav__more > summary::-webkit-details-marker { display: none; }
.im-nav__more > summary::after {
  content: "";
  width: 5px; height: 5px;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--im-dur) var(--im-ease);
}
.im-nav__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.im-nav__more > summary:hover { color: var(--im-brand-ink); }
.im-nav__drop {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--im-s-3));
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
  gap: var(--im-s-1) var(--im-s-4);
  padding: var(--im-s-4) var(--im-s-5);
  background: var(--im-surface);
  border: var(--im-hairline) solid var(--im-line);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow-lg);
}
.im-nav__drop a {
  font-size: var(--im-fs-xs);
  color: var(--im-text-muted);
  padding-block: var(--im-s-1);
  white-space: nowrap;
  transition: color var(--im-dur) var(--im-ease);
}
.im-nav__drop a:hover { color: var(--im-group-ink); }   /* 粉色點綴 ②：跨學院＝集團層級 */
.im-nav__cta { flex: none; }

.im-nav__burger { display: none; flex: none; width: 2.25rem; height: 2.25rem; }
.im-nav__burger span,
.im-nav__burger span::before,
.im-nav__burger span::after {
  display: block;
  width: 20px; height: 1px;
  background: var(--im-text);
  transition: transform var(--im-dur) var(--im-ease), opacity var(--im-dur) var(--im-ease);
}
.im-nav__burger span { margin-inline: auto; position: relative; }
.im-nav__burger span::before { content: ""; position: absolute; top: -6px; }
.im-nav__burger span::after  { content: ""; position: absolute; top: 6px; }


/* --------------------------------------------------------------- S1 Hero */
/* 骨架共用，排法在 L6 分岔（雜誌式／全幅情境式） */
.im-hero { position: relative; overflow: clip; }
.im-hero__eyebrow {
  font-family: var(--im-font-sans);
  font-size: var(--im-fs-xs);
  color: var(--im-text-muted);
  line-height: 1.9;
}
/* 「伊美教育」——放在 H1 裡的小字。畫面上是小字，語意上 H1 讀作
   「伊美教育 微刺青學院」，符合命名 3 級規則。兩版都顯示。 */
.im-hero__group {
  display: flex;
  align-items: center;
  gap: var(--im-s-3);
  margin-block-end: var(--im-s-3);
  font-family: var(--im-font-sans);
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-normal);
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--im-text-muted);
}
/* 粉色點綴 ①：「伊美教育」四個字本身用集團色。
   文字就是識別，不用再加一條線去指它。 */
/* ⚠️ 業主 2026-09-11 裁示：淺色版也用原色粉，不要壓深。
   已知取捨：#eb6da5 在米白底上只有 2.57:1，未達 AA 4.5:1。
   業主認為品牌名的顏色一致性優先，這是有意識的例外，不是漏掉。 */
.im-hero__group { color: var(--im-group-ink); }

.im-hero__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-3xl);
  font-weight: var(--im-fw-medium);
  line-height: 1.18;
  letter-spacing: 0.04em;
  color: var(--im-text-strong);
}
/* 院代碼：兩版共用同一個元素，只有字級與 order 不同 */
.im-hero__code {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-light);
  letter-spacing: var(--im-ls-widest);
  line-height: 1;
  color: var(--im-brand-ink);
}
.im-hero__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--im-s-2) var(--im-s-6);
  padding-block-end: var(--im-s-3);
  border-block-end: 1px solid var(--im-line);
}
.im-hero__lede {
  font-size: var(--im-fs-sm);
  color: var(--im-text-muted);
  max-width: 34ch;
}
.im-hero__cta { display: flex; align-items: center; gap: var(--im-s-6); flex-wrap: wrap; }

/* 院代碼在最上面當雜誌刊頭，兩版相同 */
.im-hero__meta  { order: 2; }
.im-hero__title { order: 3; }
.im-hero__rule  { order: 5; }
.im-hero__lede  { order: 6; }
.im-hero__cta   { order: 7; }
.im-hero__code { order: 1; }


/* ------------------------------------------------------- S2 最新活動 */
/* ⚠ 這一區不是變體，是「筆數不同」：
     1 筆 → 整幅橫幅（設計稿深色版）
     2 筆 → 大卡 ＋ 側邊小卡（設計稿淺色版）
   靠 :has() 判斷筆數自動切換；WordPress 端另有 data-count 可用（見說明文件）。*/
.im-events__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--im-block-gap);
}
.im-events__list:has(> :nth-child(2)),
.im-events__list[data-count="2"] { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.im-events__list:has(> :nth-child(3)),
.im-events__list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.im-event {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--im-s-3);
  min-height: 15rem;
  padding: var(--im-s-7);
  border-radius: var(--im-card-radius);
  overflow: hidden;
  background: var(--im-surface-3);
  isolation: isolate;
}
.im-event::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg,
      color-mix(in oklab, var(--im-brand) 26%, #1B140B) 0%,
      color-mix(in oklab, var(--im-brand) 8%,  #16110A) 52%,
      #100C07 100%);
}
.im-event__label {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-3xs);
  letter-spacing: var(--im-ls-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--im-brand) 70%, #FFF0D4);
}
.im-event__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-xl);
  font-weight: var(--im-fw-medium);
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: #F7F3EC;
}
.im-event__desc { font-size: var(--im-fs-xs); color: #C8BFB2; max-width: 40ch; }
.im-event__cta { align-self: flex-start; margin-block-start: var(--im-s-2); }

/* 側邊小卡（第 2 筆起） */
.im-event--minor {
  min-height: 0;
  justify-content: flex-start;
  padding: 0;
  background: transparent;
  gap: var(--im-s-3);
}
.im-event--minor::before { display: none; }
.im-event--minor .im-event__title { font-size: var(--im-fs-md); color: var(--im-text-strong); letter-spacing: 0.02em; }
.im-event--minor .im-event__desc { color: var(--im-text-muted); }

/* 只有 1 筆時＝整幅橫幅 */
.im-event:only-child {
  min-height: clamp(9rem, 15vw, 13rem);
  justify-content: center;
  padding-inline: clamp(var(--im-s-7), 6vw, var(--im-s-12));
  border-radius: 0;
}
.im-event:only-child .im-event__title { font-size: var(--im-fs-2xl); letter-spacing: 0.22em; }
.im-events__list:has(> :only-child) { margin-inline: calc(var(--im-gutter) * -1); }


/* ------------------------------------------------------- S3 精選課程 */
.im-courses__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--im-block-gap);
}
.im-course { position: relative; }
.im-course__media { position: relative; }
.im-course__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(14,10,6,.62), transparent);
  border-end-start-radius: var(--im-media-radius);
  border-end-end-radius: var(--im-media-radius);
  pointer-events: none;
}
.im-course__num {
  position: absolute;
  inset-block-end: var(--im-s-3);
  inset-inline-start: var(--im-s-4);
  color: #F3EADA;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  z-index: 1;
}
/* 業主 2026-09-11：hover 浮起的效果保留，但文字區原本左右內距是 0，
   面板邊緣會切在字上。補上左右內距，讓字有呼吸空間。 */
.im-course__body { padding: var(--im-s-4) var(--im-s-4) var(--im-s-5); gap: var(--im-s-1); }
.im-course__level { font-size: var(--im-fs-2xs); color: var(--im-text-muted); }
.im-course__price { margin-block-start: var(--im-s-2); }
.im-courses__count {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-xs);
  letter-spacing: var(--im-ls-wide);
  color: var(--im-text-muted);
}


/* ------------------------------------------------------- S4 成果作品 */
/* 骨架：一個「案例」＋一組「作品格」。排法在 L6 分岔。 */
.im-results__case { display: flex; flex-direction: column; gap: var(--im-s-4); min-width: 0; }
.im-results__caseTitle {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-lg);
  font-weight: var(--im-fw-medium);
  line-height: 1.5;
  color: var(--im-text-strong);
}
.im-results__quote {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-lg);
  line-height: 1.9;
  color: var(--im-text);
  padding-inline-start: var(--im-s-6);
  border-inline-start: 2px solid var(--im-brand-ink);
}
.im-results__quote cite { display: block; margin-block-start: var(--im-s-3); font-style: normal; font-size: var(--im-fs-sm); color: var(--im-text-muted); }
.im-results__gallery { display: grid; gap: var(--im-s-3); min-width: 0; }
.im-results__note { font-size: var(--im-fs-2xs); color: var(--im-text-faint); }
.im-results__sub {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  font-weight: var(--im-fw-medium);
  letter-spacing: 0.08em;
  color: var(--im-text-strong);
}


/* ------------------------------------------------------- S5 學院優勢 */
/* 1 大 ＋ 2 小。兩版相同，只換顏色。 */
.im-adv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--im-block-gap);
  align-items: stretch;
}
.im-adv__side { display: grid; gap: var(--im-block-gap); align-content: stretch; }
.im-adv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--im-s-2);
  min-height: 11rem;
  padding: var(--im-s-6);
  border-radius: var(--im-card-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--im-surface-3);
  transition: transform var(--im-dur) var(--im-ease);
}
.im-adv::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 34%, rgba(12,9,6,.82) 100%),
    linear-gradient(140deg,
      color-mix(in oklab, var(--im-brand) 20%, #2A2119) 0%,
      #1A140E 70%);
}
.im-adv:hover { transform: translateY(-3px); }
.im-adv--lead { min-height: 20rem; }
.im-adv__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  font-weight: var(--im-fw-medium);
  line-height: 1.5;
  color: #F6F1E8;
}
.im-adv--lead .im-adv__title { font-size: var(--im-fs-lg); }
.im-adv__desc { font-size: var(--im-fs-xs); color: #BEB4A6; max-width: 44ch; }
.im-adv__link { color: #E8DDC9; font-size: var(--im-fs-xs); margin-block-start: var(--im-s-2); }


/* ------------------------------------------------------- S6 專業師資 */
.im-inst { display: flex; flex-direction: column; gap: var(--im-s-3); min-width: 0; }
.im-inst__name {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-sm);
  font-weight: var(--im-fw-medium);
  color: var(--im-text-strong);
}
.im-inst__role { font-size: var(--im-fs-2xs); color: var(--im-text-muted); }
.im-inst__info { display: flex; flex-direction: column; gap: 2px; text-align: var(--im-inst-align, var(--im-align)); }


/* --------------------------------------------------- S7 近期開課梯次 */
.im-sched__item { display: flex; flex-direction: column; gap: var(--im-s-1); min-width: 0; }
.im-sched__date {
  font-family: var(--im-font-en);
  font-size: 1rem;               /* 16px：訪客就是來看這個的 */
  letter-spacing: var(--im-ls-normal);
  color: var(--im-text-strong);
}
.im-sched__place { font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-sched__seat {
  display: inline-flex;
  align-items: center;
  gap: var(--im-s-2);
  font-size: var(--im-fs-2xs);
  color: var(--im-text-muted);
}
.im-sched__seat::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--im-seat, var(--im-brand-ink));
  flex: none;
}
.im-sched__item--few { --im-seat: #C2603E; }
.im-sched__item--full { --im-seat: var(--im-text-faint); }


/* ------------------------------------------------------- S8 產業新知 */
.im-insight { display: flex; flex-direction: column; gap: var(--im-s-3); min-width: 0; }
.im-insight__kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--im-s-1) var(--im-s-3);
}
.im-insight__cat {
  font-size: var(--im-fs-2xs);
  letter-spacing: var(--im-ls-normal);
  color: var(--im-brand-ink);
}
.im-insight__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-md);
  font-weight: var(--im-fw-medium);
  line-height: 1.6;
  color: var(--im-text-strong);
}
.im-insight__desc { font-size: var(--im-fs-xs); color: var(--im-text-muted); }
.im-insight__link { font-size: var(--im-fs-xs); margin-block-start: auto; }


/* ------------------------------------------------------- S9 常見問題 */
.im-faq__list { display: grid; gap: 0 var(--im-s-10); }


/* ------------------------------------------------------- S10 諮詢表單 */
.im-form { position: relative; }
.im-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(var(--im-s-7), 5vw, var(--im-s-11));
  align-items: start;
}
.im-form__aside { display: flex; flex-direction: column; gap: var(--im-s-5); }
.im-form__title {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-2xl);
  font-weight: var(--im-fw-medium);
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--im-text-strong);
}
.im-form__lede { font-size: var(--im-fs-sm); color: var(--im-text-muted); max-width: 32ch; }
.im-form__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--im-s-5);
}
.im-form__fields > .im-field--full { grid-column: span 2; }
.im-form__foot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--im-s-4); }
.im-social { display: flex; gap: var(--im-s-3); }
.im-social a {
  width: 2rem; height: 2rem;
  display: grid; place-content: center;
  border: var(--im-hairline) solid var(--im-line-strong);
  border-radius: 50%;
  color: var(--im-text-muted);
  transition: color var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease);
}
.im-social a:hover { color: var(--im-brand-ink); border-color: var(--im-brand-ink); }
.im-social svg { width: 14px; height: 14px; }


/* ------------------------------------------------------------- 頁尾 */
/* 集團識別只出現在這裡。信任訊息的第三個位置＝完整版機構資訊。 */
.im-footer {
  background: var(--im-footer-bg, var(--im-invert-bg));
  color: var(--im-footer-text, var(--im-invert-text));
  padding-block: var(--im-s-9) var(--im-s-7);
  margin-block-start: var(--im-section-gap);
}
.im-academy.is-light .im-footer { --im-footer-bg: #3D3D3E; --im-footer-text: #FFFFFF; }
.im-academy.is-dark  .im-footer { --im-footer-bg: #080706; --im-footer-text: #FFFFFF; border-block-start: var(--im-hairline) solid var(--im-line); }

.im-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--im-s-5);
  padding-block-end: var(--im-s-7);
  border-block-end: 1px solid color-mix(in oklab, var(--im-footer-text) 22%, transparent);
}
.im-footer__logo { display: flex; align-items: center; gap: var(--im-s-4); }
.im-footer__mark {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-content: center;
  border: 1px solid var(--im-group);          /* 粉色點綴 ④ */
  color: var(--im-group);
  border-radius: 50%;
  font-family: var(--im-font-en);
  font-size: var(--im-fs-3xs);
  letter-spacing: 0.08em;
}
.im-footer__name { font-family: var(--im-font-serif); font-size: var(--im-fs-md); letter-spacing: 0.14em; }
.im-footer__slogan { font-size: var(--im-fs-xs); letter-spacing: .08em; font-weight: var(--im-fw-medium); opacity: 1; }
.im-footer__back {
  border-color: color-mix(in oklab, var(--im-footer-text) 45%, transparent);
  color: var(--im-footer-text);
}
.im-footer__back:hover { border-color: #eb6da5; color: #eb6da5; }

.im-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--im-s-7);
  padding-block: var(--im-s-8);
  font-size: var(--im-fs-xs);
  line-height: 1.9;
}
.im-footer__col h3 {
  font-size: var(--im-fs-xs);
  font-weight: var(--im-fw-bold);
  letter-spacing: .08em;
  margin-block-end: var(--im-s-3);
  padding-block-end: var(--im-s-2);
  border-block-end: 1px solid color-mix(in oklab, var(--im-footer-text) 18%, transparent);
  opacity: 1;
}
.im-footer__list { display: grid; gap: var(--im-s-1); }
.im-footer__list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-1) var(--im-s-5); }
.im-footer__col p, .im-footer__col a { color: #FFFFFF; opacity: 1; transition: color var(--im-dur) var(--im-ease), text-decoration-color var(--im-dur) var(--im-ease); }
/* 業主 2026-09-11：頁尾整區的 hover 一律用集團粉。
   理由：頁尾是集團的地盤，而且「10 大學院」那一欄如果跟著本院主色走，
   會變成「用微刺青的金色去標其他 9 個學院」，語意不對，
   10 院各自換色也會讓 C 線多一層麻煩。一律粉色，一條規則解決。 */
.im-footer__col a:hover,
.im-footer__col a:focus-visible { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

.im-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--im-s-4) var(--im-s-7);
  padding-block-start: var(--im-s-6);
  border-block-start: 1px solid color-mix(in oklab, var(--im-footer-text) 16%, transparent);
  font-size: var(--im-fs-xs);
  line-height: 1.9;
}
.im-footer__trust { font-size: var(--im-fs-xs); color: #FFFFFF; font-weight: var(--im-fw-medium); opacity: 1; }
.im-footer__trust li::before { background: var(--im-group); }
.im-footer__copy { color: #FFFFFF; font-size: var(--im-fs-xs); font-weight: var(--im-fw-medium); opacity: 1; }
.im-footer__social { display: flex; gap: var(--im-s-3); }
.im-footer__social a {
  width: 1.9rem; height: 1.9rem;
  display: grid; place-content: center;
  border: 1px solid color-mix(in oklab, var(--im-footer-text) 35%, transparent);
  border-radius: 50%;
  color: #FFFFFF;
  opacity: 1;
}
.im-footer__social a:hover,
.im-footer__social a:focus-visible { color: #FFFFFF; border-color: #FFFFFF; outline: 2px solid var(--im-group); outline-offset: 3px; }
.im-footer__social svg { width: 13px; height: 13px; }


/* ==========================================================================
   L5之2　全站層級（集團）：導覽列、互動色、按鈕、標題、學院標籤、頁尾（2026-09-22 收編）
   --------------------------------------------------------------------------
   來源：實作 B2 在 site-home.html、site-courses.html 各複製一份的 TODO 樣式，原樣收進來。
   全站頁（總首頁、6 個全站彙整頁）最外層加 .im-site，不掛 data-academy：
       <div class="im-academy is-dark im-site" id="imRoot">
   .im-site 做兩件事：互動色（滑過、目前所在、底線、鍵盤焦點）一律集團粉；懸浮按鈕自動變集團粉。
   學院頁不要加 .im-site —— 學院頁的互動色是學院色。

   改名對照（B2 刪掉自己那份時要一起換）：
     .sh-title → .im-linetitle　　.sh-acadtag(--line) → .im-acadtag(--line)
     .sh-footer4 → .im-footer__grid--4
   ========================================================================== */

/* ---- 互動色：集團粉 ------------------------------------------------------
   業主 2026-09-22：「底線跟 hover 顏色跟圖片中的黃色不一樣，應該要用我們品牌的粉色」。
   只換互動狀態；數字、標語等設計稿上的金色裝飾不動。
   --im-group-ink 在淺色段會自動壓深（L2），淺色帶裡照樣讀得到。 */
.im-site .im-nav__link:hover,
.im-site .im-nav__link[aria-current],
.im-site .im-snav__toggle:hover,
.im-site .im-link:hover,
.im-site .im-crumb a:hover { color: var(--im-group-ink); }
.im-site .im-nav__link::after { background: var(--im-group-ink); }
.im-site .im-btn--outline:hover,
.im-site .im-more:hover { border-color: var(--im-group-ink); color: var(--im-group-ink); }
.im-site :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--im-group-ink); }
.im-site .im-search__input:focus-visible { border-color: var(--im-group-ink); }

/* 懸浮按鈕（L4之4）在全站頁自動換集團粉，不用另外加 .im-float--group */
.im-academy.im-site .im-float {      /* 要蓋過 L4之4 的 .im-academy.is-dark .im-float，所以寫兩個 class */
  --im-float-cta-bg : var(--im-group);
  --im-float-cta-fg : #1A0E14;
}

/* ---- 集團粉按鈕：全站頁的 CTA（.im-btn--brand 吃的是學院色）----------- */
.im-btn--group { background: var(--im-group); border-color: var(--im-group); color: #1A0E14; }
.im-academy.is-dark .im-btn--group { color: #1A0E14; }
.im-btn--group:hover {
  background: color-mix(in oklab, var(--im-group) 84%, #FFFFFF 16%);
  border-color: color-mix(in oklab, var(--im-group) 84%, #FFFFFF 16%);
  color: #1A0E14;
}

/* ---- 全站導覽列 .im-snav（掛在 .im-nav 上：<header class="im-nav im-snav">）--
   業主 2026-09-21 定案（07_ 第 5 節）：
     > 1200px 平鋪 10 學院｜900～1200px 收成「學院 ▾」｜≤ 900px 漢堡（10 學院＋6 彙整頁＋關於／聯絡）
   只沿用 .im-nav 的外殼、字級、間距；選單另寫 .im-snav__*，
   避開 .im-nav__menu 在 1000px 就變抽屜的規則（跟這裡要的 900px 對不上）。
   開合靠頁面上的 .im-snav 腳本（在 site-home.html，實作 C 要保留）。 */
.im-snav__menu { display: flex; align-items: center; margin-inline-start: auto; min-width: 0; }
.im-snav__list { display: flex; align-items: center; gap: clamp(var(--im-s-3), 1.2vw, var(--im-s-5)); }
.im-snav__list .im-nav__link { font-size: var(--im-fs-xs); }
.im-snav__acad { position: relative; }
.im-snav__toggle { display: none; }
.im-snav__extra { display: none; }
.im-snav .im-nav__burger { display: none; }

/* ---- 區塊標題：中文標題 ＋ 右邊一條短線（全站頁，沒有英文小標）--------- */
.im-linetitle {
  display: flex; align-items: center; gap: var(--im-s-4); white-space: nowrap;
  font-size: var(--im-fs-xl);
  letter-spacing: 0.22em;
}
.im-linetitle::after { content: ""; width: 2.25rem; height: 1px; background: var(--im-brand-ink); flex: none; }

/* ---- 學院標籤：卡片上吃「該篇的學院色」----------------------------------
   .im-tag 的顏色是在根元素算好的，子元素改 --im-brand 不會重算，所以在標籤上就地算。
   用法：<span class="im-tag im-acadtag" style="--im-brand:#694012">美甲學院</span>
   （進 WordPress 後 --im-brand 由該篇所屬學院吐出來）。方角色塊，不是膠囊。 */
.im-acadtag {
  align-self: flex-start;
  background: color-mix(in oklab, var(--im-brand) 62%, #000000 38%);
  color: #FFFFFF;
  border-radius: var(--im-radius-sm);
  font-family: var(--im-font-serif);
  letter-spacing: 0.12em;
}
.im-acadtag--line {
  background: transparent;
  border: var(--im-hairline) solid color-mix(in oklab, var(--im-brand) 80%, #FFF0D4 20%);
  color: color-mix(in oklab, var(--im-brand) 70%, #FFF0D4 30%);
}

/* ---- 頁尾四欄：全站頁多一欄「探索伊美」（6 個彙整頁）------------------- */
.im-footer__grid.im-footer__grid--4 {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
}


/* ==========================================================================
   L6　變體
   --------------------------------------------------------------------------
   六個區塊在兩版的排法不同。這裡是「唯一」需要顧兩種寫法的地方，
   L5 以上（結構、間距、字級、元件）全部共用，改一次兩版同時生效。

     V1  Hero          雜誌式        ↔  全幅情境式
     V2  成果作品       左右分欄      ↔  上下橫列
     V3  專業師資       四位等寬      ↔  一大三小
     V4  近期開課       三欄圓角盒    ↔  金色時間軸
     V5  產業新知       左大右兩小    ↔  三張橫排
     V6  常見問題       兩欄          ↔  一欄

   S2 最新活動不在此列 —— 它不是變體，是筆數自適應（見 L5）。
   ========================================================================== */


/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 淺色版：雜誌編排 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */

/* 淺色版的區塊標題不是一律置中，而是雜誌式的不對稱節奏。
   每一區自己指定，覆蓋 --im-align 這個預設值。 */
.im-academy.is-light .im-courses  { --im-head-align: left; }
.im-academy.is-light .im-results  { --im-head-align: left; }
.im-academy.is-light .im-adv-sec  { --im-head-align: center; }
.im-academy.is-light .im-adv-sec .im-head { flex-direction: column; align-items: center; }
.im-academy.is-light .im-adv-sec .im-head__main { align-items: center; }
.im-academy.is-light .im-inst-sec { --im-head-align: right; }
.im-academy.is-light .im-sched    { --im-head-align: left; }
.im-academy.is-light .im-insights { --im-head-align: center; }
.im-academy.is-light .im-faq      { --im-head-align: center; }
.im-academy.is-light .im-form     { --im-head-align: left; }

/* ---- V1 Hero｜雜誌式：大字 EMEDU ＋ VOL.01 情境卡 --------------------- */
/* 業主 2026-09-11：Hero 版面兩版統一，以淺色版的雜誌式為準。
   深色版保留的只有「背景光束」與顏色 —— 那是背景效果，不是版面。
   → 這一版之後，兩版之間沒有任何版面差異，變體歸零。 */
.im-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(var(--im-s-7), 4vw, var(--im-s-10));
  align-items: start;
  padding-block: clamp(var(--im-s-6), 3vw, var(--im-s-9)) var(--im-section-gap);
}
/* 院代碼＝雜誌刊頭大字，在最上面、負邊距頂出左側細線。兩版相同。 */
.im-hero__code {
  font-size: var(--im-fs-display);
  letter-spacing: 0.01em;
  line-height: .86;
  /* 純裝飾大字，不受對比限制 → 提高主色比例，讓 #DAA520 真的看得出來 */
  color: color-mix(in oklab, var(--im-brand) 82%, var(--im-bg) 18%);
  margin-inline-start: calc(var(--im-s-6) * -1);
  margin-block-end: clamp(var(--im-s-4), 2vw, var(--im-s-7));
}
.im-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--im-s-5);
  padding-inline-start: var(--im-s-6);
  border-inline-start: 1px solid var(--im-line-strong);
}

.im-academy.is-light .im-hero__title { letter-spacing: 0.08em; }

/* 右側：雜誌封面卡 */
.im-hero__cover { position: relative; }
.im-hero__cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  background: var(--im-surface);
  box-shadow: var(--im-shadow-lg);
  min-height: clamp(18rem, 32vw, 27rem);
}
/* 黑底上看不見陰影，改用品牌色細框撐出卡片感 */
.im-academy.is-dark .im-hero__cover {
  box-shadow: none;
  border: 1px solid color-mix(in oklab, var(--im-brand) 42%, transparent);
}



.im-hero__cover .im-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.im-hero__vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--im-s-6);
  writing-mode: vertical-rl;
  font-family: var(--im-font-en);
  font-size: var(--im-fs-3xs);
  letter-spacing: var(--im-ls-widest);
  color: var(--im-text-muted);
  background: var(--im-surface-2);
}


/* ---- V2 成果作品｜左右分欄（案例｜直排標題｜作品格） ------------------ */
.im-results .im-head--stack { align-items: flex-start; }
.im-results__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  gap: clamp(var(--im-s-6), 3vw, var(--im-s-9));
  align-items: start;
}
.im-results__spine {
  display: block;
  align-self: stretch;
  text-align: center;
  padding-block-start: var(--im-s-4);
}
.im-results__spine span {
  /* 直排標題不用 writing-mode：Google Fonts 的中文 woff2 沒有直排度量，
     用 writing-mode 會讓字疊在一起。改用「一字一行」的老作法，穩。 */
  display: block;
  width: 1em;
  margin: var(--im-s-5) auto 0;
  word-break: break-all;
  line-height: 1.42;
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-xl);
  color: var(--im-text-strong);
}
.im-results__spine::before {
  content: "";
  display: block;
  width: 1px; height: 3rem;
  margin-inline: auto;
  background: var(--im-brand-ink);
}
.im-results__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-results__gallery .im-media { --im-ratio: 1 / 1; }
/* 業主 2026-09-07：「成果作品」四個字只出現一次。
   上方那組只留英文小標，中文大標交給中間那條直排字。兩版一致。 */
.im-results > .im-wrap > .im-head .im-title { display: none; }
/* 學員引言：兩版都顯示 —— 整頁最有說服力的一句話 */
.im-results__right { display: flex; flex-direction: column; gap: var(--im-s-4); }

/* ---- V3 專業師資｜四位等寬橫排（標題靠右） --------------------------- */
.im-inst__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 0.8fr);
  gap: clamp(var(--im-s-6), 3vw, var(--im-s-9));
  align-items: center;
}
.im-inst__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--im-s-4);
  align-items: start;
}
.im-academy.is-light .im-inst__info { text-align: center; }
.im-academy.is-light .im-inst-sec .im-head { justify-content: flex-end; }
.im-academy.is-light .im-inst-sec .im-head__main { align-items: flex-end; }

/* ---- V4 近期開課｜三欄圓角盒 ------------------------------------------ */
/* 兩版共用：標題在左、金色時間軸在中、出口在右，整組裝在圓角面板裡 */
.im-sched__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 3fr) auto;
  align-items: center;
  gap: clamp(var(--im-s-5), 3vw, var(--im-s-8));
  padding: clamp(var(--im-s-6), 3vw, var(--im-s-8));
  background: var(--im-surface-2);
  border-radius: var(--im-radius-lg);
}
.im-sched__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--im-s-6);
}
.im-sched__heading {
  font-family: var(--im-font-serif);
  font-size: var(--im-fs-lg);
  letter-spacing: var(--im-ls-wide);
  color: var(--im-text-strong);
}

/* ---- V5 產業新知｜左大右兩小 ＋ 輪播箭頭 ------------------------------ */
.im-insights__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(var(--im-s-4), 2.5vw, var(--im-s-7));
  align-items: center;
}
.im-insights__layout > .im-head { grid-column: 1 / -1; }
.im-insights__side {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;          /* 兩列等高，右欄總高＝左邊頭條的高度 */
  gap: var(--im-s-5) clamp(var(--im-s-4), 2.5vw, var(--im-s-7));
  align-items: stretch;
}
.im-insight--lead { grid-row: 1 / 3; }
/* 英文小標兩版都顯示 */
.im-insight--lead {
  position: relative;
  justify-content: flex-end;
  min-height: clamp(15rem, 26vw, 21rem);
  padding: var(--im-s-7);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--im-card-radius);
}
.im-insight--lead .im-media--ph::before { opacity: .9; }
.im-insight--lead::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 30%, rgba(16,12,8,.86) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--im-brand) 22%, #2C2318), #171208);
}
.im-insight--lead .im-insight__title { font-size: var(--im-fs-xl); color: #F6F1E8; letter-spacing: 0.04em; }
.im-insight--lead .im-insight__desc { color: #C4BAAB; }
.im-insight--lead .im-insight__cat,
.im-insight--lead .im-insight__sub,
.im-insight--lead .im-link { color: #E5D8BF; }
/* 業主 2026-09-07：圖與文字等高、上下切齊。
   → 卡片撐滿格線列高，圖片跟著拉伸，文字用 space-between 把首尾頂到上下邊；
     標題與摘要各限一行（超出用「…」），高度才固定得住。 */
.im-insight--row {
  flex-direction: row;
  gap: var(--im-s-5);
  align-items: stretch;
  height: 100%;
}
.im-insight--row > .im-media {
  flex: none;
  align-self: stretch;
  width: clamp(6rem, 10vw, 8.5rem);
  height: auto;
  aspect-ratio: auto;
}
.im-insight--row .im-insight__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--im-s-2);
  min-width: 0;
  padding-block: 2px;
}
.im-insight--row .im-insight__title,
.im-insight--row .im-insight__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-insight--row .im-insight__link,
.im-insight--row .im-link { margin-block-start: 0; }
/* 輪播箭頭兩版都有（深色版設計稿右側本來就有一個）*/

/* ---- V6 常見問題｜兩欄 ------------------------------------------------- */
.im-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-faq__inner {
  padding: clamp(var(--im-s-6), 3vw, var(--im-s-8)) clamp(var(--im-s-6), 4vw, var(--im-s-10));
  background: var(--im-surface-2);
  border-radius: var(--im-radius-lg);
}

/* ---- 淺色版的表單區 ----------------------------------------------------- */
.im-academy.is-light .im-form__inner {
  padding: clamp(var(--im-s-7), 4vw, var(--im-s-10)) clamp(var(--im-s-6), 4vw, var(--im-s-10));
  background: var(--im-surface-2);
  border-radius: var(--im-radius-lg);
}


/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 深色版：緊湊左靠 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */

/* 深色版所有標題一律靠左，不做不對稱節奏 */
.im-academy.is-dark .im-section { --im-head-align: left; }

/* 深色版的標題組是「大標在上、出口在下」的左欄式，不是左右分置 */
.im-academy.is-dark .im-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--im-s-2);
}
.im-academy.is-dark .im-head--split { flex-direction: row; align-items: center; justify-content: space-between; }

/* ---- V1 Hero｜全幅情境式：滿版底圖 ＋ 光束 ----------------------------- */
.im-academy.is-dark .im-hero {
  background:
    radial-gradient(120% 90% at 74% 4%, rgba(255,214,150,.16) 0%, transparent 46%),
    linear-gradient(196deg, #12100D 0%, #000000 58%);
}
/* 光束 */
.im-hero { position: relative; }
.im-academy.is-dark .im-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -14%;
  inset-inline-start: 32%;
  width: 30%;
  height: 128%;
  background: linear-gradient(178deg,
    color-mix(in oklab, var(--im-brand) 26%, transparent) 0%,
    color-mix(in oklab, var(--im-brand) 6%, transparent) 46%,
    transparent 78%);
  transform: rotate(9deg);
  filter: blur(26px);
  pointer-events: none;
}




/* meta（英文院名＋三校區）兩版都顯示 —— 那是資訊，不是裝飾 */
/* H1 底下的短線：改用學院色的細線，粉色移到別處（業主 2026-09-07）*/
.im-hero__rule {
  width: 2.5rem; height: 1px;
  background: var(--im-line-strong);
  margin-block: var(--im-s-1) var(--im-s-2);
}


/* 封面卡直排字兩版都有（版面已統一）*/
/* 粉色短線兩版都有 */

/* ---- V2 成果作品｜上下（案例橫幅 ／ 作品橫列） ------------------------ */






/* 案例標題：兩版都顯示 */


/* ---- V3 專業師資｜一大三小 -------------------------------------------- */
.im-academy.is-dark .im-inst__layout > .im-inst__list { order: 2; }
.im-academy.is-dark .im-inst__layout > .im-head { order: 1; }
.im-academy.is-light .im-inst__layout > .im-inst__list { order: 1; }
.im-academy.is-light .im-inst__layout > .im-head { order: 2; }
.im-academy.is-dark .im-inst__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 3fr);
  gap: clamp(var(--im-s-6), 3vw, var(--im-s-9));
  align-items: end;
}
/* 業主 2026-09-07：不要有一位師資被放大 —— 選圖會很不方便，
   而且 4 位講師本來就是平等的。兩版都是四位等寬。 */
.im-academy.is-dark .im-inst__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--im-s-4);
  align-items: start;
}
.im-academy.is-dark .im-inst__info { text-align: left; }

/* ---- V4 近期開課｜金色時間軸 ------------------------------------------ */

.im-sched__rail { position: relative; padding-block-start: var(--im-s-5); }
.im-sched__rail::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--im-brand) 70%, transparent) 6%,
    color-mix(in oklab, var(--im-brand) 70%, transparent) 94%,
    transparent 100%);
}
.im-sched__item { position: relative; }
.im-sched__item::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--im-s-5) * -1 - 3px);
  inset-inline-start: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--im-brand-ink);
}


/* ---- V5 產業新知｜三張橫排 -------------------------------------------- */




/* 深色版的圖不是消失，是變成卡片底圖 —— 同一個 .im-media，換一種用法 */
.im-insight--lead > .im-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.im-insight__sub {
  font-family: var(--im-font-en);
  font-size: var(--im-fs-3xs);
  letter-spacing: var(--im-ls-wide);
  color: var(--im-text-faint);
}

/* ---- V6 常見問題｜一欄 ------------------------------------------------- */
.im-faq { padding-block: var(--im-section-gap); }



/* ---- 深色版的表單區：暖金底 ------------------------------------------- */
.im-academy.is-dark .im-form {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--im-brand) 26%, #140F05) 0%, #0B0803 68%);
  padding-block: var(--im-section-gap);
  margin-block-start: 0;
}
/* 深色版原本是置中堆疊，2026-09-11 一併統一成跟淺色版相同的左右分欄。
   只留下暖金底這個「背景效果」。 */
.im-academy.is-dark .im-form .im-input,
.im-academy.is-dark .im-form .im-select,
.im-academy.is-dark .im-form .im-textarea {
  background: rgba(0,0,0,.32);
  border-color: color-mix(in oklab, var(--im-brand) 34%, transparent);
}


/* ==========================================================================
   L7　RWD
   斷點 1200 / 1000 / 900 / 640。變體在窄螢幕上收斂成同一種堆疊，兩版一致。

   ⚠ 這一層的「兩版共用」規則寫成 .im-academy.im-academy（同一個 class 重複一次），
     是為了跟 L6 的 .im-academy.is-light 同特異性 —— 媒體查詢不會加特異性，
     不重複的話 L6 蓋得過 L7，斷點就失效了。踩過一次，別改回去。
   ========================================================================== */

@media (max-width: 1200px) {
  .im-academy.im-academy .im-insights__arrow { display: none; }

  .im-academy.im-academy .im-inst__layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .im-academy.is-light .im-inst-sec .im-head { justify-content: space-between; }
  .im-academy.is-light .im-inst-sec .im-head__main { align-items: flex-start; }
  .im-academy.is-light .im-inst-sec { --im-head-align: left; }

}

@media (max-width: 1000px) {
  /* 行動版選單：漢堡鈕展開的抽屜（實作 C 要保留這段與對應的 JS） */
  .im-nav__menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--im-s-3) var(--im-gutter) var(--im-s-6);
    background: var(--im-surface);
    border-block-start: var(--im-hairline) solid var(--im-line);
    box-shadow: var(--im-shadow-lg);
    max-height: calc(100dvh - 4.25rem);
    overflow-y: auto;
  }
  .im-nav.is-open .im-nav__menu { display: flex; }
  .im-nav__menu .im-nav__link {
    padding-block: var(--im-s-4);
    border-block-end: var(--im-hairline) solid var(--im-line);
    font-size: var(--im-fs-sm);
  }
  .im-nav__link--home { padding-inline-end: 0; }
  .im-nav__link--home::before { display: none; }
  .im-nav__more { margin-block-start: var(--im-s-4); }
  .im-nav__more > summary { font-size: var(--im-fs-sm); }
  .im-nav__drop {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--im-s-3);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .im-nav__burger { display: grid; place-content: center; margin-inline-start: auto; }
  .im-nav.is-open .im-nav__burger span { background: transparent; }
  .im-nav.is-open .im-nav__burger span::before { transform: translateY(6px) rotate(45deg); }
  .im-nav.is-open .im-nav__burger span::after  { transform: translateY(-6px) rotate(-45deg); }
  .im-nav__inner { gap: var(--im-s-4); }
  .im-academy.im-academy .im-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .im-academy.is-light .im-hero__cover { min-height: 22rem; }
  .im-academy.is-dark  .im-hero__inner { gap: var(--im-s-8); }
  .im-academy.is-dark  .im-hero__cover { max-width: 22rem; }
  .im-results .im-head--stack { align-items: flex-start; }
.im-academy.im-academy .im-results__layout { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-results__spine { flex-direction: row; align-items: center; }
  .im-academy.im-academy .im-results__spine span { width: auto; word-break: normal; letter-spacing: var(--im-ls-wide); margin-block-start: 0; }
  .im-academy.im-academy .im-results__spine::before { width: 3rem; height: 1px; }
  

  .im-academy.im-academy .im-adv__grid { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-adv--lead { min-height: 15rem; }
  .im-academy.im-academy .im-adv__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-academy.im-academy .im-sched__layout { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-form__grid { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 頁尾三欄在平板會擠成一條一條的窄柱，收成兩欄 */
  .im-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-7); }
}

@media (max-width: 900px) {
  .im-academy.im-academy .im-events__list,
  .im-academy.im-academy .im-events__list[data-count="2"],
  .im-academy.im-academy .im-events__list[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-inst__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-academy.im-academy .im-insights__layout { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-insights__side { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .im-academy.im-academy .im-insight--lead { grid-row: auto; }
  .im-academy.im-academy .im-faq__list { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-sched__list { grid-template-columns: minmax(0, 1fr) !important; gap: var(--im-s-5); }
  .im-sched__rail::before { display: none; }
  .im-sched__item::before { inset-block-start: 0.5rem; inset-inline-start: -1rem; }
  .im-sched__rail { padding-inline-start: 1rem; padding-block-start: 0; border-inline-start: 1px solid color-mix(in oklab, var(--im-brand) 50%, transparent); }
}

@media (max-width: 640px) {
  .im-academy { --im-gutter: 1.25rem; }
  .im-academy.im-academy .im-courses__list { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-form__fields { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-head { flex-direction: column; align-items: flex-start; gap: var(--im-s-3); }
  .im-academy.im-academy .im-section { --im-head-align: left !important; }
  .im-academy.is-light .im-trust,
  .im-academy.is-light .im-head--stack .im-subtitle { margin-inline: 0; justify-content: flex-start; }
  .im-academy.im-academy .im-hero__cover { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-hero__vertical { display: none; }

  .im-academy.im-academy .im-adv__side { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-inst__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .im-academy.im-academy .im-event:only-child .im-event__title { letter-spacing: 0.1em; }
  .im-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--im-s-3); }
  .im-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .im-footer__list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-form__fields > .im-field--full { grid-column: 1 / -1; }
}



/* --------------------------------------------------------------------------
   2026-09-20 新增：L4之2／L4之3 列表頁元件的 RWD
   斷點沿用既有的 1200 / 1000 / 900 / 640，不另開新斷點。
   一樣用 .im-academy.im-academy 雙寫，理由見本層開頭的警告。
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  /* 分群列的三欄在這裡就開始擠了（左邊還佔掉一欄） */
  .im-academy.im-academy .im-grouprow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .im-academy.im-academy .im-grouprow__items { --im-cols: 2; }
}

@media (max-width: 1000px) {
  /* 頁首：右邊那張圖收到標題下面，變成一條橫幅 */
  .im-academy.im-academy .im-phead { grid-template-columns: minmax(0, 1fr); gap: var(--im-s-6); }
  .im-academy.im-academy .im-phead__main { padding-block-start: 0; }
  .im-academy.im-academy .im-phead__media { aspect-ratio: 21 / 9; }

  /* 置頂特色卡：左右改上下 */
  .im-academy.im-academy .im-feature { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-feature__media { aspect-ratio: 16 / 9; }
  .im-academy.im-academy .im-feature__body { padding: var(--im-s-6); }

  .im-academy.im-academy .im-grid { --im-cols: 2; }
  /* 平板上半寬卡改成整列 —— 兩欄放不下兩張 1.5 欄 */
  .im-academy.im-academy .im-grid__wide { grid-column: 1 / -1; }

  /* 全站頁首：拼貼收到標題下面 */
  .im-academy.im-academy .im-sitehead { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .im-academy.im-academy .im-sitehead__collage { aspect-ratio: 21 / 9; align-self: auto; }

  /* 本期精選：大的在上、兩張小的在下並排 */
  .im-academy.im-academy .im-pick { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-pick__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }

  /* 分群列：學院標籤卡移到上面整列，卡片在下面排三欄 */
  .im-academy.im-academy .im-grouprow { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-grouprow__items { --im-cols: 3; }
  .im-academy.im-academy .im-grouprow__aside {
    flex-direction: row; align-items: center; gap: var(--im-s-5);
  }
  .im-academy.im-academy .im-grouprow__desc { margin-block-end: 0; }
  .im-academy.im-academy .im-grouprow__more { margin-block-start: 0; margin-inline-start: auto; }

  /* 頁尾 CTA 的兩欄版：上下堆 */
  .im-academy.im-academy .im-ctabar--split { grid-template-columns: minmax(0, 1fr); gap: var(--im-s-6); }
}

@media (max-width: 900px) {
  /* 置頂特色卡右半那個「說明｜價格」的分隔線：改成上下，線也要換邊 */
  .im-academy.im-academy .im-feature__split { grid-template-columns: minmax(0, 1fr); gap: var(--im-s-5); }
  .im-academy.im-academy .im-feature__split > * + * {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--im-s-5);
    border-block-start: var(--im-hairline) solid var(--im-line);
  }
  .im-academy.im-academy .im-grouprow__items { --im-cols: 2; }
}

@media (max-width: 640px) {
  .im-academy.im-academy .im-grid { --im-cols: 1; }

  /* 橫式卡回到上下堆 */
  .im-academy.im-academy .im-card--row,
  .im-academy.im-academy .im-card--row-rev { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-card--row .im-media,
  .im-academy.im-academy .im-card--row-rev .im-media { order: 0; aspect-ratio: 16 / 9; height: auto; }

  /* 搜尋：按鈕掉到下面整條 */
  .im-academy.im-academy .im-search__row { grid-template-columns: minmax(0, 1fr); gap: var(--im-s-3); }
  .im-academy.im-academy .im-search__btn { padding-block: var(--im-s-4); }

  /* 本期精選：三張直堆 */
  .im-academy.im-academy .im-pick__side { grid-template-columns: minmax(0, 1fr); }
  .im-academy.im-academy .im-pickcard--lead { min-height: 13rem; }

  /* 分群列 → 橫向滑動輪播（設計稿手機版就是這樣）。
     這不是「隱藏內容」：卡片都在，使用者用手指滑。 */
  .im-academy.im-academy .im-grouprow__items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 讓卡片可以滑到貼齊版心邊緣，不要卡在 gutter 裡 */
    margin-inline: calc(var(--im-gutter) * -1);
    padding-inline: var(--im-gutter);
  }
  .im-academy.im-academy .im-grouprow__items::-webkit-scrollbar { display: none; }
  .im-academy.im-academy .im-grouprow__items > * {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .im-academy.im-academy .im-grouprow__aside { flex-wrap: wrap; padding: var(--im-s-4) 0; border: 0; background: transparent; }
  .im-academy.im-academy .im-grouprow__desc { display: none; }  /* 手機版標籤卡只留院名與出口 */

  /* CTA bar 直堆，按鈕整條 */
  .im-academy.im-academy .im-ctabar { flex-direction: column; align-items: flex-start; gap: var(--im-s-5); padding: var(--im-s-6); }
  .im-academy.im-academy .im-ctabar__action { margin-inline-start: 0; width: 100%; }
  .im-academy.im-academy .im-ctabar__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-4); }
}


/* --------------------------------------------------------------------------
   2026-09-22 新增：L5之2 全站層級的 RWD（B2 原樣收編）
   全站導覽列用 1200／900 兩個斷點（業主定案），跟學院導覽列的 1000 不同，是故意的。
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* 導覽列：10 學院收成「學院 ▾」 */
  .im-snav__toggle {
    display: flex; align-items: center; gap: var(--im-s-2);
    font-size: var(--im-fs-sm); color: var(--im-text); white-space: nowrap; padding-block: var(--im-s-2);
  }
  .im-snav__toggle::after {
    content: ""; width: 5px; height: 5px;
    border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform var(--im-dur) var(--im-ease);
  }
  .im-snav__acad.is-open .im-snav__toggle::after { transform: translateY(1px) rotate(-135deg); }
  .im-snav__list {
    display: none;
    position: absolute; inset-inline-end: 0; top: calc(100% + var(--im-s-3)); z-index: 5;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: var(--im-s-1) var(--im-s-4);
    padding: var(--im-s-4) var(--im-s-5);
    background: var(--im-surface); border: var(--im-hairline) solid var(--im-line);
    border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg);
  }
  .im-snav__acad.is-open .im-snav__list { display: grid; }
  .im-snav__menu { margin-inline-end: var(--im-s-2); }
}

@media (max-width: 1000px) {
  .im-footer__grid.im-footer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 導覽列：漢堡。抽屜裡列 10 學院＋6 彙整頁＋關於／聯絡 */
  .im-snav .im-nav__burger { display: grid; place-content: center; }
  .im-snav .im-nav__cta { margin-inline-start: auto; }   /* 順序：品牌｜……｜免費了解｜漢堡 */
  .im-snav.is-open .im-nav__burger span { background: transparent; }
  .im-snav.is-open .im-nav__burger span::before { transform: translateY(6px) rotate(45deg); }
  .im-snav.is-open .im-nav__burger span::after  { transform: translateY(-6px) rotate(-45deg); }
  .im-snav__menu {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--im-s-5);
    margin: 0; padding: var(--im-s-5) var(--im-gutter) var(--im-s-7);
    background: var(--im-surface); border-block-start: var(--im-hairline) solid var(--im-line);
    box-shadow: var(--im-shadow-lg);
    max-height: calc(100dvh - 4.25rem); overflow-y: auto;
  }
  .im-snav.is-open .im-snav__menu { display: flex; }
  .im-snav__toggle { display: none; }
  .im-snav__list,
  .im-snav__acad.is-open .im-snav__list {
    display: grid; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--im-s-5);
    padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  .im-snav__list .im-nav__link,
  .im-snav__extra .im-nav__link { display: block; padding-block: var(--im-s-3); border-block-end: var(--im-hairline) solid var(--im-line); font-size: var(--im-fs-sm); }
  .im-snav__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--im-s-5); }
  .im-snav__label { grid-column: 1 / -1; }
  .im-snav__label,
  .im-snav__acad::before {
    font-family: var(--im-font-en); font-size: var(--im-fs-3xs); letter-spacing: var(--im-ls-wide);
    text-transform: uppercase; color: var(--im-brand-ink);
  }
  .im-snav__acad::before { content: "Academies"; display: block; margin-block-end: var(--im-s-2); }
}

@media (max-width: 640px) {
  .im-footer__grid.im-footer__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .im-snav .im-nav__cta { padding-inline: var(--im-s-4); }
}


/* --------------------------------------------------------------------------
   2026-09-22 新增：L4之4 懸浮按鈕 ＋ 免費了解視窗的 RWD
   規則照本層開頭：兩版共用寫 .im-academy.im-academy
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 懸浮按鈕 → 底部整條。.im-float 在文件流裡墊出同樣高度，頁尾不會被蓋住 */
  .im-academy.im-academy .im-float {
    height: calc(var(--im-float-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .im-academy.im-academy .im-float__stack {
    inset-block-end: calc(var(--im-float-bar-h) + env(safe-area-inset-bottom, 0px) + var(--im-s-3));
    inset-inline-end: var(--im-s-4);
  }
  .im-academy.im-academy .im-float__stack .im-float__line,
  .im-academy.im-academy .im-float__stack .im-float__cta { display: none; }   /* 搬到長條裡 */
  .im-academy.im-academy .im-float__top { width: 2.75rem; height: 2.75rem; }

  .im-academy.im-academy .im-float__bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--im-z-float);
    display: flex;
    align-items: stretch;
    gap: var(--im-s-2);
    padding: var(--im-s-2) var(--im-s-3);
    padding-block-end: calc(var(--im-s-2) + env(safe-area-inset-bottom, 0px));
    height: calc(var(--im-float-bar-h) + env(safe-area-inset-bottom, 0px));
    background: var(--im-surface);
    border-block-start: var(--im-hairline) solid var(--im-line);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .35);
  }
  .im-academy.im-academy .im-float__bar .im-float__line {
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--im-radius);
    box-shadow: none;
  }
  .im-academy.im-academy .im-float__bar .im-float__cta {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border-radius: var(--im-radius);
    box-shadow: none;
  }
  .im-academy.im-academy .im-float__bar .im-float__icon:hover,
  .im-academy.im-academy .im-float__bar .im-float__cta:hover { transform: none; }

  /* 視窗 → 全螢幕 */
  .im-academy.im-academy .im-modal { padding: 0; place-items: stretch; }
  .im-academy.im-academy .im-modal__panel {
    max-width: none;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .im-academy.im-academy .im-modal__head {
    padding: var(--im-s-4) var(--im-s-4) var(--im-s-4) var(--im-s-5);
    padding-block-start: calc(var(--im-s-4) + env(safe-area-inset-top, 0px));
  }
  .im-academy.im-academy .im-modal__body {
    padding: var(--im-s-3) var(--im-s-3) calc(var(--im-s-4) + env(safe-area-inset-bottom, 0px));
  }
}


/* ==========================================================================
   預覽專用（實作 C 搬進 WordPress 時整段刪除）
   ========================================================================== */
.im-devbar {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;   /* 2026-09-22 從右下搬到左下：右下讓給懸浮按鈕 */
  z-index: 999;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #1B1917;
  color: #F5F1ED;
  border-radius: 999px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.6);
  font: 500 12px/1 "Noto Sans TC", sans-serif;
}
.im-devbar button {
  padding: .4rem .75rem;
  border-radius: 999px;
  color: #A79F94;
  transition: background-color .2s, color .2s;
}
.im-devbar button[aria-pressed="true"] { background: #F5F1ED; color: #1B1917; }
.im-devbar span { opacity: .5; padding-inline-end: .25rem; }
@media (max-width: 640px) {
  .im-devbar { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }   /* 讓出手機長條 */
}

/* 2026-10-04 Codex／L5：手機頁尾與本學院社群；甲版保留立案資訊。 */
.im-footer--site .im-footer__fold > summary { color:#fff; font-size:16px; font-weight:700; letter-spacing:.14em; cursor:pointer; }
.im-footer--site .im-footer__fold[open] > summary { margin-bottom:12px; }
.im-footer--site .im-footer__license { font-size:14px; color:#fff; opacity:1; line-height:1.8; }
.im-footer--site .im-footer__registration { font-size:14px; color:#fff; text-decoration:underline; }
.im-float__social { font:700 14px/1 var(--im-font-en); color:#fff; flex:none; }
.im-float__stack { max-block-size:calc(100dvh - 32px); }
@media (min-width:641px) { .im-footer--site .im-footer__fold > summary { list-style:none; } .im-footer--site .im-footer__fold > summary::-webkit-details-marker { display:none; } }
@media (max-width:640px) {
  .im-footer--site { padding-block:24px; }
  .im-footer--site .im-footer__top { gap:12px; flex-wrap:wrap; }
  .im-footer--site .im-footer__back { padding:8px 12px; font-size:14px; }
  .im-footer--site .im-footer__grid--3 { gap:16px; margin-block:20px; }
  .im-footer--site .im-footer__col--campus { order:-1; }
  .im-footer--site .im-footer__campus { margin-block-end:12px; }
  .im-footer--site .im-footer__campusname { font-size:14px; }
  .im-footer--site .im-footer__trust { display:none; }
  .im-footer--site .im-footer__copy { font-size:14px; line-height:1.7; }
  .im-academy.im-academy .im-float__stack .im-float__social { display:none; }
  .im-academy.im-academy .im-float__bar .im-float__social { width:44px; height:44px; border-radius:8px; }
  .im-academy.im-academy .im-float__bar .im-float__line { width:44px; flex:none; }
  .im-academy.im-academy .im-float__bar { gap:8px; height:auto; min-height:64px; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
  .im-academy.im-academy .im-float { --im-float-bar-h:64px; }
  .im-academy.im-academy .im-float__bar .im-float__cta { padding-inline:12px; font-size:14px; }
}

/* 業主修訂：三欄標題一致、校區社群跟在校區名稱旁。 */
.im-footer--site .im-footer__col h3,
.im-footer--site .im-footer__fold > summary { padding-block-end:12px; margin-block:0 16px; border-block-end:1px solid rgba(255,255,255,.18); line-height:1.8; }
.im-footer--site .im-footer__fold[open] > summary { margin-bottom:16px; }
.im-footer--site .im-footer__campushead { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.im-footer--site .im-footer__campussocial { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.im-footer--site .im-footer__campussocial svg { width:18px; height:18px; }
@media(max-width:640px) { .im-footer--site .im-footer__campussocial { width:44px; height:44px; } }

/* 連續派工29：全站外框與列表閱讀下限；缺图改用文字。 */
.im-academy{--im-fs-xs:14px}
.im-academy .im-footer__mark,.im-academy .im-nav__code{font-size:14px}
.im-academy .im-nav__drop a{font-size:14px}

.im-academy .im-crumb,.im-academy .im-crumb *{font-size:14px}
.im-skip-link{position:absolute;left:12px;top:0;transform:translateY(-150%);background:#080808;color:#fff;font-size:16px;z-index:9999;padding:12px}.im-skip-link:focus{transform:none}
@media(max-width:750px){.im-site-archive--course .im-list-group{grid-template-columns:1fr}}

.im-academy .im-review-brand{display:table;color:#eb6da5;background:#080808;padding:5px 10px;font-size:16px;font-weight:700}


/* 原生頁首略過導覽連結：平時隱藏，鍵盤焦點顯示。 */
.skip-link.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link.screen-reader-text:focus{left:16px;top:16px;width:auto;height:auto;z-index:10000;padding:12px;background:#fff;color:#111}

/* 第36件：所有頁型使用同一套聯絡元件，桌機留出側欄避免覆蓋內容。 */
/* 2026-10-05 首頁線：拿掉 body 右側 88px 預留（會讓整頁內容偏左、不置中）；懸浮按鈕改由各頁避讓。 */
@media(min-width:1001px){.im-float{right:16px}.im-float a,.im-float button{max-width:56px}}
.im-nav__code{font-size:14px!important}.im-snav__academies{font-size:14px}.im-general{background:#080808;color:#fff;font-size:16px;line-height:1.8;min-height:60vh;padding:40px 0}.im-general .im-wrap{max-width:1100px}.im-general h1{font-size:clamp(32px,4vw,52px)}.im-general h2{font-size:28px;margin-top:32px}.im-general p,.im-general li{font-size:16px}.im-general a{color:#eb6da5}.im-general .im-review-brand{color:#eb6da5}.im-general button,.im-general input{font:16px sans-serif;padding:12px}.im-general input{max-width:100%;background:#fff;color:#111}.im-general .im-result-list{display:grid;gap:20px;list-style:none;padding:0}.im-general article{border:1px solid #9a8061;padding:20px}.im-general .im-empty{color:#fff}


/* 2026-10-05 首頁線：頁尾連結滑過一律白色＋底線（業主：不可變暗），按鈕滑過用品牌粉紅框與字。 */
.im-footer a:hover,.im-footer a:focus-visible{color:#FFFFFF;opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.im-footer .im-footer__back:hover,.im-footer .im-footer__back:focus-visible{color:#eb6da5;border-color:#eb6da5;background:transparent}

/* 2026-10-05 首頁線：懸浮按鈕每一顆一樣大（業主：免費了解不可以比較大，只用品牌粉紅區分）。
   桌機與手機都是同一排直立圓鈕：同直徑、同圖示大小、同間距；手機不再用底部長條（長條裡免費了解會被拉寬）。 */
.im-float__stack { gap: 10px; }
.im-float__stack .im-float__icon,
.im-float__stack .im-float__cta { width: 3rem; height: 3rem; min-height: 3rem; padding: 0; flex: none; }
.im-float__stack .im-float__icon svg,
.im-float__stack .im-float__cta svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 640px) {
  .im-academy.im-academy .im-float { height: 0; }
  .im-academy.im-academy .im-float__bar { display: none; }
  .im-academy.im-academy .im-float__stack { inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 12px; gap: 8px; }
  .im-academy.im-academy .im-float__stack .im-float__line,
  .im-academy.im-academy .im-float__stack .im-float__cta,
  .im-academy.im-academy .im-float__stack .im-float__social { display: grid; }
  .im-academy.im-academy .im-float__stack .im-float__icon,
  .im-academy.im-academy .im-float__stack .im-float__cta { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  .im-academy.im-academy .im-float__stack .im-float__cta::after { display: none; }
}

/* 2026-10-05：懸浮按鈕疊到 data-im-float-avoid 區塊時淡出（首頁十所學院那排），離開再出現 */
.im-float .im-float__stack { transition: opacity var(--im-dur) var(--im-ease), visibility var(--im-dur) var(--im-ease); }
.im-float.is-avoid .im-float__stack { opacity: 0; visibility: hidden; }

/* 2026-10-05 總控暫定（業主可改）：造型學院學院色是純黑 #000000，放在深底上看不到，
   深色版的「可讀學院色」用米白 #E3D9CD（與上方 @supports 區原有規則、im-course.css 同一個值），按鈕上的字用深色。 */
.im-academy.is-dark[data-academy="emstylist"],
.im-home [data-academy="emstylist"] { --im-brand-ink: #E3D9CD; --im-on-brand: #14100A; }
/* 2026-10-05：「跳到主要內容」聚焦時要有看得到的框 */
.skip-link.screen-reader-text:focus { outline: 2px solid #eb6da5; outline-offset: 2px; }

/* 2026-10-05（總控採乙線建議）：視窗 641～1432px（筆電）懸浮鈕改 44px、離右邊 4px，
   整排落在側邊距 --im-gutter（56px）裡、不壓內容，所以這個寬度不需要淡出；1432px 以上維持 48px。
   首頁十院那排是貼邊滿版，仍用 data-im-float-avoid 淡出。
   2026-10-12（內容 1440、桌機側邊距 40px）門檻重算：48px＋離右 24px 要右側留白 ≥ 80（視窗 ≥ 1600）；
   44px＋離右 4px 要留白 ≥ 56（視窗 ≥ 1552）。所以 641～1599px 用 44px；751～1551px 會壓到內容右緣最多 8px（同手機做法）。 */
@media (min-width: 641px) and (max-width: 1599px) {
  .im-float__stack { inset-inline-end: 4px; gap: 8px; }
  .im-float__stack .im-float__icon,
  .im-float__stack .im-float__cta { width: 44px; height: 44px; min-height: 44px; }
  .im-float__stack .im-float__icon svg,
  .im-float__stack .im-float__cta svg { width: 1.25rem; height: 1.25rem; }
}

/* 2026-10-06 業主：收成漢堡選單時，「免費了解」一律緊貼在漢堡左邊（各寬度、手機都一樣）。
   原本 .im-nav__burger 與 .im-nav__cta 兩邊都是 margin auto，空間被平分，按鈕跑到中間。 */
@media (max-width: 1000px) {
  .im-nav:not(.im-snav) .im-nav__brand { order: 0; }
  .im-nav:not(.im-snav) .im-nav__cta { order: 8; margin-inline-start: auto; }
  .im-nav:not(.im-snav) .im-nav__burger { order: 9; margin-inline-start: 0; }
}
@media (max-width: 900px) {
  .im-snav .im-nav__brand { order: 0; }
  .im-snav .im-nav__cta { order: 8; margin-inline-start: auto; }
  .im-snav .im-nav__burger { order: 9; margin-inline-start: 0; }
}

/* 2026-10-06 業主：全站導覽列 logo 下方英文「EMEDU」改品牌粉紅（學院頁英文代號先不動） */
.im-snav .im-nav__code { color: var(--im-group, #eb6da5); }

/* 2026-10-07 業主：懸浮鈕顏色跟版型走。淺色版學院頁（.im-float--light）用米白底深色圖示；「免費了解」粉紅不變。位置不變。 */
.im-float--light .im-float__stack .im-float__icon,
.im-float--light .im-float__bar .im-float__icon{background:#F5F1ED;color:#1D1915;border:1px solid rgba(29,25,21,.28);box-shadow:0 4px 14px rgba(29,25,21,.12)}
.im-float--light .im-float__stack .im-float__icon:hover{border-color:rgba(29,25,21,.6)}
.im-float--light .im-float__icon:focus-visible{outline:2px solid #1D1915;outline-offset:2px}

/* ═══ 2026-10-07 最新活動「時間軸」（業主定案；學院首頁、全站首頁共用，標記見 im-site/event-timeline.php）═══
   桌機：垂直編年軸——左大日期＋中文星期（英文小字）、中間細線與圓點（最近一場實心）、右側地點時間／標題／一句摘要、最右小圖。
   手機（≤750）：橫向月曆軸——大日期浮在橫線上、下面接活動卡，左右滑動。
   顏色用變數，由各頁指定：--evt-t 字、--evt-m 次要字、--evt-l 線、--evt-a 重點色。 */
.im-evt{--evt-t:var(--im-text-strong,#16120e);--evt-m:var(--im-text-muted,#5b5148);--evt-l:color-mix(in srgb,var(--evt-t) 22%,transparent);--evt-a:var(--im-brand-ink,#eb6da5);color:var(--evt-t)}
.im-evt__list{position:relative;margin:0;padding:0;list-style:none}
.im-evt__list::before{content:"";position:absolute;left:250px;top:8px;bottom:8px;width:1px;background:var(--evt-l)}
.im-evt__item{display:grid;grid-template-columns:220px 60px minmax(0,1fr) 280px;grid-template-areas:"date dot body ph";align-items:start;padding:28px 0;border-top:1px solid var(--evt-l)}
.im-evt__item:last-child{border-bottom:1px solid var(--evt-l)}
.im-evt__item:not(:has(.im-evt__ph)){grid-template-columns:220px 60px minmax(0,1fr)}
.im-evt__date{grid-area:date;text-align:right;padding-right:6px}
.im-evt__date time{display:block}
.im-evt__md{display:block;font:300 88px/1 var(--im-font-en,Montserrat,sans-serif);letter-spacing:-.02em;color:var(--evt-t)}
.im-evt__wk{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:12px}
.im-evt__wk b{font:600 18px/1 var(--im-font-serif,serif);letter-spacing:.12em;color:var(--evt-t)}
.im-evt__wk small{font:500 13px/1 var(--im-font-en,sans-serif);letter-spacing:.3em;color:var(--evt-m)}
.im-evt__dot{grid-area:dot;position:relative;align-self:stretch}
.im-evt__dot::before{content:"";position:absolute;left:24px;top:30px;width:13px;height:13px;border-radius:50%;background:var(--evt-bg,transparent);border:2px solid var(--evt-a);box-sizing:border-box}
.im-evt__item.is-next .im-evt__dot::before{background:var(--evt-a)}
.im-evt__body{grid-area:body;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px 32px 0 0;min-width:0}
.im-evt__meta{margin:0;font:500 14px/1.6 var(--im-font-sans,sans-serif);letter-spacing:.14em;color:var(--evt-m)}
.im-evt__title{margin:0;font:600 22px/1.45 var(--im-font-serif,serif);color:var(--evt-t)}
.im-evt__title a{color:inherit;text-decoration:none}
.im-evt__title a:hover{text-decoration:underline;text-underline-offset:4px}
.im-evt__sum{margin:0;font:400 16px/1.8 var(--im-font-sans,sans-serif);color:var(--evt-t)}
.im-evt__go{display:inline-flex;align-items:center;gap:12px;font:500 15px/1 var(--im-font-sans,sans-serif);letter-spacing:.14em;color:var(--evt-t);text-decoration:none}
.im-evt__go::after{content:"";width:28px;height:1px;background:var(--evt-a)}
.im-evt__ph{grid-area:ph;display:block;height:180px;overflow:hidden;border-radius:var(--evt-r,4px)}
.im-evt__ph>*,.im-evt__ph img{display:block;width:100%;height:100%;object-fit:cover}
.im-evt__empty{margin:0;padding:40px 0;border-top:1px solid var(--evt-l);border-bottom:1px solid var(--evt-l);font:400 17px/1.8 var(--im-font-sans,sans-serif);color:var(--evt-m)}
.im-evt__list:focus-visible{outline:2px solid var(--evt-a);outline-offset:6px}
@media(max-width:1100px) and (min-width:751px){
  .im-evt__list::before{left:180px}
  .im-evt__item{grid-template-columns:150px 60px minmax(0,1fr) 220px}
  .im-evt__item:not(:has(.im-evt__ph)){grid-template-columns:150px 60px minmax(0,1fr)}
  .im-evt__md{font-size:64px}.im-evt__ph{height:150px}
}
@media(max-width:750px){
  .im-evt__list{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 0 4px}
  .im-evt__list::-webkit-scrollbar{display:none}
  .im-evt__list::before{left:0;right:auto;top:92px;bottom:auto;height:1px;width:calc(var(--n,3) * (82% + 20px));min-width:100%}
  .im-evt__item,.im-evt__item:not(:has(.im-evt__ph)){flex:0 0 82%;display:flex;flex-direction:column;padding:0;border:0;scroll-snap-align:start}
  .im-evt__item:last-child{border:0}
  .im-evt__date{order:1;text-align:left;height:92px;display:flex;align-items:flex-end;padding:0 0 14px}
  .im-evt__date time{display:flex;align-items:flex-end;gap:12px}
  .im-evt__md{font-size:72px}
  .im-evt__wk{flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 6px}
  .im-evt__dot{order:2;height:22px}
  .im-evt__dot::before{left:2px;top:-6px}
  .im-evt__ph{order:3;height:200px}
  .im-evt__body{order:4;padding:16px 0 0}
  .im-evt__title{font-size:20px}.im-evt__sum{font-size:15px}
  .im-evt__empty{padding:28px 0;font-size:16px}
}
.im-evt__ph{width:100%;align-self:stretch}
.im-evt__ph>*{width:100%!important;height:100%!important}
/* 2026-10-07：時間軸英文星期 13px → 14px（全站字級下限） */
.im-evt__wk small{font-size:14px}

/* 2026-10-14 甲線（業主：時間軸日期排版跑掉）：日期回到原設計結構（大數字＋下方星期／範圍小字），第 88 件的 30px 小字取消。
   長期活動沒有 <time>，外層用 .im-evt__when，排法同 time（桌機上下、手機左右）。 */
.im-evt__date .im-evt__when{display:block}
.im-evt__wk b,.im-evt__wk small{white-space:nowrap}
@media(max-width:750px){.im-evt__date .im-evt__when{display:flex;align-items:flex-end;gap:12px}}

/* 2026-10-14 甲線（第90件，總控）：學院頁導覽列左上 Logo（外掛 academy-context.php 輸出；IM_LOGO_ATTACHMENT_ID＝0 時不輸出，這段不生效）。
   排法同全站導覽列：Logo 在左跨兩列，學院名與英文代號照原本上下排在右；桌機 38px、手機 32px，導覽列高度不變。 */
.im-nav:not(.im-snav) .im-nav__brand:has(.im-nav__logo){display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;justify-content:start}
.im-nav:not(.im-snav) .im-nav__brand:has(.im-nav__logo) .im-nav__logo{grid-row:1 / 3}
.im-nav:not(.im-snav) .im-nav__logo{display:flex;flex:none;height:38px;max-width:150px;align-items:center}
.im-nav:not(.im-snav) .im-nav__logo img{display:block;width:auto;height:38px;max-width:150px;object-fit:contain}
@media(max-width:750px){.im-nav:not(.im-snav) .im-nav__logo,.im-nav:not(.im-snav) .im-nav__logo img{height:32px;max-width:120px}}

/* 2026-10-14 甲線（總控小修）：學院頁手機導覽列放了 Logo 後，紋繡 390 的「EMMICROBLADING」把選單鈕擠出右緣（7px 橫向捲動），
   美容醫學、美業講師 360 院名斷兩行讓導覽列變高。手機：品牌區可縮、院名與代號不換行；最長的紋繡代號字距收小；374 以下「免費了解」左右內距收窄。 */
@media(max-width:750px){
  .im-nav:not(.im-snav) .im-nav__brand{flex:0 1 auto;min-width:0}
  .im-nav:not(.im-snav) .im-nav__name,.im-nav:not(.im-snav) .im-nav__code{white-space:nowrap}
  [data-academy="emmicroblading"] .im-nav:not(.im-snav) .im-nav__code{letter-spacing:.04em}
}
@media(max-width:374px){.im-nav:not(.im-snav) .im-nav__cta{padding-inline:12px}}

/* 2026-10-15 甲線（總控決定）：學院頁導覽列（外掛產生的 .im-nav，不含全站 .im-snav）漢堡選單切換點 1000 → 1100。
   1001～1100 寬時學院名＋選單＋「免費了解」＋Logo 放不下，「免費了解」超出右緣（紋繡最多 80px 橫向捲動）。
   這段照抄 1000 以下的選單抽屜規則，只作用在學院導覽列。 */
@media (min-width: 1001px) and (max-width: 1100px) {
  .im-nav:not(.im-snav) .im-nav__menu { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--im-s-3) var(--im-gutter) var(--im-s-6); background: var(--im-surface); border-block-start: var(--im-hairline) solid var(--im-line); box-shadow: var(--im-shadow-lg); max-height: calc(100dvh - 4.25rem); overflow-y: auto; }
  .im-nav.is-open:not(.im-snav) .im-nav__menu { display: flex; }
  .im-nav:not(.im-snav) .im-nav__menu .im-nav__link { padding-block: var(--im-s-4); border-block-end: var(--im-hairline) solid var(--im-line); font-size: var(--im-fs-sm); }
  .im-nav:not(.im-snav) .im-nav__link--home { padding-inline-end: 0; }
  .im-nav:not(.im-snav) .im-nav__link--home::before { display: none; }
  .im-nav:not(.im-snav) .im-nav__more { margin-block-start: var(--im-s-4); }
  .im-nav:not(.im-snav) .im-nav__more > summary { font-size: var(--im-fs-sm); }
  .im-nav:not(.im-snav) .im-nav__drop { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--im-s-3); padding: 0; background: transparent; border: 0; box-shadow: none; }
  .im-nav:not(.im-snav) .im-nav__burger { display: grid; place-content: center; order: 9; margin-inline-start: 0; }
  .im-nav.is-open:not(.im-snav) .im-nav__burger span { background: transparent; }
  .im-nav.is-open:not(.im-snav) .im-nav__burger span::before { transform: translateY(6px) rotate(45deg); }
  .im-nav.is-open:not(.im-snav) .im-nav__burger span::after  { transform: translateY(-6px) rotate(-45deg); }
  .im-nav:not(.im-snav) .im-nav__inner { gap: var(--im-s-4); }
  .im-nav:not(.im-snav) .im-nav__brand { order: 0; }
  .im-nav:not(.im-snav) .im-nav__cta { order: 8; margin-inline-start: auto; }
}

/* 2026-10-15 甲線（總控）：可滑列表放得下時隱藏箭頭（data-im-noscroll 由 patterns/site-float.php 的共用程式依實際寬度加上／拿掉）。
   權重刻意拉高，蓋過各頁「箭頭一律顯示」的 !important；捲到底才出現的「查看更多作品」按鈕不隱藏。 */
[data-im-noscroll][data-im-noscroll][data-im-noscroll][data-im-noscroll][data-im-noscroll][data-im-noscroll][data-im-noscroll] :is(.ah-nav,.story-nav,.im-cdir-nav,.im-res-nav:not(.is-more)){display:none!important}

/* R111: academy event list is vertical at every width; home remains untouched. */
.im-chub--events .im-evt__list{display:block;overflow:visible;padding:0}.im-chub--events .im-evt__list::before{left:250px;top:8px;bottom:8px;width:1px;height:auto;min-width:0}.im-chub--events .im-evt__item,.im-chub--events .im-evt__item:not(:has(.im-evt__ph)){display:grid;grid-template-columns:220px 60px minmax(0,1fr) 280px;grid-template-areas:"date dot body ph";padding:28px 0;border-top:1px solid var(--evt-l)}.im-chub--events .im-evt__date{height:auto;text-align:right;padding-right:6px;display:block}.im-chub--events .im-evt__dot{height:auto}.im-chub--events .im-evt__ph{height:180px}.im-chub--events .im-evt__body{padding:14px 32px 0 0}@media(max-width:750px){.im-chub--events .im-evt__list::before{left:82px;top:8px;bottom:8px}.im-chub--events .im-evt__item,.im-chub--events .im-evt__item:not(:has(.im-evt__ph)){grid-template-columns:64px 36px minmax(0,1fr);grid-template-areas:"date dot body" "ph ph ph";padding:22px 0}.im-chub--events .im-evt__item:not(:has(.im-evt__ph)){grid-template-areas:"date dot body"}.im-chub--events .im-evt__date{height:auto;display:block;padding:0;text-align:right}.im-chub--events .im-evt__md{font-size:34px}.im-chub--events .im-evt__wk{display:none}.im-chub--events .im-evt__dot{height:auto}.im-chub--events .im-evt__dot::before{left:14px;top:8px}.im-chub--events .im-evt__body{padding:0 0 0 8px}.im-chub--events .im-evt__ph{height:180px;margin-top:16px}.im-chub--events .im-evt__go{display:inline-flex}}

/* ═════════ 頁首照片框共用尺寸（業主 10/18「統一」：每個色系只有一種照片框，學院首頁、總覽頁、單篇三頁一致）。甲線 2026-10-18 ═════════
   深色：照片滿版，高＝--im-hero-media-h（手機 --im-hero-media-h-mobile），上面兩個變數已依 .im-academy.is-dark 給深色值。
   淺色：左欄 .42fr＋1px 線＋照片欄 1fr，照片高＝--im-hero-media-h；英文代號字級與右緣位置如下。三頁都讀這裡，改一處三頁一起變。
   （數值＝淺色學院首頁 10/18 線上實際生效的規則，搬來這裡共用，不改外觀。） */
.im-academy {
  --im-hx-cols       : minmax(0, .42fr) 1px minmax(0, 1fr);
  --im-hx-side       : max(var(--im-gutter, 40px), calc((100vw - var(--im-content, 1440px)) / 2));
  --im-hx-code-base  : min(190px, calc((var(--im-hero-media-h) - 140px) / 4.08));   /* 代號字級上限；實際字級＝min(base, span ÷ 字母數 --k)，--k 由各頁的代號元素自己帶 */
  --im-hx-code-span  : calc((58vw - 60px) / .78);
  --im-hx-code-right : calc(-1 * min(var(--im-hx-side) / 3, var(--im-hx-side) - 64px));
  --im-hx-code-mr    : -.06em;
  --im-hx-vtitle-max : clamp(72px, 7vw, 104px);   /* 淺色總覽頁直書標題（最新活動等）＝單篇原本「專業課程」直書的大小（業主 10/18）；實際＝min(max, 560px ÷ 字數 --n) */
  --im-hx-photo-mx   : 20px;   /* 手機照片左右留白 */
  /* 業主 10/19：淺色三頁幾何以學院首頁為準——左欄上下留白、照片下方那一行的距離（數值＝學院首頁現行） */
  --im-hx-pad-top    : 36px;   /* 照片上緣 → 眉標頂 */
  --im-hx-pad-bottom : 32px;   /* 直書大標底 → 照片下緣 */
  --im-hx-next-gap   : 44px;   /* 照片下緣 → 下一行（摘要／地區）文字頂 */
}
@media (min-width: 1600px) { .im-academy { --im-hx-code-right: calc(-1 * min(var(--im-hx-side) / 3, var(--im-hx-side) - 96px)); --im-hx-code-mr: -.12em; } }
@media (min-width: 751px) and (max-width: 1100px) { .im-academy { --im-hx-code-right: 24px; } }
@media (max-width: 750px) {
  .im-academy {
    --im-hx-code-base  : calc((100vw - 40px) / 4.24);
    --im-hx-code-span  : calc((100vw - 92px) / .92);
    --im-hx-code-right : calc(-1 * var(--im-hx-photo-mx, 20px));   /* 業主決議：手機英文代號貼螢幕右緣（照片左右各留 20px，所以往右超出 20px） */
    --im-hx-code-mr    : 0px;
  }
}

/* ═════════ 全站動畫（業主 10/19，兩種都要；程式在 assets/js/im-motion.js，單篇不載入）。甲線 2026-10-19 ═════════
   html.im-mo-on：head 判斷過「減少動態效果」後才掛；html.im-mo-ready：程式已把頁首標題拆好逐字。 */
@keyframes im-mo-ch { from { opacity: 0; filter: blur(8px); transform: translateX(-6px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes im-mo-line { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes im-mo-reveal { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@keyframes im-mo-cue { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .55; } 50% { transform: translateY(8px) rotate(45deg); opacity: 1; } }
@keyframes im-mo-failsafe { to { opacity: 1; } }
/* 程式還沒拆好前先藏住頁首標題（避免先出現整句、再消失、再逐字出現）；萬一程式沒跑，2.5 秒後自己出現 */
html.im-mo-on:not(.im-mo-ready) :is(.im-hx--cover .im-hx__title, .im-hx--cover .im-hx__kick b, .im-sarch-hero__title) { opacity: 0; animation: im-mo-failsafe .01s 2.5s forwards; }
.im-mo-ch { display: inline-block; animation: im-mo-ch .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.im-mo-line { animation: im-mo-line .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.im-mo-reveal { animation: im-mo-reveal 1.1s cubic-bezier(.77,0,.18,1) both; animation-delay: var(--d, 0s); }
/* 頁首下方「往下瀏覽」（同學院首頁「探索課程」） */
.im-mo-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; margin: 0 auto; padding: 18px 24px 6px; color: var(--im-text-strong); text-decoration: none; font: 500 15px/1 var(--im-font-sans); letter-spacing: .24em; }
.im-mo-cue i { display: block; width: 14px; height: 14px; border-right: 1.5px solid var(--im-brand-ink); border-bottom: 1.5px solid var(--im-brand-ink); transform: rotate(45deg); animation: im-mo-cue 1.8s ease-in-out infinite; }
.im-mo-cue:hover span { text-decoration: underline; text-underline-offset: 5px; }
.im-mo-cue:focus-visible { outline: 2px solid var(--im-brand-ink); outline-offset: 4px; }
/* 捲動進場：載入時在畫面下方的區塊，捲到才淡入上浮 */
.im-mo-up { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.im-mo-up.is-mo-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .im-mo-ch, .im-mo-line, .im-mo-reveal, .im-mo-cue i { animation: none !important; }
  .im-mo-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.im-mo-on:not(.im-mo-ready) :is(.im-hx--cover .im-hx__title, .im-hx--cover .im-hx__kick b, .im-sarch-hero__title) { opacity: 1; animation: none; }
}
.im-mo-cue--in { margin: 28px 0 0; padding: 0; align-items: flex-start; color: inherit; }

/* 甲線 10/19（業主選 B）：頁尾內容縮成內容寬（1440 版心＋左右 40，跟頁面內文左右對齊）；頁尾背景仍滿版、導覽列不動。
   1440 以下維持原本（寬版：左右 64）。 */
@media (min-width: 1441px) {
  .im-footer > .im-wrap { max-width: calc(var(--im-content, 1440px) + 2 * var(--im-gutter, 40px)); padding-inline: var(--im-gutter, 40px); }
}

/* 甲線 10/20（業主：「導覽列固定在頂端一直沒改到」）：總站頁（總首頁、全站彙整頁、一般頁）的導覽列包在一個跟它一樣高的頁首區塊裡，
   sticky 黏不住、捲動就消失。改成讓整個頁首區塊固定在頂端（學院頁與單篇的導覽列本來就會固定，不受影響）。
   頁面內的錨點跳轉一律讓出導覽列高度（個別區塊另有 scroll-margin 的照舊，:where 不增加權重）。 */
header.wp-block-template-part:has(> .im-site > header.im-nav),
.im-site:has(> header.im-nav:only-child):not(header.wp-block-template-part > .im-site) { position: sticky; top: 0; z-index: 100; }
:where(main [id], .im-home [id], .ah [id]) { scroll-margin-top: 90px; }
/* 單篇「免費諮詢」表單錨點原本讓 74px，淺色學院導覽列 77px 會蓋到 3px：一律讓 90px（im-course.css 那條權重較低，蓋過它）。 */
html #im-free-form, html #im-free-form > .im-cform-anchor { scroll-margin-top: 90px; }

/* ═══ 甲線 10/20（業主看肌膚學院首頁：要用「元件」統一，不是逐頁修）═══
   ② 按鈕元件 hover：學院首頁的「了解更多／查看全部／探索更多…」(.ah-more) 與活動「了解活動」(.im-evt__go)
      跟深色列表卡按鈕同一套——文字往右移 4px、出現金色底線。整張卡可點的（課程卡、活動列），滑過卡片時按鈕也一起動。 */
html .ah-more, html .im-evt__go { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: transform .2s ease, text-decoration-color .2s ease; }
html .ah-more:hover, html .ah-more:focus-visible, html .ah-course:hover .ah-more, html .ah-course:focus-visible .ah-more,
html .im-evt__go:hover, html .im-evt__go:focus-visible, html .im-evt__item:hover .im-evt__go, html .im-evt__item:focus-within .im-evt__go { transform: translateX(4px); text-decoration: underline #d7b17b; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { html .ah-more, html .im-evt__go { transition: none; } }
/* ③ 標題 hover 一律不加底線、不變色（按鈕才有回饋）：活動、優勢、文章等卡片標題連結。 */
html :is(.im-evt__title, .ah-adv__title, .ah-ins__title, .ah-case__title) a:is(:hover, :focus-visible) { text-decoration: none; color: inherit; }
/* ④ 作品框元件（霧玻璃：同圖模糊框帶 10px＋薄紗、內圈 1px 白線、無外線）深淺同一個：
      原本模糊圖只放大 1.08 倍，模糊後邊緣淡掉、露出底色——深色底看不出來，淺色底就變成一圈白框。
      淺色的薄紗又是 13% 白，框帶被刷淡、跟內圈白線混成一片，看起來只剩白框。
      統一：模糊圖往外多鋪 24px，框帶整圈都是照片本身的延伸色；深淺用同一層薄紗（13% 深），外層框帶＋內圈白線兩層都看得出來。
      學院成果頁（淺色）更嚴重：舊的淺色規則用 background 簡寫把模糊照片整個洗掉，只剩米白底＝純白框；這裡把照片框帶寫回來。
      套到學院首頁作品牆、學院／全站成果作品長卷、總首頁精選作品三處。 */
html .ah .ah-works__item::before, html .im-res-roll.im-res-roll .im-res-work.im-res-work::before, html .im-home.im-home .story-works .works__item::before { inset: -24px; transform: none; background: var(--im-work-img) center / cover no-repeat; filter: blur(9px); }
html .ah.is-light .ah-works__item::after, html .im-academy.is-light .im-res-roll .im-res-work::after { background: rgba(20, 17, 14, .13); }

/* 甲線 10/20（總控：淺色手機頁首照片右下英文代號 EMSKIN 等貼邊被切）：原本手機代號末字右緣＝螢幕右緣 390，
   字形外緣與字距被螢幕切掉。改成離螢幕右緣 8px（仍超出照片右緣 12px，保留「壓出照片」的效果），可用寬度同步少 8px，長代號不會往左撞。
   學院首頁、六總覽、七種單篇都讀這組共用變數，一處改全部一起變。 */
@media (max-width: 750px) {
  .im-academy {
    --im-hx-code-right : calc(8px - var(--im-hx-photo-mx, 20px));
    --im-hx-code-span  : calc((100vw - 100px) / .92);
  }
}