/* 任學 設計代幣（design tokens）
   網站與規格頁共用。改色、改字級，都只改這一個檔案。
   色彩延伸自教案 PDF 的清新明亮色票；文字用色已逐一檢查對比，見「設計規格.html」。 */

:root{
  color-scheme:light;

  /* ---- 品牌色：每個色相三個層次（鮮色、淺底、深字） ---- */
  --mint:#4CBF93;   --mint-t:#E4F7EF;   --mint-d:#1E8560;   --mint-text:#17704F;
  --sky:#4AA8DC;    --sky-t:#E6F4FB;    --sky-d:#1F6F9E;    --sky-text:#1F6F9E;
  --peach:#F4A04C;  --peach-t:#FFF0DD;  --peach-d:#B8620E;  --peach-text:#9A520B;
  --lemon:#F7CB45;  --lemon-t:#FFF8D9;  --lemon-d:#8F6A00;  --lemon-text:#7A5B00;
  --coral:#F08A7A;  --coral-t:#FDEAE6;  --coral-d:#BF4A3A;  --coral-text:#A63D2E;

  /* ---- 中性色 ---- */
  --ink:#2F4A55;        /* 主要文字 */
  --ink-2:#546B74;      /* 次要文字（對比 5.5:1，不要用 --gray 當內文） */
  --gray:#6F8790;       /* 只用在裝飾與大字（對比 3.7:1） */
  --line:#CFE3DC;       /* 分隔線、卡片外框 */
  --field:#7C9A8F;      /* 輸入框與可操作元件的外框（對比 3:1） */
  --paper:#FBFDF9;      /* 頁面底色 */
  --white:#FFFFFF;
  --unlit:#D5E3DD;      /* 尚未完成的積木與進度底色 */

  /* ---- 語意用途 ---- */
  --bg:var(--paper);
  --surface:var(--white);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --primary:var(--mint-d);          /* 主要按鈕：白字 4.6:1 */
  --primary-hover:var(--mint-text); /* 滑過：白字 6.1:1 */
  --on-primary:var(--white);
  --focus-ring:#1F6F9E;            /* 焦點外框：實色，對白底與淺色底都 ≥ 4.5:1，也能在「強制色彩」下顯示 */
  --focus:0 0 0 3px rgba(74,168,220,.5);   /* 舊的柔光，只當輔助，不能單獨當焦點標示 */
  --ok-bg:var(--mint-t);  --ok-text:var(--mint-text);
  --no-bg:var(--coral-t); --no-text:var(--coral-text);

  /* ---- 四層學習：懂、通、練、深 ---- */
  --layer-1:var(--mint);   --layer-1-t:var(--mint-t);   --layer-1-text:var(--mint-text);
  --layer-2:var(--sky);    --layer-2-t:var(--sky-t);    --layer-2-text:var(--sky-text);
  --layer-3:var(--peach);  --layer-3-t:var(--peach-t);  --layer-3-text:var(--peach-text);
  --layer-4:var(--lemon);  --layer-4-t:var(--lemon-t);  --layer-4-text:var(--lemon-text);

  /* ---- 三條路線：Learner、Earner、Leader ---- */
  --route-learner:var(--mint);  --route-learner-t:var(--mint-t);  --route-learner-text:var(--mint-text);
  --route-earner:var(--sky);    --route-earner-t:var(--sky-t);    --route-earner-text:var(--sky-text);
  --route-leader:var(--peach);  --route-leader-t:var(--peach-t);  --route-leader-text:var(--peach-text);

  /* ---- 字型與字級（手機為基準，寬螢幕再放大） ---- */
  --font-brand:"Huninn","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font-body:-apple-system,"SF Pro Text","Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --fs-caption:.875rem;   /* 14px，最小字級，不再往下 */
  --fs-small:.9375rem;    /* 15px */
  --fs-body:1.0625rem;    /* 17px */
  --fs-lead:1.1875rem;    /* 19px */
  --fs-h3:1.3125rem;      /* 21px */
  --fs-h2:1.625rem;       /* 26px */
  --fs-h1:2rem;           /* 32px */
  --lh-body:1.8;       /* 中文長文要鬆，才不擠 */
  --lh-head:1.4;
  --measure:36em;      /* 閱讀欄寬上限，約 36 個中文字 */

  /* ---- 形狀與間距 ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --tap:2.75rem;       /* 44px，可點選元件的最小高度與寬度 */
  --safe-b:env(safe-area-inset-bottom,0px);   /* 手機底部安全區（瀏覽器橫條、Home 指示條） */
  --safe-t:env(safe-area-inset-top,0px);
  --shadow-1:0 1px 2px rgba(47,74,85,.08),0 4px 12px rgba(47,74,85,.06);

  /* ---- 動態 ---- */
  --dur-fast:150ms; --dur-base:250ms; --dur-pop:400ms;
  --ease:cubic-bezier(.2,.8,.2,1);
}

@media (min-width:720px){
  :root{ --fs-body:1.125rem; --fs-lead:1.25rem; --fs-h3:1.375rem; --fs-h2:1.875rem; --fs-h1:2.375rem; }
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-pop:0ms; }
}

html{ font-size:100%; -webkit-text-size-adjust:100%; }  /* 根字級維持 16px，rem 才準確；讀者調大瀏覽器字體時會一起放大 */
body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); }
:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
@media (forced-colors:active){ :focus-visible{ outline:3px solid Highlight; } }

@font-face{font-family:"Huninn";src:url("fonts/huninn.woff2") format("woff2");font-weight:400;font-display:swap;}
/* 任學：基礎。色彩、字級、間距都來自 tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scroll-padding-bottom:calc(96px + var(--safe-b))}
@media (min-width:720px){html{scroll-padding-top:96px;scroll-padding-bottom:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;
  line-break:strict;overflow-wrap:break-word;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
@supports (word-break:auto-phrase){body{word-break:auto-phrase}}
/* 不支援「依詞斷行」的瀏覽器（Safari、Firefox）：腳本在詞與詞之間放了斷點，這裡禁止在詞的中間斷開，太長的詞才例外 */
.phrase-js body{word-break:keep-all;overflow-wrap:anywhere}
.storage-notice{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-md);background:var(--lemon-t);color:var(--lemon-text);font-size:var(--fs-small)}
/* 背景的柔和色塊：和教案 PDF 一樣的氣氛。用背景圖層畫，不會讓頁面變寬 */
body{background:
  radial-gradient(circle 13px at calc(100% - 90px) 96px,var(--lemon) 12.5px,transparent 13px),
  radial-gradient(circle 230px at calc(100% + 70px) -50px,var(--mint-t) 229px,transparent 230px),
  var(--bg)}
/* 手機的版面很窄，黃色小圓點會落在麵包屑與標題的字上，只在寬一點的螢幕畫 */
@media (max-width:719px){body{background:radial-gradient(circle 230px at calc(100% + 70px) -50px,var(--mint-t) 229px,transparent 230px),var(--bg)}}
img,svg{max-width:100%}
/* 標題的斷行：依標點切成幾段，每段不拆開（建置時加上），整段比一行長才在段裡面斷 */
.seg{display:inline-block;max-width:100%;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,h4{font-family:var(--font-brand);font-weight:400;line-height:var(--lh-head);color:var(--ink);margin:0}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 .8em}
/* 斷行：內文避免最後一行只剩一兩個字；標題與短句兩邊勻稱 */
p,li,td,dd,summary,figcaption,.sub,.lead,.tc-d,.cc-d,.door-d,.it-d,.badge-d,.cele-d,.pr-opt{text-wrap:pretty}
h1,h2,h3,h4,.layer-t,.tc-t,.door-t,.cc-t,.callout-t,.step-t,.card-t,.pr-q,.cele-t,.it-t{text-wrap:balance}
a{color:var(--sky-text);text-underline-offset:.2em}
a:hover{color:var(--mint-text)}
ul,ol{margin:0 0 .8em;padding-left:1.3em}
button{font:inherit;color:inherit}
strong,b{font-weight:600}
.lead{font-size:var(--fs-lead);color:var(--ink-2);margin:.4em 0 1em;max-width:var(--measure)}
.sub{font-size:var(--fs-small);color:var(--ink-2);line-height:1.7}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-md);text-decoration:none;transform:translateY(-250%)}
.skip:focus{transform:translateY(calc(8px + var(--safe-t)));outline-color:var(--bg)}
[hidden]{display:none!important}
/* 沒有 JavaScript 時，整頁仍然可以讀 */
.no-js .js-only{display:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.88)}100%{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 版面：頂列、分頁列、頁面容器、頁尾 */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:calc(8px + var(--safe-t)) 16px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:var(--tap);margin-right:auto}
.brand img{display:block;border-radius:9px}
.brand-name{font-family:var(--font-brand);font-size:1.375rem;line-height:1}
.topnav{display:none}
.search-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--ink-2);text-decoration:none}
.search-btn:hover{background:var(--mint-t);color:var(--mint-text)}
.page{width:100%;max-width:980px;margin:0 auto;padding:16px 16px 24px;flex:1}
.footer{padding:8px 16px calc(96px + var(--safe-b));text-align:center;font-size:var(--fs-caption);color:var(--ink-2)}
.footer p{margin:0 0 .3em}
.footer a{color:var(--ink-2)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--white);border-top:1px solid var(--line);padding:6px 8px calc(6px + var(--safe-b))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tap);padding:6px 4px;border-radius:var(--r-md);color:var(--ink-2);text-decoration:none;font-size:var(--fs-caption)}
.tabbar a[aria-current="page"]{color:var(--mint-text);background:var(--mint-t);font-weight:600}
.ic{flex:none}
@media (min-width:720px){
  .topbar{padding:12px max(24px,calc((100vw - 980px)/2 + 24px))}
  .topnav{display:flex;gap:4px;margin-right:auto}
  .brand{margin-right:24px}
  .topnav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:var(--fs-small)}
  .topnav a:hover{background:var(--mint-t)}
  .topnav a[aria-current="page"]{background:var(--mint-t);color:var(--mint-text);font-weight:600}
  .tabbar{display:none}
  .page{padding:32px 24px 32px}
  .footer{padding:16px 24px 40px}
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--ink-2);margin:0 0 12px}
/* 麵包屑的字小，點選範圍用 padding 撐到 44px，不改變版面高度 */
.crumbs a{color:var(--ink-2);display:inline-block;padding:10px 6px;margin:-10px -6px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;margin:24px 0}
.panel>h2{margin-bottom:6px}
@media (min-width:720px){.panel{padding:28px}}
section+section{margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;font:inherit;font-size:var(--fs-body);cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);line-height:1.2;text-align:center}
.btn.p{background:var(--primary);color:var(--on-primary)}
.btn.p:hover{background:var(--primary-hover);color:var(--on-primary)}
.btn.s{background:var(--white);color:var(--mint-text);border-color:var(--field)}
.btn.s:hover{background:var(--mint-t);color:var(--mint-text)}
.btn.g{background:transparent;color:var(--ink-2)}
.btn.g:hover{background:var(--mint-t)}
.btn.danger{color:var(--coral-text);border-color:var(--coral-d)}
.btn.danger:hover{background:var(--coral-t);color:var(--coral-text)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.file-btn{cursor:pointer}
.chip{display:inline-flex;align-items:center;font-size:var(--fs-caption);padding:2px 12px;border-radius:var(--r-pill);background:var(--mint-t);color:var(--mint-text);font-weight:500;line-height:1.7}
.chip-min{background:var(--peach-t);color:var(--peach-text)}
.chips{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.empty{padding:28px 8px;text-align:center}

/* 書城：入口首頁、書架、書頁、目錄、積木與進度環、清單 */
.hue-mint{--h:var(--mint-t);--hd:var(--mint-text);--hb:var(--mint)}
.hue-sky{--h:var(--sky-t);--hd:var(--sky-text);--hb:var(--sky)}
.hue-peach{--h:var(--peach-t);--hd:var(--peach-text);--hb:var(--peach)}
.hue-lemon{--h:var(--lemon-t);--hd:var(--lemon-text);--hb:var(--lemon)}
.hue-coral{--h:var(--coral-t);--hd:var(--coral-text);--hb:var(--coral)}

/* ---------- 首頁：漸進式。第一屏介紹任學，往下滑，書架、速查、練習一段一段出現 ---------- */
/* 捲動浮現：只有有 JavaScript、而且沒有要求「減少動態」的人才會先藏起來（html 上有 rv-on）；其他人一開始就看得到全部 */
.rv-on [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv-on [data-rv].in{opacity:1;transform:none}
/* 頂列底下的細線：捲到哪裡了 */
body[data-page="home"] .topbar::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--sp,0) * 100%);background:var(--mint);border-radius:0 3px 3px 0}

.story{margin-top:-16px;--bars:calc(132px + var(--safe-t) + var(--safe-b))}
@media (min-width:720px){.story{--bars:104px}}
/* 每一段是一個「場景」：滿版的色帶，內容收在欄寬裡 */
.stage{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.stage-in{max-width:980px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.stage-in{padding:0 24px}}
.page-home>.story>section+section{margin-top:0}

/* 第一屏：標語、介紹、搜尋、四個入口。書架在下面 */
.st-hero{display:flex;flex-direction:column;min-height:calc(100vh - var(--bars));min-height:calc(100svh - var(--bars));padding:20px 0 4px}
.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:24px}
.hero-copy{min-width:0}
@media (min-width:720px){.hero-grid{grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:56px}}
.hero-copy h1{font-size:clamp(var(--fs-h3),6.8vw,calc(var(--fs-h1) * 1.2));line-height:1.3;margin:0 0 10px}
.nb{white-space:nowrap}
.hero-p{margin:0 0 14px;font-size:var(--fs-body);line-height:1.8;color:var(--ink-2);max-width:var(--measure)}
.hero-points{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-points a{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;border-radius:999px;background:var(--mint-t);color:var(--mint-text);font-size:var(--fs-small);font-weight:600;text-decoration:none}
.hero-points a:hover{background:var(--mint);color:var(--ink)}
.hero-points li:nth-child(2) a{background:var(--sky-t);color:var(--sky-text)}
.hero-points li:nth-child(3) a{background:var(--peach-t);color:var(--peach-text)}
.hero-search{margin:0 0 12px}
.hero-go{min-height:40px;padding:0 18px;flex:none}
.hero-art{display:none}
@media (min-width:720px){.hero-art{display:block}}
.hero-art svg{display:block;width:150px;height:auto;margin:0 auto}
.hero-art rect{fill:var(--layer-1);transition:fill .5s var(--ease)}
.hero-art .hb2{fill:var(--layer-2)}.hero-art .hb3{fill:var(--layer-3)}.hero-art .hb4{fill:var(--layer-4)}
/* 積木一塊一塊亮起：全站唯一的招牌動態，放在第一屏 */
.rv-on .hero-art:not(.in) rect{fill:var(--unlit)}
.rv-on .hero-art.in .hb2{transition-delay:.5s}.rv-on .hero-art.in .hb3{transition-delay:.9s}.rv-on .hero-art.in .hb4{transition-delay:1.3s}
.cue{align-self:center;display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);padding:0 14px;color:var(--ink-2);text-decoration:none;font-size:var(--fs-small)}
.cue:hover{color:var(--mint-text)}
@media (prefers-reduced-motion:no-preference){.cue .ic{animation:nudge 1.8s var(--ease) infinite}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.door{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:8px 12px;border-radius:var(--r-lg);border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.door:hover{background:var(--mint-t);border-color:var(--mint);color:var(--ink)}
.door-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint-t);color:var(--mint-text)}
.doors li:nth-child(2) .door-ic{background:var(--sky-t);color:var(--sky-text)}
.doors li:nth-child(3) .door-ic{background:var(--peach-t);color:var(--peach-text)}
.doors li:nth-child(4) .door-ic{background:var(--lemon-t);color:var(--lemon-text)}
.door-t{font-weight:600;font-size:var(--fs-small);line-height:1.4}
@media (min-width:720px){.doors{grid-template-columns:repeat(4,minmax(0,1fr))}.door{min-height:64px;padding:10px 14px}}

/* 要先問一聲的切換（投影模式）：就長在按鈕下面，不跳視窗 */
.ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--peach-t);color:var(--ink)}
.ask-t{flex:1 1 220px;margin:0;font-size:var(--fs-small);line-height:1.7}
.ask-t strong{display:block;color:var(--peach-text)}
.ask .btn{min-height:40px;padding:0 16px;font-size:var(--fs-small)}

.continue{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r-xl);background:var(--lemon-t)}
.continue-main{flex:1;min-width:200px}
.continue-k{font-size:var(--fs-caption);color:var(--lemon-text);margin:0}
.continue-t{font-weight:600;margin:0}
.continue-s{font-size:var(--fs-small);color:var(--ink-2);margin:0}
.continue .btn{flex:none}

/* 往下的每一段：不同顏色的場景。書架像一張從下面升起的紙，其餘是柔和的色帶 */
.st-shelf{background:var(--surface);border-radius:28px 28px 0 0;box-shadow:0 -10px 28px rgba(47,74,85,.07);padding:30px 0 32px}
.st-quick{background:var(--mint-t);padding:30px 0 28px}
.st-tools{background:var(--peach-t);padding:30px 0 28px}
.st-mood{background:var(--sky-t);padding:30px 0 30px}
.st-about{background:var(--surface);padding:30px 0 calc(100px + var(--safe-b))}
@media (min-width:720px){.st-shelf,.st-quick,.st-tools,.st-mood{padding-block:44px}.st-about{padding:44px 0 56px}}
.page-home{padding-bottom:0}
.page-home+.footer{display:none}
.sec-h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px}
.sec-h2 h2,.sec-h2-t{font-size:var(--fs-h2)}
.sec-h2-t{margin:0 0 4px}
.sec-lead{margin:0 0 16px;color:var(--ink-2);font-size:var(--fs-small);line-height:1.7;max-width:var(--measure)}
.sec-n,.sec-link{font-size:var(--fs-caption);color:var(--ink-2)}
.sec-link{display:inline-flex;align-items:center;min-height:var(--tap);margin:-10px 0}

/* 書架：一書一列。小封面（色塊＋手繪小圖示）、書名、一句話、一行資訊；進度是卡片底邊的細線 */
.shelf:focus,.st-shelf:focus{outline:0}
.book-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.book-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;height:100%;padding:12px 12px 14px 14px;border-radius:var(--r-xl);color:var(--ink);text-decoration:none;background:var(--white);border:1.5px solid var(--line);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease)}
a.book-card:hover{border-color:var(--hb,var(--mint));box-shadow:var(--shadow-1);color:var(--ink)}
.book-card .tile{width:56px;height:56px;border-radius:16px}
.bc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bc-t{font-family:var(--font-brand);font-size:var(--fs-lead);line-height:1.35}
.bc-d{font-size:var(--fs-small);color:var(--ink-2);line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:var(--fs-caption);color:var(--ink-2);line-height:1.7}
.bc-cat{padding:0 10px;border-radius:999px;border:1.5px solid var(--hb,var(--mint));color:var(--hd,var(--mint-text));font-weight:600}
.bc-serial{padding:0 10px;border-radius:999px;background:var(--lemon-t);color:var(--lemon-text);font-weight:600}
.bc-prog-t{color:var(--hd,var(--mint-text));font-weight:600}
.bc-prog-t[data-started="0"]{display:none}
.bc-go{flex:none;display:grid;color:var(--ink-2)}
.bc-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--unlit)}
.bc-bar::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--hb,var(--mint));border-radius:0 5px 5px 0;transition:width .8s var(--ease)}
@media (max-width:480px){.bc-d{-webkit-line-clamp:1}}

.soon{margin-top:18px}
.soon-h{margin:0 0 6px;font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.soon-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:760px){.soon-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.soon-row{display:flex;flex-direction:column;gap:0;padding:10px 14px;border-radius:var(--r-lg);border:1.5px dashed var(--field);color:var(--ink-2)}
.soon-t{font-weight:600;color:var(--ink)}
.soon-d{font-size:var(--fs-caption);line-height:1.6}

/* 工作中快速查、試算與練習：手機左右滑，寬螢幕排成格子 */
.hscroll{list-style:none;margin:0 -16px;padding:2px 16px 10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:16px;-webkit-overflow-scrolling:touch}
.hscroll>li{flex:none;width:min(44vw,184px);scroll-snap-align:start}
.qcard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;padding:12px 14px;border-radius:var(--r-lg);background:var(--white);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast) var(--ease)}
.qcard:hover{border-color:var(--mint);color:var(--ink)}
.qk{font-size:var(--fs-caption);font-weight:600;line-height:1.6;padding:0 10px;border-radius:999px;background:var(--mint-t);color:var(--mint-text)}
.qk-速查表 .qk{background:var(--coral-t);color:var(--coral-text)}
.qk-名詞表 .qk{background:var(--sky-t);color:var(--sky-text)}
.qk-試算 .qk{background:var(--peach-t);color:var(--peach-text)}
.qt{font-family:var(--font-brand);font-size:var(--fs-body);line-height:1.35}
.qb{font-size:var(--fs-caption);color:var(--ink-2);line-height:1.5}
@media (min-width:720px){
  .hscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;margin:0;padding:2px 0 0}
  .hscroll>li{width:auto}
  .swipe-hint{display:none}
}

/* 怎麼舒服，就怎麼讀：一鍵情境 */
.mood-chips{display:flex;flex-wrap:wrap;gap:8px}
.mood-hint{margin:10px 0 0;min-height:1.7em}
.a-links{margin:0;font-size:var(--fs-small);display:flex;flex-wrap:wrap;align-items:center;color:var(--ink-2)}
.a-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px}

/* 書頁：書名一列、一句話、一行資訊、開始讀；目錄緊接著，建議讀法收在目錄後面 */
.book-head{margin-bottom:4px}
.bh-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.tile{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-xl);background:var(--h,var(--mint-t));color:var(--hd,var(--mint-text))}
.bh-top .tile{width:52px;height:52px;border-radius:16px}
/* 可愛插畫封面：色塊放大一點，插畫幾乎填滿，下方一圈柔和陰影 */
.tile .cover-img{width:100%;height:100%;padding:3px;box-sizing:border-box;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(47,74,85,.22))}
.book-card .tile.tile-art{width:68px;height:68px;border-radius:18px}
.bh-top .tile.tile-art{width:64px;height:64px;border-radius:18px}
.bh-top h1{flex:1;min-width:0;font-size:clamp(1.5rem,5.5vw,2.375rem);line-height:1.3}
.book-head .lead{margin:0 0 6px;font-size:var(--fs-body)}
.bh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;font-size:var(--fs-small);color:var(--ink-2);line-height:1.7}
.bh-meta .bc-serial{font-size:var(--fs-caption)}
.book-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 6px}
.book>section:first-of-type{margin-top:22px}
.bh-prog:has([data-started="0"]){display:none}
.bh-prog{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.bh-prog .ring-bg{stroke:var(--h,var(--mint-t))}
.tp-text{font-size:var(--fs-small);color:var(--ink-2)}
.serial-note{font-size:var(--fs-small);color:var(--lemon-text);background:var(--lemon-t);border-radius:var(--r-md);padding:8px 14px;margin:10px 0 0}
.chip-serial{background:var(--lemon-t);color:var(--lemon-text)}
.badge-serial{margin-left:10px;font-size:var(--fs-caption);padding:0 10px;border-radius:999px;background:var(--lemon-t);color:var(--lemon-text);font-family:var(--font-body);vertical-align:.1em}
.part-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:6px 0 10px;padding:10px 14px;border-radius:var(--r-md);background:var(--peach-t);color:var(--peach-text);font-size:var(--fs-small)}
.part-note .ext-tag{margin-right:0}

/* 建議讀法：整塊收起來，放在目錄後面 */
.rd-panel{margin:28px 0 0;padding:0}
.rd-panel>summary{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:var(--tap);padding:12px 18px;cursor:pointer;list-style:none}
.rd-panel>summary::-webkit-details-marker{display:none}
.rd-panel>summary h2{font-size:var(--fs-h3)}
.rd-panel>summary .sub{flex:1;min-width:10em}
.rd-panel>summary::after{content:"+";margin-left:auto;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint-t);color:var(--mint-text);font-weight:600}
.rd-panel[open]>summary::after{content:"−"}
.rd-panel .rd-groups{padding:0 14px 16px;margin-top:0}
@media (min-width:720px){.rd-panel>summary{padding:14px 24px}.rd-panel .rd-groups{padding:0 20px 20px}}

.rd-groups{display:grid;gap:10px;margin-top:12px}
.rd{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.rd>summary{display:flex;align-items:center;min-height:var(--tap);padding:8px 16px;cursor:pointer;font-weight:600;list-style:none}
.rd>summary::-webkit-details-marker{display:none}
.rd>summary::after{content:"+";margin-left:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint-t);color:var(--mint-text);font-weight:600}
.rd[open]>summary::after{content:"−"}
.rd-list{list-style:none;margin:0;padding:0 16px 14px;display:grid;gap:14px}
.rd-list li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-start}
.rd-k{flex:none;min-width:5.5em;text-align:center;font-size:var(--fs-small);font-weight:600;padding:2px 12px;border-radius:999px;background:var(--mint-t);color:var(--mint-text)}
.rd-k.role-earner{background:var(--sky-t);color:var(--sky-text)}
.rd-k.role-leader{background:var(--peach-t);color:var(--peach-text)}
.rd-b{flex:1;min-width:min(100%,220px);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.rd-sum,.rd-note{flex-basis:100%;font-size:var(--fs-small);color:var(--ink-2)}
.rd-chip{display:inline-flex;align-items:center;min-height:var(--tap);padding:2px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;font-size:var(--fs-small)}
.rd-chip:hover{border-color:var(--mint);background:var(--mint-t);color:var(--ink)}
.rd-problems{list-style:none;margin:0;padding:0 8px 8px;display:grid}
.rd-problems a{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;align-items:baseline;padding:10px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:var(--tap)}
.rd-problems a:hover{background:var(--mint-t)}
.rp-q{font-weight:600}
.rp-c{font-size:var(--fs-small);color:var(--ink-2)}

/* 目錄 */
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc-front{margin-bottom:6px}
.toc-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:var(--tap)}
a.toc-row:hover{background:var(--h,var(--mint-t));color:var(--ink)}
.toc-n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--h,var(--mint-t));color:var(--hd,var(--mint-text));font-family:var(--font-brand);font-size:1.125rem}
.toc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.toc-t{font-weight:600}
.toc-d{font-size:var(--fs-small);color:var(--ink-2)}
.toc-m{flex:none;font-size:var(--fs-caption);color:var(--ink-2)}
.toc-row.is-done .toc-n{background:var(--hd,var(--mint-text));color:var(--bg)}
.toc .coming .toc-row{color:var(--ink-2)}
.toc .coming .toc-t{font-weight:500}
.toc .coming .toc-n,.toc-n-front{background:var(--paper);border:1.5px dashed var(--field);color:var(--ink-2)}
.toc .coming .toc-m{background:var(--lemon-t);color:var(--lemon-text);padding:0 10px;border-radius:999px}
.toc-part-t{margin:26px 0 6px;font-size:var(--fs-h3)}
.toc-part:first-of-type .toc-part-t{margin-top:14px}
@media (max-width:480px){.toc-row{flex-wrap:wrap;row-gap:4px}.toc-b{flex-basis:calc(100% - 60px)}.toc-m{margin-left:54px}}
.all-practices{margin-top:14px}
.all-practices>summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;color:var(--ink-2);font-size:var(--fs-small)}

/* 我的學習：閱讀統計與書的進度 */
.stat-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-lg);background:var(--mint-t)}
.stat-v{font-family:var(--font-brand);font-size:var(--fs-h3);color:var(--mint-text);line-height:1.35}
.stat-k{font-size:var(--fs-small);color:var(--ink-2)}
.book-mini-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.book-mini{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);background:var(--h,var(--mint-t));color:var(--ink);text-decoration:none}
a.book-mini:hover{color:var(--ink)}
.book-mini .ring-bg{stroke:var(--white)}
.bm-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.bm-t{font-family:var(--font-brand);font-size:var(--fs-lead);line-height:1.3;color:var(--hd,var(--mint-text))}
.bm-m{font-size:var(--fs-caption);color:var(--ink-2)}

.ring{display:block;flex:none}
.ring-bg{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5}
.ring-fg{fill:none;stroke:var(--hd,var(--mint-d));stroke-width:5;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.meter{flex:none;display:block}
.meter rect{fill:var(--unlit);transition:fill var(--dur-base) var(--ease)}
.meter .b1.on{fill:var(--layer-1)}.meter .b2.on{fill:var(--layer-2)}.meter .b3.on{fill:var(--layer-3)}.meter .b4.on{fill:var(--layer-4)}

.item-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.item-list a{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.item-list a:hover{background:var(--mint-t)}
.it-type{flex:none;font-size:var(--fs-caption);padding:2px 10px;border-radius:999px;font-weight:600;line-height:1.7}
.t-章,.t-概念{background:var(--sky-t);color:var(--sky-text)}
.t-速查{background:var(--coral-t);color:var(--coral-text)}
.t-互動{background:var(--peach-t);color:var(--peach-text)}
.t-工具{background:var(--mint-t);color:var(--mint-text)}
.t-教案{background:var(--lemon-t);color:var(--lemon-text)}
.it-t{flex:1;min-width:0}
.it-m{flex:none;font-size:var(--fs-caption);color:var(--ink-2)}
.it-done{flex:none;font-size:var(--fs-caption);font-weight:600;color:var(--mint-text);background:var(--mint-t);border-radius:999px;padding:0 10px}
.it-done::before{content:"✓ "}
@media (max-width:480px){.item-list a{flex-wrap:wrap}.it-t{flex-basis:calc(100% - 90px)}.it-m{margin-left:auto}}

/* 搜尋、教案頁 */
.searchbar{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 6px 0 16px;border:1.5px solid var(--field);border-radius:999px;background:var(--white);margin:6px 0 14px}
.searchbar:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.searchbar-ic{color:var(--ink-2);display:grid}
.searchbar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-body);color:var(--ink);height:46px}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .clear{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.searchbar .clear:hover{background:var(--mint-t)}
.filters{display:grid;gap:8px;margin-bottom:8px}
.fgroup{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fgroup legend{float:left;padding:0;margin-right:2px;width:2.9rem;font-size:var(--fs-small);color:var(--ink-2)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.fchip{min-height:var(--tap);padding:0 16px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);font-size:var(--fs-small);cursor:pointer;color:var(--ink)}
.fchip:hover{background:var(--mint-t)}
.fchip[aria-pressed="true"]{background:var(--mint-t);border-color:var(--mint-d);color:var(--mint-text);font-weight:600}
.count{margin:12px 0 4px}
.result-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.res-item a{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;min-height:var(--tap);transition:border-color var(--dur-fast)}
.res-item a:hover{border-color:var(--mint)}
.res-item .it-type{margin-top:2px}
.it-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.it-body .it-t{font-weight:600}
.it-d{font-size:var(--fs-small);color:var(--ink-2)}
.it-tags{font-size:var(--fs-caption);color:var(--ink-2)}
.res-item .it-m{margin-top:2px}
.res-item .it-done{margin-top:2px}
@media (max-width:600px){
  /* 手機上，已完成的項目把分鐘數與「已完成」收到第二行，標題才不會被擠成一字一行 */
  .res-item a.is-done{flex-wrap:wrap}
  .res-item a.is-done .it-body{flex:1 1 calc(100% - 72px)}
  .res-item a.is-done .it-m{margin-left:60px}
}

.topic-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.topic-progress{display:flex;align-items:center;gap:10px;flex:none}
/* 窄螢幕：進度環放到簡介下面，簡介才有足夠的寬度 */
@media (max-width:600px){.topic-head{flex-direction:column;align-items:flex-start;gap:6px}}
.tp-text{font-size:var(--fs-caption);color:var(--hd,var(--mint-text));font-weight:600}
.concept-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.concept-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast),transform var(--dur-base) var(--ease)}
.concept-card:hover{border-color:var(--hb,var(--mint));transform:translateY(-1px);color:var(--ink)}
.cc-num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--h,var(--mint-t));color:var(--hd,var(--mint-text));font-weight:600}
.cc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cc-t{font-family:var(--font-brand);font-size:var(--fs-h3);line-height:1.3}
.cc-d{font-size:var(--fs-small);color:var(--ink-2)}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px}
.route-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.role-learner{--rc:var(--mint-text)}.role-earner{--rc:var(--sky-text)}.role-leader{--rc:var(--peach-text)}
.btn.role-learner,.btn.role-earner,.btn.role-leader{color:var(--rc)}

.doc-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.toc-list{list-style:none;margin:8px 0 12px;padding:0;border-top:1px solid var(--line)}
.toc-list a{display:flex;justify-content:space-between;gap:12px;min-height:var(--tap);align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.toc-list a:hover{background:var(--mint-t)}
.toc-p{flex:none;font-size:var(--fs-caption);color:var(--ink-2)}
.route-roles{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.role{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-lg)}
.role strong{font-weight:600}
.role span{font-size:var(--fs-small);color:var(--ink-2)}
.role-learner.role{background:var(--mint-t)}.role-earner.role{background:var(--sky-t)}.role-leader.role{background:var(--peach-t)}
.privacy-note{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:0 0 16px}
.back-link{margin-top:20px}
.res-item mark{background:var(--lemon-t);color:inherit;border-radius:3px;padding:0 1px}
.it-sep{color:var(--ink-2);font-weight:400}
.t-段{background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.search-tip{margin-top:18px}
.tip-b{margin:0 6px 6px 0;min-height:var(--tap);padding:0 14px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-small);cursor:pointer}
.tip-b:hover{background:var(--mint-t)}

/* 章頁：標題、場景、連續閱讀、提示框、問答、圖、章末 */
.chapter-head{margin-bottom:14px}
.ch-kicker{font-size:var(--fs-small);color:var(--hd,var(--mint-text));font-weight:600;margin:0 0 4px}
.chapter-head h1{font-size:clamp(1.75rem,5.5vw,2.375rem)}
.head-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.meter-wrap{display:flex;align-items:center;gap:14px}
.meter-wrap .meter{width:40px;height:62px}
.meter-text{font-size:var(--fs-small);color:var(--ink-2)}
.line-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--white);border:1.5px solid var(--field)}
.ls-l{font-size:var(--fs-caption);color:var(--ink-2);padding:0 8px 0 12px}
.line-switch button{min-height:var(--tap);min-width:3.4rem;padding:0 16px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-size:var(--fs-small);color:var(--ink-2)}
.line-switch button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);font-weight:600}

/* 場景開場（虛構）：旁白加對話泡泡 */
.opening{display:flex;flex-direction:column;margin:18px 0 26px;padding:16px 18px 6px;border-radius:var(--r-xl);background:var(--lemon-t)}
.op-k{align-self:flex-start;font-size:var(--fs-caption);font-weight:600;color:var(--lemon-text);background:var(--white);border-radius:999px;padding:0 12px;margin:0 0 12px}
.op-n{font-size:var(--fs-lead);line-height:1.95;margin:0 0 12px;max-width:var(--measure)}
.op-b{align-self:flex-start;display:flex;flex-direction:column;gap:3px;margin:0 0 12px;max-width:min(88%,30em)}
.op-who{font-size:var(--fs-caption);color:var(--ink-2)}
.op-t{margin:0;padding:10px 14px;border-radius:16px;background:var(--white);border:1px solid var(--line);line-height:1.7}
.op-me{align-self:flex-end;align-items:flex-end}
.op-me .op-t{background:var(--mint-t);border-color:var(--mint);color:var(--mint-text)}
.op-think .op-t{background:transparent;border:1.5px dashed var(--field);color:var(--ink-2)}

/* 連續閱讀：懂、通、練、深接在同一頁往下讀 */
.layer+.layer{margin-top:28px}
.sec-h{display:flex;align-items:center;gap:12px;font-size:var(--fs-h2);margin:0 0 12px;padding-top:24px;border-top:1px solid var(--line)}
.sec-h::before{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-family:var(--font-brand);font-size:1.25rem;line-height:1}
.layer[data-layer="練"] .sec-h::before{content:"練";background:var(--layer-3-t);color:var(--layer-3-text)}
.layer[data-layer="深"] .sec-h::before{content:"深";background:var(--layer-4-t);color:var(--layer-4-text)}
.layer[data-layer="深"]{margin-top:36px;padding:18px 18px 20px;border-radius:var(--r-xl);background:var(--paper);border:1px dashed var(--field)}
.layer[data-layer="深"] .sec-h{border-top:0;padding-top:0}
.layer-end{display:block;height:1px}
@media (min-width:720px){.layer[data-layer="深"]{padding:22px 26px 26px}}

.prose{max-width:var(--measure)}
.prose>*:first-child{margin-top:0}
.prose h3{margin:1.5em 0 .5em}
.prose h4{margin:1.2em 0 .4em;font-family:var(--font-body);font-weight:600;font-size:var(--fs-body)}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.2em 0;padding:14px 18px;border-radius:var(--r-lg);background:var(--mint-t);color:var(--mint-text);font-family:var(--font-brand);font-size:var(--fs-lead);line-height:1.6}
.prose blockquote p{margin:0}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:1em 0;font-size:var(--fs-small)}
.prose th,.prose td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--ink-2);font-weight:500;white-space:nowrap}
/* Safari 與 Firefox 靠 overflow-wrap:anywhere 防止長字撐破版面，但它會讓表格每一欄的最小寬度縮成一個字，欄就被擠成一字一行。表格裡改用 break-word：欄寬由最長的詞決定。 */
.phrase-js .prose table,.phrase-js .prose th,.phrase-js .prose td{overflow-wrap:break-word}
/* 第一欄是列的名稱，至少留 5 個字寬，才不會把「疾病」這種詞拆在兩行 */
.prose td:first-child,.prose th:first-child{min-width:5em}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.prose .star{color:var(--lemon-text)}
.callout{margin:1.3em 0;padding:14px 16px;border-radius:var(--r-lg);background:var(--sky-t)}
.callout>*:last-child{margin-bottom:0}
.callout-t{font-weight:600;font-size:var(--fs-small);margin:0 0 .35em;color:var(--sky-text)}
.callout.warn{background:var(--coral-t)}.callout.warn .callout-t{color:var(--coral-text)}
.callout.ext{background:var(--peach-t)}.callout.ext .callout-t{color:var(--peach-text)}
.callout.ex{background:var(--lemon-t)}.callout.ex .callout-t{color:var(--lemon-text)}
.callout.key{background:var(--mint-t)}.callout.key .callout-t{color:var(--mint-text)}
.callout.tip,.callout.say{background:var(--paper);border:1px dashed var(--field)}.callout.tip .callout-t,.callout.say .callout-t{color:var(--ink-2)}
.ext-tag{display:inline-block;font-size:var(--fs-caption);font-weight:600;padding:0 12px;border-radius:999px;background:var(--peach);color:#4a2a05;line-height:1.7;margin-right:8px}
.ext-flag{font-size:var(--fs-small);font-weight:600;color:var(--peach-text);margin:0 0 .5em}
html[data-line="增員"] .sales-only,html[data-line="銷售"] .recruit-only{display:none}
.line-block{margin:1.3em 0}
.recruit-only{background:var(--peach-t);border-radius:var(--r-lg);padding:14px 16px}
.recruit-only>*:last-child{margin-bottom:0}
.cards{display:grid;gap:12px;margin:1.2em 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card-lite{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.card-lite>*:last-child{margin-bottom:0}
.card-t{font-weight:600;margin:0 0 .3em}
.recruit-only .card-lite{background:var(--white)}
.steps{counter-reset:st;display:grid;gap:10px;margin:1.2em 0}
.step{counter-increment:st;position:relative;padding:12px 16px 12px 58px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.step::before{content:counter(st);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mint-t);color:var(--mint-text);font-weight:600}
.step>*:last-child{margin-bottom:0}
.step-t{font-weight:600;margin:0 0 .2em}
.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);margin:10px 0}
.faq summary{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 16px;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint-t);color:var(--mint-text);font-weight:600}
.faq[open] summary::after{content:"−"}
.faq>*:not(summary){padding:0 16px}
.faq>*:last-child{margin-bottom:14px}
.fig{margin:1.3em 0}
.fig-zoom{display:block;width:100%;padding:10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);cursor:zoom-in}
.fig-zoom img{display:block;width:100%;height:auto}
.fig figcaption{font-size:var(--fs-caption);color:var(--ink-2);margin-top:6px;text-align:center}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(47,74,85,.88);display:flex;flex-direction:column;animation:fadein var(--dur-base)}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(8px + var(--safe-t)) 12px 8px;color:#fff;font-size:var(--fs-caption)}
.lightbox-btns{display:flex;gap:8px;margin-left:auto;flex:none}
.lightbox :focus-visible{outline-color:#fff}
.lightbox-bar button{min-height:var(--tap);padding:0 16px;border-radius:999px;border:0;background:var(--white);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lightbox-bar button[disabled]{opacity:.45;cursor:default}
.lightbox-body{flex:1;overflow:auto;padding:8px 12px calc(16px + var(--safe-b));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lightbox-body img{display:block;max-width:none;width:1100px;height:auto;background:var(--white);border-radius:var(--r-md)}   /* 全站的 img{max-width:100%} 會把它縮回視窗寬，放大就沒有意義了 */
@media (max-width:600px){.lightbox-bar{flex-wrap:wrap}}
.res-list{list-style:none;margin:1em 0;padding:0;border-top:1px solid var(--line)}
.res a{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.res a:hover{background:var(--mint-t)}
.res-k{flex:none;font-size:var(--fs-caption);padding:2px 10px;border-radius:999px;font-weight:600}
.k-doc{background:var(--lemon-t);color:var(--lemon-text)}.k-tool{background:var(--mint-t);color:var(--mint-text)}.k-play{background:var(--peach-t);color:var(--peach-text)}.k-con{background:var(--sky-t);color:var(--sky-text)}
/* 章末：讀完的狀態、下一章 */
.chapter-end{margin-top:36px;padding:22px;border-radius:var(--r-xl);background:var(--h,var(--mint-t))}
.ce-t{font-size:var(--fs-h3);color:var(--hd,var(--mint-text))}
.ce-state{font-size:var(--fs-small);color:var(--ink-2);margin:6px 0 10px;min-height:1.7em}
.ce-actions{margin:0 0 14px}
.ce-actions:has([hidden]:only-child){display:none}
.ce-next{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:var(--r-lg);background:var(--white);color:var(--ink);text-decoration:none;border:1.5px solid var(--hb,var(--mint))}
a.ce-next:hover{border-color:var(--hd,var(--mint-text));color:var(--ink)}
.ce-k{font-size:var(--fs-caption);color:var(--hd,var(--mint-text));font-weight:600}
.ce-next strong{font-family:var(--font-brand);font-weight:400;font-size:var(--fs-h3);line-height:1.35}
.ce-d{font-size:var(--fs-small);color:var(--ink-2)}
.ce-next.soon{border-style:dashed;border-color:var(--field)}
.chapter-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.chapter-nav a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;min-height:var(--tap)}
.chapter-nav a:hover{border-color:var(--mint)}
.chapter-nav span{font-size:var(--fs-caption);color:var(--ink-2)}
.cn-toc{text-align:right;grid-column:2}

/* 各章重點、名詞表 */
.quick-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:14px}
.quick-item{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.quick-item h2{font-size:var(--fs-h3);display:flex;gap:12px;align-items:baseline}
.quick-item h2 a{color:var(--ink);text-decoration:none}
.quick-item h2 a:hover{color:var(--mint-text)}
.q-n{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--h,var(--mint-t));color:var(--hd,var(--mint-text));font-size:1rem;margin-right:2px}
.quick-key{margin-top:8px}
.quick-key>*:last-child{margin-bottom:0}
.glossary{margin:16px 0;display:grid;gap:10px}
.gl-item{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.glossary dt{font-weight:600;font-size:var(--fs-lead)}
.glossary dd{margin:4px 0 0}
.gl-src{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--ink-2)}
.preface-go{margin-top:20px}
.about-meter{display:flex;align-items:center;gap:18px;margin:12px 0}
.about-meter p{margin:0}

/* 手機：標題區縮小。重點是讓場景開場與「一句話」早一點出現；本章進度改成最上面的細線，標題旁的積木只留給讀螢幕的人 */
body[data-page="chapter"]::before{content:"";position:fixed;left:0;top:var(--safe-t);height:3px;width:calc(var(--rp,0) * 100%);background:var(--layer-1);border-radius:0 3px 3px 0;z-index:60;pointer-events:none}
@media (max-width:640px){
  .chapter-head{margin-bottom:10px}
  .chapter-head .lead{margin:.2em 0 .5em;font-size:var(--fs-body);line-height:1.7}
  .chapter-head .chips{flex-wrap:nowrap;gap:0;margin:0 0 8px;font-size:var(--fs-caption);color:var(--ink-2);overflow:hidden}
  .chapter-head .chip{background:none;color:inherit;padding:0;font-weight:400;white-space:nowrap}
  .chapter-head .chip+.chip::before{content:"・";margin:0 5px}
  .chapter-head .meter-wrap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .head-tools{gap:6px}
}

/* 互動練習：分類、情境、概念探索，與三題推薦 */
.practice{margin:1.3em 0;padding:16px;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-xl)}
@media (min-width:720px){.practice{padding:24px}}
.pr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pr-title{font-family:var(--font-brand);font-size:var(--fs-h3);line-height:1.3;margin:0}
.pr-dots{display:flex;gap:6px}
.pr-dots i{display:block;width:12px;height:12px;border-radius:50%;background:var(--unlit)}
.pr-dots i.on{background:var(--mint-d)}
.pr-dots i.cur{box-shadow:0 0 0 3px var(--mint-t);background:var(--mint)}
.pr-intro{font-size:var(--fs-small);color:var(--ink-2);margin:0 0 12px}
.pr-q{font-size:var(--fs-lead);font-weight:600;line-height:1.6;margin:8px 0 14px}
.pr-opts{display:grid;gap:8px;margin:0}
.pr-opts.cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.pr-opt{display:block;width:100%;text-align:left;min-height:var(--tap);padding:11px 16px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--white);color:var(--ink);cursor:pointer;line-height:1.6;transition:background var(--dur-fast),border-color var(--dur-fast)}
.pr-opts.cols .pr-opt{text-align:center;font-weight:600}
.pr-opt:hover{background:var(--mint-t)}
.pr-opt.ok{background:var(--ok-bg);border-color:var(--mint-d);color:var(--ok-text)}
.pr-opt .opt-mark{float:right;margin-left:.6em;font-weight:700}
.pr-opt.ok .opt-mark{color:var(--ok-text)}
.pr-opt.no .opt-mark{color:var(--no-text)}
.pr-opt.no{background:var(--no-bg);border-color:var(--coral-d);color:var(--no-text)}
.pr-opt[disabled],.pr-opt[aria-disabled="true"]{cursor:default}
.pr-opt[aria-disabled="true"]:hover{background:var(--no-bg)}
.pr-fb{margin:12px 0 0;padding:12px 16px;border-radius:var(--r-md);line-height:1.7;animation:fadein var(--dur-base)}
.pr-fb.ok{background:var(--ok-bg);color:var(--ok-text)}
.pr-fb.no{background:var(--no-bg);color:var(--no-text)}
.pr-fb b{font-weight:600}
.pr-fb p{margin:0 0 .4em}.pr-fb>*:last-child{margin-bottom:0}
.pr-fb ul{margin:.3em 0 .4em;padding-left:1.2em}.pr-fb li{margin:0 0 .25em}
.pr-q{white-space:pre-line}
.practice[data-type="quiz"] .pr-q{font-size:var(--fs-body);font-weight:600;line-height:1.8}
.pr-opt .opt-k{display:inline-grid;place-items:center;width:1.7em;height:1.7em;margin-right:.6em;border-radius:50%;border:1px solid var(--field);background:var(--paper);font-size:.8125rem;font-weight:600;line-height:1;vertical-align:.05em}
/* 答完之後：算給你看、順便補充、條款對照 */
.pr-extra{margin:10px 0 0;padding:10px 14px;border-radius:var(--r-md);color:var(--ink)}
.pr-extra p{margin:0 0 .3em;font-size:var(--fs-small)}.pr-extra>*:last-child{margin-bottom:0}
.pr-extra-t{font-weight:600;color:var(--ink-2)}
.pr-calc{background:var(--sky-t)}.pr-side{background:var(--lemon-t)}
.pr-src,.pr-clause{font-size:var(--fs-caption);color:var(--ink-2)}
.pr-clause{margin:10px 0 0}
.pr-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pr-sum{padding:18px;border-radius:var(--r-lg);background:var(--mint-t);color:var(--mint-text)}
.pr-sum h3{color:var(--mint-text);margin-bottom:.3em}
.pr-sum p:last-child{margin-bottom:0}
.pr-note{font-size:var(--fs-caption);color:var(--ink-2);margin:14px 0 0}
.chat{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.scene{margin:0;padding:10px 14px;border-radius:var(--r-md);background:var(--lemon-t);color:var(--ink);line-height:1.7}
.scene b{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--lemon-text);margin-bottom:2px}
.bubble{max-width:86%;padding:10px 14px;border-radius:18px;line-height:1.65;animation:pop var(--dur-base) var(--ease) both}
.bubble.them{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:6px}
.bubble.me{align-self:flex-end;background:var(--mint-t);color:var(--mint-text);border-bottom-right-radius:6px}

/* 概念探索：點開每一塊，再一層一層往下 */
.ex-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:8px;margin:0 0 14px}
.ex-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 12px;border:1.5px solid var(--field);border-radius:var(--r-md);background:var(--white);cursor:pointer;text-align:left}
.ex-node:hover{background:var(--mint-t)}
.ex-node[aria-pressed="true"]{border-color:var(--mint-d);background:var(--mint-t)}
.ex-node.seen::after{content:"✓";position:absolute;right:10px;top:8px;color:var(--mint-text);font-weight:700;font-size:.875rem}
.ex-n{font-size:var(--fs-caption);color:var(--ink-2)}
.ex-l{font-weight:600;line-height:1.35;padding-right:16px}
.ex-star{color:var(--lemon-text)}
.ex-panel{padding:14px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)}
.ex-panel h3{margin-bottom:.4em}
.ex-tier{margin:0 0 .8em;animation:fadein var(--dur-base)}
.ex-tier .tier-k{font-size:var(--fs-caption);color:var(--ink-2);font-weight:600;margin:0 0 .2em}
.ex-more{margin-top:6px}
.ex-count{font-size:var(--fs-small);color:var(--ink-2);margin:0 0 10px}

/* 三題找路線 */
.rec fieldset{border:0;margin:0 0 16px;padding:0}
.rec legend{font-weight:600;margin-bottom:8px;padding:0}
.rec-opts{display:flex;flex-wrap:wrap;gap:8px}
.rec-pill{min-height:var(--tap);padding:0 18px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);cursor:pointer;color:var(--ink)}
.rec-pill:hover{background:var(--mint-t)}
.rec-pill[aria-pressed="true"]{background:var(--mint-t);border-color:var(--mint-d);color:var(--mint-text);font-weight:600}
.rec-pill small{font-size:var(--fs-caption);color:var(--ink-2);margin-left:4px;white-space:nowrap}
.rec-res{margin-top:6px;padding:16px;border-radius:var(--r-lg);background:var(--lemon-t);animation:fadein var(--dur-base)}
.rec-res h3{margin-bottom:.2em}
.rec-empty{color:var(--ink-2);font-size:var(--fs-small);margin:0}
.route-steps{list-style:none;margin:10px 0 12px;padding:0}
.route-steps li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(143,106,0,.2)}
.route-steps a{color:var(--ink);font-weight:600;text-decoration:none;flex:1;min-width:0}
.route-steps a:hover{text-decoration:underline}
.rs-layers{display:flex;gap:4px;flex:none}
.rs-layers .layer-badge{width:28px;height:28px;border-radius:9px;font-size:.9375rem}
.rs-m{flex:none;font-size:var(--fs-caption);color:var(--ink-2)}
.rs-done{flex:none;color:var(--mint-text);font-weight:700}
.rec-note{font-size:var(--fs-small);color:var(--ink-2);margin:0 0 10px}
.rec-legend{font-size:var(--fs-caption);color:var(--ink-2);margin:0 0 12px}

.practice-page .pr-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 我的學習、徽章、提示與完成的小慶祝 */
.me-route-body .rec-note{margin:0}
.badge-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--r-lg);text-align:center;background:var(--peach-t);color:var(--peach-text)}
.badge .meter{margin-bottom:2px}
/* 徽章插畫：已解鎖是彩色，還沒解鎖變灰、淡化；等級用一顆小標籤 */
.badge-img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(47,74,85,.2))}
.badge.locked .badge-img{filter:grayscale(1);opacity:.4}
.badge-tag{font-size:var(--fs-caption);font-weight:600;line-height:1.7;padding:0 10px;border-radius:999px;background:var(--white);color:var(--peach-text);margin-top:-4px}
.badge.locked .badge-tag{background:var(--paper);color:var(--ink-2)}
.badge-t{font-weight:600;line-height:1.35}
.badge-d{font-size:var(--fs-caption);color:var(--ink-2);line-height:1.5}
.badge-p{font-size:var(--fs-caption);font-weight:600;color:var(--mint-text)}
.badge.locked{background:var(--white);border:1.5px dashed var(--field);color:var(--ink-2)}
.badge.locked .meter rect{fill:var(--unlit)}
.badge.earned .meter rect{fill:var(--layer-1)}
.badge.earned .meter .b2{fill:var(--layer-2)}.badge.earned .meter .b3{fill:var(--layer-3)}.badge.earned .meter .b4{fill:var(--layer-4)}
#bkImport:focus-visible+.file-btn{outline:3px solid var(--focus-ring);outline-offset:2px}
.set-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.danger-zone{border:1.5px dashed var(--coral-d);border-radius:var(--r-md);padding:0 14px}
.danger-zone summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;color:var(--coral-text);font-weight:600}
.danger-zone[open]{padding-bottom:14px}
/* 提示與完成的慶祝卡，疊在同一個固定的欄位裡，由下往上排，不會互相蓋住 */
.overlays{position:fixed;left:0;right:0;bottom:calc(92px + var(--safe-b));z-index:70;display:flex;flex-direction:column-reverse;align-items:center;gap:10px;padding:0 16px;pointer-events:none}
.overlays>*{pointer-events:auto}
.toast{display:none;max-width:min(92vw,420px);padding:12px 18px;border-radius:var(--r-lg);background:var(--toast-bg,var(--ink));color:var(--toast-fg,#fff);font-size:var(--fs-small);line-height:1.6}
.toast.show{display:block;animation:rise var(--dur-base) var(--ease) both}
.toast a,.toast button{color:var(--toast-fg,#fff);font-weight:600;background:none;border:0;padding:0 0 0 10px;min-height:var(--tap);cursor:pointer;text-decoration:underline;font-size:inherit}
.toast :focus-visible{outline-color:var(--toast-fg,#fff)}
@media (min-width:720px){.overlays{bottom:32px;right:32px;left:auto;align-items:flex-end}}
.cele{width:100%;max-width:420px;margin:0;padding:18px;border-radius:var(--r-xl);background:var(--white);border:2px solid var(--peach);box-shadow:var(--shadow-1);display:flex;align-items:center;gap:16px;animation:pop var(--dur-pop) var(--ease) both}
.cele .meter rect{fill:var(--unlit)}
.cele-img{flex:none;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(47,74,85,.2));animation:pop var(--dur-pop) var(--ease) both}
@media (prefers-reduced-motion:reduce){.cele-img{animation:none}}
.cele .meter rect.on{animation:pop var(--dur-pop) var(--ease) both}
.cele-k{font-size:var(--fs-caption);color:var(--peach-text);font-weight:600;margin:0}
.cele-t{font-family:var(--font-brand);font-size:var(--fs-h3);line-height:1.3;margin:0}
.cele-d{font-size:var(--fs-small);color:var(--ink-2);margin:0}
.cele button{margin-left:auto;flex:none;min-height:var(--tap);padding:0 16px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);cursor:pointer}
@media (prefers-reduced-motion:reduce){.cele,.cele .meter rect.on,.js .hero,.js .door,.js .panel,.js .shelf{animation:none}}

/* 工具：備註產生器、A 表、B 表、稿子練習單 */
.tool{margin:1em 0}
.tl-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld label,.fld .fl{font-size:var(--fs-small);color:var(--ink-2)}
.fld input[type=text],.fld select,.fld textarea,.tl-input{font:inherit;font-size:max(1rem,var(--fs-body));min-height:var(--tap);padding:8px 14px;border-radius:var(--r-md);border:1.5px solid var(--field);background:var(--white);color:var(--ink);width:100%}
.fld textarea{min-height:7em;line-height:1.7;resize:vertical}
.fld .hint{font-size:var(--fs-caption);color:var(--ink-2)}
.fld.err input,.fld.err textarea{border-color:var(--coral-d)}
.err-msg{font-size:var(--fs-small);color:var(--coral-text);margin:0}
.cb-row{display:flex;flex-wrap:wrap;gap:8px}
.cb{min-height:var(--tap);padding:0 16px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);cursor:pointer;font-size:var(--fs-small);color:var(--ink)}
.cb[aria-pressed="true"]{background:var(--mint-t);border-color:var(--mint-d);color:var(--mint-text);font-weight:600}
.tl-out{margin-top:16px;padding:16px;border-radius:var(--r-lg);background:var(--mint-t);color:var(--ink);line-height:1.8;animation:fadein var(--dur-base)}
.tl-out p{margin:0 0 12px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);-webkit-overflow-scrolling:touch}
.tbl{border-collapse:collapse;width:max-content;min-width:100%;font-size:var(--fs-small)}
.tbl th,.tbl td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.tbl th{background:var(--paper);color:var(--ink-2);font-weight:500;position:sticky;top:0;white-space:nowrap}
.tbl input[type=text]{min-width:9rem}
.tbl td:first-child input[type=text]{min-width:5.5rem}
.tbl td:first-child,.tbl th:first-child{text-align:left;position:sticky;left:0;background:var(--white);z-index:1;min-width:6.5em;max-width:8.5rem}
.tbl th:first-child{background:var(--paper)}
.tbl input[type=text],.tbl select{width:100%;min-height:40px;padding:4px 8px;border:1.5px solid var(--field);border-radius:var(--r-sm);font:inherit;font-size:1rem;background:var(--white)}   /* 16px：iPhone 點進欄位時才不會自己放大畫面 */
.cell{min-width:44px;min-height:44px;border-radius:var(--r-sm);border:1.5px solid var(--field);background:var(--white);cursor:pointer;font-size:var(--fs-small);color:var(--ink-2)}
.cell.ok{background:var(--ok-bg);border-color:var(--mint-d);color:var(--ok-text);font-weight:700}
.cell.no{background:var(--no-bg);border-color:var(--coral-d);color:var(--no-text);font-weight:700}
.cell.plan{background:var(--lemon-t);border-color:var(--lemon-d);color:var(--lemon-text)}
.tbl-tools{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.row-del{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;border-radius:50%}
.row-del:hover{background:var(--coral-t);color:var(--coral-text)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--fs-caption);color:var(--ink-2);margin:10px 0}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px;border:1.5px solid var(--field)}
.legend .ok{background:var(--ok-bg);border-color:var(--mint-d)}.legend .no{background:var(--no-bg);border-color:var(--coral-d)}.legend .plan{background:var(--lemon-t);border-color:var(--lemon-d)}
.checklist{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist input{width:22px;height:22px;margin-top:3px;accent-color:var(--mint-d)}
.count-note{font-size:var(--fs-caption);color:var(--ink-2);text-align:right}
/* 試算器 */
.calc-out h2{margin-bottom:.4em;font-size:var(--fs-h3)}
.calc-rows{margin:0 0 12px}
.calc-rows>div{display:flex;flex-wrap:wrap;gap:2px 14px;padding:8px 0;border-top:1px solid rgba(23,112,79,.18)}
.calc-rows dt{flex:0 1 11em;min-width:0;max-width:100%;color:var(--ink-2);font-size:var(--fs-small)}
.calc-rows dd{margin:0;flex:1 1 14em;min-width:0}
.calc-rows dd strong{font-weight:600;font-size:var(--fs-lead)}
.calc-how{display:block;font-size:var(--fs-caption);color:var(--ink-2);line-height:1.6}
.calc-total{margin:8px 0 10px;padding:12px 14px;border-radius:var(--r-md);background:var(--white);font-size:var(--fs-lead)}
.calc-total strong{font-weight:700;color:var(--mint-text);margin-left:.3em}
.calc-notes{margin:0;padding-left:1.2em;font-size:var(--fs-small);color:var(--ink)}
.calc-notes li{margin-bottom:.35em}
.calc-warn{margin:0 0 10px;padding:10px 14px;border-radius:var(--r-md);background:var(--coral-t);color:var(--coral-text)}
.calc-disc{margin:10px 0 0;font-size:var(--fs-caption);color:var(--ink-2)}
/* 手機：結果離欄位很遠，不在畫面裡的時候，底下浮出一條摘要 */
.calc-float{position:fixed;left:16px;right:16px;bottom:calc(76px + var(--safe-b,0px));z-index:25;margin:0 auto;max-width:560px;display:block;padding:12px 16px;border:1.5px solid var(--mint-d);border-radius:var(--r-lg);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-small);line-height:1.5;text-align:left;box-shadow:0 6px 18px rgba(47,74,85,.18);cursor:pointer}
.calc-float[hidden]{display:none}
@media (min-width:720px){.calc-float{display:none!important}}
.fld[hidden]{display:none}
@media print{
  .layer.collapsed .layer-body,.layer.skipped .layer-body{display:block!important}
  .layer-toggle .layer-state,.layer-toggle .layer-min,[data-foot],.calc-float,.route-bar,.pr-act{display:none!important}
  .topbar,.tabbar,.footer,.tbl-tools,.btn-row,.toast,.privacy-note,.back-link,.crumbs,.lead,body::before,body::after{display:none!important}
  .page{max-width:none;padding:0}
  .tbl-wrap{border:0;overflow:visible}
  .tbl{min-width:0}
}

/* 讀者選的背景與字級（「Aa」面板）。tokens.css 只有淺色；這裡只覆蓋顏色與字級，元件的樣式不用改。
   高度比 :root 高，所以不論檔案順序，都會蓋過 tokens.css。 */
html[data-theme="cream"]{--bg:#FBF4E4;--paper:#FBF4E4;--white:#FFFBF1;--surface:#FFFBF1;--line:#E6D9B8;--unlit:#E6DDC5}
html[data-theme="green"]{--bg:#E9F4EA;--paper:#E9F4EA;--white:#F6FBF6;--surface:#F6FBF6;--line:#C3DBC6;--unlit:#CFE1D1}
html[data-theme="dark"]{
  --bg:#141F1E;--paper:#141F1E;--white:#1D2D2C;--surface:#1D2D2C;
  --ink:#E4EEE9;--ink-2:#B3C7C0;--gray:#8FA59E;--line:#2F4745;--field:#6B8A83;--unlit:#33504D;
  --mint-t:#1D3A31;--mint-text:#86DDB8;--mint-d:#2E9C74;
  --sky-t:#1B3342;--sky-text:#93D0F3;--sky-d:#4AA8DC;
  --peach-t:#3B2C1B;--peach-text:#F4BC82;--peach-d:#F4A04C;
  --lemon-t:#3A331A;--lemon-text:#F2DA80;--lemon-d:#F7CB45;
  --coral-t:#3F2825;--coral-text:#F6AEA2;--coral-d:#F08A7A;
  --primary:#1E8560;--primary-hover:#2E9C74;--on-primary:#fff;
  --focus-ring:#93D0F3;
  --toast-bg:#E4EEE9;--toast-fg:#141F1E;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.25);
}
html[data-theme="dark"] .ring-bg{stroke:rgba(255,255,255,.16)}
html[data-theme="dark"] .book-card,html[data-theme="dark"] .panel{border-color:var(--line)}
/* 手繪圖解是為淺色底畫的：夜間模式下，放在一張淺色的卡片上 */
.fig-zoom{background:#FBFDF9}
html[data-theme="dark"] .fig-zoom{border-color:var(--line)}

/* 字級：標準 / 大 / 特大。內文欄寬用 em，會跟著字級一起放大 */
html[data-fs="1"]{--fs-caption:.9375rem;--fs-small:1.0625rem;--fs-body:1.25rem;--fs-lead:1.375rem;--fs-h3:1.5rem;--fs-h2:1.8125rem;--fs-h1:2.125rem}
html[data-fs="2"]{--fs-caption:1.0625rem;--fs-small:1.1875rem;--fs-body:1.4375rem;--fs-lead:1.5625rem;--fs-h3:1.75rem;--fs-h2:2rem;--fs-h1:2.375rem}

/* 投影模式：超大字、收起選單。白底由「投影」情境決定，這裡不強制 */
html[data-proj]{--fs-caption:1.375rem;--fs-small:1.5rem;--fs-body:1.875rem;--fs-lead:2.125rem;--fs-h3:2.375rem;--fs-h2:2.875rem;--fs-h1:3.5rem;--lh-body:1.7;--measure:30em}
html[data-proj] .page{max-width:1500px}
html[data-proj] .op-n{font-size:var(--fs-body)}

/* 閱讀器：「Aa」按鈕與設定面板、分頁、只剩內容、投影、區塊收起、章末 */
.aa-btn{display:grid;place-items:center;min-width:var(--tap);height:var(--tap);padding:0 10px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);color:var(--ink-2);font-family:var(--font-brand);font-size:1.0625rem;line-height:1;cursor:pointer}
.aa-btn:hover{background:var(--mint-t);color:var(--mint-text)}
.fab{display:none;position:fixed;top:calc(10px + var(--safe-t));right:12px;z-index:35;gap:8px}
.fab-b{display:grid;place-items:center;min-width:var(--tap);height:var(--tap);padding:0 14px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);color:var(--ink-2);font:inherit;font-size:var(--fs-small);text-decoration:none;cursor:pointer;box-shadow:var(--shadow-1);opacity:.94}
.fab-b:hover{background:var(--mint-t);color:var(--mint-text)}
.fab-aa{font-family:var(--font-brand);font-size:1.0625rem}

/* 讀的時候只剩內容／投影：收起選單、頁尾，只留右上角的兩顆按鈕 */
html[data-minimal] :is(body[data-page="chapter"],body[data-page="quick"],body[data-page="glossary"],body[data-page="payout"],body[data-page="preface"]) :is(.topbar,.tabbar,.footer,.crumbs){display:none}
html[data-minimal] :is(body[data-page="chapter"],body[data-page="quick"],body[data-page="glossary"],body[data-page="payout"],body[data-page="preface"]) .fab{display:flex}
html[data-minimal] :is(body[data-page="chapter"],body[data-page="quick"],body[data-page="glossary"],body[data-page="payout"],body[data-page="preface"]) .page{padding-top:calc(64px + var(--safe-t))}
html[data-proj] body[data-page="chapter"] :is(.chapter-head .chips,.head-tools,.chapter-nav,.part-note){display:none}

/* 讀者可以收起的區塊（場景開場、重點、提醒與界線，永遠不收） */
html[data-hide-fig] [data-blk="fig"]{display:none}
html[data-hide-practice] .layer[data-layer="練"]{display:none}
html[data-hide-aside] [data-blk="aside"]{display:none}
html[data-hide-aside] .layer[data-layer="深"][data-blk="guard"] .prose>:not([data-blk="guard"]){display:none}
html[data-fx-teaser="0"] .ce-d{display:none}

/* 分頁：一次只看懂、通、練、深其中一個部分 */
.chapter-tabs{display:none}
html[data-mode="tabs"] .chapter-tabs{display:flex;gap:8px;position:sticky;top:60px;z-index:20;padding:8px 0;margin:4px 0 14px;background:var(--bg);overflow-x:auto}
html[data-minimal] .chapter-tabs{top:0}
.ctab{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;min-height:var(--tap);padding:6px 18px;border-radius:var(--r-lg);border:1.5px solid var(--line);background:var(--white);cursor:pointer;color:var(--ink)}
.ctab-l{font-family:var(--font-brand);font-size:1.25rem;line-height:1.2}
.ctab-t{font-size:var(--fs-caption);color:var(--ink-2)}
.ctab[aria-selected="true"]{background:var(--mint-t);border-color:var(--primary);color:var(--mint-text)}
.ctab[aria-selected="true"] .ctab-t{color:var(--mint-text)}
.layer.tab-off{display:none}
.tab-next{display:none;margin-top:18px}
html[data-mode="tabs"] .tab-next{display:inline-flex}

/* 自動接進來的下一章 */
.chapter-sep{height:1px;margin:48px 0 32px;background:var(--line)}
.chapter.is-appended .crumbs{display:none}
.ce-head{display:flex;align-items:center;gap:14px}
.ce-head .meter{width:26px;height:40px}
.chapter-end .meter rect{fill:var(--unlit)}
.chapter-end .meter .b1.on{fill:var(--layer-1)}.chapter-end .meter .b2.on{fill:var(--layer-2)}.chapter-end .meter .b3.on{fill:var(--layer-3)}.chapter-end .meter .b4.on{fill:var(--layer-4)}

/* 設定面板（手機從下方升起，電腦在右上角） */
.aa-wrap{position:fixed;inset:0;z-index:90}
.aa-back{position:absolute;inset:0;background:rgba(20,31,30,.45)}
.aa-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:88vh;max-height:88dvh;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-1);padding-bottom:var(--safe-b);animation:rise var(--dur-base) var(--ease) both}
@media (min-width:720px){.aa-panel{left:auto;right:24px;top:72px;bottom:auto;width:420px;max-height:calc(100vh - 96px);border-radius:var(--r-xl)}}
.aa-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.aa-t{font-size:var(--fs-h3)}
.aa-body{overflow:auto;padding:6px 18px 20px;overscroll-behavior:contain}
.pf-g{min-width:0;border-top:1px solid var(--line);margin:16px 0 0;padding:14px 0 0}
.pf-g:first-child{border-top:0;margin-top:6px;padding-top:6px}
.pf-gt{margin:0 0 8px;font-family:var(--font-brand);font-size:var(--fs-lead);font-weight:400;line-height:1.3}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip,.pf-b,.pf-sw-c{min-height:var(--tap);padding:0 16px;border-radius:999px;border:1.5px solid var(--field);background:var(--white);color:var(--ink);font:inherit;font-size:var(--fs-small);cursor:pointer}
.pf-chip:hover,.pf-b:hover{background:var(--mint-t)}
.pf-chip[aria-pressed="true"]{background:var(--mint-t);border-color:var(--primary);color:var(--mint-text);font-weight:600}
.pf-b[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:600}
.pf-hint{font-size:var(--fs-small);color:var(--ink-2);margin:8px 0 0;line-height:1.7}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0}
.pf-l{font-size:var(--fs-small);color:var(--ink-2)}
.pf-seg,.pf-swatches{display:inline-flex;flex-wrap:wrap;gap:6px}
.pf-sw-c{min-width:3.4rem;border-width:2px}
.sw-light{background:#FBFDF9;color:#2F4A55}.sw-cream{background:#FBF4E4;color:#2F4A55}.sw-green{background:#E9F4EA;color:#2F4A55}.sw-dark{background:#141F1E;color:#E4EEE9}
.pf-sw-c[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary);font-weight:600}
.pf-swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:var(--tap);padding:8px 0;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.pf-swt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pf-swt strong{font-weight:600}
.pf-swt small{font-size:var(--fs-caption);color:var(--ink-2);line-height:1.5}
.pf-dot{flex:none;position:relative;width:50px;height:30px;border-radius:999px;background:var(--unlit);border:1.5px solid var(--field);transition:background var(--dur-fast)}
.pf-dot::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:var(--white);border:1px solid var(--field);transition:transform var(--dur-fast) var(--ease)}
.pf-swrow[aria-checked="true"] .pf-dot{background:var(--primary);border-color:var(--primary)}
.pf-swrow[aria-checked="true"] .pf-dot::after{transform:translateX(20px);border-color:var(--primary)}
.pf-swrow:focus-visible,.pf-chip:focus-visible,.pf-b:focus-visible,.pf-sw-c:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.me .pf{max-width:34em}
@media (prefers-reduced-motion:reduce){.aa-panel{animation:none}}

/* 投影：整欄置中，不要貼在左邊 */
html[data-proj] body[data-page="chapter"] .chapter{max-width:min(100%,1100px);margin-inline:auto}

/* 列印：所有部分都印出來，設定的按鈕與分頁列不印 */
@media print{
  .fab,.aa-btn,.chapter-tabs,.tab-next,.aa-wrap{display:none!important}
  .layer.tab-off{display:block!important}
  html[data-hide-fig] [data-blk="fig"],html[data-hide-aside] [data-blk="aside"]:not(.callout){display:revert}
}

/* 從搜尋跳到的那一段，閃一下底色 */
.hash-flash{animation:hashflash 2.2s var(--ease)}
@keyframes hashflash{0%,35%{background:var(--lemon-t);box-shadow:0 0 0 8px var(--lemon-t)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.hash-flash{animation:none;background:var(--lemon-t)}}

/* 分頁模式：章末卡只在最後一個部分顯示（前面的部分還沒讀完，不用先看到「下一章」） */
html[data-mode="tabs"] .chapter:not(.on-last-tab) .chapter-end{display:none}

/* 章的標題：跟著字級與投影一起放大（不然特大字、投影時，標題反而比引言小） */
html[data-fs="1"] .chapter-head h1{font-size:clamp(1.9rem,6vw,2.6rem)}
html[data-fs="2"] .chapter-head h1{font-size:clamp(2.1rem,6.5vw,2.9rem)}
html[data-proj] .chapter-head h1{font-size:var(--fs-h1)}

/* 賠付速查表：電腦上是表格；手機上每一列變成一張卡片，不用左右捲 */
.payout-page .prose table{display:table;width:100%;max-width:none;overflow:visible}
.payout-page .prose td,.payout-page .prose th{vertical-align:top}
.payout-page .prose td:first-child{font-weight:600}
@media (max-width:760px){
  .payout-page .prose table,.payout-page .prose tbody,.payout-page .prose tr,.payout-page .prose td{display:block;width:100%;max-width:100%}
  .payout-page .prose thead{display:none}
  .payout-page .prose tr{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
  .payout-page .prose td{padding:6px 0;border:0;min-width:0}
  .payout-page .prose td:first-child{padding-top:0;font-family:var(--font-brand);font-weight:400;font-size:var(--fs-h3);line-height:1.35;color:var(--hd,var(--mint-text))}
  .payout-page .prose td:nth-child(n+2)::before{display:block;margin-bottom:2px;font-size:var(--fs-caption);font-weight:600;color:var(--ink-2)}
  .payout-page .prose td:nth-child(2)::before{content:"賠多少／規則"}
  .payout-page .prose td:nth-child(3)::before{content:"限制與提醒"}
  .payout-page .prose td:nth-child(4)::before{content:"出處"}
}

/* 學長：圓形頭像加一個話框。用在 404、離線、我的學習空狀態、搜尋沒有結果、練習回饋；頭像只是陪伴，話本身才是內容 */
.mentor{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
.mentor-face{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--lemon-t);border:2px solid var(--lemon)}
.mentor-say{margin:0;padding:10px 14px;border-radius:16px 16px 16px 6px;background:var(--white);border:1.5px solid var(--line);color:var(--ink);line-height:1.7;text-wrap:pretty}
/* 小尺寸：放在練習回饋的色塊裡 */
.mentor-s{gap:10px;margin:10px 0 0}
.mentor-s .mentor-face{width:40px;height:40px;border-width:1.5px}
.mentor-s .mentor-say{padding:6px 12px;font-size:var(--fs-small)}
.pr-fb .mentor-say{margin:0}
.mentor-start{margin:6px 0 18px}
/* 搜尋沒有結果那一塊內容是置中的，學長也置中 */
.empty .mentor{justify-content:center;align-items:center}