:root{
  --ink:#1A1A1A;
  --ink-70:rgba(26,26,26,.7);
  --ink-45:rgba(26,26,26,.45);
  --paper:#FAF8F5;
  --amber:#D97706;
  --line:rgba(26,26,26,.12);
  --radius:4px;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"Noto Sans TC",monospace;
  --pre-max-h:520px;   /* 程式碼區塊最高高度：桌機約 20 行 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,"Segoe UI",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* 錨點平滑捲動（目錄、回到頂端都吃這個） */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- header（捲動時固定在最上緣） ---------- */
.site-header{
  border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:50;
  transition:box-shadow .2s;
}
.site-header .wrap{
  display:flex;align-items:center;gap:20px;
  padding-top:22px;padding-bottom:18px;
  transition:padding .2s;
}
.site-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;transition:font-size .2s}
.site-title span{color:var(--amber)}
.tagline{
  font-size:15px;color:var(--ink-70);margin-top:2px;
  max-height:26px;overflow:hidden;
  transition:max-height .2s,opacity .18s,margin .2s;
}
/* 捲下去之後收窄：藏 tagline、縮字級、加淺陰影，讓出閱讀空間 */
.site-header.is-stuck .wrap{padding-top:12px;padding-bottom:12px}
.site-header.is-stuck .site-title{font-size:23px}
.site-header.is-stuck .tagline{max-height:0;opacity:0;margin-top:0}
.site-header.is-stuck{box-shadow:0 4px 18px rgba(26,26,26,.07)}

/* ---------- 頁面切換載入條（最頂端，蓋過 header） ----------
   點站內連結後才由 JS 顯示，且延遲 250ms——切得夠快就完全不會出現。
   刻意放在最上緣、閱讀進度條之上，兩者不會搶同一條位置。 */
.page-loading{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:transparent;pointer-events:none;
  opacity:0;transition:opacity .15s;
}
.page-loading.is-active{opacity:1}
.page-loading span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--amber),#F59E0B);
  transition:width .25s ease-out;
}

/* ---------- 閱讀進度條（單篇文章才有） ----------
   貼在 header 底緣，不佔最上緣那 3px（那裡留給載入條）。
   --header-h 由 nav.js 隨 header 收窄同步更新。 */
.read-progress{
  position:fixed;top:var(--header-h,0px);left:0;right:0;height:3px;z-index:60;
  background:transparent;pointer-events:none;
  transition:top .2s;
}
.read-progress span{
  display:block;height:100%;width:0;background:var(--amber);
  transition:width .08s linear;
}

/* ---------- 回到頂端 ---------- */
.go-top{
  position:fixed;right:24px;bottom:24px;z-index:55;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(26,26,26,.22);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s,background .15s;
}
.go-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.go-top:hover{background:var(--amber)}
@media (prefers-reduced-motion:reduce){
  .go-top{transition:opacity .2s,visibility .2s}
}

/* 桌機主選單（含子選單） */
.site-nav{margin-left:auto}
.menu{list-style:none;display:flex;gap:26px;font-size:15px}
.menu > li{position:relative}
.menu > li > a{
  display:inline-block;padding:6px 0;
  border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;
}
.menu > li > a:hover{border-color:var(--amber);color:var(--amber)}
.menu .menu-item-has-children > a::after{
  content:"";display:inline-block;vertical-align:middle;
  margin-left:6px;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;
}
.sub-menu{
  list-style:none;position:absolute;top:100%;left:-16px;min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 0;box-shadow:0 12px 28px rgba(26,26,26,.1);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{display:block;padding:9px 18px;font-size:14.5px;transition:.13s}
.sub-menu a:hover{background:rgba(217,119,6,.07);color:var(--amber)}

/* 桌機搜尋入口：放大鏡 ＋ 就地展開的輸入列 */
.search-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;margin-left:16px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s;
}
.search-toggle:hover{border-color:var(--amber);color:var(--amber)}
.search-toggle[aria-expanded="true"]{background:var(--amber);border-color:var(--amber);color:#fff}
/* 搜尋遮罩：蓋滿全頁、背景模糊，把注意力集中到搜尋框上 */
.search-overlay{
  position:fixed;inset:0;z-index:120;
  background:rgba(26,26,26,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:14vh 20px 20px;
  animation:overlay-in .18s ease-out;
}
/* ⚠️ 必要：class 選擇器的 display:flex 特異度高於瀏覽器對 [hidden] 的預設，
   少了這行，遮罩會在頁面一載入就開著 */
.search-overlay[hidden]{display:none}
/* 支援 backdrop-filter 時底色可以淡一點，讓模糊本身撐起層次 */
@supports (backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px)){
  .search-overlay{
    background:rgba(26,26,26,.32);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  }
}
.search-panel{
  position:relative;width:100%;max-width:620px;
  background:var(--paper);border-radius:calc(var(--radius) + 4px);
  padding:22px 26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:panel-in .2s cubic-bezier(.2,.7,.3,1);
}
.search-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:-6px -6px 16px 0;
}
.search-panel-title{font-size:14px;font-weight:700;color:var(--ink-70);letter-spacing:.02em}
.search-close{
  width:34px;height:34px;line-height:1;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--ink-45);
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s;
}
.search-close:hover{background:rgba(26,26,26,.06);color:var(--ink)}
.search-hint{margin-top:14px;font-size:13px;color:var(--ink-45)}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes panel-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.search-form{display:flex;gap:8px}
.search-form input[type=search]{
  flex:1 1 auto;min-width:0;
  font:inherit;font-size:16px;                  /* 16px：手機聚焦時才不會被自動放大 */
  padding:11px 15px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
  transition:border-color .15s;
}
.search-form input[type=search]:focus{outline:none;border-color:var(--amber)}
.search-form input[type=search]::placeholder{color:var(--ink-45)}
.search-form button{
  flex:0 0 auto;font:inherit;font-size:15px;font-weight:600;
  padding:0 22px;cursor:pointer;
  border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:#fff;transition:background .15s,border-color .15s;
}
.search-form button:hover{background:var(--amber);border-color:var(--amber)}

/* 漢堡鈕（手機才出現） */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;padding:0 10px;
}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}

/* 手機｜首頁膠囊列（WP menu location：front-chips） */
.chip-nav{display:none}

/* 手機｜右側滑出的滿版選單（WP menu location：primary） */
.drawer{
  position:fixed;inset:0;z-index:100;
  background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
body.nav-open .drawer{transform:translateX(0);visibility:visible}
.drawer-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 24px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.drawer-head .site-title{font-size:24px}
.drawer-close{
  margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;position:relative;
}
.drawer-close::before,.drawer-close::after{
  content:"";position:absolute;left:11px;top:21px;width:22px;height:2px;
  background:var(--ink);border-radius:2px;
}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:8px 24px 40px}
.drawer-menu{list-style:none}
.drawer-menu > li{border-bottom:1px solid var(--line)}
.drawer-row{display:flex;align-items:center}
.drawer-row > a{flex:1;display:block;padding:15px 0;font-size:17px;font-weight:500}
.sub-toggle{
  width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;position:relative;
}
.sub-toggle::before,.sub-toggle::after{
  content:"";position:absolute;left:14px;top:21px;width:16px;height:2px;
  background:var(--ink-70);border-radius:2px;transition:transform .2s;
}
.sub-toggle::after{transform:rotate(90deg)}
.sub-toggle[aria-expanded="true"]::after{transform:rotate(0)}
.sub-toggle[aria-expanded="true"]::before{opacity:0}
.drawer-menu .sub-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;background:transparent;
  min-width:0;padding:0 0 12px;
}
.drawer-menu .sub-menu[hidden]{display:none}
.drawer-menu .sub-menu a{
  padding:11px 0 11px 16px;font-size:15px;color:var(--ink-70);
  border-left:2px solid var(--line);
}
.drawer-menu .sub-menu a:hover{background:transparent;border-left-color:var(--amber);color:var(--amber)}
.drawer-foot{
  padding:22px 24px;border-top:1px solid var(--line);
  display:flex;gap:18px;font-size:14px;color:var(--ink-45);flex:0 0 auto;
}
.drawer-foot a:hover{color:var(--amber)}

/* ---------- 首頁 hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:28px;
  margin:36px 0 56px;
  /* start 而非預設的 stretch：① 輪播才守得住 16:9，不會被右欄撐高
     ② 右欄只有 1-2 筆時貼齊內容高度，不會留一塊空白框 */
  align-items:start;
}
.splide{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.slide{position:relative;display:block;aspect-ratio:16/9}
.slide .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 22%,rgba(0,0,0,.28) 48%,rgba(0,0,0,0) 72%);
}
.slide .body{position:absolute;left:0;right:0;bottom:0;padding:28px 32px 54px;color:#fff}
.cat{
  display:inline-block;background:var(--amber);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:4px 12px;border-radius:999px;margin-bottom:12px;
}
.slide h2{
  font-size:clamp(20px,2.4vw,33px);line-height:1.35;font-weight:800;
  letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.35);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.meta{margin-top:12px;font-size:13px;color:rgba(255,255,255,.78)}
.meta .dot{margin:0 7px;opacity:.5}
.slide.no-img{background:var(--ink)}
/* position:relative + z-index 必要：絕對定位的圖層會蓋過 static 的內容 */
.slide.no-img .body{
  position:relative;z-index:1;padding:56px 32px 60px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
}
.slide.no-img h2{text-shadow:none}
.splide__arrows{opacity:0;transition:opacity .2s}
.splide:hover .splide__arrows,.splide:focus-within .splide__arrows{opacity:1}
.splide__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.splide__arrow:hover{background:#fff}
.splide__arrow--prev{left:16px}
.splide__arrow--next{right:16px}
.splide__arrow svg{width:16px;height:16px;fill:currentColor}
.splide__pagination{
  position:absolute;left:0;right:0;bottom:20px;
  display:flex;justify-content:center;gap:9px;list-style:none;padding:0;z-index:2;
}
.splide__pagination__page{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.42);cursor:pointer;transition:.2s;
}
.splide__pagination__page.is-active{background:var(--amber);width:24px;border-radius:999px}

.rail{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;display:flex;flex-direction:column;overflow:hidden;
}
.rail ul{list-style:none}
.rail li{border-bottom:1px solid var(--line)}
.rail li:last-child{border-bottom:0}
.rail li a{display:block;padding:14px 20px;position:relative;transition:background .15s}
.rail li a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--amber);transform:scaleY(0);transform-origin:center;transition:transform .18s;
}
.rail li a:hover{background:rgba(217,119,6,.05)}
.rail li a:hover::before{transform:scaleY(1)}
.rail .kicker{display:block;font-size:12px;color:var(--ink-45);margin-bottom:4px;letter-spacing:.03em}
.rail .t{
  font-size:14.5px;line-height:1.55;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.early .rail li[data-empty="1"]{display:none}
.rail li.is-current a{background:rgba(217,119,6,.08)}
.rail li.is-current a::before{transform:scaleY(1);width:4px}
.rail li.is-current .kicker{color:var(--amber);font-weight:600}
.rail li.is-current .t{font-weight:700}

/* ---------- 文章卡片格線（首頁／列表／文末共用） ---------- */
.sec-head{
  display:flex;align-items:baseline;gap:12px;
  border-top:1px solid var(--line);padding-top:28px;margin-bottom:22px;
}
/* h2/h3 都吃同一組樣式：標題階層依所在頁面而定（404 的 h1 是錯誤標題，這裡就得是 h2） */
.sec-head h3,.sec-head h2{font-size:21px;font-weight:800;letter-spacing:-.01em}
.sec-head .more{margin-left:auto;font-size:14px;color:var(--ink-45);transition:color .15s}
.sec-head .more:hover{color:var(--amber)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-bottom:72px}
.card a{display:block}
.card .ph{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);margin-bottom:12px;background:#2a2a2a;
}
.card h4{
  font-size:17px;line-height:1.55;margin:0 0 8px;font-weight:700;transition:color .15s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card a:hover h4{color:var(--amber)}
.cmeta{font-size:12.5px;color:var(--ink-45)}
.card .cat2{color:var(--amber);font-weight:600}
.cmeta .dot2{margin:0 6px;opacity:.55}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);font-size:14px}
.site-footer .wrap{padding-top:52px;padding-bottom:26px}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:34px}
.f-title{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em}
.f-title span{color:var(--amber)}
.f-tag{margin-top:6px;color:rgba(255,255,255,.9)}
.f-desc{margin-top:14px;font-size:13px;line-height:1.85;color:rgba(255,255,255,.5);max-width:34em}
.site-footer h4{font-size:13px;font-weight:700;color:var(--amber);letter-spacing:.08em;margin-bottom:14px}
.f-col{display:flex;flex-direction:column;gap:9px}
.f-col a{color:rgba(255,255,255,.72);transition:color .15s;width:fit-content}
.f-col a:hover{color:var(--amber)}
.f-social{display:flex;gap:16px;margin-top:18px;font-size:13px}
.f-social a{color:rgba(255,255,255,.5);transition:color .15s}
.f-social a:hover{color:var(--amber)}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;align-items:center;gap:16px;font-size:13px;color:rgba(255,255,255,.42);
}
.f-note{color:rgba(255,255,255,.3)}
.f-top-link{margin-left:auto;transition:color .15s}
.f-top-link:hover{color:var(--amber)}

/* ---------- 無障礙：跳過導覽 ＋ 螢幕閱讀器專用文字 ---------- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:8px;left:8px;z-index:999;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;
  background:var(--ink);color:#fff;border-radius:var(--radius);
}

/* ================================================================
   單篇文章
   ================================================================ */
/* 桌機：左文章、右側欄（2026-08-05 Andrew 指定改成側欄版型）
   程式碼區塊已改成自動換行，內文變窄不會再擠壞指令，所以側欄可以放了 */
.single-layout{
  display:grid;
  grid-template-columns:minmax(0,768px) 300px;
  justify-content:center;gap:0 40px;
  position:relative;
}
.article-wrap{grid-column:1;max-width:768px;margin:0;padding:0 24px;width:100%}
.side-col{grid-column:2;padding-right:24px}

/* 側欄整塊固定：捲動時目錄與最新文章一起跟著 */
.side-inner{
  position:sticky;top:96px;margin-top:88px;
  max-height:calc(100vh - 120px);overflow-y:auto;
  scrollbar-width:thin;
}
.side-inner::-webkit-scrollbar{width:6px}
.side-inner::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* ---------- 大綱／目錄 ---------- */
.toc{
  border-left:2px solid var(--line);padding-left:16px;
  margin-bottom:36px;
}
.toc > summary{
  display:none;               /* 桌機不需要摺疊 */
  list-style:none;cursor:pointer;
}
.toc > summary::-webkit-details-marker{display:none}
.toc-title{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-45);margin-bottom:12px;
}
.toc ol{list-style:none;font-size:13.5px;line-height:1.6}
.toc li + li{margin-top:10px}
.toc li.lv3{padding-left:14px;font-size:13px}
.toc a{color:var(--ink-45);transition:color .15s;display:block}
.toc a:hover{color:var(--amber)}
.toc a.is-current{color:var(--ink);font-weight:700}
.toc li.lv3 a.is-current{font-weight:600}

/* ---------- 側欄：全站最新 4 篇 ---------- */
.side-title{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-45);margin-bottom:14px;
}
.side-latest ul{list-style:none}
.side-latest li + li{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
/* 純文字清單，不放縮圖（2026-08-05 Andrew 指定） */
.side-latest a{display:block}
.mini-t{
  font-size:14px;line-height:1.5;font-weight:700;transition:color .15s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.side-latest a:hover .mini-t{color:var(--amber)}
.mini-m{font-size:12px;color:var(--ink-45);margin-top:5px}

/* 標題錨點要避開固定住的 header */
.entry-content h2,.entry-content h3{scroll-margin-top:96px}

.crumb{font-size:13px;color:var(--ink-45);margin:28px 0 22px}
.crumb a:hover{color:var(--amber)}
.crumb .sep{margin:0 8px;opacity:.5}

.entry-header{margin-bottom:28px}
.entry-cat{
  display:inline-block;background:var(--amber);color:#fff;
  font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:16px;
  transition:background .18s ease;
}
a.entry-cat:hover,a.entry-cat:focus-visible{background:#B45309;color:#fff}
.entry-title{
  font-size:clamp(27px,4.2vw,40px);line-height:1.34;font-weight:800;letter-spacing:-.02em;
}
.entry-meta{
  margin-top:16px;font-size:13.5px;color:var(--ink-45);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.entry-meta .sep{opacity:.5}
.entry-thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);margin-bottom:36px;background:#2a2a2a;
}

/* 內文排版 */
.entry-content{font-size:17px;line-height:1.95;color:rgba(26,26,26,.88)}
.entry-content > * + *{margin-top:1.5em}
.entry-content h2{
  font-size:24px;font-weight:800;line-height:1.5;color:var(--ink);
  margin-top:2.6em;padding-top:.1em;position:relative;letter-spacing:-.01em;
}
.entry-content h2::before{
  content:"";display:block;width:34px;height:3px;background:var(--amber);
  border-radius:2px;margin-bottom:14px;
}
.entry-content h3{font-size:19px;font-weight:700;line-height:1.6;color:var(--ink);margin-top:2em}
.entry-content strong{font-weight:700;color:var(--ink)}
.entry-content a{
  color:var(--amber);border-bottom:1px solid rgba(217,119,6,.35);transition:.15s;
}
.entry-content a:hover{border-bottom-color:var(--amber);background:rgba(217,119,6,.07)}
.entry-content ul,.entry-content ol{padding-left:1.35em}
.entry-content li + li{margin-top:.55em}
.entry-content li::marker{color:var(--amber)}
.entry-content blockquote{
  border-left:3px solid var(--amber);padding:2px 0 2px 20px;
  color:var(--ink-70);font-size:16.5px;
}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:2.8em 0}

/* 程式碼：工具文的指令用等寬字，強化「這是可執行的東西」 */
.entry-content code{
  font-family:var(--mono);font-size:.88em;
  background:rgba(26,26,26,.07);padding:2px 6px;border-radius:3px;
}
.entry-content pre{
  background:var(--ink);color:#f2efe9;border-radius:var(--radius);
  padding:20px 22px;font-size:14px;line-height:1.75;
  /* 自動換行：長指令不橫捲，直接折下一行（2026-08-05 Andrew 指定） */
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  /* 超過高度改成區塊內上下捲，長程式碼不會把整篇文章撐開 */
  max-height:var(--pre-max-h);overflow-y:auto;
}
.entry-content pre code{background:transparent;padding:0;font-size:inherit;color:inherit}
.entry-content figure{margin-top:2em}
.entry-content figure img{border-radius:var(--radius);width:100%}
.entry-content figcaption{
  margin-top:10px;font-size:13px;color:var(--ink-45);text-align:center;
}

/* 文末標籤 */
.entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px}
.entry-tags a{
  font-size:13px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-70);transition:.15s;
}
.entry-tags a:hover{border-color:var(--amber);color:var(--amber)}

/* 作者卡片 */
.author-box{
  display:flex;gap:20px;margin-top:48px;padding:26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.author-avatar{
  width:68px;height:68px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#2c3e50,#1a1a1a);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber);font-weight:800;font-size:22px;
}
.author-box h4{font-size:17px;font-weight:800;margin-bottom:2px}
.author-role{font-size:13px;color:var(--amber);font-weight:600}
.author-box p{font-size:14px;line-height:1.8;color:var(--ink-70);margin-top:10px}
.author-links{display:flex;gap:14px;margin-top:12px;font-size:13px;color:var(--ink-45)}
.author-links a:hover{color:var(--amber)}

/* 上一篇／下一篇 */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;
}
.post-nav a{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;background:#fff;transition:.15s;
}
.post-nav a:hover{border-color:var(--amber)}
.post-nav .dir{font-size:12.5px;color:var(--ink-45);margin-bottom:7px}
.post-nav .t{
  font-size:15px;font-weight:700;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-nav a:hover .t{color:var(--amber)}
.post-nav .next{text-align:right}
.post-nav .empty{
  border-style:dashed;background:transparent;color:var(--ink-45);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* 同分類最新 3 篇 */
.related{border-top:1px solid var(--line);margin-top:64px;padding-top:34px}
.related-head{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
.related-head h3{font-size:19px;font-weight:800}
.related-head span{font-size:13px;color:var(--ink-45)}
.related .cards{margin-bottom:0}

.article-foot{padding-bottom:80px}

/* ---------- 窄於 1180px：目錄收成可摺疊的框，塞進文章裡 ---------- */
@media (max-width:1180px){
  .single-layout{display:block}
  .article-wrap{max-width:720px;margin:0 auto}
  /* 側欄整塊收起：目錄由 JS 搬進文章，最新文章不重複出現
     （文末已經有「同分類最新 3 篇」） */
  .side-col{display:none}
  .toc{
    position:static;max-height:none;overflow:visible;
    border:1px solid var(--line);border-radius:var(--radius);
    background:#fff;padding:0;margin:0 0 36px;
  }
  .toc > summary{
    display:flex;align-items:center;gap:10px;
    padding:14px 18px;font-size:15px;font-weight:700;
  }
  .toc > summary::after{
    content:"";margin-left:auto;width:7px;height:7px;
    border-right:2px solid var(--ink-45);border-bottom:2px solid var(--ink-45);
    transform:translateY(-2px) rotate(45deg);transition:transform .2s;
  }
  .toc[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
  .toc[open] > summary{border-bottom:1px solid var(--line)}
  .toc .toc-body{padding:16px 18px 18px}
  .toc-title{display:none}
}

/* ---------- 平板 ---------- */
@media (max-width:960px){
  .f-top{grid-template-columns:1fr 1fr;gap:32px}
  .f-brand{grid-column:1 / -1}
  .cards{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 手機 ---------- */
@media (max-width:768px){
  .hero{grid-template-columns:1fr;gap:0;margin:24px 0 40px}
  .slide{aspect-ratio:4/3}
  .slide .body{padding:20px 20px 46px}
  .splide__arrows{display:none}
  .cards{grid-template-columns:1fr;gap:26px}
  .card .ph{aspect-ratio:16/9}

  /* 手機不顯示右側各類文章列表 */
  .rail{display:none}

  .site-header .wrap{padding-top:16px;padding-bottom:14px}
  .site-nav{display:none}
  /* 放大鏡與漢堡一起靠右並排（放大鏡在手機也顯示，搜尋只要 1 步） */
  .search-toggle{margin-left:auto;width:40px;height:40px}
  .nav-toggle{display:flex;margin-left:4px}
  .site-title{font-size:25px}
  .tagline{font-size:13px}

  body.is-front .chip-nav{display:block;position:relative;border-top:1px solid var(--line)}
  .chip-row{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:12px 24px;scroll-snap-type:x proximity;
  }
  .chip-row::-webkit-scrollbar{display:none}
  .chip{
    flex:0 0 auto;scroll-snap-align:start;
    font-size:14px;padding:7px 15px;border-radius:999px;
    border:1px solid var(--line);background:#fff;white-space:nowrap;
  }
  .chip:active{border-color:var(--amber);color:var(--amber)}
  .chip-nav::after{
    content:"";position:absolute;right:0;top:0;bottom:0;width:56px;
    background:linear-gradient(to left,var(--paper) 42%,rgba(250,248,245,0));
    pointer-events:none;
  }

  /* 單篇文章 */
  .entry-content{font-size:16.5px;line-height:1.9}
  .entry-content h2{font-size:21px;margin-top:2.2em}
  .entry-content h3{font-size:18px}
  /* 主圖與程式碼區塊：與內文同寬，不出血（Andrew 2026-08-05 指定） */
  .entry-content pre{padding:16px;font-size:13px;--pre-max-h:320px}
  .entry-thumb{margin-bottom:28px}
  .author-box{flex-direction:column;gap:14px;padding:22px}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
  .go-top{right:16px;bottom:16px;width:42px;height:42px}

  /* footer */
  .site-footer .wrap{padding-top:40px}
  .f-top{grid-template-columns:1fr;gap:28px;padding-bottom:26px}
  .f-bottom{flex-wrap:wrap;gap:8px 14px}
}

/* ================================================================
   分類／標籤／日期彙整（archive.php）
   ================================================================ */
.arch-crumb{margin-top:32px}

/* 頁首：分類名＋說明＋篇數。標籤、日期彙整共用同一組元件，只換文字 */
.arch-head{
  border-bottom:1px solid var(--line);
  padding-bottom:26px;margin-bottom:34px;
}
.arch-kicker{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--ink-45);margin-bottom:10px;
}
.arch-title{
  font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.25;
}
/* 標題下方的琥珀短線：跟內文 H2 同一個手法，讓「這裡是一個段落起點」一眼看出來 */
.arch-title::after{
  content:"";display:block;width:34px;height:3px;background:var(--amber);
  border-radius:2px;margin-top:14px;
}
.arch-desc{
  margin-top:16px;max-width:44em;
  font-size:16px;line-height:1.9;color:var(--ink-70);
}
.arch-count{margin-top:14px;font-size:13px;color:var(--ink-45)}

/* 子分類列：只在「這個分類有子分類」時輸出，沒有就整列不存在 */
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.subcat{
  font-size:14px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:#fff;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.subcat:hover{border-color:var(--amber);color:var(--amber)}
.subcat.is-on{background:var(--amber);border-color:var(--amber);color:#fff;font-weight:600}
.subcat.is-on:hover{color:#fff}

/* 無特色圖 fallback：深墨底＋站名，不放預設圖（跟 Hero 同一套規則）
   卡片與搜尋結果的縮圖共用，尺寸各自沿用原本的 .ph / .rthumb */
.ph-none{
  background:var(--ink);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
}
.ph-none span{
  font-family:var(--mono);font-size:13px;letter-spacing:.22em;
  color:rgba(255,255,255,.28);white-space:nowrap;
}
.card .ph-none{width:100%;aspect-ratio:16/10;margin-bottom:12px}
.rthumb.ph-none span{font-size:11px;letter-spacing:.14em}

/* ---------- 數字分頁 ---------- */
.pager{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  margin:8px 0 80px;
}
.pg{
  min-width:40px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  font-size:15px;font-variant-numeric:tabular-nums;
  transition:border-color .15s,color .15s;
}
a.pg:hover{border-color:var(--amber);color:var(--amber)}
.pg.is-now{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.pg-edge{font-size:14px;color:var(--ink-70)}

/* ---------- 沒有結果時的出路（search.php / 404.php 之後共用） ---------- */
.wayout{padding:12px 0 40px;text-align:center}
.wayout-title{font-size:clamp(20px,2.6vw,25px);font-weight:800;letter-spacing:-.01em}
.wayout-sub{margin-top:12px;font-size:15.5px;line-height:1.9;color:var(--ink-70)}
.wayout-cats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:26px 0 64px;
}
.wayout .sec-head{text-align:left}
.wayout .cards{text-align:left;margin-bottom:72px}

@media (max-width:768px){
  .arch-head{padding-bottom:22px;margin-bottom:28px}
  .arch-desc{font-size:15.5px;margin-top:14px}
  /* 子分類列在手機改成可橫滑，右緣用暖白漸層提示還有內容（同首頁膠囊列的作法） */
  .subcats{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-24px;margin-right:-24px;padding:0 24px;
    scroll-snap-type:x proximity;position:relative;
    /* 用 mask 讓右緣淡出，暗示「還有內容可以滑」。
       首頁膠囊列是用外層 ::after 蓋漸層，這裡沒有外層容器，改用 mask 省一個 wrapper */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
  }
  .subcats::-webkit-scrollbar{display:none}
  .subcat{flex:0 0 auto;scroll-snap-align:start}
  .pager{gap:6px;margin-bottom:56px}
  .pg{min-width:38px;height:38px;padding:0 10px;font-size:14px}
  /* 手機分頁列很容易換行成兩排，只留「上一頁／下一頁」＋目前頁 */
  .pager a.pg:not(.pg-edge){display:none}
  .wayout-cats{margin-bottom:44px}
}

/* ================================================================
   搜尋結果（search.php）
   ================================================================ */
/* 頁面裡的搜尋框（頁首、查無結果都用這一組），比 header 那條寬一點 */
.search-form.is-page{max-width:520px;margin-top:20px}
.search-form.is-center{margin:26px auto 0}

/* 結果用橫式清單：規格要求標題＋摘要都要高亮，卡片版型塞不下摘要 */
.results{margin-bottom:34px}
.result{border-bottom:1px solid var(--line)}
.result:first-child{border-top:1px solid var(--line)}
.result > a{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;
  padding:22px 0;align-items:start;
}
.rthumb{
  width:180px;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);background:#2a2a2a;
}
.rtitle{
  font-size:19px;line-height:1.55;font-weight:700;letter-spacing:-.01em;
  transition:color .15s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.result a:hover .rtitle{color:var(--amber)}
.rexcerpt{
  margin-top:8px;font-size:14.5px;line-height:1.85;color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rbody .cmeta{margin-top:10px}
/* 關鍵字高亮：琥珀淡底＋原色字。整段標黃底會讓標題變得很難讀 */
mark{
  background:rgba(217,119,6,.18);color:inherit;
  padding:0 2px;border-radius:2px;font-weight:inherit;
}
.rtitle mark{background:rgba(217,119,6,.22);font-weight:800}

@media (max-width:768px){
  /* 遮罩版搜尋：輸入框自己一列、按鈕自己一列，兩者都是滿寬 */
  .search-overlay{padding:9vh 16px 16px;align-items:flex-start}
  .search-panel{padding:26px 20px 20px}
  .search-form.is-overlay{flex-direction:column;gap:10px}
  .search-form.is-overlay button{width:100%;padding:13px 0}
  .search-form.is-page{margin-top:16px}
  .search-form button{padding:0 16px;font-size:14px}
  /* 縮圖縮小改成靠上，兩行標題＋兩行摘要在 375px 仍讀得完 */
  .result > a{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:18px 0}
  .rthumb{width:96px}
  .rthumb.ph-none span{font-size:9px;letter-spacing:.08em}
  .rtitle{font-size:16.5px}
  .rexcerpt{font-size:13.5px;margin-top:6px}
}

/* ================================================================
   404（404.php）—— 整頁就是一塊 .wayout，只多了上方的錯誤碼與底部一行
   ================================================================ */
.wayout.is-404{padding-top:56px}
.err-code{
  font-family:var(--mono);font-size:clamp(64px,11vw,116px);font-weight:800;
  line-height:1;letter-spacing:.04em;
  color:rgba(26,26,26,.09);            /* 淡到只當背景層：它是狀態不是重點，重點是下面的出路 */
  margin-bottom:8px;
}
.wayout-foot{
  border-top:1px solid var(--line);padding-top:26px;margin-bottom:72px;
  font-size:14px;color:var(--ink-45);
}
.wayout-foot a{color:var(--amber);border-bottom:1px solid rgba(217,119,6,.4)}
.wayout-foot a:hover{border-bottom-color:var(--amber)}

@media (max-width:768px){
  .wayout.is-404{padding-top:32px}
  .wayout-foot{margin-bottom:56px}
}

/* ================================================================
   單一頁面（page.php）—— 沿用單篇的內文排版，但單欄置中、無側欄
   ================================================================ */
/* 頁面沒有目錄／閱讀進度條／側欄：關於、聯絡、隱私政策都不長，
   側欄擺最新文章反而像在頁面裡塞廣告。長頁真的需要目錄再說 */
.page-layout .article-wrap{max-width:768px;margin:0 auto}
/* 頁首那句引言：比內文大一點、灰一點，當作整頁的定調 */
.page-lead{
  margin-top:18px;font-size:18px;line-height:1.9;color:var(--ink-70);
}
.page-foot{
  border-top:1px solid var(--line);margin-top:64px;padding:22px 0 80px;
  font-size:13px;color:var(--ink-45);
}

@media (max-width:768px){
  .page-lead{font-size:16.5px;margin-top:14px}
  .page-foot{margin-top:48px;padding-bottom:56px}
}

/* 選單／搜尋遮罩開啟時鎖背景捲動 */
body.nav-open,body.search-open{overflow:hidden}

/* 尊重「減少動態」設定 */
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .search-overlay,.search-panel{animation:none}
  .read-progress{transition:none}
  .page-loading span{transition:none}
}