/* ============================================================================
   課程兩頁：課程總覽（academy-courses.php）＋ 課程單篇（proto-single-course.php）
   ----------------------------------------------------------------------------
   乙線第 1 件，2026-10-05 建立。依賴 im-design-system.css（先載入）。
   設計稿：13_新視覺改版/01_設計稿/03_學院系列_版本2/學院課程 (2).png、學院課程單一課程 (2).png
   規則：顏色、字體一律用設計系統變數（深淺兩版自動切換）；最小字 14px；
         高度以「頁寬比例」對齊設計稿（寬 1440 時的目標高度寫在每區註解）。
   命名：.im-chub-*＝課程總覽、.im-csingle-*＝課程單篇、.im-cform＝兩頁共用表單外框。
   ============================================================================ */

.im-academy.im-course-page {
  background: var(--im-bg);
  color: var(--im-text);
  font-family: var(--im-font-sans);
  overflow-x: clip;
}
/* 頁面外（body）也跟著底色：懸浮按鈕在桌機會讓 body 右側留 88px、頁尾前也有間距，不能露出白底 */
body:has(.im-course-page.is-dark) { background: #000000; }
body:has(.im-course-page.is-light) { background: #F5F1ED; }
body:has(.im-course-page .im-csingle) { background: #F5F1ED; }   /* 單篇頁首以下是米色，頁尾前的間距也要米色 */
/* 總控 10/05：右側多一條邊。設計系統在桌機替懸浮按鈕把 body 右邊留 88px；課程兩頁內容版心兩側本來就有留白，
   懸浮按鈕落在留白裡，這裡把 body 右內距拿掉，頁首與各區才會真正滿版、置中。 */
@media (min-width: 1001px) { body:has(.im-course-page) { padding-right: 0; } }
.im-course-page main { display: block; padding-block-end: clamp(2.5rem, 4vw, 4rem); }
.im-course-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.im-course-page h1, .im-course-page h2 { margin: 0; font-family: var(--im-font-serif); font-weight: var(--im-fw-medium); color: var(--im-text-strong); }
.im-course-page p { margin: 0; }
.im-course-page .im-crumb { margin-block-end: var(--im-s-5); }

/* 學院色（業主 10/05：重點色跟各學院走，不可每院都是金色）。
   --im-brand-ink 由設計系統依 --im-brand 算好（深淺版各一）；這裡多一個「深色色塊上的學院色」，
   給橫幅、重點帶這種不論深淺學院都固定深底的區塊用，公式同設計系統深色版。 */
.im-academy.im-course-page { --im-brand-on-dark: var(--im-brand-ink); }   /* 舊瀏覽器退路：用設計系統算好的學院可讀色 */
@supports (color: color-mix(in oklab, red, blue)) {
  .im-academy.im-course-page { --im-brand-on-dark: color-mix(in oklab, var(--im-brand) 62%, #FFF0D4 38%); }
  .im-academy.im-course-page:is([data-academy="emmicroblading"], [data-academy="emskin"]) { --im-brand-on-dark: color-mix(in oklab, var(--im-brand) 86%, #FFFFFF 14%); }
  .im-academy.im-course-page[data-academy="emstylist"] { --im-brand-on-dark: #E3D9CD; }
}

/* 內容寬度：直接用設計系統的 .im-wrap（最寬 --im-container 1320、兩側 --im-gutter），不另外改，跟首頁與學院首頁的左右邊界同一條線（總控 10/05） */

/* 共用小元件 ---------------------------------------------------------------- */
.im-course-brand { font-size: 15px; font-weight: var(--im-fw-bold); letter-spacing: .12em; color: var(--im-group-ink, #EB6DA5); }
.im-academy.is-dark .im-course-brand { color: #EB6DA5; }
.im-course-rule { display: block; width: 2.5rem; height: 3px; margin-block: var(--im-s-5); background: #EB6DA5; }
.im-academy.is-light .im-course-rule { background: var(--im-group-ink, #A7456F); }
.im-course-cta,
.im-course-more {
  display: inline-flex; align-items: center; gap: var(--im-s-3);
  padding-block: var(--im-s-2); border-block-end: 1px solid currentColor;
  font-family: var(--im-font-serif); font-size: var(--im-fs-lg); letter-spacing: .1em; color: var(--im-brand-ink);
  transition: gap var(--im-dur) var(--im-ease);
}
.im-course-more { font-size: var(--im-fs-base); }
.im-course-cta:hover, .im-course-more:hover { gap: var(--im-s-5); }
.im-chub-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 var(--im-s-7);
  border: 1px solid var(--im-brand-ink); border-radius: var(--im-radius-sm);
  background: transparent; color: var(--im-brand-ink);
  font-family: var(--im-font-serif); font-size: var(--im-fs-base); letter-spacing: .12em; white-space: nowrap; cursor: pointer;
}
.im-chub-btn:hover { background: var(--im-brand-ink); color: var(--im-on-brand); }

/* ═════════════════════════ 課程總覽 ═════════════════════════ */

/* 頁首：目標 0.21×頁寬（1440 ≈ 300px）。圖貼右緣，左側用底色漸層壓住，字永遠在實底上。 */
.im-chub-hero { position: relative; display: flex; align-items: center; min-height: clamp(260px, 21vw, 340px); border-block-end: 1px solid var(--im-line); }
.im-chub-hero__media { position: absolute; inset: 0 0 0 auto; width: 62%; }
.im-chub-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--im-bg) 0%, color-mix(in oklab, var(--im-bg) 55%, transparent) 38%, transparent 75%); }
.im-chub-hero__inner { position: relative; z-index: 1; padding-block: var(--im-s-7); }
.im-chub-hero__title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); letter-spacing: .08em; line-height: 1.25; margin-block-start: var(--im-s-2); }
.im-chub-hero__lede { max-width: 30em; font-size: var(--im-fs-base); line-height: 1.9; color: var(--im-text); }

/* 搜尋：目標 0.073（≈105px） */
.im-chub-search { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--im-s-6); align-items: center; padding-block: var(--im-s-7); }
.im-chub-search label { font-family: var(--im-font-serif); font-size: var(--im-fs-lg); letter-spacing: .14em; color: var(--im-brand-ink); }
.im-chub-search input { min-width: 0; min-height: 3.25rem; padding-inline: var(--im-s-5); border: 1px solid var(--im-line-strong); border-radius: var(--im-radius-sm); background: var(--im-surface); color: var(--im-text); font-size: var(--im-fs-base); }
.im-chub-search input::placeholder { color: var(--im-text-faint); opacity: 1; }

/* 列表：第一張橫向主打（0.26≈375px），其餘兩欄、左圖右文（每張 0.19≈275px）。 */
.im-chub-list .im-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-6); margin: 0; padding: 0; list-style: none; }
.im-chub-list .im-card { min-width: 0; border: 1px solid var(--im-brand-ink); border-radius: var(--im-radius-sm); background: var(--im-surface); overflow: hidden; transition: border-color var(--im-dur) var(--im-ease); }
.im-chub-list .im-card:hover { border-color: var(--im-brand-ink); }
.im-chub-list .im-card__link { display: grid; grid-template-columns: 40% minmax(0, 1fr); height: 100%; min-height: 15.5rem; color: inherit; text-decoration: none; }
.im-chub-list .im-card__thumb { position: relative; display: block; min-height: 100%; overflow: hidden; background: var(--im-surface-3); }
.im-chub-list .im-card__thumb img { position: absolute; inset: 0; }
.im-chub-list .im-card__thumb img { transition: transform .6s var(--im-ease); }
.im-chub-list .im-card:hover .im-card__thumb img { transform: scale(1.04); }
.im-chub-list .im-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--im-s-3); padding: var(--im-s-6) var(--im-s-6) var(--im-s-5); }
.im-chub-list .im-card__tag { padding: 2px var(--im-s-3); border: 1px solid var(--im-line-strong); font-size: 14px; color: var(--im-text-muted); }
.im-chub-list .im-card__title { font-family: var(--im-font-serif); font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); line-height: 1.4; letter-spacing: .06em; color: var(--im-text-strong); }
.im-chub-list .im-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--im-fs-sm); line-height: 1.85; color: var(--im-text-muted); }
.im-chub-list .im-card__body::after { content: "了解課程　→"; margin-block-start: auto; align-self: flex-end; padding-block-start: var(--im-s-3); font-family: var(--im-font-serif); font-size: var(--im-fs-md); letter-spacing: .1em; color: var(--im-brand-ink); }
.im-chub-list .im-card:first-child { grid-column: 1 / -1; }
.im-chub-list .im-card:first-child .im-card__link { grid-template-columns: 1fr 1fr; min-height: clamp(18rem, 24vw, 23rem); }
.im-chub-list .im-card:first-child .im-card__body { justify-content: center; padding: clamp(1.5rem, 3vw, 3rem); gap: var(--im-s-4); }
.im-chub-list .im-card:first-child .im-card__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.im-chub-list .im-card:first-child .im-card__excerpt { -webkit-line-clamp: 4; font-size: var(--im-fs-base); }
.im-chub-list .im-card:first-child .im-card__body::after { margin-block-start: var(--im-s-4); }
.im-chub-list .im-empty { padding: var(--im-s-8) var(--im-s-6); border: 1px solid var(--im-line); font-size: var(--im-fs-base); text-align: center; }
.im-chub-list .im-pager { margin-block-start: var(--im-s-7); }

/* 三步驟：目標 0.098（≈140px） */
.im-chub-guide-wrap { padding-block: var(--im-s-8) 0; }
.im-chub-guide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--im-s-7); align-items: center; padding: var(--im-s-6) var(--im-s-7); border: 1px solid var(--im-brand-ink); background: var(--im-surface); }
.im-chub-guide__title { font-size: var(--im-fs-lg); line-height: 1.5; letter-spacing: .1em; color: var(--im-brand-ink); }
.im-chub-guide__head p { margin-block-start: var(--im-s-2); font-size: 14px; color: var(--im-text-muted); }
.im-chub-guide__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-5); margin: 0; padding: 0; list-style: none; }
.im-chub-guide__steps li { display: flex; gap: var(--im-s-3); align-items: center; font-size: 14px; line-height: 1.7; color: var(--im-text-muted); }
.im-chub-guide__steps strong { display: block; font-family: var(--im-font-serif); font-size: var(--im-fs-base); font-weight: var(--im-fw-medium); color: var(--im-brand-ink); }
.im-chub-guide__icon { flex: 0 0 3rem; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--im-brand-ink); border-radius: 50%; color: var(--im-brand-ink); }
.im-chub-guide__icon svg { width: 1.4rem; height: 1.4rem; }

/* ═════════════════════════ 兩頁共用：表單外框 ═════════════════════════ */
/* 總覽目標 0.27（≈390px）、單篇目標 0.405（≈580px，左欄多一張圖）。 */
.im-cform-wrap { padding-block: var(--im-s-8) 0; }
.im-cform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border: 1px solid var(--im-line-strong); background: var(--im-surface); }
.im-cform__aside { display: flex; flex-direction: column; gap: var(--im-s-4); padding: clamp(1.5rem, 3vw, 2.75rem); border-inline-end: 1px solid var(--im-line); }
.im-cform__title { font-size: var(--im-fs-lg); line-height: 1.5; letter-spacing: .06em; }
.im-cform__aside p { font-size: var(--im-fs-sm); line-height: 1.9; color: var(--im-text-muted); }
.im-cform__media { position: relative; flex: 1; min-height: 12rem; margin-block-start: var(--im-s-3); overflow: hidden; }
.im-cform__media img { position: absolute; inset: 0; }
.im-csingle .im-cform__media { min-height: clamp(12rem, 17vw, 16rem); }   /* 單篇稿的表單左欄有一張大圖，比總覽高 */
.im-cform__form { padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 3vw, 2.75rem); min-width: 0; }
/* 表單本體：線上原型測試表單 .im-tf 的基本樣式（頁面上的表單區已改用 .im-formstub，見下方第 6、7 件） */
.im-cform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.im-cform label { display: block; font-size: 14px; color: var(--im-text); }
.im-cform input, .im-cform select, .im-cform textarea {
  display: block; width: 100%; min-height: 2.75rem; margin-block-start: var(--im-s-2); padding: var(--im-s-2) var(--im-s-4);
  border: 1px solid var(--im-line-strong); border-radius: var(--im-radius-sm); background: var(--im-bg); color: var(--im-text); font-size: var(--im-fs-base); opacity: 1;
}
.im-cform textarea { min-height: 4.5rem; }
.im-cform input::placeholder, .im-cform textarea::placeholder { color: var(--im-text-faint); opacity: 1; }
.im-cform button, .im-cform .im-tf__submit {
  width: 100%; min-height: 3.25rem; margin-block-start: var(--im-s-5); border: 0; border-radius: var(--im-radius-sm);
  background: var(--im-brand-ink); color: var(--im-on-brand); font-family: var(--im-font-serif); font-size: var(--im-fs-md); letter-spacing: .2em; cursor: pointer;
}
.im-cform .im-tf__row { display: flex; flex-direction: column; gap: var(--im-s-2); margin-block: 0 var(--im-s-4); }
.im-cform .im-tf__note { margin-block-end: var(--im-s-4); font-size: 14px; color: var(--im-text-muted); }
.im-cform .im-tf__hp { position: absolute; left: -9999px; }

/* ═════════════════════════ 課程單篇 ═════════════════════════ */

/* ① 頁首：目標 0.41（≈590px）。左文、中圖、右側窄欄英文字樣（照稿的直欄裝飾）。 */
.im-csingle-hero { border-block-end: 1px solid color-mix(in oklab, var(--im-brand-ink) 45%, transparent); }
.im-csingle-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 11rem; min-height: clamp(26rem, 38vw, 38rem); }
/* 頁首照片滿版到右緣，左側文字對齊 1320 內容線 */
.im-course-page .im-csingle-hero__inner { width: 100%; max-width: none; padding-inline: max(var(--im-gutter), calc((100% - var(--im-container)) / 2 + var(--im-gutter))) 0; }
.im-csingle-hero.is-textonly .im-csingle-hero__inner { grid-template-columns: minmax(0, 1fr) 11rem; }
.im-csingle-hero__main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: var(--im-s-8); padding-inline-end: var(--im-s-7); }
.im-course-page .im-csingle-hero__title { margin-block: var(--im-s-3) var(--im-s-5); font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.75rem); line-height: 1.3; letter-spacing: .08em; color: var(--im-brand-ink); }
.im-csingle-hero__lede { max-width: 24em; margin-block-end: var(--im-s-8); font-size: var(--im-fs-lg); line-height: 1.9; color: var(--im-text); }
.im-csingle-hero__media { position: relative; overflow: hidden; }
.im-csingle-hero__media img { position: absolute; inset: 0; }
.im-csingle-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--im-bg) 0%, transparent 28%); }
.im-csingle-hero__code { align-self: end; padding: 0 var(--im-s-6) var(--im-s-8) var(--im-s-6); border-inline-start: 1px solid color-mix(in oklab, var(--im-brand-ink) 45%, transparent); font-family: var(--im-font-en); font-size: 14px; line-height: 1.9; letter-spacing: .22em; color: var(--im-text); }

/* 頁首以下的淺底區（總控 10/05 退回：照稿，深色學院的單篇也是「深色頁首＋米色內容」）。
   深色學院在這一區改用淺色版的變數（值同設計系統 .im-academy.is-light）；淺色學院本來就是這組，不用改。 */
.im-course-page main.im-csingle { padding-block-end: 0; }
/* 頁尾直接接在內容後（總控 10/05）：全站頁尾自帶上外距，課程兩頁由內容區自己留下方間距，這裡歸零。
   只限課程兩頁；頁尾本身（甲線）沒改。 */
body:has(.im-course-page) .im-footer--site { margin-top: 0; }
.im-csingle-light { padding-block-end: clamp(2.5rem, 4vw, 4rem); background: var(--im-bg); }
.im-academy.is-dark .im-csingle-light {
  --im-bg: #F5F1ED; --im-surface: #FBF8F4; --im-surface-2: #EFE9E1; --im-surface-3: #E7DED3;
  --im-text: #2E2A26; --im-text-strong: #1C1917; --im-text-muted: #6E6862; --im-text-faint: #736C64;
  --im-line: #DED5CA; --im-line-strong: #C6B9A8;
  --im-brand-ink: #825E12; --im-brand-soft: #EFE2CE; --im-on-brand: #FFFFFF;
  color: var(--im-text); color-scheme: light;
}
@supports (color: color-mix(in oklab, red, blue)) {
  .im-academy.is-dark .im-csingle-light { --im-brand-ink: color-mix(in oklab, var(--im-brand) 52%, #2E1A04 48%); }
  .im-academy.is-dark[data-academy="emmicroblading"] .im-csingle-light { --im-brand-ink: color-mix(in oklab, var(--im-brand) 44%, #2E1A04 56%); }
}

/* ② 橫幅：目標 0.22（≈317px） */
.im-csingle-banner-wrap { padding-block: var(--im-s-3) 0; }
.im-csingle-banner { position: relative; display: flex; align-items: center; min-height: clamp(14rem, 20vw, 19rem); overflow: hidden; background: #0F0D0A; }
.im-csingle-banner__media { position: absolute; inset: 0; }
.im-csingle-banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.78) 45%, rgba(8,7,6,.25) 100%); }
.im-csingle-banner__text { position: relative; max-width: 40rem; padding: var(--im-s-8) clamp(1.5rem, 4vw, 3.5rem); }
.im-csingle-banner__title { margin-block-end: var(--im-s-4); font-family: var(--im-font-serif); font-size: var(--im-fs-xl); letter-spacing: .1em; line-height: 1.5; color: var(--im-brand-on-dark); }
.im-csingle-banner__text p:not(.im-csingle-banner__title) { font-size: var(--im-fs-sm); line-height: 1.9; color: #F2EEE8; }

/* 內容區 */
.im-csingle-body { display: flex; flex-direction: column; gap: var(--im-s-5); padding-block-start: var(--im-s-5); }
.im-csingle-prose { font-size: var(--im-fs-base); line-height: 1.95; color: var(--im-text); }
.im-csingle-prose p + p { margin-block-start: var(--im-s-3); }
.im-csingle-prose ul { margin: 0; padding-inline-start: 1.25em; }
.im-csingle-prose li { margin-block: var(--im-s-1); }
.im-csingle-prose .im-blk__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--im-s-2) var(--im-s-6); }
.im-csingle-prose h3 { margin-block: var(--im-s-5) var(--im-s-2); font-family: var(--im-font-serif); font-size: var(--im-fs-md); color: var(--im-text-strong); }
.im-csingle-prose a { color: var(--im-brand-ink); text-decoration: underline; }

/* ③ 介紹：目標 0.28（≈400px） */
.im-csingle-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: clamp(18rem, 26vw, 25rem); border: 1px solid var(--im-line); background: var(--im-surface); }
.im-csingle-intro.is-textonly { grid-template-columns: 1fr; }
.im-csingle-intro__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--im-s-4); padding: clamp(1.5rem, 3.5vw, 3rem); }
.im-csingle-intro__eyebrow { font-size: 14px; letter-spacing: .12em; color: var(--im-brand-ink); }
.im-csingle-intro h2 { font-size: var(--im-fs-xl); letter-spacing: .08em; }
.im-csingle-intro__media { position: relative; min-height: 14rem; overflow: hidden; }
.im-csingle-intro__media img { position: absolute; inset: 0; }

/* ④ 圖片帶：目標 0.17（≈245px） */
.im-csingle-strip { display: grid; grid-template-columns: repeat(var(--im-strip-n, 5), minmax(0, 1fr)); gap: var(--im-s-4); }
.im-csingle-strip img { height: clamp(9rem, 14vw, 13.5rem); }

/* ⑤ 重點帶：目標 0.088（≈127px）。照稿永遠是深底。 */
.im-csingle-assure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--im-s-6); align-items: center; padding: var(--im-s-6) clamp(1.5rem, 3vw, 2.5rem); border: 1px solid color-mix(in oklab, var(--im-brand-ink) 55%, transparent); border-radius: 6px; background: #14110D; }
.im-csingle-assure__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--im-brand-on-dark); }
.im-csingle-assure__icon svg { width: 100%; height: 100%; }
.im-csingle-assure h2 { margin-block-end: var(--im-s-2); font-size: var(--im-fs-lg); letter-spacing: .1em; color: var(--im-brand-on-dark); }
.im-csingle-assure .im-csingle-prose { font-size: var(--im-fs-sm); color: #F2EEE8; }

/* ⑥ 摺疊：每列 ≈ 0.04 */
.im-csingle-folds { border: 1px solid var(--im-line-strong); border-radius: 6px; background: var(--im-surface); }
.im-csingle-fold + .im-csingle-fold { border-block-start: 1px solid var(--im-line); }
.im-csingle-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--im-s-4); padding: var(--im-s-4) var(--im-s-6); cursor: pointer; list-style: none; }
.im-csingle-fold > summary::-webkit-details-marker { display: none; }
.im-csingle-fold > summary h2 { font-size: var(--im-fs-md); letter-spacing: .08em; }
.im-csingle-fold > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--im-brand-ink); }
.im-csingle-fold[open] > summary::after { content: "−"; }
.im-csingle-fold__body { padding: 0 var(--im-s-6) var(--im-s-6); }
.im-csingle-fold .im-blk__qa { padding-block: var(--im-s-3); border-block-start: 1px solid var(--im-line); }
.im-csingle-fold .im-blk__qa summary { font-weight: var(--im-fw-medium); cursor: pointer; color: var(--im-text-strong); }
.im-csingle-fold .im-blk__qa p { margin-block-start: var(--im-s-2); color: var(--im-text-muted); }

/* ⑦ 本院其他課程（稿上沒有；決議第 39 項保留，壓到一列三張） */
.im-csingle-related { padding-block: var(--im-s-8) 0; }
.im-csingle-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--im-s-4); margin-block-end: var(--im-s-5); }
.im-csingle-related__head h2 { font-size: var(--im-fs-xl); letter-spacing: .08em; }
.im-csingle-related .im-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-5); margin: 0; padding: 0; list-style: none; }
.im-csingle-related .im-card { border: 1px solid var(--im-line); background: var(--im-surface); overflow: hidden; }
.im-csingle-related .im-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.im-csingle-related .im-card__thumb { display: block; height: 11rem; overflow: hidden; }
.im-csingle-related .im-card__body { display: flex; flex-direction: column; gap: var(--im-s-2); padding: var(--im-s-4) var(--im-s-5) var(--im-s-5); }
.im-csingle-related .im-card__tag { align-self: flex-start; padding: 0 var(--im-s-2); border: 1px solid var(--im-line-strong); font-size: 14px; color: var(--im-text-muted); }
.im-csingle-related .im-card__title { font-family: var(--im-font-serif); font-size: var(--im-fs-md); color: var(--im-text-strong); }
.im-csingle-related .im-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.8; color: var(--im-text-muted); }

/* ═════════════════════════ 平板與手機（沒有手機設計稿，依桌機稿堆疊） ═════════════════════════ */
@media (max-width: 1000px) {
  .im-chub-guide { grid-template-columns: 1fr; }
  .im-chub-guide__head br { display: none; }
  .im-csingle-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .im-csingle-hero__code { display: none; }
  .im-cform { grid-template-columns: 1fr; }
  .im-cform__aside { border-inline-end: 0; border-block-end: 1px solid var(--im-line); }
  .im-cform__media { display: none; }
}
@media (max-width: 750px) {
  .im-chub-hero { display: block; min-height: 0; }
  .im-chub-hero__media { position: relative; width: 100%; height: 13rem; }
  .im-chub-hero__media::after { background: linear-gradient(0deg, var(--im-bg) 0%, transparent 60%); }
  .im-chub-hero__inner { padding-block: var(--im-s-2) var(--im-s-6); }
  .im-chub-search { grid-template-columns: 1fr; gap: var(--im-s-3); padding-block: var(--im-s-6); }
  .im-chub-list .im-list { grid-template-columns: 1fr; gap: var(--im-s-4); }
  .im-chub-list .im-card__link,
  .im-chub-list .im-card:first-child .im-card__link { grid-template-columns: 1fr; min-height: 0; }
  .im-chub-list .im-card__thumb { height: 12.5rem; }
  .im-chub-list .im-card:first-child .im-card__thumb { height: 14rem; }
  .im-chub-list .im-card__body,
  .im-chub-list .im-card:first-child .im-card__body { padding: var(--im-s-5); }
  /* 手機：主打卡維持上圖下文，其餘改左小圖右文字，頁面不要拉太長 */
  .im-chub-list .im-card:not(:first-child) .im-card__link { grid-template-columns: 36% minmax(0, 1fr); }
  .im-chub-list .im-card:not(:first-child) .im-card__thumb { height: auto; min-height: 9.5rem; }
  .im-chub-list .im-card:not(:first-child) .im-card__body { padding: var(--im-s-4); gap: var(--im-s-2); }
  .im-chub-list .im-card:not(:first-child) .im-card__title { font-size: var(--im-fs-md); }
  .im-chub-list .im-card:not(:first-child) .im-card__excerpt { -webkit-line-clamp: 2; font-size: 14px; }
  .im-chub-list .im-card:not(:first-child) .im-card__body::after { font-size: 14px; padding-block-start: var(--im-s-1); }
  .im-chub-guide { padding: var(--im-s-5); gap: var(--im-s-5); }
  .im-chub-guide__steps { grid-template-columns: 1fr; gap: var(--im-s-4); }
  .im-chub-guide .im-chub-btn { width: 100%; }

  .im-csingle-hero__inner { display: flex; flex-direction: column-reverse; min-height: 0; }
  .im-course-page .im-csingle-hero__inner { padding-inline: 0; }
  .im-csingle-hero__main { padding: var(--im-s-6) var(--im-gutter) var(--im-s-7); }
  .im-csingle-hero__media { height: 15rem; }
  .im-csingle-hero__media::after { background: linear-gradient(0deg, var(--im-bg) 0%, transparent 40%); }
  .im-csingle-hero__lede { margin-block-end: var(--im-s-6); }
  .im-csingle-banner { min-height: 0; }
  .im-csingle-banner__text { padding: var(--im-s-7) var(--im-s-5); }
  .im-csingle-intro { grid-template-columns: 1fr; min-height: 0; }
  .im-csingle-intro__media { order: -1; height: 13rem; min-height: 0; }
  .im-csingle-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-3); }
  .im-csingle-strip img { height: 9rem; }
  .im-csingle-strip img:nth-child(n+5) { display: none; }
  .im-csingle-assure { grid-template-columns: 1fr; gap: var(--im-s-3); padding: var(--im-s-5); }
  .im-csingle-assure__icon { width: 2.75rem; height: 2.75rem; }
  .im-csingle-fold > summary { padding-inline: var(--im-s-5); }
  .im-csingle-fold__body { padding-inline: var(--im-s-5); }
  .im-csingle-related .im-list { grid-template-columns: 1fr; }
  .im-csingle-related__head { flex-direction: column; align-items: flex-start; }
}

/* ═════════════════════════ 第 6、7 件（2026-10-05） ═════════════════════════ */

/* 表單區：看得到欄位版面，按鈕（和點欄位）開懸浮視窗。欄位是示意，不是真的輸入框。 */
.im-formstub__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-3) var(--im-s-5); color: inherit; text-decoration: none; cursor: pointer; }
.im-formstub__field { display: flex; flex-direction: column; gap: var(--im-s-2); }
.im-formstub__field:last-child { grid-column: 1 / -1; }
.im-formstub__label { font-size: 14px; color: var(--im-text); }
.im-formstub__input { display: block; min-height: 2.75rem; padding: var(--im-s-2) var(--im-s-4); border: 1px solid var(--im-line-strong); border-radius: var(--im-radius-sm); background: var(--im-bg); color: var(--im-text-faint); font-size: var(--im-fs-base); line-height: 1.6; }
.im-formstub__field:last-child .im-formstub__input { min-height: 4.5rem; }
.im-formstub__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; margin-block-start: var(--im-s-5); border-radius: var(--im-radius-sm); background: var(--im-brand-ink); color: var(--im-on-brand); font-family: var(--im-font-serif); font-size: var(--im-fs-md); letter-spacing: .2em; text-decoration: none; }
.im-formstub__btn:hover { filter: brightness(1.08); }
.im-formstub__hint { margin-block-start: var(--im-s-3); font-size: 14px; color: var(--im-text-muted); text-align: center; }
@media (max-width: 750px) { .im-formstub__fields { grid-template-columns: 1fr; } }

/* 卡片的日期／地點（外掛 [im_list] 10/05 起輸出 .im-card__meta） */
.im-course-page .im-card__meta { display: flex; flex-wrap: wrap; gap: var(--im-s-1) var(--im-s-4); font-size: 14px; letter-spacing: .04em; color: var(--im-brand-ink); }

/* 第 98 件：學院文章子頁沿用全站單一半列清單，依學院深／淺色變數顯示。 */
.im-subpage--insights .im-sarch-insight-list { margin-block-start: var(--im-s-5); }
.im-subpage--insights .im-sarch-insight-list .im-card { border-color: var(--im-line-strong); background: var(--im-surface); }
.im-subpage--insights .im-sarch-insight-list .im-card__title { color: var(--im-text-strong); }
.im-subpage--insights .im-sarch-insight-list .im-card__excerpt { color: var(--im-text-muted); }
.im-subpage--insights .im-sarch-insight-list .im-card__body::after { color: var(--im-brand-ink); }
.im-course-page .im-card__date + .im-card__place::before { content: "｜"; margin-inline-end: var(--im-s-1); color: var(--im-text-faint); }

/* 沒有縮圖的卡片：文字吃滿整張，不留左邊空欄 */
.im-chub-list .im-card__link:not(:has(.im-card__thumb)),
.im-chub-list .im-card:first-child .im-card__link:not(:has(.im-card__thumb)) { grid-template-columns: 1fr; min-height: 0; }
.im-csingle-related .im-card__link:not(:has(.im-card__thumb)) .im-card__body { padding-block-start: var(--im-s-5); }

/* ── 師資總覽：人像卡片牆（照片、老師名、校區科別）。🔶 延伸稿 ── */
.im-chub--instructors .im-chub-list .im-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-chub--instructors .im-chub-list .im-card,
.im-chub--instructors .im-chub-list .im-card:first-child { grid-column: auto; }
.im-chub--instructors .im-chub-list .im-card__link,
.im-chub--instructors .im-chub-list .im-card:first-child .im-card__link { display: flex; flex-direction: column; min-height: 0; }
.im-chub--instructors .im-chub-list .im-card__thumb { position: relative; aspect-ratio: 3 / 4; min-height: 0; }
.im-chub--instructors .im-chub-list .im-card__thumb img { object-position: 50% 20%; }
.im-chub--instructors .im-chub-list .im-card__body,
.im-chub--instructors .im-chub-list .im-card:first-child .im-card__body { padding: var(--im-s-4) var(--im-s-5) var(--im-s-5); gap: var(--im-s-2); }
.im-chub--instructors .im-chub-list .im-card__title,
.im-chub--instructors .im-chub-list .im-card:first-child .im-card__title { font-size: var(--im-fs-lg); }
.im-chub--instructors .im-chub-list .im-card__excerpt { -webkit-line-clamp: 2; font-size: 14px; }
.im-chub--instructors .im-chub-list .im-card__body::after { content: "看介紹　→"; font-size: var(--im-fs-sm); }
/* 沒有照片的老師：中性色塊，不放別人的圖 */
.im-chub--instructors .im-chub-list .im-card__link:not(:has(.im-card__thumb))::before { content: ""; display: block; aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--im-surface-3), var(--im-surface-2)); }
@media (max-width: 1000px) { .im-chub--instructors .im-chub-list .im-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 750px) { .im-chub--instructors .im-chub-list .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-s-3); } .im-chub--instructors .im-chub-list .im-card__body::after { display: none; } }

/* ── 師資單篇：左照片、右介紹。🔶 延伸稿 ── */
.im-tsingle-hero { padding-block: var(--im-s-7) clamp(2.5rem, 4vw, 4rem); }
.im-tsingle-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.im-tsingle-grid.is-textonly { grid-template-columns: minmax(0, 1fr); }   /* 10/12 寬度 1440：單篇容器＝內容寬，拿掉原 48rem */
.im-tsingle-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--im-line); }
.im-tsingle-photo img { position: absolute; inset: 0; object-position: 50% 20%; }
.im-tsingle-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--im-s-4); padding-block-start: var(--im-s-4); }
.im-course-page .im-tsingle-name { font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem); letter-spacing: .1em; color: var(--im-brand-ink); }
.im-tsingle-main .im-single__tags { display: flex; flex-wrap: wrap; gap: var(--im-s-2); margin: 0; padding: 0; list-style: none; }
.im-tsingle-main .im-tag { padding: 2px var(--im-s-3); border: 1px solid var(--im-brand-ink); font-size: 14px; color: var(--im-brand-ink); }
.im-tsingle-meta { font-size: var(--im-fs-base); color: var(--im-text-muted); }
.im-tsingle-bio { width: 100%; padding-block: var(--im-s-5); border-block: 1px solid var(--im-line); }
.im-tsingle-pending { font-size: var(--im-fs-base); line-height: 1.9; color: var(--im-text-muted); }
.im-tsingle-related .im-card__thumb { height: auto; aspect-ratio: 3 / 4; }
.im-tsingle-related .im-card__thumb img { object-position: 50% 20%; }
.im-tsingle-related .im-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 750px) {
  .im-tsingle-grid { grid-template-columns: 1fr; }
  .im-tsingle-photo { max-width: 22rem; }
  .im-tsingle-related .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 搜尋框拿掉後（16_ 第 102 項），頁首與列表之間補回間距 */
.im-chub-list { padding-block-start: clamp(1.75rem, 3vw, 2.75rem); }
.im-sarch-hero + .im-sarch-sec, .im-sarch-light > .im-sarch-sec:first-child { padding-block-start: clamp(2rem, 3.5vw, 3rem); }

/* ═════════ 業主 10/05：區塊內留白、區塊之間的間距都放大一點（同首頁的回饋） ═════════ */
.im-course-page { --im-gap-section: clamp(3rem, 5.5vw, 5rem); --im-gap-block: clamp(1.5rem, 2.6vw, 2.5rem); }
/* 總覽 */
.im-chub-list { padding-block-start: var(--im-gap-section); }
.im-chub-list .im-list { gap: var(--im-gap-block); }
.im-chub-list .im-card__body { padding: clamp(1.5rem, 2.4vw, 2.25rem); gap: var(--im-s-4); }
.im-chub-guide-wrap, .im-ehub-next-wrap, .im-cform-wrap { padding-block-start: var(--im-gap-section); }
.im-chub-guide { padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 3.5vw, 3rem); }
.im-ehub-next { padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.75rem, 3.5vw, 3rem); }
.im-cform__aside { padding: clamp(1.75rem, 3.2vw, 3rem); }
.im-cform__form { padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.75rem, 3.2vw, 3rem); }
.im-course-page main { padding-block-end: var(--im-gap-section); }
.im-course-page .im-csingle-light { padding-block-end: var(--im-gap-section); }
/* 單篇 */
.im-csingle-banner-wrap { padding-block-start: var(--im-gap-block); }
.im-csingle-body, .im-esingle-body { gap: var(--im-gap-block); padding-block-start: var(--im-gap-block); }
.im-csingle-intro__text, .im-esingle-block__text { padding: clamp(1.75rem, 3.5vw, 3.25rem); }
.im-csingle-assure { padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 3.5vw, 3rem); }
.im-csingle-fold > summary { padding: 1.125rem var(--im-s-7); }
.im-csingle-fold__body { padding: 0 var(--im-s-7) var(--im-s-7); }
.im-csingle-related, .im-esingle-cta-wrap { padding-block-start: var(--im-gap-section); }
.im-csingle-related__head { margin-block-end: var(--im-gap-block); }
.im-csingle-related .im-list { gap: var(--im-gap-block); }
.im-csingle-related .im-card__body { padding: var(--im-s-5) var(--im-s-6) var(--im-s-6); }
.im-tsingle-hero { padding-block: var(--im-s-8) var(--im-gap-section); }
@media (max-width: 750px) {
  .im-course-page { --im-gap-section: 2.75rem; --im-gap-block: 1.25rem; }
  .im-chub-list .im-card__body, .im-chub-list .im-card:not(:first-child) .im-card__body { padding: var(--im-s-5); }
  .im-csingle-fold > summary { padding: var(--im-s-4) var(--im-s-5); }
  .im-csingle-fold__body { padding: 0 var(--im-s-5) var(--im-s-5); }
}

/* ═════════ 第 8 件（10/05）：中間寬度 ═════════ */
/* 懸浮鈕避讓：改用甲線的 data-im-float-avoid（樣板依寬度標記，見 yi-parts.php im_yi_float_avoid_script()），不另外加邊距。 */
/* 平板到小筆電：學院總覽頁首的照片收窄、文字限寬，一句話不壓到照片上 */
@media (min-width: 751px) and (max-width: 1100px) {
  .im-chub-hero__media { width: 50%; }
  .im-chub-hero__title, .im-chub-hero__lede { max-width: 48%; }
}

/* ═════════ 第 12 件（10/06）：照片圓角——淺色版 4px（--im-radius）、深色版 2px（--im-radius-sm）；頁首圖維持直角滿版 ═════════ */
.im-academy.is-light { --im-photo-r: var(--im-radius, 4px); }
.im-academy.is-dark  { --im-photo-r: var(--im-radius-sm, 2px); }
/* 卡片：整張卡片同一個圓角，裡面的照片跟著裁 */
.im-course-page .im-chub-list .im-card,
.im-course-page .im-csingle-related .im-card,
.im-sarch .im-card,
.im-sarch-group__intro { border-radius: var(--im-photo-r); overflow: hidden; }
/* 獨立的照片框與有照片底的色塊 */
.im-csingle-banner, .im-csingle-intro, .im-csingle-intro__media, .im-csingle-strip img,
.im-esingle-block__media, .im-esingle-cta, .im-cform__media, .im-tsingle-photo,
.im-chub-list .im-card__thumb img, .im-csingle-related .im-card__thumb img { border-radius: var(--im-photo-r); }
/* 卡片裡的縮圖不用自己再圓角（外框已裁），避免內側圓角露縫 */
.im-chub-list .im-card__thumb img, .im-csingle-related .im-card__thumb img, .im-sarch .im-card__thumb img { border-radius: 0; }
/* 交錯區塊：文字框與照片兩塊各自圓角 */
.im-esingle-block__text { border-radius: var(--im-photo-r); }

/* 業主 10/07：總覽頁首眉標「伊美教育 學院名 EMNAIL」——英文代號小字 */
.im-chub-hero__code { margin-inline-start: .75em; font-family: var(--im-font-en); font-size: 14px; font-weight: var(--im-fw-medium); letter-spacing: .22em; color: var(--im-text-muted); }

/* ═════════ 第 15 件（業主 10/07）：（只限淺色版，總控 10/07 更正：深色維持滿版貼右緣）學院總覽頁首圖收在內容寬度內，右邊跟下方卡片同一條線；背景色仍滿版 ═════════ */
.is-light .im-chub-hero { --im-hero-edge: max(var(--im-gutter), calc((100% - var(--im-container)) / 2 + var(--im-gutter))); }
.is-light .im-chub-hero__media { right: var(--im-hero-edge); width: calc((100% - 2 * var(--im-hero-edge)) * .62); }
@media (min-width: 751px) and (max-width: 1100px) {
  .is-light .im-chub-hero__media { width: calc((100% - 2 * var(--im-hero-edge)) * .5); }
}
@media (max-width: 750px) {
  .is-light .im-chub-hero__media { right: auto; width: auto; margin-inline: var(--im-gutter); }
}

/* ═════════ 業主 10/08：學院總覽頁首改 B「跟學院首頁同語言」（甲線學院首頁 v19 的縮小版；六種子頁共用） ═════════
   淺色＝左欄眉標（伊美／教育 品牌粉、學院名不粉，固定 2+2）＋直排大標（五字以上分兩直行）＋學院色細線＋滿高照片（右緣對齊內容寬）＋照片右下英文代號（學院色、無陰影，桌機伸出照片右緣）；逐字進場。
   深色＝大標＋右側兩行眉標（同一列，不疊四行）＋整寬照片條（布幕上下拉開，只拉圖）。
   高度：1440×900 第一屏仍露出第一張卡片上緣。 */
.im-course-page .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.im-hx-crumb { padding-block: var(--im-s-5) var(--im-s-3); }
.im-hx-crumb .im-crumb { margin: 0; }
.im-hx { --hx-side: max(var(--im-gutter), calc((100vw - var(--im-container)) / 2 + var(--im-gutter))); position: relative; background: var(--im-bg); }
.im-course-page .im-hx__title { margin: 0; font-family: var(--im-font-serif); font-weight: 600; color: var(--im-text-strong); }
.im-hx__kick { margin: 0; font-family: var(--im-font-serif); font-size: 15px; line-height: 1.5; letter-spacing: .3em; }
.im-hx__kick b { font-weight: 500; color: var(--im-group-ink, #A7456F); }
.im-hx__kick span { color: var(--im-text-muted); }
.im-hx-next { padding-block: var(--im-s-6) 0; }
.im-hx__lede { margin: 0; max-width: 46em; font-size: 17px; line-height: 1.85; color: var(--im-text); }
@keyframes im-hx-char { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes im-hx-curtain-up { from { transform: translateY(0); } to { transform: translateY(-101%); visibility: hidden; } }
@keyframes im-hx-curtain-down { from { transform: translateY(0); } to { transform: translateY(101%); visibility: hidden; } }

/* ── 淺色 ── */
.im-hx--tall { --hx-h: clamp(400px, calc(100vh - 76px - 236px), 540px); display: grid; grid-template-columns: auto 1px minmax(0, 1fr); height: var(--hx-h); padding-inline: var(--hx-side); }
.im-hx--tall.is-noimg { grid-template-columns: 1fr; height: auto; }
.im-hx--tall .im-hx__left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--im-s-5); min-height: 0; padding: var(--im-s-2) clamp(1.5rem, 3vw, 2.75rem) 0 0; }
.im-hx--tall .im-hx__kick b, .im-hx--tall .im-hx__kick span { display: block; }
.im-hx--tall .im-hx__kick span { margin-top: var(--im-s-3); }
.im-course-page .im-hx--tall .im-hx__title { writing-mode: vertical-rl; font-size: min(118px, calc((var(--hx-h) - 160px) / (var(--n, 4) * 1.04))); line-height: 1.12; letter-spacing: 0; white-space: nowrap; }
.im-hx--tall .im-hx__title > span[aria-hidden] { display: inline-block; animation: im-hx-char .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.12s + var(--i, 0) * .13s); }
.im-hx--tall .im-hx__line { background: var(--im-brand-ink); }
.im-hx--tall .im-hx__photo { position: relative; margin: 0; height: 100%; min-height: 0; }
.im-hx--tall .im-hx__media { position: absolute; inset: 0; overflow: hidden; border-radius: 0; }
.im-hx--tall .im-hx__media img { width: 100%; height: 100%; object-fit: cover; }
.im-hx--tall .im-hx__code { position: absolute; z-index: 2; bottom: -.14em; right: 16px; display: flex; margin: 0; font-family: var(--im-font-en); font-weight: 500; line-height: 1; letter-spacing: .06em; margin-right: -.06em; color: var(--im-brand); text-shadow: none;
  font-size: min(calc((var(--hx-h) - 160px) / (4 * 1.04)), calc((55vw - 60px) / (var(--k, 6) * .78))); }
.im-hx--tall .im-hx__code > span { display: inline-block; animation: im-hx-char .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.12s + var(--i, 0) * .13s); }
/* 英文代號伸出照片右緣，落在「照片右緣→視窗右緣」空白的 1/3，讓開懸浮鈕（同學院首頁 v19） */
@media (min-width: 1433px) { .im-hx--tall .im-hx__code { right: calc(-1 * min(var(--hx-side) / 3, var(--hx-side) - 92px)); margin-right: -.12em; } }
@media (min-width: 1101px) and (max-width: 1432px) { .im-hx--tall .im-hx__code { right: calc(-1 * max(0px, min(var(--hx-side) / 3, var(--hx-side) - 56px))); } }

/* ── 深色 ── */
.im-hx--cover { padding-top: var(--im-s-4); }
.im-hx--cover .im-hx__top { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--im-s-3) clamp(1.5rem, 3vw, 2.75rem); }
.im-course-page .im-hx--cover .im-hx__title { font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: 1; letter-spacing: .08em; }
.im-hx--cover .im-hx__kick { display: flex; flex-direction: column; gap: 6px; padding-bottom: .55em; }
.im-hx--cover .im-hx__kick b { color: var(--im-group-ink, #eb6da5); }
.im-hx--cover .im-hx__kick i { font-style: normal; font-family: var(--im-font-en); font-size: 14px; letter-spacing: .3em; }
.im-hx--cover .im-hx__img { position: relative; overflow: hidden; margin-top: var(--im-s-6); height: clamp(240px, 30vh, 340px); }
.im-hx--cover .im-hx__img img { width: 100%; height: 100%; object-fit: cover; }
.im-hx--cover .im-hx__img::before, .im-hx--cover .im-hx__img::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 2; background: var(--im-bg); pointer-events: none; animation: im-hx-curtain-up 1.05s cubic-bezier(.77,0,.18,1) .2s both; }
.im-hx--cover .im-hx__img::before { top: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--im-brand-ink) 60%, transparent); }
.im-hx--cover .im-hx__img::after { bottom: 0; animation-name: im-hx-curtain-down; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--im-brand-ink) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .im-hx--tall .im-hx__title > span[aria-hidden], .im-hx--tall .im-hx__code > span { animation: none; }
  .im-hx--cover .im-hx__img::before, .im-hx--cover .im-hx__img::after { display: none; animation: none; }
}

/* ── 平板 ── */
@media (min-width: 751px) and (max-width: 1100px) { .im-hx--tall .im-hx__code { right: 16px; } }

/* ── 手機 ── */
@media (max-width: 750px) {
  .im-hx--tall { display: block; height: auto; padding-inline: 0; }
  .im-hx--tall .im-hx__left { padding: var(--im-s-2) var(--im-gutter) 0; gap: var(--im-s-3); }
  .im-hx--tall .im-hx__kick b, .im-hx--tall .im-hx__kick span { display: inline; }
  .im-hx--tall .im-hx__kick br { display: none; }
  .im-hx--tall .im-hx__kick span { margin: 0 0 0 .8em; }
  .im-course-page .im-hx--tall .im-hx__title { writing-mode: horizontal-tb; font-size: min(56px, calc((100vw - 40px) / 8)); line-height: 1.15; }
  .im-hx--tall .im-hx__title br { display: none; }
  .im-hx--tall .im-hx__line { display: block; height: 1px; margin: var(--im-s-4) var(--im-gutter) 0; }
  .im-hx--tall .im-hx__photo { height: clamp(220px, 56vw, 300px); margin: 0 var(--im-gutter); }
  .im-hx--tall .im-hx__code { right: 44px; bottom: -.14em; font-size: min(48px, calc((100vw - 92px) / (var(--k, 6) * .92))); }
  .im-hx--cover .im-hx__top { flex-direction: column; align-items: flex-start; }
  .im-course-page .im-hx--cover .im-hx__title { font-size: min(56px, calc((100vw - 40px) / 8)); }
  .im-hx--cover .im-hx__kick { flex-direction: row; flex-wrap: wrap; gap: 4px 1em; padding-bottom: 0; }
  .im-hx--cover .im-hx__img { height: 220px; margin-top: var(--im-s-5); }
  .im-hx__lede { font-size: 16px; padding-right: 44px; }
}

/* 第53件：長標題由左向右讀，深色照片維持首屏比例。 */
@media(min-width:751px){
 .im-course-page .im-hx--tall .im-hx__title.is-two{writing-mode:vertical-lr}
 .im-hx--cover .im-hx__img{height:392px}
}

/* 第56件：沒有頁首照片時改為緊湊文字頁首，不保留大塊空照片版位。 */
@media(min-width:751px){
 .im-hx--tall.is-noimg .im-hx__left{flex-direction:row;align-items:center;justify-content:flex-start;gap:32px;padding:32px 0}
 .im-course-page .im-hx--tall.is-noimg .im-hx__title{writing-mode:horizontal-tb;font-size:clamp(40px,4.4vw,64px);white-space:normal}
}

/* 第56件：僅未核可子頁／單篇／全站彙整頁照片，沿用原圖與各版型圓角。 */
:is(.im-course-page,.im-sarch).is-light img{border-radius:4px}
:is(.im-course-page,.im-sarch).is-dark img{border-radius:2px}

/* 業主10/08：課程單篇沿用總覽頁首構圖；長課程標題保留橫排。 */
.im-course-page .im-csingle-hero--hub .im-csingle-hero__inner{position:relative;grid-template-columns:minmax(0,2fr) minmax(0,3fr);padding-inline:max(var(--im-gutter),calc((100% - var(--im-container))/2 + var(--im-gutter)));gap:1px;min-height:540px}
.im-csingle-hero--hub .im-csingle-hero__main{padding-block:32px;padding-right:32px}
.im-csingle-hero--hub .im-csingle-hero__media{border-left:1px solid var(--im-brand-ink)}
.im-csingle-hero--hub .im-csingle-hero__media::after{display:none}
.im-csingle-hero--hub .im-csingle-hero__code{position:absolute;right:36px;bottom:16px;padding:0;border:0;line-height:1.2;background:var(--im-bg);padding:8px 12px}
.im-csingle-hero--hub .im-course-brand{color:var(--im-group-ink)}
.im-course-page.is-dark .im-csingle-hero--hub .im-csingle-hero__inner{display:flex;flex-direction:column;padding-inline:0;gap:0;min-height:0}
.is-dark .im-csingle-hero--hub .im-csingle-hero__main{width:100%;max-width:var(--im-container);margin-inline:auto;padding:24px var(--im-gutter) 32px}
.im-course-page.is-dark .im-csingle-hero--hub .im-csingle-hero__title{font-size:clamp(32px,4vw,64px);color:var(--im-text-strong)}
.is-dark .im-csingle-hero--hub .im-csingle-hero__media{width:100%;height:392px;border:0}
.is-dark .im-csingle-hero--hub .im-csingle-hero__code{position:static;width:100%;max-width:var(--im-container);margin-inline:auto;padding:16px var(--im-gutter);border:0}
.im-course-page .im-csingle-hero--hub.is-textonly .im-csingle-hero__inner{display:block;min-height:0}
.im-csingle-hero--hub.is-textonly .im-csingle-hero__code{position:static;padding:16px 0}
@media(max-width:750px){
 .im-course-page .im-csingle-hero--hub .im-csingle-hero__inner{display:flex;flex-direction:column;padding-inline:0;min-height:0;gap:0}
 .im-csingle-hero--hub .im-csingle-hero__main{padding:24px var(--im-gutter);width:100%}
 .im-course-page .im-csingle-hero--hub .im-csingle-hero__title{font-size:32px;overflow-wrap:anywhere}
 .im-csingle-hero--hub .im-csingle-hero__media,.is-dark .im-csingle-hero--hub .im-csingle-hero__media{height:220px;min-height:220px;width:100%;border:0}
 .im-csingle-hero--hub .im-csingle-hero__code,.is-dark .im-csingle-hero--hub .im-csingle-hero__code{position:static;margin:0;padding:16px var(--im-gutter);font-size:14px;border:0}
}

/* 乙線 10/12（總控裁示）：
   ① 淺色課程單篇的英文代號框照「照片右緣」定位（原本照整條頁首右緣，1440 會跑出內容寬 80px）。規則同學院首頁 v19／總覽頁首：
      1433 以上伸出照片右緣「照片右緣→視窗右緣」空白的 1/3，但至少離視窗右緣 92px（讓開懸浮鈕）；1101～1432 最多伸出到離右緣 56px；1100 以下收在照片內 16px。
      --cs-side＝頁首左右留白（同 .im-csingle-hero__inner 的 padding-inline）。深色、缺圖、手機是一般排列，不受影響。
   ④ 眉標只有「伊美教育」用學院群組粉，學院名不粉（業主規則，同總覽頁首）。 */
@media (min-width: 751px) {
  .im-csingle-hero--hub .im-csingle-hero__code { --cs-side: max(var(--im-gutter), calc((100% - var(--im-container)) / 2 + var(--im-gutter))); right: calc(var(--cs-side) + 16px); }
}
@media (min-width: 1101px) and (max-width: 1432px) { .im-csingle-hero--hub .im-csingle-hero__code { right: calc(var(--cs-side) - max(0px, min(var(--cs-side) / 3, var(--cs-side) - 56px))); } }
@media (min-width: 1433px) { .im-csingle-hero--hub .im-csingle-hero__code { right: calc(var(--cs-side) - min(var(--cs-side) / 3, var(--cs-side) - 92px)); } }
.im-academy .im-csingle-hero--hub .im-course-brand { color: var(--im-text-muted); }
.im-csingle-hero--hub .im-course-brand__group { color: var(--im-group-ink, #A7456F); }
.im-academy.is-dark .im-csingle-hero--hub .im-course-brand__group { color: #EB6DA5; }
@media (min-width: 751px) {
  .im-course-page .im-csingle-hero--hub .im-csingle-hero__title { font-size: clamp(56px, 6.25vw, 90px); line-height: 1.16; }
}

/* 第86件：單篇沿用總覽頁首的三層眉標；所有照片高度只讀設計系統變數。 */
.im-csingle-hero--hub .im-course-brand { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.5; letter-spacing: .12em; }
.im-csingle-hero--hub .im-course-brand__academy { color: var(--im-text-muted); }
.im-csingle-hero--hub .im-course-brand__category { font-size: clamp(1.25rem, 1.7vw, 1.5rem); color: var(--im-text-strong); }
.im-course-page .im-csingle-hero--hub .im-csingle-hero__inner { min-height: var(--im-hero-media-h); }
.is-dark .im-csingle-hero--hub .im-csingle-hero__media { height: var(--im-hero-media-h); }
.im-course-page .im-hx--tall { --hx-h: var(--im-hero-media-h); }
.im-hx--cover .im-hx__img { height: var(--im-hero-media-h); }
.im-chub-list { padding-block-start: var(--im-page-flow-gap); }
.im-chub-list + .im-chub-close, .im-chub-list + .im-ctabar, .im-chub-list + .im-section { margin-block-start: var(--im-page-flow-gap); }
.im-csingle-light { padding-block-end: var(--im-page-flow-gap); }
.im-esingle-cta-wrap, .im-cform-wrap, .im-csingle-related { margin-block-start: var(--im-page-flow-gap); }
@media (max-width: 750px) {
  .im-csingle-hero--hub .im-course-brand { gap: .15rem; }
  .im-csingle-hero--hub .im-course-brand__category { font-size: 20px; }
  .im-csingle-hero--hub .im-csingle-hero__media, .is-dark .im-csingle-hero--hub .im-csingle-hero__media { height: var(--im-hero-media-h-mobile); min-height: var(--im-hero-media-h-mobile); }
  .im-hx--tall .im-hx__photo, .im-hx--cover .im-hx__img { height: var(--im-hero-media-h-mobile); }
}

/* ═════════ 乙線 10/12：成果作品頁（成功案例在上、精選作品在下；業主 10/12 定，第 61 件後台 A 案）═════════
   成功案例：[im_list] 兩欄等寬（第一張不放大）、每頁 6 篇。精選作品：甲＝方格 1:1、4 欄細縫、滑過顯示編號＋課程＋說明（預設）；
   乙＝錯落直幅 4:5、3 欄中欄下錯（學院欄位 im_results_wall_layout＝staggered）。照片圓角淺 4px／深 2px。大圖＝原生 <dialog>。 */
.im-res-sec { padding-block: var(--im-s-8) 0; }
.im-res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--im-s-3) var(--im-s-6); margin-bottom: var(--im-s-6); }
.im-course-page .im-res-head h2 { margin: 0; font-family: var(--im-font-serif); font-size: clamp(28px, 2.6vw, 36px); font-weight: 600; letter-spacing: .12em; color: var(--im-text-strong); }
.im-res-head h2 small { display: block; margin-bottom: 8px; font-family: var(--im-font-en); font-size: 14px; font-weight: 500; letter-spacing: .32em; color: var(--im-group-ink, #A7456F); }
.im-academy.is-dark .im-res-head h2 small { color: #EB6DA5; }
.im-res-head p { margin: 0; max-width: 30em; font-size: 16px; line-height: 1.8; color: var(--im-text); }
.im-res-cases .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-chub-list.im-res-cases .im-card:first-child { grid-column: auto; }
.im-chub-list.im-res-cases .im-card:first-child .im-card__link { grid-template-columns: 40% minmax(0, 1fr); min-height: 15.5rem; }
.im-chub-list.im-res-cases .im-card:first-child .im-card__body { justify-content: flex-start; padding: var(--im-s-6) var(--im-s-6) var(--im-s-5); gap: var(--im-s-3); }
.im-chub-list.im-res-cases .im-card:first-child .im-card__title { font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); }
.im-chub-list.im-res-cases .im-card:first-child .im-card__excerpt { -webkit-line-clamp: 3; font-size: var(--im-fs-sm); }
.im-chub-list.im-res-cases .im-card:first-child .im-card__body::after { margin-block-start: auto; }
.im-res-works .im-pager { margin-block-start: var(--im-s-7); }
.im-res-wall { margin: 0; padding: 0; list-style: none; }
.im-res-work { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--im-surface-3, transparent); cursor: zoom-in; overflow: hidden; text-align: left; }
.im-res-work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.im-academy.is-light .im-res-work { border-radius: 4px; }
.im-academy.is-dark .im-res-work { border-radius: 2px; }
.im-res-work:focus-visible { outline: 2px solid var(--im-brand); outline-offset: 2px; }
/* 甲：方格 */
.im-res-wall--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.im-res-wall--grid .im-res-work { aspect-ratio: 1 / 1; }
.im-res-wall--grid .im-res-work__cap { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 4px; padding: 64px 20px 18px; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.im-res-wall--grid .im-res-work__no { font-family: var(--im-font-en); font-size: 14px; letter-spacing: .3em; color: #F29BC2; }
.im-res-wall--grid .im-res-work__txt { font-family: var(--im-font-serif); font-size: 16px; line-height: 1.6; color: #fff; }
.im-res-wall--grid .im-res-work__sub { font-size: 14px; line-height: 1.6; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.im-res-wall--grid .im-res-work:is(:hover, :focus-visible) img { transform: scale(1.05); }
.im-res-wall--grid .im-res-work:is(:hover, :focus-visible) .im-res-work__cap { opacity: 1; transform: none; }
/* 乙：錯落直幅 */
.im-res-wall--stagger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(24px, 3vw, 48px); padding-bottom: 96px; }
.im-res-wall--stagger li:nth-child(3n+2) { transform: translateY(96px); }
.im-res-wall--stagger .im-res-work { aspect-ratio: 4 / 5; }
.im-res-wall--stagger .im-res-work:hover img { transform: scale(1.04); }
.im-res-wall--stagger .im-res-work__meta { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; font-family: var(--im-font-en); font-size: 14px; letter-spacing: .3em; color: var(--im-text-muted); }
.im-res-wall--stagger .im-res-work__meta::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--im-text) 30%, transparent); }
/* 大圖 */
.im-res-box { max-width: min(1200px, 94vw); max-height: 94vh; padding: 48px 24px 24px; border: 0; background: #0b0b0b; color: #fff; }
.im-res-box::backdrop { background: rgba(0,0,0,.85); }
.im-res-box figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.im-res-box img { display: block; max-width: 100%; max-height: calc(94vh - 180px); width: auto; height: auto; object-fit: contain; }
.im-res-box figcaption { max-width: 46em; font-size: 16px; line-height: 1.8; text-align: center; }
.im-res-box figcaption b { display: block; font-weight: 500; letter-spacing: .12em; color: #F29BC2; }
.im-res-box figcaption b:empty, .im-res-box figcaption span:empty { display: none; }
.im-res-box__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.7); background: none; color: #fff; font-size: 22px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .im-res-work img, .im-res-work__cap { transition: none; } }
@media (max-width: 750px) {
  .im-res-sec { padding-block: var(--im-s-6) 0; }
  .im-res-cases .im-list { grid-template-columns: 1fr; }
  .im-chub-list.im-res-cases .im-card:first-child .im-card__link { grid-template-columns: 1fr; min-height: 0; }
  .im-res-wall--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .im-res-wall--grid .im-res-work__cap { display: none; }   /* 手機沒有滑過：點開大圖看課程與說明 */
  .im-res-wall--stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; padding-bottom: 48px; }
  .im-res-wall--stagger li:nth-child(3n+2) { transform: none; }
  .im-res-wall--stagger li:nth-child(2n) { transform: translateY(48px); }
}
/* 乙線 10/12 快修：學院總覽卡片沒有縮圖時（學院也沒有可補的圖），文字佔滿整張卡，不留左側空圖欄。 */
.im-course-page .im-chub-list .im-card .im-card__link:not(:has(.im-card__thumb)) { grid-template-columns: minmax(0, 1fr); }

/* ═════════ 10/12 業主定案（寬度 1440，派工規則 3）：頁首主視覺一律滿版到視窗右緣，不在內容框右緣硬切 ═════════
   ① 學院總覽淺色頁首（B 版直排大標＋照片）：照片欄延伸到視窗右緣；英文代號改對齊內容右緣（--hx-side＝內容左右留白）。
   ② 課程單篇淺色（總覽式頁首）：照片延伸到視窗右緣；代號框對齊內容右緣。
   ③ 活動／案例／文章單篇（三欄頁首）：拿掉右側英文字樣窄欄，照片延伸到視窗右緣；英文字樣改疊在照片右下、對齊內容右緣（深底白字）。
   英文代號右緣至少離視窗右緣 80px：避開懸浮鈕（甲線 10/12 門檻：1599 以下 44px 鈕、1600 以上 48px 鈕，離邊 24px，再留 8px）。
   舊的 1101／1433 門檻規則（本檔前面）在 751 以上都被這段蓋過，不再作用。手機（750 以下）不變。 */
@media (min-width: 751px) {
  .im-hx--tall { padding-inline: var(--hx-side) 0; }
  .im-hx--tall .im-hx__code { right: max(var(--hx-side), 80px); margin-right: 0; }
  .im-course-page .im-csingle-hero--hub .im-csingle-hero__inner { padding-inline-end: 0; }
  .im-csingle-hero--hub .im-csingle-hero__code { right: max(var(--cs-side), 80px); }
  .im-course-page .im-csingle-hero:not(.im-csingle-hero--hub):not(.is-textonly) .im-csingle-hero__inner { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .im-csingle-hero:not(.im-csingle-hero--hub):not(.is-textonly) .im-csingle-hero__code { --cs-side: max(var(--im-gutter), calc((100% - var(--im-container)) / 2 + var(--im-gutter))); position: absolute; z-index: 2; right: max(var(--cs-side), 80px); bottom: 0; margin-block-end: var(--im-s-6); padding: 10px 16px; border: 0; background: #141210; color: #fff; }
  .im-course-page .im-csingle-hero:not(.im-csingle-hero--hub):not(.is-textonly) .im-csingle-hero__code, .im-course-page .im-csingle-hero:not(.im-csingle-hero--hub):not(.is-textonly) .im-csingle-hero__code * { color: #fff; }
  .im-esingle-hero.im-csingle-hero:not(.im-csingle-hero--hub):not(.is-textonly) .im-csingle-hero__code { margin-block-end: calc(var(--im-s-6) + 4rem); }   /* 活動／案例／文章：避開壓上來的導覽格 */
}

/* ═════════ 10/13 業主定案：精選作品牆「乙 v3」（yi-works.php）═════════
   橫向長卷（左緣對齊內容、右邊滿版到視窗右緣）、等高直幅 4:5、可拖曳／手指滑；左右＝半透明白色玻璃圓鈕（不用粉色），到底右鈕變「查看更多作品」。
   照片框（深色學院首頁 v4 第一區照片框的做法）：最外 1px 學院色細線 → 7px 半透明霧面框壓在照片邊緣（深色＝深霧、淺色＝白／米霧）→ 框內 1px 淡高光線 → 四角微暗角；作品中間不壓。
   背景：超大淡色英文代號，依字數（--k）自動縮放、完整可見。不編號、不篩選、不分頁。 */
.im-res-works { position: relative; overflow: hidden; padding-block-end: var(--im-s-8); --rw-side: max(var(--im-gutter), calc((100% - var(--im-container)) / 2 + var(--im-gutter))); --rw-h: clamp(340px, 30vw, 520px); }
.im-res-ghost { position: absolute; z-index: 0; left: 50%; top: var(--im-s-6); transform: translateX(-50%); margin: 0; font-family: var(--im-font-en); font-weight: 500; line-height: 1; letter-spacing: .04em; white-space: nowrap; pointer-events: none; user-select: none;
  font-size: min(260px, calc((100vw - 2 * var(--im-gutter)) / (var(--k, 6) * .74))); color: color-mix(in srgb, var(--im-text-strong) 6%, transparent); }
.im-res-works > .im-wrap, .im-res-rollwrap { position: relative; z-index: 1; }
.im-res-rollwrap { margin-block-start: var(--im-s-3); }
.im-res-roll { display: flex; gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 4px var(--im-gutter) 4px var(--rw-side); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--rw-side); scrollbar-width: none; cursor: grab; }
.im-res-roll::-webkit-scrollbar { display: none; }
.im-res-roll.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.im-res-roll > li { flex: none; scroll-snap-align: start; }
.im-res-roll .im-res-work { position: relative; display: block; width: calc(var(--rw-h) * .8); height: var(--rw-h); aspect-ratio: auto; padding: 0; overflow: hidden; border: 1px solid var(--im-brand); border-radius: 2px; background: var(--im-surface-3, #222); cursor: zoom-in; }
.im-academy.is-light .im-res-roll .im-res-work { border-color: var(--im-group-ink, #A7456F); border-radius: 4px; }
.im-res-roll .im-res-work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.im-res-roll .im-res-work::before { content: ""; position: absolute; z-index: 1; inset: 0; padding: 7px; background: rgba(14, 11, 10, .42); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); -webkit-mask-composite: xor; pointer-events: none; }
.im-res-roll .im-res-work::after { content: ""; position: absolute; z-index: 2; inset: 7px; border: 1px solid rgba(255, 255, 255, .38); background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .3) 100%); pointer-events: none; }
.im-academy.is-light .im-res-roll .im-res-work::before { background: rgba(250, 244, 236, .5); }
.im-academy.is-light .im-res-roll .im-res-work::after { border-color: rgba(255, 255, 255, .75); background: radial-gradient(ellipse at center, transparent 64%, rgba(70, 48, 36, .18) 100%); }
.im-res-roll .im-res-work:hover img { transform: scale(1.04); }
.im-res-roll .im-res-work:focus-visible { outline: 2px solid var(--im-brand); outline-offset: 3px; }
/* 玻璃圓鈕：圖片區兩側、垂直置中 */
.im-res-nav { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .25s, opacity .25s; }
.im-res-nav:hover { background: rgba(255, 255, 255, .32); }
.im-res-nav:disabled { opacity: 0; pointer-events: none; }
.im-res-nav--prev { left: calc(var(--rw-side) + 12px); }
.im-res-nav--next { right: max(var(--rw-side), 80px); }
.im-academy.is-light .im-res-nav { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .55); color: #1c1917; }
.im-res-nav.is-more { width: auto; padding: 0 22px; border-color: transparent; background: #fff; color: #141210; font-family: var(--im-font-serif); font-size: 16px; letter-spacing: .1em; }
.im-academy.is-light .im-res-nav.is-more { background: #1c1917; color: #fff; }
@media (prefers-reduced-motion: reduce) { .im-res-roll .im-res-work img, .im-res-nav { transition: none; } }
@media (max-width: 750px) {
  .im-res-works { --rw-h: 300px; }
  .im-res-roll { gap: 12px; padding-inline: var(--im-gutter); scroll-padding-inline-start: var(--im-gutter); }
  .im-res-roll .im-res-work::before { padding: 7px; }
  .im-res-roll .im-res-work::after { inset: 7px; }
  .im-res-nav { width: 44px; height: 44px; font-size: 22px; }
  .im-res-nav--prev { left: 8px; }
  .im-res-nav--next { right: 8px; }
  .im-res-nav.is-more { padding: 0 16px; font-size: 14px; }
  .im-res-ghost { top: var(--im-s-4); }
}

/* 10/13 業主補充：排版回到 Codex 乙 v2.1——等寬直幅（約 0.6 寬高比，1440 時 270×455）、偶數張往下錯開 32px（高低交錯），橫向長卷到視窗右緣。
   其餘不變：無編號、兩側玻璃圓鈕、v4 兩層玻璃外框（不壓中間）、背景完整英文代號。手機 205×365、錯開 20px。 */
.im-res-works { --rw-w: clamp(200px, 18.75vw, 300px); --rw-h: calc(var(--rw-w) / .6); --rw-off: 32px; }
.im-res-roll { align-items: flex-start; gap: 18px; padding-block: 4px calc(var(--rw-off) + 8px); }
.im-res-roll .im-res-work { width: var(--rw-w); height: var(--rw-h); }
.im-res-roll > li:nth-child(even) { margin-block-start: var(--rw-off); }
.im-res-nav { top: calc(50% - var(--rw-off) / 2); }
@media (max-width: 750px) {
  .im-res-works { --rw-w: 205px; --rw-h: 365px; --rw-off: 20px; }
  .im-res-roll { gap: 12px; }
}

/* 第 71 件（10/13）：成果頁兩段閱讀節奏拉開；作品牆箭頭以整組錯落照片的視覺中心定位。 */
@media (min-width: 751px) {
  .im-res-cases { padding-block: 120px 72px; }
  .im-res-works { padding-block: 120px 72px; }
  .im-res-nav { top: calc(50% - (var(--rw-off) + 4px) / 2); }   /* 乙線驗收修正：扣掉長卷下方留白（錯開量＋8px，上方 4px），才是錯落照片組的視覺中心 */
}

/* 10/13 業主（第 76 件第 6 點，乙線補改）：學院成果頁「成功案例」卡——圖片固定 4:5 比例填滿（不再隨文字長度變高變矮），
   標題平常與滑過都清楚：深色白字、淺色深字，滑過加底線提示可點。 */
.im-chub-list.im-res-cases .im-card .im-card__link { align-items: start; }

/* 第92件：全站／學院成果牆同圖延伸霧玻璃框帶；不使用 backdrop-filter。 */
.im-res-roll .im-res-work{position:relative;padding:10px;border:0;overflow:hidden;isolation:isolate;background:var(--im-surface-3,#2e2a26)}
.im-res-roll .im-res-work::before,.im-res-roll .im-res-work::after{content:"";position:absolute;inset:0;pointer-events:none}
.im-res-roll .im-res-work::before{z-index:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none;background:var(--im-work-img) center/cover no-repeat;filter:blur(9px);transform:scale(1.08)}
.im-res-roll .im-res-work::after{z-index:1;inset:0;border:0;background:rgba(20,17,14,.13)}
.im-academy.is-light .im-res-roll .im-res-work{background:var(--im-surface,#f8f3ed)}
.im-academy.is-light .im-res-roll .im-res-work::after{background:rgba(255,255,255,.13)}
.im-res-roll .im-res-work img{z-index:2;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);outline:1px solid rgba(255,255,255,.85);outline-offset:0}
.im-chub-list.im-res-cases .im-card__thumb { aspect-ratio: 4 / 5; min-height: 0; height: auto; }
.im-chub-list.im-res-cases .im-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-academy.is-dark .im-res-cases .im-card__title, .im-academy.is-dark .im-res-cases .im-card:hover .im-card__title { color: #fff; }
.im-academy.is-light .im-res-cases .im-card__title, .im-academy.is-light .im-res-cases .im-card:hover .im-card__title { color: var(--im-text-strong); }
.im-res-cases .im-card:hover .im-card__title, .im-res-cases .im-card__link:focus-visible .im-card__title { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (max-width: 750px) { .im-chub-list.im-res-cases .im-card__thumb { aspect-ratio: 16 / 10; } }

/* 第94件：學院課程／成果的半列卡統一為 290px 高、264px 滿高圖欄。 */
.im-chub-list .im-card,.im-chub-list.im-res-cases .im-card{height:var(--im-r94-row-card-h)}
.im-chub-list .im-card__link,.im-chub-list.im-res-cases .im-card__link,.im-chub-list.im-res-cases .im-card:first-child .im-card__link{grid-template-columns:var(--im-r94-row-card-media-w) minmax(0,1fr);height:100%;min-height:0;align-items:stretch}
.im-chub-list .im-card:first-child .im-card__link{grid-template-columns:var(--im-r94-row-card-media-w) minmax(0,1fr);min-height:0}
.im-chub-list .im-card__thumb,.im-chub-list.im-res-cases .im-card__thumb{height:100%;min-height:0;aspect-ratio:auto}
.im-chub-list .im-card__thumb img,.im-chub-list.im-res-cases .im-card__thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:750px){.im-chub-list .im-card,.im-chub-list.im-res-cases .im-card{height:var(--im-r94-row-card-h)}.im-chub-list .im-card__link,.im-chub-list.im-res-cases .im-card__link,.im-chub-list.im-res-cases .im-card:first-child .im-card__link{grid-template-columns:var(--im-r94-row-card-media-w) minmax(0,1fr)}}

/* 第94件：成果頁英文代號提高到深底 11% 白／淺底 9% 深色。 */
.im-academy.is-dark .im-res-ghost{color:rgba(255,255,255,.11)}
.im-academy.is-light .im-res-ghost{color:rgba(36,28,19,.09)}

/* 第94件：作品長卷箭頭回到列表左右外側中央，與全站元件同規格。 */
@media(min-width:751px){.works-viewport{position:relative}.works-viewport .im-res-nav{top:calc(50% - (var(--rw-off) + 4px)/2)!important;bottom:auto!important;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.45);background:transparent;color:rgba(255,255,255,.45);transform:translateY(-50%)!important}.works-viewport .im-res-nav--prev{left:-52px}.works-viewport .im-res-nav--next{right:-52px;left:auto}.works-viewport .im-res-nav:hover{border-color:#fff;color:#fff;background:transparent}.im-academy.is-light .works-viewport .im-res-nav{border-color:rgba(36,28,19,.45);color:rgba(36,28,19,.45);background:transparent}.im-academy.is-light .works-viewport .im-res-nav:hover{border-color:#241c13;color:#241c13;background:transparent}.works-viewport .im-res-nav.is-more{width:36px;padding:0;font-size:0;border-color:rgba(255,255,255,.45);background:transparent}.im-academy.is-light .works-viewport .im-res-nav.is-more{border-color:rgba(36,28,19,.45);background:transparent}}

/* 10/13 業主第 80 件：作品牆兩鈕以同一可視區置中；手機向外保留 12px 手指空間。 */
.works-viewport { position: relative; }
.works-viewport .im-res-nav { top: calc(50% - (var(--rw-off) + 4px) / 2); translate: none; transform: translateY(-50%); }   /* 乙線驗收第 80 件：可視區含長卷下方留白（錯開量＋8px、上方 4px），直接 50% 會比照片組中心低 18px（手機 12px），扣掉才置中（同第 71 件修正） */
@media (max-width: 750px) {
  .works-viewport { margin-inline: 12px; }
  .works-viewport .im-res-nav--prev { left: -12px; }
  .works-viewport .im-res-nav--next { right: -12px; }
}

/* 10/13 業主（線上課程單篇導覽列上方空白 80～100px）：外掛 proto.css 的 .im-px { padding-top: 80px } 是替「全站固定 header」讓位，
   但學院子頁、總覽與單篇都改用自己的學院導覽列（外框第一個子元素 .im-nav），全站 header 不出現，不需要讓位。
   同 10/08 學院首頁（im-px--no-global-header）的處理；這裡用 :has 一次涵蓋所有帶學院導覽的外框（總覽、七種單篇），不用改樣板。 */
.im-px:has(> .im-nav), .im-px.im-course-page:has(> header.im-nav) { padding-top: 0; }
/* 第112件：iPhone 的學院導覽頁也不應保留 proto.css 的全站 header 讓位。 */
@media (max-width: 750px) { .im-px.im-academy:has(> header.im-nav) { padding-top: 0; } }
/* 乙線 10/13 驗收第 77 件：深色單篇大標也要跟總覽頁 h1 一樣大（原本被 10/08 深色 clamp(32px,4vw,64px) 那條蓋過，只有 58～64px）。 */
@media (min-width: 751px) { .im-course-page.is-dark .im-csingle-hero--hub .im-csingle-hero__title { font-size: clamp(56px, 6.25vw, 90px); line-height: 1.16; } }
/* 乙線 10/13 驗收第 77 件：頁首下方的型別資訊列（活動時間地點、課程校區上課方式、案例對應課程、文章發布日期）。
   原本是深色資料橫幅的樣式（大內距、白字），放進頁首後淺色版變成米色底白字，對比只有 1.12；改成緊湊一列、依深淺給字色。 */
.im-csingle-hero .im-esingle-facts { gap: var(--im-s-3) var(--im-s-7); margin: var(--im-s-4) 0 0; padding: 0; background: none; }
.im-csingle-hero .im-esingle-facts::before, .im-csingle-hero .im-esingle-facts::after { content: none; }
.im-csingle-hero .im-esingle-facts dd { font-size: 18px; }
.im-academy.is-light .im-csingle-hero .im-esingle-facts dt { color: var(--im-text-muted); }
.im-academy.is-light .im-csingle-hero .im-esingle-facts dd, .im-academy.is-light .im-csingle-hero .im-esingle-facts dd a { color: var(--im-text-strong); }
.im-academy.is-dark .im-csingle-hero .im-esingle-facts dt { color: #CFC6BA; }
.im-academy.is-dark .im-csingle-hero .im-esingle-facts dd, .im-academy.is-dark .im-csingle-hero .im-esingle-facts dd a { color: #fff; }

/* 第86件收斂：此段放在既有覆寫之後，確保各總覽／單篇只取同一高度 token。 */
@media (min-width: 751px) {
  .im-course-page .im-hx--tall { --hx-h: var(--im-hero-media-h); }
  .im-hx--cover .im-hx__img { height: var(--im-hero-media-h); }
  .im-course-page .im-csingle-hero--hub .im-csingle-hero__inner { min-height: var(--im-hero-media-h); }
  .is-dark .im-csingle-hero--hub .im-csingle-hero__media { height: var(--im-hero-media-h); }
}
/* 第86件乙線驗收修正：區塊之間只留一份節奏（原本「上一區的 margin＋這一區自己的 padding」疊成 145～213px）。 */
.im-csingle-light > .im-esingle-cta-wrap, .im-csingle-light > .im-cform-wrap, .im-csingle-light > .im-csingle-related { margin-block-start: 0; padding-block-start: var(--im-page-flow-gap); }
.im-chub > .im-chub-guide-wrap, .im-chub > .im-ehub-next-wrap, .im-chub > .im-cform-wrap { margin-block-start: 0; padding-block-start: var(--im-page-flow-gap); }

/* 2026-10-15 甲線（驗收第 94 件修正）：
   ① 作品長卷是滿版到視窗邊，左右外側沒有空間（第 94 件的 -16px 讓兩顆都跑出畫面）：改放在左右邊距裡，離視窗邊 2px，垂直置中照第 94 件。
      捲到底時右鈕變成「查看更多作品 →」，不能被固定成 36px 寬。手機：不放箭頭，但捲到底時保留「查看更多作品」按鈕，放在長卷下方左邊。
   ② 半列卡：圖欄寬改成「最多 264px、最多卡寬 60%」，窄卡（平板 3 欄、手機）文字欄才不會只剩幾十 px；圖片一律蓋滿整個卡高，不留空。 */
@media(min-width:751px){
  .works-viewport .im-res-nav--prev{left:2px!important;right:auto!important}
  .works-viewport .im-res-nav--next{right:2px!important;left:auto!important}
  .works-viewport .im-res-nav.is-more{width:auto!important;padding:0 18px!important;border-radius:999px}
}
@media(max-width:750px){
  .works-viewport:has(.im-res-nav--next.is-more){padding-bottom:48px}
  .works-viewport .im-res-nav--next.is-more{display:grid!important;position:absolute;top:auto!important;bottom:0;left:0;right:auto;width:auto;height:36px;padding:0 18px;transform:none!important;translate:none!important}
}
.im-chub-list .im-card__link,.im-chub-list.im-res-cases .im-card__link,.im-chub-list .im-card:first-child .im-card__link,.im-chub-list.im-res-cases .im-card:first-child .im-card__link{grid-template-columns:min(var(--im-r94-row-card-media-w,264px),60%) minmax(0,1fr)!important}
.im-chub-list .im-card__thumb,.im-chub-list.im-res-cases .im-card__thumb{position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;align-self:stretch!important;overflow:hidden}
.im-chub-list .im-card__thumb img,.im-chub-list.im-res-cases .im-card__thumb img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover}

/* 甲線 10/15：手機作品長卷不放箭頭（捲到底的「查看更多作品」按鈕例外，見上一段） */
@media(max-width:750px){.works-viewport .im-res-nav{display:none!important}.works-viewport .im-res-nav--next.is-more{display:grid!important}}

/* 甲線 10/15（驗收第 94 件修正 二）：卡片內容（三行標題＋摘要）會把格線撐到 324px，圖片超出 290 卡高被切；
   格線列高固定為卡高，1100 以下標題、摘要各最多 2 行，文字不再撐高。 */
.im-chub-list .im-card__link{grid-template-rows:minmax(0,1fr)!important;height:100%!important}
.im-chub-list .im-card__body{min-height:0;overflow:hidden}
@media(max-width:1100px){
  .im-chub-list .im-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .im-chub-list .im-card__excerpt{-webkit-line-clamp:2!important}
}

/* ── 2026-10-15 甲線（總控決定：箭頭不可被懸浮鈕蓋住）──
   視窗 1699 以下，列表右外側會撞到右下懸浮鈕那一欄（1599 以下鈕在離右 4～48px，1600 以上在 24～72px；
   要等到約 1688px 寬，外側箭頭才放得下又不碰到懸浮鈕），所以 1699 以下兩顆箭頭都改貼在列表內緣 8px、加 45% 半透明底；
   1700 以上照第 94 件放在列表左右外側。箭頭層級低於懸浮鈕。手機（750 以下）本來就沒有箭頭。 */
@media(min-width:751px) and (max-width:1699px){
  .works-viewport .im-res-nav{z-index:2}
  .works-viewport .im-res-nav--prev{left:calc(var(--rw-side,40px) + 8px)!important}
  .works-viewport .im-res-nav--next{right:calc(var(--rw-side,40px) + 8px)!important}
  .im-academy.is-dark .works-viewport .im-res-nav:not(.is-more){background:rgba(0,0,0,.45)!important}
  .im-academy.is-light .works-viewport .im-res-nav:not(.is-more){background:rgba(255,255,255,.45)!important}
}
/* 1700 以上：長卷是滿版，外側＝內容邊距裡（左右各離內容邊緣 44px），不碰懸浮鈕 */
@media(min-width:1700px){
  .works-viewport .im-res-nav--prev{left:calc(var(--rw-side,40px) - 44px)!important}
  .works-viewport .im-res-nav--next{right:calc(var(--rw-side,40px) - 44px)!important}
}

/* 乙線 10/15（驗收第 98 件）：學院文章頁（/academy/{院}/insights/，academy-hub.php）跟 /insights/ 同一套：
   第一張不放大、一排 2 張半列卡；1024 以下改上圖下文（750～1024 一排 2、750 以下一排 1）。上面第 94 件有 !important，這裡也要。 */
.im-chub--insights .im-chub-list .im-card:first-child { grid-column: auto; }
.im-chub--insights .im-chub-list .im-card:first-child .im-card__body { justify-content: flex-start; padding: var(--im-s-5); gap: var(--im-s-2); }
.im-chub--insights .im-chub-list .im-card:first-child .im-card__title { font-size: var(--im-fs-lg); }
.im-chub--insights .im-chub-list .im-card:first-child .im-card__excerpt { -webkit-line-clamp: 3; font-size: var(--im-fs-sm); }
@media (max-width: 1024px) {
  .im-chub--insights .im-chub-list .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-chub--insights .im-chub-list .im-card { height: auto !important; }
  .im-chub--insights .im-chub-list .im-card .im-card__link { display: flex !important; flex-direction: column; height: auto !important; }
  .im-chub--insights .im-chub-list .im-card .im-card__thumb { flex: none; width: 100%; aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 750px) { .im-chub--insights .im-chub-list .im-list { grid-template-columns: 1fr; } }

/* R111: course hero card and related cards. */
.im-chub--courses .im-card:hover .im-card__title,.im-chub--courses .im-card:focus-within .im-card__title{color:var(--im-text-strong)}/* 甲線 10/15 驗收第 111 件：原本 inherit 會吃到連結色，hover 時標題輕微變色 */.im-chub--courses .im-card__body::after{color:#d7b17b;transition:transform .2s ease,text-decoration-color .2s ease}.im-chub--courses .im-card:hover .im-card__body::after,.im-chub--courses .im-card:focus-within .im-card__body::after{transform:translateX(4px);text-decoration:underline;text-underline-offset:5px}.im-academy.is-light .im-chub--courses .im-card__body::after{color:var(--im-text-strong);text-decoration-color:#d7b17b}.im-chub--courses .im-card:first-child{height:360px}.im-chub--courses .im-card:first-child .im-card__link{grid-template-columns:1fr 1fr!important;height:360px!important}.im-chub--courses .im-card:first-child .im-card__thumb,.im-chub--courses .im-card:first-child .im-card__thumb img{height:100%!important}.im-csingle-related .im-list{grid-template-columns:repeat(2,minmax(0,1fr))}.im-csingle-related .im-card{height:290px}.im-csingle-related .im-card__link{display:grid;grid-template-columns:min(264px,48%) minmax(0,1fr);height:100%}.im-csingle-related .im-card__thumb{height:100%;min-height:0}.im-csingle-related .im-card__thumb img{width:100%;height:100%;object-fit:cover}@media(max-width:1024px){.im-chub--courses .im-card:first-child,.im-chub--courses .im-card:first-child .im-card__link{height:auto!important}.im-chub--courses .im-card:first-child .im-card__link{display:flex!important;flex-direction:column}.im-chub--courses .im-card:first-child .im-card__thumb{height:220px!important}.im-csingle-related .im-card{height:auto}.im-csingle-related .im-card__link{display:flex;flex-direction:column}.im-csingle-related .im-card__thumb{height:210px}}

/* 2026-10-15 甲線（驗收第 111 件）：單篇「本院其他」原本有一條用 ID 的舊規則（.im-academy #single-related .im-list 一排 3），
   權重高過上面第 111 件的「一排 2」，畫面還是一排 3。這裡用同樣帶 ID 的寫法蓋過；手機（750 以下）一排 1 照舊。 */
.im-academy #single-related.im-csingle-related .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 750px) { .im-academy #single-related.im-csingle-related .im-list { grid-template-columns: minmax(0, 1fr); } }
/* 甲線 10/16 驗收第 112 件：原稿「免費了解」連到 #im-free-form 時，表單區頂端讓開固定的導覽列（手機原本標題只露出 3px 的空間） */
#im-free-form { scroll-margin-top: 74px; }
/* 甲線 10/16 第三十三次④：學院師資子頁照片高度 0。上面「半列卡圖欄撐滿」那條把所有子頁卡圖框設成 aspect-ratio:auto!important，
   師資卡是直式（圖在上），圖又是絕對定位 → 圖框高 0。師資卡改回決議的 3:4，圖 cover、偏上避免裁到臉。 */
.im-chub--instructors .im-chub-list .im-card__thumb { aspect-ratio: 3 / 4 !important; height: auto !important; }
.im-chub--instructors .im-chub-list .im-card__thumb img { object-fit: cover; object-position: 50% 15% !important; }
/* 卡片本身被半列卡規則固定成 290px 高、圖框會被壓扁：師資卡改成內容多高就多高，圖框不收縮 */
.im-chub--instructors .im-chub-list .im-card, .im-chub--instructors .im-chub-list .im-card .im-card__link { height: auto !important; }
.im-chub--instructors .im-chub-list .im-list { grid-template-rows: none !important; grid-auto-rows: auto !important; }
.im-chub--instructors .im-chub-list .im-card__thumb { flex: none !important; width: 100%; }
/* 甲線 10/16 第三十三次⑤（業主）：學院活動頁（/academy/{院}/events/）hover 跟課程卡一致——
   標題不變色、不加底線（原本共用時間軸會出現白色底線）；只有行動字「了解活動」右移 4px＋金色底線。只限學院活動子頁，首頁時間軸不動。 */
.im-chub--events .im-evt__title a:hover,.im-chub--events .im-evt__title a:focus-visible{text-decoration:none;color:inherit}
.im-chub--events .im-evt__go{transition:transform .2s ease,text-decoration-color .2s ease;text-decoration:underline transparent;text-underline-offset:5px}
.im-chub--events .im-evt__item:hover .im-evt__go,.im-chub--events .im-evt__item:focus-within .im-evt__go{transform:translateX(4px);text-decoration-color:#d7b17b}
@media (prefers-reduced-motion:reduce){.im-chub--events .im-evt__go{transition:none}}
/* 甲線 10/16 第三十三次⑤（業主）：學院優勢子頁（/academy/{院}/advantages/）改成跟學院文章子頁同版型——
   單一列表、半列卡、一排 2、第一張不放大；1024 以下上圖下文（750～1024 一排 2、750 以下一排 1）。規則逐條比照上面 .im-chub--insights。 */
.im-chub--advantages .im-chub-hero { min-height: clamp(300px, 26.5vw, 420px); }
.im-chub--advantages .im-chub-hero__lede { max-width: 22em; }
.im-chub--advantages .im-chub-list .im-card__body::after { content: "看說明　→"; }
.im-chub--advantages .im-chub-list .im-card__link { min-height: clamp(15rem, 20vw, 19rem); }
.im-chub--advantages .im-chub-list .im-card:first-child { grid-column: auto; }
.im-chub--advantages .im-chub-list .im-card:first-child .im-card__body { justify-content: flex-start; padding: var(--im-s-5); gap: var(--im-s-2); }
.im-chub--advantages .im-chub-list .im-card:first-child .im-card__title { font-size: var(--im-fs-lg); }
.im-chub--advantages .im-chub-list .im-card:first-child .im-card__excerpt { -webkit-line-clamp: 3; font-size: var(--im-fs-sm); }
.im-chub--advantages .im-chub-list .im-card:not(:first-child) .im-card__excerpt { -webkit-line-clamp: 2; }
/* 優勢卡沒有特色圖片時不補圖（丁線原規則：圖池混有浮水印、遮眼條照）：文字欄占滿整張卡，不要擠在左邊圖欄的位置 */
.im-chub--advantages .im-chub-list .im-card__link:not(:has(.im-card__thumb)) { display: flex !important; flex-direction: column; grid-template-columns: none !important; }
.im-chub--advantages .im-chub-list .im-card__link:not(:has(.im-card__thumb)) .im-card__body { flex: 1; width: 100%; max-width: none; }
@media (max-width: 1024px) {
  .im-chub--advantages .im-chub-list .im-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-chub--advantages .im-chub-list .im-card { height: auto !important; }
  .im-chub--advantages .im-chub-list .im-card .im-card__link { display: flex !important; flex-direction: column; height: auto !important; }
  .im-chub--advantages .im-chub-list .im-card .im-card__thumb { flex: none; width: 100%; aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 750px) {
  .im-chub--advantages .im-chub-hero { min-height: 0; }
  .im-chub--advantages .im-chub-list .im-card__link { min-height: 0; }
  .im-chub--advantages .im-chub-list .im-list { grid-template-columns: 1fr; }
}
/* 甲線 10/16 第三十三之二：單篇「本院其他師資」卡片的照片焦點也偏上，避免切到臉 */
.im-csingle-related .im-list--instructor .im-card__thumb img, #single-related .im-list--instructor .im-card__thumb img { object-fit: cover; object-position: 50% 15% !important; }
/* 甲線 10/16 第三十三之二：單篇表單區開頭的 #im-form 錨點（跟 #im-free-form 同一區），跳轉時一樣讓開導覽列 */
#im-free-form > .im-cform-anchor { display: block; height: 0; scroll-margin-top: 74px; }
/* 甲線 10/16（總控）：單篇頁首照片預設偏上 50% 25%（寬框從正中裁會切到人像的臉）；後台「頁首對焦位置」有填時由行內樣式蓋過 */
.im-csingle-hero__media img { object-fit: cover; object-position: 50% 25%; }

/* ═════════ 決議 159（業主 10/18）：七種單篇頁首＝設計稿 深1 片名卡＋B 過場（深色學院）／淺1 總覽同構（淺色學院）。甲線 2026-10-18 ═════════
   設計稿：13_新視覺改版/回報/甲線_單篇頁首六案_2026-10-18/。結構由 single-common.php 的 im_single_hero_html() 輸出（.im-sx）。
   動畫一進頁播一次；系統設定「減少動態效果」時不播、直接顯示完成畫面。 */
.im-sx { position: relative; background: var(--im-bg); color: var(--im-text); overflow: hidden; }
.im-sx p { margin: 0; }
.im-sx .im-sx__top { padding-block: 18px 0; }
.im-sx .im-crumb { margin: 0; }
.im-sx__title { margin: 0; font-family: var(--im-font-serif); font-weight: 500; color: var(--im-text-strong); line-height: 1.12; letter-spacing: .04em; }
.im-sx__c { display: inline-block; }
.im-sx__w { display: inline-block; white-space: nowrap; }
.im-sx__place { display: flex; flex-wrap: wrap; align-items: baseline; font: 500 14px/1.7 var(--im-font-sans); letter-spacing: .32em; color: var(--im-text-muted); }
.im-sx__place i { font-style: normal; white-space: pre; }
.im-sx__place a { color: inherit; }
.im-sx__plabel { margin-right: .6em; color: var(--im-text); letter-spacing: .12em; }
.im-sx__imgel { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
@keyframes im-sx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes im-sx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes im-sx-blur { from { opacity: 0; filter: blur(10px); transform: scale(1.04); } to { opacity: 1; filter: none; transform: none; } }
@keyframes im-sx-cur-up { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes im-sx-cur-down { from { transform: translateY(0); } to { transform: translateY(101%); } }
@keyframes im-sx-zoom { from { transform: scale(1.08); } to { transform: none; } }
@keyframes im-sx-settle { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

/* ── 深色：片名卡 ── */
.im-sx--dark .im-sx__card { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 3.5vw, 48px); text-align: center; }
.im-sx__kick { margin-bottom: 14px !important; font: 700 15px/1 var(--im-font-sans); letter-spacing: .34em; padding-left: .34em; color: var(--im-text-strong); animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) .35s both; }
.im-sx__sub { margin-bottom: clamp(14px, 2vw, 26px) !important; font: 500 14px/1.4 var(--im-font-sans); letter-spacing: .3em; padding-left: .3em; color: var(--im-brand-ink); animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) .85s both; }
.im-sx__sub i { font-style: normal; margin: 0 .4em; }
.im-sx--dark .im-sx__title { font-size: min(116px, calc((100vw - 48px) / ((var(--n) + .6) * 1.06))); letter-spacing: .06em; white-space: nowrap; }
.im-sx--dark .im-sx__title.is-long { white-space: normal; text-wrap: balance; font-size: min(96px, calc((100vw - 48px) / ((var(--n) + .6) * 1.1))); line-height: 1.2; }   /* 超過 10 字：兩行平均 */
.im-sx--dark .im-sx__title .im-sx__c { animation: im-sx-blur 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); }
.im-sx__en { margin-top: clamp(14px, 1.6vw, 22px) !important; font: 400 clamp(16px, 1.6vw, 24px)/1 Montserrat, sans-serif; letter-spacing: .62em; padding-left: .62em; color: var(--im-text-muted); animation: im-sx-fade 1.2s ease 2.2s both; }
.im-sx__img { position: relative; height: var(--im-hero-media-h); overflow: hidden; }   /* 業主 10/18「統一」：＝深色學院首頁照片高 */
.im-sx__img .im-sx__imgel { animation: im-sx-zoom 7s ease-out 2.6s both; }
.im-sx__img::before, .im-sx__img::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 2; background: var(--im-bg); pointer-events: none; }
.im-sx__img::before { top: 0; animation: im-sx-cur-up 1.1s cubic-bezier(.77,0,.18,1) 2.6s both; }
.im-sx__img::after { bottom: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--im-brand-ink) 60%, transparent); animation: im-sx-cur-down 1.1s cubic-bezier(.77,0,.18,1) 2.6s both; }
/* B 過場：照片與原稿第一區之間的一段黑底，左摘要、右地點，下方整條金線（業主 10/18 選 B） */
.im-sx__band .im-wrap { padding-block: 36px 44px; animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) 3.6s both; }
.im-sx--dark.is-noimg .im-sx__band .im-wrap { animation-delay: 2.4s; }
.im-sx__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; }
.im-sx--dark .im-sx__lede { flex: 1 1 28em; max-width: 46em; font: 500 17px/1.8 var(--im-font-sans); letter-spacing: .06em; color: var(--im-text-strong); }
.im-sx__rule { display: flex; align-items: center; gap: 16px; margin-top: 30px; text-decoration: none; font: 500 13px/1 var(--im-font-sans); letter-spacing: .36em; color: var(--im-brand-ink); }
.im-sx__row:empty + .im-sx__rule { margin-top: 0; }
.im-sx__rule i { flex: 1; height: 1px; background: var(--im-brand-ink); opacity: .7; }
.im-sx__rule::after { content: ""; width: 9px; height: 9px; border-right: 1px solid var(--im-brand-ink); border-bottom: 1px solid var(--im-brand-ink); transform: rotate(45deg) translateY(-3px); }

/* ── 淺色（業主 10/18「統一」）：照片框＝淺色學院首頁（共用變數 --im-hx-*，定義在 im-design-system.css）。
   左欄：「伊美／教育」「XX／學院」兩字一行在上、課名橫書在下（字級依左欄寬度：每行約 --tl 個字）；摘要與地點在照片下方。 */
.im-sx--light .im-sx__grid { display: grid; grid-template-columns: var(--im-hx-cols); height: var(--im-hero-media-h); padding-right: var(--im-hx-side); margin-top: 18px; }
.im-sx--light.is-noimg .im-sx__grid { grid-template-columns: 1fr; height: auto; }
.im-sx__left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 0; padding: 30px 40px 6px var(--im-hx-side); }
.im-sx__kick2 { display: flex; flex-direction: column; gap: 14px; font: 400 15px/1.55 var(--im-font-sans); letter-spacing: .3em; animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) .2s both; }
.im-sx__kick2 b { font-weight: 500; color: rgb(167, 69, 111); }
.im-sx__kick2 span { color: var(--im-text-muted); }
.im-sx--light .im-sx__title { font-size: min(72px, calc((((100vw - var(--im-hx-side) - 1px) * .42 / 1.42) - var(--im-hx-side) - 40px) / (var(--tl, 4) * 1.2))); line-height: 1.2; color: var(--im-text-strong); text-wrap: balance; }
.im-sx--light .im-sx__title .im-sx__c { animation: im-sx-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); }
.im-sx__line { background: var(--im-brand-ink); }
.im-sx__photo { position: relative; margin: 0; height: 100%; min-height: 0; overflow: visible; }
.im-sx__media { position: absolute; inset: 0; overflow: hidden; }
.im-sx__media .im-sx__imgel { animation: im-sx-settle 2.4s cubic-bezier(.2,.7,.2,1) .6s both; }
.im-sx__code { position: absolute; z-index: 2; right: var(--im-hx-code-right); bottom: -.14em; display: flex; margin: 0 var(--im-hx-code-mr) 0 0; font: 500 min(var(--im-hx-code-base), calc(var(--im-hx-code-span) / var(--k, 6)))/1 Montserrat, sans-serif; letter-spacing: .06em; color: var(--im-brand); }
.im-sx__code span { display: inline-block; animation: im-sx-rise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d); }
.im-sx__next { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 32px; flex-wrap: wrap; padding-top: 26px; }
.im-sx--light .im-sx__lede { flex: 1 1 28em; max-width: 46em; font: 400 17px/1.9 var(--im-font-sans); letter-spacing: .06em; animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) 1.8s both; }
.im-sx--light .im-sx__place { animation: im-sx-rise .9s cubic-bezier(.2,.7,.2,1) 2.1s both; }

@media (max-width: 750px) {
  .im-sx__kick { font-size: 13px; }
  .im-sx__sub { font-size: 12px; letter-spacing: .24em; }
  .im-sx__img { height: var(--im-hero-media-h-mobile); }
  .im-sx__band .im-wrap { padding-block: 26px 32px; }
  .im-sx__row { flex-direction: column; gap: 10px; }
  .im-sx--dark .im-sx__lede { flex: none; font-size: 15px; }
  .im-sx__rule { margin-top: 22px; }
  .im-sx__place { font-size: 13px; letter-spacing: .24em; }
  /* 淺色手機＝學院首頁手機：眉標一行、課名在上、照片左右各留 20px、代號照共用變數 */
  .im-sx--light .im-sx__grid { display: block; height: auto; padding-right: 0; margin-top: 10px; }
  .im-sx__left { padding: 14px 20px 16px; gap: 10px; }
  .im-sx__kick2 { flex-direction: row; gap: 12px; font-size: 13px; }
  .im-sx__kick2 br { display: none; }
  .im-sx--light .im-sx__title { font-size: clamp(28px, 8.4vw, 38px); }
  .im-sx__line { display: block; height: 1px; margin: 0 20px; }
  .im-sx__photo { height: var(--im-hero-media-h-mobile); margin: 0 20px; }
  .im-sx__code { bottom: 12px; letter-spacing: .04em; }
  .im-sx__next { flex-direction: column; gap: 8px; padding-top: 18px; }
  .im-sx--light .im-sx__lede { flex: none; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .im-sx *, .im-sx *::before, .im-sx *::after { animation: none !important; }
  .im-sx__img::before, .im-sx__img::after { display: none; }
}

/* 業主 10/18「統一」：淺色學院六個總覽頁頁首照片框＝淺色學院首頁（共用變數 --im-hx-*，定義在 im-design-system.css）。甲線 2026-10-18 */
@media (min-width: 751px) {
  .im-course-page .im-hx--tall { grid-template-columns: var(--im-hx-cols); height: var(--im-hero-media-h); padding-inline: 0 var(--im-hx-side); }
  .im-course-page .im-hx--tall .im-hx__left { padding-left: var(--im-hx-side); padding-right: 40px; }
  .im-hx--tall .im-hx__code { font-size: min(var(--im-hx-code-base), calc(var(--im-hx-code-span) / var(--k, 6))); right: var(--im-hx-code-right); margin-right: var(--im-hx-code-mr); bottom: -.14em; letter-spacing: .06em; }
}
@media (max-width: 750px) {
  .im-hx--tall .im-hx__photo { height: var(--im-hero-media-h-mobile); margin: 0 20px; overflow: visible; }
  .im-hx--tall .im-hx__code { font-size: min(var(--im-hx-code-base), calc(var(--im-hx-code-span) / var(--k, 6))); right: var(--im-hx-code-right); margin-right: 0; bottom: 12px; letter-spacing: .04em; }
}

/* 2026-10-18 甲線（第三十八次，業主：頁首與原稿之間「隔一個不小的區塊」）：新頁首（.im-sx，深色的 B 過場、淺色的頁首）之後，
   原稿第一區前留 96px（1024 以下 80px、手機 56px）。原本只有原稿容器的 20px（手機 0），兩張大圖貼得太近。 */
.im-sx + .im-csingle-light > .im-esingle-body { padding-block-start: 96px !important; }
@media (max-width: 1100px) { .im-sx + .im-csingle-light > .im-esingle-body { padding-block-start: 80px !important; } }
@media (max-width: 750px) { .im-sx + .im-csingle-light > .im-esingle-body { padding-block-start: 56px !important; } }

/* ═════════ 業主 10/18 追加（看線上 1920）：甲線 2026-10-18 ═════════ */
/* ① 單篇（深淺）：只有照片有動畫，文字直接出現（同學院首頁淺色）；照片動畫提早到 0.2 秒開始 */
.im-sx .im-sx__kick, .im-sx .im-sx__sub, .im-sx .im-sx__c, .im-sx .im-sx__en, .im-sx .im-sx__band .im-wrap,
.im-sx .im-sx__kick2, .im-sx .im-sx__lede, .im-sx .im-sx__place, .im-sx .im-sx__code span { animation: none !important; }
.im-sx__img::before { animation-delay: .2s; }
.im-sx__img::after { animation-delay: .2s; }
.im-sx__img .im-sx__imgel { animation-delay: .2s; }
.im-sx__media .im-sx__imgel { animation-delay: .2s; }
/* ② 深色單篇照片下方：置中，先地區（同深色學院首頁照片下方那行），再一行摘要，下方保留金線「課程介紹」 */
.im-sx__band .im-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 28px 44px; }
.im-sx__band .im-sx__place { justify-content: center; font: 500 14px/1.4 "Noto Sans TC", var(--im-font-sans); letter-spacing: .2em; color: var(--im-text-muted); }
.im-sx__band .im-sx__place i { white-space: pre; }
.im-sx__band .im-sx__lede { flex: none; max-width: 46em; margin-top: 14px !important; font: 400 18px/1.9 "Noto Sans TC", var(--im-font-sans); letter-spacing: 0; color: var(--im-text-strong); }
.im-sx__band .im-sx__place + .im-sx__lede { margin-top: 16px !important; }
.im-sx__band .im-sx__rule { align-self: stretch; margin-top: 28px; }
.im-sx__band > .im-wrap > :first-child { margin-top: 0 !important; }
/* ③ 字體：三頁中文標題一律宋體（Noto Serif TC）粗體 600（＝學院首頁） */
.im-sx .im-sx__title, .im-course-page .im-hx--tall .im-hx__title { font-family: var(--im-font-serif); font-weight: 600; }
/* ④ 淺色總覽頁直書標題（最新活動等）＝單篇原本直書「專業課程」的大小（共用變數 --im-hx-vtitle-max） */
@media (min-width: 751px) { .im-course-page .im-hx--tall .im-hx__title { font-size: min(var(--im-hx-vtitle-max), calc(560px / var(--n, 4))); } }
@media (max-width: 750px) {
  .im-sx__band .im-wrap { padding-block: 22px 32px; }
  .im-sx__band .im-sx__place { font-size: 13px; letter-spacing: .16em; }
  .im-sx__band .im-sx__lede { font-size: 15px; }
}
/* 甲線 10/18：總覽頁首 <picture>（手機版頁首圖）不多一層盒子，照片尺寸規則照舊作用在 img 上 */
.im-hx__pic { display: contents; }

/* ═════════ 業主 10/19：淺色總覽頁、單篇頁首幾何＝淺色學院首頁（共用變數 --im-hx-*，im-design-system.css）。甲線 2026-10-19 ═════════
   照片緊貼導覽列；麵包屑放進左欄頂端（一行時剛好落在學院首頁眉標上方的留白裡，不推動照片）；
   眉標頂＝照片上緣＋--im-hx-pad-top；直書大標底＝照片下緣－--im-hx-pad-bottom；照片下方那一行＝照片下緣＋--im-hx-next-gap。 */
@media (min-width: 751px) {
  .im-course-page .im-hx--tall, .im-sx--light .im-sx__grid { margin-top: 0; grid-template-columns: var(--im-hx-cols); height: var(--im-hero-media-h); padding: 0 var(--im-hx-side) 0 0; }
  .im-course-page .im-hx--tall .im-hx__left, .im-sx--light .im-sx__left { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; min-height: 0; padding: 8px 40px var(--im-hx-pad-bottom) var(--im-hx-side); }
  .im-hx__head .im-crumb, .im-sx__head .im-crumb { margin: 0 0 calc(var(--im-hx-pad-top) - 8px - 16px); font-size: 12px; line-height: 16px; }
  .im-hx__head .im-hx__kick, .im-sx__head .im-sx__kick2 { margin: 0; }
  /* 單篇：直書類別（大小＝總覽頁直書）＋右側課名，底部對齊 */
  .im-sx--light .im-sx__left { padding-right: 16px; }
  .im-sx__foot { display: flex; align-items: flex-end; gap: 18px; width: 100%; }
  .im-sx__big { flex: none; margin: 0; writing-mode: vertical-rl; font: 600 min(var(--im-hx-vtitle-max), calc(560px / var(--n, 4)))/1 var(--im-font-serif); letter-spacing: .06em; color: var(--im-text-strong); }
  .im-sx--light .im-sx__title { flex: 1 1 auto; min-width: 0; font-size: clamp(26px, calc((((100vw - var(--im-hx-side) - 1px) * .42 / 1.42) - var(--im-hx-side) - 34px - var(--im-hx-vtitle-max)) / (var(--tl, 4) * 1.2)), 64px); line-height: 1.25; }
  /* 照片下方那一行 */
  .im-sx--light .im-sx__next, .im-course-page .im-hx-next { padding-top: var(--im-hx-next-gap); }
  .im-sx--light .im-sx__next p, .im-course-page .im-hx-next p { margin-top: 0; }
}
@media (max-width: 750px) {
  .im-hx__head .im-crumb, .im-sx__head .im-crumb { margin: 0 0 10px; }
  .im-sx__foot { display: block; }
  .im-sx__big { margin: 0 0 6px; writing-mode: horizontal-tb; font: 500 13px/1 var(--im-font-sans); letter-spacing: .3em; color: var(--im-text); }
  .im-sx--light .im-sx__grid { margin-top: 0; }
}
@media (min-width: 751px) {
  /* 麵包屑固定一行（四層都在；最後一層＝本頁標題，太長時以「…」收尾），眉標位置才會跟學院首頁一樣 */
  .im-hx__head .im-crumb, .im-sx__head .im-crumb { display: flex; flex-wrap: nowrap; max-width: 100%; overflow: hidden; white-space: nowrap; }
  .im-hx__head .im-crumb li, .im-sx__head .im-crumb li { flex: none; }
  .im-hx__head .im-crumb li:last-child, .im-sx__head .im-crumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .im-hx__head .im-crumb li:last-child > *, .im-sx__head .im-crumb li:last-child > * { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 750px) {
  .im-hx__head .im-crumb, .im-sx__head .im-crumb { display: flex; flex-wrap: nowrap; max-width: 100%; overflow: hidden; white-space: nowrap; }
  .im-hx__head .im-crumb li, .im-sx__head .im-crumb li { flex: none; }
  .im-hx__head .im-crumb li:last-child, .im-sx__head .im-crumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* 甲線 10/19：單篇「本院其他師資」改成直式人像卡——一排 4（手機一排 2），照片 3:4、焦點偏上，同學院師資子頁 */
.im-academy #single-related.im-csingle-related .im-list.im-list--instructor { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#single-related .im-list--instructor .im-card, #single-related .im-list--instructor .im-card__link { height: auto !important; min-height: 0 !important; }
#single-related .im-list--instructor .im-card__link { display: flex !important; flex-direction: column !important; }
#single-related .im-list--instructor .im-card__thumb { position: relative !important; flex: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 4 !important; overflow: hidden; }
#single-related .im-list--instructor .im-card__thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 15% !important; }
@media (max-width: 750px) { .im-academy #single-related.im-csingle-related .im-list.im-list--instructor { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ═════════ 師資單篇頁首：總覽情境背景＋老師人像卡（業主 10/19 同意；設計稿 回報/甲線_師資人像卡設計稿_2026-10-19/）。甲線 2026-10-19 ═════════ */
.im-sx__pcard { position: relative; z-index: 3; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--im-surface, #fff);
  border: 1px solid color-mix(in srgb, var(--im-text-strong) 18%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -18px rgba(0,0,0,.45); }
.im-sx__pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* 深色：卡寬 320、左緣對齊內容左緣、底部超出大圖 110px；下方職稱列與卡底留 32px、靠左對齊 */
.im-sx--dark.im-sx--teacher { --pc-w: 320px; --pc-out: 110px; }
.im-sx--dark.im-sx--teacher .im-sx__pcard { width: var(--pc-w); margin: calc(-1 * (var(--pc-w) * 4 / 3 - var(--pc-out))) 0 0 var(--im-hx-side, 40px); }
.im-sx--dark.im-sx--teacher .im-sx__pcard { border-color: color-mix(in srgb, var(--im-brand-ink) 45%, transparent); }
.im-sx--dark.im-sx--teacher .im-sx__band .im-wrap { align-items: flex-start; text-align: left; padding-top: 32px; }
.im-sx--dark.im-sx--teacher .im-sx__band .im-sx__place { justify-content: flex-start; }

/* 淺色：卡放右側照片左下角（左緣對齊照片左緣），底部溢出 90px；EMSKIN 在卡片之上不被蓋 */
.im-sx--light.im-sx--teacher { --pc-w: min(300px, 20vw); --pc-out: 90px; }
.im-sx--light.im-sx--teacher .im-sx__pcard { position: absolute; left: 0; bottom: calc(-1 * var(--pc-out)); width: var(--pc-w); z-index: 1; border-color: rgba(255,255,255,.9); border-width: 6px; box-shadow: 0 14px 36px -16px rgba(46,42,38,.45); }
.im-sx--light.im-sx--teacher .im-sx__code { z-index: 2; }
.im-sx--light.im-sx--teacher .im-sx__next { padding-top: calc(var(--pc-out) + 32px); }

@media (max-width: 750px) {
  /* 手機：大圖後接置中人像卡（寬 172、向上重疊 48px），再接姓名／現任／校區 */
  .im-sx--dark.im-sx--teacher { --pc-w: 172px; }
  .im-sx--dark.im-sx--teacher .im-sx__pcard { margin: -48px auto 0; }
  .im-sx--dark.im-sx--teacher .im-sx__band .im-wrap { align-items: center; text-align: center; padding-top: 20px; }
  .im-sx--dark.im-sx--teacher .im-sx__band .im-sx__place { justify-content: center; }
  /* 淺色手機：EMSKIN 壓在照片下緣，卡片若向上重疊會跟它撞在一起（會蓋到老師的臉或 EMSKIN），所以改接在照片下方 16px、置中 */
  .im-sx--light.im-sx--teacher { --pc-w: 172px; }
  .im-sx--light.im-sx--teacher .im-sx__pcard { left: 50%; transform: translateX(-50%); bottom: calc(-1 * (var(--pc-w) * 4 / 3 + 16px)); border-width: 5px; }
  .im-sx--light.im-sx--teacher .im-sx__next { padding-top: calc(172px * 4 / 3 + 16px + 20px); align-items: center; text-align: center; }
}
/* 師資卡下方沒有摘要／校區那一行時，也要讓出卡片超出的空間 */
@media (min-width: 751px) { .im-sx--light.im-sx--teacher:not(:has(.im-sx__next)) { padding-bottom: calc(var(--pc-out) + 40px); } }
@media (max-width: 750px) { .im-sx--light.im-sx--teacher:not(:has(.im-sx__next)) { padding-bottom: calc(172px * 4 / 3 + 40px); } }
/* 1100 以下照片變窄、EMSKIN 佔照片大半：淺色人像卡縮成 150 寬，不碰到 EMSKIN */
@media (min-width: 751px) and (max-width: 1100px) { .im-sx--light.im-sx--teacher { --pc-w: 150px; --pc-out: 70px; } }
@media (min-width: 751px) and (max-width: 900px) { .im-sx--light.im-sx--teacher { --pc-w: 120px; --pc-out: 60px; } }
/* 甲線 10/19（第四十一次後小修）：EMSKIN 字級會隨視窗高度變大（照片高跟著 100vh），固定卡寬在較高的螢幕會撞到 EMSKIN。
   改成依實際空間算：卡寬 ≤ 照片寬 − EMSKIN 右緣內縮 − EMSKIN 寬（字級 × 4.45）− 16px，任何寬高都至少隔 16px。--k＝代號字母數（PHP 掛在照片上）。 */
@media (min-width: 751px) {
  .im-sx--light.im-sx--teacher .im-sx__pcard { width: max(80px, min(var(--pc-w), calc(100% - var(--im-hx-code-right) - 4.45 * min(var(--im-hx-code-base), var(--im-hx-code-span) / var(--k, 6)) - 16px))); }
}

/* 甲線 10/19（業主更正：淺色三頁只要求「右邊與下面」一致）：淺色單篇左欄恢復較寬，讓課名回到原本大小（約 60px）。
   照片右緣、照片下緣、EMSKIN 右緣與基線仍讀共用變數，跟學院首頁相同；只有照片左緣往右移、照片變窄。
   左欄寬＝左邊留白＋直書類別＋間距＋課名區（--sx-tbox）＋右內距。總覽頁維持原樣。 */
@media (min-width: 751px) {
  .im-sx--light { --sx-tbox: clamp(240px, 21vw, 340px); }
  .im-sx--light .im-sx__grid { grid-template-columns: calc(var(--im-hx-side) + var(--im-hx-vtitle-max) + 18px + var(--sx-tbox) + 16px) 1px minmax(0, 1fr); }
  .im-sx--light.is-noimg .im-sx__grid { grid-template-columns: 1fr; }
  .im-sx--light .im-sx__title { font-size: min(clamp(42px, 4.2vw, 62px), calc(var(--sx-tbox) / (var(--tl, 4) * 1.15))); }
}

/* 甲線 10/19（業主看淺色頁截圖三點）：
   ① 淺色總覽頁、單篇照片左緣那條深色直線（左欄與照片之間的 1px 分隔線 .im-hx__line／.im-sx__line；手機是照片上方的橫線）拿掉，位置保留不影響照片尺寸。
   ③ 單篇眉標統一成總覽頁的寫法：宋體、伊美教育 500、學院名 300、15px、字距 .3em、行高 1.5（手機同 15px）；深色單篇眉標同深色學院首頁（宋體 500、字距 .3em）。 */
.im-course-page .im-hx--tall .im-hx__line, .im-sx--light .im-sx__line { background: transparent !important; }
.im-sx__kick2 { font-family: var(--im-font-serif) !important; font-size: 15px !important; line-height: 1.5 !important; letter-spacing: .3em !important; }
.im-sx__kick2 b { font-weight: 500 !important; }
.im-sx__kick2 span { font-weight: 300 !important; }
.im-sx--dark .im-sx__kick { font-family: var(--im-font-serif); font-weight: 500; letter-spacing: .3em; padding-left: .3em; }
/* 甲線 10/19（業主同意）：深色單篇片名卡第二行「美甲學院・專業課程」＝淺色單篇第二行（宋體 300 15px、字距 .3em，手機同 15px）；第一行「伊美教育」不動 */
.im-sx--dark .im-sx__sub { font-family: var(--im-font-serif); font-weight: 300; font-size: 15px; letter-spacing: .3em; padding-left: .3em; }
@media (max-width: 750px) { .im-sx--dark .im-sx__sub { font-size: 15px; letter-spacing: .3em; } }
/* 甲線 10/19（業主：深色單篇頁首小字＝深色總覽頁）：第一行「伊美教育」用總覽同一個顏色變數（--im-group-ink）、手機也 15px；第二行用 --im-text-muted（＝總覽第二行的灰） */
.im-sx--dark .im-sx__kick { color: var(--im-group-ink, #eb6da5); font-size: 15px; }
.im-sx--dark .im-sx__sub { color: var(--im-text-muted); }
@media (max-width: 750px) { .im-sx--dark .im-sx__kick { font-size: 15px; } }

/* 乙線 10/19（總控派）：原稿整頁的 <h1> 被單篇樣板改成 <div data-im-was="h1">。原稿有寫 h1 樣式的，
   single-common.php 會把樣式複製到 [data-im-was="h1"]；原稿沒寫的，用瀏覽器預設 h1 的大小粗細當底，不會變成一般內文。 */
.im-legacy [data-im-was="h1"] { display: block; margin-block: .67em; font-size: 2em; font-weight: 700; line-height: 1.3; }

/* ═══ 決議 180（業主 10/20）全站列表元件統一：學院六總覽的卡片（.im-chub-list）══════════════════════════
   ① 卡片標題 hover 不加底線、不變色（變色來源是外掛 proto.css 的 hover 規則，已在該檔拿掉；這裡拿掉成果頁的底線）
   ② 卡片右下動作按鈕：照「學院專業課程頁」那套——深色學院金色字、淺色學院深色字；hover 右移 4px＋金色底線
   ③ 按鈕一律貼卡片底部（第一張卡原本是「放大卡」時代的固定間距，按鈕會比同列高）；內文撐滿卡，同列按鈕等高
   ④ 按鈕字「動詞＋名詞」：了解課程／閱讀案例／認識老師／了解優勢／閱讀文章 */
.im-academy .im-chub-list .im-card:hover .im-card__title,
.im-academy .im-chub-list .im-card:focus-within .im-card__title { text-decoration: none; }
.im-academy .im-chub-list .im-card .im-card__body::after { margin-block-start: auto; color: #d7b17b; text-decoration: underline transparent; text-underline-offset: 5px; transition: transform .2s ease, text-decoration-color .2s ease; }
.im-academy.is-light .im-chub-list .im-card .im-card__body::after { color: var(--im-text-strong); }
.im-academy .im-chub-list .im-card:hover .im-card__body::after,
.im-academy .im-chub-list .im-card:focus-within .im-card__body::after { transform: translateX(4px); text-decoration-color: #d7b17b; }
@media (prefers-reduced-motion: reduce) { .im-academy .im-chub-list .im-card .im-card__body::after { transition: none; } }
.im-academy .im-chub-list .im-card .im-card__body { flex: 1 1 auto; }
.im-academy .im-chub-list .im-card .im-card__link { align-items: stretch; }   /* 手機成果卡（左圖右文）內文原本 align-items:start，沒撐滿卡、按鈕浮在中間 */
.im-academy .im-chub--instructors .im-chub-list .im-card { display: flex; flex-direction: column; }
.im-academy .im-chub--instructors .im-chub-list .im-card > .im-card__link { flex: 1 1 auto; }
.im-academy .im-chub--instructors .im-chub-list .im-card .im-card__body { padding: var(--im-s-4) var(--im-s-5) var(--im-s-5); gap: var(--im-s-2); }   /* 第一張卡原本內距不同，按鈕會差幾 px */
.im-academy .im-chub--results .im-chub-list .im-card .im-card__body::after { content: "閱讀案例　→"; }
.im-academy .im-chub--instructors .im-chub-list .im-card .im-card__body::after { content: "認識老師　→"; }
.im-academy .im-chub--advantages .im-chub-list .im-card .im-card__body::after { content: "了解優勢　→"; }
.im-academy .im-chub--insights .im-chub-list .im-card .im-card__body::after { content: "閱讀文章　→"; }

/* 乙線 10/20（總控派 E）：原稿整頁的 body{margin:0;padding:0} 轉換後變成 .im-legacy{margin:0;padding:0}，
   而單篇內容容器 #single-content 本身也帶 .im-legacy class → 外框的置中（margin-inline:auto）與左右留白被吃掉，
   1520 以上的螢幕整塊原稿靠左（1920 時偏左 200px）。用帶 ID 的選擇器把 .im-wrap 的置中與留白補回來；原稿內層不受影響。 */
.im-csingle-light > #single-content.im-wrap.im-legacy { width: 100%; max-width: var(--im-container); margin-inline: auto; padding-inline: var(--im-gutter); }
/* 乙線 10/21（第三批紋繡圓夢班）：原稿 body{margin:0 auto} 轉成內層 .im-legacy{margin:0 auto}；#single-content 是直向 flex，
   左右 auto 邊距讓內層不再撐滿、改成「照內容寬」，原稿裡不換行的跑馬燈就把整塊撐到 5000px 以上、內容跑出畫面。內層一律撐滿。 */
#single-content.im-legacy > .im-legacy { width: 100%; min-width: 0; }

/* 業主 10/20 定案：學院「專業師資」列表桌機一列 5 位（原本 4 位，照片太大）；1001～1200 維持 4 位（1200 以下一列 5 位照片只剩約 180 寬）、1000 以下 3 位、手機（750 以下）維持現狀。深淺色都套。 */
@media (min-width: 1201px) { .im-academy .im-chub--instructors .im-chub-list .im-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 乙線 10/20（第五十二次後丙線實測，業主指的就是這個）：成果作品、學院優勢、美業成功方程式的「第一張卡」內距被舊規則改掉
   （第 97 行放大卡時代的 clamp、第 606 行成果 s-6/s-5、第 859／900 行方程式與優勢 s-5），下內距 20px，其他卡 34.56px，
   1440 第一排左右兩張按鈕差約 14px。統一成跟其他卡同一套：桌機 clamp(1.5rem, 2.4vw, 2.25rem)（同第 378 行）、手機 s-5（同第 400 行）。
   專業課程的第一張是整排放大卡（一列只有它），不在此列。 */
@media (min-width: 751px) {
  .im-academy :is(.im-chub--results, .im-chub--advantages, .im-chub--insights) .im-chub-list .im-card:first-child .im-card__body { padding: clamp(1.5rem, 2.4vw, 2.25rem); }
}
@media (max-width: 750px) {
  .im-academy :is(.im-chub--results, .im-chub--advantages, .im-chub--insights) .im-chub-list .im-card:first-child .im-card__body { padding: var(--im-s-5); }
}
/* 同上：1024 以下改上圖下文時，第一張卡的連結區沒撐滿卡（少 18px），按鈕跟著偏高 → 卡片改直向排列、連結區撐滿 */
@media (max-width: 1024px) {
  .im-academy :is(.im-chub--results, .im-chub--advantages, .im-chub--insights) .im-chub-list .im-card { display: flex; flex-direction: column; }
  .im-academy :is(.im-chub--results, .im-chub--advantages, .im-chub--insights) .im-chub-list .im-card > .im-card__link { flex: 1 1 auto; }
}

/* 甲線 10/20（乙線發現美玲老師預覽、總控轉達）：淺色單篇（師資與其他六種）手機版眉標「專業師資／專業課程…」原本 13px，
   低於最小字 14px；統一成跟深色單篇眉標、總覽一樣 15px。 */
@media (max-width: 750px) { .im-sx--light .im-sx__big { font-size: 15px; } }
/* 甲線 10/20（總控）：深色單篇手機版地點列「台北」與金線上「○○介紹」原本 13px，同樣拉到 15px（手機眉標類統一 15）。 */
@media (max-width: 750px) { .im-sx .im-sx__place, .im-sx .im-sx__rule { font-size: 15px; } }

/* ═════════ 師資單篇「拱門資訊列」（甲線 10/20，業主選 Codex 第 145 件「2 拱門檔案」；設計稿 回報/甲線_師資照呈現六案設計稿_2026-10-20/02）═════════
   深淺同一個元件只換色：拱門半身照（上圓拱、下直角，外圈一條學院色細線，不加金線）＋姓名／職稱／校區／現任。
   淺色：放頁首下方資訊列（不壓頁首）；深色：放頁首大圖下方的身分帶，金線「師資介紹」在下面。手機：拱門在上、文字在下，置中。
   字級：眉標 15、姓名 40／28、職稱 17／15、校區 15、現任 15／14（手機最小 14）。舊人像卡 .im-sx__pcard 已不輸出。 */
.im-sx--who { --arch-w: 240px; --arch-h: 320px; --arch-line: var(--im-brand); }
.im-sx--dark.im-sx--who { --arch-line: var(--im-brand-ink); }
.im-sx__who { display: flex; align-items: flex-end; gap: 56px; text-align: left; }
.im-sx__arch { flex: none; position: relative; width: var(--arch-w); height: var(--arch-h); margin: 9px 9px 0; }
.im-sx__arch > span { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 0 0; background: var(--im-surface-2); }
.im-sx__arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pf, 50% 8%); transform: scale(1.45); transform-origin: var(--pf, 50% 8%); }
.im-sx__arch::after { content: ""; position: absolute; inset: -9px -9px 0; border: 1px solid var(--arch-line); border-bottom: 0; border-radius: calc(var(--arch-w) / 2 + 9px) calc(var(--arch-w) / 2 + 9px) 0 0; pointer-events: none; }
.im-sx__wtxt { padding-bottom: 6px; min-width: 0; }
.im-sx__wtxt > * { margin: 0; }
.im-sx__wkick { font: 500 15px/1 var(--im-font-sans); letter-spacing: .3em; color: var(--im-group-ink); }
.im-sx__wkick i { font-style: normal; }
.im-sx__wname { margin-top: 10px !important; font: 600 40px/1.25 var(--im-font-serif); letter-spacing: .08em; color: var(--im-text-strong); }
.im-sx__wname::after { content: ""; display: block; width: 44px; height: 2px; margin: 14px 0 4px; background: var(--arch-line); }
.im-sx__wrole { margin-top: 10px !important; font: 500 17px/1.6 var(--im-font-sans); letter-spacing: .08em; color: var(--im-text); }
.im-sx .im-sx__who .im-sx__place { display: flex; justify-content: flex-start; align-items: center; margin-top: 12px; font: 500 15px/1.4 var(--im-font-sans); letter-spacing: .3em; color: var(--im-text-muted); animation: none; }
.im-sx__who .im-sx__place::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--arch-line); }
.im-sx__wnow { margin-top: 22px !important; font: 400 15px/1.9 var(--im-font-sans); color: var(--im-text-muted); }
.im-sx__wnow b { display: block; font: 500 14px/1.6 var(--im-font-sans); letter-spacing: .3em; color: var(--im-text); }
.im-sx__wnow ul { margin: 2px 0 0; padding: 0; list-style: none; }
/* 深色：身分帶靠左（同內容左緣），拱門與文字底部對齊；下面金線「師資介紹」 */
.im-sx--dark.im-sx--who .im-sx__band .im-wrap { align-items: stretch; text-align: left; padding-top: 48px; }
.im-sx--dark.im-sx--who .im-sx__rule { margin-top: 48px; }
/* 淺色：頁首下方資訊列，左緣＝內容左緣；下緣一條細線收尾 */
.im-sx__whobox { padding-top: 56px; padding-bottom: 8px; }
.im-sx--light .im-sx__whobox .im-sx__who { padding-bottom: 0; border-bottom: 1px solid var(--im-line); }
@media (max-width: 750px) {
  .im-sx--who { --arch-w: 150px; --arch-h: 200px; }
  .im-sx__who { flex-direction: column; align-items: center; gap: 22px; text-align: center; }
  .im-sx__arch { margin: 7px 7px 0; }
  .im-sx__arch::after { inset: -7px -7px 0; border-radius: calc(var(--arch-w) / 2 + 7px) calc(var(--arch-w) / 2 + 7px) 0 0; }
  .im-sx__wtxt { padding-bottom: 0; }
  .im-sx__wname { font-size: 28px; }
  .im-sx__wname::after { margin: 12px auto 2px; }
  .im-sx__wrole { font-size: 15px; margin-top: 8px !important; }
  .im-sx .im-sx__who .im-sx__place { justify-content: center; margin-top: 10px; }
  .im-sx__wnow { margin-top: 16px !important; font-size: 14px; line-height: 1.8; }
  .im-sx--dark.im-sx--who .im-sx__band .im-wrap { padding-top: 32px; }
  .im-sx--dark.im-sx--who .im-sx__rule { margin-top: 36px; }
  .im-sx__whobox { padding-top: 36px; }
  .im-sx--light .im-sx__whobox .im-sx__who { padding-bottom: 28px; }
}
/* 甲線 10/20（業主看完拱門版：拱門 OK，資訊列再整理）：資訊列只留 姓名 → 學院色短線 → 職稱 → 校區（眉標、現任已從 PHP 拿掉）。
   淺色統一成深色結構：頁首下方留跟深色一樣的距離 → 拱門資訊列 → 同樣距離 → 金線「師資介紹」＋分隔線；拿掉原本貼在拱門底的細線。 */
.im-sx__whobox { padding-top: 48px; padding-bottom: 44px; }
.im-sx--light .im-sx__whobox .im-sx__who { border-bottom: 0; padding-bottom: 0; }
.im-sx__whobox .im-sx__rule { margin-top: 48px; }
.im-sx__wname { margin-top: 0 !important; }
@media (max-width: 750px) {
  .im-sx__whobox { padding-top: 32px; padding-bottom: 32px; }
  .im-sx--light .im-sx__whobox .im-sx__who { padding-bottom: 0; }
  .im-sx__whobox .im-sx__rule { margin-top: 36px; }
}
/* 甲線 10/20（業主）：師資單篇下方「本院其他師資」改用專業師資總覽頁同一個元件（PHP 外包 .im-chub--instructors .im-chub-list），
   一列 5 位，斷點同總覽：1201 以上 5、1001～1200 四、751～1000 三、手機 2。只排一整列：4 欄、3 欄時多出來的卡片不顯示，手機顯示 2×2。
   蓋掉舊的 #single-related 師資 4 欄規則（!important）。 */
.im-academy #single-related .im-chub--related .im-chub-list .im-list.im-list--instructor { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1200px) {
  .im-academy #single-related .im-chub--related .im-chub-list .im-list.im-list--instructor { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .im-academy #single-related .im-chub--related .im-list--instructor > li:nth-child(n+5) { display: none; }
}
@media (max-width: 1000px) {
  .im-academy #single-related .im-chub--related .im-chub-list .im-list.im-list--instructor { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .im-academy #single-related .im-chub--related .im-list--instructor > li:nth-child(n+4) { display: none; }
}
@media (max-width: 750px) {
  .im-academy #single-related .im-chub--related .im-chub-list .im-list.im-list--instructor { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .im-academy #single-related .im-chub--related .im-list--instructor > li:nth-child(4) { display: flex; }
}
.im-academy #single-related .im-chub--related .im-chub-list { padding: 0; margin: 0; }   /* 總覽列表本身的上方留白（72px）在這裡不需要，標題與卡片距離維持原樣 */

/* 乙線 10/22（業主逐頁看美甲課程）：單篇下方「本院其他課程／文章／活動／案例／優勢」統一一列 4 張直式卡片（「其他師資」維持 5 位，不受這段影響）。
   斷點：1001 以上 4 張、751～1000 3 張、750 以下 2 張。原本是一列 2 張的橫式卡片（圖左文右，固定 290px 高）。 */
.im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--im-s-5); }
.im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) .im-card { height: auto; }
.im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) .im-card__link { display: flex; flex-direction: column; height: 100%; }
.im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) .im-card__thumb { height: auto; aspect-ratio: 4 / 3; }
.im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) .im-card__body { padding: var(--im-s-4) var(--im-s-4) var(--im-s-5); }
@media (max-width: 1000px) { .im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* 總控 10/22：751～1000 一列 3 張時只顯示 3 張，不讓第 4 張單獨一行（跟師資列表做法一致）；手機 2 張時 4 張都顯示 */
@media (min-width: 751px) and (max-width: 1000px) { .im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) > li:nth-child(n+4) { display: none; } }
@media (max-width: 750px) { .im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--im-s-3); }
  .im-academy #single-related.im-csingle-related .im-list:not(.im-list--instructor) .im-card__body { padding: var(--im-s-3) var(--im-s-3) var(--im-s-4); } }

/* 乙線 10/22（總控派，業主確認 AI 摘要方向）：單篇頁首下方、原稿內容之前的「AI 摘要」一段（樣板 im_single_ai_summary_html）。
   寬度跟原稿同（同 #single-content 的容器寬與左右留白），字級同內文，只有一行很淡的小眉標；深淺院共用（下方內容區都是淺底）。
   頁首與內容之間原本的大間距（96／80／56）改放在摘要上方，摘要與原稿之間用一般區塊間距。 */
.im-csingle-light > .im-ai-summary { width: 100%; max-width: var(--im-container); margin-inline: auto; padding-inline: var(--im-gutter); padding-block-start: var(--im-gap-block); }
.im-sx + .im-csingle-light > .im-ai-summary { padding-block-start: 96px; }
.im-sx + .im-csingle-light > .im-ai-summary + .im-esingle-body { padding-block-start: var(--im-gap-block) !important; }
.im-ai-summary__eyebrow { margin: 0 0 var(--im-s-2); font-size: 14px; letter-spacing: .2em; color: var(--im-text-muted); }
.im-ai-summary__text { margin: 0; font-size: var(--im-fs-md); line-height: 2; color: var(--im-text); }
@media (max-width: 1100px) { .im-sx + .im-csingle-light > .im-ai-summary { padding-block-start: 80px; } }
@media (max-width: 750px) { .im-sx + .im-csingle-light > .im-ai-summary { padding-block-start: 56px; }
  .im-ai-summary__text { font-size: var(--im-fs-base); line-height: 1.9; } }

/* 乙線 10/22（業主：FAQ 一律開合式）：原稿裡不是開合的 FAQ，上稿時轉成 <details class="… im-faq-fold"><summary class="im-faq-sum">問題</summary>答案</details>
   （convert.py fold_static_faq）。預設收合、可多開，答案仍在 HTML 裡。右邊的加號跟單篇 FAQ（.im-blk__qa）同一個畫法，顏色跟著原稿的問題文字色走，深淺底都看得到。 */
.im-legacy details.im-faq-fold > summary.im-faq-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 0; cursor: pointer; list-style: none; }
.im-legacy details.im-faq-fold > summary.im-faq-sum::-webkit-details-marker { display: none; }
.im-legacy details.im-faq-fold > summary.im-faq-sum > :is(h2, h3, h4, h5, h6) { flex: 1 1 auto; min-width: 0; margin-block: 0 !important; }
.im-legacy details.im-faq-fold > summary.im-faq-sum::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size .25s ease;
}
.im-legacy details.im-faq-fold[open] > summary.im-faq-sum { margin-block-end: .75em; }
.im-legacy details.im-faq-fold[open] > summary.im-faq-sum::after { background-size: 100% 1.5px, 1.5px 0; }   /* 展開：直線收起來，剩「−」 */
.im-legacy details.im-faq-fold > summary.im-faq-sum:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }