/* ══════════════════════════════════════════════════════════════
   台股盤後通 — style.css
   CSS 架構：SK-FE-101 模式 A（元件導向、單一用途工具）。App 前綴 tps-（非 ff-）。
   Design Token 置頂（變數少、隨工具型 App 集中於檔頭）。Mobile First 三斷點。
   漲跌色彩：台股慣例（紅漲綠跌）。調性：專業穩重財經站（深藍 + 暖金點綴）。
   載入順序：/common/css/ff-bootstrap.css → 本檔（後載自然覆寫共用預設）。
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 色彩 */
  --tps-c-bg: #0d1424;
  --tps-c-bg-elev: #141d33;
  --tps-c-surface: #1a2540;
  --tps-c-border: #283659;
  --tps-c-text: #e8edf7;
  --tps-c-text-secondary: #9fb0d0;
  --tps-c-text-muted: #6b7ba0;
  --tps-c-primary: #d4a23a;        /* 暖金：標題重點、CTA */
  --tps-c-primary-soft: rgba(212, 162, 58, 0.14);
  --tps-c-up: #e8453c;             /* 紅漲（台股慣例） */
  --tps-c-up-soft: rgba(232, 69, 60, 0.14);
  --tps-c-down: #16b07a;           /* 綠跌（台股慣例） */
  --tps-c-down-soft: rgba(22, 176, 122, 0.14);
  --tps-c-flat: #9fb0d0;

  /* 間距 */
  --tps-sp-1: 4px;
  --tps-sp-2: 8px;
  --tps-sp-3: 12px;
  --tps-sp-4: 16px;
  --tps-sp-5: 24px;
  --tps-sp-6: 32px;
  --tps-sp-7: 48px;

  /* 字級 */
  --tps-fs-xs: 0.75rem;
  --tps-fs-sm: 0.875rem;
  --tps-fs-base: 1rem;
  --tps-fs-lg: 1.125rem;
  --tps-fs-xl: 1.5rem;
  --tps-fs-2xl: 2rem;
  --tps-fs-3xl: 2.75rem;

  /* 其他 */
  --tps-r: 12px;
  --tps-r-sm: 8px;
  --tps-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --tps-ff: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --tps-ff-num: "SF Mono", "Roboto Mono", "Consolas", ui-monospace, monospace;
  --tps-dur: 0.18s;
  --tps-ease: ease;

  /* 共用底部區塊（ff-disclaimer、ff-legal-footer）融入本 App 內容欄的契約：
     兩者由 ff-runtime 掛在 .tps-app 之外，靠這組變數對齊欄寬與左右留白。
     未設的 App fallback＝原值（零回歸）；本 App 選用式設定。 */
  --ff-content-max: calc(1080px - 2 * var(--ff-gutter));  /* = .tps-app 內容欄寬（扣左右 gutter），對齊卡片/databar 而非外框 */
  --ff-gutter: var(--tps-sp-4);      /* 16px = .tps-app 行動版左右 padding */
}

/* ── 全域 reset + 基底（模式 A：base 段內聯於本檔頂部） ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tps-c-bg);
  color: var(--tps-c-text);
  font-family: var(--tps-ff);
  font-size: var(--tps-fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* 數值用等寬字、tabular-nums 對齊 */
.tps-num { font-family: var(--tps-ff-num); font-variant-numeric: tabular-nums; }

/* 漲跌色彩工具（狀態附加 class、不加前綴） */
.up { color: var(--tps-c-up); }
.down { color: var(--tps-c-down); }
.flat { color: var(--tps-c-flat); }

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

/* ── 首屏 Hero（財神主視覺；圖左、標題疊右側留白） ── */
.tps-hero {
  position: relative;
  border-radius: var(--tps-r);
  overflow: hidden;
  margin: var(--tps-sp-2) 0 var(--tps-sp-5);
  background: linear-gradient(135deg, #14233f 0%, var(--tps-c-bg) 60%);
  border: 1px solid var(--tps-c-border);
  min-height: 168px;
  display: flex;
  align-items: center;
}
.tps-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tps-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 財神在畫面左側、向右舒展 → 對齊左方、右側自然留白給文字 */
  object-position: left center;
  display: block;
}
/* 右側漸層遮罩：強化右側文字可讀（圖左主體不被蓋、右側壓深） */
.tps-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 20, 36, 0) 28%, rgba(13, 20, 36, 0.72) 62%, rgba(13, 20, 36, 0.92) 100%);
}
.tps-hero--nomedia .tps-hero__media { display: none; }
.tps-hero__overlay {
  position: relative;
  z-index: 1;
  margin-left: auto;          /* 文字靠右側留白區 */
  max-width: 58%;
  padding: var(--tps-sp-5) var(--tps-sp-5) var(--tps-sp-5) var(--tps-sp-4);
  text-align: right;
}
.tps-hero__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--tps-r-sm);
  margin-bottom: var(--tps-sp-2);
}
.tps-hero__name {
  font-size: var(--tps-fs-2xl);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--tps-c-text);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.tps-hero__tag {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin: var(--tps-sp-2) 0 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* 無圖退場：恢復左對齊純文字識別列、文字佔滿 */
.tps-hero--nomedia { min-height: 0; display: block; }
.tps-hero--nomedia .tps-hero__media::after { display: none; }
.tps-hero--nomedia .tps-hero__overlay { margin-left: 0; max-width: 100%; text-align: left; padding: var(--tps-sp-4); }

.tps-databar {
  display: flex;
  align-items: center;
  gap: var(--tps-sp-2);
  flex-wrap: wrap;
  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-3) var(--tps-sp-4);
  margin-bottom: var(--tps-sp-5);
  font-size: var(--tps-fs-sm);
}
.tps-databar__date { font-weight: 700; color: var(--tps-c-text); }
.tps-databar__note { color: var(--tps-c-text-secondary); }
.tps-databar__badge {
  margin-left: auto;
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ── 卡片骨架（共用） ── */
.tps-card {
  background: var(--tps-c-bg-elev);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r);
  padding: var(--tps-sp-5);
  margin-bottom: var(--tps-sp-5);
  box-shadow: var(--tps-shadow);
}
.tps-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tps-sp-3);
  margin-bottom: var(--tps-sp-4);
  flex-wrap: wrap;
}
.tps-card__title {
  font-size: var(--tps-fs-lg);
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--tps-sp-2);
}
/* 卡片資料區塊 icon（inline-SVG、藍金 currentColor 可主題化、任意尺寸銳利；AD 不產圖） */
.tps-card__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--tps-c-primary);
}
.tps-card__source {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
}
.tps-card__source a { color: var(--tps-c-text-secondary); }

/* ── 大盤總覽卡 ── */
.tps-index {
  display: flex;
  align-items: flex-end;
  gap: var(--tps-sp-5);
  flex-wrap: wrap;
}
.tps-index__value {
  font-size: var(--tps-fs-3xl);
  font-weight: 800;
  line-height: 1;
}
.tps-index__change {
  font-size: var(--tps-fs-lg);
  font-weight: 700;
  padding-bottom: var(--tps-sp-1);
}
.tps-index__change .tps-num { font-size: var(--tps-fs-xl); }

/* ── 個股查詢區 ── */
.tps-search {
  position: relative;
}
.tps-search__input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: var(--tps-sp-3) var(--tps-sp-4);
  font-size: var(--tps-fs-base);
  font-family: var(--tps-ff);
  color: var(--tps-c-text);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
}
.tps-search__input:focus {
  outline: 2px solid var(--tps-c-primary);
  outline-offset: 1px;
}
.tps-search__hint {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  margin: var(--tps-sp-2) 0 0;
}

/* 候選清單 */
.tps-suggest {
  list-style: none;
  margin: var(--tps-sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tps-sp-1);
}
.tps-suggest__item {
  display: flex;
  gap: var(--tps-sp-2);
  padding: var(--tps-sp-2) var(--tps-sp-3);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  cursor: pointer;
  font-size: var(--tps-fs-sm);
  text-align: left;
  color: var(--tps-c-text);
  width: 100%;
}
.tps-suggest__item:hover, .tps-suggest__item:focus { border-color: var(--tps-c-primary); }
.tps-suggest__code { font-family: var(--tps-ff-num); color: var(--tps-c-primary); font-weight: 700; }

/* 個股結果 */
.tps-quote { margin-top: var(--tps-sp-4); }
.tps-quote__head {
  display: flex;
  align-items: baseline;
  gap: var(--tps-sp-3);
  margin-bottom: var(--tps-sp-4);
}
.tps-quote__code { font-family: var(--tps-ff-num); color: var(--tps-c-primary); font-weight: 700; }
.tps-quote__name { font-size: var(--tps-fs-lg); font-weight: 800; }
.tps-quote__close { font-size: var(--tps-fs-2xl); font-weight: 800; margin-left: auto; }
/* 公司全名＋產業別（個股查詢補全；company-info 快照，無則整列不出） */
.tps-quote__meta {
  display: flex;
  align-items: center;
  gap: var(--tps-sp-2);
  flex-wrap: wrap;
  margin: calc(var(--tps-sp-3) * -1 + 2px) 0 var(--tps-sp-4);
}
.tps-quote__fullname { font-size: var(--tps-fs-sm); color: var(--tps-c-text-secondary); }
.tps-quote__industry {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.tps-quote__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tps-sp-3);
}
.tps-metric {
  background: var(--tps-c-surface);
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-3);
}
.tps-metric__label { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); }
.tps-metric__value { font-family: var(--tps-ff-num); font-variant-numeric: tabular-nums; font-size: var(--tps-fs-lg); font-weight: 700; margin-top: 2px; }
.tps-metric__note { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); }

/* 查詢結果 → 個股完整檔案內鏈（v2 per-stock 頁；把「查一下就走」轉成站內深度導覽。
   顯眼金底 CTA：這是把使用者導進 SEO 個股頁的主轉換點、做成填色按鈕、行動版滿版） */
.tps-quote__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tps-sp-2);
  margin-top: var(--tps-sp-5);
  padding: var(--tps-sp-3) var(--tps-sp-5);
  font-size: var(--tps-fs-base);
  font-weight: 700;
  color: #1a1205;                       /* 深字配金底、高對比 */
  background: var(--tps-c-primary);
  border-radius: var(--tps-r-sm);
  text-decoration: none;
  box-shadow: var(--tps-shadow);
  transition: filter var(--tps-dur) var(--tps-ease);
}
.tps-quote__more:hover { filter: brightness(1.08); text-decoration: none; }
.tps-quote__more:focus-visible { outline: 2px solid var(--tps-c-text); outline-offset: 2px; }

/* ── 排行區（Tab + 表格） ── */
.tps-tabs {
  display: flex;
  gap: var(--tps-sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--tps-sp-4);
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tps-c-text-secondary);
  font-family: var(--tps-ff);
  font-size: var(--tps-fs-sm);
  font-weight: 600;
  padding: var(--tps-sp-3) var(--tps-sp-3);
  cursor: pointer;
  margin-bottom: -1px;
}
.tps-tab.active { color: var(--tps-c-primary); border-bottom-color: var(--tps-c-primary); }
.tps-tab:focus-visible { outline: 2px solid var(--tps-c-primary); outline-offset: 2px; }

.tps-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tps-fs-sm);
}
.tps-table th, .tps-table td {
  padding: var(--tps-sp-2) var(--tps-sp-3);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-table th:nth-child(-n+2), .tps-table td:nth-child(-n+2) { text-align: left; }
.tps-table thead th {
  color: var(--tps-c-text-secondary);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--tps-c-bg-elev);
}
.tps-table thead th[aria-sort="ascending"]::after { content: " ▲"; color: var(--tps-c-primary); }
.tps-table thead th[aria-sort="descending"]::after { content: " ▼"; color: var(--tps-c-primary); }
.tps-table tbody tr:hover { background: var(--tps-c-surface); }
.tps-table .tps-num { font-family: var(--tps-ff-num); font-variant-numeric: tabular-nums; }
.tps-table__code { font-family: var(--tps-ff-num); color: var(--tps-c-primary); font-weight: 700; }
.tps-table__rank { color: var(--tps-c-text-muted); }
/* 排行可點代號、名稱 → 個股完整檔案（僅有頁者；繼承所在格顏色〔代號金、名稱亮〕、hover 標底線提示可點） */
.tps-table__link { color: inherit; text-decoration: none; }
.tps-table td:not(.tps-table__code) .tps-table__link { color: var(--tps-c-text); }
.tps-table tbody tr:hover .tps-table__link { text-decoration: underline; }
.tps-table__link:focus-visible { outline: 2px solid var(--tps-c-primary); outline-offset: 2px; }

/* ── 月營收卡 ── */
.tps-rev__period { font-size: var(--tps-fs-sm); color: var(--tps-c-text-secondary); margin-bottom: var(--tps-sp-3); }
.tps-rev__list { display: grid; grid-template-columns: 1fr; gap: var(--tps-sp-2); }
.tps-rev__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tps-sp-3);
  padding: var(--tps-sp-2) var(--tps-sp-3);
  background: var(--tps-c-surface);
  border-radius: var(--tps-r-sm);
  font-size: var(--tps-fs-sm);
}
.tps-rev__name { font-weight: 600; }
.tps-rev__yoy { font-family: var(--tps-ff-num); font-weight: 800; }

/* ── 狀態四態：骨架屏 / 空 / 錯誤 ── */
.tps-skeleton {
  background: linear-gradient(90deg, var(--tps-c-surface) 25%, var(--tps-c-border) 50%, var(--tps-c-surface) 75%);
  background-size: 200% 100%;
  animation: tps-shimmer 1.4s infinite;
  border-radius: var(--tps-r-sm);
}
.tps-skeleton--line { height: 14px; margin-bottom: var(--tps-sp-2); }
.tps-skeleton--block { height: 64px; }
@keyframes tps-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tps-skeleton { animation: none; }
}

.tps-state {
  text-align: center;
  padding: var(--tps-sp-5) var(--tps-sp-4);
  color: var(--tps-c-text-secondary);
}
/* AD #8 狀態插圖（空、錯誤）；載入失敗 onerror 隱藏退回純文字 */
.tps-state__art {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto var(--tps-sp-3);
  display: block;
  opacity: 0.95;
}
.tps-state__text { margin: 0 0 var(--tps-sp-2); font-weight: 700; color: var(--tps-c-text); }
.tps-state__sub {
  margin: 0 auto var(--tps-sp-3);
  max-width: 38ch;
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-muted);
  line-height: 1.6;
}
.tps-state__link { font-size: var(--tps-fs-sm); font-weight: 700; }
.tps-btn {
  appearance: none;
  font-family: var(--tps-ff);
  font-size: var(--tps-fs-sm);
  font-weight: 700;
  color: var(--tps-c-bg);
  background: var(--tps-c-primary);
  border: none;
  border-radius: var(--tps-r-sm);
  padding: var(--tps-sp-2) var(--tps-sp-5);
  cursor: pointer;
}
.tps-btn:focus-visible { outline: 2px solid var(--tps-c-text); outline-offset: 2px; }

/* ── 資料來源與更新說明 ── */
.tps-sources {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
}
.tps-sources h2 { font-size: var(--tps-fs-base); color: var(--tps-c-text); margin: 0 0 var(--tps-sp-2); }
.tps-sources p { margin: 0 0 var(--tps-sp-2); }

/* ── 探索本站（App 內部子頁導覽；非 App 互連） ── */
.tps-explore { margin-top: var(--tps-sp-6); }
.tps-explore__title { font-size: var(--tps-fs-lg); font-weight: 700; margin: 0 0 var(--tps-sp-3); }
.tps-explore__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tps-sp-3);
}
.tps-explore__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-explore__card:hover { border-color: var(--tps-c-primary); }
.tps-explore__card-title { display: block; font-weight: 700; color: var(--tps-c-primary); }
.tps-explore__card-desc { display: block; font-size: var(--tps-fs-sm); color: var(--tps-c-text-secondary); margin-top: 2px; }

.hidden { display: none !important; }

/* ════════════ Tablet（768px+） ════════════ */
@media (min-width: 768px) {
  .tps-app { padding: var(--tps-sp-5) var(--tps-sp-5) var(--tps-sp-7); }
  :root { --ff-gutter: var(--tps-sp-5); }   /* 24px = .tps-app 桌機左右 padding */
  /* 財神主視覺：寬版改用圖片原始 16:9 比例容器，cover 不再上下裁切（財神完整呈現） */
  .tps-hero:not(.tps-hero--nomedia) { min-height: 0; aspect-ratio: 1600 / 900; }
  .tps-hero__name { font-size: var(--tps-fs-3xl); }
  .tps-hero__tag { font-size: var(--tps-fs-base); }
  .tps-quote__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tps-rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tps-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════ Desktop（1024px+） ════════════ */
@media (min-width: 1024px) {
  .tps-hero { min-height: 280px; }
  .tps-hero__overlay { max-width: 52%; }
  .tps-explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tps-rev__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}