/* ══════════════════════════════════════════════════════════════
   台股盤後通 — subpage.css（about / guide / faq / topics 內容頁）
   本 App 自有內容頁視覺（TASK-167 PM-R5 新架構：每 App 獨立站台 SEO、
   不套用平台通用內鏈骨架模板）。沿用 style.css 的 Design Token、保持與工具頁
   一致的專業財經調性。App 前綴 tps-。Mobile First。
   載入順序：/common/css/ff-bootstrap.css → ../style.css（取 token）→ 本檔。
   ══════════════════════════════════════════════════════════════ */

.tps-sub {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--tps-sp-4) var(--tps-sp-4) var(--tps-sp-7);
}

/* 資料型詳細頁（個股 hub、spoke、ETF、情報流 feed；皆於 .tps-sub 之外另帶 .tps-stock 或 .tps-disclosures）
   內容欄寬對齊首頁工具頁 .tps-app（1080 ＋同一組左右 gutter），底部共用免責塊（靠 :root 的
   --ff-content-max、--ff-gutter 契約掛在 main 之外）左右自然與內容對齊。
   純文字閱讀頁（about、guide、faq、topics）為「裸」.tps-sub、不命中本規則、維持 760 閱讀寬。 */
.tps-sub.tps-stock,
.tps-sub.tps-disclosures {
  max-width: 1080px;
}

/* 純文字閱讀頁（裸 .tps-sub，about / guide / faq / topics）：底部共用免責塊吃 --ff-content-max（:root 設 1080），
   會比 760 內容寬、左右溢出造成「上窄下寬」。此處把純文字頁的 --ff-content-max 收斂到與內容同寬，
   使上方內容與下方免責塊左右留白一致。資料頁（.tps-stock / .tps-disclosures）本就 1080 對齊、由 :not() 排除不受影響。 */
body:has(main.tps-sub:not(.tps-stock):not(.tps-disclosures)) {
  --ff-content-max: calc(760px - 2 * var(--ff-gutter));
}

/* ── 麵包屑（獨立站台口吻：首頁 / 台股盤後通 / 子頁）── */
.tps-crumb {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-muted);
  padding: var(--tps-sp-3) 0;
}

.tps-crumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-2);
  margin: 0;
  padding: 0;
}

.tps-crumb li {
  display: flex;
  align-items: center;
  gap: var(--tps-sp-2);
}

.tps-crumb li:not(:last-child)::after {
  content: "/";
  color: var(--tps-c-border);
}

.tps-crumb a {
  color: var(--tps-c-text-secondary);
  text-decoration: none;
}

.tps-crumb a:hover {
  color: var(--tps-c-primary);
}

.tps-crumb [aria-current="page"] {
  color: var(--tps-c-text);
}

/* ── 內文排版 ── */
.tps-content h1 {
  font-size: var(--tps-fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  margin: var(--tps-sp-3) 0 var(--tps-sp-4);
  letter-spacing: 0.01em;
}

.tps-content h2 {
  font-size: var(--tps-fs-xl);
  font-weight: 700;
  margin: var(--tps-sp-6) 0 var(--tps-sp-3);
  padding-left: var(--tps-sp-3);
  border-left: 3px solid var(--tps-c-primary);
}

.tps-content h3 {
  font-size: var(--tps-fs-lg);
  font-weight: 700;
  margin: var(--tps-sp-5) 0 var(--tps-sp-2);
  color: var(--tps-c-text);
}

.tps-content p {
  margin: 0 0 var(--tps-sp-4);
  color: var(--tps-c-text);
}

.tps-content strong {
  color: var(--tps-c-primary);
  font-weight: 700;
}

.tps-content ul,
.tps-content ol {
  margin: 0 0 var(--tps-sp-4);
  padding-left: var(--tps-sp-5);
}

.tps-content li {
  margin-bottom: var(--tps-sp-2);
}

/* 內文連結金色；排除按鈕造型的 .tps-cta（否則 .tps-content a 的金色會蓋過 CTA 的深色字＝金底金字隱形）*/
.tps-content a:not(.tps-cta) {
  color: var(--tps-c-primary);
}

/* 重點公式 / 定義框 */
.tps-callout {
  background: var(--tps-c-bg-elev);
  border: 1px solid var(--tps-c-border);
  border-left: 3px solid var(--tps-c-primary);
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-4);
  margin: 0 0 var(--tps-sp-4);
}

.tps-callout p:last-child {
  margin-bottom: 0;
}

.tps-formula {
  font-family: var(--tps-ff-num);
  background: var(--tps-c-surface);
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-2) var(--tps-sp-3);
  display: inline-block;
  margin: var(--tps-sp-1) 0;
}

/* FAQ 問答 */
.tps-faq__item {
  border-bottom: 1px solid var(--tps-c-border);
  padding: var(--tps-sp-4) 0;
}

.tps-faq__item:first-of-type {
  padding-top: 0;
}

.tps-faq__q {
  font-size: var(--tps-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--tps-sp-2);
}

.tps-faq__a {
  margin: 0;
  color: var(--tps-c-text-secondary);
}

/* HowTo 步驟 */
.tps-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--tps-sp-4);
}

.tps-steps li {
  position: relative;
  padding: var(--tps-sp-3) var(--tps-sp-4) var(--tps-sp-3) var(--tps-sp-7);
  background: var(--tps-c-bg-elev);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  margin-bottom: var(--tps-sp-3);
}

.tps-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: var(--tps-sp-3);
  top: var(--tps-sp-3);
  width: 26px;
  height: 26px;
  background: var(--tps-c-primary);
  color: var(--tps-c-bg);
  font-family: var(--tps-ff-num);
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tps-fs-sm);
}

.tps-steps strong {
  color: var(--tps-c-text);
}

/* ── 回工具頁 CTA ── */
.tps-cta {
  display: inline-block;
  background: var(--tps-c-primary);
  color: var(--tps-c-bg);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-3) var(--tps-sp-5);
  margin: var(--tps-sp-2) 0 var(--tps-sp-5);
}

.tps-cta:hover {
  filter: brightness(1.06);
}

/* ── 本站內部延伸閱讀（App 內子頁；非跨 App 互連）── */
.tps-more {
  margin-top: var(--tps-sp-6);
  padding-top: var(--tps-sp-5);
  border-top: 1px solid var(--tps-c-border);
}

.tps-more__title {
  font-size: var(--tps-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--tps-sp-3);
}

.tps-more__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tps-sp-3);
}

.tps-more__card {
  display: block;
  background: var(--tps-c-bg-elev);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-3) var(--tps-sp-4);
  text-decoration: none;
  color: var(--tps-c-text);
  transition: border-color var(--tps-dur) var(--tps-ease);
}

.tps-more__card:hover {
  border-color: var(--tps-c-primary);
}

.tps-more__card-title {
  display: block;
  font-weight: 700;
  color: var(--tps-c-primary);
}

.tps-more__card-desc {
  display: block;
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin-top: 2px;
}

@media (min-width: 768px) {
  .tps-sub {
    padding: var(--tps-sp-5) var(--tps-sp-5) var(--tps-sp-7);
  }

  .tps-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}