/* 橘色四角色與 index.html／HUB_CSS 同一套：--accent 只做裝飾，文字用
   --accent-text，底色放白字用 --accent-solid，深色底用 --accent-on-dark。 */
/* 2026-08-07 全站改冷色票（IC：不要 Claude 那種米色底＋髮絲線＋無邊界）。
   --border 專給「可以點的東西」的外框（對白 3.2:1），純分隔線用 --line。 */
:root{--accent:#C8602A;--accent-text:#A0481C;--accent-solid:#B0521F;--accent-on-dark:#E08A50;
 --text:#1F1D1B;--text-light:#3F4650;--text-muted:#5A6169;--bg:#FFFFFF;--border:#8A9298;--line:#D9DDE1;
 /* 頁面外框深色底（IC 2026-07-28）：文章不再是無邊界的滿版淺色，
    左右留深色，內文區塊看得出邊界。--sheet-w 同時決定 navbar 內容寬度。 */
 /* --sheet-w / --sheet-pad 同時餵給 navbar 與文章區塊，兩者永遠對齊。
    784 - 56*2 = 672，跟舊版 720 - 24*2 的內文欄寬一模一樣，行長沒變，
    只是紙面往外長出邊界該有的留白。 */
 --page-bg:#100E0B;--sheet-w:784px;--sheet-pad:56px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--page-bg);}
body{font-family:"Noto Sans TC",-apple-system,sans-serif;background:var(--page-bg);color:var(--text);-webkit-font-smoothing:antialiased;}
header{position:sticky;top:0;z-index:100;background:#1A1814;border-bottom:1px solid rgba(255,255,255,0.06);}
/* navbar 的物件寬度與下方文章區塊對齊（同一個 --sheet-w、同一組 24px 內距）*/
.hinner{max-width:var(--sheet-w);margin:0 auto;padding:0 var(--sheet-pad);height:60px;display:flex;align-items:center;gap:16px;}
.logo{color:#fff;display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:26px;}
.logo-text{font-family:"Noto Serif TC",serif;font-weight:700;font-size:16px;color:white;}
.back-link{margin-left:auto;color:rgba(255,255,255,0.72);text-decoration:none;font-size:0.9375rem;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;gap:6px;transition:color 0.2s,background 0.2s;}
.back-link:hover{color:white;background:rgba(255,255,255,0.08);}
/* 圖片置於標題、作者之後（DOM 順序），寬度略小於內文欄、無灰底，文字為主圖為輔 */
.hero-img{max-width:600px;width:90%;max-height:80vh;object-fit:contain;display:block;margin:8px auto 40px;background:none;border-radius:10px;cursor:zoom-in;}
/* 淺色底、大量文字的書本內頁截圖貼在白色紙面上，讀者分不出那是一張圖，
   圖裡的字級會跟內文字級混淆（IC 2026-09-07）。publish.py 量 hero 四邊亮度，
   接近白就自動掛 .framed，跟 .inline-img 用同一條邊。 */
.hero-img.framed{border:1px solid var(--border);
  /* 框線要貼著圖，不能貼著版位。.hero-img 是固定 width:600px + object-fit:contain，
     直式圖被 max-height:80vh 縮到 272px 寬時，框仍畫在 600px 的框框上，
     左右各留 164px 空白（IC 2026-09-07 指出）。改成 width/height auto，
     讓元素的盒子等於縮放後的圖本身，max-width/max-height 照舊限制上限。 */
  width:auto;height:auto;max-width:min(600px,90%);}
.hero-figure{margin:8px auto 40px;text-align:center}
.hero-figure .hero-img{margin:0 auto 12px}
@media(max-width:600px){.hero-img{width:100%;max-width:100%;}.hero-img.framed{width:auto;max-width:100%;}}
.hero-credit{font-size:.8125rem;color:#756C66;margin-top:.4rem;text-align:center}
.hero-credit a{color:#756C66;text-decoration:underline dotted}
.hero-credit a:hover{color:#555;text-decoration:underline}
/* 內文區塊＝浮在深色底上的淺色紙面，寬度與 navbar 內容一致 */
.article-wrap{max-width:var(--sheet-w);margin:24px auto 40px;padding:40px var(--sheet-pad) 80px;
  background:var(--bg);border:1px solid #2E2823;border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,0.45);}
/* 視窗窄到紙面貼邊時，56px 的紙邊留白就太浪費，縮回 24px（navbar 一起縮）*/
@media(max-width:840px){:root{--sheet-pad:24px;}}
/* 麵包屑與 meta 合併成同一列（IC 2026-07-26：分類原本出現兩次、標題也重複）。
   分類膠囊本身就是通往分類彙整頁的連結。整列刻意是小字：它是導覽參考，
   不是內文。小字的代價是對比要夠，所以白字底改 #B0521F（白字 5.2:1，
   原本的 #C8602A 只有 4.1:1）。 */
.article-meta{display:flex;align-items:center;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
.am-home{font-size:0.8125rem;color:var(--text-muted);text-decoration:none;display:inline-block;padding:11px 3px;}
.am-home:hover{color:var(--accent-text);text-decoration:underline;}
.am-sep{font-size:0.8125rem;color:var(--text-muted);margin:0 -4px 0 -6px;}
.cat-badge{display:inline-flex;align-items:center;min-height:32px;background:var(--accent-solid);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:0.8px;padding:6px 14px;border-radius:999px;text-decoration:none;transition:background 0.2s;}
a.cat-badge:hover{background:#8A4419;}
.cat-badge.cat-series{background:transparent;color:var(--accent-text);border:1px solid var(--border);font-weight:500;}
a.cat-badge.cat-series:hover{background:#D6E9E7;border-color:#C8602A;}
.meta-date{font-size:0.8125rem;color:var(--text-muted);}
h1{font-family:"Noto Serif TC",serif;font-size:clamp(22px,4vw,32px);font-weight:700;line-height:1.4;letter-spacing:0.5px;margin-bottom:28px;}
.article-author{font-size:1rem;color:var(--text-light);margin:0 0 40px;}
.article-author a{color:inherit;text-decoration:underline;}
.article-body{font-size:17px;line-height:2;color:var(--text);}
.article-body p{margin-bottom:1.4em;}
/* 同一篇裡兩段獨立文字之間的分隔與編號（IC 把 FB 兩則合成一篇時用） */
.article-body hr.part-sep{border:none;border-top:2px solid #C9BFB2;width:160px;margin:3.2em auto 2.6em;}
/* 一般子標題：與 part-num 同一套設計（Noto Serif 28px 橘），只是段落之間要留呼吸空間。
   以前沒定義這條，裸 <h2> 掉回瀏覽器預設（黑、無襯線、大小不一），全站子標題各行其是。 */
/* 內文裡的裸 <h2>（28px）是 2026-09-07 之前的舊寫法，全站已改成 h2.section-label。
   這條留著當保險，正常情況不該再有東西吃到它：一篇文章只有 h1 與 19px 那一層。 */
.article-body h2{font-family:"Noto Serif TC",serif;font-size:28px;font-weight:700;color:var(--accent);line-height:1.35;margin:1.8em 0 0.8em;}
.article-body h2 a{color:inherit;text-decoration:none;}
.article-body h2.part-num{line-height:1;margin:0 0 1.2em;}
.article-body a{color:var(--accent-text);text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1px;transition:color 0.15s, text-decoration-style 0.15s;}
.article-body a:hover{color:#7A3812;text-decoration:underline solid;}
.article-body ol,.article-body ul{padding-left:1.4em;margin-bottom:1.4em;}
.article-body li{margin-bottom:0.7em;}
.article-body blockquote{background:#E3EFEE;border-left:4px solid var(--accent);padding:14px 18px;margin:1.2em 0 1.4em;border-radius:0 10px 10px 0;font-size:16px;color:#333A40;}
.inline-img{max-width:100%;max-height:80vh;object-fit:contain;height:auto;display:block;margin:1.6em auto;border-radius:10px;border:1px solid var(--border);cursor:zoom-in;}
/* 文章內所有圖片：等比縮放、不超出文字欄寬 */
.article-body img{max-width:100%;height:auto;display:block;margin:1.6em auto;border-radius:10px;border:1px solid var(--border);}
/* ── 標題與問答的唯一規格（IC 2026-09-07 第三版，取代 2026-08-03 那版）──────
   全站只有兩層：<h1> 文章標題，然後就是這一層 19px Noto Serif 粗體橘字。
   沒有第三層，內文裡不准再有別的橘色標題（見 .article-body h2 那條的註解）。

   這一層放兩種東西，都是「這裡換一個主題或換一個人說話」的分隔標記：
     .qa-q            提問者的第一句「問：…」
     h2.section-label IC 原稿的 ❚ 子標題

   **不屬於這一層的，一律是內文**（IC 2026-09-07 三次指正才收斂到這裡）：
     .qa-a            「答：（蔡依橙）」← 它屬於答案，跟內文一起、黑色、不放大
     提問者的後續段落 ← 只有第一句帶「問：」標記，其餘是內文
     答案本體         ← 舊 qa-block 把答案塞在 .qa-a 裡，整篇變橘色沒有內文
   IC 原話：「這一行屬於答案，應該要做成跟內文一樣的設計」「黑色不用放大，不是子標題」。 */
.qa-q,.section-label{font-family:"Noto Serif TC",serif;font-weight:700;font-size:19px;
  color:var(--accent);line-height:1.7;letter-spacing:.02em;}
.qa-q{margin:0 0 1em !important;}
.qa-q + .qa-q{margin-top:-0.4em !important;}
.qa-a{font-size:17px;font-weight:400;color:var(--text);line-height:2;margin:0 0 1.4em !important;}
.section-label{margin:1.9em 0 .5em;}
/* ❚ 子標題 2026-09-07 起是 <h2 class="section-label">（見 publish.py）。
   .article-body h2 那條（28px）特異性比 .section-label 高，會蓋掉這裡的 19px，
   所以要明寫這條把外觀壓回原樣：讀者看到的一個像素都沒變，變的只有語意標籤。 */
.article-body h2.section-label{font-family:"Noto Serif TC",serif;font-weight:700;font-size:19px;
  color:var(--accent);line-height:1.7;letter-spacing:.02em;margin:1.9em 0 .5em;}
@media(max-width:600px){.qa-q,.section-label,.article-body h2.section-label{font-size:18px;}}
footer{background:#1A1814;color:rgba(255,255,255,0.6);text-align:center;padding:28px 24px;font-size:14px;line-height:2;}
footer a{color:var(--accent-on-dark);text-decoration:none;}
footer a:hover{text-decoration:underline;}
footer .foot-links a{color:var(--accent-on-dark);display:inline-block;padding:6px 8px;}
/* ── 上一篇／下一篇 ────────────────────────────────────────
   2026-07-26 從 457 篇各自內嵌一份 823 bytes 的 <style> 收進來（全站重複
   376KB）。以後改這裡就好，cache-buster 由 update_posts_json.py 自動同步。 */
/* 2026-09-05 往下滑會自動接下一篇（article.js），這條導覽從「兩張卡片」
   收成文章尾端的一條交接線：左「← 上一篇」右「下一篇 →」，各一行、不加框。
   它是最後一個區塊，緊接著就是自動接上的下一篇，所以要薄。 */
.prev-next{display:flex;justify-content:space-between;gap:24px;margin:2.2em 0 0;padding-top:1.2em;border-top:1px solid var(--line);}
.pn-item{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;padding:6px 0;text-decoration:none;color:inherit;}
.pn-item:hover .pn-title{color:var(--accent-text);}
.pn-empty{pointer-events:none;}
.pn-right{flex-direction:row-reverse;text-align:right;}
.pn-label{flex-shrink:0;font-size:13px;color:var(--text-muted);font-weight:700;letter-spacing:0.5px;}
.pn-title{font-size:15px;font-weight:500;line-height:1.5;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s;}
@media(max-width:600px){.prev-next{flex-direction:column;gap:2px;}.pn-right{flex-direction:row;text-align:left;}}

/* ── 延伸閱讀：兩篇並排（手機直排），下方一張固定書卡 ───────────── */
.related{margin-top:3em;padding-top:2em;border-top:2px solid var(--line);}
.related h2{font-family:"Noto Serif TC",serif;font-size:18px;font-weight:700;margin-bottom:16px;color:var(--text);}
.related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.related-link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;padding:10px 10px 14px;border-radius:12px;border:1px solid var(--border);transition:all 0.2s;}
.related-link:hover{border-color:var(--accent);background:#E3EFEE;}
.related-link img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;}
.related-link .rl-text{display:flex;flex-direction:column;gap:4px;padding:0 4px;}
.related-link .rl-cat{font-size:12px;color:var(--accent-text);font-weight:700;}
.related-link .rl-cat:empty{display:none;}
.related-link .rl-title{font-size:16px;font-weight:500;line-height:1.5;}
/* 固定書籍推廣卡：暖色微區隔，橫向、跨兩欄，一眼看得出是推書 */
.related-book{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:12px;background:#FDF6F0;border-color:#E7C9B5;}
.related-book img{width:120px;height:68px;aspect-ratio:auto;flex-shrink:0;}
.related-book:hover{border-color:var(--accent);background:#E3EFEE;}
.related-book .rl-title{color:var(--text);}
/* 推薦還沒生出來（publish.py 範本先放空殼）時整塊藏起來 */
.related:has(.related-list:empty){display:none;}

/* ── 自動接下一篇（article.js）──
   .feed-sep 是兩篇紙面之間、露在深色底上的一行小字；.feed-more 是自動接滿
   MAX_CHAIN 篇之後的「繼續往下讀」連結，同樣坐在深色底上。 */
.feed-sep{max-width:var(--sheet-w);margin:-12px auto 28px;padding:0 var(--sheet-pad);display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,0.55);font-size:13px;letter-spacing:0.2em;}
.feed-sep::before,.feed-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.16);}
.feed-more{display:block;width:max-content;margin:-8px auto 48px;padding:12px 28px;border-radius:999px;border:1px solid rgba(255,255,255,0.28);
  color:var(--accent-on-dark);font-size:15px;font-weight:700;text-decoration:none;}
.feed-more:hover{background:rgba(255,255,255,0.08);}
/* 手機：紙面滿版靠邊（小螢幕留深色邊只是浪費寬度），深色底仍在上下與 footer 露出 */
@media(max-width:600px){:root{--sheet-pad:16px;}
  .article-wrap{padding-top:28px;padding-bottom:60px;margin:0 auto 24px;border-radius:0;
  border-left:none;border-right:none;box-shadow:none;}
  .related-list{grid-template-columns:1fr;gap:10px;}
  .related-link{flex-direction:row;align-items:center;gap:12px;padding:10px;}
  .related-link img{width:104px;height:58px;aspect-ratio:auto;flex-shrink:0;}
  .related-link .rl-text{padding:0;}
  .related-link .rl-title{font-size:15px;}
  .feed-sep{margin:-4px auto 20px;}}
/* Lightbox */
.lb-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;overscroll-behavior:none;}
.lb-overlay img{max-width:100vw;max-height:100vh;object-fit:contain;transform-origin:center center;transition:transform 0.1s ease;user-select:none;-webkit-user-drag:none;cursor:grab;}
.lb-overlay img.dragging{cursor:grabbing;transition:none;}
.lb-close{position:fixed;top:16px;right:20px;color:rgba(255,255,255,0.7);font-size:32px;line-height:1;cursor:pointer;z-index:10000;background:none;border:none;padding:4px 8px;}

/* ── 合作推廣書卡（book-card）：書封＋書訊＋購買通路 ───────────── */
.book-card{display:flex;gap:22px;align-items:center;margin:2.5em 0 0;padding:22px 24px;border:1px solid var(--border);border-radius:14px;background:#fff;}
.bc-cover{flex:0 0 132px;display:block;line-height:0;border-radius:10px;overflow:hidden;transition:transform .25s ease;}
.bc-cover img{width:100%;height:auto;display:block;}
.bc-cover:hover{transform:translateY(-3px) scale(1.02);}
.bc-text{flex:1;min-width:0;}
.bc-label{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--text-muted);margin-bottom:10px;}
.bc-title{font-size:20px;font-weight:700;margin:0 0 8px;line-height:1.4;}
.bc-title a{color:#2C2825;text-decoration:none;}
.bc-title a:hover{color:var(--accent-text);}
.bc-sub{font-size:15px;line-height:1.7;color:#4A443E;margin:0 0 8px;}
.bc-meta{font-size:13px;line-height:1.7;color:var(--text-muted);margin:0 0 16px;}
.bc-meta span:not(:last-child)::after{content:"　·　";color:#CFC7BD;}
.bc-links{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.bc-btn{display:inline-block;padding:11px 24px;border-radius:8px;background:var(--accent-solid);color:#fff !important;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s;}
.bc-btn:hover{background:#8A4419;transform:translateY(-1px);}
.bc-alt{display:inline-block;padding:10px 18px;border-radius:10px;background:#fff;border:1.5px solid var(--border);color:var(--accent-text);font-weight:500;font-size:14px;text-decoration:none;transition:all .2s;}
.bc-alt:hover{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;}
@media(max-width:600px){
  .book-card{flex-direction:column;gap:16px;padding:20px 18px;text-align:center;}
  .bc-cover{flex:none;width:150px;}
  .bc-meta{font-size:12px;}
  .bc-meta span{display:block;}
  .bc-meta span:not(:last-child)::after{content:none;}
  .bc-links{justify-content:center;}
  .bc-btn{flex:1 1 100%;text-align:center;}
  .bc-alt{flex:1 1 calc(33.333% - 6px);text-align:center;padding:10px 6px;}
}

/* ── 出版社活動列（event-note）：接在書卡下方的低調補充 ─────────────
   IC 2026-09-07：「那兩個活動連結，就有放就好，可有設計，但低調，
   畢竟我自己不會參加。」→ 不做卡片、不做按鈕、不上底色，只有一條細線
   加兩行小字；日期用 accent 深字當唯一的視覺錨點。 */
.book-card{flex-wrap:wrap;}
.event-note{flex:0 0 100%;width:100%;margin:4px 0 0;padding:14px 2px 0;border-top:1px solid var(--line);text-align:left;}
.event-note .en-label{display:block;font-size:12.5px;letter-spacing:.05em;color:var(--text-muted);margin-bottom:9px;}
.event-note ul{list-style:none;margin:0;padding:0;}
.event-note li{font-size:14px;line-height:1.7;color:var(--text-muted);}
.event-note li + li{margin-top:6px;}
.event-note .en-when{color:var(--accent-text);font-weight:600;margin-right:8px;}
.event-note a{color:var(--accent-text);text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-style .15s;}
.event-note a:hover{color:#7A3812;text-decoration:underline solid;}
@media(max-width:600px){
  .event-note li{font-size:13.5px;}
  .event-note .en-when{display:block;margin-right:0;}
}

/* 鍵盤焦點與動態偏好 */
a:focus-visible,button:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* 回到頁首（由 article.js 注入）：文章頁手機可以到 4000px 以上 */
.to-top{position:fixed;right:16px;bottom:16px;z-index:90;width:48px;height:48px;display:none;
  align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--text-light);box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;font-size:20px;line-height:1;}
.to-top.show{display:flex;}
.to-top:hover{border-color:var(--accent);color:var(--accent-text);}

/* 依讀者脈絡改寫的上一篇／下一篇，上方那一行說明（見 article.js 尾端） */
.pn-ctx{margin:2.4em 0 -1.4em;font-size:14px;color:var(--text-muted);}
.pn-ctx a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;}

.q-list{list-style:none;counter-reset:qn;margin:.9em 0 0;padding:0;}
.q-list li{counter-increment:qn;position:relative;padding-left:2.1em;margin-bottom:.6em;}
.q-list li:last-child{margin-bottom:0;}
.q-list li::before{content:counter(qn) '.';position:absolute;left:0;top:0;width:1.4em;text-align:right;font-weight:700;color:#C8602A;font-variant-numeric:tabular-nums;font-family:sans-serif;}

/* ── 書訊行（IC 2026-09-02 定版）─────────────────────────
   文末那一行「《書名》/ 出版社 / 揭露」。演進：先試整行橘色 section-label，
   IC 說「沒有比較明顯」；再試 ❚ 標記，太抽象看不出是書；最後定在攤開的書
   線條圖示（他從六個版本裡挑的 C）。用 inline SVG 不用 emoji，因為 emoji
   是彩色字型改不動顏色、各平台長相不一，而且書卡標籤已經有一個 📚 了。
   圖示吃 currentColor → 直接套 --accent，跟著字級縮放。
   2026-09-02 起「書名：」三個字不寫，斜線分隔本身就是陳列格式。 */
.book-line{margin:2em 0 0;}
.book-line .bl-icon{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.45em;color:var(--accent);flex:none;}