/* AIPost Academy 學習地圖 v3 — 樣式
   色彩、字體、圓角、間距 token 全部沿用 v2；改的是版面層級與區塊節奏。
   v3 追加：依工具單行 rail、學習路徑 popup（與抽屜共用疊層）、組合價。 */
:root{
  color-scheme:light;
  --primary:#C6FF3D; --primary-active:#cdffad; --primary-pale:#e2f6d5; --on-primary:#0e0f0c;
  --canvas:#ffffff; --canvas-soft:#e8ebe6;
  --ink:#0e0f0c; --ink-deep:#163300; --body:#454745; --mute:#636462; /* 灰字：底色 #e8ebe6 上 4.95:1、白底 5.95:1（≥ 4.5） */
  --warning:#ffd11a; --warning-content:#4a3b1c; --negative:#d03238; --positive-deep:#054d28;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;
  --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px; --s-2xl:32px; --s-3xl:48px; --s-4xl:80px;
  --font:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  /* v3 新增：深色區塊與陰影 */
  --ink-2:#1b1d19; --on-dark:#e8ebe6; --on-dark-mute:rgba(232,235,230,.68);
  --line:rgba(14,15,12,.08); --line-dark:rgba(232,235,230,.14);
  --shadow:0 16px 40px rgba(14,15,12,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lock{overflow:hidden}
body{margin:0;background:var(--canvas-soft);color:var(--ink);font:400 16px/24px var(--font);font-feature-settings:"calt";-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.dark :focus-visible,.foot-cta :focus-visible{outline-color:var(--primary)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s-xl)}
@media (max-width:767px){.wrap{padding:0 var(--s-lg)}}

/* ---------- 共用元件（沿用 v2） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-sm);border-radius:var(--r-xl);padding:var(--s-md) var(--s-xl);font:600 16px/24px var(--font);text-decoration:none;border:0;min-height:48px;transition:background .15s}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-active)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost:hover{background:rgba(232,235,230,.08)}
.pill{display:inline-block;border-radius:var(--r-pill);padding:var(--s-xs) var(--s-md);font:600 12px/16px var(--font);background:var(--canvas-soft);color:var(--ink)}
.pill.lv{background:var(--ink);color:var(--canvas)}
.pill.ok{background:var(--primary-pale);color:var(--positive-deep)}
.pill.rel{background:var(--primary-pale);color:var(--ink)}
.chip{border:1px solid var(--ink);background:var(--canvas);border-radius:var(--r-pill);padding:var(--s-xs) var(--s-md);font:600 14px/20px var(--font);white-space:nowrap;flex:none}
.chip small{font-weight:400;color:var(--mute);margin-left:4px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--canvas)}
.chip[aria-pressed=true] small{color:var(--primary-pale)}
.chip.on-by{background:var(--primary);border-color:var(--primary)}
.link{background:none;border:0;padding:0 0 2px;font:600 14px/20px var(--font);text-decoration:none;border-bottom:2px solid var(--primary);color:var(--ink)}
.link:hover{border-bottom-color:var(--ink)}
.empty{background:var(--canvas);border:1px dashed var(--mute);border-radius:var(--r-xl);padding:var(--s-xl);font:400 14px/20px var(--font);color:var(--body)}
.dbg{background:var(--ink);color:var(--primary);padding:var(--s-lg);margin:0;font:400 12px/18px ui-monospace,monospace;white-space:pre-wrap}

/* ---------- 頂部列 ---------- */
.topbar{padding:var(--s-lg) 0}
.topbar .wrap{display:flex;align-items:center;gap:var(--s-xl)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;font:900 16px/1 var(--font);text-decoration:none;white-space:nowrap}
.brand img{height:32px;width:auto;display:block;flex:none}
.brand b{font-weight:900}
.brand span{font-weight:400;color:var(--body);margin-left:2px}
.topnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.topnav a{white-space:nowrap;padding:var(--s-sm) 14px;border-radius:var(--r-pill);font:600 14px/20px var(--font);text-decoration:none;color:var(--body)}
.topnav a:hover{background:var(--canvas);color:var(--ink)}
.topnav a.out{background:var(--ink);color:var(--canvas);margin-left:var(--s-sm)}
.topnav a.out:hover{background:var(--ink);color:var(--primary)}
@media (max-width:767px){.topnav a:not(.out){display:none}.brand span{display:none}}
@media (max-width:360px){.topnav a.out{padding:6px 12px;font-size:13px}.brand{font-size:14px}}

/* ---------- 1. 主視覺 ---------- */
.hero{padding:var(--s-2xl) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3xl);align-items:center}
.hero h1{font:900 clamp(44px,7vw,80px)/1.04 var(--font);margin:0 0 var(--s-lg);letter-spacing:-.01em}
.lead{font:400 20px/30px var(--font);color:var(--body);margin:0;max-width:520px}
.stats{display:flex;flex-wrap:wrap;gap:var(--s-lg) var(--s-2xl);margin-top:var(--s-2xl);padding-top:var(--s-xl);border-top:1px solid var(--line)}
.stat b{display:block;font:900 32px/1.1 var(--font)}
.stat span{font:400 13px/18px var(--font);color:var(--body)}
.mosaic{position:relative;aspect-ratio:10/9}
.mosaic figure{position:absolute;margin:0;width:66%;padding:6px;background:var(--canvas);border-radius:20px;box-shadow:var(--shadow)}
.mosaic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--canvas-soft)}
.mosaic .m0{top:4%;left:0;transform:rotate(-4deg)}
.mosaic .m1{top:30%;right:0;transform:rotate(3deg);z-index:1}
.mosaic .m2{bottom:2%;left:8%;transform:rotate(-1deg);z-index:2}
.mosaic .float{position:absolute;z-index:3;border-radius:var(--r-pill);padding:10px 18px;font:600 14px/20px var(--font);box-shadow:var(--shadow);white-space:nowrap}
.mosaic .f0{top:0;right:4%;background:var(--ink);color:var(--primary)}
.mosaic .f1{bottom:14%;right:0;background:var(--primary);color:var(--on-primary)}
@media (max-width:1023px){.hero-grid{grid-template-columns:1fr}.mosaic{display:none}}
@media (max-width:767px){.hero{padding-top:var(--s-lg)}.lead{font-size:17px;line-height:26px}.stats{gap:var(--s-md) var(--s-xl)}.stat b{font-size:24px}}

.pick{margin-top:0;padding-top:var(--s-2xl)}
.pick-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-lg);margin-bottom:var(--s-lg);flex-wrap:wrap}
.pick-head h1,.pick-head h2{font:900 clamp(26px,3.5vw,36px)/1.2 var(--font);margin:0}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-md)}
.tile{position:relative;text-align:left;border:0;background:var(--canvas);border-radius:var(--r-xl);padding:var(--s-xl) var(--s-lg) var(--s-lg);display:flex;flex-direction:column;gap:6px;min-height:188px;transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:0 0 0 2px var(--ink);transform:translateY(-2px)}
.tile-n{align-self:flex-start;border-radius:var(--r-pill);padding:2px 10px;background:var(--canvas-soft);font:600 12px/16px var(--font);margin-bottom:var(--s-xs)}
.tile b{font:900 20px/26px var(--font)}
.tile-d{font:400 14px/20px var(--font);color:var(--body)}
.tile-make{margin-top:auto;padding-right:40px;font:400 12px/16px var(--font);color:var(--mute)}
.tile-go{position:absolute;right:var(--s-lg);bottom:var(--s-lg);width:32px;height:32px;border-radius:50%;background:var(--canvas-soft);display:grid;place-items:center;font:600 16px/1 var(--font);transition:background .15s}
.tile:hover .tile-go{background:var(--primary)}
@media (max-width:1023px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.pick{margin-top:var(--s-2xl)}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-sm)}.tile{min-height:0;padding:var(--s-lg);gap:2px}.tile b{font-size:17px;line-height:24px}.tile-d{font-size:13px;line-height:18px;padding-right:28px}.tile-make,.tile-n{display:none}.tile-go{width:28px;height:28px;right:var(--s-md);bottom:var(--s-md)}}

/* 近期熱門的學習路徑：上方分頁選一條，下方步驟由左到右（手機直向） */
.pick-head h1.kicker{font:600 14px/20px var(--font);margin:0 0 var(--s-sm)}
.pick-head h2{font:900 clamp(26px,3.5vw,36px)/1.2 var(--font);margin:0}
.ptabs{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-bottom:var(--s-md)}
.ptab{border:0;background:var(--canvas);border-radius:var(--r-pill);padding:10px 18px;font:600 16px/22px var(--font);white-space:nowrap;transition:background .15s}
.ptab:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ptab small{margin-left:6px;font-weight:400;color:var(--body)}
.ptab[aria-pressed=true]{background:var(--ink);color:var(--primary)}
.ptab[aria-pressed=true] small{color:var(--primary-pale)}
.fpanel{background:var(--canvas);border-radius:var(--r-xl);padding:var(--s-xl)}
.fhead{display:flex;align-items:flex-end;gap:var(--s-lg);margin-bottom:var(--s-lg)}
.fhead h3{margin:0;font:900 26px/34px var(--font)}
.fhead p{margin:4px 0 0;font:400 15px/22px var(--font);color:var(--body)}
.fmeta{flex:none;margin-left:auto;font:400 14px/20px var(--font);color:var(--body);white-space:nowrap}
.fhead .arrows{flex:none}
.rail.flow{list-style:none;grid-auto-columns:minmax(240px,calc((100% - 3 * 32px) / 4));gap:32px;padding:4px;margin:-4px}
.fstep{position:relative}
.fstep:not(:last-child)::after{content:"→";position:absolute;right:-24px;top:calc(40px + (100% - 40px) * .22);font:600 18px/1 var(--font);color:var(--mute)}
.fstep a{display:flex;flex-direction:column;gap:var(--s-sm);height:100%;padding:var(--s-md);border-radius:var(--r-lg);background:var(--canvas-soft);text-decoration:none;transition:box-shadow .15s}
.fstep a:hover{box-shadow:0 0 0 2px var(--ink)}
.fnum{display:flex;align-items:center;gap:6px;min-height:28px}
.fnum b{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--primary);font:600 14px/28px var(--font);text-align:center;margin-right:2px}
.fnum .pill{padding:2px 10px}
.badge.inline{position:static;box-shadow:none;padding:2px 10px}
.fthumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);background:var(--canvas)}
/* 標題固定佔 2 行、說明固定佔 3 行：每條路徑的卡片（和整個區塊）高度一致，切換分頁不會跳動 */
.ftitle{font:600 16px/23px var(--font);min-height:46px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fstep a:hover .ftitle{text-decoration:underline}
.fwhy{font:400 14px/21px var(--font);color:var(--body);min-height:63px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fdots{display:none}
/* 載入中：給搜尋引擎的文字清單不顯示（<head> 有執行 JS 才加 .js），學習路徑先留好高度，避免閃一下再跳版 */
.js .seo-list{display:none}
.ptabs:empty{min-height:44px}
.fpanel:empty{min-height:431px}
@media (max-width:767px){
  .ptabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s-lg)) var(--s-md);padding:2px var(--s-lg)}
  .ptabs::-webkit-scrollbar{display:none}
  .ptab{padding:8px 14px;font-size:15px}
  .fpanel{padding:var(--s-lg) var(--s-md)}
  .fhead{flex-wrap:wrap;gap:4px;margin-bottom:var(--s-md)}
  .fhead h3{font-size:21px;line-height:28px;width:100%}
  .fmeta{margin-left:0}
  .fhead .arrows{display:none}
  .ptabs:empty{min-height:38px}
  .fpanel:empty{min-height:329px}
  /* 手機：橫向滑動（不顯示捲軸），一次看到 2.5 堂，露出的半張提示可以往右滑；卡片貼齊區塊左右邊緣 */
  .rail.flow{grid-auto-columns:calc((100% - 2 * var(--s-md) - 2 * 10px) / 2.5);gap:10px;margin:0 calc(-1 * var(--s-md));padding:2px var(--s-md);scroll-padding:0 var(--s-md)}
  .fstep:not(:last-child)::after{display:none}
  .fstep a{gap:6px;padding:var(--s-sm)}
  .fnum{gap:4px;min-height:24px}
  .fnum b{width:24px;height:24px;line-height:24px;font-size:12px}
  .fnum .pill,.badge.inline{padding:1px 8px;font-size:11px}
  /* 卡片窄，「早鳥剩 N 天／上線日」改疊在封面左上角，不讓編號列換行、封面上下錯開 */
  .fstep a{position:relative}
  .badge.inline{position:absolute;left:calc(var(--s-sm) + 4px);top:calc(var(--s-sm) + 24px + 6px + 4px);z-index:1;box-shadow:0 2px 6px rgba(14,15,12,.25)}
  .ftitle{font-size:14px;line-height:19px;min-height:38px}
  .fwhy{font-size:12px;line-height:17px;min-height:51px}
  /* 提示還能往右滑：邊緣淡出（不是硬切）＋下方小圓點；滑到底就不淡出 */
  .rail.flow.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .rail.flow.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  .rail.flow.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
  .fdots{display:flex;justify-content:center;gap:6px;margin-top:var(--s-md)}
  .fdots i{width:6px;height:6px;border-radius:3px;background:rgba(14,15,12,.18);transition:width .2s,background .2s}
  .fdots i.on{width:16px;background:var(--ink)}
}

/* ---------- 區塊節奏 ---------- */
.sec{padding-top:var(--s-4xl)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-lg);margin-bottom:var(--s-xl)}
.kicker{display:flex;align-items:center;gap:var(--s-sm);font:600 14px/20px var(--font);color:var(--body);margin:0 0 var(--s-sm)}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px var(--ink)}
.sec h2{font:900 clamp(28px,4vw,40px)/1.15 var(--font);margin:0}
.sub{font:400 16px/24px var(--font);color:var(--body);margin:var(--s-sm) 0 0;max-width:640px}
.dark{background:var(--ink);color:var(--on-dark);padding:var(--s-4xl) 0;margin-top:var(--s-4xl)}
.dark h2{color:var(--canvas)}
.dark .sub{color:var(--on-dark-mute)}
.dark .kicker{color:var(--primary)}
.dark .kicker::before{box-shadow:none}
@media (max-width:767px){.sec{padding-top:56px}.dark{padding:56px 0;margin-top:56px}.sub{font-size:15px;line-height:22px}}

/* ---------- 課程卡 ---------- */
.card{background:var(--canvas);border-radius:var(--r-xl);padding:var(--s-md);text-decoration:none;display:flex;flex-direction:column;gap:var(--s-md);height:100%;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 0 0 2px var(--ink);transform:translateY(-2px)}
.thumb{position:relative;display:block}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--canvas-soft)}
.badge{position:absolute;top:10px;left:10px;border-radius:var(--r-pill);padding:4px 10px;font:600 12px/16px var(--font);box-shadow:0 2px 8px rgba(14,15,12,.2)}
.badge.free{background:var(--primary);color:var(--on-primary)}
.badge.hot{background:var(--warning);color:var(--warning-content)}
.badge.new{background:var(--ink);color:var(--primary)}
.card .body{display:flex;flex-direction:column;gap:6px;padding:0 var(--s-xs) var(--s-xs);flex:1;min-width:0}
.card .meta{display:flex;gap:var(--s-sm);align-items:center;font:400 12px/16px var(--font);color:var(--body)}
.card .title{font:600 18px/26px var(--font)}
.make{font:400 14px/20px var(--font);color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.make b{font-weight:600;color:var(--ink);margin-right:6px}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-sm);margin-top:auto;padding-top:var(--s-md);border-top:1px solid var(--canvas-soft);font:400 13px/18px var(--font);color:var(--mute)}
.card .by{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price{white-space:nowrap}
.price b{font:900 18px/1 var(--font);color:var(--ink)}
.price s{color:var(--mute);margin-left:6px;font-size:13px}
.price.is-free b{background:var(--primary);padding:2px 8px;border-radius:var(--r-sm)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-lg)}
@media (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 手機：清單用橫式小卡，縮短整頁長度 */
@media (max-width:767px){
  .grid{grid-template-columns:1fr;gap:var(--s-sm)}
  .grid .card{flex-direction:row;gap:var(--s-md);padding:var(--s-sm);border-radius:var(--r-lg)}
  .grid .thumb{flex:0 0 38%;align-self:flex-start}
  .grid .thumb img{border-radius:var(--r-md)}
  .grid .badge{top:6px;left:6px;padding:2px 8px;font-size:11px}
  .grid .card .body{padding:2px 2px 0 0;gap:4px}
  .grid .card .title{font-size:15px;line-height:21px}
  .grid .make{font-size:13px;line-height:18px}
  .grid .make b{display:none}
  .grid .card .foot{padding-top:6px;border:0}
  .grid .card .by{display:none}
  .grid .price b{font-size:15px}
}

/* ---------- 2. 限時區 ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--s-lg)) / 4);gap:var(--s-lg);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;margin:-4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.arrows{display:flex;gap:var(--s-sm);flex:none}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:var(--canvas);font:600 18px/1 var(--font)}
.arrow:hover:not(:disabled){background:var(--primary)}
.arrow:disabled{opacity:.3;cursor:default}
@media (max-width:1023px){.rail{grid-auto-columns:calc((100% - var(--s-lg)) / 2.3)}}
@media (max-width:767px){.rail{grid-auto-columns:76%;gap:var(--s-md);margin:-4px calc(-1 * var(--s-lg));padding:4px var(--s-lg);scroll-padding:0 var(--s-lg)}.arrows{display:none}.rail .card .title{font-size:16px;line-height:23px}}

/* ---------- 3. 學習路徑 ---------- */
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-lg)}
.path{position:relative;background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-xl);padding:var(--s-xl);display:flex;flex-direction:column;gap:var(--s-lg);transition:border-color .15s,transform .15s}
.path:hover{border-color:var(--primary);transform:translateY(-2px)}
.path-open::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl)}
.path-open:focus-visible{outline-offset:4px}
.path h3{font:900 24px/31px var(--font);color:var(--primary);margin:0}
.path .pitch{font:400 14px/20px var(--font);color:var(--on-dark-mute);margin:var(--s-xs) 0 0}
.path ol{list-style:none;margin:0 calc(-1 * var(--s-sm));padding:0;display:flex;flex-direction:column;gap:2px;position:relative}
.path ol::before{content:"";position:absolute;left:21px;top:28px;bottom:28px;width:2px;background:rgba(198,255,61,.3)}
.path li{display:grid;grid-template-columns:28px 76px minmax(0,1fr);gap:var(--s-md);align-items:center;padding:var(--s-sm);border-radius:var(--r-lg)}
.path .n{position:relative;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:600 14px/28px var(--font);text-align:center}
.path li img{width:76px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--ink)}
.path li b{display:block;font:600 14px/20px var(--font);color:var(--canvas)}
.path .why{display:block;font:400 12px/16px var(--font);color:var(--on-dark-mute);margin-top:2px}
.path-foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-sm);margin-top:auto;padding-top:var(--s-lg);border-top:1px solid var(--line-dark);font:400 13px/18px var(--font);color:var(--on-dark-mute)}
.path-foot .pp-now{font:900 20px/1 var(--font);color:var(--canvas)}
.path-foot .pp-was{color:var(--on-dark-mute)}
.path .btn{width:100%}
@media (max-width:1023px){.path-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(300px,72%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--s-xl));padding:0 var(--s-xl);scroll-padding:0 var(--s-xl)}.path-grid::-webkit-scrollbar{display:none}.path{scroll-snap-align:start}}
@media (max-width:767px){.path-grid{grid-auto-columns:86%;gap:var(--s-md);margin:0 calc(-1 * var(--s-lg));padding:0 var(--s-lg);scroll-padding:0 var(--s-lg)}.path{padding:var(--s-lg)}.path li{grid-template-columns:28px 64px minmax(0,1fr)}.path li img{width:64px}}

/* ---------- 4. 篩選列（捲動時黏在頂端） ---------- */
.filterbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding:var(--s-md) 0;margin-bottom:var(--s-lg);background:rgba(232,235,230,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.filterbar.stuck{border-bottom-color:var(--line)}
.fb-row{display:flex;align-items:center;gap:var(--s-sm)}
.fb-row + .fb-row{margin-top:var(--s-sm)}
.seg{display:inline-flex;background:var(--canvas);border-radius:var(--r-pill);padding:4px;gap:4px;flex:none}
.seg button{border:0;background:transparent;border-radius:var(--r-pill);padding:10px 24px;font:900 18px/26px var(--font);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--primary)}
.fb-sep{width:1px;height:24px;background:var(--line);margin:0 var(--s-sm);flex:none}
.fb-label{font:600 12px/16px var(--font);color:var(--body);flex:none;margin-right:2px}
.count{margin-left:auto;font:400 14px/20px var(--font);color:var(--body);white-space:nowrap;padding-left:var(--s-md)}
.chips{display:flex;gap:var(--s-sm);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.chips::-webkit-scrollbar{display:none}
@media (max-width:767px){
  .filterbar{padding:var(--s-sm) 0}
  .fb-top{overflow-x:auto;scrollbar-width:none}
  .fb-top::-webkit-scrollbar{display:none}
  .seg button{padding:8px 16px;font-size:16px;line-height:22px}
  .count{display:none}
  .chip{font-size:13px;padding:3px 10px}
}

.group{margin-bottom:var(--s-3xl)}
.group-head{display:flex;align-items:baseline;gap:var(--s-md);margin-bottom:var(--s-lg);flex-wrap:wrap}
.group-head h3{font:900 24px/31px var(--font);margin:0}
.group-head span{font:400 14px/20px var(--font);color:var(--body)}
.group-head .n{margin-left:auto;color:var(--mute)}
@media (max-width:767px){.group{margin-bottom:var(--s-2xl)}.group-head{gap:2px var(--s-sm);margin-bottom:var(--s-md)}.group-head h3{font-size:20px;line-height:26px;width:100%}.group-head .n{display:none}}

/* ---------- 5. 講師 ---------- */
.teach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-md)}
.teacher{display:flex;gap:var(--s-md);align-items:center;background:var(--canvas);border:0;border-radius:var(--r-xl);padding:var(--s-md) var(--s-lg) var(--s-md) var(--s-md);text-align:left;transition:box-shadow .15s}
.teacher:hover{box-shadow:0 0 0 2px var(--ink)}
.mono{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--primary);display:grid;place-items:center;font:900 16px/1 var(--font);letter-spacing:-.02em}
.teacher b{display:block;font:600 15px/20px var(--font)}
.teacher span span{display:block;font:400 12px/16px var(--font);color:var(--body);margin-top:2px}
@media (max-width:767px){.teach-grid{grid-template-columns:1fr 1fr;gap:var(--s-sm)}.teacher{padding:var(--s-sm);gap:var(--s-sm)}.mono{width:36px;height:36px;font-size:13px}.teacher b{font-size:13px;line-height:18px}}

/* ---------- 6. 常見問題 ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-3xl)}
.faq details{background:var(--canvas);border-radius:var(--r-lg);padding:var(--s-lg) var(--s-xl);margin-bottom:var(--s-sm)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s-lg);font:600 16px/24px var(--font);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 24px/24px var(--font);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p,.faq ul{font:400 14px/22px var(--font);color:var(--body);margin:var(--s-md) 0 0}
.faq ul{padding-left:18px}
.faq li{margin:4px 0}
@media (max-width:767px){.faq-grid{grid-template-columns:1fr;gap:var(--s-lg)}.faq details{padding:var(--s-md) var(--s-lg)}.faq summary{font-size:15px}}

/* ---------- 頁尾（與學院網站相同：logo＋社群，分隔線，版權＋政策連結） ---------- */
.srcnote{font:400 12px/16px var(--font);color:var(--mute);margin:var(--s-3xl) 0 0}
.srcnote a{color:var(--body)}
.site-foot{background:var(--ink);color:var(--on-dark);border-top:1px solid var(--ink-deep);margin-top:var(--s-xl);padding:48px 24px}
.sf-inner{max-width:1200px;margin:0 auto;padding:48px 24px}
.sf-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-lg);padding-bottom:var(--s-xl);border-bottom:1px solid #1e201e}
.sf-logo img{height:32px;width:auto}
.sf-social{display:flex;align-items:center;gap:var(--s-md)}
.sf-social a{display:grid;place-items:center;color:#fff;transition:color .15s}
.sf-social a:hover{color:var(--primary)}
.sf-social svg{width:24px;height:24px}
.sf-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);flex-wrap:wrap;padding-top:var(--s-xl)}
.sf-copy{margin:0;font:400 13px/18px var(--font);color:#868685}
.sf-legal{display:flex;gap:var(--s-xl)}
.sf-legal a{font:600 14px/20px var(--font);color:#fff;text-decoration:none}
.sf-legal a:hover{color:var(--primary)}
.site-foot :focus-visible{outline-color:var(--primary)}
@media (max-width:767px){
  .site-foot{padding:32px var(--s-lg)}
  .sf-inner{padding:0}
  .sf-top{flex-direction:column;align-items:flex-start}
  .sf-social{flex-wrap:wrap}
  .sf-bottom{flex-direction:column-reverse;align-items:flex-start}
  .sf-legal{gap:var(--s-lg)}
}

/* ---------- 課程詳情抽屜（桌機右側／手機底部） ---------- */
.backdrop{position:fixed;inset:0;z-index:40;background:rgba(14,15,12,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.backdrop.on{opacity:1;pointer-events:auto}
.backdrop.over-modal{z-index:46}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(480px,100%);display:flex;flex-direction:column;background:var(--canvas);box-shadow:-16px 0 48px rgba(14,15,12,.22);transform:translateX(104%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.drawer.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.d-scroll{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 var(--s-xl) var(--s-xl)}
.d-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:var(--s-md) 0;background:var(--canvas)}
.d-crumb{font:600 13px/18px var(--font);color:var(--body)}
.d-close{width:40px;height:40px;border-radius:50%;border:0;background:var(--canvas-soft);font:600 16px/1 var(--font)}
.d-close:hover{background:var(--primary)}
.d-cover{position:relative;display:block}
.d-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--canvas-soft)}
.drawer h2{font:600 22px/30px var(--font);letter-spacing:-.3px;margin:var(--s-lg) 0 var(--s-xs)}
.d-who{font:400 14px/20px var(--font);color:var(--body);margin:0}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-sm);margin-top:var(--s-lg)}
.quick div{background:var(--canvas-soft);border-radius:var(--r-md);padding:var(--s-md)}
.quick span{display:block;font:400 12px/16px var(--font);color:var(--mute)}
.quick b{display:block;font:600 14px/20px var(--font);margin-top:2px}
.d-h{font:600 15px/22px var(--font);margin:var(--s-xl) 0 var(--s-sm)}
.d-h small{font:400 12px/16px var(--font);color:var(--mute);margin-left:var(--s-sm)}
.d-empty{font:400 14px/20px var(--font);color:var(--body);margin:0}
.outbox{background:var(--primary-pale);border-radius:var(--r-lg);padding:var(--s-md) var(--s-lg);font:400 14px/20px var(--font);color:var(--ink-deep)}
.outbox b{display:block;font:600 12px/16px var(--font);margin-bottom:4px}
.d-path{display:block;width:100%;text-align:left;background:var(--ink);color:var(--on-dark-mute);border:0;border-radius:var(--r-lg);padding:var(--s-md) var(--s-lg);font:400 13px/19px var(--font)}
.d-path b{display:block;font:600 14px/20px var(--font);color:var(--primary);margin-bottom:2px}
.d-path em{font-style:normal;color:var(--canvas);font-weight:600}
.rec{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-md);padding:var(--s-md) 0;border-top:1px solid var(--canvas-soft);text-decoration:none}
.rec img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--canvas-soft)}
.rec b{font:600 14px/20px var(--font)}
.rec:hover b{text-decoration:underline}
.rec .why{display:block;margin:2px 0 6px;font:400 13px/18px var(--font);color:var(--body)}
.rec-pills{display:flex;gap:4px;flex-wrap:wrap}
details.more{margin-top:var(--s-md);border-top:1px solid var(--canvas-soft);padding-top:var(--s-md)}
details.more summary{cursor:pointer;font:600 14px/20px var(--font);color:var(--body)}
table.facts{width:100%;border-collapse:collapse;font:400 14px/20px var(--font)}
.facts td{padding:var(--s-sm) 0;border-top:1px solid var(--canvas-soft);vertical-align:top}
.facts td:first-child{color:var(--mute);width:78px;white-space:nowrap;padding-right:var(--s-sm)}
.tools-sub{display:block;font:400 12px/16px var(--font);color:var(--mute);margin-top:2px}
.d-buy{display:flex;align-items:center;gap:var(--s-lg);padding:var(--s-md) var(--s-xl) calc(var(--s-md) + env(safe-area-inset-bottom));border-top:1px solid var(--canvas-soft);background:var(--canvas)}
.d-buy > div{flex:none}
.price.big b{font-size:24px}
.buy-note{display:block;font:600 12px/16px var(--font);color:var(--positive-deep);margin-top:4px}
.d-buy .btn{flex:1}
@media (max-width:767px){
  .drawer{top:auto;left:0;width:100%;height:88vh;border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(104%)}
  .d-scroll{padding:0 var(--s-lg) var(--s-lg)}
  .d-buy{padding:var(--s-md) var(--s-lg) calc(var(--s-md) + env(safe-area-inset-bottom));gap:var(--s-md)}
  .d-buy .btn{padding:var(--s-md) var(--s-lg);font-size:15px}
  .drawer h2{font-size:19px;line-height:27px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- v3：組合價（學習路徑卡片與 popup 共用） ---------- */
.pp{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end;text-align:right}
.pp-k{font:400 13px/18px var(--font)}
.pp-now{font:900 20px/1 var(--font)}
.pp-was{font:400 13px/18px var(--font);color:var(--mute)}
.pp-save{border-radius:var(--r-pill);padding:2px 8px;background:var(--primary);color:var(--on-primary);font:600 12px/16px var(--font)}

/* ---------- v3：學習路徑 popup（桌機置中／手機底部 sheet），機制與抽屜相同 ---------- */
.modal{position:fixed;z-index:45;left:50%;top:50%;width:min(640px,calc(100% - 48px));max-height:min(86vh,820px);display:flex;flex-direction:column;background:var(--canvas);border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(14,15,12,.3);transform:translate(-50%,-46%);opacity:0;visibility:hidden;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s .25s}
.modal.open{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.modal.under{filter:brightness(.6)}
.modal h2{font:900 26px/34px var(--font);margin:var(--s-xs) 0 var(--s-xs)}
.m-steps{list-style:none;margin:0;padding:0}
.m-step{display:grid;grid-template-columns:28px 96px minmax(0,1fr) auto;gap:var(--s-md);align-items:center;padding:var(--s-md) 0;border-top:1px solid var(--canvas-soft);text-decoration:none}
.m-steps li:first-child .m-step{border-top:0}
.m-step .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--primary);font:600 14px/28px var(--font);text-align:center}
.m-step img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--canvas-soft)}
.m-txt b{display:block;font:600 15px/21px var(--font)}
.m-step:hover .m-txt b{text-decoration:underline}
.m-txt .why{display:block;font:400 13px/18px var(--font);color:var(--body);margin-top:2px}
.m-meta{display:block;font:400 12px/16px var(--font);color:var(--mute);margin-top:4px}
.m-price{text-align:right}
.m-price b{font-size:16px}
.m-price s{display:block;margin:4px 0 0}
.m-sum{margin-top:var(--s-lg);background:var(--canvas-soft);border-radius:var(--r-lg);padding:var(--s-md) var(--s-lg)}
.m-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-md);padding:6px 0;font:400 14px/20px var(--font)}
.m-row small{display:block;font:400 12px/16px var(--font);color:var(--mute)}
.m-row s{color:var(--mute)}
.m-row.total b{font:900 22px/1 var(--font)}
.m-row.save b{background:var(--primary);border-radius:var(--r-sm);padding:2px 8px;font:600 14px/20px var(--font)}
.m-note{font:400 12px/16px var(--font);color:var(--mute);margin:var(--s-sm) 0 0}
.modal .d-buy .pp{justify-content:flex-start;text-align:left}
@media (max-width:767px){
  .modal{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(104%);opacity:1}
  .modal.open{transform:none}
  .modal h2{font-size:21px;line-height:28px}
  .m-step{grid-template-columns:24px 72px minmax(0,1fr);gap:var(--s-sm) var(--s-md)}
  .m-step .n{width:24px;height:24px;line-height:24px;font-size:12px}
  .m-step img{width:72px}
  .m-price{grid-column:3;text-align:left}
  .m-price s{display:inline;margin-left:6px}
  .modal .d-buy{flex-wrap:wrap}
  .modal .d-buy > div{flex:1 1 100%}
}

/* ---------- v3：依工具（每列一條單行橫向 rail） ---------- */
.trow .group-head{margin-bottom:var(--s-md)}
.trow .group-head h3 .hn{font:600 18px/31px var(--font);color:var(--body)}
.trow .group-head .arrows{margin-left:auto}
.trow .arrow{width:36px;height:36px;font-size:15px}
.trow-sub{flex:none;margin:0 0 var(--s-md);-webkit-mask-image:none;mask-image:none;flex-wrap:nowrap}
.fb-sub{padding-top:2px}
.fb-sub .fb-label{white-space:nowrap}
@media (max-width:767px){
  .trow .group-head h3 .hn{font-size:16px}
  .trow-sub{margin:0 calc(-1 * var(--s-lg)) var(--s-md);padding:2px var(--s-lg)}
}

/* 程度階梯：桌機 入門｜進階｜高階 三欄並排，每欄是直向清單（一眼看完，不用往下滑找） */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;gap:0 var(--s-lg)}
.lvcol{display:grid;grid-row:span 2;grid-template-rows:subgrid;background:var(--canvas);border-radius:var(--r-xl)}
/* 欄標題（程度＋定義）捲動時黏在篩選列下方；--fbh 由 app.js 依篩選列實際高度設定。
   sticky 不能有 overflow:hidden 的祖先，所以圓角改由標題自己帶 */
.lvhead{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--fbh,0px));z-index:10;background:var(--canvas);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s-lg) var(--s-lg) var(--s-md);border-bottom:1px solid var(--canvas-soft)}
.lvhead h3{display:flex;align-items:center;gap:var(--s-sm);margin:0;font:600 15px/22px var(--font)}
.lvhead .n{margin-left:auto;color:var(--body);font-weight:400;font-size:14px}
.lvhead .lv-hint{margin:var(--s-sm) 0 0;font:400 13px/19px var(--font);color:var(--body)}
.stairs{display:inline-flex;align-items:flex-end;gap:2px;height:16px;flex:none}
.stairs i{width:5px;border-radius:1px;background:var(--canvas-soft)}
.stairs i:nth-child(1){height:6px}.stairs i:nth-child(2){height:11px}.stairs i:nth-child(3){height:16px}
.stairs i.on{background:var(--ink)}
.lvlist{display:flex;flex-direction:column;padding:var(--s-xs) var(--s-sm) var(--s-sm)}
.lv-empty{margin:var(--s-md) var(--s-sm);padding:var(--s-md);border:1px dashed var(--line);border-radius:var(--r-md);font:400 13px/19px var(--font);color:var(--mute)}
.lrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-md);padding:var(--s-sm);border-radius:var(--r-lg);text-decoration:none;transition:background .15s}
.lrow + .lrow{border-top:1px solid var(--canvas-soft)}
.lrow:hover{background:var(--canvas-soft)}
.lrow .thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--canvas-soft)}
.lrow .badge{top:4px;left:4px;padding:1px 6px;font-size:10px;line-height:14px}
.lrow .body{display:flex;flex-direction:column;gap:2px;min-width:0}
.lrow .title{font:600 14px/20px var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lrow:hover .title{text-decoration:underline}
.lrow .make{font-size:12px;line-height:17px}
.lrow .foot{display:flex;align-items:baseline;gap:var(--s-sm);margin-top:auto;padding-top:4px}
.lrow .price b{font-size:14px}
.lrow .price s{font-size:12px}
.lrow .dur{font:400 12px/16px var(--font);color:var(--mute)}
/* 平板：欄變窄，縮圖改放上面 */
@media (min-width:768px) and (max-width:1023px){.lrow{grid-template-columns:1fr}.lrow .thumb img{border-radius:var(--r-md)}}
/* 手機：三階上下堆疊，維持橫式小卡；右下角有程度跳轉 */
@media (max-width:767px){
  .ladder{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s-md)}
  .lvcol{display:block}
  .lvhead{padding:var(--s-md) var(--s-lg)}
  .lvhead .lv-hint{font-size:12px;line-height:17px}
  .lrow{grid-template-columns:38% minmax(0,1fr)}
  .lrow .title{font-size:15px;line-height:21px}
  .lrow .make{font-size:13px;line-height:18px}
  .lrow .price b{font-size:15px}
}

.lvjump{display:none}
@media (max-width:767px){
  .lvjump{position:fixed;right:max(var(--s-lg),env(safe-area-inset-right));bottom:calc(var(--s-lg) + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
  .lvjump.show{opacity:1;transform:none;pointer-events:auto}
  .lvjump button{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);min-width:76px;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-md);background:transparent;color:var(--on-dark);font:600 14px/20px var(--font)}
  .lvjump button small{font-weight:400;color:var(--on-dark-mute)}
  .lvjump button[aria-current=true]{background:var(--primary);color:var(--on-primary)}
  .lvjump button[aria-current=true] small{color:var(--on-primary)}
  .lvjump button:disabled{opacity:.4;cursor:default}
  html.lock .lvjump{display:none}
}

/* 工具階層：大工具（生態）明顯大於單點工具 */
.chip.sm{padding:2px 10px;font:500 12px/18px var(--font);border-color:var(--line);background:transparent;color:var(--body)}
.chip.sm small{font-size:11px}
.chip.sm[aria-pressed=true]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.fb-sub{padding-left:var(--s-lg);border-left:2px solid var(--ink);margin-left:var(--s-sm)}
.fb-sub .fb-label{font-weight:500;color:var(--mute)}
@media (max-width:767px){.fb-sub{padding-left:var(--s-md)}}


/* 第二、三層的 chip 文字對齊第一層分頁文字（seg 內距 4px + 按鈕內距 24px，chip 框 1px + 內距 12px） */
.fb-mid,.fb-tools3{padding-left:15px}
/* 第三層（依應用／依技能下的工具）：灰色、次要；層級靠字級、字重、細框區分，不靠低對比 */
.fb-tools3 .fb-label{color:var(--body);font-weight:600;font-size:13px}
/* 選了應用／技能後，工具列往下展開，chip 依序淡入 */
.fb-tools3.reveal{overflow:hidden;animation:fbReveal .32s cubic-bezier(.2,.8,.2,1) both}
.fb-tools3.reveal .fb-label,.fb-tools3.reveal .chip{animation:chipIn .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(80ms + var(--i,0) * 40ms)}
.fb-tools3.reveal .fb-label{animation-delay:40ms}
@keyframes fbReveal{from{opacity:0;max-height:0;margin-top:0}to{opacity:1;max-height:60px}}
@keyframes chipIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fb-tools3.reveal,.fb-tools3.reveal .fb-label,.fb-tools3.reveal .chip{animation:none}}
.fb-tools3 .chip{border-color:var(--line);background:transparent;color:var(--mute);font-weight:500;font-size:13px}
.fb-tools3 .chip small{color:var(--mute)}
.fb-tools3 .chip[aria-pressed=true]{background:var(--mute);border-color:var(--mute);color:var(--canvas)}
.fb-tools3 .chip[aria-pressed=true] small{color:var(--canvas)}
@media (max-width:767px){.fb-mid,.fb-tools3{padding-left:7px}}