/*
 * blog.css —— Signova 專欄（`/blog` 列表頁與 `/blog/{slug}` 逐篇頁）。
 *
 * 兩頁共用一份：版面元素（卡片、文章排版、互動列、留言）有一半是重疊的，拆成
 * 兩份 css 只會讓「卡片圓角改了但文章頁沒跟上」這種漂移每次都發生一次。
 *
 * 色票全部走主題 token（--card-bg / --bg-1 / --bg-2 / --border / --border-strong
 * / --text / --text-muted / --text-faint / --accent / --danger / --warn-* /
 * --radius），**零寫死色碼**：站上有五套主題（含香檳金），寫死一個顏色就是在其
 * 中四套裡壞掉。刊頭的「香檳金紙質」也一樣是代幣疊出來的（見該段），不是圖檔、
 * 也不是寫死的金色。
 *
 * 命名前綴**維持 `rs-`**（檔名已由 research.css 改成 blog.css，#248b）：前綴是
 * CSS 的命名空間、不是網址，改它要同步動 CSS／JS／app.py 三處共 200+ 個字面值，
 * 而使用者一個字都看不到。改名棒不做這種只有風險沒有價值的順手改。與 `/learn`
 * 的 `ln-`、個股 SSR 的 `ss-` 同一套慣例，保證不會與 app.css 的全域類別互相蓋掉。
 */

/* ---------------------------------------------------------------- 版面骨架 */
.rs-wrap {
  max-width: 820px;
  margin: 0 auto;
  /* 上緣 padding 為 0：刊頭要貼齊內容欄的最上緣（它自己有內距）。列表頁以外
     的頁面由 `.rs-crumb` 的 margin 撐出上緣留白。 */
  padding: 0 18px 64px;
  line-height: 1.85;
}
.rs-crumb { margin-top: 18px; }
.rs-crumb {
  color: var(--text-faint);
  font-size: .82rem;
  margin-bottom: 4px;
}
.rs-crumb a { color: var(--text-faint); }
.rs-wrap h1 {
  margin: 4px 0 6px;
  font-size: 1.8rem;
  line-height: 1.3;
}
.rs-lede {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 1.02rem;
}
.rs-meta {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 0 0 10px;
}
.rs-empty {
  margin: 18px 0;
  color: var(--text-muted);
}
.rs-note {
  color: var(--text-muted);
  font-size: .9rem;
}

/* ---------------------------------------------------------------- 文章卡片 */
.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.rs-card { margin: 0; }
.rs-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
}
.rs-card-link:hover { border-color: var(--border-strong); }
.rs-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.rs-card-body { padding: 14px 16px 16px; }
.rs-card-title {
  margin: 0 0 4px;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--accent);
}
.rs-card-meta {
  color: var(--text-faint);
  font-size: .8rem;
  margin-bottom: 8px;
}
.rs-card-summary {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.75;
}

/* ------------------------------------------------------------------ 標籤 */
.rs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.rs-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------ 卡片上的計數 */
.rs-stats {
  display: flex;
  gap: 14px;
  color: var(--text-faint);
  font-size: .82rem;
}

/* -------------------------------------------------------------- 文章本文
 * `.rs-article` 底下是 markdown 轉出來的 HTML，選擇器一律往下寫在這個容器裡，
 * 不動全域標籤樣式——這一族的排版需求（大量表格、圖片、引文）與站上其他頁不同。
 */
/* 橫式封面（1200×630 滿欄寬）。`aspect-ratio` 鎖住比例：圖還沒下載完時版面
   不會先塌一塊再彈開（CLS），而 `object-fit: cover` 讓比例不同的圖也不變形。 */
.rs-hero {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  margin: 10px 0 24px;
}
.rs-article { font-size: 1.02rem; }
.rs-article h2 {
  margin: 34px 0 10px;
  font-size: 1.32rem;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rs-article h3 {
  margin: 24px 0 8px;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--accent);
}
.rs-article p { margin: 0 0 16px; }
.rs-article ul,
.rs-article ol { margin: 0 0 16px; padding-left: 1.5em; }
.rs-article li { margin: 4px 0; }
.rs-article a { color: var(--accent); }
.rs-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.rs-article blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--border-strong);
  background: var(--card-bg);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
}
.rs-article blockquote p:last-child { margin-bottom: 0; }
.rs-article code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card-bg);
  font-size: .9em;
}
.rs-article pre {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  /* 長程式碼自己在框裡橫向捲，不讓整個頁面出現橫捲軸 */
  overflow-x: auto;
}
.rs-article pre code { padding: 0; border: 0; background: none; }
/* 表格：**外包一層容器**橫捲（`research_articles.render_markdown()` 在轉完
   markdown 之後把每張 `<table>` 包進 `.rs-table-wrap`）。
   為什麼不像先前那樣對 `<table>` 自己下 `display:block; overflow-x:auto`：那會
   把 table 從表格排版模式拿掉，`width:100%` 與欄寬平均分配全部失效——窄螢幕上
   看起來會捲，寬螢幕上表格卻縮成內容寬度、右邊留一大塊空白。 */
.rs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 16px;
}
/* 長網址／長英數字串不能撐破手機版（08-19 手機 390 實測：附錄兩條期交所/證交所
   連結把 li 撐到 384px、整頁 scrollWidth 422）。整個正文都允許任意處斷行，
   連結再多保一層 break-all。 */
.rs-article,
.rs-article p,
.rs-article li,
.rs-article td,
.rs-article th { overflow-wrap: anywhere; word-break: break-word; }
.rs-article a { word-break: break-all; }

.rs-article table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .92rem;
}
.rs-article th,
.rs-article td {
  padding: 7px 10px;
  border: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.rs-article th {
  background: var(--card-bg);
  color: var(--text);
  font-weight: 700;
}
.rs-article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 26px 0;
}

/* ------------------------------------------------------------ 互動列（讚／分享） */
.rs-engage {
  margin: 28px 0 8px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}
.rs-engage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rs-like {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.rs-like:hover { border-color: var(--accent); }
.rs-like .rs-like-icon { color: var(--text-faint); font-size: 1.05rem; }
.rs-like.is-liked { border-color: var(--danger); color: var(--danger); }
.rs-like.is-liked .rs-like-icon { color: var(--danger); }
/* 互動列左端的瀏覽數（與資訊列的那一份同值，見 app.py `_blog_article_body_html()`）*/
.rs-viewstat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-faint);
  font-size: .9rem;
}
.rs-share {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.rs-share-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: .82rem;
  cursor: pointer;
}
.rs-share-btn:hover { border-color: var(--border-strong); color: var(--text); }
.rs-engage-hint {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: var(--text-muted);
  font-size: .86rem;
}
.rs-engage-hint.is-error { color: var(--danger); }

/* ---------------------------------------------------------------- 留言區 */
.rs-comments { margin: 26px 0 0; }
.rs-comments-title {
  margin: 0 0 12px;
  font-size: 1.12rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rs-comment-list { margin: 0 0 14px; }
.rs-comment {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rs-comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  font-size: .84rem;
  color: var(--text-faint);
}
.rs-comment-name { color: var(--text); font-weight: 700; }
.rs-comment-del {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
}
.rs-comment-del:hover { color: var(--danger); }
.rs-comment-body {
  margin: 0;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.8;
  /* 留言允許換行，長字串（網址）不得撐破卡片 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rs-comment-empty {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 0 0 14px;
}
.rs-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  line-height: 1.7;
  resize: vertical;
}
.rs-comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.rs-comment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.rs-comment-left {
  color: var(--text-faint);
  font-size: .82rem;
}
.rs-comment-send {
  margin-left: auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  /* 強調色底上的文字一律 `--on-accent`（五套主題各自定義過），不寫死色碼 */
  color: var(--on-accent);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}
.rs-comment-send[disabled] { opacity: .55; cursor: default; }
.rs-comment-guest {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .9rem;
}
.rs-comment-guest a { color: var(--accent); }

/* --------------------------------------------------------------- 轉換 CTA */
.rs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 8px;
}
.rs-cta a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}
.rs-cta .rs-primary { background: var(--accent); color: var(--on-accent); }
.rs-cta .rs-ghost { border: 1px solid var(--border-strong); color: var(--text); }

/* ---------------------------------------------------------------- 免責段 */
.rs-disc {
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  font-size: .88rem;
  line-height: 1.7;
}

/* =========================================================== 刊頭（masthead）
 * 站長 08-19 指定：`/blog` 最上方一條橫式寬幅主視覺，左字標、右定位句，底下
 * 一條金線；桌機約 220px、手機約 140px。
 *
 * **純 CSS、零圖檔**：刊頭是每次載入這一頁都會看到的第一屏，塞一張背景圖等於
 * 在首屏加一個「下載完才不破版」的相依。紙質感由兩層 background-image 疊出來：
 *   1. 細紋＝等距直紋（`repeating-linear-gradient`），仿手工紙的簾紋；
 *   2. 底＝斜向的三停漸層，讓平面上有一道緩慢的明暗轉折。
 * 兩層都只吃主題代幣（--border / --bg-1 / --bg-2 / --card-bg），所以在香檳金
 * 主題下自然是香檳金的紙，在深色主題下是深色的紙——**零寫死色票**。
 *
 * 負 margin ＝ 抵銷 `.rs-wrap` 的左右內距，讓刊頭齊到內容欄的邊。**刻意不用
 * `100vw` 全出血**：`100vw` 含捲軸寬度，有垂直捲軸時會讓整個 body 橫向捲動
 * （本波 RWD 驗收條件明文禁止）。
 * ========================================================================= */
/* 刊頭＝品牌金屬香檳紙（2026-08-19 站長 20:03：直條紋太醜，要我們的金屬主題）。
   這塊是**品牌版面**不是主題 UI：七段漸層、斜掃光、細橫紋、墨褐字全部照
   social/output/2026-08-19-settlement/make.py 的 PAPER／INK_D／INK_M／GOLD_LINE
   正本逐字抄，五套主題下都長一樣（跟圖卡一致），所以這裡刻意用色票常數，
   只掛在 .rs-masthead 的自訂屬性上，不外溢。 */
.rs-masthead {
  --mh-paper: linear-gradient(102deg,#F9EEDA 0%,#E4CB9E 16%,#FCF5E6 31%,#DBBF8D 47%,#F7E6CA 63%,#D3B279 80%,#F2E4C8 100%);
  --mh-ink: #2B1D06;
  --mh-ink-m: #6B5225;
  --mh-gold-line: #8A6A22;
  --mh-gold: #C9A961;
  position: relative;
  margin: 0 -18px 22px;
  padding: 0 28px;
  min-height: 220px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--mh-ink);
  background-color: #F2E4C8;
  background-image:
    repeating-linear-gradient(0deg, rgba(122,90,30,.055) 0 1px, rgba(0,0,0,0) 1px 5px),
    var(--mh-paper);
  border-bottom: 1px solid var(--mh-gold-line);
  box-shadow: inset 0 -6px 0 -4px var(--mh-gold), 0 6px 18px rgba(122,90,30,.12);
}
/* 斜掃光：跟圖卡同一道 104deg 高光帶 */
.rs-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(255,255,255,0) 16%, rgba(255,255,255,.55) 26%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 62%, rgba(255,255,255,.30) 70%, rgba(255,255,255,0) 78%);
}
/* 右側浮水印：三根細 K 線（純 CSS 漸層畫，不載圖） */
.rs-masthead::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 18%;
  width: 160px;
  height: 64%;
  pointer-events: none;
  opacity: .16;
  background:
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 18px 34% / 2px 46% no-repeat,
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 10px 46% / 18px 24% no-repeat,
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 72px 12% / 2px 60% no-repeat,
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 64px 24% / 18px 30% no-repeat,
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 126px 0 / 2px 70% no-repeat,
    linear-gradient(var(--mh-gold-line), var(--mh-gold-line)) 118px 8% / 18px 40% no-repeat;
}
.rs-masthead-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  width: 100%;
}
.rs-masthead-brand {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  color: var(--mh-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.rs-masthead-tagline {
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--mh-ink-m);
  padding-left: 12px;
  border-left: 2px solid var(--mh-gold-line);
}

/* ==================================================== 分類篩選籤與分類徽章 */
.rs-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.rs-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: .88rem;
  text-decoration: none;
}
.rs-cat:hover { border-color: var(--border-strong); color: var(--text); }
.rs-cat.is-active {
  border-color: var(--border-strong);
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 700;
}
/* 這一類目前一篇都沒有：仍然是可按的連結（按下去會看到空狀態），只是淡一階
   ——把它藏起來會讓讀者以為這個專欄不寫這一類東西。 */
.rs-cat.is-empty { opacity: .55; }
.rs-cat-n {
  color: var(--text-faint);
  font-size: .78rem;
}
.rs-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--text);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.8;
}

/* ---------------------------------------------------------- 瀏覽數（眼睛） */
.rs-eye {
  vertical-align: -2px;
  flex: none;
}
.rs-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ------------------------------------------------------------- 相關文章 */
.rs-related { margin: 30px 0 0; }
.rs-related-title {
  margin: 0 0 12px;
  font-size: 1.12rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.rs-related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-related-list li { margin: 0 0 8px; }
.rs-related-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
}
.rs-related-list a:hover { border-color: var(--border-strong); }
.rs-rel-title { color: var(--accent); font-size: .96rem; }
.rs-rel-date { color: var(--text-faint); font-size: .8rem; flex: none; }

/* ============================================================== 平板 */
/* 內文最大寬 720px 置中（站長 08-19 指定）：820px 的行長在平板直立時一行超過
   40 個中文字，讀起來會掉行。桌機維持 820px。 */
@media (min-width: 561px) and (max-width: 1024px) {
  .rs-wrap { max-width: 720px; }
  .rs-masthead { min-height: 150px; padding: 0 18px; }
  .rs-masthead-brand { font-size: 1.9rem; }
  .rs-masthead::after { width: 110px; right: 2%; opacity: .12; }
  .rs-masthead-tagline { border-left: 0; padding-left: 0; font-size: .92rem; }
  .rs-masthead-brand { font-size: 2rem; }
}

/* ============================================================== 窄螢幕 */
@media (max-width: 560px) {
  .rs-wrap { padding: 0 14px 56px; line-height: 1.8; }
  .rs-wrap h1 { font-size: 1.42rem; }
  .rs-grid { grid-template-columns: 1fr; }
  .rs-share { margin-left: 0; width: 100%; }
  .rs-article { font-size: 1.02rem; line-height: 1.8; } /* ≒16.3px／1.8 */
  .rs-article h2 { font-size: 1.18rem; margin-top: 26px; }

  /* 刊頭：字標與定位句改成上下兩行（同一行擠在 360px 寬上會斷得很難看） */
  .rs-masthead {
    margin: 0 -14px 18px;
    padding: 0 16px;
    min-height: 140px;
  }
  .rs-masthead-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rs-masthead-brand { font-size: 1.66rem; letter-spacing: .04em; }
  .rs-masthead-tagline { font-size: .88rem; }

  /* 分類籤：橫向一列可捲，不換行堆成三排把清單推到螢幕外 */
  .rs-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 16px;
    padding: 0 14px 4px;
    scrollbar-width: none;
  }
  .rs-cats::-webkit-scrollbar { display: none; }
  .rs-cat { flex: none; }

  /* 互動列：分享鈕自己一行（讚與瀏覽數留在上面那一行） */
  .rs-engage { padding: 12px 14px; }
  .rs-engage-row { gap: 8px; }

  /* 留言框：手機上打字要好按 */
  .rs-comment-form textarea { font-size: 1rem; line-height: 1.75; }
  .rs-comment-send { padding: 10px 20px; font-size: .96rem; }

  .rs-related-list a { flex-direction: column; gap: 2px; }
}

/* 文章目錄（站長 2026-08-19 22:48）：h2 錨點清單。桌機/平板一欄卡片；手機同寬。
   零寫死色票，全部走主題 token。 */
.rs-toc {
  margin: 18px 0 22px;
  padding: 14px 18px;
  background: var(--bg-alt, rgba(122, 90, 30, 0.05));
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.rs-toc-title { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 6px; }
.rs-toc ol { margin: 0; padding-left: 1.4em; }
.rs-toc li { margin: 4px 0; font-size: 14.5px; line-height: 1.6; }
.rs-toc a { color: var(--accent); text-decoration: none; }
.rs-toc a:hover { text-decoration: underline; }
.rs-article h2 { scroll-margin-top: 84px; }