/* ============================================================
   新思惟國際 V3 — 設計系統「分區歸檔的專業白版面」
   （2026-07-27 改版：IC 指定去除米色底、細線、無邊界感）
   概念:這不是廣告,是一份持續更新的教學現場檔案。
   語言:白底、黑字、看得見的邊界、橘紅記號、編號、直角偏方、
        無漸層、無陰影、無 emoji。
   規則三條:
   1. 底色只有純白與冷灰,**任何暖灰/米色一律不得出現**。
   2. 每個可點物件都有看得見的框(1px 以上實線),不靠髮絲線暗示。
   3. 品牌橘紅分三個層級,因白底對比需求不可混用:
      --brand      面/線/長條/大數字(不當小字)
      --brand-cta  紅底白字(按鈕、標籤)   對白 4.97:1
      --brand-text 白底或淡底上的紅字      對白 5.48:1
   ============================================================ */
:root{
  /* ── 品牌橘紅 ── */
  --brand:#e8412a;        /* 面、規則線、長條、巨數字 */
  --brand-cta:#d0361e;    /* 紅底白字:按鈕、標籤(白字 4.97:1) */
  --brand-text:#c3341f;   /* 白底/淡底上的紅色文字(5.48:1) */
  --brand-tint:#fdefec;   /* 重要卡片的淡橘底(全站限量使用) */
  --brand-tint-2:#fadfd8; /* 重要卡片 hover */
  --brand-on-dark:#ff7a5e;/* 深色區裡的橘紅(反向提亮) */

  /* ── 文字 ── */
  --ink:#141414;          /* 主文字、主邊框(中性黑,不偏暖) */
  --ink-2:#4a5057;        /* 次要文字、圖說、meta(冷灰 8.1:1) */
  --ink-3:#8a9199;        /* 最弱:placeholder、點線 */

  /* ── 底色(全冷調,無米色) ── */
  --paper:#ffffff;        /* 頁面底 */
  --paper-2:#f1f3f5;      /* 冷灰襯底:色帶、hover、次級票卡 */
  --paper-3:#e5e8eb;      /* 再深一階 */

  /* ── 邊界(取代髮絲線,要看得見) ── */
  --hairline:#d3d8dd;     /* 一般邊框/分隔(白底上清楚可見) */
  --line-strong:#141414;  /* 權威分隔粗線 */

  /* ── 反白區(卡片 hover、直方圖長條) ── */
  --inv:#23272b;
  --inv-line:#454b51;
  --inv-text:#e3e6e9;
  --inv-text-2:#c3c8ce;

  /* ── 深色區(band / footer) ── */
  --dark:#14171a;
  --dark-line:#2b3035;
  --dark-text:#c3c8ce;
  --dark-text-2:#99a1a9;
  --dark-link:#dfe3e7;

  /* ── 雜項 ── */
  --dot:#b9c0c7;          /* 目錄點線 */
  --mark:#ffe0d8;         /* 搜尋高亮 */
  --scrim:rgba(20,20,20,.38);

  --serif:"Noto Serif TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --maxw:1200px;
  --nav-h:64px;

  /* ── 閱讀欄:讀者多是三四十歲以上、已經有老花的專業人士 ──
     內文 18px、每行 33-35 個中文字(34×18=612px)、行高 1.95。
     這是受眾決定的,不是美感偏好,不要為了版面好看調小。 */
  --read-fs:1.125rem;      /* 18px */
  --read-w:612px;          /* 34 字 */
  --read-outer:880px;      /* 圖片/表格的寬度,也是標題與頁尾的對齊軸 */
  /* 文字窄、圖片寬:圖表往左右溢出回到 880px,窄螢幕自動收斂為 0 */
  --media-bleed:max(0px, min((var(--read-outer) - var(--read-w)) / 2, (100vw - 2 * var(--sheet-pad) - var(--read-w)) / 2));

  /* ── 內頁紙面:外面深色、內文是有邊界的白紙 ──
     navbar 與內文共用 --sheet-w / --sheet-pad,logo 左緣永遠對齊內文左緣。
     加外框沒有動到行長:880 內容寬不變,只是外面多長出深色邊。 */
  --sheet-pad:56px;
  --sheet-w:calc(var(--read-outer) + 2 * var(--sheet-pad));   /* 992px */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 首屏頂部:標題+數字(精簡 hero 文字),下接近期課程 */
.hero-top{padding:44px 0 0}
.hero-top h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.7rem,3.8vw,2.6rem);
  line-height:1.3;letter-spacing:normal}
.hero-top h1 span{color:var(--brand-text)}
.hero-top .kicker{margin-bottom:14px}
.hero-top .fact-line{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px}
.hero-top .fact-line b{color:var(--ink);font-weight:500}
/* 近期課程緊接標題區,不用一般 section 的大間距 */
section.first{padding-top:40px}
/* 首頁近期課程:眉題與段標併為同一行小字,與圖卡之間不再畫線 */
.sec-head-slim{margin-bottom:22px}
section.first .course-cards{border-top:none;padding-top:0}
/* hero 區現在只有照片(過場),照片不再另加上邊距 */
.hero>.hero-photo{margin-top:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.9;font-size:1.0625rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:112px 0 0}
footer{margin-top:112px}
.band+footer{margin-top:0}

/* ── 文字連結:紅底線生長(全站統一 hover 語言) ── */
.tlink{color:var(--ink);font-weight:600;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 2px no-repeat;
  transition:background-size .25s ease;padding-bottom:2px}
.tlink:hover{background-size:100% 2px}
.tlink.red{color:var(--brand-text)}

/* ── mono 眉題 / 圖說 / meta ── */
.kicker{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2);line-height:1.6}
.kicker b{color:var(--brand-text);font-weight:500}
.caption{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);line-height:1.6;
  padding:10px 0 0;border-top:1px solid var(--hairline);margin-top:0}

/* ── section 標頭裝置:橘紅粗線 + 編號眉題 + serif 大標
      (原本 1px 黑髮絲線,IC 指定改成看得見的邊界) ── */
.sec-head{border-top:4px solid var(--brand);padding-top:14px;margin-bottom:44px}
.sec-head .no{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.sec-head .no b{color:var(--brand-text);font-weight:500}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.35;margin-top:14px;letter-spacing:normal}
.sec-head .lead{margin-top:12px;font-size:1.125rem;line-height:1.85;color:var(--ink-2)}

/* ── 按鈕:矩形、直角。紅底白字一律用 --brand-cta(對比 4.97:1) ── */
.btn{display:inline-block;background:var(--brand-cta);color:#fff;font-weight:700;font-size:1rem;
  padding:14px 32px;border:1px solid var(--brand-cta);transition:background .2s,border-color .2s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ============ NAV ============ */
header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.05rem;font-family:var(--serif)}
.brand img{height:30px;width:auto}
.brand b{color:var(--brand-text)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink);font-size:.95rem;font-weight:600}
.nav-links a:not(.nav-cta){padding-bottom:3px;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 2px no-repeat;
  transition:background-size .2s ease}
.nav-links a:not(.nav-cta):hover{background-size:100% 2px}
.nav-links a:not(.nav-cta).active{background-size:100% 2px;color:var(--ink)}
.nav-cta{background:var(--brand-cta);color:#fff !important;padding:10px 22px;font-weight:700;
  white-space:nowrap;transition:background .2s}
.nav-cta:hover{background:var(--ink)}
.nav-ham{display:none}
#nav-drawer{display:none}

/* ── 全站搜尋(按鈕與面板由 nav.js 注入)── */
.nav-search{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:none;border:none;cursor:pointer;color:var(--ink);padding:0;transition:color .15s}
.nav-search svg{width:19px;height:19px}
.nav-search:hover,.nav-search.active{color:var(--brand-text)}
#search-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:48;background:var(--paper);
  border-bottom:1px solid var(--ink);padding:22px 0 26px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
#search-panel.open{opacity:1;visibility:visible;transform:none}
#search-backdrop{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:47;
  background:var(--scrim);opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s}
#search-backdrop.open{opacity:1;visibility:visible}
.sp-row{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.sp-row>svg{width:18px;height:18px;color:var(--ink-2);flex-shrink:0}
#sp-input{flex:1;min-width:0;border:none;outline:none;font-family:var(--sans);
  font-size:1.125rem;color:var(--ink);background:transparent}
#sp-input::placeholder{color:var(--ink-3)}
#sp-input::-webkit-search-cancel-button{display:none}
.sp-close{background:none;border:none;cursor:pointer;color:var(--ink-2);
  font-size:1.05rem;padding:6px 8px;line-height:1;transition:color .15s}
.sp-close:hover{color:var(--brand-text)}
.sp-results{max-height:min(58vh,520px);overflow-y:auto;margin-top:4px}
.sp-count{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);padding:12px 0 2px}
.sp-empty{font-family:var(--mono);font-size:.9rem;color:var(--ink-2);padding:18px 0}
.sp-item{display:block;padding:13px 4px;border-bottom:1px solid var(--hairline);transition:background .15s}
.sp-item:hover{background:var(--paper-2)}
.sp-meta{display:block;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.sp-cat{color:var(--brand-text)}
.sp-item b{display:block;font-weight:600;font-size:1rem;line-height:1.6;color:var(--ink);margin-top:2px}
.sp-snip{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.7;margin-top:2px}
.sp-item mark,.sp-snip mark{background:var(--mark);color:inherit;padding:0 1px}

/* ============ HERO ============ */
.hero{padding:72px 0 0}
.hero .kicker{margin-bottom:22px}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1.25;letter-spacing:normal;max-width:20em}
.hero h1 span{color:var(--brand-text)}
.hero .sub{margin-top:20px;font-size:1.125rem;line-height:1.85;color:var(--ink-2)}
.hero .fact-line{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:26px}
.hero .fact-line b{color:var(--ink);font-weight:500}
.hero .btn-row{margin-top:28px}
.hero-photo{margin-top:64px;position:relative}
.hero-photo img{width:100%;height:min(56vh,620px);object-fit:cover;object-position:center 40%}
.hero-photo .caption{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
/* 主 CTA 疊在 hero 照片上,置於兩位人物的視覺正中間,上下堆疊。
   top 取照片高度的一半(照片高 min(56vh,620px)),而非 figure(含圖說)的一半 */
.hero-cta{position:absolute;left:50%;top:min(28vh,310px);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.hero-cta .btn{min-width:11em;text-align:center}
.hero-cta .btn{box-shadow:0 2px 14px rgba(0,0,0,.25)}
.hero-cta .btn.ghost{color:#fff;border-color:#fff;background:rgba(20,23,26,.30)}
.hero-cta .btn.ghost:hover{background:var(--ink);border-color:var(--ink)}

/* hero 下的一句話 + 四分欄(我們教什麼) */
.teach-strip{padding:56px 0 0}
.teach-strip .lead-strip{font-size:1.125rem;line-height:1.85;color:var(--ink-2)}
.teach-strip .pillars{margin-top:28px}

/* ============ 課程圖卡(近期課程) ============
   全站唯一吃「淡橘底」的物件 = 最重要、最該被點的東西。
   邊界:2px 實框(不是髮絲線)。hover 語言:框轉品牌橘紅 + 底加深,
   不再整卡反白成深灰、不再抖動(第四個顏色 + 遊戲化微互動,IC 不要)。 */
.course-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  border-top:2px solid var(--ink);padding-top:32px}
.course-card{position:relative;display:flex;flex-direction:column;
  border:2px solid var(--hairline);border-radius:10px;background:var(--brand-tint);
  padding:25px 23px 21px;transition:background .2s,border-color .2s}
/* 課程 banner:取自各報名網站的 og 圖,滿版貼齊卡片圓角頂 */
.cc-banner{width:calc(100% + 46px);max-width:none;margin:-25px -23px 18px;
  border-radius:8px 8px 0 0;display:block}
.course-card:hover{background:var(--brand-tint-2);border-color:var(--brand)}
/* 場次地點小標:是分類說明,不是可點的東西。
   舊版紅底白字膠囊(和 .cc-tag.alt 的白底外框)會被讀成按鈕,違反全站「紅底/有框＝可按」,
   改成加寬字距的等寬小標 + 色塊記號:實心橘紅方塊＝台北,空心灰方塊＝其他縣市。 */
.cc-tag{align-self:flex-start;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  color:var(--ink-2);margin-bottom:14px}
.cc-tag::before{content:"";width:9px;height:9px;flex-shrink:0;border-radius:2px;
  background:var(--brand)}
.cc-tag.alt::before{background:transparent;border:2px solid var(--ink-3)}
.cc-date{font-family:var(--mono);font-weight:500;color:var(--ink)}
.cc-date b{font-size:1.6rem;font-weight:500}
.cc-date span{color:var(--ink-2);font-size:.8125rem;margin-left:8px}
.course-card h3{font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.5;
  letter-spacing:normal;margin-top:6px}
.cc-rule{border:none;border-top:1px solid var(--hairline);margin:16px 0;width:100%}
.course-card p{color:var(--ink-2);font-size:.95rem;line-height:1.8;flex:1}
.cc-loc{display:flex;align-items:flex-start;gap:7px;
  font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px;line-height:1.7}
.cc-loc svg{width:14px;height:14px;flex-shrink:0;margin-top:5px}
.cc-cta{margin-top:18px;text-align:right;color:var(--brand-text);font-weight:700;font-size:.95rem}
.cc-cta i{font-style:normal;display:inline-block;transition:transform .15s}
.course-card:hover .cc-cta i{transform:translateX(4px)}
.course-more{padding:24px 8px 0}

/* 額滿圖卡:不是「重要卡片」,退回冷灰底 + 灰框,和開放報名的橘卡一眼分辨。
   壓「已額滿」章,但保留連結可驗證、可回訪活動網站。 */
.course-card.full{border-color:var(--hairline);background:var(--paper-2)}
.course-card.full .cc-date,.course-card.full .cc-date b,.course-card.full h3{color:var(--ink-2)}
.course-card.full:hover{background:var(--paper-3);border-color:var(--ink-2)}
/* 「已額滿」章:蓋在日期列右側的空白處(HTML 上放在 .cc-date 內),
   紅字紅框,放大到不擋文字的上限。
   注意:選擇器要壓過「.cc-date span」(13px 灰字),否則章的字級與紅色會被蓋掉 */
.course-card.full .cc-date{position:relative}
.course-card .cc-date span.cc-stamp{position:absolute;right:2px;top:50%;
  transform:translateY(-50%) rotate(-8deg);margin-left:0;
  border:4px solid var(--brand);border-radius:9px;color:var(--brand-text);
  font-family:var(--serif);font-weight:900;
  font-size:1.25rem;letter-spacing:.3em;padding:3px 5px 3px 15px;
  pointer-events:none;white-space:nowrap;line-height:1.55}
.course-card.full:hover .cc-date span.cc-stamp{color:var(--brand-text);border-color:var(--brand-text)}
.cc-cta.dim{color:var(--ink-2);font-weight:600}

/* ── 我們教什麼:報紙分欄 ── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:2px solid var(--ink)}
.pillar{padding:22px 20px 26px;border-left:1px solid var(--hairline);transition:background .15s}
.pillar:first-child{border-left:none;padding-left:8px}
.pillar:hover{background:var(--paper-2)}
.pillar .n{font-family:var(--serif);font-weight:900;font-size:1.9rem;color:var(--brand-text);line-height:1}
.pillar b{display:block;font-family:var(--serif);font-weight:700;font-size:1.125rem;margin-top:12px;letter-spacing:normal}
.pillar span{display:block;color:var(--ink-2);font-size:.9rem;margin-top:4px;line-height:1.7}

/* ============ 成績:年報跨頁 ============ */
.report{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}
.report>div{min-width:0} /* 讓可捲動的直方圖不會把 grid 欄撐開 */
.report .left{position:sticky;top:calc(var(--nav-h) + 24px)}
.counter-wrap{margin:0}
.counter-kicker{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.counter{font-family:var(--serif);font-weight:900;font-size:clamp(4rem,10vw,7.5rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:normal;margin-top:10px}
.counter-rule{width:48px;height:3px;background:var(--brand);margin:18px 0 12px}
.counter-sub{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);line-height:1.7}

/* 事實列(key figures) */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hairline);margin-top:44px}
.fact{padding:18px 18px 20px;border-left:1px solid var(--hairline);display:block}
.fact:first-child{border-left:none;padding-left:4px}
/* 可點的事實卡：白底 + 看得見的實框 + 品牌紅數字，hover 才上冷灰底 */
a.fact{background:#fff;border:1px solid var(--hairline);border-radius:8px;
  transition:background .15s,border-color .15s}
a.fact:hover{background:var(--paper-2);border-color:var(--brand)}
a.fact b{color:var(--brand-text)}
.fact b{display:block;font-family:var(--mono);font-weight:500;font-size:1.45rem;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.3}
.fact span{display:block;font-size:.85rem;color:var(--ink-2);margin-top:4px;line-height:1.6}
a.fact span{color:var(--ink-2)}

/* 圖 1:直方圖(期刊化) */
.hist{margin-top:56px}
.hist-title{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink)}
.hist-title b{color:var(--brand-text);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:2.2%;height:220px;margin-top:26px;
  border-bottom:2px solid var(--ink);padding-bottom:0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-num{font-family:var(--mono);font-size:.8125rem;color:var(--ink);font-weight:500;margin-bottom:6px;
  opacity:1;font-variant-numeric:tabular-nums}
/* flex-shrink:0 關鍵:不加的話,值接近最大的長條會被 flex 壓縮到剩餘空間(約156px),
   造成 2021–2025 高柱等高、失真。科學統計圖表比例必須精確。 */
.bar{width:100%;max-width:52px;background:var(--inv);height:0;flex-shrink:0;transition:height 1s cubic-bezier(.22,1,.36,1)}
.bar-col.partial .bar{background:var(--brand)}
.bar-yr{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:8px}
.bars.animate .bar-num{opacity:1}
.hist-foot{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:12px;line-height:1.7}

/* 規模雙聯:黑白演講廳照 × 數字 */
.scale-duo{display:grid;grid-template-columns:7fr 5fr;gap:0;margin-top:72px;border:1px solid var(--hairline)}
.scale-duo .ph{overflow:hidden}
.scale-duo .ph img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:30% center}
.scale-nums{display:flex;flex-direction:column;justify-content:center;padding:40px 44px;border-left:1px solid var(--hairline)}
.scale-nums .row{padding:16px 0;border-bottom:1px solid var(--hairline)}
.scale-nums .row:last-child{border-bottom:none}
.scale-nums b{display:block;font-family:var(--mono);font-weight:500;font-size:1.7rem;color:var(--ink);font-variant-numeric:tabular-nums}
.scale-nums span{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.stats-cta{margin-top:56px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ============ 信任:期刊 pull-quote ============ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}
.qcard{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column}
.qcard .qtag{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--brand-text)}
.qcard .qh{font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.5;margin-top:12px;letter-spacing:normal}
.qcard p{margin-top:12px;line-height:1.9;flex:1}
.qcard .who{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:16px}
.qcard .qmore{margin-top:10px;align-self:flex-start}

/* 手寫問卷原件:掃描件本身就是焦點,外層不再上底色(疊兩層強調),只留可見的框 */
.artifact{margin-top:72px;background:#fff;padding:28px;border:2px solid var(--hairline)}
.artifact img{width:100%;border:1px solid var(--hairline);background:#fff}
.artifact .caption{border-top:none;padding-top:14px}

/* 特殊企劃(首頁 05 段內,紅線區隔同 .oh) */
.sp{margin-top:72px;border-top:3px solid var(--brand);padding-top:28px}
.sp>h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:normal}
.sp-lead{color:var(--ink-2);margin-top:10px;line-height:1.9}
.sp .quotes{margin-top:40px}

/* Office Hour 強調塊 */
.oh{margin-top:72px;border-top:3px solid var(--brand);display:grid;grid-template-columns:7fr 5fr;gap:44px;
  padding-top:28px;align-items:center}
.oh h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:normal}
.oh p{color:var(--ink-2);margin-top:10px;line-height:1.9}
.oh p a{color:var(--brand-text);font-weight:600}
.oh .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ============ 影片學習資源(首頁 04) ============
   左:影片累計計數器 右:膠囊選清單+拉霸選影片 下:16:9 播放器 */
.yt-duo{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start;margin-bottom:20px;max-width:100%}
/* 關鍵:格線欄位預設 min-width:auto,會被 select 的長選項文字撐開造成手機左右捲動 */
.yt-duo>div{min-width:0}
.yt-num{font-family:var(--serif);font-weight:900;font-size:clamp(3rem,6.5vw,4.8rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-top:10px}
.yt-count .counter-rule{margin:16px 0 0}
@media(max-width:900px){.yt-duo{grid-template-columns:1fr;gap:28px}}
.yt-menu{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.yt-chip{font-family:var(--mono);font-size:.8125rem;padding:6px 15px;border-radius:999px;
  background:#fff;color:var(--ink);cursor:pointer;border:1px solid var(--hairline);line-height:1.6;
  transition:background .15s,color .15s,border-color .15s}
.yt-chip:hover{background:var(--paper-2);border-color:var(--brand)}
.yt-chip.on{background:var(--brand-cta);border-color:var(--brand-cta);color:#fff}
.yt-pick{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.yt-pick label{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.yt-pick select{flex:1;min-width:0;max-width:720px;width:100%;font-family:var(--sans);font-size:.95rem;
  color:var(--ink);background:#fff;border:1px solid var(--hairline);border-radius:8px;
  padding:10px 12px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.yt-pick select:hover{background:var(--paper-2);border-color:var(--brand)}
.yt-player{aspect-ratio:16/9;background:#000;max-width:100%}
.yt-player iframe{width:100%;height:100%;border:1px solid var(--hairline);display:block}
/* 播放器門面:縮圖+播放鍵(可點→有實框,hover 框轉 --brand;點擊後由 JS 換成 iframe) */
.yt-facade{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--hairline);background:#000;cursor:pointer}
.yt-facade:hover{border-color:var(--brand)}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:12px;background:var(--brand-cta);display:grid;place-items:center}
.yt-playbtn::after{content:'';border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt-facade:hover .yt-playbtn{background:var(--brand)}
/* 全螢幕時撐滿整個畫面(退出後自動回到 16:9 版面內) */
.yt-player:fullscreen{aspect-ratio:auto;width:100%;height:100%}
.yt-player:fullscreen iframe{border:0}
.yt-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
/* 手機:拉霸獨立成列滿寬,膠囊縮小(注意:此段要放在上方基礎規則之後才蓋得過) */
@media(max-width:760px){
  .yt-pick{display:block}
  .yt-pick label{display:block;margin-bottom:6px}
  .yt-pick select{max-width:100%}
  .yt-menu{gap:8px}
  .yt-chip{padding:6px 13px;font-size:.78rem}
}

/* ============ 關於 ============ */
.about-grid{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:start}
.about-grid .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}
.about-lead{font-size:1.125rem;line-height:1.9;color:var(--ink)}
.about-feats{margin-top:36px;border-top:1px solid var(--ink)}
.feat{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--hairline)}
.feat .n{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--brand-text);padding-top:5px}
.feat b{display:block;font-family:var(--serif);font-weight:700;font-size:1.0625rem;letter-spacing:normal}
.feat span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:3px;line-height:1.8}
.founder{margin-top:44px;border-top:2px solid var(--ink);padding-top:18px}
.founder h4{font-family:var(--serif);font-weight:700;font-size:1.125rem;letter-spacing:normal}
.founder p{color:var(--ink-2);margin-top:10px;line-height:1.9}

/* ============ 06 關於蔡校長 ============ */
/* 沿用 about-grid 的兩欄，但左右對調：數字先講規模，照片放右邊收尾。
   不加 .band-soft，全頁淡色帶已用滿兩條（01 與 03 之間那條），
   相鄰兩條會變賣場（設計規範 E 段）。 */
.principal-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.principal-lead{font-size:1.125rem;line-height:1.9;color:var(--ink)}
.principal-body{color:var(--ink-2);line-height:1.9;margin-top:16px}
/* 這張是已裁好的 16:10 教室全景（講者在框內偏右），不要再用 4/3 二次裁切 */
.principal-grid .ph img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center center}

/* 個人站入口：可點的東西要有看得見的實框，hover 轉 --brand（設計規範第 2 條） */
.ic-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.ic-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border:1px solid var(--hairline);border-radius:2px;text-decoration:none;
  color:var(--ink);font-size:.9375rem;line-height:1.4;
  transition:border-color .18s,color .18s}
.ic-link:hover{border-color:var(--brand);color:var(--brand-text)}
.ic-link .ic-em{font-size:1rem;line-height:1}

@media(max-width:860px){
  .principal-grid{grid-template-columns:1fr;gap:32px}
}

/* ============ 過場照片帶 + 深色 CTA ============ */
.interlude{margin-top:112px}
.interlude img{width:100%;height:240px;object-fit:cover;object-position:center 60%}
.band{background:var(--dark);color:#fff;padding:72px 0}
.band h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:normal}
.band p{color:var(--dark-text);margin-top:12px;line-height:1.9}
.band p a{color:#fff;font-family:var(--mono);font-size:.9rem}
.band .btn-row{margin-top:28px}
.band .btn.ghost{color:#fff;border-color:#fff}
.band .btn.ghost:hover{background:#fff;color:var(--ink)}

/* ============ FOOTER(版權頁) ============ */
footer{background:var(--dark);color:var(--dark-text);padding:0 0 44px;font-size:.9rem}
footer .cols>div>p{margin-top:0}
.foot-contact{margin-top:12px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;
  border-top:1px solid var(--dark-line);padding-top:44px}
footer h4{font-family:var(--mono);font-weight:500;font-size:.8125rem;color:#fff;margin-bottom:14px}
footer .foot-brand{font-family:var(--serif);font-size:1rem;letter-spacing:normal;text-transform:none}
footer a{color:var(--dark-link)}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer li{margin-bottom:9px}
/* 深色底上的橘紅要反向提亮,--brand-text 在 --dark 上只有 3.1:1 */
.foot-brand b{color:var(--brand-on-dark)}
.foot-bottom{border-top:1px solid var(--dark-line);margin-top:40px;padding-top:18px;color:var(--dark-text-2);
  font-family:var(--mono);font-size:.8125rem}
/* 創辦人相關資訊(外部個人站):低調一行,放在版權列上方 */
.foot-founder{border-top:1px solid var(--dark-line);margin-top:40px;padding-top:18px;color:var(--dark-text-2);
  font-family:var(--mono);font-size:.8125rem}
.foot-founder a{color:var(--dark-link);padding-bottom:1px;
  background:linear-gradient(var(--dark-link),var(--dark-link)) left bottom / 0 1px no-repeat;
  transition:background-size .2s ease}
.foot-founder a:hover{color:#fff;background-size:100% 1px}
.foot-founder+.foot-bottom{border-top:none;margin-top:10px;padding-top:0}

/* ============ 內容頁(article) ============ */
.page-hero{border-bottom:1px solid var(--hairline);padding:44px 0 36px}
.back{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.back:hover{color:var(--brand-text)}
/* 頁面主標一定要比內文的任何子標題大(手機斷點最容易反過來,所以下限拉到 2.1rem) */
.page-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(2.1rem,4.2vw,2.6rem);
  line-height:1.4;letter-spacing:normal;margin-top:14px}
.page-meta{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:14px}
.page-meta .cat{color:var(--brand-text);margin-right:12px}
.article-wrap{padding:56px 0 88px}
/* 版心收成 880:標題、內文、圖片、頁尾都對齊同一條軸 */
.page-hero .wrap,.article-wrap .wrap{max-width:var(--sheet-w);
  padding-left:var(--sheet-pad);padding-right:var(--sheet-pad)}
/* 內文欄 612px 置中(每行 34 字),圖片與表格再往左右溢出回 880px */
.article{margin:0 auto;max-width:var(--read-w);
  font-size:var(--read-fs);line-height:1.95;color:var(--ink);
  /* 貼上來的長網址不可以撐破窄欄 */
  overflow-wrap:anywhere}
.article>*+*{margin-top:1.5em}
.article h1,.article h2,.article h3,.article h4{font-family:var(--serif);line-height:1.45;
  letter-spacing:normal;color:var(--ink);margin-top:2em;margin-bottom:.4em;font-weight:700}
/* 小節標題一律 ≥ 內文 × 1.25 且粗體,並保持 h1 > h2 > h3 > h4 的階序;
   襯線只用在 ≥20px 的標題,更小一律黑體(小字襯線又細又小,老花讀者吃力)。 */
.article h1{font-size:2.1rem}
/* 小節標題:原本是 1px 髮絲底線,改成左側橘紅直槓(看得見的邊界,且與全站粗線語言一致) */
.article h2{font-size:1.85rem;border-left:5px solid var(--brand);padding-left:14px;margin-bottom:.6em}
.article h3{font-size:1.6rem}
.article h4{font-family:var(--sans);font-size:1.45rem}
.article h2,.article h3{scroll-margin-top:84px}
.article a{color:inherit;font-weight:600;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 100% 1px no-repeat;padding-bottom:1px}
.article a:hover{color:var(--brand-text);background-size:100% 2px}
/* 圖片、影片、表格:寬度不跟著文字欄縮水,往左右溢出到 880px */
.article img,.article .video-embed,.article table{
  width:calc(100% + var(--media-bleed) * 2);max-width:none;
  margin-left:calc(var(--media-bleed) * -1);margin-right:calc(var(--media-bleed) * -1)}
.article img{margin-top:2em;margin-bottom:2em;border:1px solid var(--hairline)}
/* 影片嵌入:16:9 響應式,不溢出文章欄 */
.article .video-embed{aspect-ratio:16/9;margin-top:2em;margin-bottom:2em;background:#000}
.article .video-embed iframe{width:100%;height:100%;border:1px solid var(--hairline);display:block}
.article ul,.article ol{padding-left:1.4em}
.article li{margin:.4em 0}
.article li::marker{color:var(--brand-text)}
.article li>p{margin:0}
.article blockquote{border-left:5px solid var(--brand);background:var(--paper-2);
  padding:18px 22px;color:var(--ink)}
.article blockquote,.article blockquote em,.article blockquote i{font-style:normal}
.article hr{border:none;border-top:1px solid var(--hairline);margin:2.4em 0}
.article table{border-collapse:collapse;font-size:1rem;margin-top:1.6em;margin-bottom:1.6em}
.article th,.article td{border:1px solid var(--hairline);padding:8px 12px;text-align:left}
.article th{background:var(--paper-2);font-weight:700}
.article strong{color:var(--ink)}
.cta-row{margin-top:2.2em}
.article .cta-row a.btn{color:#fff;background:var(--brand);font-weight:700;padding-bottom:14px}
.article .cta-row a.btn:hover{background:var(--ink);color:#fff}
.article-foot{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;gap:14px;flex-wrap:wrap}

/* ── 內頁外框:深色外底 + 有邊界的白紙面 ──
   IC:「無邊界的網頁很發散,外面要有深色底;navbar 的物件寬度要跟下面內文一致。」
   只套內容頁(有 .article-wrap 的頁),首頁與手工大頁維持原本滿版。 */
body:has(.article-wrap){background:var(--dark)}
body:has(.article-wrap) .page-hero{background:transparent;border-bottom:none;padding:44px 0 0}
body:has(.article-wrap) .article-wrap{padding:0 0 0}
body:has(.article-wrap) .page-hero>.wrap,
body:has(.article-wrap) .article-wrap>.wrap{background:var(--paper);
  border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}
body:has(.article-wrap) .page-hero>.wrap{border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);padding-top:44px;padding-bottom:34px}
body:has(.article-wrap) .article-wrap>.wrap{border-bottom:1px solid var(--hairline);
  padding-top:52px;padding-bottom:76px}
/* navbar 跟著紙面收窄並轉深色,與頁尾同一個外殼 */
body:has(.article-wrap) header.nav{background:var(--dark);border-bottom-color:var(--dark-line)}
body:has(.article-wrap) .nav-in{max-width:var(--sheet-w);margin:0 auto;
  padding-left:var(--sheet-pad);padding-right:var(--sheet-pad)}
body:has(.article-wrap) .brand,
body:has(.article-wrap) .nav-links a:not(.nav-cta),
body:has(.article-wrap) .nav-search{color:var(--dark-text)}
body:has(.article-wrap) .brand b{color:var(--brand-on-dark)}
body:has(.article-wrap) .nav-links a:not(.nav-cta):hover,
body:has(.article-wrap) .nav-links a:not(.nav-cta).active,
body:has(.article-wrap) .nav-search:hover{color:#fff}
body:has(.article-wrap) .nav-ham span{background:var(--dark-text)}
/* 白紙上的次要文字要夠深(頁首日期、分類) */
body:has(.article-wrap) .page-meta,body:has(.article-wrap) .back{color:var(--ink-2)}

/* 延伸閱讀(期刊列) */
.related{margin:56px 0 0;border-top:2px solid var(--ink);padding-top:16px}
.rel-h{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink);margin-bottom:6px}
.rel-grid{display:grid;grid-template-columns:1fr}
.rel-card{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--hairline);transition:background .15s}
.rel-card:hover{background:var(--paper-2)}
.rel-card .rel-cat{font-family:var(--mono);font-size:.8125rem;color:var(--brand-text)}
.rel-card b{font-weight:600;font-size:.98rem;line-height:1.6;color:var(--ink)}
.rel-card .rel-date{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}

/* ============ /results/ hub ============ */
.results-hero{padding:72px 0 0}
.latest-wrap{margin-top:72px}
/* 成績頁的主要出口 = 重要卡片,和首頁課程卡同一套淡橘語言 */
.latest-box{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;align-items:baseline;
  border:2px solid var(--hairline);border-radius:10px;padding:20px 22px;
  background:var(--brand-tint);transition:background .15s,border-color .15s}
.latest-box:hover{background:var(--brand-tint-2);border-color:var(--brand)}
.latest-box .lb-tag{font-family:var(--mono);font-size:.8125rem;color:var(--brand-text);grid-column:1/-1}
.latest-box .lb-n{font-family:var(--serif);font-weight:900;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--brand-text)}
.latest-box .lb-u{font-family:var(--mono);font-size:.9rem;color:var(--ink-2)}
.latest-box .lb-d{grid-column:1/-1;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.results-index{margin-top:56px}
.idx-h{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--ink);
  border-top:1px solid var(--ink);padding-top:12px;margin:36px 0 4px}
.idx-list{list-style:none}
.idx-list li{border-bottom:1px solid var(--hairline)}
.idx-list li a{display:flex;align-items:baseline;gap:18px;padding:14px 4px;transition:background .15s}
.idx-list li a:hover{background:var(--paper-2)}
.idx-when{font-family:var(--mono);font-size:.9rem;width:88px;color:var(--ink-2)}
.idx-n{flex:1;font-weight:600;font-variant-numeric:tabular-nums}
.idx-go{color:var(--brand-text);font-weight:700}
/* 年月索引:期刊目錄式票卡(與首頁事實列同語言,可點=淺底+紅數字,不可點=白底細框)
   每卡一行「年月 ⋯⋯ 篇數」,中間點線(ic-l)自動填滿多餘寬度——卡片再寬也不顯空;
   用 flex 而非 grid:每行卡片撐滿整行,尾行不足時變寬由點線吸收,永遠沒有空格 */
.idx-grid{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.idx-grid li{flex:1 1 170px;min-width:160px;display:flex}
/* 新慣例:有框=可點。不可點的月份就是一行素文字,不再吃底色(數十格灰磚牆會把重點吃掉) */
.idx-cell{display:flex;align-items:baseline;gap:10px;width:100%;padding:12px 15px;
  background:#fff;border:1px solid var(--hairline);border-radius:8px;
  transition:background .15s,border-color .15s}
a.idx-cell:hover{background:var(--paper-2);border-color:var(--brand)}
.idx-cell.static{background:transparent;border-color:transparent}
.idx-cell .ic-k{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.idx-cell .ic-l{flex:1;border-bottom:1px dotted var(--dot);transform:translateY(-3px)}
.idx-cell .ic-n{font-family:var(--mono);font-weight:500;font-size:1.05rem;line-height:1.2;
  color:var(--brand-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.idx-cell.static .ic-n{color:var(--ink)}
.idx-cell .ic-u{font-size:.8rem;color:var(--ink-2);font-weight:400}
.results-cta{margin-top:56px;display:flex;gap:14px;flex-wrap:wrap}
.q-src{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.res-duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
.res-block{border-top:2px solid var(--ink);padding-top:16px}
.res-block .qtag{font-family:var(--mono);font-size:.8125rem;color:var(--brand-text)}
.res-block h3{font-family:var(--serif);font-weight:700;font-size:1.2rem;margin-top:10px;letter-spacing:normal}
.res-block ul{list-style:none;margin-top:10px}
.res-block li{padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--ink-2);font-size:.95rem;line-height:1.8}
.res-block p{margin-top:10px;line-height:1.9}
.res-block .go{display:inline-block;margin-top:14px;color:var(--brand-text);font-weight:700}

/* ============ /workshop_2023/ 課程總目錄(手工頁) ============
   版式:左側 sticky 主題目錄(scrollspy 標紅)+ 右側期刊索引列 */
.wk-duo{display:grid;grid-template-columns:210px 1fr;gap:48px;align-items:start;margin-top:44px}
.wk-toc{border-top:2px solid var(--ink);padding-top:14px;position:sticky;top:calc(var(--nav-h) + 24px)}
.wk-toc .h{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-bottom:6px}
.wk-toc a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 2px;border-bottom:1px solid var(--hairline);color:var(--ink);
  font-size:.95rem;font-weight:600;transition:color .15s}
.wk-toc a em{font-style:normal;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.wk-toc a:hover,.wk-toc a.on{color:var(--brand-text)}
.wk-sec{margin-top:56px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.wk-sec:first-child{margin-top:0}
.wk-sec-h{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:10px}
/* 主題次標題:比課名(1.1rem)大 6px 以上且加粗,編號維持品牌紅 */
.wk-sec-h h2{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.4;
  letter-spacing:normal;color:var(--ink)}
.wk-sec-h h2 b{font-family:var(--mono);font-weight:700;color:var(--brand-text)}
/* 課程票卡:白底 + 看得見的實框 = 可點(全站新慣例),hover 上冷灰底、框轉橘紅。一排兩張 */
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.wk-tk{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hairline);border-radius:10px;padding:21px 23px 17px;
  transition:background .15s,border-color .15s}
.wk-tk:hover{background:var(--paper-2);border-color:var(--brand)}
.wk-tk h4{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.55;letter-spacing:normal}
/* 整張票卡可點:主連結用偽元素鋪滿,講師連結疊在其上 */
.wk-tk h4 a::after{content:"";position:absolute;inset:0}
.wk-tk h4 a:hover{color:var(--brand-text)}
.wk-tk .en{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:4px;letter-spacing:.02em}
.wk-tk .who{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);margin-top:12px}
.wk-tk .who a{position:relative;z-index:1;color:var(--ink-2);padding-bottom:1px;
  background:linear-gradient(var(--brand),var(--brand)) left bottom / 0 1px no-repeat;
  transition:background-size .2s ease,color .15s}
.wk-tk .who a:hover{color:var(--brand-text);background-size:100% 1px}
.wk-tk .go{margin-top:auto;padding-top:14px;text-align:right;color:var(--brand-text);font-weight:700;font-size:.9rem}
.wk-tk .go i{font-style:normal;display:inline-block;transition:transform .15s}
.wk-tk:hover .go i{transform:translateX(4px)}
.wk-cta{margin-top:28px}
.wk-note{color:var(--ink-2);margin-top:12px}
/* 回饋掃描:同 .article img 的呈現(細框、無底色、無內距) */
.wk-fb{border:1px solid var(--hairline);margin-top:24px}
@media(max-width:860px){
  .wk-duo{grid-template-columns:1fr;gap:32px}
  .wk-toc{position:static}
  .wk-sec{margin-top:44px}
  /* 手機:票卡一排一張 */
  .wk-grid{grid-template-columns:1fr;gap:14px}
  .wk-tk{padding:20px 20px 16px}
}

/* ============ 404 ============ */
.err-wrap{text-align:left;padding:88px 0}

/* ============ 手機 ============ */
@media(max-width:900px){
  .course-cards{grid-template-columns:1fr 1fr}
  .report{grid-template-columns:1fr;gap:44px}
  .report .left{position:static}
  .quotes{grid-template-columns:1fr;gap:36px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .oh{grid-template-columns:1fr;gap:24px}
  .scale-duo{grid-template-columns:1fr}
  .scale-nums{border-left:none;border-top:1px solid var(--hairline)}
}
@media(max-width:760px){
  /* 手機:紙面滿版靠邊,深色只留在上下與頁尾(留深色左右邊只是浪費寬度) */
  :root{--sheet-pad:24px}
  body:has(.article-wrap) .page-hero{padding-top:0}
  body:has(.article-wrap) .page-hero>.wrap,
  body:has(.article-wrap) .article-wrap>.wrap{border-left:none;border-right:none}
  body:has(.article-wrap) .page-hero>.wrap{border-top:none;padding-top:32px;padding-bottom:26px}
  body:has(.article-wrap) .article-wrap>.wrap{padding-top:36px;padding-bottom:56px}
  /* 手機內文 17px(桌機 18px),行高略收 */
  .article{font-size:1.0625rem;line-height:1.9}
  .article h1{font-size:1.9rem}
  .article h2{font-size:1.7rem}
  .article h3{font-size:1.5rem}
  .article h4{font-size:1.375rem}
  .article-wrap{padding:40px 0 64px}
  section{padding:64px 0 0}
  footer{margin-top:64px}
  .band+footer{margin-top:0}
  .hero{padding:44px 0 0}
  .hero-photo{margin-top:40px}
  .hero-photo img{height:48vw;min-height:220px}
  .interlude{margin-top:64px}
  .interlude img{height:160px}
  .course-cards{grid-template-columns:1fr;gap:18px}
  .course-card{padding:22px 20px 18px}
  .cc-banner{width:calc(100% + 40px);margin:-22px -20px 16px}
  /* hero 照片上的 CTA:手機改直排置中,並取消行動版按鈕滿寬規則。
     top=手機照片高(48vw,min 220px)的一半 */
  .hero-cta{flex-direction:column;gap:10px;width:auto;top:max(24vw,110px)}
  .hero-cta .btn{display:inline-block;width:auto;padding:11px 22px;font-size:.95rem;text-align:center}
  .teach-strip{padding:40px 0 0}
  .pillars{grid-template-columns:1fr 1fr;border-top:none}
  .pillar{border-top:1px solid var(--hairline);padding:18px 14px 20px}
  .pillar:first-child{padding-left:14px}
  .pillar:nth-child(odd){border-left:none}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:14px}
  .fact:first-child{padding-left:14px}
  .fact:nth-child(odd){border-left:none}
  .fact:nth-child(n+3){border-top:1px solid var(--hairline)}
  /* 13 根長條在窄螢幕塞不下:圖表改在自身容器內橫向滑動,數字與比例不縮水 */
  .hist{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bars{gap:8px;height:170px;min-width:560px;padding-right:4px}
  .bar-num,.bar-yr{font-size:.68rem}
  .idx-when{width:72px}
  .res-duo{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  /* 漢堡抽屜 */
  .nav-in{gap:10px}
  .nav-links{gap:10px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{font-size:.9rem;padding:9px 16px}
  .nav-ham{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:42px;height:42px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
  .nav-ham span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
  .nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-ham.open span:nth-child(2){opacity:0}
  .nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #nav-drawer{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:6px 24px 14px;opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  #nav-drawer.open{opacity:1;visibility:visible;transform:none}
  #nav-drawer a{padding:14px 2px;border-bottom:1px solid var(--hairline);font-weight:600;color:var(--ink);font-size:1rem}
  #nav-drawer a:last-child{border-bottom:none}
  #nav-drawer a.d-cta{color:var(--brand-text);font-weight:700}
  .btn{display:block;width:100%;text-align:center}
  .btn-row{width:100%}
}
@media(max-width:560px){
  .rel-card{grid-template-columns:1fr;gap:4px}
}

/* ============ 分區色帶 ============
   IC 指定「不要無邊界」:用整段換底的冷灰色帶取代髮絲線分段。
   紀律:全頁最多兩條淡色帶且不得相鄰(相鄰會變賣場),深色只留頁尾 .band 一處。
   目前只用在首頁 02 校友成績。 */
.band-soft{background:var(--paper-2);padding:88px 0 96px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.band-soft .artifact,.band-soft a.fact,.band-soft .wk-tk,
.band-soft .idx-cell,.band-soft .scale-duo{background:#fff}
.band-soft a.fact:hover,.band-soft .wk-tk:hover,.band-soft a.idx-cell:hover{background:var(--paper-3)}
@media(max-width:760px){.band-soft{padding:52px 0 60px}}

/* 錨點捲動位移(sticky nav) */
#top{scroll-margin-top:0}
#courses,#stats,#trust,#videos,#about{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* 減少動態偏好 */
@media(prefers-reduced-motion:reduce){
  .bar{transition:none}
  .bar-num{transition:none;opacity:1}
  .cc-cta i,.wk-tk .go i{transition:none}
  html{scroll-behavior:auto}
}

/* ===== 二輪修正追加 ===== */
.sec-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.35;margin-top:14px;letter-spacing:normal}
.report .sec-head{margin-bottom:0}
.results-hero .hist{max-width:900px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}