/* ══════════════════════════════════════════════════════════════
   台股盤後通 — 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）→ 本檔。
   ══════════════════════════════════════════════════════════════ */

/* 所有子頁（純內容頁 about / guide / faq / topics、資料型詳細頁個股 hub / spoke、ETF、情報流 feed）
   內容欄寬一律對齊首頁工具頁 .tps-app（1080 ＋同一組左右 gutter）。底部共用免責塊（靠 :root 的
   --ff-content-max、--ff-gutter 契約掛在 main 之外）即與內容左右對齊一致，不需 per-頁型收斂 --ff-content-max。 */
.tps-sub {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--tps-sp-4) var(--tps-sp-4) var(--tps-sp-7);
}

/* ── 麵包屑（獨立站台口吻：首頁 / 台股盤後通 / 子頁）── */
.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));
  }
}