/* ============================================================================
   承接提案 v1 · 試閱尾端 → 完整版 的橋
   2026-09-08｜本地提案，未上線。

   🔴 設計原則（動這支之前先讀）：
   1. 一個顏色、一個字級、一個圓角都沒有自創——全部用 try.html 與銷售頁**既有**的
      token（--gold / --teal / --snow / --line / --card / --ink / --muted / --radius）。
      兩頁的 :root 是同一組值，所以同一支 CSS 在兩邊都是原生的。
   2. 分段切換器 .fwSeg 逐項抄自 site/tools/index.html:166-177（真實產品的 .seg），
      連「命中區放大要包 660px 斷點」那條都照抄。改那邊要一起改這裡。
   3. 命中區：桌機 35px（高於 WCAG 2.5.8 AA 的 24×24），手機才 44px。
      放大值一律包斷點——2026-08-11 那次四支拉桿就是沒包，把卡片從 714 撐到 814px。
   4. 手機 375px 零水平溢出。canvas 一律關在 position:relative 的固定高度盒子裡，
      grid 用 minmax(0,1fr)、flex 子項用 flex-basis:0%——Chart.js 在 flex/grid 裡
      的兩個溢出坑要一起修，只修一個仍會漏。
   ========================================================================== */

.fwBridge{
  /* 本區塊自己的內部節奏，不覆寫任何全站值 */
  --fwGap:8px;
  margin:28px 0 0;
}

/* ── 區塊標頭 ───────────────────────────────────────────────────────────
   ⚠ eyebrow／h2／.tw-bal 一律用兩頁**既有**的 class，這裡不重新定義——
     新區塊要讀起來是原本頁面的一部分，不是外掛上去的。
     .fwH 只給區塊內的次級標題（比 h2 小一階），全頁沒有現成的這一階。 */
.fwBridge .fwH{
  font-size:clamp(18px,3.4vw,22px); line-height:1.4; margin:0 0 8px;
  font-weight:800; letter-spacing:-.2px; text-wrap:balance;   /* 短標題才給 balance，內文一律不給 */
  color:var(--ink);
}

/* ── 每月存下多少：沿用 try 頁 .sq-opts 的級距鈕語彙 ──────────────────────
   刻意用跟上面五題**完全相同**的元件：讀者剛按過五次，第六次不必重新學。 */
.fwSaveQ{ margin:0 0 4px; font-weight:800; font-size:17px; line-height:1.5 }
.fwSaveHint{ color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 10px }
.fwSaveHint b{ color:var(--snow) }

.fwOpts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fwGap);
}
@media(max-width:420px){ .fwOpts{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.fwOpts button{
  min-width:0;                        /* 🔴 沒有這行，長標籤會把 grid 欄撐破 → 手機溢出 */
  background:var(--card2); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1.4;
  padding:12px 8px; min-height:44px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.fwOpts button:hover[aria-pressed="false"]{ border-color:var(--snow2) }
.fwOpts button[aria-pressed="true"]{
  background:var(--snow); color:#08263a; border-color:var(--snow);
}

/* ── 圖表卡 ─────────────────────────────────────────────────────────────── */
.fwChartCard{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 14px; margin:18px 0 0;
}
@media(max-width:480px){ .fwChartCard{ padding:14px 12px 12px } }

.fwChartTop{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:0 0 12px;
}
.fwChartTitle{ font-weight:800; font-size:15px; color:var(--ink); min-width:0 }
/* 單位掛在標題旁，水平閱讀。Chart.js 的 y 軸 title 會把中文轉直排，不用。 */
.fwChartTitle .fwUnit{ font-weight:600; font-size:12px; color:var(--muted); margin-left:8px; white-space:nowrap }

/* 分段切換器：抄 tools/index.html 的 .seg */
.fwSeg{
  display:flex; background:var(--bg2); border:1px solid var(--line);
  border-radius:999px; padding:4px; gap:4px; flex:none; width:100%; max-width:240px;
}
.fwSeg button{
  flex:1 1 0%;                        /* 🔴 flex-basis 用 0% 不用 auto（Chart.js 溢出坑之二） */
  min-width:0;
  background:transparent; border:none; color:var(--muted);
  font-family:inherit; font-weight:700; font-size:13px;
  padding:8px 10px; min-height:35px; border-radius:999px; cursor:pointer;
  white-space:nowrap; text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s;
}
.fwSeg button:hover:not(.active){ background:var(--card2); color:var(--ink) }
.fwSeg button.active{ background:var(--teal); color:#04263b }
/* 命中區放大只給手機，桌機維持 35px（見檔頭第 3 點） */
@media(max-width:660px){ .fwSeg button{ min-height:44px } .fwSeg{ max-width:100% } }

/* canvas 一律關在固定高度的相對定位盒子裡 */
.fwChartBox{ position:relative; height:260px; width:100%; min-width:0 }
@media(max-width:520px){ .fwChartBox{ height:210px } }

/* 圖例：折線圖給線不給方塊（圖例標記要反映真實）。
   組間距 > 組內距，讀者才分得出誰跟誰一組。 */
.fwLegend{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 24px;
}
.fwLegend li{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--muted); min-width:0;
}
.fwLegend .fwMark{ flex:0 0 28px; height:3px; border-radius:2px; background:var(--c) }
.fwLegend .fwMark.dash{
  border-radius:0;
  background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 10px);
}
.fwLegend .fwVal{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink) }
@media(max-width:520px){
  .fwLegend{ flex-direction:column; flex-wrap:nowrap; gap:11px }
  .fwLegend li{ width:100%; font-size:13.5px }
}

/* ── 結論句：數字緊貼著能證明它的圖，不另開一張卡浮在旁邊 ─────────────── */
.fwTakeaway{
  margin:14px 0 0; padding:14px 16px;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
}
.fwTakeaway p{ margin:0; color:var(--ink); font-size:15px; line-height:1.85 }
.fwTakeaway p + p{ margin-top:8px }
/* 🔴 強調的數字一律 nowrap：實測「586 萬」被斷行拆成 586｜萬，
   數字跟單位分家，而那正是這句話唯一要讀者記住的東西。 */
.fwTakeaway .fwBig{ color:var(--gold); font-weight:900; font-size:1.15em; white-space:nowrap }
.fwTakeaway .fwCyan{ color:var(--snow); font-weight:800; white-space:nowrap }

.fwNote{
  color:var(--muted); font-size:13px; line-height:1.8; margin:12px 0 0;
}
.fwNote b{ color:var(--ink) }

/* ── 退化分支：條件不足時不畫樂觀曲線 ───────────────────────────────────── */
.fwDegrade{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px; margin:18px 0 0;
}
.fwDegrade .fwDegHead{ font-weight:800; font-size:17px; color:var(--ink); margin:0 0 8px }
.fwDegrade p{ color:var(--muted); font-size:14.5px; line-height:1.85; margin:8px 0 0 }

/* ── 「完整版接手哪一段」的對照 ─────────────────────────────────────────
   並排元素等寬等高：兩欄用 minmax(0,1fr)，卡片 display:flex 撐滿。 */
.fwHandoff{ margin:22px 0 0 }
.fwHandoffGrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media(max-width:640px){ .fwHandoffGrid{ grid-template-columns:minmax(0,1fr) } }
.fwCol{
  min-width:0; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px;
}
.fwCol.fwColNow{ background:var(--bg2) }
.fwCol .fwColTag{
  font-size:12px; font-weight:800; letter-spacing:.06em;
  color:var(--muted); margin:0 0 8px;
}
.fwCol.fwColFull .fwColTag{ color:var(--gold) }
.fwCol .fwColTitle{ font-weight:800; font-size:15.5px; line-height:1.5; margin:0 0 10px; color:var(--ink) }
.fwCol ul{ list-style:none; margin:0; padding:0 }
.fwCol li{
  position:relative; padding-left:18px; margin:0 0 8px;
  font-size:14px; line-height:1.75; color:var(--muted);
}
.fwCol li:last-child{ margin-bottom:0 }
.fwCol li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--line);
}
.fwCol.fwColFull li::before{ background:var(--gold) }
.fwCol.fwColFull li{ color:var(--ink) }

/* ── 買了之後第一件事 ───────────────────────────────────────────────────── */
.fwFirstStep{
  margin:18px 0 0; padding:16px 18px;
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0; background:var(--card);
}
.fwFirstStep .fwFsTitle{ font-weight:800; font-size:15px; color:var(--ink); margin:0 0 8px }
.fwFirstStep ol{ margin:0; padding-left:20px }
.fwFirstStep li{ color:var(--muted); font-size:14px; line-height:1.85; margin:0 0 4px }
.fwFirstStep li:last-child{ margin-bottom:0 }

/* ── 銷售頁專用：把新區塊塞進既有 section 的節奏裡 ─────────────────────── */
#bridge-product .fwBridge{ margin-top:0 }

/* ── 預覽版停用購買鈕的提示（隔離用，正式站不會有這段）─────────────────── */
.fwToast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px; z-index:9999; max-width:min(92vw,420px);
  background:#17191B; color:#F2EFEA;
  border:1px solid rgba(255,217,138,.42); border-radius:8px;
  padding:12px 16px; font-size:14px; line-height:1.6; text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.fwToast.on{ opacity:1 }

@media (prefers-reduced-motion:reduce){
  .fwOpts button, .fwSeg button, .fwToast{ transition:none }
}