/* ==========================================================================
   遇見提斯 Serendipity Pilates ── 內頁元件
   --------------------------------------------------------------------------
   sp-styles.css 裝的是變數、骨架與首頁區塊；這一支裝內頁才用得到的元件。
   兩支都由子主題 enqueue，變數與骨架一律沿用 sp-styles.css，這裡不重新定義顏色。

   斷點只有 999.98px 與 689.98px，整份檔案不得出現第三個數字。
   ========================================================================== */

/* --- 0 底色帶 -----------------------------------------------------------
   需要整段換底色的區塊掛 .sp-sec--filled .sp-full .sp-band-cream 三個 class：
   前兩者管間距與滿版，這個只管顏色。底色只有奶油米一種，不要再開第二個。 */
.sp-band-cream{ background:var(--sp-cream); }

/* 只給螢幕閱讀器的文字。跑馬燈的可見內容是重複三份的裝飾，
   對輔助技術要給一份乾淨的、不重複的版本。 */
.sp-sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- 1 內頁 Hero（六個內頁共用的公式）----------------------------------
   規範第 11 章：內縮圓角照 + 文字靠左置於下三分之一，只換照片與兩行字。
   與首頁 Hero 的區別是高度壓到一半、不做輪播、不放按鈕。 */
.sp-pbanner{ padding-top:44px; }
.sp-pbanner__frame{
  position:relative; height:420px; overflow:hidden;
  border-radius:var(--sp-radius); background:var(--sp-cream);
}
/* Hero 包了一層 <picture>（窄螢幕換較方的裁切）。
   picture 預設是 inline，img 的 height:100% 會找不到對象，先讓它撐滿框。 */
.sp-pbanner__frame picture{ display:block; width:100%; height:100%; }
.sp-pbanner__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.sp-pbanner__frame::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--sp-scrim-left); pointer-events:none;
}
.sp-pbanner__copy{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sp-8); padding-bottom:56px;
}
.sp-pbanner__copy .sp-eyebrow{ color:#FFFFFF; }
.sp-pbanner__copy .sp-h1{ color:#FFFFFF; margin-top:var(--sp-3); }
.sp-pbanner__sub{ color:#FFFFFF; margin-top:var(--sp-3); max-width:520px; }

/* 列表型頁面（最新消息、聯絡我們）再壓一階，讓內容更快出現 */
.sp-pbanner--short .sp-pbanner__frame{ height:380px; }

@media (max-width:999.98px){
  .sp-pbanner__frame{ height:340px; }
  .sp-pbanner--short .sp-pbanner__frame{ height:320px; }
  .sp-pbanner__copy{ padding:var(--sp-7); padding-bottom:var(--sp-7); }
}
@media (max-width:689.98px){
  .sp-pbanner{ padding-top:var(--sp-5); }
  .sp-pbanner__frame{ height:280px; }
  .sp-pbanner--short .sp-pbanner__frame{ height:260px; }
  /* --sp-scrim-bottom 是從 40% 才開始變暗、底部只到 .65，
     照片下緣亮的時候（白衣人物、淺色牆）白色副標還是讀不出來。
     手機的文字整塊都在下緣，所以把漸層起點提前、底部加深。 */
  .sp-pbanner__frame::after{
    background:linear-gradient(to top,
      rgba(50,32,26,.82) 0%, rgba(50,32,26,.58) 45%, rgba(50,32,26,.10) 100%);
  }
  .sp-pbanner__copy{ padding:var(--sp-5); }
}

/* --- 2 置中長文 ---------------------------------------------------------
   規範第 11 章：12 欄 699px 置中，左右各一張直式小圖切出容器外當裝飾。
   小圖是裝飾不是內容，手機直接隱藏。 */
.sp-longform{ position:relative; }
.sp-longform__inner{
  position:relative; z-index:1;
  max-width:699px; margin-inline:auto; text-align:center;
}
.sp-longform__text{ margin-top:var(--sp-6); }
.sp-longform__text p{ margin:0; }
.sp-longform__text p + p{ margin-top:var(--sp-5); }
.sp-longform__cta{ margin-top:var(--sp-7); }
.sp-longform__deco{
  position:absolute; z-index:0;
  /* 寬度必須讓路給正文，不能寫死。
     正文固定 699 置中，容器每邊剩下 (100% - 699)/2；裝飾往容器外出血 80，
     所以它真正吃進容器的是「寬度減 80」，這段要留 24 的間距給文字。
     1440 下算出來比 322 大，維持原本的尺寸；視窗縮到 1100 附近就自動收斂。
     原本寫死 322，在 1024 的桌機下正文會直接壓在照片上，整段變得讀不了。 */
  /* 收在 1290 容器內，不出血。原本往外切出容器 80px 是規範第 11 章的寫法，
     但這樣整段的左右邊界就不是 1290 了，與其他區塊對不齊。

     間距從 24 拉到 56：正文與照片之間原本只隔 24px，兩邊都是內容，
     擠在一起會讓人一直想把視線往旁邊帶。 */
  width:calc((100% - 699px)/2 - 56px);
  max-width:300px;
  aspect-ratio:322/443;
  border-radius:var(--sp-radius); overflow:hidden;
  border:1px solid var(--sp-line);
}
.sp-longform__deco img{ width:100%; height:100%; object-fit:cover; }
.sp-longform__deco--l{ left:0; }
.sp-longform__deco--r{ right:0; }
/* 平板的容器只有 810 上下，扣掉 699 的正文，每邊剩五十幾，
   收斂後只會是一條細邊，不如收掉。手機本來就是隱藏。 */
@media (max-width:999.98px){ .sp-longform__deco{ display:none; } }

/* --- 3 創辦理念（圖文兩欄 + 疊圖）--------------------------------------
   本頁唯一一次層疊手法。疊圖在手機隱藏，小螢幕上它只會擋住主圖。 */
.sp-founder{ display:flex; align-items:center; gap:var(--sp-9); }
.sp-founder__media{ position:relative; flex:none; width:528px; }
.sp-founder__main{
  width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
}
.sp-founder__main img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sp-founder__inset{
  position:absolute; right:-32px; bottom:64px; width:176px; aspect-ratio:176/242;
  overflow:hidden; border-radius:var(--sp-radius-sm); border:4px solid #FFFFFF;
  box-shadow:var(--sp-shadow);
}
.sp-founder__inset img{ width:100%; height:100%; object-fit:cover; }
.sp-founder__copy{ min-width:0; flex:1; }
/* 1px 分隔線，寬度固定 411px 是規範指定值，不隨容器伸縮 */
.sp-founder__rule{
  width:min(411px,100%); height:1px; background:var(--sp-line);
  margin:30px 0; transform-origin:left center;
}
.sp-founder__text p{ margin:0; }
.sp-founder__text p + p{ margin-top:var(--sp-5); }
.sp-founder__sign{
  margin-top:var(--sp-5); font-size:16px; line-height:1.7;
  letter-spacing:.03em; color:var(--sp-ink-3);
}
.sp-founder__sign b{ display:block; font-size:18px; font-weight:600; color:var(--sp-cocoa); }
.sp-founder__cta{ margin-top:var(--sp-6); }
@media (max-width:999.98px){
  .sp-founder{ gap:var(--sp-7); }
  .sp-founder__media{ width:44%; }
  .sp-founder__inset{ display:none; }
}
@media (max-width:689.98px){
  .sp-founder{ flex-direction:column; align-items:stretch; gap:var(--sp-6); }
  .sp-founder__media{ width:100%; }
  .sp-founder__main{ aspect-ratio:4/3; }
  .sp-founder__rule{ margin:var(--sp-5) 0; }
}

/* --- 4 Slogan 跑馬燈 ----------------------------------------------------
   全站唯一的深可可實色底，也是全站唯一的無限播放元件。
   @keyframes 全站上限 2 個：sp-reveal 與這一個，不要再加第三個。 */
.sp-marquee{
  background:var(--sp-cocoa); overflow:hidden;
  height:61px; display:flex; align-items:center;
}
.sp-marquee__track{
  display:flex; flex:none; align-items:center; gap:var(--sp-8);
  white-space:nowrap; will-change:transform;
  animation:sp-marquee 42s linear infinite;   /* 約 30px／秒 */
}
.sp-marquee__track span{
  font-family:var(--sp-sans); font-weight:500;
  font-size:24px; line-height:1.4; letter-spacing:.06em; color:var(--sp-cream);
}
.sp-marquee__track span::after{
  content:"·"; margin-left:var(--sp-8); color:rgba(242,235,225,.45);
}
@keyframes sp-marquee{ to{ transform:translateX(-50%); } }
@media (max-width:689.98px){
  .sp-marquee{ height:48px; }
  .sp-marquee__track{ gap:var(--sp-6); animation-duration:56s; }  /* 約 20px／秒 */
  .sp-marquee__track span{ font-size:18px; }
  .sp-marquee__track span::after{ margin-left:var(--sp-6); }
}
/* 沒有動效時就停在原地，不做無限播放 */
@media (prefers-reduced-motion:reduce){
  .sp-marquee__track{ animation:none; }
}

/* --- 5 不對稱三圖 -------------------------------------------------------
   左欄標題垂直置中，右欄一張大圖配兩張小圖。
   標籤壓在照片左下，照片底部一律加漸層，否則白字在亮處會看不見。 */
.sp-triptych{ display:flex; align-items:center; gap:var(--sp-9); }
.sp-triptych__head{ flex:0 0 33%; min-width:0; }
.sp-triptych__note{ margin-top:var(--sp-5); color:var(--sp-ink-3); }
.sp-triptych__grid{ flex:1; min-width:0; display:flex; gap:var(--sp-3); }
.sp-triptych__col{ display:flex; flex-direction:column; gap:var(--sp-3); }
.sp-triptych__col--main{ flex:0 0 62%; }
.sp-triptych__col--side{ flex:1; min-width:0; }
.sp-figure{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
  text-decoration:none;
}
.sp-figure img{ width:100%; height:100%; object-fit:cover; }
.sp-figure::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--sp-scrim-bottom); pointer-events:none;
}
.sp-figure__cap{
  position:absolute; z-index:2; left:var(--sp-5); bottom:var(--sp-5); right:var(--sp-5);
}
.sp-figure__cap b{
  display:block; font-family:var(--sp-sans); font-weight:500;
  font-size:24px; line-height:1.4; letter-spacing:.03em; color:#FFFFFF;
}
.sp-figure__cap span{
  display:block; margin-top:var(--sp-1);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.sp-figure--main{ aspect-ratio:3/4; }
.sp-figure--t{ aspect-ratio:381/484; }
.sp-figure--b{ aspect-ratio:381/360; }
@media (hover:hover) and (pointer:fine){
  .sp-figure img{ transition:transform 700ms var(--sp-ease); }
  .sp-figure:hover img{ transform:scale(1.05); }
}
.sp-figure:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }
@media (max-width:999.98px){
  .sp-triptych{ flex-direction:column; align-items:stretch; gap:var(--sp-6); }
  .sp-triptych__head{ flex:none; }
  .sp-figure__cap b{ font-size:20px; }
}
@media (max-width:689.98px){
  .sp-triptych__grid{ flex-direction:column; }
  .sp-triptych__col--main{ flex:none; }
  .sp-figure--main{ aspect-ratio:4/3; }
  .sp-figure--t,.sp-figure--b{ aspect-ratio:16/10; }
}

/* --- 6 師資卡（拱形記號第 2 次，也是最後一次）--------------------------
   格狀不做輪播。教練超過 8 位時仍用格狀分列，不改輪播。 */
.sp-coaches__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  position:relative; z-index:1;
}
.sp-coach{
  background:#FFFFFF; border-radius:200px 200px var(--sp-radius) var(--sp-radius);
  box-shadow:var(--sp-shadow); overflow:hidden; display:flex; flex-direction:column;
}
.sp-coach__media{ height:280px; overflow:hidden; flex:none; }
/* 臉必須在畫面上半，拱頂才不會把頭切掉 */
.sp-coach__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.sp-coach__body{ padding:var(--sp-5); }
.sp-coach__name{
  margin:0; font-family:var(--sp-sans); font-weight:600;
  font-size:20px; line-height:1.4; letter-spacing:.03em; color:var(--sp-cocoa);
}
.sp-coach__role{ margin:var(--sp-1) 0 0; font-size:13px; letter-spacing:.05em; color:var(--sp-ink-3); }
.sp-coach__tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); }
.sp-coach__bio{ margin:var(--sp-3) 0 0; font-size:14px; line-height:1.8; color:var(--sp-ink-3); }
@media (max-width:999.98px){
  .sp-coaches__grid{ grid-template-columns:repeat(2,1fr); }
  .sp-coach__media{ height:320px; }
}
@media (max-width:689.98px){
  .sp-coaches__grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .sp-coach{ border-radius:160px 160px var(--sp-radius) var(--sp-radius); }
  .sp-coach__media{ height:300px; }
}

/* --- 7 分割 Banner -----------------------------------------------------
   課程資訊頁用兩次：一對一是 50/50 照片在左，團課是 40/60 面板在左。
   兩段相鄰且形式相同，靠比例與左右對調做出區別，不新增第五種版面形式。 */
.sp-split{
  display:flex; align-items:stretch;
  border-radius:var(--sp-radius); overflow:hidden;
}
/* 圖 60、文 40，一對一與團課兩個區塊統一，並排看過去比例才一致 */
.sp-split__media{ flex:1 1 60%; min-height:480px; position:relative; }
/* 圖片一定要絕對定位。照片是 4:5 直式，若留在流內，它會用自然比例
   把整段撐到兩三千 px 高，面板那一側則整片空白。 */
.sp-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sp-split__panel{
  flex:0 1 40%; background:var(--sp-cream); padding:var(--sp-8);
  display:flex; flex-direction:column; justify-content:center;
}
/* 團課：面板在左 40%、照片在右 60%，高度也比上一段矮一階 */
.sp-split--group .sp-split__media{ min-height:480px; }
.sp-split__lead{ margin-top:var(--sp-4); color:var(--sp-ink-3); }
.sp-split__cta{ margin-top:var(--sp-5); }
@media (max-width:999.98px){
  .sp-split{ flex-direction:column; }
  .sp-split--group{ flex-direction:column-reverse; }
  .sp-split__media,
  .sp-split--group .sp-split__media{ min-height:0; aspect-ratio:16/9; flex:none; }
  .sp-split__panel,
  .sp-split--group .sp-split__panel{ flex:none; padding:var(--sp-7); }
}
@media (max-width:689.98px){
  .sp-split__panel,
  .sp-split--group .sp-split__panel{ padding:var(--sp-5); }
}

/* --- 8 規格列 ----------------------------------------------------------
   每列 48px、只有下框線，不做卡片。數字一律 tabular-nums，
   否則不同方案的價格位數會對不齊。 */
.sp-specs{ list-style:none; margin:var(--sp-5) 0 0; padding:0; }
.sp-specs li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:48px; border-bottom:1px solid var(--sp-line);
}
.sp-specs b{ font-weight:500; font-size:16px; letter-spacing:.02em; color:var(--sp-cocoa); }
.sp-specs span{
  font-size:14px; letter-spacing:.03em; color:var(--sp-ink-3);
  font-variant-numeric:lining-nums tabular-nums; text-align:right;
}
.sp-note{ margin:var(--sp-4) 0 0; font-size:13px; line-height:1.8; color:var(--sp-ink-3); }
@media (max-width:689.98px){
  .sp-specs li{ flex-direction:column; align-items:flex-start; gap:2px; padding-block:var(--sp-3); }
  .sp-specs span{ text-align:left; }
}

/* --- 9 方案卡（本頁唯一的重音）-----------------------------------------
   一整張奶油米面板坐在白底上，裡面三張白卡。 */
.sp-panel{
  background:var(--sp-cream); border-radius:var(--sp-radius); padding:var(--sp-7);
  position:relative; z-index:1;
}
.sp-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.sp-plan{
  display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid var(--sp-line); border-radius:var(--sp-radius-sm);
  padding:var(--sp-6);
}
.sp-plan__head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.sp-plan__name{
  margin:0; font-family:var(--sp-sans); font-weight:600;
  font-size:20px; line-height:1.4; letter-spacing:.03em; color:var(--sp-cocoa);
}
.sp-plan__price{
  margin:var(--sp-4) 0 0; font-family:var(--sp-display); font-weight:300;
  font-size:32px; line-height:1.2; letter-spacing:.01em; color:var(--sp-cocoa);
  /* Cormorant 預設是舊體數字，5 與 0 會縮到 x 高，價格看起來像 I,5oo。
     lining-nums 讓數字回到等高，tabular-nums 讓三張卡的位數對齊。 */
  font-variant-numeric:lining-nums tabular-nums;
}
.sp-plan__price i{ font-style:normal; font-family:var(--sp-sans); font-size:14px; color:var(--sp-ink-3); }
.sp-plan__rule{ height:1px; background:var(--sp-line); margin:var(--sp-5) 0; }
.sp-plan__list{ list-style:none; margin:0; padding:0; flex:1; }
.sp-plan__list li{
  position:relative; padding-left:var(--sp-4);
  font-size:14px; line-height:1.8; color:var(--sp-ink-3);
}
.sp-plan__list li + li{ margin-top:var(--sp-2); }
.sp-plan__list li::before{ content:"・"; position:absolute; left:-2px; color:var(--sp-gold); }
.sp-plan .sp-btn{ margin-top:var(--sp-5); width:100%; max-width:none; }
.sp-panel__note{ margin:var(--sp-5) 0 0; text-align:center; font-size:14px; color:var(--sp-ink-3); }
@media (max-width:999.98px){
  /* 固定 2 欄在 900 會變成 2+1，右下空一格。
     auto-fit 讓它在 900 排 3 欄、768 以下自動退回 2 欄，不必新增斷點。 */
  .sp-plans{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .sp-panel{ padding:var(--sp-6); }
}
@media (max-width:689.98px){
  .sp-plans{ grid-template-columns:1fr; }
  .sp-panel{ padding:var(--sp-5); }
}

/* --- 10 場地租借（低調的單列面板，不搶本頁的重音）---------------------- */
.sp-rental{ display:flex; align-items:center; gap:var(--sp-7); }
.sp-rental__body{ flex:1; min-width:0; }
.sp-rental__list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.sp-rental__list li{
  position:relative; padding-left:var(--sp-4);
  font-size:14px; line-height:1.9; color:var(--sp-ink-3);
}
.sp-rental__list li::before{ content:"・"; position:absolute; left:-2px; color:var(--sp-gold); }
.sp-rental__cta{ margin-top:var(--sp-5); }
.sp-rental__media{
  flex:0 0 42%; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
}
.sp-rental__media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:999.98px){
  .sp-rental{ flex-direction:column; align-items:stretch; gap:var(--sp-5); }
  .sp-rental__media{ flex:none; }
}

/* --- 11 五館聯絡資訊面板（全站資訊密度最高的單一面板）-------------------
   欄與欄之間用 1px 垂直分隔線，不做卡片。 */
.sp-locs{ display:grid; grid-template-columns:repeat(5,1fr); }
/* 每欄自己是一個 flex 直欄，按鈕用 margin-top:auto 貼底。
   五館的地址長度不一，不這樣做五顆按鈕會停在五個不同的高度。 */
.sp-loc{
  display:flex; flex-direction:column;
  padding-inline:var(--sp-5); border-left:1px solid var(--sp-line);
}
/* 首欄只去掉分隔線，內距要保留。原本連 padding 一起拿掉，
   首尾兩欄的圖片就比中間三欄寬了 25px，五張圖大小不一致。 */
.sp-loc:first-child{ border-left:0; }
.sp-loc__name{
  margin:0; font-family:var(--sp-sans); font-weight:600;
  font-size:20px; line-height:1.4; letter-spacing:.03em; color:var(--sp-cocoa);
}
.sp-loc__name a{
  color:inherit; text-decoration:none;
  /* 館名只有 24px 高，補到 44 才符合觸控目標的最小尺寸。
     用 inline-flex 加 min-height，不影響原本的行距。 */
  display:inline-flex; align-items:center; min-height:44px;
}
.sp-loc__media{
  display:block;
  margin-top:var(--sp-3); aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--sp-radius-sm); border:1px solid var(--sp-line);
}
@media (hover:hover) and (pointer:fine){
  .sp-loc__name a:hover{ color:var(--sp-umber); }
  .sp-loc__media img{ transition:transform 700ms var(--sp-ease-soft); }
  a.sp-loc__media:hover img{ transform:scale(1.05); }
}
.sp-loc__name a:focus-visible,
a.sp-loc__media:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }
.sp-loc__media img{ width:100%; height:100%; object-fit:cover; }
.sp-loc__meta{ margin:var(--sp-4) 0 0; font-size:14px; line-height:1.8; color:var(--sp-ink-3); }
.sp-loc__meta a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--sp-line); }
.sp-loc__meta a:hover{ color:var(--sp-cocoa); }
.sp-loc__mrt{ margin:var(--sp-2) 0 0; font-size:14px; line-height:1.8; color:var(--sp-ink-3); }
/* 最小間距要加在上一個元素身上。按鈕的 margin-top 已經被 auto 佔用，
   在按鈕自己身上補 padding-top 只會把文字往下推、把按鈕撐高。 */
.sp-loc__mrt{ margin-bottom:var(--sp-5); }
.sp-loc .sp-btn{
  /* auto 讓五顆按鈕貼齊面板底部，不受上方地址行數影響 */
  margin-top:auto;
  width:100%; max-width:none; min-width:0;
  /* 「101 信義安和店」這種長館名會折成兩行，所以用 min-height 不用 height */
  height:auto; min-height:40px; padding-inline:var(--sp-4);
  padding-block:var(--sp-2); font-size:14px; text-align:center;
}
@media (max-width:999.98px){
  /* 五個據點排 2 欄會是 2+2+1，900 的寬度排得下 3 欄（3+2）。 */
  .sp-locs{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--sp-6) 0; }
  .sp-loc:nth-child(odd){ border-left:0; padding-left:0; }
  .sp-loc:nth-child(even){ padding-right:0; }
}
@media (max-width:689.98px){
  .sp-locs{ grid-template-columns:1fr; gap:var(--sp-6); }
  .sp-loc{ border-left:0; padding-inline:0; }
  .sp-loc + .sp-loc{ border-top:1px solid var(--sp-line); padding-top:var(--sp-6); }
  .sp-loc .sp-btn{ height:48px; font-size:15px; }
}

/* --- 12 常見問題（手風琴）----------------------------------------------
   只有上下 1px 線，不做卡片、不做圓角、不做陰影。
   互斥展開用 <details name="...">，不寫 JS：不支援的瀏覽器只是可以同時展開多題，
   是可接受的降級，比為了互斥而讓沒有 JS 的人完全打不開好。 */
/* 原本 699px，比同一頁的「五個據點」與「留言給我們」窄了一大截，
   三個區塊擺在一起會覺得只有這一塊縮排。改成跟著容器走，
   問題與答案的文字另外用 42em 限行長，不會因為變寬就難讀。 */
.sp-faq{ width:100%; }
.sp-faq__item > summary{ max-width:none; }
.sp-faq__item > summary > :first-child{ max-width:42em; }
.sp-faq__a{ max-width:42em; }
.sp-faq__item{ border-bottom:1px solid var(--sp-line); background:rgba(242,235,225,.4); }
.sp-faq__item:first-child{ border-top:1px solid var(--sp-line); }
.sp-faq__item[open]{ background:transparent; }
.sp-faq__item > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-4); cursor:pointer; list-style:none;
  font-size:18px; line-height:1.7; letter-spacing:.02em; color:var(--sp-cocoa);
}
.sp-faq__item > summary::-webkit-details-marker{ display:none; }
.sp-faq__item > summary:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:-2px; }
.sp-faq__chev{
  flex:none; width:24px; height:24px; color:var(--sp-gold);
  transition:transform 300ms var(--sp-ease);
}
.sp-faq__chev svg{ width:100%; height:100%; fill:none; stroke:currentColor;
                   stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sp-faq__item[open] .sp-faq__chev{ transform:rotate(180deg); }
.sp-faq__a{
  margin:0; padding:0 var(--sp-4) var(--sp-5);
  font-size:16px; line-height:1.85; color:var(--sp-ink-3);
}
.sp-faq__a a{ color:var(--sp-umber); }
@media (max-width:689.98px){
  .sp-faq__item > summary{ font-size:16px; padding-inline:0; }
  .sp-faq__a{ font-size:15px; padding-inline:0; }
}

/* --- 13 表單與聯絡資訊兩欄 ---------------------------------------------- */
/* 左邊是聯絡資訊，右邊是表單。DOM 順序與視覺順序一致，
   手機堆疊時也是資訊在上、表單在下，不用 order 硬翻。 */
.sp-formrow{ display:flex; align-items:flex-start; gap:var(--sp-7); }
.sp-formrow__side{
  flex:0 0 34%; background:var(--sp-cream);
  border-radius:var(--sp-radius); padding:var(--sp-7);
}
.sp-formrow__form{ flex:1 1 58%; min-width:0; }
.sp-formrow__side dl{ margin:var(--sp-5) 0 0; }
.sp-formrow__side dt{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sp-umber);
}
.sp-formrow__side dd{
  margin:var(--sp-1) 0 var(--sp-5); font-size:16px; line-height:1.7; color:var(--sp-cocoa);
}
.sp-formrow__side dd a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--sp-line); }
.sp-formrow__social{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-5); }
.sp-formrow__social a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14px; letter-spacing:.06em; color:var(--sp-ink-3);
  text-decoration:none; border-bottom:1px solid var(--sp-line);
}
.sp-formrow__social a:hover{ color:var(--sp-cocoa); }
/* 送出鈕附近的告知文字。依客戶指示不放同意條款勾選框，改用這一行。 */
.sp-consent{ margin:var(--sp-4) 0 0; font-size:13px; line-height:1.8; color:var(--sp-ink-3); }
.sp-consent a{ color:var(--sp-umber); }
@media (max-width:999.98px){
  .sp-formrow{ flex-direction:column; gap:var(--sp-6); }
  .sp-formrow__form,.sp-formrow__side{ flex:none; width:100%; }
}
@media (max-width:689.98px){
  .sp-formrow__side{ padding:var(--sp-5); }
}

/* --- 14 據點總覽卡的補充資訊 -------------------------------------------
   總覽頁沿用首頁的 .sp-studio 卡片，不新增第二種形式，
   只多一條館內特色，讓總覽頁比首頁那一段多帶一層資訊。 */
.sp-studio__feats{
  list-style:none; margin:var(--sp-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3);
}
.sp-studio__feats li{
  position:relative; padding-left:var(--sp-3);
  font-size:13px; line-height:1.8; color:var(--sp-ink-3);
}
.sp-studio__feats li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:4px; height:4px; border-radius:999px; background:var(--sp-gold);
}

/* --- 15 館別內頁的單館模組 ---------------------------------------------
   規範第 12 章的 StudioModule。原本設計成單頁五段，定案改為五個獨立頁面，
   版面規格不變，只是每一頁放一館。奇數館圖左文右、偶數館鏡射。 */
.sp-sdetail{ display:flex; align-items:flex-start; gap:var(--sp-9); }
.sp-sdetail--rev{ flex-direction:row-reverse; }
.sp-sdetail__media{ flex:0 0 44%; min-width:0; }
.sp-sdetail__main{
  aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
}
.sp-sdetail__main img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.sp-sdetail__copy{ flex:1; min-width:0; }

/* 館內相簿：每館固定 4 張，不留缺角。
   照片尚未拍攝的位置放同尺寸佔位框，讓人一眼看出要補幾張、補什麼構圖。 */
.sp-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.sp-gallery__item{
  aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--sp-radius-sm); border:1px solid var(--sp-line);
}
.sp-gallery__item img{ width:100%; height:100%; object-fit:cover; }
.sp-gallery__ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--sp-cream); border-style:dashed; border-color:var(--sp-line-strong);
  padding:var(--sp-2); font-size:12px; line-height:1.6; color:var(--sp-ink-3);
}

/* 資訊面板：五行，左 label 固定寬、右 value */
.sp-infopanel{
  background:var(--sp-cream); border-radius:var(--sp-radius);
  padding:var(--sp-5); margin-top:var(--sp-5);
}
.sp-infopanel dl{ margin:0; }
.sp-infopanel .sp-inforow{
  display:flex; gap:var(--sp-4); align-items:baseline;
  padding-block:var(--sp-2);
}
.sp-infopanel .sp-inforow + .sp-inforow{ border-top:1px solid var(--sp-line); }
.sp-infopanel dt{ flex:0 0 60px; font-size:14px; line-height:1.8; color:var(--sp-ink-3); }
.sp-infopanel dd{
  flex:1; min-width:0; margin:0;
  font-size:16px; line-height:1.8; letter-spacing:.02em; color:var(--sp-cocoa);
}
.sp-infopanel dd a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--sp-line); }
.sp-sdetail__lead{ margin-top:var(--sp-4); }
.sp-sdetail__rule{ width:min(411px,100%); height:1px; background:var(--sp-line); margin:var(--sp-5) 0; }
.sp-sdetail__btns{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-5); }
/* 第 1 館專屬：場地租借資訊列 */
.sp-rentalrow{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:var(--sp-cream); border-radius:var(--sp-radius-sm);
  padding:var(--sp-4); margin-top:var(--sp-4);
  font-size:14px; line-height:1.7; color:var(--sp-ink-3);
}
.sp-rentalrow a{ flex:none; color:var(--sp-umber); text-decoration:none; border-bottom:1px solid rgba(142,91,59,.4); }
@media (max-width:999.98px){
  .sp-sdetail,.sp-sdetail--rev{ flex-direction:column; gap:var(--sp-6); }
  .sp-sdetail__media{ flex:none; width:100%; }
  .sp-sdetail__main{ aspect-ratio:4/3; }
  .sp-gallery{ grid-template-columns:repeat(4,1fr); }
  .sp-gallery__item{ aspect-ratio:1/1; }
  .sp-sdetail__btns .sp-btn,.sp-sdetail__btns .sp-btn-ghost{ flex:1 1 auto; }
}
@media (max-width:689.98px){
  .sp-gallery{ grid-template-columns:repeat(2,1fr); }
  .sp-infopanel .sp-inforow{ flex-direction:column; gap:0; }
  .sp-infopanel dt{ flex:none; }
  .sp-sdetail__btns{ flex-direction:column; }
  .sp-rentalrow{ flex-direction:column; align-items:flex-start; }
}

/* --- 16 其他據點（館別內頁之間的互連）---------------------------------- */
.sp-others{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.sp-other{
  display:block; text-decoration:none;
  border-radius:var(--sp-radius); overflow:hidden;
  border:1px solid var(--sp-line); background:#FFFFFF;
}
.sp-other__media{ aspect-ratio:4/3; overflow:hidden; }
.sp-other__media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--sp-ease); }
@media (hover:hover) and (pointer:fine){ .sp-other:hover img{ transform:scale(1.05); } }
.sp-other__body{ padding:var(--sp-4); }
.sp-other__name{
  margin:0; font-family:var(--sp-sans); font-weight:600;
  font-size:16px; line-height:1.5; letter-spacing:.03em; color:var(--sp-cocoa);
}
.sp-other__mrt{ margin:var(--sp-1) 0 0; font-size:13px; line-height:1.7; color:var(--sp-ink-3); }
.sp-other:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }
@media (max-width:999.98px){ .sp-others{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:689.98px){ .sp-others{ grid-template-columns:1fr; } }

/* --- 17 法務頁（隱私權政策、服務條款）----------------------------------
   沿用文章內頁的單欄排版：內文欄 640px 置中，章節用 24px 小標分節。
   這兩頁不放 Hero 大圖，標題區直接接內文，讓條文更快出現。 */
.sp-legal{ max-width:var(--sp-measure); margin-inline:auto; }
.sp-legal__head{ text-align:center; }
.sp-legal__meta{
  margin:var(--sp-5) 0 0; font-size:14px; line-height:1.9;
  color:var(--sp-ink-3); text-align:left;
}
.sp-legal__body{ margin-top:var(--sp-9); }
.sp-legal__body h2{
  margin:48px 0 20px; font-family:var(--sp-sans); font-weight:600;
  font-size:24px; line-height:1.5; letter-spacing:.02em; color:var(--sp-cocoa);
}
.sp-legal__body h2:first-child{ margin-top:0; }
.sp-legal__body p{
  margin:0 0 28px; font-size:18px; line-height:1.9; letter-spacing:.03em; color:var(--sp-ink);
}
.sp-legal__body ol,.sp-legal__body ul{ margin:0 0 28px; padding-left:1.6em; }
.sp-legal__body li{ font-size:18px; line-height:1.9; letter-spacing:.03em; }
.sp-legal__body li + li{ margin-top:12px; }
.sp-legal__body a{ color:var(--sp-umber); }
/* 條文裡的聯絡資訊表 */
.sp-legal__contact{ margin:0; }
.sp-legal__contact div{ display:flex; gap:var(--sp-4); padding-block:var(--sp-2); }
.sp-legal__contact div + div{ border-top:1px solid var(--sp-line); }
/* 96px 裝不下最長的那個標籤「LINE 官方帳號」（16px 下約 104px），
   會斷成「LINE 官方帳 / 號」兩行。112 留了餘裕，其餘標籤照樣對齊。 */
.sp-legal__contact dt{ flex:0 0 112px; font-size:16px; color:var(--sp-ink-3); }
.sp-legal__contact dd{ flex:1; margin:0; font-size:16px; line-height:1.8; color:var(--sp-cocoa); }
/* 待客戶填寫的佔位符。用底線標出來，不要讓它混在條文裡被忽略。 */
.sp-todo{
  background:transparent; color:var(--sp-alert);
  border-bottom:1px dashed currentColor; padding-bottom:1px;
}
@media (max-width:689.98px){
  .sp-legal__body h2{ font-size:20px; margin-top:36px; }
  .sp-legal__body p,.sp-legal__body li{ font-size:16px; }
  .sp-legal__contact div{ flex-direction:column; gap:0; }
  .sp-legal__contact dt{ flex:none; font-size:14px; }
}

/* --- 18 最新消息列表 ----------------------------------------------------
   分類 Tab 是 sticky，卡片格每頁固定 6 篇（2 列，不留缺角），
   下方一顆「載入更多」。禁止無限捲動與無按鈕的自動載入（規範第 11 章）。 */
.sp-tabs{
  position:sticky; top:calc(var(--sp-header-h) + 8px); z-index:20;
  display:flex; align-items:center; gap:var(--sp-7);
  min-height:66px; padding-inline:var(--sp-7);
  background:var(--sp-cream); border-radius:var(--sp-radius);
  margin-bottom:var(--sp-7);
}
.sp-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:var(--sp-3) 0; font-family:var(--sp-sans); font-weight:500;
  font-size:16px; letter-spacing:.05em; color:var(--sp-cocoa);
  border-bottom:1px solid transparent;
  transition:color 300ms var(--sp-ease), border-color 300ms var(--sp-ease);
}
/* 選取態用假粗體，換字重會讓 Tab 寬度跳動 */
.sp-tab[aria-selected="true"]{
  border-bottom-color:currentColor;
  text-shadow:0.5px 0 0 currentColor;
}
.sp-tab:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:2px; }
.sp-tabs__count{ margin-left:auto; font-size:16px; color:var(--sp-ink-3); }
.sp-newslist__empty{ padding:var(--sp-9) 0; text-align:center; color:var(--sp-ink-3); }
@media (max-width:999.98px){
  .sp-tabs{ gap:var(--sp-5); padding-inline:var(--sp-5); }
}
@media (max-width:689.98px){
  .sp-tabs{
    min-height:56px; gap:var(--sp-5); overflow-x:auto; scrollbar-width:none;
    justify-content:flex-start;
  }
  .sp-tabs::-webkit-scrollbar{ display:none; }
  .sp-tab{ white-space:nowrap; min-height:44px; }
  .sp-tabs__count{ display:none; }
}

/* --- 19 文章內頁（自訂 HTML 與 WordPress 編輯器兩種容器共用）--------------------------------------------------------
   標題區置中 12 欄，正文單欄 640px。全站唯一允許連續長文的地方。 */
.sp-article__head{ max-width:699px; margin-inline:auto; text-align:center; }
.sp-article__meta{ margin:var(--sp-4) 0 0; font-size:14px; color:var(--sp-ink-3); }
.sp-article__cover{
  margin-top:var(--sp-7); aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
}
.sp-article__cover img{ width:100%; height:100%; object-fit:cover; }
.sp-article__body{ max-width:var(--sp-measure); margin-inline:auto; }

/* 版型已經改成右側欄，文章欄本身就是 Blocksy 扣掉 25% 側欄之後的寬度
   （1440 視窗下是 916px）。在那裡面再壓一層 640px 並置中，
   左右各多出 138px 的空白，而特色圖與上下篇導覽沒被壓、仍是滿欄，
   一頁裡就出現兩個對齊基準，看起來很散。
   正文直接跟著文章欄走，標題也改回置左。 */
.single-post :is(.entry-header,.entry-content,.ct-share-box){
  max-width:none; margin-inline:0;
}
/* 文章欄本身是 916px，18px 的正文一行會排到 51 個字，略微超過好讀的範圍。
   給段落一個貼近欄寬的上限（46em ≈ 828px，一行 46 字），
   靠左不置中，右邊只少 88px，看起來仍然是滿欄。 */
.single-post .entry-content > :is(p,ul,ol,blockquote){ max-width:44em; }
.single-post .entry-header{ text-align:left; }
/* 標題與日期的規格照規範第 11 章：H1 用明體 40px，日期與分類是 14px 小字。
   Blocksy 預設的標題字級是跟著主題設定走的，不設的話會偏小。 */
.single-post .entry-header .page-title{
  font-family:var(--sp-display); font-weight:300;
  font-size:40px; line-height:1.3; letter-spacing:.01em;
  color:var(--sp-cocoa); margin:0;
}
.single-post .entry-header .entry-meta{
  margin:var(--sp-4) 0 0; justify-content:flex-start;
  font-size:14px; line-height:1.7; color:var(--sp-ink-3);
}
.single-post .entry-header .entry-meta a{ color:var(--sp-ink-3); }
@media (max-width:689.98px){
  .single-post .entry-header .page-title{
    font-family:var(--sp-sans); font-weight:600; font-size:24px;
  }
}
/* 主圖維持 1290 滿版，但補上規範的 16:9 與圓角 */
.single-post .ct-featured-image{
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
  margin-bottom:var(--sp-8);
}
.single-post .ct-featured-image img{ width:100%; height:100%; object-fit:cover; }
.single-post .ct-share-box{ margin-top:var(--sp-8); }
/* 段間距由這兩條負責。下面 p 的規則不能再寫 margin：
   「p」比「> * + *」多一個元素選擇器，特異性較高，會把間距蓋成 0。 */
:is(.sp-article__body,.single-post .entry-content) > *{ margin-block:0; }
:is(.sp-article__body,.single-post .entry-content) > * + *{ margin-top:28px; }
:is(.sp-article__body,.single-post .entry-content) p{
  font-size:18px; line-height:1.9; letter-spacing:.03em; color:var(--sp-ink);
}
:is(.sp-article__body,.single-post .entry-content) h2{
  margin:48px 0 20px; font-family:var(--sp-sans); font-weight:600;
  font-size:24px; line-height:1.5; letter-spacing:.02em; color:var(--sp-cocoa);
}
:is(.sp-article__body,.single-post .entry-content) h3{
  margin:32px 0 16px; font-family:var(--sp-sans); font-weight:600;
  font-size:20px; line-height:1.6; color:var(--sp-cocoa);
}
:is(.sp-article__body,.single-post .entry-content) ul,:is(.sp-article__body,.single-post .entry-content) ol{ margin:0; padding-left:1.6em; }
:is(.sp-article__body,.single-post .entry-content) li{ font-size:18px; line-height:1.9; }
:is(.sp-article__body,.single-post .entry-content) li + li{ margin-top:12px; }
/* 引言只留一條左框線，不做卡片 */
:is(.sp-article__body,.single-post .entry-content) blockquote{
  margin:0; padding-left:var(--sp-5); border-left:1px solid var(--sp-line);
  font-size:18px; line-height:1.9; color:var(--sp-ink-3);
}
:is(.sp-article__body,.single-post .entry-content) a{ color:var(--sp-cocoa); border-bottom:1px solid var(--sp-line); text-decoration:none; }
:is(.sp-article__body,.single-post .entry-content) a:hover{ color:var(--sp-ink-3); }
.sp-article__tags{
  max-width:var(--sp-measure); margin:var(--sp-9) auto 0; padding-top:var(--sp-6);
  border-top:1px solid var(--sp-line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:wrap;
}
.sp-article__tags .sp-pill + .sp-pill{ margin-left:var(--sp-2); }
@media (max-width:689.98px){
  :is(.sp-article__body,.single-post .entry-content) p,:is(.sp-article__body,.single-post .entry-content) li,:is(.sp-article__body,.single-post .entry-content) blockquote{ font-size:16px; }
  :is(.sp-article__body,.single-post .entry-content) h2{ font-size:20px; }
  :is(.sp-article__body,.single-post .entry-content) h3{ font-size:18px; }
}

/* --- 20 觸控目標 --------------------------------------------------------
   WCAG 2.5.5 要求可點擊區至少 44×44。用 (pointer:coarse) 而不是寬度查詢：
   iPad 橫向是 1024px，吃的是桌機佈局，但仍然是手指操作。
   這不是寬度查詢，沒有違反「整份 CSS 只准出現兩個斷點」。

   段落與條列裡的行內文字連結不在此限（WCAG 2.5.8 的行內例外），
   把它們撐到 44px 會把行距整個拉開。 */
@media (pointer:coarse){
  .sp-footer__social a,
  .sp-footer__line,
  .sp-footer__col h3 a,
  .sp-footer__bottom a,
  .sp-formrow__social a,
  .sp-formrow__side dd a,
  .sp-loc__meta a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  /* 五館面板的 LINE 鈕，規範寫 40px，觸控裝置上補到 44px */
  .sp-loc .sp-btn{ min-height:44px; }
  /* 分類 Tab 與手風琴題目 */
  .sp-tab{ min-height:44px; }
  .sp-faq__item > summary{ min-height:44px; }
  /* 頁首的品牌名連結 */
  /* 品牌名連結：中英文是兩個 block span，必須直排。
     這裡原本是預設的 flex row，兩個 span 一被當成 flex item 就並排了，
     而 display:block 對 flex item 沒有作用。
     要用 column 才能一邊保住 44px 的命中區、一邊維持上下兩行。

     這條是 (pointer:coarse) 的規則，不是寬度查詢：
     headless 沒開觸控模擬時它不生效，所以量測時看起來一切正常，
     只有真手機會壞。 */
  .ct-header .site-title a{
    display:inline-flex; flex-direction:column;
    justify-content:center; align-items:flex-start;
    min-height:44px;
  }
}

/* 這幾個元件在觸控裝置上本來就偏小，用偽元素或 min-height 把命中區補到 44px。
   偽元素只擴大命中區，不改變看得到的尺寸。 */
@media (pointer:coarse){
  /* 輪播指示點：視覺上是 32×3 的線條，命中區補到 44 高 */
  .sp-dots button{ position:relative; }
  /* 指示點本身是 32×3 的線條，上下各補 21px 讓命中區到 45px */
  .sp-dots button::before{ content:""; position:absolute; inset:-21px -6px; }
  /* 館別內頁的場地租借文字鈕與資訊面板裡的電話 */
  .sp-rentalrow a,
  .sp-infopanel dd a{ display:inline-flex; align-items:center; min-height:44px; }
}


/* --- 21 行長上限 --------------------------------------------------------
   中文一行超過 45 字就難讀（規範第 15 章的定案值是 550px 或 30ch）。
   主要正文早就有 --sp-measure 限制，但「說明類」的段落沒有：
   它們跟著面板或欄位的寬度走，在 1440 的寬螢幕上會拉到 90 字一行。

   用 em 不用 px，行長才會跟著字級走：42em 在 14px 是 42 個中文字，
   在 18px 也是 42 個字，不會因為字級改了就要重算。 */
.sp-consent,
.sp-legal__meta,
.sp-voices__note,
.sp-panel__note,
.sp-split__lead,
.sp-triptych__note,
.sp-sdetail__lead,
.sp-note{
  max-width: 42em;
}
/* 置中的說明要一起把左右留白補上，否則只會靠左 */
.sp-panel__note,
.sp-voices__note{ margin-inline: auto; }


/* --- 22 教學團隊的背景 --------------------------------------------------
   這一區只有三段文字，靠米色底撐一整個區塊會太空。
   做法沿用首頁學員見證那一套：照片鋪底、深色遮罩壓上去，文字轉白。
   照片是客戶《03_單位介紹》的實拍，調色與全站其他照片同一組參數。 */
.sp-teambg{ position:relative; overflow:hidden; }
.sp-teambg__bg{ position:absolute; inset:0; z-index:0; }
.sp-teambg__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
/* 遮罩終點 0.72 比照片壓字的 0.65 再深一點：這一區的文字比較長，
   而且要讓米色的區塊編號與眉標也看得清楚。 */
.sp-teambg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(66,43,36,.78) 0%,rgba(66,43,36,.62) 50%,rgba(66,43,36,.78) 100%);
}
.sp-teambg > .sp-block{ position:relative; z-index:2; }
.sp-teambg .sp-h2,
.sp-teambg .sp-body-l{ color:#FFFFFF; }
.sp-teambg .sp-eyebrow{ color:var(--sp-milk); }
.sp-teambg .sp-secno{ color:var(--sp-milk); }
.sp-teambg .sp-panel__note{ color:rgba(255,255,255,.72); }
.sp-teambg .sp-reveal::after{ background:var(--sp-cocoa); }


/* --- 23 教學的三件事：左欄的三個步驟 -----------------------------------
   原本左欄只有標題與一句話，右欄卻是三張照片，兩邊的份量差太多。
   補上三個 icon 與各自的說明，左右才平衡。
   icon 用 inline SVG，筆畫 1.25 與全站的髮絲線一致，不另外引 icon 字型。 */
.sp-steps{
  list-style:none; margin:var(--sp-7) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--sp-6);
}
.sp-step{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  /* 平板以下左欄會變成整列，不設上限的話這一整條會拉到 840px 寬 */
  max-width:38em;
}
/* 課程子頁的 .sp-ico 與品牌故事頁的 .sp-step__icon 共用同一組宣告，
   全站只有這一套 icon 語彙：44px 圓框、1px 細邊、紙白底、線條 1.25。 */
.sp-step__icon,.sp-ico{
  flex:0 0 44px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sp-line); border-radius:50%;
  background:var(--sp-paper);
}
.sp-step__icon svg,.sp-ico svg{
  width:22px; height:22px; display:block;
  fill:none; stroke:var(--sp-umber); stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}

/* 尺寸變體。一定要寫在上面的基礎宣告「之後」：
   .sp-ico--lg 與 .sp-ico 的特異性同分（各一個 class），
   寫在前面會被後面的 44px 整個蓋掉，icon 就完全不會變大。 */
.sp-ico--sm{ flex:0 0 28px; width:28px; height:28px; }
.sp-ico--sm svg{ width:15px; height:15px; }
/* 課程子頁的區塊 icon：80px 圓框，圖形放大到 40，線條維持 1.25 不加粗 */
.sp-ico--lg{ flex:0 0 80px; width:80px; height:80px; }
.sp-ico--lg svg{ width:40px; height:40px; }
.sp-step b{
  display:block; font-family:var(--sp-sans); font-weight:600;
  font-size:17px; line-height:1.5; letter-spacing:.02em; color:var(--sp-cocoa);
}
.sp-step p{
  margin:var(--sp-2) 0 0; max-width:32em;
  font-size:15px; line-height:1.8; letter-spacing:.02em; color:var(--sp-ink-3);
}
@media (max-width:999.98px){
  .sp-steps{ gap:var(--sp-5); margin-top:var(--sp-6); }
}
@media (max-width:689.98px){
  .sp-step__icon,.sp-ico{ flex-basis:38px; width:38px; height:38px; }
  .sp-step__icon svg,.sp-ico svg{ width:19px; height:19px; }
  /* 變體要寫在後面，不然會被上一條的 38px 蓋掉 */
  .sp-ico--sm{ flex-basis:28px; width:28px; height:28px; }
  .sp-ico--sm svg{ width:15px; height:15px; }
  .sp-ico--lg{ flex-basis:64px; width:64px; height:64px; }
  .sp-ico--lg svg{ width:32px; height:32px; }
  .sp-step b{ font-size:16px; }
  .sp-step p{ font-size:14px; }
}

/* --- 24 單位介紹的五張卡片 ----------------------------------------------
   使用者反映「五個資訊太靠近了，彼此之間應該要有點間距」。
   .sp-studios__grid 原本只靠 gap 分隔，卡片本身沒有邊界，
   五張連在一起看起來像一整條。改成有底色與邊框的卡片，gap 也拉開。 */
.sp-studios__grid{ gap:var(--sp-5); }
:is(.sp-page,.sp-home) .sp-studio{
  /* 五館的特色列點長短不一，卡片被 grid 拉成等高之後，
     短的那張底部資訊列會停在半空中，同一列兩張卡差到快 30px。
     改成直向 flex，資訊列用 margin-top:auto 壓到底，五張的底線就對齊了。 */
  display:flex; flex-direction:column;
  background:var(--sp-paper);
  border:1px solid var(--sp-line); border-radius:var(--sp-radius);
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  transition:border-color 300ms var(--sp-ease), box-shadow 300ms var(--sp-ease);
}
@media (hover:hover) and (pointer:fine){
  :is(.sp-page,.sp-home) .sp-studio:hover{ border-color:var(--sp-milk); box-shadow:var(--sp-shadow); }
}
:is(.sp-page,.sp-home) .sp-studio .sp-studio__media{ border-radius:var(--sp-radius-sm); }
/* 列點與底下那條分隔線貼太近，把列點的下緣拉開 */
:is(.sp-page,.sp-home) .sp-studio__feats{ margin-bottom:var(--sp-5); }
:is(.sp-page,.sp-home) .sp-studio__meta{ margin-top:auto; padding-top:var(--sp-4); }

/* --- 25 其他四個據點：底色改成漸層加弧線 --------------------------------
   原本是整片奶油米實色，五個館別頁都一樣，看久了很單調。
   換成斜向漸層，再墊兩個大弧線，與 CTA 用同一套語彙。 */
.sp-others-band{
  position:relative; overflow:hidden;
  /* 原本是米色漸層，但下面接的頁尾也是米色，兩塊連在一起分不出界線。
     改成照片鋪底加深色遮罩，與頁尾拉開對比，做法與其他頁的轉換區塊一致。 */
  background:var(--sp-cocoa);
}
.sp-others-band__bg{ position:absolute; inset:0; z-index:0; }
.sp-others-band__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.sp-others-band::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* 0.82 太深，背景照整個被吃掉，看起來只剩一塊純深棕。
     壓到 0.62 左右，照片的拱形與器械線條看得出來，白字也還有 7:1 以上的對比。 */
  background:linear-gradient(180deg,rgba(66,43,36,.70) 0%,rgba(66,43,36,.56) 46%,rgba(66,43,36,.74) 100%);
}
.sp-others-band > .sp-block{ position:relative; z-index:2; }
.sp-others-band .sp-eyebrow{ color:var(--sp-milk); }
.sp-others-band .sp-h2{ color:#FFFFFF; }
.sp-others-band .sp-secno{ color:var(--sp-milk); }

/* 四張據點卡改成毛玻璃：半透明底加模糊，讓背景照透一點出來 */
.sp-others-band .sp-other{
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--sp-radius);
  overflow:hidden;
  transition:background-color 300ms var(--sp-ease), border-color 300ms var(--sp-ease);
}
.sp-others-band .sp-other__body{ padding:var(--sp-4); }
.sp-others-band .sp-other__name{ color:#FFFFFF; }
.sp-others-band .sp-other__mrt{ color:rgba(255,255,255,.72); }
@media (hover:hover) and (pointer:fine){
  .sp-others-band .sp-other:hover{
    background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42);
  }
}
/* 不支援 backdrop-filter 時退回不透明一點的底，不要變成看不清楚的透明塊 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sp-others-band .sp-other{ background:rgba(66,43,36,.55); }
}

/* --- 37 館別頁的最後一段直接接頁尾 -------------------------------------
   與教學團隊同一個問題：頁尾是 Content Block，掛在 </main> 之外，
   .sp-site-footer 的 120px margin 露出 body 的白底，
   夾在米色的「其他四個據點」與米色頁尾之間就是一條白。
   用負的下邊距把 main 的高度收回來。 */
.sp-page > .sp-others-band:last-child{ margin-bottom:calc(-1 * var(--sp-gap)); }


/* --- 26 編號與英文小標併成一行 -----------------------------------------
   給 .sp-secno 加上 --inline 之後，編號、髮絲線與英文小標排在同一列，
   下面直接接中文標題，不再是「編號 / 英文 / 中文」三段疊起來。 */
.sp-secno--inline{ gap:var(--sp-4); }
/* 髮絲線要給固定寬度。基礎規則的 .sp-secno i{ flex:1 } 會讓它吃掉整列，
   把英文小標推到最右端，變成「02 ————————————— FAQ」，
   那不是同一行，是分到兩端。 */
.sp-secno--inline i{ flex:0 0 48px; }
/* 小標之後的空間交給 auto，整組才會靠左收在一起 */
.sp-secno--inline .sp-eyebrow{ flex:none; margin-right:auto; }
.sp-sechead--center .sp-secno--inline{ justify-content:center; }
.sp-sechead--center .sp-secno--inline .sp-eyebrow{ margin-right:0; }

/* --- 27 深色滿版帶直接接頁尾 -------------------------------------------
   教學團隊是深色的滿版帶，後面就是頁尾。中間那 120px 的白色間距，
   讓深色與米色之間夾了一條白，看起來像沒接好。

   頁尾是 Blocksy 的 Content Block，掛在 </main> 之外，
   跟頁面內的區塊不是相鄰兄弟，所以 .sp-teambg + .sp-site-footer 對不到。
   改成用負的下邊距把 main 的高度收回來，頁尾自然就貼上去。 */
.sp-page > .sp-teambg:last-child,
.sp-page > .sp-ctaband:last-child,
.sp-page > .sp-others-band:last-child{ margin-bottom:calc(-1 * var(--sp-gap)); }
/* 兩個深色滿版帶相鄰時（教學團隊接轉換區塊），中間不要留白 */
.sp-teambg + .sp-ctaband{ margin-top:0; }


/* --- 28 按鈕在 hover 時文字被背景吃掉 ----------------------------------
   Blocksy 的 main.min.css 有一條沒有任何 class 的
   a:hover{ color:var(--theme-link-hover-color) }，特異性 (0,1,1)。
   而我們的 .sp-btn{ color:#FFF } 只有 (0,1,0)，hover 時輸掉，
   白字被換成 #7A4A30，背景卻還停在 #8E5B3B，對比只剩 1.30:1。

   .sp-btn-ghost 沒事，因為它本來就寫了自己的 :hover{ color }（0,2,0）。
   .ct-button 與表單送出鈕也沒事，因為那兩個是 <button>，吃不到 a:hover。
   壞掉的全是 <a> 版本的按鈕，所以這裡把它們的文字色一律釘回去。
   選擇器前面加 a 讓特異性到 (0,2,1)，穩穩壓過主題那條。 */
a.sp-btn:hover, a.sp-btn:focus-visible,
a.sp-float:hover, a.sp-float:focus-visible{ color:#FFFFFF; }
a.sp-btn:hover{ background:var(--sp-umber-hover); }

/* 浮動按鈕原本連一條自己的 hover 都沒有，行為 100% 來自主題那條 a:hover */
.sp-float{ transition:opacity 300ms var(--sp-ease), background-color 300ms var(--sp-ease); }
a.sp-float:hover{ background:var(--sp-umber-hover); }

/* 米色底上的深色連結：hover 只加深，不要讓主題把它換成別的色 */
a.sp-picker__row:hover, a.sp-picker__row:focus-visible,
a.sp-footer__line:hover, a.sp-footer__line:focus-visible{ color:var(--sp-umber-hover); }

/* --- 29 英文小標與標題的間距 -------------------------------------------
   原本這個間距是靠 4 條「容器專屬」的規則各寫一次
   （.sp-sechead / .sp-hero__copy / .sp-brand__copy / .sp-pbanner__copy），
   結果 .sp-longform__inner、.sp-founder__copy、.sp-triptych__head、
   .sp-sdetail__copy 這四個容器漏掉了，那幾頁的英文小標就直接貼著標題。
   （基礎規則 .sp-h1,.sp-h2{ margin:0 } 把標題的 margin 歸零，
     沒被容器規則命中就是 0。）

   改成掛在結構上：只要 eyebrow 後面接的是標題就有間距，
   不必再為每個新容器補一條。數值 18px 是原本的 12 再加 6。 */
.sp-eyebrow + :is(.sp-display,.sp-h1,.sp-h2),
.sp-eyebrow + .sp-h3{ margin-top:18px; }

/* --- 30 最新消息的分類篩選 ---------------------------------------------
   sp-home.js 用 card.hidden = true 隱藏卡片，靠的是瀏覽器預設樣式表的
   [hidden]{ display:none }。但 .sp-post{ display:block } 是作者樣式，
   而作者樣式一律勝過 UA 樣式（跟特異性無關），所以卡片藏不掉：
   底線會動、篇數會變，卡片卻一張都沒消失，看起來就像篩選沒作用。
   同一個坑也埋在「載入更多」按鈕上（.sp-btn-ghost{ display:inline-flex }）。 */
.sp-post[hidden],
.sp-btn-ghost[hidden],
.sp-newslist [hidden]{ display:none; }

/* --- 31 分類列不要跟著捲動 ---------------------------------------------
   使用者要求「不要讓它在往下滑動的時候 sticky，就直接在固定的位置就好」。 */
.sp-tabs{ position:static; top:auto; }

/* --- 32 FAQ 的答案用滿整列 ---------------------------------------------
   問題列在桌機本來就是一行（可用寬 1080 以上，最長的題目只要 330px）。
   看起來「分成好幾段」的是答案：它被 42em 限制在 640px，
   但整列有 1290px，所以每一則都固定折成三行，視覺上像縮排了一塊。
   FAQ 是一問一答的短文，跟著列寬走就好。 */
/* 單欄時「用滿 1290」與「一行不超過 45 字」不可能同時成立：
   要 45 字就得把寬度收到 720px，看起來又像刻意縮排。
   改成兩欄之後兩件事同時解決：整列是滿的，每欄約 620px、一行 38 字。 */
.sp-faq{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:var(--sp-7); align-content:start;
  /* 兩欄是同一組 grid 的列。左欄有人展開時，同一列的右欄項目會被一起
     拉到同樣高，收合狀態的項目底下就多出一塊空白底色。
     align-items:start 讓每個項目只佔自己的高度。 */
  align-items:start;
}
.sp-faq__a{ max-width:none; }
/* 兩欄各自從自己的第一題開始畫上框線 */
.sp-faq__item:first-child,
.sp-faq__item:nth-child(2){ border-top:1px solid var(--sp-line); }
@media (max-width:999.98px){
  .sp-faq{ grid-template-columns:1fr; }
  .sp-faq__item:nth-child(2){ border-top:0; }
  .sp-faq__a{ max-width:44em; }
}
@media (max-width:689.98px){
  /* 手機上問題與答案原本貼齊容器最左緣，讀起來像沒有邊界。
     每一題有淡淡的底色，加了內距之後底色也跟著往外，看起來才像一張列。 */
  .sp-faq__item > summary,
  .sp-faq__a{ padding-inline:var(--sp-4); }
}
/* 這條原本想限制問題的行長，但問題是裸文字節點，
   :first-child 匹配到的是右側那個箭頭圖示，完全沒作用。 */
.sp-faq__item > summary > :first-child{ max-width:none; }


/* --- 33 相關文章下方那條白帶 -------------------------------------------
   使用者問「相關文章的下方也有一個白色的內容區塊，那是哪來的」。

   那不是區塊，是空白。.sp-site-footer 有 margin-top:120px，
   而文章頁沒有 .sp-page 這層外殼（那是內頁自訂 HTML 才有的），
   露出來的是 body 的底色，Blocksy 預設是白色。

   平常這 120px 上下都是白，看不出來。但文章頁緊鄰它上方的是 Blocksy
   的相關文章區塊，底色吃主題色票的 color-6（#B7946D 咖啡色滿版帶），
   於是「咖啡帶 → 120px 純白 → 米色頁尾」三段疊起來，
   中間那條就被讀成一個白色的內容區塊。

   相關文章本身是主題功能（single_blog_post_has_related_posts），
   前面已經把各頁的 CTA 都移除了，這裡一併關掉，文章頁的結尾統一成
   「內容 → 分享列 → 頁尾」。這條規則是雙保險：即使之後有人在
   客製器重新打開，也不會再出現那條白帶。 */
.single-post .ct-related-posts-container{ display:none; }
/* 文章頁的 body 底色補成米色，讓頁尾前那段留白與頁尾連成一氣 */
.single-post .sp-site-footer{ margin-top:0; }


/* --- 34 館別頁的照片輪播 -----------------------------------------------
   主圖改成五張輪播（主圖 + 四張相簿），下方的相簿變成可點的縮圖列，
   兩者由 sp-home.js 的 data-sp-carousel / data-sp-thumbs 連動。
   自動每 4 秒換一張，也可以點箭頭、點縮圖、或左右滑。 */
.sp-shots{ position:relative; }
.sp-shots .sp-slide{ position:absolute; inset:0; }
.sp-shots .sp-slide img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }

.sp-shots__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.86); border:1px solid var(--sp-line);
  color:var(--sp-cocoa);
  opacity:0; transition:opacity 300ms var(--sp-ease), background-color 300ms var(--sp-ease);
}
.sp-shots__nav svg{ width:20px; height:20px; fill:none; stroke:currentColor;
                    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sp-shots__nav--prev{ left:var(--sp-4); }
.sp-shots__nav--next{ right:var(--sp-4); }
/* 箭頭平常收起來，滑入或用鍵盤聚焦時才出現，不干擾照片本身 */
.sp-shots:hover .sp-shots__nav,
.sp-shots:focus-within .sp-shots__nav{ opacity:1; }
.sp-shots__nav:hover{ background:#FFFFFF; }
.sp-shots__nav:focus-visible{ opacity:1; outline:2px solid var(--sp-umber); outline-offset:2px; }
/* 觸控裝置沒有 hover，箭頭直接常駐 */
@media (pointer:coarse){ .sp-shots__nav{ opacity:1; } }

/* 縮圖列：目前這一張加一圈框與滿透明度，其餘壓暗 */
.sp-gallery__item{
  padding:0; border:1px solid var(--sp-line); background:none; cursor:pointer;
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--sp-radius-sm);
  opacity:.55; transition:opacity 300ms var(--sp-ease), border-color 300ms var(--sp-ease);
}
.sp-gallery__item img{ width:100%; height:100%; object-fit:cover; }
.sp-gallery__item:hover{ opacity:.85; }
.sp-gallery__item.is-on{ opacity:1; border-color:var(--sp-umber); }
.sp-gallery__item:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:2px; }
/* 縮圖列有五格，比原本的四格多一格 */
.sp-gallery{ grid-template-columns:repeat(5,1fr); }
@media (max-width:999.98px){ .sp-gallery{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:689.98px){ .sp-gallery{ grid-template-columns:repeat(5,1fr); gap:var(--sp-2); } }

/* --- 35 館別頁的文字垂直置中 -------------------------------------------
   左右兩欄一邊是照片一邊是文字，文字欄比較短，靠上對齊時右邊會空一大塊。 */
.sp-sdetail{ align-items:center; }
@media (max-width:999.98px){ .sp-sdetail,.sp-sdetail--rev{ align-items:stretch; } }


/* --- 36 輪播的右下角預覽 -----------------------------------------------
   顯示下一張的縮圖，點下去就切過去，切完之後預覽再往前遞一張。
   沿用原本疊圖（.sp-founder__inset）的位置與尺寸，只是換成可以按的按鈕。 */
.sp-peek{
  padding:0; background:none; cursor:pointer;
  border:4px solid #FFFFFF; box-shadow:var(--sp-shadow);
  overflow:hidden; border-radius:var(--sp-radius-sm);
  transition:transform 300ms var(--sp-ease), box-shadow 300ms var(--sp-ease);
}
.sp-peek img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-peek::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(66,43,36,0) 55%,rgba(66,43,36,.42) 100%);
}
@media (hover:hover) and (pointer:fine){
  .sp-peek:hover{ transform:translateY(-2px); box-shadow:8px 8px 22px 0 rgba(206,176,154,.5); }
}
.sp-peek:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }

/* 課堂區的主圖改成輪播之後，容器要能承載絕對定位的投影片 */
.sp-founder__main.sp-shots{ position:relative; }
.sp-founder__main.sp-shots .sp-slide{ position:absolute; inset:0; }
.sp-founder__main.sp-shots .sp-slide img{ width:100%; height:100%; object-fit:cover; }
/* 手機把預覽收起來：那裡空間不夠，箭頭與滑動已經夠用 */
@media (max-width:689.98px){ .sp-peek{ display:none; } }


/* --- 38 轉換區塊 -------------------------------------------------------
   品牌故事與課程資訊共用同一種收尾：照片鋪底、深色遮罩、白字加一顆按鈕。
   與教學團隊的做法一致，只是文案與去處不同。 */
.sp-ctaband{ position:relative; overflow:hidden; text-align:center; }
.sp-ctaband__bg{ position:absolute; inset:0; z-index:0; }
.sp-ctaband__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.sp-ctaband::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(66,43,36,.80) 0%,rgba(66,43,36,.66) 50%,rgba(66,43,36,.82) 100%);
}
.sp-ctaband > .sp-block{ position:relative; z-index:2; }
.sp-ctaband .sp-eyebrow{ color:var(--sp-milk); }
.sp-ctaband .sp-h2{ color:#FFFFFF; margin-top:18px; }
.sp-ctaband__lead{
  color:rgba(255,255,255,.86); max-width:38em;
  margin:var(--sp-5) auto 0;
}
.sp-ctaband__cta{ margin-top:var(--sp-7); }
/* 深色底上的實心按鈕改成米白，比棕色更跳出來 */
.sp-ctaband .sp-btn{ background:var(--sp-cream); color:var(--sp-cocoa); }
a.sp-ctaband-btn:hover{ color:var(--sp-cocoa); }
.sp-ctaband a.sp-btn:hover,
.sp-ctaband a.sp-btn:focus-visible{ background:#FFFFFF; color:var(--sp-cocoa); }
@media (max-width:689.98px){
  .sp-ctaband .sp-btn{ width:100%; max-width:none; }
}


/* --- 39 長文區裝飾照的浮起效果 -----------------------------------------
   使用者要「floating 往上浮現」的感覺。做法是給照片一層柔和的投影，
   再讓它隨著捲動微微往上移：捲到這一段時兩張照片會浮起來一點。
   位移只有 18px，是暗示不是動畫；配合既有的 fade-up 進場一起發生。 */
.sp-longform__deco{
  box-shadow:10px 14px 34px 0 rgba(126,96,72,.18);
  /* -50% 是垂直置中，18px 是還沒浮起來的位移 */
  transform:translateY(calc(-50% + 18px));
  transition:transform 900ms var(--sp-ease-soft), box-shadow 900ms var(--sp-ease-soft);
}
.sp-motion.is-ready .sp-longform__deco.is-in,
.is-ready .sp-motion .sp-longform__deco.is-in{
  transform:translateY(-50%);
  box-shadow:14px 22px 48px 0 rgba(126,96,72,.24);
}
/* 沒有動效偏好時直接停在最終狀態 */
@media (prefers-reduced-motion:reduce){
  .sp-longform__deco{ transform:translateY(-50%); }
}
/* 兩張同尺寸、同一個垂直位置：都以區塊的中線對齊，上下緣才會切齊。
   浮起的位移寫在 translate 的第二個值，才不會蓋掉這裡的置中位移。 */
.sp-longform__deco{ top:50%; }


/* --- 40 教學團隊的按鈕 --------------------------------------------------
   原本這裡後面接一個獨立的轉換區塊，兩個深色滿版帶連在一起太重。
   按鈕直接放進教學團隊，一個區塊講完一件事。 */
.sp-teambg__cta{ margin-top:var(--sp-7); text-align:center; }
.sp-teambg__cta .sp-btn{ background:var(--sp-cream); color:var(--sp-cocoa); }
.sp-teambg__cta a.sp-btn:hover,
.sp-teambg__cta a.sp-btn:focus-visible{ background:#FFFFFF; color:var(--sp-cocoa); }
@media (max-width:689.98px){
  .sp-teambg__cta .sp-btn{ width:100%; max-width:none; }
}

/* --- 41 場地租借的價格小卡 ---------------------------------------------
   原本是四行純文字列點，價格是這一段的重點卻沒有份量。
   改成四張小卡，數字放大用明體，效期壓在下面當註記。 */
.sp-rentcards{
  /* 五個方案排四欄會變成 4 + 1，最後一張孤零零掉在下面一列。
     改成三欄，切成 3 + 2，兩列都有分量。 */
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  margin:var(--sp-5) 0 0;
}
.sp-rentcard{
  background:var(--sp-paper); border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-sm); padding:var(--sp-4) var(--sp-3);
  text-align:center;
}
.sp-rentcard__name{
  margin:0; font-size:13px; line-height:1.6; letter-spacing:.03em; color:var(--sp-ink-3);
}
.sp-rentcard__price{
  margin:var(--sp-2) 0 0; font-family:var(--sp-display); font-weight:300;
  font-size:32px; line-height:1.1; color:var(--sp-cocoa);
  font-variant-numeric:lining-nums tabular-nums;
}
.sp-rentcard__price i{
  font-family:var(--sp-sans); font-style:normal; font-weight:500;
  font-size:13px; letter-spacing:.03em; color:var(--sp-ink-3);
}
.sp-rentcard__note{
  margin:var(--sp-2) 0 0; padding-top:var(--sp-2);
  border-top:1px solid var(--sp-line);
  font-size:12px; line-height:1.6; color:var(--sp-ink-3);
}
@media (max-width:999.98px){
  .sp-rentcards{ grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
}
@media (max-width:689.98px){
  .sp-rentcard__price{ font-size:28px; }
}


/* --- 42 師資介紹 -------------------------------------------------------
   照片與證照都來自客戶《02_品牌故事》。
   排列照客戶指定：桌機 4 欄、平板 3 欄、手機 2 欄。 */
.sp-coaches{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  margin-top:var(--sp-7);
}
.sp-coach{
  margin:0;
  background:var(--sp-paper);
  border:1px solid var(--sp-line); border-radius:var(--sp-radius);
  padding:var(--sp-3) var(--sp-3) var(--sp-4);
  transition:border-color 300ms var(--sp-ease), box-shadow 300ms var(--sp-ease),
             transform 300ms var(--sp-ease);
}
/* 這個 .sp-coach__media 是師資頁與館別頁專用。
   品牌故事頁的教學團隊卡片另有一組同名規則（上面第 42 節）設了 height:280px，
   那條會一起套進來，把照片壓成接近正方形，客戶要的是 3:4。
   所以這裡要明確把 height 交還給 aspect-ratio，並把寬度撐滿卡片：
   館別頁的卡片是 <a display:block>，少了 flex 的 stretch，
   沒有 width:100% 的話寬度會被 aspect-ratio 反推成 210，右邊就空一塊。 */
.sp-coaches .sp-coach__media,
.sp-coaches--studio .sp-coach__media{
  width:100%; height:auto; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--sp-radius-sm); background:var(--sp-cream);
}
.sp-coach__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  transition:transform 900ms var(--sp-ease-soft);
}
.sp-coach__name{
  /* 名字列的上下留白只由這裡的 padding-top 與卡片自己的 padding-bottom 決定，
     兩邊都是 --sp-4，名字就落在照片與卡片底之間的中線上。 */
  margin-top:0; padding:var(--sp-4) 0 0; text-align:center;
  font-size:18px; font-weight:600; line-height:1.4; letter-spacing:.03em;
  color:var(--sp-cocoa);
}
/* 名字列在 HTML 裡是 <figcaption>，主題的 .entry-content figcaption
   帶了 margin-block:.5em（18px 字 → 9px），特異性（0,1,1）比單一 class 高，
   照片與名字之間因此多出 9px，上下就不對稱了。用兩個 class 壓回 0。 */
.sp-coaches .sp-coach__name,
.sp-coaches--studio .sp-coach__name{ margin:0; }

/* 館別標籤：接在名字前面，用赭色小字加細框，與名字拉開層級。
   館別內頁不輸出這個標籤（同一館的老師標了也是多餘）。 */
.sp-coach__studio{
  display:inline-block; margin-right:var(--sp-2);
  padding:2px 8px; border-radius:999px;
  border:1px solid rgba(142,91,59,.3); background:rgba(142,91,59,.06);
  font-size:11px; font-weight:500; letter-spacing:.06em; line-height:1.7;
  color:var(--sp-umber); vertical-align:2px;
}

/* 「老師」用小一級的字接在名字後面，不另起一行 */
.sp-coach__name span{
  margin-left:var(--sp-2);
  font-size:13px; font-weight:500; letter-spacing:.08em; color:var(--sp-ink-3);
}
@media (hover:hover) and (pointer:fine){
  .sp-coach:hover{
    border-color:var(--sp-milk); box-shadow:var(--sp-shadow);
    transform:translateY(-3px);
  }
  .sp-coach:hover .sp-coach__media img{ transform:scale(1.04); }
}
@media (max-width:999.98px){
  .sp-coaches{ grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
  /* 平板的卡片只剩三分之一寬，「市府 2 店 Maggie 老師」會擠到換行，
     那張卡因此比同列其他卡高，整列的名字列就對不齊。
     館別標籤自己占一行、名字那行不斷行，所有卡片的名字列就都是一行高。 */
  .sp-coach__studio{ display:block; width:fit-content; margin:0 auto var(--sp-1); }
  .sp-coach__name{ white-space:nowrap; }
}
@media (max-width:689.98px){
  .sp-coaches{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
  .sp-coach{ padding:var(--sp-2) var(--sp-2) var(--sp-3); }
  .sp-coach__name{ padding:var(--sp-3) 0 0; font-size:16px; }
  .sp-coach__name span{ font-size:12px; }
  .sp-coach__studio{ font-size:10px; }
}

/* 館別頁的「本館師資」：整張卡連到師資介紹頁，沒有展開功能。
   各館人數不同（2 到 5 位），用 auto-fit 讓卡片維持大小自動排，
   人少的時候不會被拉成一張超寬的卡。 */
.sp-coaches--studio{
  /* 原本用 auto-fit 配 minmax(0,260px)，卡片被鎖在 260 寬，
     四張排完右邊就空一大塊。改成固定四欄均分，卡片自己撐滿容器。
     人數不足四位時（一館與復興各 2 位）也照四欄的格子走，
     卡片寬度與其他館一致，不會被拉成一張超寬的卡。 */
  grid-template-columns:repeat(4, 1fr);
}
.sp-coach--link{ display:block; text-decoration:none; color:inherit; }
@media (max-width:999.98px){
  .sp-coaches--studio{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:689.98px){
  .sp-coaches--studio{ grid-template-columns:repeat(2, 1fr); }
}

/* ── 師資卡翻面：點姓名旁的箭頭，照片淡出、證照淡入，再點一次還原 ──
   客戶要的是卡片本身換內容，不是在下面長出一塊面板，
   所以證照層直接疊在照片上（同一個 sp-coach__media 裡），兩者交叉淡入淡出。 */
.sp-coach__media{ position:relative; }
.sp-coach__back{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  /* 證照少的時候垂直置中，多的時候（Renee 有 7 張）要能從第一行讀起。
     單純的 center 遇到內容溢出會把上半推到捲動範圍之外，怎麼捲都回不去，
     safe 會在溢出時自動退回 start。不支援 safe 的瀏覽器沿用上一行。 */
  justify-content:center;
  justify-content:safe center;
  /* 上內距 52 = 按鈕的 top 10 + 高 34 + 間距 8。
     按鈕改成「相關證照」膠囊之後寬了一倍，靠左右閃避已經行不通，
     整份清單改從按鈕下方開始，不管膠囊多寬都不會被壓到。 */
  padding:52px var(--sp-4) var(--sp-5);
  background:var(--sp-cream);
  opacity:0; visibility:hidden;
  transition:opacity 420ms var(--sp-ease), visibility 420ms var(--sp-ease);
  overflow-y:auto; overscroll-behavior:contain;
}
/* flex 子項在溢出時會被壓縮，證照字會擠成一團，關掉收縮 */
.sp-coach__back > *{ flex-shrink:0; }
/* 內容捲動時上緣給一點提示，看得出來上面還有東西 */
.sp-coach__back::-webkit-scrollbar{ width:4px; }
.sp-coach__back::-webkit-scrollbar-thumb{
  background:rgba(142,91,59,.35); border-radius:999px;
}
.sp-coach.is-flipped .sp-coach__back{ opacity:1; visibility:visible; }
.sp-coach.is-flipped .sp-coach__media img{ opacity:0; }
.sp-coach__media img{ transition:opacity 420ms var(--sp-ease), transform 900ms var(--sp-ease-soft); }

/* 按鈕本身已經寫著「相關證照」，面裡再放一行 CERTIFICATIONS 是講同一件事，
   而且它與按鈕同高、欄一窄就會疊在一起。整組收起來，把高度讓給清單。 */
.sp-coach__back .sp-eyebrow{ display:none; }
.sp-coach__certs{ margin:0; padding:0; list-style:none; }
.sp-coach__certs li{
  position:relative; padding-left:14px; margin-bottom:8px;
  font-size:13px; line-height:1.7; color:var(--sp-ink-3);
}
.sp-coach__certs li:last-child{ margin-bottom:0; }
.sp-coach__certs li::before{
  content:""; position:absolute; left:0; top:11px;
  width:7px; height:1px; background:var(--sp-umber);
}

/* 右上角的圓鈕：翻到證照面的開關。
   人物在照片裡多半居中偏左，右上角通常是空間，壓在那裡不會擋到臉。
   圖形只有一個加號，翻面時整顆轉 45 度就變成叉號，不必換圖。 */
/* 右上角的「相關證照」。原本是一顆 34 的圓鈕配加號，但加號要讀者自己猜
   點下去會出現什麼，客戶希望直接寫清楚，所以改成同高的膠囊放四個字，
   位置、毛玻璃、底色與陰影都沿用原本那顆鈕。 */
.sp-coach__toggle{
  position:absolute; top:10px; right:10px; z-index:3;
  height:34px; padding:0 14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--sp-cocoa);
  font-family:inherit; font-size:12px; font-weight:500;
  letter-spacing:.06em; line-height:1; white-space:nowrap;
  box-shadow:0 2px 10px rgba(66,43,36,.14);
  transition:background-color 260ms var(--sp-ease), color 260ms var(--sp-ease),
             border-color 260ms var(--sp-ease);
}
/* 翻到證照面：原本是把加號轉 45 度變叉號，文字轉了會看不懂，
   所以改成只換底色，用深淺區分開合。 */
.sp-coach__toggle[aria-expanded="true"]{
  background:var(--sp-umber); border-color:var(--sp-umber); color:#FFFFFF;
}

/* 桌機：滑過卡片就翻到證照面，圓鈕只當狀態指示，不必真的點。
   觸控裝置沒有 hover，維持點圓鈕（下面 pointer:coarse 那段）。 */
@media (hover:hover) and (pointer:fine){
  .sp-coach:hover .sp-coach__back{ opacity:1; visibility:visible; }
  .sp-coach:hover .sp-coach__media img{ opacity:0; }
  .sp-coach:hover .sp-coach__toggle{
    background:var(--sp-umber); border-color:var(--sp-umber); color:#FFFFFF;
  }
  /* 卡片本身的上浮效果在翻面時會讓文字跟著晃，翻面時就不要位移了 */
  .sp-coach:hover{ transform:none; }
}
.sp-coach__toggle:focus-visible{ outline:2px solid var(--sp-umber); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .sp-coach__toggle:hover{
    background:var(--sp-umber); border-color:var(--sp-umber); color:#FFFFFF;
  }
  .sp-coach__toggle[aria-expanded="true"]:hover{ background:var(--sp-cocoa); border-color:var(--sp-cocoa); }
}
/* 觸控裝置的最小命中區補到 44，視覺仍維持 34 */
@media (pointer:coarse){
  .sp-coach__toggle::after{
    content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%, -50%);
  }
}
/* 證照多的老師（Renee 7 張）在手機的窄卡片裡會超出，讓它自己捲 */
@media (max-width:689.98px){
  /* 師資卡手機是兩欄，一張卡只有 159（iPhone SE）到 183 寬，
     膠囊照桌機尺寸會佔掉半張照片，字級與內距各收一階（寬度約 69）。
     觸控命中區仍由上面 pointer:coarse 那段補到 44。 */
  .sp-coach__toggle{
    top:8px; right:8px; height:28px; padding:0 10px;
    font-size:11px; letter-spacing:.04em;
  }
  /* 上內距 42 = 鈕的 top 8 + 高 28 + 間距 6。
     iPhone SE 的證照面可見高度只有 188，兩張證照的內容剛好 190，
     差 2px 就會讓大多數老師的卡都變成要捲；膠囊收到 28、上下內距各省
     4px 之後回到 182，十三張裡只剩證照最多的兩位需要捲。 */
  .sp-coach__back{ padding:42px var(--sp-3) var(--sp-3); }
  .sp-coach__certs li{ font-size:12px; padding-left:11px; margin-bottom:6px; }
}

/* 400 以下的窄機（Galaxy S 一類的 360、iPhone SE 的 375）。
   這是全站唯一的第三個斷點，只服務這一顆按鈕，不要拿它放別的規則。
   原因是師資卡在手機是兩欄，照片寬度隨螢幕縮，膠囊卻是固定寬：
   430 時佔照片的 41%，到了 360 就變成 50%，整顆壓在老師身上。
   字級與內距各收一階（膠囊 68 → 約 55）之後回到四成左右。
   10px 是中文還讀得動的下限，不再往下收。 */
@media (max-width:399.98px){
  .sp-coach__toggle{
    height:26px; padding:0 6px;
    font-size:10px; letter-spacing:.02em;
  }
  /* 上內距跟著鈕高走：8 + 26 + 6 = 40 */
  .sp-coach__back{ padding-top:40px; }
}

/* --- 43 證照清單 -------------------------------------------------------
   五組資格逐字抄自客戶的《師資群資訊.md》，沒有增刪。 */
.sp-certs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
  margin-top:var(--sp-7); align-items:start;
}
.sp-cert{
  background:var(--sp-cream); border-radius:var(--sp-radius);
  padding:var(--sp-6);
}
.sp-cert__who{
  margin:0; font-family:var(--sp-sans); font-weight:600;
  font-size:17px; line-height:1.5; letter-spacing:.02em; color:var(--sp-cocoa);
}
.sp-cert__names{
  margin:var(--sp-2) 0 0; font-size:14px; line-height:1.8; color:var(--sp-ink-3);
}
.sp-cert__list{
  margin:var(--sp-4) 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.sp-cert__list li{
  position:relative; padding-left:var(--sp-4);
  font-size:14px; line-height:1.75; letter-spacing:.02em; color:var(--sp-ink);
}
.sp-cert__list li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:5px; height:5px; border-radius:50%; background:var(--sp-gold);
}
@media (max-width:999.98px){
  .sp-certs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:689.98px){
  .sp-certs{ grid-template-columns:1fr; gap:var(--sp-4); }
  .sp-cert{ padding:var(--sp-5); }
}

/* --- 內文強調 -----------------------------------------------------------
   規則說明裡有些條件漏看會出事（未到場扣堂、場租限證照），
   用品牌色加粗標出來，不加底色才不會破壞頁面的安靜感。 */
.sp-em{ color:var(--sp-umber); font-weight:600; }

/* --- 45 課程子頁 --------------------------------------------------------
   課程總覽底下五個子頁共用這組元件。由 腳本/gen_courses.py 產生的頁面使用。

   開場不用橫幅 Banner：原本的 .sp-pbanner--short 框是 1290×380（3.39:1），
   而課程照是 4:5，只有 24% 的高度看得到，人物必然被腰斬。
   根因是「文字要壓在照片上，所以框被拉成超寬」。把文字移出照片，
   框回到 4:5，裁切量歸零，深色遮罩也不需要了。
   ---------------------------------------------------------------------- */
.sp-cover{ padding-top:44px; position:relative; }
.sp-cover__grid{
  /* 左欄（標題與內文）包成一個 .sp-cover__col，右邊是照片，兩欄垂直置中。
     先前是 head 與 body 各佔一列、照片跨兩列，照片比文字高很多，
     多出來的高度就攤到兩列之間，標題與內文中間被撐出一大塊空白。
     包成一欄之後就沒有列要被撐，align-items:center 才真的等於視覺置中。 */
  display:grid; grid-template-columns:minmax(0,1fr) 40%;
  column-gap:var(--sp-9, 80px); row-gap:var(--sp-5);
  align-items:center; position:relative; z-index:1;
}
.sp-cover__col{ min-width:0; }
.sp-cover__head{ min-width:0; }
.sp-cover__body{ margin-top:var(--sp-7); }
.sp-cover__media{ margin:0; }

.sp-cover__back{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-size:14px; letter-spacing:.04em; color:var(--sp-ink-3); text-decoration:none;
}
.sp-arrow-back{ display:inline-block; transition:transform 300ms var(--sp-ease); }
@media (hover:hover) and (pointer:fine){
  .sp-cover__back:hover{ color:var(--sp-umber); }
  .sp-cover__back:hover .sp-arrow-back{ transform:translateX(-3px); }
}

/* 髮絲線加英文課名。課程沒有像館別那種天然的地理序號，
   首頁橫捲又是另一套 01 到 06 的卡片編號，兩套並存會打架，所以不放數字。 */
.sp-cover__folio{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-4); color:var(--sp-umber);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.sp-cover__folio i{ display:block; width:48px; height:1px; background:var(--sp-line); flex:none; }

.sp-cover__h1{ margin-top:var(--sp-3); font-size:48px; line-height:1.25; }
/* 標題底下原本還有一句副標與一條 88px 的短線，客戶覺得重複又囉唆，整組拿掉了。
   少了那兩層，h1 與內文之間只剩 24 的距離，48px 的大標會直接壓在內文上，
   所以 .sp-cover__body 的上距補到 40。 */
.sp-cover__intro{
  margin:var(--sp-4) 0 0;
  font-size:17px; line-height:2.05; color:var(--sp-ink-2, #5A4A42);
}

/* 照片回到 4:5 原生比例，不壓字、不加遮罩，裁切量歸零 */
.sp-cover__fig{
  overflow:hidden; border-radius:var(--sp-radius); border:1px solid var(--sp-line);
  background:var(--sp-cream);
}
.sp-cover__fig img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; display:block; }
.sp-cover__cap{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--sp-line);
  font-size:13px; line-height:1.8; color:var(--sp-ink-3);
}

/* 三格事實列：把下半部才看得到的事實提前到第一屏 */
.sp-facts{
  margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--sp-line);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.sp-fact{ display:flex; align-items:center; gap:var(--sp-3); padding-left:var(--sp-4); border-left:1px solid var(--sp-line); }
.sp-fact:first-child{ padding-left:0; border-left:0; }
.sp-fact__body{ min-width:0; }
.sp-fact__k{ display:block; font-size:12px; letter-spacing:.06em; color:var(--sp-ink-3); }
.sp-fact__v{ display:block; margin-top:2px; font-size:15px; font-weight:600; color:var(--sp-cocoa);
             font-variant-numeric:lining-nums tabular-nums; }
.sp-cover__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); }

/* 課程特點與體驗流程這兩段的樣式改版後移到檔案最後，見「課程子頁的兩個 icon 區塊」。 */

/* 方案：左圖右文。體驗價不再做成獨立色塊，與其他方案同一張表。 */
.sp-pricing{
  margin-top:var(--sp-6);
  display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:var(--sp-8, 64px);
  align-items:center;
}
.sp-pricing__media{
  overflow:hidden; border-radius:var(--sp-radius); border:1px solid var(--sp-line);
  background:var(--sp-cream);
}
.sp-pricing__media img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
.sp-pricing__body{ min-width:0; }
.sp-fees{ margin:0; }
.sp-fee{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--sp-line);
}
.sp-fee:first-child{ border-top:1px solid var(--sp-line); }
.sp-fee dt{ font-size:15px; color:var(--sp-ink-2, #5A4A42); }
.sp-fee dd{ margin:0; text-align:right; }
.sp-fee dd b{ font-size:18px; font-weight:600; color:var(--sp-cocoa);
              font-variant-numeric:lining-nums tabular-nums; }
.sp-fee dd span{ display:block; margin-top:2px; font-size:13px; color:var(--sp-ink-3); }

/* 備註 callout：裸線 icon，與圓框 icon 做出區別 */
.sp-note--info{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  margin-top:var(--sp-5);
}
.sp-note--info .sp-ico{ border:0; background:none; flex-basis:20px; width:20px; height:20px; margin-top:2px; }
.sp-note--info .sp-ico svg{ width:20px; height:20px; }

/* ══ 館內器械：設備清單 ══════════════════════════════════════════════
   五項器械沒有照片，改成一份設備清單：序號、品名（中＋英）、主要用途、
   訓練重點四欄對齊。份量來自序號的字級對比、米色底板與橫向髮絲線，
   右邊的膠囊標籤把每一列的右半邊收住，不會再像 icon 版那樣空一整片。 */

/* 標題右側的總數。sp-sechead 是 flex，__t 佔 flex:1，這塊自然靠右 */
.sp-spec__tally{
  box-sizing:border-box; flex:none; display:flex; align-items:baseline; gap:var(--sp-3);
  margin:0; padding-left:var(--sp-5); border-left:1px solid var(--sp-line);
}
.sp-spec__tally b{
  font-family:var(--sp-display); font-weight:300; font-size:44px; line-height:1;
  color:var(--sp-umber); font-variant-numeric:lining-nums tabular-nums;
}
.sp-spec__tally span{
  font-size:14px; line-height:1.65; letter-spacing:.04em; color:var(--sp-ink-3);
  word-break:keep-all; overflow-wrap:anywhere;
}

/* 底板。左右內距交給每一列，hover 的色帶才能整條攤到板子邊緣 */
.sp-spec{
  box-sizing:border-box; margin-top:var(--sp-6);
  background:var(--sp-cream); border:1px solid var(--sp-line);
  border-radius:var(--sp-radius); padding:var(--sp-6) 0 var(--sp-7);
  overflow:hidden;
}
.sp-spec__list{ margin:0; padding:0; list-style:none; }

/* 表頭與資料列共用同一組欄寬，欄位才會真的對齊 */
.sp-spec__head,
.sp-spec__row{
  box-sizing:border-box;
  display:grid; grid-template-columns:104px minmax(196px,20%) minmax(0,1fr) auto;
  column-gap:var(--sp-5); align-items:baseline;
  padding-inline:var(--sp-7);
}
.sp-spec__head span:last-child,
.sp-spec__row .sp-spec__tag{ justify-self:end; text-align:right; }
.sp-spec__head{
  padding-bottom:var(--sp-3);
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sp-ink-3);
}
.sp-spec__head span{ display:block; }

.sp-spec__row{
  position:relative; align-items:start;
  padding-block:var(--sp-5);
  border-top:1px solid var(--sp-line);
  transition:background-color .3s var(--sp-ease);
}
@media (hover:hover) and (pointer:fine){
  .sp-spec__row:hover{ background:rgba(255,255,255,.62); }
  .sp-spec__row:hover .sp-spec__no{ color:var(--sp-umber); }
}
/* 序號：44px 明體。padding-top 讓它的視覺重心壓在品名那一行上，
   不是靠基線對齊（明體數字的視覺重心比黑體高，直接對齊會浮起來）。 */
.sp-spec__no{
  padding-top:2px;
  font-family:var(--sp-display); font-weight:300; font-size:44px; line-height:1;
  color:var(--sp-milk); font-variant-numeric:lining-nums tabular-nums;
  transition:color .3s var(--sp-ease);
}
.sp-spec__zh{
  display:block; font-size:24px; font-weight:600; line-height:1.35; color:var(--sp-cocoa);
  letter-spacing:.01em; word-break:keep-all; overflow-wrap:anywhere;
}
/* 英文名改用 Cormorant：沒有照片的時候，襯線英文就是這一段的質感來源，
   但只當第二層資訊，不做成半透明大字，避免壓到中文品名。 */
.sp-spec__en{
  display:block; margin-top:2px;
  font-family:var(--sp-display); font-weight:400; font-size:17px; line-height:1.4;
  letter-spacing:.04em; color:var(--sp-ink-3);
}
.sp-spec__use{
  margin:0; padding-top:5px;
  font-size:18px; line-height:1.8; letter-spacing:.02em; color:var(--sp-ink-2);
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty;
  /* 句子後面接一截點線，把「用途」與右邊的標籤牽在一起，欄距才不會空掉。
     文字本身是匿名 flex item，仍可正常折行。 */
  display:flex; align-items:baseline; gap:var(--sp-4);
}
.sp-spec__use::after{
  content:""; flex:1 1 var(--sp-8); align-self:center;
  height:0; border-bottom:1px dotted var(--sp-line);
}
/* 最右欄的訓練重點：一點點色塊，讓整列的右半邊不會空掉 */
.sp-spec__tag{
  box-sizing:border-box; display:inline-block; margin-top:4px; padding:7px 16px;
  background:rgba(255,255,255,.72); border:1px solid var(--sp-line); border-radius:999px;
  font-size:14px; letter-spacing:.04em; line-height:1.5; color:var(--sp-ink-2);
  white-space:nowrap;
}

/* 說明句：與最後一列之間留一段空白，前面加一截金色細線當引號 */
.sp-spec__note{
  box-sizing:border-box; margin:0; padding:var(--sp-5) var(--sp-7) 0;
  border-top:1px solid var(--sp-line);
  display:flex; gap:var(--sp-4); align-items:flex-start;
  font-size:16px; line-height:1.9; color:var(--sp-ink-2);
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty;
}
.sp-spec__note::before{
  content:""; flex:0 0 28px; height:1px; margin-top:15px; background:var(--sp-gold);
}
/* 兩句各自一個 b：桌機與平板一句一行，不會斷在講到一半的地方 */
.sp-spec__note i{ flex:1 1 auto; min-width:0; font-style:normal; }
.sp-spec__note b{ display:block; font-weight:inherit; }

/* --- 平板 --------------------------------------------------------------- */
@media (max-width:999.98px){
  .sp-spec__tally{ padding-left:var(--sp-4); }
  .sp-spec__tally b{ font-size:36px; }
  .sp-spec__tally span{ font-size:13px; }
  .sp-spec{ padding:var(--sp-5) 0 var(--sp-6); }
  /* 三欄：品名與訓練重點同一行，用途換到第二行，序號獨立一欄 */
  .sp-spec__head,
  .sp-spec__row{ grid-template-columns:76px minmax(0,1fr) auto; column-gap:var(--sp-4); padding-inline:var(--sp-5); }
  .sp-spec__head span:nth-child(3){ display:none; }
  .sp-spec__no{ font-size:34px; }
  .sp-spec__zh{ font-size:22px; }
  .sp-spec__en{ font-size:16px; }
  .sp-spec__name{ grid-column:2; grid-row:1; }
  .sp-spec__tag{ grid-column:3; grid-row:1; align-self:start; margin-top:2px; font-size:13px; padding:6px 14px; }
  .sp-spec__use{ grid-column:2 / -1; grid-row:2; margin-top:var(--sp-3); padding-top:0; font-size:17px; }
  .sp-spec__use::after{ display:none; }
  .sp-spec__note{ padding:var(--sp-5) var(--sp-5) 0; font-size:15px; }
}

/* --- 手機 --------------------------------------------------------------- */
@media (max-width:689.98px){
  .sp-spec{ padding:var(--sp-4) 0 var(--sp-5); }
  .sp-spec__head,
  .sp-spec__row{ grid-template-columns:46px minmax(0,1fr); column-gap:var(--sp-3); padding-inline:var(--sp-4); }
  .sp-spec__row{ padding-block:var(--sp-4); }
  .sp-spec__head span:nth-child(n+3){ display:none; }
  .sp-spec__head{ font-size:11px; letter-spacing:.14em; }
  .sp-spec__no{ padding-top:1px; font-size:28px; }
  /* 手機的中英文改成同一行收在一起，一列少一行，整塊高度收掉約四分之一 */
  .sp-spec__name{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2); }
  .sp-spec__zh{ font-size:19px; line-height:1.3; }
  .sp-spec__en{ margin-top:0; font-size:13px; }
  .sp-spec__use{ grid-column:2; grid-row:2; margin-top:var(--sp-2); font-size:16px; line-height:1.85; }
  /* 標籤在手機是第三行，五列就多五行；用途句已經講完同一件事，直接收掉 */
  .sp-spec__row .sp-spec__tag{ display:none; }
  /* 手機的欄寬只剩 309px。金線會再吃掉 44px，所以整段話改成滿版寬；
     說明句 15px 時中間那句要 322px 會被硬切，句尾逗號會掉成孤字，
     收到 14px 之後三句各 157 / 300 / 243px，每一行都結束在標點。 */
  .sp-spec__note{ display:block; padding:var(--sp-4) var(--sp-4) 0; font-size:14px; line-height:1.85; }
  .sp-spec__note::before{ display:none; }
  /* 手機的 .sp-sechead 會改成單欄，總數掉到標題下面，這時分隔線就沒有意義了 */
  .sp-spec__tally{ padding-left:0; border-left:0; margin-top:var(--sp-4); }
  .sp-spec__tally b{ font-size:30px; }
}

/* 租借方案底下的結語。兩句各自一個 span，桌機一句一行：
   合成一段的話會斷在「如果你正在／找一個」，話講到一半就換行。
   上限是照最長那句抓的：第二句連標點 43 個字，16px 加字距要 702px，
   52%（671）差一點放不下會折成兩行，57%（735，約 45 字）才收得住。
   平板以下欄寬本來就窄，再壓 57% 會變成一行十幾個字，所以解除上限。 */
.sp-outro{ margin:var(--sp-6) 0 0; color:var(--sp-ink-3); max-width:57%; }
.sp-outro span{ display:block; }
.sp-outro span + span{ margin-top:.35em; }
@media (max-width:999.98px){ .sp-outro{ max-width:none; } }

/* 轉換區塊放兩顆按鈕。深色底上的幽靈按鈕本來是深可可字配深可可框，
   靜態就看不清，這裡連同 ::after 的填色一起換成白色。 */
.sp-ctaband__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }
.sp-ctaband .sp-btn-ghost{ color:#FFFFFF; border-color:rgba(255,255,255,.55); }
.sp-ctaband .sp-btn-ghost::after{ background:#FFFFFF; }
@media (hover:hover) and (pointer:fine){
  .sp-ctaband .sp-btn-ghost:hover{ background:transparent; border-color:#FFFFFF; color:var(--sp-cocoa); }
}

/* 平板。三處新的字級必須在這裡重新宣告：.sp-cover__h1 與 .sp-h1 特異性同分，
   而這支檔案後載入，桌機的 48px 會一路蓋到手機，把全站 h1 的縮排規則吃掉。 */
@media (max-width:999.98px){
  /* 單欄時把 .sp-cover__col 攤平（display:contents），
     head、media、body 才能各自排序，照片維持在標題與內文之間。 */
  .sp-cover__grid{ grid-template-columns:1fr; row-gap:var(--sp-5); align-items:start; }
  .sp-cover__col{ display:contents; }
  .sp-cover__head{ order:1; }
  .sp-cover__media{ order:2; margin-top:0; }
  .sp-cover__body{ order:3; margin-top:0; }
  .sp-cover__h1{ font-size:40px; }
  .sp-cover__intro{ font-size:16px; line-height:1.95; }
  /* 單欄下 4:5 會變成一屏放不下的高牆，改成 3:2 橫式 */
  .sp-cover__fig img{ aspect-ratio:3/2; }
  .sp-pricing{ grid-template-columns:1fr; gap:var(--sp-5); }
  .sp-pricing__media img{ aspect-ratio:3/2; }
}
@media (max-width:689.98px){
  .sp-cover{ padding-top:var(--sp-5); }
  .sp-cover__h1{ font-size:28px; }
  .sp-cover__folio{ font-size:12px; letter-spacing:.1em; }
  .sp-cover__folio i{ width:28px; }
  .sp-cover__intro{ font-size:15px; line-height:1.9; }
  .sp-facts{ grid-template-columns:1fr; gap:var(--sp-3); }
  .sp-fact{ padding-left:0; border-left:0; }
  .sp-cover__cta{ gap:var(--sp-3); }
  .sp-cover__cta .sp-btn{ width:100%; max-width:none; }

}

/* 方案卡底下的「了解更多」：不搶主要按鈕的位置，用一條文字連結 */
.sp-plan__more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--sp-3); min-height:44px;
  font-size:14px; letter-spacing:.04em; color:var(--sp-umber); text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  .sp-plan__more:hover{ color:var(--sp-cocoa); }
  .sp-plan__more:hover .sp-arrow{ transform:translateX(3px); }
}
.sp-plan__more .sp-arrow{ transition:transform 300ms var(--sp-ease); }
/* 「了解更多」這類文字連結原本是方案卡底下自成一行用的，
   margin-top 給的是它與上一段的距離。一旦和主要按鈕並排，
   這個上邊距會在 align-items:center 之下把它整個往下推 12px，
   兩者的視覺中心就差了 6px，看起來高低不齊。並排時一律歸零。 */
:is(.sp-split__cta,.sp-rental__cta,.sp-cover__cta) .sp-plan__more{ margin-top:0; }
/* 分割區塊放兩到三顆按鈕時要能換行 */
.sp-split__cta,.sp-rental__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* 分割區塊底下的子頁入口：主要按鈕之外的連結收成一行文字，
   欄位只有 40% 寬，三顆按鈕並排一定會堆成三行。 */
.sp-split__links{
  margin:var(--sp-4) 0 0;
  font-size:14px; letter-spacing:.02em; color:var(--sp-ink-3);
}
.sp-split__links a{
  color:var(--sp-umber); text-decoration:none;
  border-bottom:1px solid rgba(142,91,59,.35); padding-bottom:1px;
}
@media (hover:hover) and (pointer:fine){
  .sp-split__links a:hover{ color:var(--sp-cocoa); border-bottom-color:var(--sp-cocoa); }
}
.sp-split__cta,.sp-rental__cta{ align-items:center; }


/* ==========================================================================
   課程子頁　這堂課會做什麼 ＋ 體驗課怎麼進行
   貼法: 把 sp-pages.css 原本的「課程特點」與「體驗流程」兩段整段刪掉，
   再把這一整段貼在檔案最後面 (或至少貼在兩個既有斷點之後)。
   必須一併刪掉既有斷點裡的這幾行，否則它們會把下面的設定蓋回舊版:
     @media (max-width:999.98px) 內: .sp-feats{...} / .sp-track{...}
     @media (max-width:689.98px) 內: .sp-feats{...} / .sp-track{...} /
       .sp-feat__txt{...} / .sp-track__name{...} / .sp-track__desc{...} /
       .sp-track__time{...}
   .sp-ico 的基礎宣告 (第 903 行起) 不動，這裡只做區塊內的覆寫。
   斷點仍然只有 999.98px 與 689.98px 兩個。
   ========================================================================== */

/* --- 區塊一　這堂課會做什麼 ---------------------------------------------
   桌機一排放完，四條就 1×4、五條就 1×5，不折行、不留殘格。
   欄數由 .sp-feats--N 決定 (N 是條數，由 gen_courses.py 寫進 class)。
   icon 圓框和首頁「看看學員怎麼說」的大頭貼同一個尺寸 (桌機 200、
   平板以下 160)，滑過去的節奏才一致，也才看得清楚圖形在畫什麼。
   五欄時一格只剩 245 寬，200 的圓會頂到卡片邊，所以那一版另外收一階。 */
.sp-feats{
  margin:var(--sp-6) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
}
.sp-feats--5{ grid-template-columns:repeat(5,1fr); gap:var(--sp-4); }
.sp-feat{
  box-sizing:border-box;
  position:relative; overflow:hidden; min-width:0;
  /* 內容靠上，不要 center: 卡片是 grid 等高的，置中會讓文字兩行的那張
     把圓往上推，四個圓就不在同一條水平線上了。 */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  /* 左右只留 16: icon 是 200 的圓，左右內距根本碰不到它，
     卻會決定文字能用多寬。收窄 8px，14 字的句子才不會掉出一個孤字。 */
  text-align:center; gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-4) var(--sp-7);
  border-radius:var(--sp-radius);
  background:var(--sp-cream);                                   /* 舊瀏覽器 */
  background:color-mix(in srgb, var(--sp-cream) 68%, var(--sp-paper));
  border:1px solid rgba(66,43,36,.10);
}
.sp-feats--5 .sp-feat{ gap:var(--sp-4); padding:var(--sp-5) var(--sp-3) var(--sp-6); }

/* 卡片右下角的髮絲弧線，與全站的 .sp-arc 同一套語彙，讓卡面不是一塊死色 */
.sp-feat::after{
  content:""; position:absolute; right:-72px; bottom:-96px;
  width:210px; height:210px; border-radius:50%;
  border:1px solid rgba(66,43,36,.09); pointer-events:none;
}
.sp-feat:nth-child(even)::after{ right:-96px; bottom:-78px; width:190px; height:190px; }

/* 米色卡上的 icon 用紙白底盤加一層極淡的暖陰影，圖形才浮得起來。
   邊框拿掉: 200 的大圓再描一圈線，白圓會變成卡片裡的第二層框。
   stroke-width 是 viewBox 座標，svg 放大時線會等比變粗 (1.25 在 112px
   下等於 4.4px 的黑框)，壓到 .71 才回到和小 icon 一樣的視覺重量。 */
.sp-feats .sp-ico--lg{
  flex:none; width:200px; height:200px;
  background:var(--sp-paper); border-color:transparent;
  box-shadow:0 6px 22px rgba(206,176,154,.34);
}
.sp-feats .sp-ico--lg svg{ width:112px; height:112px; stroke-width:.71; }
/* 五欄版的圓收一階。180 + 左右內距 24 = 204，在 245 的格子裡兩側還各有 20 */
.sp-feats--5 .sp-ico--lg{ width:180px; height:180px; }
.sp-feats--5 .sp-ico--lg svg{ width:100px; height:100px; stroke-width:.8; }

.sp-feat__txt{
  margin:0; max-width:none; min-width:0;   /* 原本的 14em 會把長句斷出孤字 */
  /* 中文預設可以在任兩個字之間斷行，「核心」「變化」「修正」這種詞
     常常被拆到兩行。keep-all 讓它只在標點與空白處換行，斷點就會落在
     逗號與頓號後面，讀起來是完整的意群。
     後面一定要接 anywhere: 整句都沒有標點時 keep-all 會把它當成一個
     不可斷的詞，直接撐破卡片 (break-word 在 keep-all 下救不了中文)。 */
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty;
  font-size:18px; font-weight:500; line-height:1.75; letter-spacing:.02em;
  color:var(--sp-cocoa);
}
/* 五欄時一格的可用寬只剩 221。18px 一行放不到 13 個字，
   而這些句子裡最長的一段（標點與標點之間）是 14 個字，
   放不下就會被 anywhere 硬斷、掉出一個孤字。
   15px 一行剛好 14 個字，每一句都能收在兩行內。 */
.sp-feats--5 .sp-feat__txt{ font-size:15px; line-height:1.85; }

/* --- 區塊二　體驗課怎麼進行 ---------------------------------------------
   四個步驟各自成卡，全部水平置中: icon、「01 名稱」、敘述，
   底部是「時間 + 占比橫條」。序號直接寫在名稱前面，不再懸在右上角。
   卡與卡之間原本穿的那條帶箭頭細線拿掉了，四張卡並排本來就有先後，
   多一條線只是多一道視覺雜訊。
   橫條長度是該段相對最長段的比例，一眼看出重心在操作訓練。 */
.sp-track__lead{ margin:var(--sp-4) 0 0; color:var(--sp-ink-3); max-width:60%; }
.sp-track{
  margin:var(--sp-6) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
}
/* box-sizing 一定要寫: 全站沒有 *{box-sizing:border-box}，
   不寫的話卡片寬度加上內距會撐出欄位。 */
.sp-track__step{
  box-sizing:border-box;
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius:var(--sp-radius);
  background:linear-gradient(180deg, var(--sp-paper) 0%, #FBF6EF 100%);
  border:1px solid rgba(66,43,36,.10);
  box-shadow:0 3px 14px rgba(206,176,154,.34);
}
/* 舊版步驟之間的連接線與箭頭，整組關掉 (斷點裡還有幾條要一起關) */
.sp-track__step::after,
.sp-track__step::before{ content:none; }
/* 序號用 Cormorant 細體，與 .sp-secno 同一套語彙。顏色從 gold 再壓深一階，
   才有 3:1 以上的對比 (舊瀏覽器退回 --sp-gold)。
   字級用 em 綁在名稱上，名稱改大小時序號會跟著走。 */
.sp-track__no{
  margin:0 .45em 0 0;
  font-family:var(--sp-display); font-weight:300; font-size:1.25em; line-height:1;
  letter-spacing:.04em;
  color:var(--sp-gold);
  color:color-mix(in srgb, var(--sp-umber) 72%, var(--sp-paper));
  font-variant-numeric:lining-nums tabular-nums;
}
.sp-track .sp-ico--lg{
  flex:none; width:200px; height:200px;
  background:var(--sp-cream); border-color:transparent;
}
.sp-track .sp-ico--lg svg{ width:112px; height:112px; stroke-width:.71; }
.sp-track__name{
  width:100%; margin:var(--sp-5) 0 0; padding-top:var(--sp-5);
  border-top:1px solid var(--sp-line);
  font-size:22px; font-weight:600; letter-spacing:.02em; color:var(--sp-cocoa);
  word-break:keep-all; overflow-wrap:anywhere;
}
.sp-track__desc{
  margin:var(--sp-2) 0 0; max-width:none;
  font-size:15px; line-height:1.8; color:var(--sp-ink-3);
}
/* margin-top:auto 把時間列壓在卡片底部，敘述長短不一時四張卡仍對齊同一線。
   排版改置中之後，時間與橫條改成上下兩層，橫條才能整條攤開比長度。 */
.sp-track__meter{
  width:100%; margin:auto 0 0; padding-top:var(--sp-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
}
.sp-track__time{
  flex:none; display:inline-flex; align-items:baseline; gap:4px; margin:0;
  color:var(--sp-umber); font-size:14px; letter-spacing:.04em;
  font-variant-numeric:lining-nums tabular-nums;
}
.sp-track__time b{
  font-family:var(--sp-display); font-weight:400; font-size:30px; line-height:1;
}
.sp-track__time::before,
.sp-track__time::after{ content:none; }      /* 取消原本的全形括號 */
.sp-track__bar{
  flex:none; width:100%; height:2px; border-radius:2px;
  background:var(--sp-veil, rgba(66,43,36,.06));
}
.sp-track__bar i{
  display:block; height:100%; min-width:10px; border-radius:2px;
  width:var(--sp-share, 0%); background:var(--sp-milk);
}

/* --- 平板 --------------------------------------------------------------- */
@media (max-width:999.98px){
  /* 特點一律兩欄，條數是單數時最後一張橫跨整列。
     五欄版的那幾條覆寫特異性比較高 (.sp-feats--5 .sp-feat 是 0,2,0)，
     這裡每一條都要把它一起列進來，否則平板還會套著桌機五欄的尺寸。 */
  .sp-feats,
  .sp-feats--5{ grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
  .sp-feat:last-child:nth-child(odd){ grid-column:1 / -1; }
  .sp-feat,
  .sp-feats--5 .sp-feat{ gap:var(--sp-4); padding:var(--sp-5) var(--sp-4) var(--sp-6); }
  /* icon 跟著首頁大頭貼的斷點一起降到 160。圖形縮到 90 之後線又會變細，
     stroke-width 要放回 .89 才維持同一個視覺線寬 (.71×112 ÷ 90)。 */
  .sp-feats .sp-ico--lg,
  .sp-feats--5 .sp-ico--lg{ width:160px; height:160px; }
  .sp-feats .sp-ico--lg svg,
  .sp-feats--5 .sp-ico--lg svg{ width:90px; height:90px; stroke-width:.89; }
  .sp-feat__txt,
  .sp-feats--5 .sp-feat__txt{ font-size:17px; line-height:1.75; }

  .sp-track{ grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
  .sp-track__lead{ max-width:none; }
  .sp-track__step{ padding:var(--sp-5) var(--sp-4); }
  .sp-track .sp-ico--lg{ width:160px; height:160px; }
  .sp-track .sp-ico--lg svg{ width:90px; height:90px; stroke-width:.89; }
  .sp-track__name{ font-size:20px; }
}

/* --- 手機 --------------------------------------------------------------- */
@media (max-width:689.98px){
  /* 手機也是兩欄。一欄時一張卡就佔掉大半個螢幕，四條要滑很久；
     兩欄一次看得到兩張，整段的長度砍半。
     390 的螢幕內容寬 351，gap 12 之後一格 169.5，扣掉左右內距
     還有 145 可以放字，所以 icon 與字級都要跟著收一階。 */
  .sp-feats,
  .sp-feats--5{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
  /* 左右只留 8：icon 是置中的圓，左右內距碰不到它，卻決定文字能用多寬。
     390 的螢幕上這 8px 換來 4 個字的行寬，句子少斷一次。 */
  .sp-feat,
  .sp-feats--5 .sp-feat{ gap:var(--sp-3); padding:var(--sp-5) var(--sp-2); }
  /* 五條的時候排成 2 + 2 + 1。最後一張如果跟著跨整列，會變成兩倍寬的怪卡，
     所以壓回一格的寬度再置中，五張卡看起來就是同一款。 */
  .sp-feat:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center;
    width:calc(50% - var(--sp-3) / 2);
  }
  .sp-feat::after{ right:-74px; bottom:-72px; width:150px; height:150px; }
  .sp-feat:nth-child(even)::after{ right:-84px; bottom:-60px; width:138px; height:138px; }
  .sp-feats .sp-ico--lg,
  .sp-feats--5 .sp-ico--lg{ width:120px; height:120px; }
  .sp-feats .sp-ico--lg svg,
  .sp-feats--5 .sp-ico--lg svg{ width:68px; height:68px; stroke-width:1; }
  /* 一行 10 個字。15px 只放得下 9 個，句子裡 10 字的意群就會被硬切開 */
  .sp-feat__txt,
  .sp-feats--5 .sp-feat__txt{ font-size:14px; line-height:1.8; }

  /* 體驗流程同樣改兩欄，四個步驟剛好 2 + 2 */
  .sp-track{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
  .sp-track__step{ padding:var(--sp-5) var(--sp-3); }
  .sp-track .sp-ico--lg{ width:120px; height:120px; }
  .sp-track .sp-ico--lg svg{ width:68px; height:68px; stroke-width:1; }
  .sp-track__name{ margin-top:var(--sp-4); padding-top:var(--sp-4); font-size:16px; }
  .sp-track__desc{ font-size:13px; }
  .sp-track__meter{ padding-top:var(--sp-4); }
  .sp-track__time{ font-size:13px; }
  .sp-track__time b{ font-size:22px; }
}


/* ==========================================================================
   徵才資訊（/contact/careers/）
   文案是客戶既有的徵才貼文，分行與標點都照原樣，版面配合文字走，
   不為了排版把句子拆開或合併。
   ========================================================================== */

/* 整頁收窄。--sp-container 是 .sp-block 的寬度來源（預設 1290），
   在 body 上改一次，這一頁的每個區塊就都跟著窄，滿版底色的 .sp-full
   走的是 100vw，不受影響。 */
.page-id-996{ --sp-container:1080px; }

/* 扉頁改成左圖右文。HTML 仍然是「文字先、圖後」，順序交給 CSS：
   螢幕閱讀器與 SEO 讀到的還是標題在前，視覺上才是圖在左。 */
.page-id-996 .sp-cover__grid{ grid-template-columns:42% minmax(0,1fr); }
.page-id-996 .sp-cover__col{ order:2; }
.page-id-996 .sp-cover__media{ order:1; }

/* 扉頁的三行開場。這是 slogan 不是內文，字級比 .sp-cover__intro 大一階，
   行距放寬，最後一句用 b 收在重音上。 */
.sp-careers__lead{
  margin:0; max-width:none;
  font-size:26px; line-height:1.75; letter-spacing:.02em;
  color:var(--sp-cocoa);
  word-break:keep-all; overflow-wrap:anywhere;
}
.sp-careers__lead b{ font-weight:600; color:var(--sp-umber); }

/* 海報是客戶自己做的粉紅色印刷品，直接貼進版面會像是走錯棚。
   包一層米色內距當相框，它就變成「牆上的一張海報」，色系差異是有意的。
   圖是 5:6，不要沿用 .sp-cover__fig img 的 4:5，那會裁掉海報的邊框。 */
.sp-cover__fig--poster{ padding:var(--sp-4); background:var(--sp-cream); }
.sp-cover__fig--poster img{
  aspect-ratio:auto; object-fit:contain; object-position:50% 50%;
  border-radius:calc(var(--sp-radius) - 8px);
}

/* 核心主張。整段只有一句話，左右留白讓它自己成為一個段落。 */
.sp-careers__claim{
  margin:0 auto; max-width:24em; text-align:center;
  font-family:var(--sp-display); font-weight:300;
  font-size:38px; line-height:1.6; letter-spacing:.02em;
  color:var(--sp-cocoa);
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance;
}

/* 培訓與進階。原文是「標籤｜內容」的兩行，所以左邊做成固定寬的標籤欄，
   兩列的標籤與內容各自對齊同一條軸線。 */
.sp-grow{
  margin:var(--sp-6) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
}
.sp-grow__item{
  box-sizing:border-box; min-width:0; overflow:hidden;
  border-radius:var(--sp-radius);
  background:var(--sp-cream);
  background:color-mix(in srgb, var(--sp-cream) 68%, var(--sp-paper));
  border:1px solid rgba(66,43,36,.10);
}
/* 照片鋪在卡片上緣，左右與上緣不留內距，看起來才是一張卡不是一個相框。
   3:2 是兩張來源圖（4:3 與 1:1）都能裁得漂亮的共同比例。 */
.sp-grow__media{ margin:0; background:var(--sp-cream); }
.sp-grow__media img{
  width:100%; height:auto; display:block;
  aspect-ratio:3/2; object-fit:cover; object-position:50% 35%;
}
.sp-grow__body{
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-5);
}
.sp-grow__k{
  flex:none; padding-right:var(--sp-4); border-right:1px solid var(--sp-line);
  font-size:15px; font-weight:600; letter-spacing:.14em; color:var(--sp-umber);
}
.sp-grow__v{
  margin:0; min-width:0;
  font-size:21px; font-weight:600; line-height:1.5; letter-spacing:.02em;
  color:var(--sp-cocoa);
  word-break:keep-all; overflow-wrap:anywhere;
}
/* 「不是速成，是長期升級」是上面兩格的結語，用明體與細線收尾 */
.sp-grow__note{
  margin:var(--sp-5) 0 0; padding-left:var(--sp-5);
  border-left:2px solid var(--sp-milk);
  font-family:var(--sp-display); font-weight:400;
  font-size:24px; line-height:1.6; letter-spacing:.04em; color:var(--sp-ink-2);
}

/* 福利。一年多 12 天假是整段最有力的一項，單獨放大；
   其餘五項做成標籤列，原文用「｜」分隔，這裡改成一項一格。 */
.sp-perks{
  margin-top:var(--sp-6); padding:var(--sp-7) var(--sp-6);
  border-radius:var(--sp-radius);
  background:linear-gradient(180deg, var(--sp-paper) 0%, #FBF6EF 100%);
  border:1px solid rgba(66,43,36,.10);
  box-shadow:0 3px 14px rgba(206,176,154,.34);
}
/* 這一行不要用 flex：flex 會把 emoji 與後面的整段文字切成兩個伸縮項目，
   欄位一窄就把「12」從文字裡擠出去，變成上下兩行的 1 和 2。
   用一般的文字流，emoji 只是行首的一個 inline 元素。 */
.sp-perks__hero{
  margin:0;
  font-size:24px; line-height:1.6; letter-spacing:.02em; color:var(--sp-cocoa);
  word-break:keep-all; overflow-wrap:anywhere;
}
/* emoji 用系統的彩色字型，跟著文字基線走就好，不另外上色 */
.sp-perks__mark{ margin-right:.4em; font-size:.82em; }
/* 只有「12」這個數字用 Cormorant 放大。lining-nums 一定要寫：
   Cormorant 預設是舊體數字（oldstyle），1 會變成沒有上緣的 I、2 會沉到基線下，
   看起來像「I2」而不是 12。 */
.sp-perks__hero b{
  font-family:var(--sp-display); font-weight:400; font-size:32px; line-height:1;
  color:var(--sp-umber); letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
/* 重點那行的日曆 icon 與文字並排，icon 不參與文字的折行 */
.sp-perks__hero{ display:flex; align-items:center; gap:var(--sp-4); }
.sp-perks__hero .sp-ico{ flex:none; }
.sp-perks__txt{ min-width:0; }

/* 五項福利：一項一格，icon 在上、名稱在下，桌機一排五格。
   用的是全站同一顆 .sp-ico 圓框，和課程頁、品牌故事頁是同一套語彙。 */
.sp-perks__list{
  margin:var(--sp-6) 0 0; padding:var(--sp-6) 0 0; list-style:none;
  border-top:1px solid var(--sp-line);
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3);
}
.sp-perks__list li{
  box-sizing:border-box; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-3);
  border-radius:var(--sp-radius); border:1px solid var(--sp-line);
  background:var(--sp-paper);
  font-size:15px; letter-spacing:.04em; line-height:1.5; color:var(--sp-ink-2);
  text-align:center;
  word-break:keep-all; overflow-wrap:anywhere;
}
.sp-perks__list .sp-ico{ flex:none; background:var(--sp-cream); border-color:transparent; }

/* 轉換區塊的標題是兩行 slogan，比其他頁的一行標題再收一點字級 */
.sp-careers-cta .sp-h2{ font-size:34px; line-height:1.6; }

/* --- 平板 --------------------------------------------------------------- */
@media (max-width:999.98px){
  .sp-careers__lead{ font-size:22px; }
  .sp-careers__claim{ font-size:30px; }
  /* 平板以下扉頁收成單欄，海報會跟著內容寬度長到 790 高、佔掉整整一屏。
     壓一個上限再置中，它仍然是主視覺，但不會擋住下面的文案。 */
  .sp-cover__fig--poster{ max-width:420px; margin-inline:auto; }
  /* 平板以下扉頁本來就該收成單欄。桌機那三條的特異性是 (0,2,0)，
     比原本的 .sp-cover__grid (0,1,0) 高，不在這裡一起解除的話，
     手機會維持 42% 的兩欄，海報被壓成一張小圖擠在標題旁邊。 */
  .page-id-996 .sp-cover__grid{ grid-template-columns:1fr; }
  .page-id-996 .sp-cover__col{ order:0; }
  .page-id-996 .sp-cover__media{ order:2; }
  /* 五格一排在平板只剩 130 寬，五個字的項目會擠成三行，改三欄 */
  .sp-perks__list{ grid-template-columns:repeat(3,1fr); }
  .sp-grow{ gap:var(--sp-3); }
  .sp-grow__item{ padding:var(--sp-5) var(--sp-4); gap:var(--sp-3); }
  .sp-grow__k{ padding-right:var(--sp-3); font-size:14px; }
  .sp-grow__v{ font-size:19px; }
  .sp-grow__note{ font-size:21px; }
  .sp-perks{ padding:var(--sp-6) var(--sp-5); }
  .sp-perks__hero{ font-size:21px; }
  .sp-perks__hero b{ font-size:30px; }
}

/* --- 手機 --------------------------------------------------------------- */
@media (max-width:689.98px){
  .sp-careers__lead{ font-size:19px; line-height:1.8; }
  .sp-careers__claim{ font-size:24px; line-height:1.65; }
  /* 兩格在手機疊成一欄。標籤與名稱仍然並排：卡片是滿版寬，橫排放得下 */
  .sp-grow{ grid-template-columns:1fr; }
  .sp-grow__body{ padding:var(--sp-4); gap:var(--sp-3); }
  .sp-grow__k{ padding-right:var(--sp-3); font-size:13px; }
  .sp-grow__v{ font-size:18px; }
  /* 福利在手機兩欄。五項是單數，最後一格壓回半欄寬置中，右邊不留空格 */
  .sp-perks__list{ grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
  .sp-perks__list li:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center;
    width:calc(50% - var(--sp-2) / 2);
  }
  .sp-grow__note{ margin-top:var(--sp-4); padding-left:var(--sp-4); font-size:19px; }
  .sp-perks{ padding:var(--sp-5) var(--sp-4); }
  .sp-perks__hero{ font-size:18px; }
  .sp-perks__hero b{ font-size:26px; }
  .sp-perks__list{ margin-top:var(--sp-5); padding-top:var(--sp-5); gap:var(--sp-2); }
  .sp-perks__list li{ padding:8px 14px; font-size:14px; }
  .sp-careers-cta .sp-h2{ font-size:24px; }
}