/* ============================================================================
   一般頁與 404（丁線 2026-10-05 第 3 件建立）
   ----------------------------------------------------------------------------
   搭配 im-site/general-pages.php。頁首沿用乙線 im-site-archive.css 的 .im-sarch-hero（全站彙整頁同款）；
   這裡只放一般頁自己的：米色內文區、目錄、校區卡、立案表、待提供框、404 十學院入口、收尾橫條。
   🔶 沒有設計稿：照已確認的全站頁風格延伸（黑底、米色內容帶、集團粉重點色）。
   ============================================================================ */

/* ── 頁首：一般頁沒有拼貼照片，高度收一點 ── */
.im-gp .im-gp-hero { min-height: clamp(220px, 17vw, 280px); }
.im-gp--404 .im-gp-hero { min-height: clamp(300px, 26vw, 400px); }
.im-gp-hero__code { font-family: var(--im-font-en); font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); font-weight: 300; line-height: 1; letter-spacing: .08em; color: #EB6DA5; margin-block-end: var(--im-s-3) !important; }
.im-gp .im-sarch-hero__lede { max-width: 34em; }

/* ── 按鈕 ── */
.im-gp-actions { display: flex; flex-wrap: wrap; gap: var(--im-s-4); margin-block-start: var(--im-s-6); }
.im-gp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--im-s-3) var(--im-s-7); font-family: var(--im-font-serif); font-size: var(--im-fs-base); letter-spacing: .14em; text-decoration: none; white-space: nowrap; transition: background var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease), border-color var(--im-dur) var(--im-ease); }
.im-gp-btn--pink { background: #C8466F; color: #FFFFFF; }
.im-gp-btn--pink:hover { background: #EB6DA5; color: #14100A; }
.im-gp-btn--line { border: 1px solid #FFFFFF; color: #FFFFFF; }
.im-gp-btn--line:hover { border-color: #EB6DA5; color: #EB6DA5; }

/* ── 米色內文區 ── */
.im-gp-body { background: var(--im-bg); color: var(--im-text); padding-block: var(--im-sec-pad, 72px); }
.im-gp-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.im-gp-layout.has-toc { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); justify-items: stretch; }
.im-gp-article { width: 100%; max-width: 50rem; min-width: 0; }
/* 10/12 內容寬 1440：純文字頁（關於、隱私、條款、退費）保留 50rem 閱讀欄；聯絡我們是校區卡片，跟內容寬 */
.im-gp--contact .im-gp-article { max-width: none; }

/* 目錄（長頁才出現；桌機固定在左側） */
.im-gp-toc { position: sticky; top: 6rem; align-self: start; padding-inline-start: var(--im-s-4); border-inline-start: 2px solid #C8466F; }
.im-gp-toc__title { margin-block-end: var(--im-s-3) !important; font-family: var(--im-font-serif); font-size: var(--im-fs-md); letter-spacing: .14em; color: var(--im-text-strong); }
.im-gp-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--im-s-2); }
.im-gp-toc a { font-size: 15px; line-height: 1.6; color: var(--im-text-muted); text-decoration: none; }
.im-gp-toc a:hover { color: #A7456F; text-decoration: underline; text-underline-offset: 3px; }

/* 內文排版 */
.im-gp-prose, .im-gp-block { font-size: 16px; line-height: 1.95; color: var(--im-text); }
.im-gp-block { margin-block-start: var(--im-sec-pad, 72px); }
.im-gp-article > :first-child { margin-block-start: 0; }
.im-gp-prose h2, .im-gp-block h2 { scroll-margin-top: 6rem; margin: var(--im-s-8) 0 var(--im-s-4); padding-block-end: var(--im-s-3); border-block-end: 1px solid var(--im-line); font-size: var(--im-fs-xl); letter-spacing: .1em; line-height: 1.5; color: var(--im-text-strong); }
.im-gp-prose > h2:first-child, .im-gp-block > h2:first-child { margin-block-start: 0; }
.im-gp-prose h3 { margin: var(--im-s-6) 0 var(--im-s-2); font-family: var(--im-font-serif); font-size: var(--im-fs-md); color: var(--im-text-strong); }
.im-gp-prose p, .im-gp-block > p { margin: 0 0 var(--im-s-4); }
.im-gp-prose ul, .im-gp-prose ol { margin: 0 0 var(--im-s-4); padding-inline-start: 1.4em; }
.im-gp-prose li { margin-block-end: var(--im-s-1); }
.im-gp-prose strong { color: var(--im-text-strong); }
.im-gp-prose a, .im-gp-block a, .im-gp-dl a { color: #A7456F; text-decoration: underline; text-underline-offset: 3px; }
.im-gp-prose blockquote { margin: var(--im-s-5) 0; padding: var(--im-s-4) var(--im-s-5); border-inline-start: 3px solid #C8466F; background: var(--im-surface); font-family: var(--im-font-serif); font-size: var(--im-fs-md); color: var(--im-text-strong); }

/* 待提供框：清楚、不刺眼 */
.im-gp-pending { display: flex; gap: var(--im-s-4); align-items: flex-start; padding: var(--im-s-5) var(--im-s-6); border: 1px dashed #A7456F; background: var(--im-surface); }
.im-gp-pending + .im-gp-pending { margin-block-start: var(--im-s-3); }
.im-gp-prose .im-gp-pending { margin-block: var(--im-s-4); }
.im-gp-pending__tag { flex: none; padding: 2px var(--im-s-3); background: #A7456F; color: #FFFFFF; font-size: 14px; letter-spacing: .1em; line-height: 1.6; }
.im-gp-pending p { margin: 0 !important; font-size: 16px; line-height: 1.8; color: var(--im-text); }
.im-gp-tbd { color: var(--im-text-muted); }
.im-gp-tbd::before { content: "待提供"; display: inline-block; margin-inline-end: var(--im-s-2); padding: 0 var(--im-s-2); border: 1px solid #A7456F; font-size: 14px; color: #A7456F; }

/* 校區卡 */
.im-gp-campus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--im-s-4); margin: var(--im-s-5) 0 0; padding: 0; list-style: none; }
.im-gp-campus__item { display: flex; flex-direction: column; gap: var(--im-s-2); padding: var(--im-s-5); border: 1px solid var(--im-line); border-block-start: 3px solid #C8466F; background: var(--im-surface); }
.im-gp-campus__en { margin: 0 !important; font-family: var(--im-font-en); font-size: 14px; letter-spacing: .22em; color: #A7456F; }
.im-gp-campus__name { margin: 0 0 var(--im-s-2); font-family: var(--im-font-serif); font-size: var(--im-fs-lg); letter-spacing: .1em; color: var(--im-text-strong); }
.im-gp-campus__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--im-s-2); margin: 0 !important; font-size: 15px; line-height: 1.7; }
.im-gp-campus__row a { color: var(--im-text-strong); font-weight: 600; text-decoration: none; }
.im-gp-campus__label { font-size: 14px; color: var(--im-text-muted); }
.im-gp-campus__map { margin-block-start: auto; padding-block-start: var(--im-s-3); font-size: 14px; letter-spacing: .08em; color: #A7456F !important; text-decoration: none !important; }

/* 立案資訊表 */
.im-gp-table { overflow-x: auto; margin-block-start: var(--im-s-5); border: 1px solid var(--im-line); background: var(--im-surface); }
.im-gp-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.im-gp-table th, .im-gp-table td { padding: var(--im-s-3) var(--im-s-4); border-block-end: 1px solid var(--im-line); text-align: start; vertical-align: top; }
.im-gp-table thead th { background: var(--im-surface-2); font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--im-text-strong); white-space: nowrap; }
.im-gp-table tbody th { font-family: var(--im-font-serif); font-weight: 600; color: var(--im-text-strong); white-space: nowrap; }
.im-gp-table tbody tr:last-child > * { border-block-end: 0; }

/* 其他聯絡方式 */
.im-gp-dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); margin: var(--im-s-4) 0 0; border-block-start: 1px solid var(--im-line); }
.im-gp-dl dt, .im-gp-dl dd { margin: 0; padding: var(--im-s-3) 0; border-block-end: 1px solid var(--im-line); }
.im-gp-dl dt { font-weight: 600; color: var(--im-text-strong); }

/* ── 404：十學院入口（深色底） ── */
.im-gp-sec { padding-block: var(--im-sec-pad, 72px) 0; }
.im-gp--404 .im-sarch-shead { margin-block-end: var(--im-sec-head, 32px); }
.im-gp-academies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--im-s-3); margin: 0; padding: 0; list-style: none; }
.im-gp-academy { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; overflow: hidden; padding: var(--im-s-4); border: 1px solid #3A2A31; background: linear-gradient(160deg, #2A2320 0%, #15110F 100%); color: #FFFFFF; text-decoration: none; }
.im-gp-academy__media { position: absolute; inset: 0; }
.im-gp-academy__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--im-ease); }
.im-gp-academy__media:not(.is-empty)::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(8,7,6,.9) 70%); }
.im-gp-academy:hover .im-gp-academy__media img { transform: scale(1.04); }
.im-gp-academy__code, .im-gp-academy__name { position: relative; z-index: 1; }
.im-gp-academy__code { font-family: var(--im-font-en); font-size: 14px; letter-spacing: .1em; color: #F49AC1; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,.6); }   /* 英文代號一行，不斷字（總控 10/06：EMMICROBLADING 斷兩行） */
.im-gp-academy__name { margin-block-start: var(--im-s-1); font-family: var(--im-font-serif); font-size: var(--im-fs-lg); letter-spacing: .1em; }
.im-gp-academy:hover { border-color: #EB6DA5; }

/* ── 收尾橫條（粉色，同全站最新活動頁的通知橫條配色） ── */
.im-gp-band { padding-block: var(--im-sec-pad, 72px); background: #000; }
.im-gp-band__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--im-s-5) clamp(1.5rem, 4vw, 3rem); min-height: clamp(6rem, 8vw, 7.5rem); padding: var(--im-s-5) var(--im-s-6); background: linear-gradient(90deg, #F2C9D6 0%, #E9A9BF 100%); }
.im-gp-band h2 { margin: 0; font-size: var(--im-fs-xl); letter-spacing: .14em; color: #2A1520; }
.im-gp-band .im-gp-btn--pink { background: #14100A; color: #FFFFFF; }
.im-gp-band .im-gp-btn--pink:hover { background: #C8466F; }

/* ═════════ 平板 ═════════ */
@media (max-width: 1000px) {
  .im-gp-layout.has-toc { grid-template-columns: minmax(0, 1fr); gap: var(--im-s-6); }
  .im-gp-toc { position: static; }
  .im-gp-campus { grid-template-columns: minmax(0, 1fr); }
  .im-gp-academies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═════════ 手機 ═════════ */
@media (max-width: 750px) {
  .im-gp .im-gp-hero { min-height: 0; }
  .im-gp-actions .im-gp-btn { flex: 1 1 100%; }
  .im-gp-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--im-s-4); }
  .im-gp-pending { flex-direction: column; gap: var(--im-s-2); padding: var(--im-s-4); }
  /* 立案表：手機改成一校區一張卡（每格前面帶欄名） */
  .im-gp-table { overflow: visible; border: 0; background: none; }
  .im-gp-table thead { display: none; }
  .im-gp-table table, .im-gp-table tbody, .im-gp-table tr, .im-gp-table th, .im-gp-table td { display: block; }
  .im-gp-table tr { margin-block-end: var(--im-s-3); border: 1px solid var(--im-line); background: var(--im-surface); }
  .im-gp-table tbody th { padding-block: var(--im-s-3); background: var(--im-surface-2); }
  .im-gp-table td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--im-s-2); padding: var(--im-s-2) var(--im-s-4); }
  .im-gp-table td::before { content: attr(data-label); font-size: 14px; color: var(--im-text-muted); }
  .im-gp-dl { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .im-gp-academies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-gp-academy__name { font-size: var(--im-fs-md); }

  .im-gp-band h2 { font-size: var(--im-fs-lg); text-align: center; }
}

/* ═════════ 404 十學院卡的英文代號（總控 10/06：EMMICROBLADING 在手機斷兩行）═════════
   代號一律一行；字級維持最小 14px，不縮字。最長的 EMMICROBLADING（14 字）在 14px、字距 0 時約 139px：
   · 平板與手機（≤1100，三欄或兩欄）：字距歸零、卡片內距縮小 → 1024 可用 151px、390 可用 145px
   · 380 以下的窄手機：兩欄只剩約 110～130px，改成一欄橫式卡片（16:9），代號與學院名都放得下 */
@media (max-width: 1100px) {
  .im-gp-academy { padding: var(--im-s-3); }
  .im-gp-academy__code { letter-spacing: 0; }
}
@media (max-width: 380px) {
  .im-gp-academies { grid-template-columns: minmax(0, 1fr); }
  .im-gp-academy { aspect-ratio: 16 / 9; padding: var(--im-s-4); }
  .im-gp-academy__code { letter-spacing: .1em; }
}
/* ═════════ 照片圓角（設計系統規則第 8 節，業主 2026-10-06：淺色版 4px、深色版 2px → 變數 --im-media-radius；頁首大圖不加）═════════ */
.im-gp-academy { border-radius: var(--im-media-radius); }   /* 404 十學院入口圖卡 */