/* ============================================================================
   cost.html — 「不導入的代價」頁面樣式
   ----------------------------------------------------------------------------
   這個檔案取代了原本頁內的 <style>，以及 250 多個 Tailwind utility class。

   為什麼要移除 Tailwind（cdn.tailwindcss.com）：
     1. 它是全站唯一一個要載 120KB JS 才能在瀏覽器裡「編譯」CSS 的頁面；
        其餘三頁（index / contact / what_is_erp）都是純手寫 CSS。
     2. 用 JS 產生樣式會有 FOUC —— 頁面先以無樣式狀態畫一次，再被重繪。
     3. Tailwind 的 utility class 只描述外觀（p-6、rounded-2xl），
        不描述意圖（.roi-card-b 是「月結單」）。半年後回來改的人要先把
        整串 class 在腦裡編譯一次才知道那是什麼。

   顏色一律不改：移除 Tailwind 不應該讓畫面有一像素的變化。
   對得上設計系統的一律指向語意 token；對不上的原值保留，並註明原因。

   載入順序必須是 ds.css → site.css → cost.css。
   cost.css 依賴 site.css 的 `main { … }` 規則 —— 它把 <main> 內的 token
   換成淺色組（--tx #121821、--mu #4c5765、--line #edf0f4、--accent #0e7c86）。
   頁面外框（nav / footer / drawer）走 <html data-theme="dark"> 的深色組，
   這就是這個站「深色外框 + 淺色內容」的來源。
   ========================================================================= */


/* ============================================================================
   1. 頁面專屬元件
   ========================================================================= */

.h2 .cy, .h2 .og { font-style: normal; }
.h2 .cy { color: var(--accent); box-shadow: inset 0 -.26em 0 rgba(var(--accent-rgb), .22); }
.h2 .og { color: var(--amber);  box-shadow: inset 0 -.26em 0 rgba(var(--wn-rgb), .2); }
.h2 .sub-line { display: block; margin-top: 8px; color: var(--tx); font-size: 0.95em; }

#layers { background: var(--surface-3); }

.acc.danger { border-color: rgba(var(--dg-rgb), .35); }
.acc.danger .acc-h .qt { color: var(--red); }
.acc.danger .acc-h .qn { color: var(--red); }

.quote-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1.1fr .9fr; } }
.tag { display: inline-block; padding: .02em .42em; border-radius: .3em; font-weight: 800; margin: 0 .05em; }
.t-c { background: var(--accent); color: var(--on-accent); }
.t-o { background: rgba(var(--wn-rgb), .16); border: 1px solid rgba(var(--wn-rgb), .55); color: var(--wn-200); }
.t-g { border: 1px dashed rgba(var(--wn-rgb), .7); color: rgba(var(--wn-rgb), .75); background: transparent; }

.qvis { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surf); }
.qvis-t { margin: 0 0 18px; font-size: .8rem; color: var(--mu); letter-spacing: .14em; }
.bill { display: grid; gap: 14px; }
.bill-row { display: flex; align-items: center; gap: 10px; }
.bill-k { width: 76px; flex: none; text-align: right; font-size: .74rem; color: var(--mu2); }
.bill-bar { height: 38px; min-width: 74px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; transition: width .5s var(--ease); }
.bill-bar span { font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
.bill-bar.a { background: rgba(var(--accent-rgb), .16); border: 1px solid var(--accent); }
.bill-bar.a span { color: var(--accent); }
.bill-bar.b { background: linear-gradient(90deg, rgba(var(--wn-rgb), .28), rgba(var(--wn-rgb), .5)); border: 1px solid var(--amber); }
.bill-bar.b span { color: var(--wn-200); font-weight: 700; }

/* 手機底部的浮動估算條 */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line2);
}
.mbar-k { display: block; font-size: .7rem; color: var(--mu); }
.mbar b { font-family: var(--mono); font-size: 1.05rem; color: var(--amber); font-variant-numeric: tabular-nums; }
.mbar-cta {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  background: var(--amber); color: var(--on-accent);
  font-size: .84rem; font-weight: 800;
}
@media (max-width: 979px) {
  body.show-mbar { padding-bottom: 74px; }
  body.show-mbar .mbar { display: flex; }
}

/* 觸控尺寸補丁 */
@media (pointer: coarse), (max-width: 900px) {
  .mbar-cta { min-height: var(--tap); }
  .acc-h { min-height: var(--tap); }
  .f-grid ul a { min-height: 30px; display: inline-flex; align-items: center; }
}

/* 月結單紙材：白紙 + 16px 網點，像一張真的結算單 */
.statement-paper {
  background-color: #ffffff;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 16px 16px;
}
.shadow-soft {
  box-shadow: 0 4px 20px -2px rgba(18, 24, 33, 0.05), 0 2px 6px -1px rgba(18, 24, 33, 0.03);
}
.shadow-card {
  box-shadow: 0 10px 30px -5px rgba(14, 124, 134, 0.08);
}

#cost-statement { scroll-margin-top: 110px; }


/* ============================================================================
   2. ROI 計算機 —— 原本是 Tailwind utility class，改寫成語意 class
   ----------------------------------------------------------------------------
   每個 class 都對應原本一串 utility，並在註解標出對照，方便日後回查。

   ⚠ 這一節一律用 background-color，不用 background 簡寫。
     原因：#cost-statement 同時掛著 .roi-card-b 與 .statement-paper，
     而 .statement-paper 靠 background-image 畫月結單的網點。
     簡寫會把 background-image 重設成 none —— 兩條規則權重相同時，
     後面的簡寫會靜靜把網點整片擦掉。改寫時就真的發生過一次，
     是靠「改動前後 computed style 對照」才抓到的。
   ========================================================================= */

.roi {
  /* 2a. 色票
     tailwind.config 把設計系統的中性色階與主色抄了一份，所以有幾個可以直接
     指向語意 token（改 ds.css 就同時改到這裡）：
         brand-500     #0e7c86  = --accent
         neutral-text  #121821  = --tx
         neutral-muted #4c5765  = --mu
         neutral-border #edf0f4 = --line
         white         #ffffff  = --surf
     對不上的留在下面，原值不動 —— 這是「不改變畫面」的邊界。 */
  --c-brand-50:  #f2f9f9;   /* 原 brand-50 */
  --c-brand-100: #e1f2f3;   /* 原 brand-100 */
  --c-brand-600: #0b666f;   /* 原 brand-600（--accent-ink 是 #0a616a，差一點，不換） */
  --c-brand-700: #085057;   /* 原 brand-700 */
  --c-bg:        #fafbfc;   /* 原 neutral-bg（--surface-3 是 #f6f8fb，差一點，不換） */
  --c-rose-50:   #fff1f2;   /* Tailwind 預設 rose 色階，設計系統沒有對應 */
  --c-rose-100:  #ffe4e6;
  --c-rose-600:  #e11d48;
  --c-rose-700:  #be123c;

  /* 2b. 版面：手機單欄，lg（1024px）起 12 欄
     原：grid grid-cols-1 lg:grid-cols-12 gap-8 items-start */
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 32px;
  align-items: flex-start;
  color: var(--tx);
}
@media (min-width: 1024px) {
  .roi { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* 2c. 卡片外殼
   原：bg-neutral-bg rounded-2xl p-6 sm:p-8 border border-neutral-border shadow-sm */
.roi-card {
  padding: 24px;
  border-radius: 16px;
}
@media (min-width: 640px) {
  .roi-card { padding: 32px; }
}
.roi-card-a {
  background-color: var(--c-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);   /* 原 shadow-sm */
}
/* 原：bg-white rounded-2xl border-2 border-brand-500/20 shadow-card p-6 sm:p-8 statement-paper relative */
.roi-card-b {
  background-color: var(--surf);
  border: 2px solid rgba(var(--accent-rgb), .2);
  position: relative;
}
@media (min-width: 1024px) {
  .roi-card-a { grid-column: span 7 / span 7; }   /* 原 lg:col-span-7 */
  .roi-card-b { grid-column: span 5 / span 5; }   /* 原 lg:col-span-5 */
}

/* 2d. 卡片標題
   原：text-lg font-bold text-neutral-text mb-6 flex items-center gap-2 border-b border-neutral-border pb-3 */
.roi-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--tx);
}
.roi-card-hd svg { width: 20px; height: 20px; color: var(--accent); }   /* 原 w-5 h-5 text-brand-500 */

/* 2e. 參數欄位
   原：space-y-6 —— 子元素之間 24px，首個不加 */
.roi-fields > * + * { margin-top: 24px; }

/* 原：flex justify-between text-sm font-medium text-neutral-text mb-2 */
.roi-field-hd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--tx);
}
.roi-field-lb { display: flex; align-items: center; gap: 6px; }   /* 原 flex items-center gap-1.5 */
.roi-field-lb svg { width: 16px; height: 16px; color: var(--mu); }   /* 原 w-4 h-4 text-neutral-muted */
.roi-field-val { font-weight: 700; color: var(--accent); }   /* 原 font-bold text-brand-500 */

/* 2f. 拉桿
   可見軌道、滑塊與焦點樣式全部來自 site.css 的 input[type=range]（specificity 0,1,1）。
   原本掛在這裡的 Tailwind h-2 / rounded-lg / bg-neutral-border / w-full 都輸給那條規則
   （實測：高度是 4px 不是 8px、圓角 4px 不是 8px、背景是漸層不是 #edf0f4），
   真正生效的只有 cursor:pointer；accent-brand-500 因為滑桿已 -webkit-appearance:none
   且自畫滑塊，對畫面完全無效。
   所以這裡只保留確實生效的那一項 —— 留著一個證明無效的宣告只會誤導下一個人。

   軌道的「已填滿」比例由 site.js 設定 --p（site.js:232 `el.style.setProperty('--p', …)`），
   site.css 的漸層就是吃這個變數。所以拉桿是活的，不是固定 30%。 */
.roi-range { cursor: pointer; }

/* 2g. 兩個數字輸入
   原：grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-neutral-border */
.roi-grid2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .roi-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 原：block text-xs font-semibold text-neutral-muted mb-1 */
.roi-num-lb {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--mu);
}
/* 原：w-full px-3 py-2 bg-white border border-neutral-border rounded-lg
        text-neutral-text text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-brand-500 */
.roi-num {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--surf);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--tx);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
/* Tailwind 的 focus:ring-2 是一圈 2px 的 box-shadow，focus:outline-none 把原生外框
   收成透明 —— 兩者一起才是原本的視覺。保留這個組合：鍵盤 Tab 進來時仍然看得到
   2px 的青色圈（與白底對比 4.77:1，過 WCAG 非文字 3:1）。 */
.roi-num:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--accent);
}

/* 2h. 月結單卡片內容 */
/* 原：absolute top-4 right-4 bg-brand-50 text-brand-700 text-xs font-bold px-2.5 py-1 rounded-md border border-brand-100 */
.roi-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  background-color: var(--c-brand-50);
  border: 1px solid var(--c-brand-100);
  border-radius: 6px;
  color: var(--c-brand-700);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}
/* 原：text-xs font-bold uppercase tracking-wider text-neutral-muted mb-1 */
.roi-kick {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mu);
}
/* 原：text-xl font-extrabold text-neutral-text mb-6 */
.roi-stmt-h {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  color: var(--tx);
}

/* 最大的一塊：每年流失總額
   原：bg-rose-50 rounded-xl p-4 border border-rose-100 mb-6 */
.roi-loss {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--c-rose-50);
  border: 1px solid var(--c-rose-100);
  border-radius: 12px;
}
.roi-loss-k { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--c-rose-700); margin-bottom: 4px; }
.roi-loss-v { font-size: 30px; line-height: 36px; font-weight: 900; letter-spacing: -.025em; color: var(--c-rose-600); }
.roi-loss-note { margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(225, 29, 72, .8); }

/* 三項拆解
   原：space-y-3 text-xs sm:text-sm border-t border-b border-neutral-border py-4 mb-6 */
.roi-breakdown {
  margin-bottom: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 16px;
}
@media (min-width: 640px) {
  .roi-breakdown { font-size: 14px; line-height: 20px; }
}
.roi-breakdown > * + * { margin-top: 12px; }   /* 原 space-y-3 */
.roi-line { display: flex; justify-content: space-between; color: var(--mu); }
.roi-line-v { font-weight: 600; color: var(--tx); }

/* 回收期
   原：bg-brand-50/80 rounded-xl p-4 border border-brand-100 mb-6 flex items-center gap-3 */
.roi-payback {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: rgba(242, 249, 249, .8);
  border: 1px solid var(--c-brand-100);
  border-radius: 12px;
}
/* 原：p-2.5 bg-brand-500 text-white rounded-lg shrink-0 */
.roi-payback-ico {
  flex: none;
  padding: 10px;
  background-color: var(--accent);
  border-radius: 8px;
  color: var(--on-accent);
}
.roi-payback-ico svg { width: 20px; height: 20px; }   /* 原 w-5 h-5 */
.roi-payback-k { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--c-brand-700); }
.roi-payback-v { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--tx); }
.roi-payback-n { font-size: 20px; line-height: 28px; font-weight: 900; color: var(--c-brand-600); }

/* 主要行動呼籲
   原：w-full bg-brand-500 hover:bg-brand-600 text-white font-bold py-3 px-4 rounded-xl
        shadow-soft transition-all flex items-center justify-center gap-2 text-sm */
.roi-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--accent);
  border-radius: 12px;
  color: var(--on-accent);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  transition: background-color var(--t-fast) var(--ease2);
}
.roi-cta:hover { background-color: var(--c-brand-600); }
.roi-cta svg { width: 16px; height: 16px; }   /* 原 w-4 h-4 */

/* 2i. 估算公式
   原：lg:col-span-12 */
@media (min-width: 1024px) {
  .roi-formula-col { grid-column: span 12 / span 12; }
}
/* 原：bg-neutral-bg border border-neutral-border rounded-xl px-4 py-3 sm:px-5 sm:py-4 */
.roi-formula {
  padding: 12px 16px;
  background-color: var(--c-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
@media (min-width: 640px) {
  .roi-formula { padding: 16px 20px; }
}
/* 原：text-[11px] sm:text-xs text-neutral-muted leading-relaxed
   margin-bottom 原本來自 site.css 的 p{margin:0 0 1em}（原本那段
   :where(.roi p){margin:0} 權重為 0，蓋不過它），所以在 12px 字級下是 12px、
   在 11px 字級下是 11px。這裡照樣寫 1em 才不會在斷點上走音。 */
.roi-formula-t {
  margin: 0 0 1em;
  font-size: 11px;
  line-height: 1.625;   /* 原 leading-relaxed */
  color: var(--mu);
}
@media (min-width: 640px) {
  .roi-formula-t { font-size: 12px; line-height: 16px; }
}
/* 原：mt-2 grid gap-x-3 gap-y-1 text-[11px] sm:text-xs text-neutral-muted leading-relaxed
        style="grid-template-columns:max-content 1fr"
   那行 inline style 是版面而不是內容，一併收進來。 */
.roi-formula-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.625;
  color: var(--mu);
}
@media (min-width: 640px) {
  .roi-formula-grid { font-size: 12px; line-height: 16px; }
}