/* 好日子 GOODDAY TOOLBOX · 全站樣式
   風格基準：薰衣草紫＋蜜桃粉＋奶油底、白色大圓角卡片、柔影、扁平向量插畫。
   變數名稱（--c、--brand、--surface、--line、--ink、--muted、--paper/--bg、--ok/--warn/--bad、--r）
   被 27 個工具頁的內嵌樣式引用，只能改值不能改名。 */

/* ============ Tokens ============ */
:root{
  /* 底與面 */
  --paper:#FBF7F4; --bg:var(--paper); --surface:#FFFFFF; --surface-2:#F7F2EE;
  /* 文字 */
  --ink:#262840; --ink-2:#4D4F68; --muted:#75778E;
  --line:#EEE7E2; --line-2:#E2D8D1;
  /* 品牌色：薰衣草紫（主）、蜜桃粉（輔）、奶油黃（插畫用） */
  --brand:#6F63D8; --brand-deep:#5A4FC4; --brand-pale:#EEEBFC; --brand-ink:#FFFFFF;
  --peach:#F2A28E; --peach-pale:#FDE8E0; --sun:#F5C977; --pink:#F7D6D4; --lav:#A79BEA;
  /* 插畫固定色（吉祥物的紙面與五官） */
  --ill-paper:#FFFCF8; --ill-paper-2:#EFE6DC; --ill-ink:#23243D;
  /* 狀態 */
  --ok:#2B7F52; --warn:#A85E0C; --bad:#C4475A;
  /* 主要按鈕（深藍黑） */
  --btn-bg:var(--ink); --btn-ink:#FFFFFF;
  /* 陰影：低對比、偏暖 */
  --shadow-sm:0 1px 2px rgba(60,48,80,.05),0 2px 6px rgba(60,48,80,.04);
  --shadow:0 2px 4px rgba(60,48,80,.04),0 12px 28px -10px rgba(60,48,80,.14);
  --shadow-lg:0 4px 8px rgba(60,48,80,.04),0 24px 48px -16px rgba(60,48,80,.20);
  /* 圓角 */
  --r:20px; --r-lg:28px; --r-sm:12px;
  /* 字型 */
  /* 標題：Noto Sans TC 700（2026-10-21 v3 由 900 降到 700，hero 800；試過 Noto Serif TC 900，較偏明體書卷氣，與圓潤吉祥物不搭）；數字大標用 Fraunces */
  --font-display:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-serif:"Fraunces","Noto Sans TC","PingFang TC",serif;
  --font-body:system-ui,-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  /* 首頁 hero 的大面積柔和漸層 */
  --hero-a:#EFEBFD; --hero-b:#FBF7F4; --hero-c:#FDE6DE;
  /* 分類色（也當文字用，白底都 ≥ 4.5:1） */
  --c-line:#5A6FD0; --c-text:#6F63D8; --c-work:#4F82C4; --c-image:#CF8545;
  --c-date:#A85BBE; --c-health:#D0606F; --c-random:#6B5BD2; --c-game:#8657D0; --c-baby:#C85A9A; --c-money:#D9725A; --c-focus:#8657D0;
  --c:var(--brand);
  --c-pale:color-mix(in srgb,var(--c) 14%,var(--surface));
  --c-deep:color-mix(in srgb,var(--c) 72%,var(--ink));
  /* 首頁「關於這個站」深色滿版帶（深藍黑；深色模式改成比底更深） */
  --peach-ink:#A9553F;   /* 蜜桃點綴用在小字時的深色版（奶油底 ≥ 4.5:1） */
  --band:#23243D; --band-ink:#F4F2FA; --band-muted:#BEBDD3; --band-accent:#C9C2F7;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B1B24; --surface:#24242F; --surface-2:#20202A;
    --ink:#ECEBF4; --ink-2:#C6C5D6; --muted:#9B9BB0; --line:#343442; --line-2:#444455;
    --brand:#AFA6F2; --brand-deep:#8F86DE; --brand-pale:#2F2D47; --brand-ink:#17172A;
    --peach:#E99B87; --peach-pale:#3A2D30; --sun:#E3BA68; --pink:#4A3338; --lav:#4A4479;
    --ill-paper:#F3EFEA; --ill-paper-2:#D8D0C6; --ill-ink:#23243D;
    --ok:#6FD39A; --warn:#F0C060; --bad:#F08B98;
    --btn-bg:#ECEBF4; --btn-ink:#1B1B24;
    --shadow-sm:0 1px 2px rgba(0,0,0,.25);
    --shadow:0 10px 28px -10px rgba(0,0,0,.55);
    --shadow-lg:0 24px 48px -16px rgba(0,0,0,.65);
    --hero-a:#272541; --hero-b:#1F1F2A; --hero-c:#33282C;
    --c-line:#A9B6F0; --c-text:#B3A9F4; --c-work:#9CC0EE; --c-image:#EDB487;
    --c-date:#D6A3E6; --c-health:#F0A0AC; --c-random:#C1A8F2; --c-game:#C1A8F2; --c-baby:#EEA6CB; --c-money:#F2A592; --c-focus:#C1A8F2;
    --c-pale:color-mix(in srgb,var(--c) 18%,var(--surface));
    --c-deep:color-mix(in srgb,var(--c) 70%,var(--ink));
    --peach-ink:#E59A84; --band:#121219; --band-ink:#ECEBF4; --band-muted:#A9A8BE; --band-accent:#C9C2F7;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1B1B24; --surface:#24242F; --surface-2:#20202A;
  --ink:#ECEBF4; --ink-2:#C6C5D6; --muted:#9B9BB0; --line:#343442; --line-2:#444455;
  --brand:#AFA6F2; --brand-deep:#8F86DE; --brand-pale:#2F2D47; --brand-ink:#17172A;
  --peach:#E99B87; --peach-pale:#3A2D30; --sun:#E3BA68; --pink:#4A3338; --lav:#4A4479;
  --ill-paper:#F3EFEA; --ill-paper-2:#D8D0C6; --ill-ink:#23243D;
  --ok:#6FD39A; --warn:#F0C060; --bad:#F08B98;
  --btn-bg:#ECEBF4; --btn-ink:#1B1B24;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow:0 10px 28px -10px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.65);
  --hero-a:#272541; --hero-b:#1F1F2A; --hero-c:#33282C;
  --c-line:#A9B6F0; --c-text:#B3A9F4; --c-work:#9CC0EE; --c-image:#EDB487;
  --c-date:#D6A3E6; --c-health:#F0A0AC; --c-random:#C1A8F2; --c-game:#C1A8F2; --c-baby:#EEA6CB; --c-money:#F2A592; --c-focus:#C1A8F2;
  --c-pale:color-mix(in srgb,var(--c) 18%,var(--surface));
  --c-deep:color-mix(in srgb,var(--c) 70%,var(--ink));
  --peach-ink:#E59A84; --band:#121219; --band-ink:#ECEBF4; --band-muted:#A9A8BE; --band-accent:#C9C2F7;
  color-scheme:dark;
}
.cat-line{--c:var(--c-line)} .cat-text{--c:var(--c-text)} .cat-work{--c:var(--c-work)}
.cat-date{--c:var(--c-date)} .cat-image{--c:var(--c-image)} .cat-health{--c:var(--c-health)} .cat-random{--c:var(--c-random)} .cat-baby{--c:var(--c-baby);--c-pale:color-mix(in srgb,var(--c-baby) 14%,var(--surface));--c-deep:color-mix(in srgb,var(--c-baby) 72%,var(--ink))}
.cat-game{--c:var(--c-game);--c-pale:color-mix(in srgb,var(--c-game) 16%,var(--surface));--c-deep:color-mix(in srgb,var(--c-game) 72%,var(--ink))}

/* ============ 基礎 ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--brand);text-underline-offset:3px}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;font-style:normal;letter-spacing:.01em;overflow-wrap:anywhere;min-width:0}
h3,h4{font-family:var(--font-body)}
/* 版心：1040 寬、左右留白桌機 40 / 平板 28 / 手機 20（2026-10-21 改版：原 1120 / 16，站主反映文字太靠邊） */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.narrow{max-width:880px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad);font-weight:600}
code,kbd{font-family:var(--font-mono);font-size:.9em}
kbd{border:1px solid var(--line-2);border-bottom-width:2px;border-radius:8px;padding:0 7px;color:var(--muted);background:var(--surface);font-size:12px;line-height:22px}
::selection{background:color-mix(in srgb,var(--brand) 25%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
@media (max-width:860px){ .wrap{padding:0 28px} }
@media (max-width:480px){ .wrap{padding:0 20px} }

/* ============ 頁首 ============ */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px)}
.top .wrap{display:flex;align-items:center;gap:12px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1}
.logo .mark{width:36px;height:36px;flex:none}
.logo-name{display:flex;flex-direction:column;gap:2px}
.logo-name b{font-family:var(--font-display);font-weight:900;font-size:21px;letter-spacing:.02em}
.logo-name small{font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--muted)}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap;line-height:1.2}
.nav a:hover{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.top-search{flex:1;max-width:260px;margin-left:16px;position:relative}
.top-search input{width:100%;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  padding:0 14px 0 40px;font:inherit;font-size:14px;color:var(--ink);box-shadow:var(--shadow-sm)}
.top-search svg{position:absolute;left:14px;top:12px;width:18px;height:18px;color:var(--muted)}
body.home .top-search,body.tools-page .top-search{display:none}
.nav a.nav-all{color:var(--ink)}
/* 中寬螢幕（860–1100）只留「所有工具」＋前 3 個分類，頁首搜尋框才不會被擠扁 */

@media (max-width:860px){ .nav{display:none} .top-search{max-width:none;margin-left:auto} }
@media (max-width:480px){ .logo-name small{display:none} .top-search input{height:40px} }

/* ============ 首頁 Hero（滿版：漸層與吉祥物撐滿視窗寬，內容對齊版心） ============ */
.hero{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%)}
.hero::before,.hero::after{content:none}
.hero-art .stage::before{content:"";position:absolute;inset:4%;border-radius:50%;background:var(--brand-pale)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px;
  padding-top:96px;padding-bottom:104px;min-height:600px}
.hero-copy{min-width:0}
.hero .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);
  background:var(--surface);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-sm);line-height:1.2;white-space:nowrap}
.hero .pill i{width:8px;height:8px;border-radius:50%;background:var(--peach);flex:none}
.hero h1{font-size:clamp(32px,4.1vw,60px);line-height:1.18;margin:22px 0 20px;font-weight:800;letter-spacing:.01em;text-wrap:balance}
.hero h1 .accent{color:var(--brand)}
.hero p.sub{color:var(--ink-2);font-size:clamp(16px,1.6vw,19px);line-height:1.75;margin:0 0 32px;max-width:28em}
.hero-art{position:relative;min-width:0;display:grid;place-items:center}
.hero-art .stage{width:min(100%,440px);aspect-ratio:1;display:grid;place-items:center;position:relative}
.hero-art .mascot{position:relative;z-index:1;width:92%;height:auto;transform:translateY(4%)}

.search{position:relative;max-width:560px}
.search input{width:100%;height:60px;border-radius:999px;border:1.5px solid transparent;background:var(--surface);
  padding:0 60px 0 54px;font:inherit;font-size:17px;color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:var(--shadow),0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.search input::placeholder{color:var(--muted)}
.search>svg{position:absolute;left:20px;top:19px;width:22px;height:22px;color:var(--brand)}
.search kbd{position:absolute;right:18px;top:18px}
.hero .search input{padding-right:116px}
.search button{position:absolute;right:7px;top:7px;height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--brand);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:700;line-height:1}
.search button:hover{background:var(--brand-deep)}
.hero-more{margin:14px 0 0;font-size:14px}
.hero-more a{color:var(--ink-2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--peach) 80%,transparent);text-decoration-thickness:2px;text-underline-offset:5px}
.hero-more a:hover{color:var(--brand)}
.search-meta{margin-top:10px;font-size:13.5px;color:var(--muted);min-height:1.5em}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:6px;padding-top:28px;padding-bottom:44px;min-height:0}
  .hero-art{order:-1}
  .hero-art .stage{width:min(56%,220px)}
}
@media (max-width:480px){ .hero .wrap{padding-top:20px;padding-bottom:36px} .search input{height:54px;font-size:16px;padding-left:48px} .search>svg{left:16px;top:16px} .search kbd{display:none}
  .hero .search input{padding-right:92px} .search button{height:42px;top:6px;right:6px;padding:0 16px} }

/* ============ 所有工具頁 /tools/：標題、Bento 工具牆（左側玻璃側欄見下方「所有工具頁 v6」） ============ */
.tools-head{background:linear-gradient(112deg,var(--hero-a) 0%,var(--hero-b) 60%,var(--hero-c) 100%)}
.tools-head .wrap{padding-top:36px;padding-bottom:22px}
.tools-head h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 8px}
.tools-head .lead{margin:0 0 20px}
.tools-head .crumb{margin:0 0 12px}
@media (max-width:480px){ .tools-head .wrap{padding-top:24px;padding-bottom:16px} }
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(140px,auto);grid-auto-flow:dense;gap:14px;margin-top:16px}
.wall .card{margin:0}
/* 小格：版心改 960 後格寬約 230px，圖示與右側留白收一點，名稱才不會斷成兩行 */
.wall .card:not(.big){gap:12px;padding:18px 30px 18px 16px}
.wall .card:not(.big) .ic{width:42px;height:42px;border-radius:14px}
.wall .card:not(.big) .arrow{right:12px}
.wall .ad{grid-column:span 2;margin:0;min-height:0;background:var(--surface-2);border:1px dashed var(--line-2)}
.wall .card.big{grid-column:span 2;flex-direction:column;gap:10px;padding:18px 20px;overflow:hidden}
.wall .card.big.tall{grid-row:span 2;padding:22px 24px;gap:12px}
.wall .card.big::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--c-pale) 0%,var(--surface) 62%);pointer-events:none}
.wall .card.big>*{position:relative}
.wall .card.big>.arrow{position:absolute;color:var(--c)}
.wall .card.big .big-top{display:flex;align-items:center;gap:10px}
.wall .card.big .tag{font-size:12px;font-weight:800;color:var(--c);background:var(--c-pale);border-radius:999px;padding:3px 10px;line-height:1.3}
.wall .card.big .cat-art{position:absolute;right:14px;bottom:8px;width:72px;height:72px;opacity:.9}
.wall .card.big.tall .cat-art{width:128px;height:128px;right:18px;bottom:16px}
.wall .card.big .card-body{display:block;max-width:calc(100% - 84px)}
.wall .card.big.tall .card-body{max-width:calc(100% - 140px)}
.wall .card.big b{font-size:19px;line-height:1.3;margin-bottom:4px}
.wall .card.big.tall b{font-size:23px;margin-bottom:6px}
.wall .card.big .d{font-size:14px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wall .card.big.tall .d{-webkit-line-clamp:5}
.wall .card.big .cta{display:none;margin-top:auto;font-size:13.5px;font-weight:800;color:var(--c)}
.wall .card.big.tall .cta{display:block}
.wall .card.big .ic{width:40px;height:40px;border-radius:13px}
.wall .card.big.wide .big-top{position:absolute;left:20px;top:18px}
.wall .card.big.wide .card-body{padding-top:48px}
.wall .card.big.tall .ic{width:44px;height:44px;border-radius:14px}
@media (max-width:900px){ .wall{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:auto}
  .wall .card.big .cat-art{width:72px;height:72px;right:10px;bottom:8px}
  .wall .card.big.tall .cat-art{width:96px;height:96px}
  .wall .card.big .card-body{max-width:calc(100% - 76px)}
  .wall .card.big.tall .card-body{max-width:calc(100% - 100px)}
  .wall .card.big b{font-size:18px}.wall .card.big.tall b{font-size:19px}
  .wall .card.big.tall .d{-webkit-line-clamp:3}
}
@media (max-width:480px){
  .wall{grid-template-columns:1fr}
  .wall .card.big,.wall .card.big.tall,.wall .ad{grid-column:span 1;grid-row:span 1;padding:18px}
  .wall .card.big.wide .big-top{position:static}
  .wall .card.big.wide .card-body{padding-top:0}
  .wall .card.big.tall .cta{display:none}
  .wall .card{padding:14px 40px 14px 14px}
  .wall .card.big{padding:18px 40px 18px 18px}
}

/* ============ 所有工具頁 v6（2026-10-21）：左側玻璃擬態側欄＋右側 Bento 工具牆 ============
   只用既有 tokens；玻璃＝半透明 surface＋backdrop blur，後方兩團薰衣草／蜜桃柔光讓透明感看得出來。 */
.tools-head .wrap{padding-bottom:26px}
.tools-head .lead{margin:0}
.dir.tools-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:28px;align-items:start;padding-top:28px}
.tools-main{min-width:0}

/* 側欄外框（sticky）與後方柔光 */
.side{position:sticky;top:84px;z-index:2}
.side-glow{position:absolute;border-radius:50%;pointer-events:none}
.side-glow.g1{width:220px;height:220px;left:-40px;top:-36px;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 55%,transparent) 0%,color-mix(in srgb,var(--brand) 22%,transparent) 42%,transparent 70%)}
.side-glow.g2{width:200px;height:200px;right:-44px;bottom:12%;
  background:radial-gradient(circle,color-mix(in srgb,var(--peach) 65%,transparent) 0%,color-mix(in srgb,var(--peach) 25%,transparent) 42%,transparent 70%)}

/* 玻璃面板 */
.glass{position:relative;z-index:1;padding:16px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--surface) 85%,transparent);
  box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--surface) 90%,transparent);
  max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}

/* 側欄搜尋框（取代原本 hero 大搜尋） */
.side-search{max-width:none}
.side-search input{height:46px;font-size:15px;padding:0 44px 0 42px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:var(--shadow-sm)}
.side-search input:focus{box-shadow:var(--shadow-sm),0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.side-search>svg{left:15px;top:14px;width:18px;height:18px}
.side-search kbd{right:12px;top:11px}
.side .search-meta{margin:8px 6px 0;font-size:12.5px;min-height:1.4em}

/* 分類清單（同時是 SEO 用的分類錨點：id＝分類 key） */
.side-cats{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.side-cats a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;
  font-size:14.5px;font-weight:600;line-height:1.2;transition:background .15s,color .15s,box-shadow .15s;scroll-margin-top:96px}
.side-cats .cat-art{width:28px;height:28px;flex:none}
.side-cats .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-cats small{margin-left:auto;min-width:28px;text-align:center;padding:2px 7px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted)}
.side-cats a:hover{background:color-mix(in srgb,var(--surface) 65%,transparent);color:var(--ink)}
.side-cats a[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
.side-cats a[aria-current="true"] small{background:var(--c-pale);color:var(--c-deep)}
/* 「全部工具」的小圖：2×2 方塊 */
.cat-dot{flex:none;width:28px;height:28px;border-radius:9px;background:var(--brand-pale);position:relative}
.cat-dot::before{content:"";position:absolute;inset:8px;
  background:linear-gradient(var(--brand) 0 0) 0 0/5px 5px no-repeat,linear-gradient(var(--brand) 0 0) 100% 0/5px 5px no-repeat,
    linear-gradient(var(--peach) 0 0) 0 100%/5px 5px no-repeat,linear-gradient(var(--brand) 0 0) 100% 100%/5px 5px no-repeat}

/* 最近使用（有紀錄才顯示） */
.side .recent{margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.side-label{margin:0 0 6px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);line-height:1.4}
.side .recent-list{flex-direction:column;gap:2px;overflow:visible;padding:0}
.side .recent-list a{background:none;border:0;box-shadow:none;padding:5px 8px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.3}
.side .recent-list a:hover{background:color-mix(in srgb,var(--surface) 65%,transparent);color:var(--ink)}
.side .recent-list .ic{width:26px;height:26px;border-radius:8px}
.side .recent-list .ic svg{width:15px;height:15px}

/* Bento 工具牆：4 欄；小格改成直排（圖示在上、名稱、一行說明） */
.tools-layout .wall{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(156px,auto);gap:14px;margin-top:0}
.tools-layout .wall .card:not(.big){flex-direction:column;gap:12px;padding:18px 18px 16px}
.tools-layout .wall .card:not(.big) .ic{width:40px;height:40px;border-radius:13px}
.tools-layout .wall .card:not(.big) .arrow{right:14px;top:16px}
.tools-layout .wall .card:not(.big) b{font-size:15.5px}
.tools-layout .wall .card:not(.big) .d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tools-layout .wall .card.big.tall .d{-webkit-line-clamp:4}
.tools-layout .empty{padding-top:56px}

@media (max-width:1180px){ .tools-layout .wall{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 手機／平板：側欄不 sticky，變成頁面上方一塊玻璃面板（搜尋＋橫向捲動分類籤） */
@media (max-width:900px){
  .dir.tools-layout{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:18px;overflow-x:clip}
  .side{position:relative;top:auto}
  .side-glow.g1{width:170px;height:170px;left:-30px;top:-30px}
  .side-glow.g2{width:150px;height:150px;right:-30px;bottom:-40px}
  .glass{max-height:none;overflow:visible;padding:14px}
  .side-cats{flex-direction:row;gap:6px;overflow-x:auto;margin:10px -14px 0;padding:2px 14px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side-cats::-webkit-scrollbar{display:none}
  .side-cats li{flex:none}
  .side-cats a{padding:5px 12px 5px 5px;border-radius:999px;font-size:13.5px;background:color-mix(in srgb,var(--surface) 55%,transparent)}
  .side-cats .cat-art,.side-cats .cat-dot{width:26px;height:26px}
  .side-cats .cat-dot{border-radius:50%}
  .side-cats .cat-dot::before{inset:7px}
  .side-cats small{min-width:0;padding:1px 6px;margin-left:2px}
  .side .recent-list{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .side .recent-list a{flex:none;background:color-mix(in srgb,var(--surface) 55%,transparent);border-radius:999px;padding:4px 12px 4px 4px}
  .side .recent-list .ic{border-radius:50%}
  .tools-layout .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:auto}
}
@media (max-width:480px){
  .tools-layout .wall{grid-template-columns:minmax(0,1fr)}
  .tools-layout .wall .card:not(.big){flex-direction:row;gap:12px;padding:14px 40px 14px 14px}
  .tools-layout .wall .card:not(.big) .arrow{top:16px}
}
/* 深色：玻璃邊改成淡淡的亮線，柔光收斂 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .glass{border-color:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
  :root:not([data-theme="light"]) .side-glow{opacity:.5}
}
:root[data-theme="dark"] .glass{border-color:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
:root[data-theme="dark"] .side-glow{opacity:.5}

/* ============ 分類籤（首頁用 chips，工具頁的 .chip 也沿用） ============ */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0}
.chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:14px;font-weight:700;line-height:1;
  box-shadow:var(--shadow-sm);transition:background-color .15s,border-color .15s,color .15s}
.chip .cat-art{width:26px;height:26px;flex:none}
.chip small{color:var(--muted);font-weight:600;font-size:12.5px}
.chip:hover{border-color:color-mix(in srgb,var(--c) 40%,var(--line));color:var(--ink)}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.chip[aria-pressed="true"] small{color:rgba(255,255,255,.8)}
.chip.all[aria-pressed="true"]{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}
.chip.all[aria-pressed="true"] small{color:color-mix(in srgb,var(--btn-ink) 70%,transparent)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#17172A} :root:not([data-theme="light"]) .chip[aria-pressed="true"] small{color:rgba(23,23,42,.75)} }
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#17172A} :root[data-theme="dark"] .chip[aria-pressed="true"] small{color:rgba(23,23,42,.75)}
.tools-page .chips{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 10px;margin:20px 0 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tools-page .chip{flex:none}
@media (max-width:480px){ .chip{height:40px;font-size:13.5px;padding:0 14px 0 10px} }

/* ============ 目錄 ============ */
.dir{padding-top:8px;padding-bottom:64px}   /* 只設上下，左右沿用 .wrap 留白（原本 padding 簡寫把左右歸零，牆比籤列寬） */
.recent{margin-top:28px}
.recent[hidden]{display:none}
.recent-list{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.recent-list a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;line-height:1;box-shadow:var(--shadow-sm)}
.recent-list a:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.recent-list .ic{width:30px;height:30px;border-radius:50%}
.recent-list .ic svg{width:16px;height:16px}
.sec{margin-top:44px}
.sec[hidden]{display:none}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.sec-head .cat-art{width:48px;height:48px;flex:none}
.sec-head h2{margin:0;font-size:24px;line-height:1.2}
.sec-head .sec-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sec-head p{margin:0;color:var(--muted);font-size:14px}
.sec-head .count{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.empty{text-align:center;padding:40px 16px 56px;color:var(--ink-2)}
.empty[hidden]{display:none}
.empty .mascot{width:180px;height:auto;margin:0 auto 8px}
.empty p{margin:8px 0 0}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px 36px 18px 18px;border-radius:var(--r);
  background:var(--surface);border:1px solid transparent;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card:active{transform:translateY(0)}
.card[hidden]{display:none}
.card b{display:block;font-size:16px;line-height:1.4;margin-bottom:3px;font-weight:700}
.card .d{display:block;color:var(--muted);font-size:13.5px;line-height:1.6}
.card .arrow{position:absolute;right:16px;top:18px;width:16px;height:16px;color:var(--line-2);transition:color .18s,transform .18s}
.card:hover .arrow{color:var(--c);transform:translate(2px,-2px)}
.badge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:2px;line-height:1.6;
  color:var(--c);background:var(--c-pale);border-radius:999px;padding:0 6px;font-family:var(--font-body)}
.ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;font-size:24px;line-height:1;
  background:var(--c-pale);color:var(--c)}
.ic svg{width:24px;height:24px;display:block}
mark{background:color-mix(in srgb,var(--sun) 55%,transparent);color:inherit;border-radius:4px;padding:0 1px}
@media (max-width:480px){ .cards{grid-template-columns:1fr;gap:10px} .card{padding:14px 40px 14px 14px} .ic{width:44px;height:44px;border-radius:14px} }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card{border-color:var(--line)} }
:root[data-theme="dark"] .card{border-color:var(--line)}

/* ============ 工具頁 ============ */
.tool-head{padding:24px 0 4px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--ink)}
.title-row{display:flex;gap:18px;align-items:flex-start}
.title-row .cat-art{width:64px;height:64px;flex:none;margin-top:2px}
.title-row>div{min-width:0}
.tool-head h1{font-size:clamp(26px,4.2vw,38px);line-height:1.22;margin:0;font-weight:700}
.lead{color:var(--ink-2);margin:10px 0 0;max-width:46em}
main.page{padding-bottom:64px}
main.page h2{font-size:23px;margin:48px 0 12px;line-height:1.25}
main.page h3{font-size:17px;margin:26px 0 8px;font-weight:800}
@media (max-width:480px){ .title-row{gap:12px} .title-row .cat-art{width:52px;height:52px} }

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:20px 0;box-shadow:var(--shadow-sm)}
.panel.main-tool{border:1.5px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lg);position:relative}
.panel.main-tool::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 7%,transparent)}
@media (max-width:480px){ .panel{padding:16px;border-radius:18px} .panel.main-tool{padding:18px 16px;border-radius:22px} }
/* 窄螢幕保險：工具頁自訂的 min-width（如加班費的下拉選單 220px）不得撐破版面 */
@media (max-width:400px){ .panel div{min-width:0} .panel select,.panel input{min-width:0!important;max-width:100%} }
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
label{font-weight:600;font-size:15px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:9px 12px;max-width:100%;min-height:44px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
input:disabled,select:disabled,textarea:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
textarea{width:100%;min-height:200px;resize:vertical;line-height:1.7}
input[type=range]{padding:0;accent-color:var(--c);min-height:0}
input[type=checkbox],input[type=radio]{accent-color:var(--c);width:18px;height:18px;vertical-align:-3px;min-height:0;padding:0}
input[type=color]{min-height:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;background:var(--btn-bg);color:var(--btn-ink);font:inherit;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background-color .15s,color .15s,transform .1s,box-shadow .15s}
.btn:hover{box-shadow:var(--shadow)} .btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--c);color:var(--c)}
.btn.soft{background:var(--c-pale);color:var(--c);box-shadow:none}
.btn.soft:hover{background:color-mix(in srgb,var(--c) 22%,var(--surface))}
.btn-lg{min-height:56px;padding:0 32px;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.stat{background:var(--c-pale);border-radius:16px;padding:14px 16px}
.stat b{display:block;font-size:25px;line-height:1.25;font-variant-numeric:tabular-nums;font-family:var(--font-serif);font-weight:800}
.stat span{font-size:13px;color:var(--ink-2)}
.table-wrap{overflow-x:auto;border-radius:16px}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--surface);font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--c-pale);font-weight:700;font-size:14px}
.table-wrap table{border:1px solid var(--line);border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden}
.table-wrap tr:last-child td{border-bottom:0}
.drop{border:2px dashed color-mix(in srgb,var(--c) 40%,var(--line-2));border-radius:var(--r);padding:36px 16px;text-align:center;cursor:pointer;background:var(--c-pale);transition:border-color .15s,background-color .15s}
.drop:hover,.drop.over{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,var(--surface))}
.steps{padding-left:22px} .steps li{margin:8px 0}
.note{background:var(--c-pale);padding:14px 18px;border-radius:16px;font-size:15px;margin:20px 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.feature b{display:block;margin:10px 0 4px}
.feature span{color:var(--muted);font-size:14.5px}
.feature .ic{width:44px;height:44px;font-size:22px;border-radius:14px}

/* 可複製的符號格 */
.grid-copy{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.grid-copy button{height:56px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:24px;
  cursor:pointer;color:var(--ink);transition:border-color .12s,background-color .12s,transform .12s}
.grid-copy.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid-copy.wide button{font-size:16px}
.grid-copy button:hover{border-color:var(--c);background:var(--c-pale);transform:translateY(-2px)}
.grid-copy button:active{transform:translateY(0)}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 18px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:400;font-size:22px;line-height:1.2;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:8px 0 2px;color:var(--ink-2)}
.ad{margin:28px 0;min-height:100px;border-radius:var(--r);overflow:hidden}
.related{margin-top:48px}

/* 提示 */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:50;
  background:var(--btn-bg);color:var(--btn-ink);padding:10px 20px;border-radius:999px;font-size:15px;font-weight:700;box-shadow:var(--shadow-lg);
  transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ 首頁 v3（2026-10-21）：精選三工具、製作原則、關於這個站、依分類找 ============
   節制：首頁只用 --brand（主）＋ --peach（點綴）；分類色只出現在精選卡的編號與分類小標文字。
   區塊上下距：桌機 112px／平板 80px／手機 60px；底色奶油（--paper）與白（--surface）交替，中間一條深色帶（--band）。 */
.hs{padding:112px 0}
.hs-feat{background:var(--paper)}
.hs-prin{background:var(--surface)}
.hs-cats{background:var(--paper)}
.eyebrow{margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--brand)}
.hs p{text-wrap:pretty}
.hs h2{margin:0;font-size:clamp(30px,4vw,50px);line-height:1.24;letter-spacing:.01em}
.hs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
.hs-head .more,.go{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid var(--peach);padding-bottom:3px;transition:color .15s,border-color .15s}
.hs-head .more:hover,.go:hover{color:var(--brand);border-color:var(--brand)}

/* 精選三工具：大卡片，左文字右畫面縮影，第二張左右對調 */
.feats{display:grid;gap:24px}
.feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:56px;
  padding:64px 72px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,transform .2s}
.feat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.feat.flip .feat-copy{order:2}
.feat-kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14px;font-weight:700;color:var(--peach-ink)}
.feat-kicker .num{font-family:var(--font-serif);font-size:15px;font-variant-numeric:tabular-nums}
.feat h3{margin:0 0 16px;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.22}
.feat-desc{margin:0 0 24px;color:var(--ink-2);font-size:16.5px;line-height:1.85;max-width:26em}
.feat-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0}
.feat-tags li{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 12px;line-height:1.5}
.feat .go::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* 整張卡可點 */
.feat-view{border-radius:var(--r);padding:32px 24px;background:var(--brand-pale);display:grid;place-items:center;min-height:300px}
.feat.flip .feat-view{background:var(--brand-pale)}

/* 縮影小卡（三個共用） */
.mini{width:100%;max-width:340px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.mini-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;font-weight:700;font-size:14px}
.mini-head .muted{font-weight:500;font-size:12px}
.mini-foot{margin:12px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.65}
.mini-foot b{color:var(--ink)}
/* 01 月曆 */
.mini-legend{display:flex;align-items:center;gap:5px;font-weight:500;font-size:11.5px;color:var(--muted)}
.mini-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-left:6px}
.mini-legend i.off{background:var(--brand-pale)} .mini-legend i.leave{box-shadow:inset 0 0 0 1.5px var(--peach)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-variant-numeric:tabular-nums}
.cal-grid b{font-size:11px;font-weight:600;color:var(--muted);padding-bottom:2px}
.cal-grid i{font-style:normal;font-size:12.5px;line-height:28px;border-radius:8px;color:var(--ink-2)}
.cal-grid i.we{color:var(--muted)}
.cal-grid i.off{background:var(--brand-pale);color:var(--brand-deep);font-weight:700}
.cal-grid i.leave{background:transparent;box-shadow:inset 0 0 0 1.5px var(--peach);color:var(--peach-ink);font-weight:700}
.cal-grid i.wk{background:transparent;color:var(--brand-deep);font-weight:700}
/* 02 加班費 */
.ot-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.ot-row span small{margin-left:8px;color:var(--muted);font-size:12px}
.ot-row b,.ot-sum b{font-variant-numeric:tabular-nums;font-weight:700}
.ot-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding-top:12px;border-top:1.5px solid var(--ink)}
.ot-sum span{font-weight:700}
.ot-sum b{font-family:var(--font-serif);font-size:24px;font-weight:800;color:var(--brand-deep)}
.ot-sum b small{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-2)}
/* 03 貼圖檢查 */
.ck-bad{font-size:12.5px;color:var(--bad)}
.mini-ck{max-width:380px}
.ck-row{display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.ck-row .fn{grid-column:1;grid-row:1}
.ck-row .sz{grid-column:1;grid-row:2;font-size:11.5px}
.ck-row .rs{grid-column:2;grid-row:1/3;align-self:center}
.ck-row .fn{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.ck-row .sz{color:var(--muted);font-variant-numeric:tabular-nums}
.ck-row.ok .rs{color:var(--ok);font-weight:600}
.ck-row.bad .rs{color:var(--bad);font-weight:600}

/* 製作原則：一張大卡，三欄細線分隔 */
.prins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}
.prin{padding:48px 44px 52px}
.prin+.prin{border-left:1px solid var(--line)}
.prin .num{display:block;font-family:var(--font-serif);font-size:15px;font-weight:800;color:var(--peach-ink);margin-bottom:28px;font-variant-numeric:tabular-nums}
.prin h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.35}
.prin p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.85}
.hs-prin+.ad{margin:0;border-radius:0}

/* 關於這個站：深色滿版帶 */
.hs-about{background:var(--band);color:var(--band-ink)}
.hs-about .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.about-art{display:grid;place-items:center;position:relative}
.about-art::before{content:"";position:absolute;width:min(92%,330px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--band-accent) 22%,transparent)}
.about-mascot{position:relative;width:min(100%,320px);height:auto}
.hs-about .eyebrow{color:var(--peach)}
.hs-about h2{color:var(--band-ink);margin-bottom:24px}
.about-copy p:not(.eyebrow){margin:0 0 16px;color:var(--band-muted);font-size:17px;line-height:1.9;max-width:34em}
.hs-about .go{display:inline-block;margin-top:12px;color:var(--band-ink)}
.hs-about .go:hover{color:var(--band-accent);border-color:var(--band-accent)}

/* 依分類找：左說明、右清單 */
.hs-cats .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:64px;align-items:start}
.cats-intro p:not(.eyebrow){margin:18px 0 28px;color:var(--ink-2);font-size:15.5px;line-height:1.8;max-width:22em}
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.cat-list li{border-bottom:1px solid var(--line-2)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:22px 4px;text-decoration:none;color:var(--ink);transition:background-color .15s}
.cat-list a:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.cl-name{font-weight:700;font-size:18px;line-height:1.4}
.cl-desc{grid-column:1;font-size:15px;color:var(--muted);line-height:1.6;margin-top:2px}
.cl-n{grid-column:2;grid-row:1/3;align-self:center;font-size:13.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-list a:hover .cl-name{color:var(--brand)}
.home .foot{margin-top:0}

@media (max-width:900px){
  .hs{padding:80px 0}
  .feat{grid-template-columns:1fr;gap:32px;padding:40px 36px}
  .feat.flip .feat-copy{order:0}
  .feat-view{min-height:0}
  .hs-about .wrap,.hs-cats .wrap{grid-template-columns:1fr;gap:36px}
  .about-art .about-mascot{width:200px}
  .about-art::before{width:220px}
}
@media (max-width:760px){
  .prins{grid-template-columns:1fr}
  .prin{padding:28px 26px 30px}
  .prin+.prin{border-left:0;border-top:1px solid var(--line)}
  .prin .num{margin-bottom:12px}
  .hs-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
}
@media (max-width:480px){
  .hs{padding:60px 0}
  .hs-head{margin-bottom:28px}
  .feats{gap:16px}
  .feat{padding:26px 20px 24px;border-radius:22px;gap:24px}
  .feat-view{padding:18px 14px;border-radius:16px}
  .mini{padding:14px 14px}
  .ck-row{grid-template-columns:auto minmax(0,1fr)}
  .ck-row .sz{grid-column:2;grid-row:1}
  .ck-row .rs{grid-column:1/-1;grid-row:2}
  .cat-list a{padding:16px 2px}
}

/* ============ 頁尾 ============ */
.foot{margin-top:24px;background:var(--brand-pale);border-radius:var(--r-lg) var(--r-lg) 0 0;font-size:14px;color:var(--ink-2)}
.foot .wrap{padding-top:40px;padding-bottom:28px;display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:28px}
.foot .about-col p{margin:12px 0 0;max-width:30em;line-height:1.7}
.foot .about-col .links{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap}
.foot .about-col .links a{white-space:nowrap}
.foot h4{margin:0 0 10px;color:var(--ink);font-size:14px;font-weight:800}
.foot ul{list-style:none;padding:0;margin:0} .foot li{margin:6px 0}
.foot a{color:var(--ink-2);text-decoration:none} .foot a:hover{color:var(--brand)}
.foot .copy{grid-column:1/-1;border-top:1px solid color-mix(in srgb,var(--brand) 18%,transparent);padding-top:16px;margin:8px 0 0;color:var(--muted);font-size:13px}
@media (max-width:760px){ .foot .wrap{grid-template-columns:1fr 1fr;padding-top:32px;padding-bottom:24px} .foot .about-col{grid-column:1/-1} }
@media (max-width:400px){ .foot .wrap{grid-template-columns:1fr} }

/* ============ 404 ============ */
.notfound{text-align:center;padding:40px 0 24px}
.notfound .mascot{width:min(60%,260px);height:auto;margin:0 auto}
.notfound h1{font-size:clamp(28px,5vw,40px);margin:12px 0 6px}
.notfound p{color:var(--ink-2);margin:0 0 20px}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ============ 吉祥物動畫（2026-10-21）：浮動、眨眼、鉛筆寫字、太陽光芒轉動、星星閃爍；疑惑版會歪頭、問號彈跳 ============ */
.mascot .m-float{animation:m-bob 3.6s ease-in-out infinite}
.mascot .m-float.m-puzzled{transform-origin:130px 216px;animation:m-tilt 4s ease-in-out infinite}
.mascot .m-shadow{transform-box:fill-box;transform-origin:center;animation:m-shadow 3.6s ease-in-out infinite}
.mascot .m-eyes{transform-box:fill-box;transform-origin:center;animation:m-blink 5.2s infinite}
.mascot .m-rays{transform-origin:200px 56px;animation:m-sway 3.6s ease-in-out infinite alternate}
.mascot .m-star-spin{transform-box:fill-box;transform-origin:center;animation:m-spin 7s linear infinite}
.mascot .m-sun{transform-box:fill-box;transform-origin:center;animation:m-sun 3s ease-in-out infinite}
.mascot .m-pencil{transform-origin:108px 195px;animation:m-write 2.8s ease-in-out infinite}
.mascot .m-star{transform-box:fill-box;transform-origin:center;animation:m-twinkle 2.6s ease-in-out infinite}
.mascot .m-q{transform-box:fill-box;transform-origin:center bottom;animation:m-hop 1.6s ease-in-out infinite}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes m-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:.12}50%{transform:scaleX(.84);opacity:.06}}
@keyframes m-blink{0%,89%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-sway{from{transform:rotate(-14deg) scale(.96)}to{transform:rotate(14deg) scale(1.05)}}
@keyframes m-write{0%,100%{transform:rotate(0)}15%{transform:rotate(-5deg)}30%{transform:rotate(3deg)}45%{transform:rotate(-4deg)}60%{transform:rotate(2deg)}75%,90%{transform:rotate(0)}}
@keyframes m-twinkle{0%,100%{transform:scale(.82) rotate(0)}50%{transform:scale(1.15) rotate(14deg)}}
@keyframes m-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(0) scale(1,.94)}}
@keyframes m-sun{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes m-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.035)}}
@keyframes m-twinkle-soft{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes m-glow-soft{0%,100%{opacity:1}50%{opacity:.55}}
/* 系統開了「減少動態效果」時：關掉會移動身體的動態（浮動、歪頭、鉛筆、彈跳），
   只保留不會讓人頭暈的低動態：太陽緩轉與呼吸、星星閃爍、背景圓圈呼吸、眨眼。 */
@media (prefers-reduced-motion:reduce){
  .mascot .m-float,.mascot .m-shadow,.mascot .m-pencil,.mascot .m-q{animation:none!important}
  .mascot .m-rays{animation:m-sway 4.4s ease-in-out infinite alternate!important}
  .mascot .m-sun{animation:m-sun 4s ease-in-out infinite!important}
  .mascot .m-star{animation:m-twinkle-soft 2.8s ease-in-out infinite!important}
  .mascot .m-star-spin{animation:m-spin 9s linear infinite!important}
  .mascot .m-eyes{animation:m-blink 5.2s infinite!important}
}

/* 頁首／頁尾標誌（版本 4：好日子工具箱／GOODDAY TOOLBOX 等寬，英文薰衣草紫） */
.logo .lockup-hdr{height:42px;width:auto;flex:none;display:block}
.foot .logo .lockup-hdr{height:46px}
@media (max-width:480px){ .logo .lockup-hdr{height:36px} }

/* 吉祥物背後的光波背景（waves.js，WebGL）；載入成功才隱藏原本的淡紫圓圈 */

/* ============ 首頁「依分類找」：圖卡環（2026-10-21，參考站主提供的環形卡片動畫） ============
   卡片排在圓周上；進入畫面時從正上方開始順時針依序由模糊變清楚，之後整圈慢慢轉、卡片保持正立；滑過時暫停。 */
.hs-cats .wrap{display:block}
.orbit{--R:300px;--card:128px;position:relative;height:calc(var(--R)*2 + var(--card) + 70px);display:grid;place-items:center}
.orbit-center{position:relative;z-index:2;text-align:center;max-width:22em}
.orbit-center h2{margin:0 0 14px;font-size:clamp(28px,3vw,40px);line-height:1.3;white-space:nowrap}
.orbit-center p:not(.eyebrow){margin:0 0 22px;color:var(--ink-2);font-size:16px}
.orbit-center,.orbit-center>*{transition:opacity .7s ease,filter .7s ease,transform .7s ease}
.orbit-ring{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%;width:0;height:0;animation:orbit-spin 90s linear infinite}
.orb-item{position:absolute;left:0;top:0;width:var(--card);margin:calc(var(--card)*-0.62) 0 0 calc(var(--card)*-0.5);
  transform:rotate(calc(var(--i) / var(--n) * 1turn)) translateY(calc(var(--R) * -1)) rotate(calc(var(--i) / var(--n) * -1turn))}
.orb-spin{animation:orbit-spin 90s linear infinite reverse}
.orb-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);text-align:center;
  transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;transition-delay:calc(var(--i) * 110ms + 350ms)}
.orb-art{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:var(--c-pale)}
.orb-art .cat-art{width:52px;height:52px}
.orb-card b{font-size:15px;line-height:1.3}
.orb-card small{font-size:12.5px;color:var(--muted)}
.orb-card:hover{border-color:var(--c);box-shadow:var(--shadow-lg);transform:translateY(-4px) scale(1.04);transition-delay:0s}
.orbit:hover .orbit-ring,.orbit:hover .orb-spin,.orbit:focus-within .orbit-ring,.orbit:focus-within .orb-spin{animation-play-state:paused}
/* 進場前：卡片與中間文字先藏起來（只有 JS 生效時才會加 .orbit-wait，沒有 JS 就直接顯示） */
.orbit-wait .orb-card{opacity:0;filter:blur(10px);transform:scale(.7)}
.orbit-wait .orbit-center>*{opacity:0;filter:blur(8px);transform:translateY(8px)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@media (max-width:1000px){ .orbit{--R:250px;--card:116px} }
/* 手機：圓環放不下，改成兩欄圖卡，依序浮現，不轉動 */
@media (max-width:760px){
  .orbit{height:auto;display:block}
  .orbit-center{margin:0 auto 28px}
  .orbit-ring{position:static;width:auto;height:auto;animation:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
  .orb-item{position:static;width:auto;margin:0;transform:none}
  .orb-spin{animation:none}
  .orb-card{transition-delay:calc(var(--i) * 70ms + 200ms)}
}
/* 系統「減少動態效果」：保留依序淡入，轉動放得很慢 */
@media (prefers-reduced-motion:reduce){
  .orbit-ring{animation:orbit-spin 240s linear infinite!important}
  .orb-spin{animation:orbit-spin 240s linear infinite reverse!important}
  .orb-card,.orbit-center,.orbit-center>*{transition-property:opacity,filter!important;transition-duration:.6s!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){ .orbit-ring,.orb-spin{animation:none!important} }

/* ============ 吉祥物背後的圓：不動，做成些微立體的球（2026-10-21 站主要求取消流光） ============ */
:root{--sphere-hi:#FFFFFF;--sphere-lo:color-mix(in srgb,var(--brand) 22%,var(--brand-pale))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sphere-hi:#4C4874;--sphere-lo:#211F33}}
:root[data-theme="dark"]{--sphere-hi:#4C4874;--sphere-lo:#211F33}
.hero-art .stage::before{
  background:radial-gradient(circle at 33% 28%,var(--sphere-hi) 0%,color-mix(in srgb,var(--sphere-hi) 35%,var(--brand-pale)) 22%,var(--brand-pale) 52%,var(--sphere-lo) 100%);
  box-shadow:inset -10px -14px 28px color-mix(in srgb,var(--brand) 10%,transparent),0 22px 36px -22px color-mix(in srgb,var(--brand) 40%,transparent)}

/* ============ 首頁 v3（bento）：依站主提供的 24 條清爽介面原則 ============
   圓角克制（8–14px，不做滿版膠囊）、單點高亮（只有「找工具」是實心主色按鈕）、
   品牌色少用（主色只在連結與重點數字）、對齊秩序（同一個網格）、可掃描（分類卡用清單）。 */
html.v3{--r:12px;--r-lg:14px;--r-sm:8px}
html.v3 .btn,html.v3 .search button{border-radius:10px}
html.v3 .search input{border-radius:12px}
html.v3 .top-search input{border-radius:10px}
.v3-top{padding:24px 0 0}
.cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);min-width:0}
a.cell{color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.cell:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:var(--shadow)}
.v3-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.v3-mascot{display:grid;place-items:center;background:color-mix(in srgb,var(--brand-pale) 45%,var(--surface));padding:24px}
.v3-mascot .hero-art{width:100%}
.v3-mascot .stage{width:min(100%,340px);margin:0 auto}
.v3-intro{display:flex;flex-direction:column;justify-content:center;padding:48px 52px}
.v3-intro h1{font-size:clamp(30px,3.4vw,48px);line-height:1.22;margin:0 0 14px;font-weight:800;letter-spacing:.01em}
.v3-intro .sub{margin:0 0 26px;color:var(--ink-2);font-size:17px}
.v3-intro .search{max-width:none}
.v3-intro .search input{padding-right:120px;box-shadow:none;border:1px solid var(--line-2);background:var(--paper)}
.v3-intro .search input:focus{background:var(--surface)}
.hot{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14.5px}
.hot span{color:var(--muted)}
.hot a{color:var(--ink-2);text-decoration:none;border-bottom:1px dashed var(--line-2)}
.hot a:hover{color:var(--brand);border-color:var(--brand)}
.v3-sec{padding:56px 0 0}
.v3-last{padding-bottom:64px}
.v3-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
main .v3-head h2{margin:0;font-size:22px}
.v3-head a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.v3-head a:hover{color:var(--brand)}
/* 常用的幾樣：4 欄 bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(168px,auto);gap:16px}
.b-kicker{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--c-deep)}
.b-line{grid-column:span 2;grid-row:span 2;position:relative;display:flex;flex-direction:column;background:color-mix(in srgb,var(--c) 6%,var(--surface))}
.b-line-art{position:absolute;right:24px;top:24px}
.b-line-art .cat-art{width:72px;height:72px}
main .b-line h3{margin:0 0 10px;font-size:24px;line-height:1.35;max-width:12em}
.b-line h3 a{color:var(--ink);text-decoration:none}
.b-line h3 a:hover{color:var(--c-deep)}
.b-desc{margin:0 0 auto;color:var(--ink-2);font-size:15.5px;line-height:1.8;max-width:30em}
.b-links{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.b-links li{border-bottom:1px solid var(--line)}
.b-links a{display:flex;justify-content:space-between;padding:11px 2px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.b-links a::after{content:"→";color:var(--muted)}
.b-links a:hover{color:var(--c-deep)}
.b-hol{grid-column:span 2;display:flex;flex-direction:column}
.hol-num{margin:2px 0 6px;display:flex;align-items:baseline;gap:8px}
.hol-num b{font-family:var(--font-serif);font-size:56px;line-height:1;color:var(--c-deep);font-variant-numeric:tabular-nums}
.hol-num span{font-size:16px;font-weight:700;color:var(--ink-2)}
.hol-txt{margin:0;font-size:15.5px;color:var(--ink)}
.hol-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hol-note:empty{display:none}
.b-ot,.b-small{display:flex;flex-direction:column;gap:4px}
.b-ot b,.b-small b{font-size:16.5px;margin-top:10px}
.b-ot span,.b-small span{font-size:14px;color:var(--muted);line-height:1.6}
.b-formula{margin-top:auto;align-self:flex-start;font-family:var(--font-body);font-size:13.5px;color:var(--c-deep);background:var(--c-pale);border-radius:8px;padding:4px 10px}
.b-roc{display:flex;flex-direction:column}
.b-roc-h{display:flex;align-items:center;gap:10px}
.b-roc-h b{font-size:16.5px}
.b-roc-h a{margin-left:auto;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.b-roc-h a:hover{color:var(--brand)}
.b-roc-row{margin-top:auto;display:flex;align-items:flex-end;gap:8px}
.b-roc-row label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.b-roc-row input{width:100%;height:46px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);font:inherit;font-size:20px;font-weight:700;color:var(--ink);padding:0 12px}
.b-roc-row input:focus{outline:none;border-color:var(--c);background:var(--surface)}
.b-roc-row span{padding-bottom:12px;color:var(--muted)}
/* 依分類找：3 欄、可掃描的清單卡 */
.ci-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ci{display:flex;flex-direction:column;padding:22px 24px}
.ci-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ci-h .cat-art{width:32px;height:32px;flex:none}
.ci-h b{font-size:16.5px}
.ci-h span{margin-left:auto;font-size:13px;font-weight:700;color:var(--c-deep);background:var(--c-pale);border-radius:8px;padding:1px 9px}
.ci ul{list-style:none;margin:0 0 12px;padding:0}
.ci li a{display:block;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:15px}
.ci li:last-child a{border-bottom:0}
.ci li a:hover{color:var(--ink)}
.ci-more{margin-top:auto;font-size:14px;font-weight:600;color:var(--c-deep);text-decoration:none}
/* 最下方：最近更新＋承諾 */
.v3-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.st-lbl{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.st-news{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.6}
.st-news time{display:inline-block;margin-right:10px;font-family:var(--font-serif);color:var(--brand-deep);font-weight:800}
.st-more{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.st-more:hover{color:var(--brand)}
.st-promise{list-style:none;margin:0;display:grid;gap:12px}
.st-promise li{display:grid;grid-template-columns:22px auto 1fr;align-items:center;gap:10px;font-size:15px}
.st-promise svg{width:20px;height:20px}
.st-promise span{color:var(--muted);font-size:14px}
@media (max-width:1000px){
  .v3-hero{grid-template-columns:1fr}
  .v3-mascot .stage{width:min(60%,260px)}
  .v3-intro{padding:32px 28px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ci-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .b-line,.b-hol{grid-column:auto;grid-row:auto}
  .b-line-art .cat-art{width:52px;height:52px}
  main .b-line h3{font-size:21px;padding-right:56px}
  .ci-grid,.v3-strip{grid-template-columns:1fr}
  .cell{padding:22px}
  .v3-intro .search input{padding-right:96px}
  .st-promise li{grid-template-columns:22px 1fr}
  .st-promise li span{grid-column:2}
}

/* v3 配色（參考 Edulite 的氣質：大塊薰衣草紫與蜜桃色、深藍黑主按鈕、其餘留白） */
html.v3{--lav:#A99FEA;--lav-ink:#2A2550;--peach-blk:#F7D3C5;--peach-blk-ink:#5A2E22}
@media (prefers-color-scheme: dark){html.v3:not([data-theme="light"]){--lav:#4A4479;--lav-ink:#F1EFFC;--peach-blk:#4A3530;--peach-blk-ink:#FBE4DB}}
html.v3 .search button{background:var(--btn-bg);color:var(--btn-ink)}
html.v3 .search button:hover{background:color-mix(in srgb,var(--btn-bg) 85%,var(--brand))}
html.v3 .search>svg{color:var(--ink-2)}
.v3-mascot{background:var(--lav);border-color:transparent}
.v3-mascot .stage::before{--brand-pale:color-mix(in srgb,#FFFFFF 55%,var(--lav));--sphere-lo:color-mix(in srgb,var(--lav) 70%,#2A2550)}
.b-line{background:var(--peach-blk);border-color:transparent;--c-deep:var(--peach-blk-ink)}
.b-line .b-desc,.b-line .b-links a::after{color:color-mix(in srgb,var(--peach-blk-ink) 75%,transparent)}
.b-line .b-links,.b-line .b-links li{border-color:color-mix(in srgb,var(--peach-blk-ink) 18%,transparent)}
.b-line h3 a,.b-line .b-links a{color:var(--peach-blk-ink)}
.b-line-art{background:var(--surface);border-radius:16px;padding:10px;box-shadow:var(--shadow-sm)}
.b-hol{background:color-mix(in srgb,var(--lav) 22%,var(--surface));border-color:transparent}
.b-hol .hol-num b{color:var(--lav-ink)}
@media (prefers-color-scheme: dark){html.v3:not([data-theme="light"]) .b-hol .hol-num b{color:var(--brand)}}
.b-roc-h{flex-wrap:wrap;row-gap:2px}
.b-roc-h b,.b-roc-h a{white-space:nowrap}
.b-line .b-kicker,.b-line h3,.b-line .b-desc{padding-right:112px}
.b-roc-h .b-roc-t{margin-left:0;font-size:16.5px;font-weight:700;color:var(--ink)}
.b-roc-h .b-roc-t:hover{color:var(--c-deep)}
@media (max-width:640px){ .b-line .b-kicker,.b-line h3,.b-line .b-desc{padding-right:0} .b-line h3{padding-right:72px} }

/* ============ 球面掃光（2026-10-21 站主提供影片：一道柔邊亮光掃過圓面；要斜一點、慢一點、配主角的顏色） ============
   一條斜 30° 的柔光帶（蜜桃→白→奶油黃，和小日的腮紅、太陽同色系），約 5 秒慢慢從左下掃到右上，停約 4 秒再來一次。
   系統開了「減少動態效果」時照樣播放（站主要求要看得到在動），只是更慢。 */
:root{--sheen-a:.55;--sheen-w:.95}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sheen-a:.28;--sheen-w:.4}}
:root[data-theme="dark"]{--sheen-a:.28;--sheen-w:.4}
.hero-art .stage::after{content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(120deg,transparent 0%,transparent 36%,
    rgba(255,255,255,calc(var(--sheen-w)*.35)) 42%,rgba(255,255,255,var(--sheen-w)) 48%,rgba(255,255,255,var(--sheen-w)) 52%,
    rgba(255,255,255,calc(var(--sheen-w)*.35)) 58%,transparent 64%,transparent 100%);
  background-size:300% 300%;background-position:100% 100%;
  animation:sphere-sheen 7s ease-in-out infinite alternate}
.hero-art .stage .mascot{z-index:1}
/* 柔白一道光，來回掃：alternate 讓它掃到右上後再掃回左下，兩端各停一下 */
@keyframes sphere-sheen{0%,8%{background-position:100% 100%}92%,100%{background-position:0% 0%}}
@media (prefers-reduced-motion:reduce){ .hero-art .stage::after{animation:sphere-sheen 9s ease-in-out infinite alternate!important} }

/* ============ 首頁 hero 調整（2026-10-21 站主參考圖）：主角移到左邊、背景改成奶油底＋右側薰衣草與蜜桃的柔霧、主角背後的圓改成白到淡紫的柔和漸層 ============ */
.hero{background:
  radial-gradient(60% 85% at 100% 0%,color-mix(in srgb,var(--brand) 22%,var(--brand-pale)) 0%,var(--brand-pale) 30%,transparent 72%),
  radial-gradient(45% 70% at 96% 100%,color-mix(in srgb,var(--peach) 30%,var(--peach-pale)) 0%,var(--peach-pale) 35%,transparent 75%),
  radial-gradient(38% 60% at 16% 50%,var(--brand-pale) 0%,transparent 70%),
  var(--paper)}
/* 底部漸淡進下方奶油底，不留一條硬邊 */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--paper))}
@media (min-width:861px){
  .hero .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
  .hero-art{order:-1}
}
/* 主角背後的圓：左上近白、往右下漸變成淡紫，邊緣柔和，不做硬陰影 */
.hero-art .stage::before{
  background:radial-gradient(circle at 36% 32%,var(--sphere-hi) 0%,color-mix(in srgb,var(--sphere-hi) 55%,var(--brand-pale)) 30%,var(--brand-pale) 62%,color-mix(in srgb,var(--brand-pale) 80%,var(--brand)) 100%);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--brand-pale) 35%,transparent),0 24px 40px -26px color-mix(in srgb,var(--brand) 35%,transparent)}

/* ============ 漂浮小圖示（尺、齒輪、骰子、星光）：扁平實心、不描邊，放在圓圈外的留白、左右平衡 ============ */
:root{--deco-lav:color-mix(in srgb,var(--brand) 30%,var(--brand-pale))}
.hero-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.deco{position:absolute;height:auto}
.d-ruler{width:17%;left:-11%;top:20%;rotate:-28deg;animation:deco-float 6s ease-in-out infinite}
.d-dice{width:10%;right:-9%;top:50%;rotate:12deg;animation:deco-float 5.5s ease-in-out infinite -1.5s}
.d-gear{width:11%;right:-1%;top:83%;animation:deco-float 7s ease-in-out infinite -3s,deco-turn 18s linear infinite}
.spark.s1{width:6%;left:10%;top:6%;animation:deco-twinkle 3.2s ease-in-out infinite}
.spark.s2{width:4.5%;left:-6%;top:58%;animation:deco-twinkle 2.6s ease-in-out infinite -1.2s}
.spark.s3{width:5%;right:-4%;top:30%;animation:deco-twinkle 3.6s ease-in-out infinite -.6s}
.spark.s4{width:4%;left:46%;top:-2%;opacity:.7;animation:deco-twinkle 2.9s ease-in-out infinite -2s}
@keyframes deco-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes deco-turn{to{transform:rotate(360deg)}}
@keyframes deco-twinkle{0%,100%{scale:.75;opacity:.55}50%{scale:1.1;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .d-ruler{animation:deco-float 9s ease-in-out infinite!important}
  .d-gear{animation:deco-float 10s ease-in-out infinite -3s!important}
  .d-dice{animation:deco-float 8s ease-in-out infinite -1.5s!important}
  .spark{animation:deco-twinkle 4s ease-in-out infinite!important}
}
@media (max-width:860px){ .d-ruler{left:-14%} .d-dice{right:-12%} }

/* ============ 首頁「從這三個開始」：三欄同高卡（三張格式完全一致） ============ */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trio-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.trio-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.trio-view{height:360px;padding:24px;background:var(--brand-pale);display:flex}
.trio-view .mini{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;font-size:13px;overflow:hidden}
.trio-view .mini-foot,.trio-view .ot-sum{margin-top:auto}
.trio-view .cal-grid i{line-height:26px}
.trio-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.trio-kicker{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--peach-ink)}
.trio-body h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trio-desc{margin:0 0 20px;color:var(--ink-2);font-size:15px;line-height:1.75;min-height:calc(1.75em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.trio-body .go{margin-top:auto;align-self:flex-start;position:static}
.trio-body .go::after{content:"";position:absolute;inset:0}
.trio-card{position:relative}
@media (max-width:1000px){ .trio{grid-template-columns:1fr} .trio-view{height:auto;min-height:280px} .trio-view .mini{max-width:420px;margin:0 auto} }

/* hero 搜尋框下方的三個重點標籤（取代原本的「製作原則」區塊與「瀏覽全部 N 個工具」連結） */
.hero-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.hero-tags li{font-size:14.5px;font-weight:700;border-radius:999px;padding:6px 14px;line-height:1.3}
.hero-tags .t1{background:var(--brand-pale);color:var(--brand-deep)}
.hero-tags .t2{background:var(--peach-pale);color:var(--peach-ink)}
.hero-tags .t3{background:color-mix(in srgb,var(--sun) 28%,var(--surface));color:color-mix(in srgb,var(--sun) 35%,var(--ink))}

/* 依分類找：圖卡環中間改放吉祥物（2026-10-21 站主要求），標題移到環的上方 */
.cats-head{text-align:center;max-width:none;margin:0 auto 8px}
.cats-head h2{margin:0 0 10px}
.cats-head p:not(.eyebrow){margin:0;color:var(--ink-2);font-size:16px}
.cats-more{text-align:center;margin:8px 0 0}
.orbit-center{max-width:none;width:calc(var(--R) * 1.15);aspect-ratio:1}
.orbit-ball{position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 30%,var(--sphere-hi) 0%,color-mix(in srgb,var(--sphere-hi) 50%,var(--brand-pale)) 28%,var(--brand-pale) 60%,color-mix(in srgb,var(--brand-pale) 75%,var(--brand)) 100%);
  box-shadow:0 0 0 12px color-mix(in srgb,var(--brand-pale) 40%,transparent),0 30px 50px -30px color-mix(in srgb,var(--brand) 45%,transparent)}
.orbit-mascot{width:78%;height:auto}
.orbit-wait .orbit-center{opacity:0;filter:blur(8px);transform:scale(.92)}
.orbit-center{transition:opacity .7s ease,filter .7s ease,transform .7s ease}
@media (max-width:760px){ .orbit-center{width:min(70%,240px);margin:12px auto 24px} }
@media (max-width:760px){
  .orbit{width:100%}
  .orbit-ring{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cats-head h2{font-size:clamp(22px,6vw,30px);text-wrap:balance}
}

/* 深色「關於這個站」：左邊改放分類圖卡環（中間小日），右邊文字；原本獨立的「依分類找」區塊併入這裡（2026-10-21 站主要求） */
.hs-about .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px}
.about-orbit{--R:205px;--card:104px;height:calc(var(--R)*2 + var(--card) + 30px)}
.about-orbit .orb-card{padding:10px 8px 9px;gap:4px;border-radius:18px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.about-orbit .orb-art{width:52px;height:52px;border-radius:14px}
.about-orbit .orb-art .cat-art{width:38px;height:38px}
.about-orbit .orb-card b{font-size:13.5px}
.about-orbit .orb-card small{font-size:11.5px}
.about-orbit .orbit-ball{box-shadow:0 0 0 12px color-mix(in srgb,var(--band-accent) 18%,transparent),0 30px 50px -24px rgba(0,0,0,.5)}
.about-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px}
.hs-about .about-links .btn{background:var(--band-ink);color:var(--band)}
.hs-about .about-links .go{margin-top:0}
@media (max-width:1000px){ .about-orbit{--R:180px;--card:96px} }
@media (max-width:900px){ .hs-about .wrap{grid-template-columns:1fr} }
@media (max-width:760px){ .about-orbit{height:auto} .about-orbit .orbit-ring{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px} }
main .hs-about h2{font-size:clamp(24px,2.6vw,36px);text-wrap:balance}

/* ============ 首頁「關於這個站」：3D 環形展廊（2026-10-21 站主依參考影片選定） ============ */
.hs-gallery{background:color-mix(in srgb,var(--brand-pale) 70%,var(--paper));overflow:hidden}
.hs-gallery .alf-copy{text-align:center;max-width:38em;margin:0 auto 8px}
main .hs-gallery h2{margin:0 0 16px;font-size:clamp(26px,2.8vw,38px);line-height:1.3;text-wrap:balance}
.hs-gallery .alf-copy p:not(.eyebrow){color:var(--ink-2);font-size:16px;line-height:1.85;margin:0}
.alf{--R:560px;--w:190px;position:relative;height:440px;perspective:900px;perspective-origin:50% 45%;cursor:grab;touch-action:pan-y;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.alf.dragging{cursor:grabbing}
.alf-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.alf-card{position:absolute;left:calc(var(--w) * -.5);top:-150px;width:var(--w);display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);
  backface-visibility:hidden;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--R) * -1))}
.alf-art{display:grid;place-items:center;height:220px;border-radius:18px;background:var(--c-pale);box-shadow:0 22px 40px -24px color-mix(in srgb,var(--brand) 55%,transparent);transition:transform .25s}
.alf-art .cat-art{width:110px;height:110px}
.alf-label b{display:block;font-size:17px} .alf-label small{color:var(--muted);font-size:13.5px}
.alf-card:hover .alf-art{transform:translateY(-6px)}
.alf-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.alf-foot .about-links{justify-content:center;margin-top:4px}
.hs-gallery .about-links .btn{background:var(--btn-bg);color:var(--btn-ink)}
.hs-gallery .about-links .go{color:var(--ink)}
@media (max-width:900px){ .alf{--R:380px;--w:150px;height:380px;perspective:700px} .alf-art{height:170px} .alf-art .cat-art{width:84px;height:84px} }
@media (max-width:560px){ .alf{--R:260px;--w:120px;height:320px;perspective:520px} .alf-card{top:-120px} .alf-art{height:136px} .alf-art .cat-art{width:66px;height:66px} .alf-label b{font-size:14px} }
.alf-card,.alf-card *{-webkit-user-drag:none;user-select:none}

/* 展廊卡片加厚：像一塊有厚度的圓角板——上緣亮邊、正面柔和受光、底下一層層的側邊厚度＋落地陰影 */
.alf-card{transform-style:preserve-3d}
.alf-art{position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,#fff 70%,var(--c-pale)) 0%,color-mix(in srgb,#fff 25%,var(--c-pale)) 55%,var(--c-pale) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -3px 6px color-mix(in srgb,var(--c) 14%,transparent),
    0 2px 0 color-mix(in srgb,var(--c-pale) 92%,var(--c)),
    0 4px 0 color-mix(in srgb,var(--c-pale) 86%,var(--c)),
    0 6px 0 color-mix(in srgb,var(--c-pale) 80%,var(--c)),
    0 8px 0 color-mix(in srgb,var(--c-pale) 74%,var(--c)),
    0 10px 0 color-mix(in srgb,var(--c-pale) 68%,var(--c)),
    0 12px 0 color-mix(in srgb,var(--c-pale) 62%,var(--c)),
    0 30px 34px -12px color-mix(in srgb,var(--brand) 45%,transparent)}
/* 背面一塊稍大的板，轉到側邊時看得到厚度 */
.alf-art::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-16px);
  background:color-mix(in srgb,var(--c-pale) 78%,var(--c))}
.alf-art .cat-art{filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--c) 30%,transparent))}
.alf-card:hover .alf-art{transform:translateY(-8px)}
.alf-label{margin-top:8px}

/* 所有工具頁：標題下方的大搜尋框（2026-10-21 站主指定，和首頁同款），側欄只放分類與最近使用 */
.tools-search{max-width:640px;margin-top:22px}
.tools-search input{padding-right:120px}
.tools-head .search-meta{margin-top:10px}
@media (max-width:480px){ .tools-search input{padding-right:96px} }

/* ============ 所有工具頁：依分類分區塊（2026-10-21 站主指定） ============
   每個分類一個區塊，底色用該分類色淡淡的一層，標題列有分類插畫與色點；左邊一張主打大卡、右邊小卡。 */
.tsecs{display:flex;flex-direction:column;gap:22px}
.tsec[hidden]{display:none}
.tsec{border-radius:var(--r-lg);padding:18px 18px 20px;background:color-mix(in srgb,var(--c) 15%,var(--paper));border:1px solid color-mix(in srgb,var(--c) 26%,transparent);scroll-margin-top:90px}
.tsec-head{display:flex;align-items:center;gap:10px;margin:2px 4px 14px}
.tsec-head .cat-art{width:30px;height:30px;flex:none}
main .tsec-head h2{margin:0;font-size:19px;color:var(--c-deep)}
.tsec-desc{font-size:13.5px;color:var(--muted)}
.tsec-head .count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--c-deep);background:color-mix(in srgb,var(--c) 16%,var(--surface));border-radius:999px;padding:2px 10px;white-space:nowrap}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);grid-auto-flow:dense;gap:12px}
.tgrid .card{margin:0}
.tgrid .card:not(.big){flex-direction:column;align-items:flex-start;gap:10px;padding:18px 30px 18px 18px}
.tgrid .card:not(.big) .ic{width:42px;height:42px;border-radius:14px}
.tgrid .card.lead{grid-column:span 2;grid-row:span 2;flex-direction:column;gap:12px;padding:22px 24px;overflow:hidden}
.tgrid.one .card.lead{grid-row:span 1}
.tgrid .card.lead::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--c-pale) 0%,var(--surface) 62%);pointer-events:none}
.tgrid .card.lead>*{position:relative}
.tgrid .card.lead>.arrow{position:absolute;color:var(--c)}
.tgrid .card.lead .big-top{display:flex;align-items:center;gap:10px}
.tgrid .card.lead .tag{display:none}
.tgrid .card.lead .card-body{display:block;max-width:calc(100% - 120px)}
.tgrid .card.lead b{font-size:21px;line-height:1.3;margin-bottom:6px}
.tgrid .card.lead .d{font-size:14px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.tgrid.one .card.lead .d{-webkit-line-clamp:2}
.tgrid .card.lead .cat-art{position:absolute;right:18px;bottom:16px;width:104px;height:104px}
.tgrid.one .card.lead .cat-art{width:72px;height:72px;bottom:12px}
.tgrid .card.lead .cta{margin-top:auto;font-size:14px;font-weight:700;color:var(--c-deep)}
.tsecs>.ad{margin:0}
@media (max-width:1180px){ .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .tgrid .card.lead{grid-row:span 1} .tsec-desc{display:none} }
@media (max-width:480px){ .tgrid{grid-template-columns:1fr} .tgrid .card.lead{grid-column:auto} .tgrid .card:not(.big){flex-direction:row;align-items:center} }

/* 每個分類都重算自己的淡色與深色（原本只在 :root 算一次，結果全部變成主色紫） */
.cat-money{--c:var(--c-money)} .cat-focus{--c:var(--c-focus)}
.cat-line,.cat-text,.cat-work,.cat-image,.cat-date,.cat-health,.cat-baby,.cat-random,.cat-game,.cat-money,.cat-focus{
  --c-pale:color-mix(in srgb,var(--c) 14%,var(--surface));--c-deep:color-mix(in srgb,var(--c) 72%,var(--ink))}
/* 工具少的分類：小卡加寬補滿右半邊 */
.tgrid .card.fill-2x1{grid-column:span 2}
.tgrid .card.fill-2x2{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){ .tgrid .card.fill-2x1,.tgrid .card.fill-2x2{grid-column:auto;grid-row:auto} }
/* 每列固定高度，空位留白也不會讓卡片被拉長或壓扁 */
.tgrid{grid-auto-rows:150px;grid-auto-flow:row}
.tgrid .card:not(.big){overflow:hidden}
@media (max-width:760px){ .tgrid{grid-auto-rows:auto} }
.tgrid{grid-auto-rows:168px}
.tgrid .card:not(.big) b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tgrid .card:not(.big) .d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:760px){ .tgrid{grid-auto-rows:auto} }

/* 首頁精選第三張：特殊符號縮影 */
.mini-sym .sym-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}
.mini-sym .sym-grid i{font-style:normal;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:var(--brand-pale);color:var(--brand-deep);font-size:20px}
.mini-sym .sym-grid i:nth-child(3n){background:var(--peach-pale);color:var(--peach-ink)}

/* ============ 展廊改成「從外面看一整圈」的環形轉盤（2026-10-22 站主參考圖） ============
   卡片正面朝外、排在圓周上；靠近你的在下方、較大，遠的在上方、較小，整圈略微俯視成一個橢圓；
   轉到背面時看到的是同色的素面背板（不顯示鏡像文字）。 */
.alf{--R:300px;--w:172px;--tilt:-14deg;height:480px;perspective:1150px;perspective-origin:50% 28%;
  -webkit-mask-image:none;mask-image:none}
.alf-card{backface-visibility:visible;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--R))}
.alf-art{transform-style:preserve-3d;backface-visibility:hidden;height:150px}
.alf-art .cat-art{width:84px;height:84px;backface-visibility:hidden}
.alf-label{backface-visibility:hidden;margin-top:8px}
.alf-label b{font-size:16px}
@media (max-width:900px){ .alf{--R:215px;--w:128px;height:380px;perspective:820px} .alf-art{height:112px} .alf-art .cat-art{width:62px;height:62px} .alf-label b{font-size:14px} }
@media (max-width:560px){ .alf{--R:170px;--w:104px;height:330px;perspective:640px;--tilt:-12deg} .alf-art{height:92px} .alf-art .cat-art{width:50px;height:50px} .alf-label b{font-size:13px} .alf-label small{font-size:11.5px} }
/* 轉盤正面的顏色和背面素色板拉近，整圈看起來是同一組色 */
.alf-art{background:linear-gradient(160deg,color-mix(in srgb,#fff 35%,var(--c-pale)) 0%,color-mix(in srgb,var(--c) 10%,var(--c-pale)) 100%)}
.alf-art::before{background:color-mix(in srgb,var(--c-pale) 70%,var(--c))}

/* 後半圈的卡片翻面朝向你（--f 由 site.js 依轉到的位置設成 0 或 1），不再顯示素面背板 */
.alf-card{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--R)) rotateY(calc(var(--f, 0) * 180deg))}

/* ============ 展示區改成「散落在吉祥物四周」（2026-10-22 站主指定）：不轉動、不拖曳，每張卡有自己的位置、大小與微傾角 ============ */
.alf{--w:172px;position:relative;height:600px;perspective:none;cursor:default;touch-action:auto;margin-top:8px}
.alf-mascot{position:absolute;left:50%;top:50%;width:min(36%,250px);transform:translate(-50%,-50%);pointer-events:none}
.alf-mascot .mascot{width:100%;height:auto;display:block}
.alf-card{left:var(--x);top:var(--y);width:calc(var(--w) * var(--s));transform:translate(-50%,-50%) rotate(var(--r));transform-style:flat;transition:transform .25s}
.alf-card:hover{transform:translate(-50%,-50%) rotate(0deg) translateY(-6px)}
.alf-art{height:calc(150px * var(--s));transform-style:flat}
.alf-art::before{display:none}
.alf-art .cat-art{width:calc(84px * var(--s));height:calc(84px * var(--s))}
.alf-card:hover .alf-art{transform:none}
.alf-label b{font-size:calc(16px * (.6 + var(--s) * .4))}
@media (max-width:900px){ .alf{--w:132px;height:480px} .alf-mascot{width:min(34%,190px)} }
@media (max-width:560px){
  .alf{height:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:18px 10px;align-items:center;justify-items:center;padding:0 6px}
  .alf-mascot{position:static;transform:none;grid-area:2/2;width:100%}
  .alf-card{position:static;left:auto;top:auto;width:calc(100% * (.66 + var(--s) * .3));transform:translate(var(--dx,0),var(--dy,0)) rotate(calc(var(--r) * 1.3))}
  .alf-card:nth-child(2){--dx:-8px;--dy:10px} .alf-card:nth-child(3){--dx:6px;--dy:-4px} .alf-card:nth-child(4){--dx:10px;--dy:14px} .alf-card:nth-child(5){--dx:-12px;--dy:-6px} .alf-card:nth-child(6){--dx:-6px;--dy:12px} .alf-card:nth-child(7){--dx:8px;--dy:-10px} .alf-card:nth-child(8){--dx:-4px;--dy:6px} .alf-card:nth-child(9){--dx:12px;--dy:-4px}
  .alf-card:hover{transform:translateY(-4px)}
  .alf-art{height:calc(100px * var(--s))} .alf-art .cat-art{width:calc(54px * var(--s));height:calc(54px * var(--s))}
  .alf-label b{font-size:13px} .alf-label small{font-size:11px}
}
/* 所有工具頁：右側第一個區塊的上緣和左側玻璃側欄對齊（.sec 預設有 44px 上外距，這裡歸零） */
.tools-main .tsec{margin-top:0}

/* ============ 固定頁面結構（std 版型，2026-10-22 先在加班費計算機試做）============
   小工具 → 使用說明 → 範例 → 依據 → 常見問題 → 來源與核對日期 → 相關工具。
   不用卡片和圖示，段落之間只有留白與一條細線；每個數字旁用小標籤標來源。 */
.std>h2,.std>.faq>h2,.std>.related>h2{margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--line);font-size:21px}
.std-meta{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.std-caution{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.std-steps{padding-left:22px;margin:0}
.std-steps li{margin:8px 0;padding-left:4px}
.std-rules{list-style:none;padding:0;margin:14px 0 0}
.std-rules li{padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.std-src{list-style:disc;padding:0 0 0 20px;margin:12px 0 0}
.std-src li{padding:5px 0;font-size:14.5px;color:var(--ink-2)}
.std-src li::marker{color:var(--c)}
.std-src-head{margin:0}
.std-src-head b{font-size:16px;font-weight:800;color:var(--ink)}
.std-source>h2{margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--line);font-size:21px}
.std-source p.muted{font-size:14px;margin:8px 0}
.src-tag{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:1px 8px;margin-right:8px;vertical-align:1px;white-space:nowrap}
.src-tag.law{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c-deep,var(--c))}
.src-tag.mol{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.src-tag.asm{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.std .faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;margin:0}
.std .related{margin-top:0}
.std .rel-item{display:flex;flex-direction:column;gap:8px}
.std .rel-note{margin:0 4px;font-size:13.5px;color:var(--muted)}
.narrow.wide{max-width:1120px}

/* ============ std 版型的兩欄計算機（2026-10-22，沿用加班費計算機的設計）============
   <div class="panel main-tool c2"><div class="c2-in">輸入</div><div class="c2-out">結果</div></div>
   左邊輸入、右邊結果；窄螢幕自動上下排。顏色只用既有的 --c 系列，不另外定義。 */
.panel.main-tool.c2{display:flex;flex-wrap:wrap;padding:0;overflow:hidden}
.c2-in{flex:1 1 400px;min-width:0;padding:26px 28px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.c2-out{flex:1 1 360px;min-width:0;padding:26px 28px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;
  background:color-mix(in srgb,var(--c) 6%,var(--surface));border-left:1px solid color-mix(in srgb,var(--c) 14%,var(--line))}
.c2 .c2-in>:first-child,.c2 .c2-out>:first-child{margin-top:0}
.c2 .stats{margin-top:0}
.c2-out .stat{background:var(--surface)}
.c2 .table-wrap{margin-top:0}
.c2 .c2-note{margin:0;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
@media (max-width:560px){.c2-in,.c2-out{padding:20px 16px}.c2-out{border-left:0;border-top:1px solid color-mix(in srgb,var(--c) 14%,var(--line))}}
.std .ex{margin:0 0 12px;padding:0;list-style:none}
.std .ex li{padding:4px 0;color:var(--ink-2)}

/* ============ 工具頁統一版型（2026-10-22 站主指定：每頁都照加班費計算機）============
   標題下小標籤 .page-chips、工具卡片改平面細框、工具下方說明收進 .learn 分頁卡。 */
.page-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.page-chips span{font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.std .panel.main-tool{border:1px solid var(--line);border-radius:20px;box-shadow:none}
.std .panel.main-tool::before{display:none}
.learn{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 28px 28px;margin:20px 0}
.learn-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.learn-tab{min-height:48px;padding:0 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);font:inherit;font-weight:500;cursor:pointer}
.learn-tab:hover{color:var(--ink)}
.learn-tab[aria-selected="true"]{border-bottom-color:var(--c);color:var(--c-deep,var(--c));font-weight:700}
.learn-panel[hidden]{display:none}
.learn-panel>:first-child,.learn-panel>.vh+*{margin-top:0}
.learn-panel>p,.learn-panel>ul,.learn-panel>ol{color:var(--ink-2)}
.learn-panel .std-source>h2{display:none}
.learn-panel .std-source{margin:0}
.learn-faq details{border-bottom:1px solid var(--line)}
.learn-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:700}
.learn-faq summary::-webkit-details-marker{display:none}
.learn-faq summary::after{content:"+";color:var(--c);font-size:20px;line-height:1;flex:none;font-weight:400}
.learn-faq details[open] summary::after{content:"−"}
.learn-faq details p{margin:0 0 16px;color:var(--ink-2)}
@media (max-width:560px){.learn{padding:4px 16px 20px}.learn-tab{padding:0 12px;min-height:44px}}
/* 分區標題三段式：眉標（編號＋情境）、主標、說明（2026-10-22 站主新分類） */
.tsec-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tsec-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--c-deep)}
.tsec-eyebrow b{margin-right:8px;font-family:var(--font-serif,inherit);font-size:13px}
.tsec-head{align-items:flex-start}
.tsec-head .tsec-desc{white-space:normal}
/* 展示區：分類名稱改長了（2026-10-22 新分類），不折行 */
.alf-label b{white-space:nowrap}
@media (max-width:560px){ .alf{gap:30px 10px} .alf-card:nth-child(10){grid-column:auto} }

/* ============ 文章（2026-10-23 新增）：列表 /articles/ 與文章頁 ============ */
.art-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.art-topic{display:inline-block;font-size:12px;font-weight:700;color:var(--brand-deep);background:var(--brand-pale);border-radius:999px;padding:2px 10px}
.art-chips{margin:8px 0 18px;gap:8px}
.art-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.art-item[hidden]{display:none}
.art-item a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.art-item a:hover{border-color:var(--brand);transform:translateY(-2px)}
.art-item b{font-size:18px;line-height:1.45}
.art-desc{font-size:14px;color:var(--ink-2);line-height:1.7}
.art-rss{margin-top:22px;font-size:13px}
.article .art-head-meta{margin:14px 0 6px}
.article h1{font-size:clamp(26px,3.6vw,36px);line-height:1.3;margin:0}
.art-body{max-width:760px;font-size:16.5px;line-height:1.95;color:var(--ink)}
.art-body>h2{font-size:22px;margin:44px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.art-body>h3{font-size:18px;margin:28px 0 8px}
.art-body p,.art-body li{color:var(--ink-2)}
.art-body ul,.art-body ol{padding-left:22px}
.art-body li{margin:6px 0}
.art-body .art-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:18px 0}
.art-body .art-box>:first-child{margin-top:0} .art-body .art-box>:last-child{margin-bottom:0}
.art-body .art-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:color-mix(in srgb,var(--brand) 7%,var(--surface));border-radius:16px;padding:14px 18px;margin:20px 0}
.art-body .art-cta p{margin:0;flex:1;min-width:200px;color:var(--ink)}
.art-body table{font-size:15px}
.art-body .art-src{font-size:14px}
.art-body .art-src li{color:var(--ink-2)}
.article .faq,.article .art-tools,.article .art-more{max-width:760px}
.article .faq>h2,.article .art-tools>h2,.article .art-more>h2{margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--line);font-size:21px}
.article .faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;margin:0}

/* 母嬰日期共用提示、分享按鈕（2026-10-23） */
.baby-prof{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--c) 8%,var(--surface));font-size:13.5px;color:var(--ink-2)}
.baby-prof button,.baby-prof a{margin-left:8px;border:0;background:none;color:var(--c-deep,var(--c));font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.share-chip{font:inherit;font-size:13px;font-weight:700;color:var(--c-deep,var(--c));background:color-mix(in srgb,var(--c) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:999px;padding:4px 14px;cursor:pointer}
.share-chip:hover{background:color-mix(in srgb,var(--c) 14%,var(--surface))}

/* ============ 母嬰區：包巾寶寶與柔和粉色調（2026-10-23）============ */
body.cat-baby{background:color-mix(in srgb,var(--c-baby) 5%,var(--paper))}
.title-row .baby-art{width:76px;height:auto;flex:none;margin-top:-6px}
.bb-say{display:flex;align-items:flex-end;gap:10px;margin:0 0 4px}
.bb-pic{flex:none;width:86px}
.bb-pic svg{width:100%;height:auto;display:block}
.bb-bubble{position:relative;flex:1;background:var(--surface);border:1px solid color-mix(in srgb,var(--c-baby) 25%,var(--line));border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:15px;line-height:1.65;color:var(--ink)}
.bb-bubble b{color:var(--c-deep,var(--c))}
.bb-say[data-mood="sleep"] .bb-bubble{color:var(--ink-2)}
.bb-say[data-mood="cheer"] .bb-bubble{background:color-mix(in srgb,var(--sun) 22%,var(--surface));border-color:color-mix(in srgb,var(--sun) 45%,var(--line))}
.bb-bob{animation:bbBob 3.4s ease-in-out infinite;transform-origin:50% 90%;transform-box:fill-box}
@keyframes bbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.bb-bob{animation-duration:6s}}
@media (max-width:560px){.bb-pic{width:68px}.bb-bubble{font-size:14px}.title-row .baby-art{width:58px}}
.line-tm{font-size:13px;margin:14px 0 0}

/* 2026-10-28 站主：首頁第一屏只看到主視覺，不露出下一區塊 → 桌機 hero 撐滿視窗（扣頁首 68px） */
@media (min-width:861px){
  .hero .wrap{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);padding-top:40px;padding-bottom:56px;box-sizing:border-box}
}

/* 2026-10-28 文章卡片（站主指定版式：上方文字封面、下方標題兩行＋摘要兩行＋日期） */
.art-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.art-card[hidden]{display:none}
.art-card a{display:flex;flex-direction:column;height:100%;background:var(--surface-2,#F4F1EC);border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s}
.art-card a:hover{border-color:var(--brand);transform:translateY(-2px)}
.art-cover{display:flex;flex-direction:column;aspect-ratio:16/9;background:#fff;padding:4.5cqi 5.5cqi 4cqi;border-bottom:1px solid var(--line);color:var(--ink-2);overflow:hidden;container-type:inline-size}
.art-card a{container-type:inline-size}
.ac-top{display:flex;justify-content:space-between;gap:2cqi;font-size:3.3cqi;font-weight:700;color:var(--brand-deep);letter-spacing:.04em;white-space:nowrap}
.ac-top span:last-child{color:var(--muted);letter-spacing:.12em}
.ac-main{display:flex;align-items:flex-start;gap:4cqi;margin-top:4cqi;flex:1;min-height:0;overflow:hidden}
.ac-no{font-family:var(--font-display);font-weight:900;font-size:14cqi;line-height:.95;color:var(--brand)}
.ac-head{display:flex;flex-direction:column;gap:1.4cqi;min-width:0;padding-top:.6cqi}
.ac-head b{font-size:6.6cqi;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-sub{font-size:3.4cqi;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-key{font-size:3.9cqi;font-weight:700;color:var(--ink);margin-top:1.4cqi;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5cqi;border-top:.5cqi solid var(--ink);padding-top:2.2cqi}
.ac-pt{display:flex;flex-direction:column;gap:.6cqi;font-size:3cqi;line-height:1.35;color:var(--ink-2);min-width:0}
.ac-pt b{font-size:3.4cqi;color:var(--ink)}
.ac-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.ac-title{font-size:19px;line-height:1.45;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-desc{font-size:15px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-meta{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:10px}
.ac-body time{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ac-topic{display:none;font-size:12.5px;font-weight:700;color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 12%,transparent);padding:2px 10px;border-radius:999px}
@media (max-width:900px){ .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .art-grid{grid-template-columns:1fr} }

/* 2026-10-30 文章列表三種看法：卡片（預設）／列表／精簡 */
.art-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.art-bar .art-chips{margin:0}
.art-view{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.art-view button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.art-view svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.art-view button:hover{color:var(--ink)}
.art-view button[aria-pressed="true"]{background:var(--ink);color:#fff}
#artList[data-view="list"]{grid-template-columns:1fr;gap:14px}
#artList[data-view="list"] .art-card a{flex-direction:row}
#artList[data-view="list"] .art-cover{width:300px;flex:none;aspect-ratio:auto;min-height:169px;justify-content:center;padding:14px 16px 12px;border-bottom:0}
#artList[data-view="list"] .ac-body{border-left:1px solid var(--line)}
#artList[data-view="list"] .ac-body{padding:20px 24px;justify-content:center}
#artList[data-view="list"] .ac-meta{margin-top:4px}
#artList[data-view="list"] .ac-topic,#artList[data-view="compact"] .ac-topic{display:inline-block}
#artList[data-view="compact"]{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
#artList[data-view="compact"] .art-card a{flex-direction:row;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
#artList[data-view="compact"] .art-card a:hover{transform:none;background:var(--surface)}
#artList[data-view="compact"] .art-cover,#artList[data-view="compact"] .ac-desc{display:none}
#artList[data-view="compact"] .ac-body{flex-direction:row;align-items:center;gap:16px;padding:14px 8px}
#artList[data-view="compact"] .ac-title{font-size:17px;-webkit-line-clamp:1;flex:1;min-width:0}
#artList[data-view="compact"] .ac-meta{margin:0;padding:0;flex:none}
@media (max-width:700px){
  #artList[data-view="list"] .art-cover{width:38%;min-height:0;padding:6px 7px 5px}
  #artList[data-view="list"] .ac-body{padding:12px 14px}
  #artList[data-view="list"] .ac-desc{display:none}
  #artList[data-view="list"] .ac-title{font-size:16px}
  #artList[data-view="compact"] .ac-body{flex-direction:column;align-items:flex-start;gap:6px}
  #artList[data-view="compact"] .ac-title{-webkit-line-clamp:2}
  .art-view button span{display:none}
  .art-view button{padding:0 11px}
}

/* 2026-10-28 站主：所有工具頁左欄的紫色、橘色光暈看起來像奇怪的點 → 拿掉 */
.side-glow{display:none}

/* 所有工具頁：右側分類區塊改成實色，不要漸層和半透明框（2026-10-29 她說太 AI 感） */
.tsec{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.tsec .tgrid .card{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.tsec .tgrid .card:hover{border-color:var(--c)}
.tsec .tgrid .card.lead{background:var(--c-pale);border-color:transparent}
.tsec .tgrid .card.lead::before{display:none}

/* ============ 所有工具頁 v7（2026-10-29 站主設計稿）============
   奶油白底、不用漸層與半透明；分類改成一排膠囊；每個分類＝大標＋看全部＋三欄卡片。 */
.tl-top{background:var(--paper);border-bottom:1px solid var(--line)}
.tl-top .wrap{padding-top:40px;padding-bottom:26px}
.tl-top .crumb{margin:0 0 22px;font-size:14px;color:var(--ink-2)}
.tl-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.tl-title h1{margin:0;font-size:clamp(34px,5vw,52px);line-height:1.1;font-weight:900;letter-spacing:.02em}
.tl-title h1 small{margin-left:14px;font-size:.5em;font-weight:500;color:var(--ink-2);letter-spacing:0}
.tl-promise{display:flex;gap:22px;list-style:none;margin:0 0 6px;padding:0;font-size:15px;color:var(--ink-2)}
.tl-promise li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tl-promise svg{width:16px;height:16px;color:var(--ok)}
.tl-search{position:relative;display:flex;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:7px 7px 7px 20px}
.tl-search:focus-within{border-color:var(--brand)}
.tl-search>svg{width:20px;height:20px;color:var(--ink-2);flex:none}
.tl-search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:17px;color:var(--ink);padding:10px 12px}
.tl-search button{flex:none;border:0;border-radius:10px;background:var(--brand-deep);color:#fff;font:inherit;font-size:16px;font-weight:800;padding:12px 28px;cursor:pointer}
.tl-search button:hover{background:color-mix(in srgb,var(--brand-deep) 85%,var(--ink))}
.tl-hot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.tl-hot a{background:var(--brand-pale);color:var(--ink);text-decoration:none;border-radius:999px;padding:6px 13px}
.tl-hot a:hover{background:color-mix(in srgb,var(--brand) 22%,var(--surface))}
.tl-top .search-meta{margin-top:8px;min-height:1.4em}
.tl-bar{background:var(--paper);border-bottom:1px solid var(--line)}
.tl-bar .wrap{padding-top:16px;padding-bottom:18px}
.tl-bar .side-cats{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.tl-bar .side-cats li{flex:none}
.tl-bar .side-cats small{margin-left:0;min-width:0;padding:0;background:none!important;text-align:left}
.tl-bar .side-cats a{display:flex;align-items:center;gap:7px;height:48px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:16px;font-weight:700;font-family:var(--font-display)}
.tl-bar .side-cats a small{font-size:14px;font-weight:500;color:var(--muted);font-family:var(--font-body)}
.tl-bar .side-cats a:hover{border-color:var(--brand)}
.tl-bar .side-cats a[aria-current="true"]{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.tl-bar .side-cats a[aria-current="true"] small{color:#fff;opacity:.85}
.tl-bar .recent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tl-bar .recent[hidden]{display:none}
.tl-bar .side-label{margin:0;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.tl-bar .recent-list{display:flex;flex-wrap:wrap;gap:8px}
.dir.tl-layout{display:block;padding-top:8px;padding-bottom:40px}
.tl-layout .tsecs{gap:0}
.tl-sec{margin-top:44px}
.tl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.tl-head h2{margin:0 0 8px;font-size:clamp(24px,3vw,32px);line-height:1.25;font-weight:900;color:var(--ink)}
.tl-head p{margin:0;font-size:15px;color:var(--ink-2)}
.tl-all{flex:none;font-size:16px;font-weight:800;color:var(--brand-deep);text-decoration:none;font-family:var(--font-display);margin-bottom:4px}
.tl-all:hover{text-decoration:underline}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tl-grid .card{margin:0;flex-direction:row;align-items:flex-start;gap:16px;padding:24px 24px;border:1px solid var(--line-2);border-radius:16px;box-shadow:none;background:var(--surface)}
.tl-grid .card:hover{transform:none;box-shadow:none;border-color:var(--brand)}
.tl-grid .card .arrow{display:none}
.tl-grid .card .ic{width:50px;height:50px;border-radius:12px;background:var(--brand-pale);color:var(--brand-deep)}
.tl-grid .card b{font-family:var(--font-display);font-size:18px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.tl-grid .card .d{font-size:15px;color:var(--ink-2);line-height:1.55}
.tl-grid .tl-lead{grid-column:span 2;align-items:center;justify-content:space-between;gap:28px;padding:30px 30px}
.tl-lead .tl-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tl-tag{font-size:13px;font-weight:800;color:var(--peach-ink);background:var(--peach-pale);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.tl-lead b{font-size:26px!important;margin-bottom:12px!important}
.tl-lead .d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.tl-go{margin-top:16px;font-size:16px;font-weight:800;color:var(--brand-deep);font-family:var(--font-display)}
.tl-sym{flex:none;display:grid;grid-template-columns:repeat(4,76px);gap:10px}
.tl-sym i{display:grid;place-items:center;height:76px;border-radius:12px;background:var(--brand-pale);font-style:normal;font-size:30px;color:var(--ink)}
.tl-art{flex:none;display:grid;place-items:center;width:200px;height:162px;border-radius:14px;background:var(--brand-pale)}
.tl-art .ic{width:96px!important;height:96px!important;border-radius:24px!important;background:var(--surface)!important}
.tl-art .ic svg{width:48px;height:48px}
@media (max-width:1100px){ .tl-sym{grid-template-columns:repeat(4,58px)} .tl-sym i{height:58px;font-size:24px} .tl-art{width:150px;height:130px} }
@media (max-width:900px){ .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .tl-top .wrap{padding-top:24px}
  .tl-promise{gap:14px;font-size:14px}
  .tl-search{padding-left:14px}
  .tl-search input{font-size:16px;padding:8px}
  .tl-search button{padding:11px 18px}
  .tl-bar .side-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .tl-bar .side-cats a{height:42px;padding:0 14px;font-size:15px;white-space:nowrap}
  .tl-head{flex-direction:column;align-items:flex-start;gap:8px}
  .tl-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .tl-grid .tl-lead{grid-column:auto;flex-direction:column;align-items:flex-start;padding:22px}
  .tl-sym{grid-template-columns:repeat(4,1fr);width:100%} .tl-sym i{height:56px}
  .tl-art{display:none}
  .tl-grid .card{padding:18px}
}
/* 所有工具頁 v7.1：分類改回左側欄（2026-10-29 她說還是左右兩側），白底實色、不用玻璃效果 */
.dir.tl-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start;padding-top:36px}
.tl-side{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:12px}
.tl-side .side-cats{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.tl-side .side-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:700;font-family:var(--font-display)}
.tl-side .side-cats small{margin:0;min-width:0;padding:0;background:none!important;font-size:13.5px;font-weight:500;color:var(--muted);font-family:var(--font-body)}
.tl-side .side-cats a:hover{background:var(--brand-pale)}
.tl-side .side-cats a[aria-current="true"]{background:var(--brand-deep);color:#fff;box-shadow:none}
.tl-side .side-cats a[aria-current="true"] small{color:#fff;opacity:.85}
.tl-side .recent{margin-top:10px;padding:12px 6px 4px;border-top:1px solid var(--line)}
.tl-side .recent[hidden]{display:none}
.tl-side .side-label{margin:0 8px 8px;font-size:13px;font-weight:700;color:var(--muted)}
.tl-layout .tl-sec:first-child{margin-top:0}
.tl-layout .tsecs>.tl-sec:first-of-type{margin-top:0}
.tl-top .wrap{padding-bottom:30px}
/* 有側欄時右邊只剩約 830px：改兩欄，主打大卡獨佔一整列，下面小卡兩兩一排 */
.tl-layout .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tl-layout .tl-grid .tl-lead{grid-column:1/-1}
.tl-layout .tl-lead .tl-txt{flex:1}
.tl-layout .tl-sym{grid-template-columns:repeat(4,64px)}
.tl-layout .tl-sym i{height:64px;font-size:26px}
.tl-layout .tl-art{width:180px;height:140px}
@media (max-width:640px){
  .tl-layout .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-layout .tl-sym{grid-template-columns:repeat(4,1fr)} .tl-layout .tl-sym i{height:54px}
}
@media (max-width:860px){
  .dir.tl-layout{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:18px}
  .tl-side{position:static;padding:0;border:0;background:none}
  .tl-side .side-cats{flex-direction:row;overflow-x:auto;gap:8px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .tl-side .side-cats li{flex:none}
  .tl-side .side-cats a{border:1px solid var(--line-2);border-radius:999px;background:var(--surface);padding:9px 14px;white-space:nowrap;gap:6px;font-size:15px}
}
.tl-all[hidden]{display:none}
/* 側欄「最近使用」：一筆一行，不要橫向捲軸 */
.tl-side .recent-list{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;overflow:visible;margin:0;padding:0}
.tl-side .recent-list a{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--ink-2);text-decoration:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-side .recent-list a:hover{background:var(--brand-pale);color:var(--ink)}
.tl-side .recent-list .ic{width:28px;height:28px;border-radius:8px}
.tl-side .recent-list .ic svg{width:16px;height:16px}
@media (max-width:860px){ .tl-side .recent{display:none!important} }
.foot-mail{margin:6px 0 0;font-size:14px}.foot-mail a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* 頁尾 v2：左＝品牌，右＝工具分類大標題三欄（2026-10-29） */
.foot .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:28px 56px}
.foot-cats ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.foot-cats a{font-size:14.5px}
@media (max-width:760px){ .foot .wrap{grid-template-columns:1fr} .foot-cats ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
.foot-cats li{margin:0}

/* ============ 頁尾 v3（2026-10-29 她給的桌機／手機設計稿）============ */
.foot2{--fo-bg:#F2EFFB;--fo-ink:#1F1B33;--fo-mut:#4A4560;--fo-acc:#4B3DB8;--fo-line:#DCD6F0;--fo-btn:#CFC7EE;--fo-card:#FFFFFF;
  margin-top:24px;background:var(--fo-bg);border-radius:0;color:var(--fo-ink);font-family:var(--font-display)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .foot2{--fo-bg:#23223A;--fo-ink:#ECEBF4;--fo-mut:#C6C5D6;--fo-acc:#C9C2F7;--fo-line:#3A3858;--fo-btn:#4A4479;--fo-card:#2C2B45} }
:root[data-theme="dark"] .foot2{--fo-bg:#23223A;--fo-ink:#ECEBF4;--fo-mut:#C6C5D6;--fo-acc:#C9C2F7;--fo-line:#3A3858;--fo-btn:#4A4479;--fo-card:#2C2B45}
.foot2 .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:48px;padding-top:56px;padding-bottom:0}
.foot2 a{color:var(--fo-mut);text-decoration:none}
.foot2 a:hover{color:var(--fo-acc);text-decoration:underline;text-underline-offset:3px}
.foot2 .fb{display:flex;flex-direction:column;gap:20px;min-width:0}
.foot2 .fb .logo{align-self:flex-start;text-decoration:none}
.foot2 .fb .logo:hover{text-decoration:none}
.foot2 .fb .lockup-hdr{height:46px}
.foot2 .fb-tag{margin:0;font-size:15px;line-height:1.7;color:var(--fo-mut)}
.foot2 .fb-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--fo-card);border-radius:12px;font-size:13px;line-height:1.6;color:var(--fo-mut)}
.foot2 .fb-note svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--brand)}
.foot2 .fb-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;align-self:flex-start}
.foot2 .fb-mail svg{width:18px;height:18px;flex:none}
.foot2 .fn{display:flex;flex-direction:column;gap:14px;min-width:0}
.foot2 .fn h2{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--fo-ink)}
.foot2 .fn-links{display:flex;flex-direction:column;gap:14px}
.foot2 .fn a{font-size:14px}
.foot2 .fn .fn-more{color:var(--fo-acc);font-weight:500}
.foot2 .fbar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--fo-line);padding:20px 0 24px;font-size:13px;color:var(--fo-mut);margin-top:8px}
.foot2 .fbar nav{display:flex;gap:24px}
.foot2 .fbar a{font-size:13px}
@media (max-width:1100px){ .foot2 .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px} .foot2 .fb{grid-column:1/-1;max-width:560px} }
@media (max-width:760px){
  .foot2 .wrap{display:flex;flex-direction:column;gap:32px;padding-top:40px;padding-bottom:0}
  .foot2 .fb{gap:16px;max-width:none}
  .foot2 .fb .lockup-hdr{height:42px}
  .foot2 .fb-mail{align-self:stretch;justify-content:center;min-height:48px;border:1px solid var(--fo-btn);border-radius:12px;background:var(--fo-card);font-weight:500;color:var(--fo-acc)}
  .foot2 .fn{gap:4px}
  .foot2 .fn-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;gap:0 16px}
  .foot2 .fn a{display:flex;align-items:center;min-height:44px;font-size:15px}
  .foot2 .fbar{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0 28px;margin-top:0}
  .foot2 .fbar nav{flex-wrap:wrap;column-gap:20px;gap:0 20px;order:-1}
  .foot2 .fbar nav a{display:flex;align-items:center;min-height:44px}
}
/* 網站的 Noto Sans TC 只載入 700 以上字重，頁尾內文改用系統字才會是設計稿的一般粗細 */
.foot2{font-family:var(--font-body)}
.foot2 .fn h2{font-family:var(--font-display)}
/* 選了某個分類時，第一個「看得到」的區塊要貼齊頂端，才會和左側欄對齊（2026-10-29） */
.tl-layout .tsecs>.tl-sec{margin-top:0}
.tl-layout .tsecs>.tl-sec:not([hidden]) ~ .tl-sec:not([hidden]){margin-top:44px}
/* 首頁：主視覺的漸層延伸到頁首底下，頁首在頁面頂端時透明，避免上下兩個色塊（2026-10-29）；捲動後 site.js 加 .scrolled 恢復底色 */
.home .hero{margin-top:-68px}
.home .hero .wrap{padding-top:68px}
@media (min-width:861px){ .home .hero .wrap{min-height:100vh;min-height:100svh} }
.home .top:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.home .top{transition:background-color .2s ease}

/* 2026-10-30 說明頁（關於、編輯原則、隱私權等）文字左右對齊 */
main.page.narrow:not(.article) p,main.page.narrow:not(.article) li{text-align:justify;text-justify:inter-character}

/* 2026-10-30 首頁 SEO：快捷標籤改成連結、十大分類說明、為什麼選擇 */
.hero-tags a{color:inherit;text-decoration:none}
.hero-tags a:hover{text-decoration:underline;text-underline-offset:3px}
.hero .sub b{font-weight:700;color:var(--ink)}
.hs-guide .hg-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hs-guide .hg-grid li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.hs-guide .hg-grid h3{margin:0;font-size:17px;line-height:1.45}
.hs-guide .hg-grid h3 a{color:var(--ink);text-decoration:none}
.hs-guide .hg-grid h3 a:hover{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.hs-guide .hg-meta{margin:4px 0 8px;font-size:13px;color:var(--brand-deep);font-weight:700}
.hs-guide .hg-grid p:last-child{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.hs-guide .hg-why{margin-top:40px;background:var(--brand-pale);border-radius:20px;padding:28px 30px}
.hs-guide .hg-why h2{margin:0 0 14px;font-size:22px}
.hs-guide .hg-why ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.hs-guide .hg-why b{display:block;font-size:16px;color:var(--ink)}
.hs-guide .hg-why p{margin:4px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
@media (max-width:760px){.hs-guide .hg-grid{grid-template-columns:1fr}.hs-guide .hg-why{padding:22px 20px}}
.hero h1.h1-long{font-size:clamp(28px,3.5vw,50px)}
.hs-guide{padding-top:56px}.hs-guide .hg-why{margin-top:0}

/* 2026-10-30 站主：首頁圖庫的分類名稱置中、放在方塊正下方 */
.alf-card{align-items:center}
.alf-card .alf-art{align-self:stretch}
.alf-label{text-align:center;width:100%}

/* 2026-10-30 站主：抽籤與小遊戲「沒質感」→ 分類色由芥末黃改薰衣草紫（上方 --c-random），統計格改白底細框、數字改黑體 */
.cat-random .stat{background:var(--surface);border:1px solid var(--line);padding:14px 18px}
.cat-random .stat b{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink)}
.cat-random .stat span{color:var(--muted)}
/* 遊戲細節：數字改黑體（原本 Fraunces 襯線字的 2、3 很花）；遊戲區的米色底改淡薰衣草 */
.cat-random{--font-serif:var(--font-display)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .cat-random .main-tool{--surface-2:#F5F3FB;--line:#E7E3F4;--line-2:#D6CFEE} }
:root[data-theme="light"] .cat-random .main-tool{--surface-2:#F5F3FB;--line:#E7E3F4;--line-2:#D6CFEE}
.cat-random .m-back{background:linear-gradient(150deg,#9384EE,#6B5BD2);box-shadow:inset 0 0 0 4px rgba(255,255,255,.16),var(--shadow-sm)}
.cat-random .m-back::after{border-color:rgba(255,255,255,.5)}
.cat-random .sn-ov{background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(1.5px)}
.cat-random #jbStats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){ .cat-random #jbStats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cat-random .g48-cells i{background:color-mix(in srgb,var(--surface) 62%,transparent)}
.cat-random .g48-v2{background:#E4DEFB}.cat-random .g48-v4{background:#D3C9F7}.cat-random .g48-v8{background:#B5A6F0}