/* 新站共用樣式。2026-09-30 Astrid 定：統一成 ai.kvalley.biz 原本的黑白＋品牌綠（knowledge/視覺規範_Astrid.md V7／V8）。
綠色只當 accent：按鈕（綠底黑字）、短 bar、深底上的強調；價格與日期一律墨色。 */
:root{
--ink:#0A0A0C;--ink2:#2A2A2C;--gray:#6B6B6E;--gray2:#A0A0A2;--line:#E5E5DF;
--paper3:#FAFAF8;--paper:#F6F6F2;--paper2:#EAEAE4;--acc:#0A0A0C;--acc2:#2A2A2C;--ok:#2F6B3A;
--pop:#C4D600;--pop2:#B3C400;
--serif:'Noto Serif TC',serif;--sans:'Noto Sans TC','PingFang TC',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 🔴 瀏覽器預設的 [hidden]{display:none} 是 UA 樣式，任何一條 .btn{display:inline-flex} 都贏得過它。
所以站上只要元素自己有 display，加 hidden 屬性是沒有效果的——元素照樣看得見。
2026-10-20 踩到：選修頁場次全過期時把報名鈕設成 hidden，它還是亮在那裡。 */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper3);color:var(--ink);font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.narrow{max-width:820px}
/* 區塊標題 */
.sec{padding:clamp(56px,7vw,104px) 0}
.paper{background:var(--paper)}
.kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.kicker i{width:28px;height:3px;background:var(--pop)}
.kicker span{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--gray)}
h1.t,h2.t{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.8vw,44px);line-height:1.25;letter-spacing:-.02em;margin-bottom:16px}
h1.t{font-size:clamp(34px,4.6vw,54px)} /* 頁標要明顯大過卡片標題，否則 H1 跟一張商品卡一樣大 */
.lead{font-size:18px;color:var(--ink2);line-height:1.85;max-width:36em}
/* 標籤、按鈕 */
.fmt{display:flex;flex-wrap:wrap;gap:6px}
.fmt span{font-size:15px;font-weight:500;color:var(--ink2);background:var(--paper2);border-radius:999px;padding:2px 12px;line-height:1.6;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;background:var(--pop);color:var(--ink);text-decoration:none;font-size:18px;font-weight:700;letter-spacing:.04em;padding:16px 36px;border-radius:4px;transition:background .15s}
.btn:hover{background:var(--pop2)}
.btn svg{width:18px;height:18px}
.btn[disabled]{background:var(--paper2);color:var(--gray2);cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
/* 測試模式提示帶 */
.testbar{background:var(--ink);color:rgba(255,255,255,.88);font-size:15px;text-align:center;padding:8px 16px;line-height:1.5}
/* footer */
.ft{background:var(--ink);color:rgba(255,255,255,.72);padding:52px 0 36px;font-size:16px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:800px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-grid{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:24px}.ft-grid>div:first-child{grid-column:1/-1}.ft-grid>div:nth-child(3){grid-row:span 2}}
/* 2026-10-22 手機頁尾縮短（887px → ~550px）：品牌整行、三組連結兩欄並排、留白收小 */
@media(max-width:480px){.ft{padding:36px 0 24px}.ft h4{margin-bottom:4px}.ft-bottom{margin-top:24px}.ft-ct{margin-top:6px}}
.ft img{height:22px;width:auto;margin-bottom:14px}
.ft h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:.06em}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft a{text-decoration:none;color:rgba(255,255,255,.72)}
.ft a:hover{color:#fff}
/* 2026-10-22 手機點擊區：頁尾連結一行字高只有 24px */
@media(max-width:820px){.ft ul{gap:0}.ft li>a{display:inline-block;padding:7px 0}}
.ft-note{font-size:15px;line-height:1.75;max-width:30ch}
.ft-ct{margin-top:12px;font-size:14.5px;line-height:1.95}
.ft-ct a{color:rgba(255,255,255,.72);text-decoration:none}
.ft-ct a:hover{color:#C4D600}
.ft-bottom{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.5)}
/* 商品卡（商城／公開課程共用）*/
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:34px}
.tile{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.tile:hover h2,.tile:hover h3{color:var(--acc)}
.t-img{aspect-ratio:16/9;overflow:hidden;background:var(--ink);position:relative} /* 一律 16:9＝封面圖的原生比例，完全不裁切（Astrid 10-01：「配合圖的尺寸設定比例」） */
/* 卡片要有份量，改從白色區加高，不靠拉高圖去裁人 */
.t-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .2s}
.tile:hover .t-img img{filter:saturate(1)}
.t-img.brand{display:grid;place-items:center;padding:14px}
.t-img.brand img{object-fit:contain;filter:none}
.t-body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1;min-height:290px} /* 圖不拉高，份量從白色區來 */
.shop.more .t-body{min-height:0} /* 更多服務內容少，高度交給內容決定（Astrid 10-01） */
.t-body h2,.t-body h3{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-bottom:12px;transition:color .2s}
.shop:not(.more) .tile:not(.feat) .t-body h3{min-height:calc(21px * 1.3 * 2)} /* 只鎖選修那排：那裡課名有一行有兩行會參差；更多服務都一行，鎖了只是多留白 */
.cd-desc{min-height:calc(14px * 1.6 * 2)} /* 同理，簡介也固定兩行 */
.t-body .fmt{margin-bottom:8px}
.cd-sub{display:block;font-size:17px;font-weight:500;color:var(--ink2);margin-top:4px;letter-spacing:0}
.cd-desc{font-size:14px;font-weight:400;color:var(--gray);line-height:1.6;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 卡片簡介：14px、最多兩行（Astrid：太長、字太大） */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.badges span{font-size:14px;font-weight:700;letter-spacing:.02em;line-height:1.5;padding:3px 11px;border-radius:4px;color:var(--ink);background:var(--pop);} /* 主課卡的促購標 */
.badges.hot span{background:#FFF0E4;color:#C2410C;border:1px solid #F3C49A} /* 選修的「火熱報名中」：橘色（Astrid 10-01 指定，黑白綠之外的例外） */
.t-pr .was{color:var(--gray2);font-weight:500;font-size:15px;margin-right:8px;text-decoration-thickness:1.5px} /* 劃掉的原價 */
.t-pr{margin-top:auto;padding-top:8px;font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px}
.ext{font-size:14px;font-weight:500;color:var(--gray);margin-left:8px}
.g-b{flex:none;color:var(--gray2);display:grid;place-items:center;transition:color .2s,transform .2s}
.g-b svg{width:22px;height:22px}
.tile:hover .g-b{color:var(--acc);transform:translateX(4px)}
.feat{grid-column:1 / -1;flex-direction:row}
.feat .t-img{width:58%;flex:none;aspect-ratio:16/9} /* 主課大卡是左圖右文，維持 16:9；圖一變高右邊文字欄會空一大塊 */
.feat .t-img img{filter:none;object-position:50% 40%}
.feat:hover .t-img img{filter:none}
.feat .t-body{padding:clamp(24px,3.4vw,48px);justify-content:center;min-height:0}
.feat .t-body h2{font-size:clamp(28px,3.1vw,38px);margin-bottom:18px} /* 主課卡＝H2，比 H1 小、比區段 H2 稍大 */
.feat .cd-sub{font-size:clamp(19px,1.9vw,24px);margin-top:6px}
.feat .t-pr{margin-top:14px;font-family:var(--serif);font-size:26px;font-weight:700;color:var(--ink)}
.feat .t-pr .was{font-size:19px}
.feat .ext{display:block;margin-left:0;margin-top:2px;font-family:var(--sans)} /* 加了劃掉的原價之後這行會擠到換行，改成自己一行 */
.feat .g-b svg{width:28px;height:28px}
@media(max-width:1000px){.shop{gap:24px}.feat .t-img{width:52%}}
@media(max-width:760px){.shop{grid-template-columns:minmax(0,1fr)}.last{grid-column:1 / -1}} /* 一行一張往下滑（Astrid 10-01）；原本 560–760 的兩欄取消 */
@media(max-width:760px){.feat,.last{flex-direction:column}.feat .t-img,.last .t-img{width:auto}
.t-body{min-height:0} /* 單欄時卡片變寬、文字行數變少，固定高度只會留下空洞 */
.tile:not(.feat) .t-body h3,.cd-desc{min-height:0} /* 一行一張就沒有左右對齊的問題，不必鎖行數 */}
.ends{margin-top:34px;padding:22px 26px;background:var(--paper);border:1px solid var(--line);font-size:16px;color:var(--ink2);line-height:1.85}
button[disabled]{opacity:.55;cursor:default}
/* ── 最後一行不要只剩一個字 ────────────────────────────────────
2026-10-20：09-pixel-66 掃 sitemap 76 頁＋Vercel 6 頁，在 390／1280 兩種寬度
逐字比對換行位置，找到 349 處「馬上就可以⏎用。」「營運團⏎隊」這種落單。
他在線上注入這三條實測過，降到 0～2 處（剩下的是程式碼區塊，本來就不該動）。
🔴 第一條包在 :where() 裡，權重是 0 ⇒ 已經自己寫了 text-wrap:balance 的元素
（標題那些）完全不受影響，不會被這條蓋掉。
🔴 第二條是因為 text-wrap:balance 遇到
就失效：案例頁的 h1 與 h2.ph 是
「前半句
後半句」的結構，所以手機上會斷成「先翻出⏎來。」。
把 span 變成 inline-block，balance 才算得到後半句。
🔴 第三條是案例頁表格裡的狀態標籤（「待確⏎認」「連 3⏎降」），短到不該斷。
注意：text-wrap:pretty 要 Safari 26 以上才支援。舊版照原樣顯示，不會壞，只是沒效果。 */
:where(body *){text-wrap:pretty}
h1>span, h2.ph>span{display:inline-block;text-wrap:balance}
i.hi, i.md, i.lo{white-space:nowrap}