/* 嵌入式估算台（css/award/fc-embed.css）——總綱 §6（單 4b）；結構與行為見 js/award/fc-embed.js 檔頭。
   規則（同 base.css）：色只用 token（中間色以 color-mix 由 token 調出）；字重只用已載入樣式（Serif 600、其餘 400）；
   字級只用 --fs-*、間距只用 --s1～--s7，例外就地註明（1px 線、44px 觸控目標、圖示幾何）。
   版面規則（單 3q）：表單內容只落在欄線上——區塊內 2 欄（gutter＝--fce-gut），其細分 4 欄（設計／商標地區、匯率）、3 欄（開關列，與 2 欄同為 6 欄的細分）；設計頁案件參數另有同列三欄的子區塊（.fce-sec__body--r3）；
     窄寬（≤767）單欄。控制項外框由欄寬決定、不隨字長；高度只有 --fce-ctl（控制項）與 --fce-btn（估算、下載）兩種。
     垂直節奏：區塊間 --s4、欄位間 --fce-gap、標籤到控制項與控制項到說明／提示／錯誤字都是 --s1。
     右緣：區塊標頭與明細的＋／－圖示字面貼內容欄右緣（--fce-mark），金額欄右緣＝圖示左緣再讓一個 --s2。
   例外色：總計數字用藍 #3B7190（業主 2026-07-08 拍板「總計藍不紅」，與下載 PDF／Excel 的總計同色；出處＝api/function_app.py 總計色註解），
     只此一處（--fce-grand），對 --paper 4.6:1（DOM 掃描實測見交件）。
   收起：分頁非作用面板由 site.js（html.aw-ok）收；本檔不以 scripting 媒體查詢收起任何內容（骨架、失敗字除外：它們不是內容）。
   動態（§6.4）：分頁底線平移 320ms；晶片 180ms＋✓ 描線；估算中＝結果區頂端金線來回；出結果＝clip-path 由上而下印出 700ms
     → 明細列錯開 40ms（最多 12 列）→ 落「概估」印 420ms；總計一開始就是最終值；重算只閃變動格。減動態＝base.css §11 全關、JS 直接顯示。 */

/* 底部固定列掛在 body（不在 .fce 內）：共用尺寸變數兩處都要有，否則 var() 失效、底部列的鈕沒有高度 */
.fce, .fce-bar {
  --fce-grand: #3B7190;             /* 例外色（見檔頭） */
  --fce-ctl: 44px;                  /* 控制項高＝觸控目標（例外：非間距級距） */
  --fce-btn: 48px;                  /* 估算、下載鈕高（例外：非間距級距）；全估算器只有這兩種高 */
  --fce-ctl-line: var(--text-2);    /* 控制項邊框（對 --paper／--paper-2 ≥3:1） */
  /* 資訊性次要字（說明、摘要欄名、狀態行、表頭、單位、圖例百分比、免責、底部列標籤…）：--fg-2 與 --fg 對半調出，
     淺底兩季對 --paper／--paper-2 目標 ≥7:1（深底時兩者都是淺色＝自動調亮）；段號類、未選地區名仍用 --fg-2（≥4.5:1，守層次）。實測見單 3m1 交件 */
  --fce-fg-2: color-mix(in srgb, var(--fg-2) 50%, var(--fg));
}
.fce {
  --bg: var(--paper-2);             /* 估算台＝紙色加深一階的「桌面」；估算單（結果）是放在桌上的一張紙 */
  --fce-top: 0px;                   /* sticky 物件的上緣＝頁首收合列（顯示時）下緣 */
  --fce-tabs-h: 0px;                /* 窄寬時 sticky 分頁列的高（表頭 sticky 要讓開） */
  --fce-gut: var(--s3);             /* 欄線之間的 gutter＝外層 12 欄 gutter（24px） */
  --fce-gap: var(--s3);             /* 欄位間（同區塊內上下兩列） */
  --fce-mark: var(--s2);            /* 區塊與明細＋／－圖示的字面寬 */
  --fce-amt-r: calc(var(--fce-mark) + var(--s2));   /* 金額欄離內容欄右緣＝圖示字面＋一個間距 */
  position: relative; padding: var(--s6) 0;
}
html:has(.aw-header.is-stuck:not(.is-hidden)) .fce { --fce-top: var(--aw-bar-h); }

/* ── 標頭 ── */
.fce-head { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--fg); }
.fce-head__h { font: 600 var(--fs-h2)/1.3 var(--f-serif); letter-spacing: .08em; }
.fce-noscript { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 2px solid var(--accent); background: var(--paper); font-size: var(--fs-small); line-height: 1.8; }

/* ── 分頁（site.js role=tablist；底線改為平移的一條，fc-embed.js 量位置） ── */
.fce-tabs__list { position: relative; height: 56px; margin: 0 0 var(--s4); gap: 0 var(--s4); flex-wrap: nowrap; }
.fce .fce-tab { min-height: 0; height: 100%; font: 600 var(--fs-lead)/1.3 var(--f-serif); letter-spacing: .08em; white-space: nowrap; }
.fce .fce-tab::after { display: none; }
/* 未選分頁：靜止時字下不畫線（原虛線已刪：線條太多顯得雜亂，業主 11/09 16:12:54 轉同事投影片第 2 頁）；
   指到、鍵盤焦點＝由左描成實線（主張；純 CSS，選中態仍是平移的粗線） */
.fce .fce-tab:not([aria-selected="true"])::after {   /* 實線寬 0→100%；畫在偽元素，文字元素本身不帶背景圖 */
  display: block; left: 0; right: 0; bottom: var(--s1); height: 1px;
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 0% 100% no-repeat;
  transition: background-size var(--t-state) var(--ease-out);
}
.fce .fce-tab:not([aria-selected="true"]):is(:hover, :focus-visible)::after { background-size: 100% 100%; }
.fce-tabs__ink {
  position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--cur); pointer-events: none;
  transition: transform var(--t-state) var(--ease-out), width var(--t-state) var(--ease-out);
}
.fce .aw-tabs__panel + .aw-tabs__panel { margin-top: 0; }
/* site.js 初始化前先留出分頁列的高（初始化後分頁列出現＝不跳版） */
@media (scripting: enabled) { html:not(.aw-ok) .fce-tabs { padding-top: calc(56px + var(--s4)); } }
/* site.js 沒初始化（面板全展開）：第 2 個起的面板不出骨架（骨架不是內容；JS 正常時那些面板本來就收起） */
html:not(.aw-ok) .fce .aw-tabs__panel + .aw-tabs__panel .fce-skel, html:not(.aw-ok) .fce .aw-tabs__panel + .aw-tabs__panel > .fce-lead { display: none; }
html:not(.aw-ok) .fce .aw-tabs__panel + .aw-tabs__panel:has(.fce-desk) > .fce-lead { display: block; }
.fce-switchto { margin: var(--s3) 0; }

/* ── 骨架（載入中；固定高度＝各產品掛上後 .fce-mount 的實測高；不跳版） ── */
.fce-mount { position: relative; }
/* 骨架高＝表單掛上後 .fce-mount 的實測高（預設選項狀態；Chromium、本機站、無捲軸寬）。設計、發明＝j2w_work/d3b/scan.js 逐寬實量
   （360～1600 每 10px，實高變化處細掃每 1px，320～359 每 2px），依實高變化處分段、段內取極差中點（全部量點偏差 ≤4px）；驗證＝j2w_work/d3b/verify.js
   （載入中骨架高對掛上後實高）。商標＝單 3q 量值（j2w_work/3q/align_check.js Q13），d3b 抽 390／1024／1440 三寬差 ≤4px 未動。
   表單的欄位、文案、說明字改動後須重量，否則骨架高失準＝掛上時跳版 */
.fce-skel { --h: 1139px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; min-height: var(--h); }
[data-fce-product="trademark"] .fce-skel { --h: 836px; }
@media (max-width: 1099.98px) { [data-fce-product="trademark"] .fce-skel { --h: 1112px; } }
@media (max-width: 767.98px) { [data-fce-product="trademark"] .fce-skel { --h: 1331px; } }
@media (max-width: 600px) { [data-fce-product="trademark"] .fce-skel { --h: 1639px; } }
[data-fce-product="design"] .fce-skel { --h: 1115.5px; }
@media (max-width: 1330.98px) { [data-fce-product="design"] .fce-skel { --h: 1136.5px; } }
@media (max-width: 1279.98px) { [data-fce-product="design"] .fce-skel { --h: 1234px; } }
@media (max-width: 1190.98px) { [data-fce-product="design"] .fce-skel { --h: 1254.5px; } }
@media (max-width: 1101.98px) { [data-fce-product="design"] .fce-skel { --h: 1275.5px; } }
@media (max-width: 1099.98px) { [data-fce-product="design"] .fce-skel { --h: 1466.5px; } }
@media (max-width: 1050.98px) { [data-fce-product="design"] .fce-skel { --h: 1486px; } }
@media (max-width: 852.98px) { [data-fce-product="design"] .fce-skel { --h: 1504.5px; } }
@media (max-width: 767.98px) { [data-fce-product="design"] .fce-skel { --h: 1865.5px; } }
@media (max-width: 624.98px) { [data-fce-product="design"] .fce-skel { --h: 1883px; } }
@media (max-width: 600.98px) { [data-fce-product="design"] .fce-skel { --h: 2192.5px; } }
@media (max-width: 509.98px) { [data-fce-product="design"] .fce-skel { --h: 2209px; } }
@media (max-width: 355.98px) { [data-fce-product="design"] .fce-skel { --h: 2214.5px; } }
[data-fce-product="invention"] .fce-skel { --h: 1707.5px; }
@media (max-width: 1449.98px) { [data-fce-product="invention"] .fce-skel { --h: 1728px; } }
@media (max-width: 1279.98px) { [data-fce-product="invention"] .fce-skel { --h: 1854px; } }
@media (max-width: 1190.98px) { [data-fce-product="invention"] .fce-skel { --h: 1874px; } }
@media (max-width: 1099.98px) { [data-fce-product="invention"] .fce-skel { --h: 2131.5px; } }
@media (max-width: 926.98px) { [data-fce-product="invention"] .fce-skel { --h: 2147.5px; } }
@media (max-width: 767.98px) { [data-fce-product="invention"] .fce-skel { --h: 2712.5px; } }
@media (max-width: 740.98px) { [data-fce-product="invention"] .fce-skel { --h: 2707.5px; } }
@media (max-width: 624.98px) { [data-fce-product="invention"] .fce-skel { --h: 2724.5px; } }
@media (max-width: 600.98px) { [data-fce-product="invention"] .fce-skel { --h: 2824.5px; } }
@media (max-width: 479.98px) { [data-fce-product="invention"] .fce-skel { --h: 2838.5px; } }
@media (max-width: 360.98px) { [data-fce-product="invention"] .fce-skel { --h: 2877.5px; } }
@media (max-width: 336.98px) { [data-fce-product="invention"] .fce-skel { --h: 2897px; } }
@media (max-width: 325.98px) { [data-fce-product="invention"] .fce-skel { --h: 2917.5px; } }
.fce-skel__form { grid-column: 1 / 9; display: grid; gap: var(--s5); padding-top: var(--s5); }
.fce-skel__aside { grid-column: 9 / 13; display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); background: var(--paper); }
.fce-skel__sec { display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); }
.fce-skel i { display: block; height: 12px; background: color-mix(in srgb, var(--text-2) 14%, transparent); animation: fce-pulse 1600ms var(--ease-io) infinite alternate; }
.fce-skel__no { width: 24px; }
.fce-skel__title { width: 40%; height: 24px !important; }
.fce-skel__line { grid-column: 1 / -1; }
.fce-skel__line--s { width: 60%; }
.fce-skel__btn { height: var(--fce-btn) !important; background: color-mix(in srgb, var(--ink) 18%, transparent) !important; }
@keyframes fce-pulse { from { opacity: .55; } to { opacity: 1; } }
/* 無 JS：不出骨架（noscript 一行說明）；JS 被擋（fc-embed.js 始終沒執行）：8 秒後骨架淡去、改顯示既有失敗字 */
.fce-giveup { display: none; }
@media (scripting: none) { .fce-skel, .fce-lead { display: none; } }
@media (scripting: enabled) {
  .fce:not(.is-live) .fce-giveup {
    display: block; position: absolute; left: 0; right: 0; top: var(--s5); visibility: hidden;
    padding: var(--s3); background: var(--paper); border-left: 2px solid var(--error); animation: fce-show 1ms linear 8s forwards;
  }
  .fce:not(.is-live) .fce-skel > * { animation: fce-hide 1ms linear 8s forwards; }
  /* 導言隨 HTML 出（LCP 不等估算器 JS）。JS 全被擋時原本沒有這段字：2 秒後 site.js 還沒跑（html 無 aw-ok）才收起（不動版面）。
     site.js 跑了就不計時（fc-embed.js 較晚到不會先藏後現）；site.js 成功、fc-embed.js 失敗＝導言留著，失敗字照舊 */
  html:not(.aw-ok) .fce:not(.is-live) .fce-lead { animation: fce-hide 1ms linear 2s forwards; }
}
@keyframes fce-show { to { visibility: visible; } }
/* from 也寫 hidden：只寫 to 時 1ms 動畫結束的進度浮點差（0.99999…）會讓 visibility 停在 visible（單 3q 實測，骨架原本 8 秒後也沒收起） */
@keyframes fce-hide { from, to { visibility: hidden; } }

/* ── 載入失敗＋重試 ── */
.fce-panel:has(.fce-fail) > .fce-lead { display: none; }
.fce-fail { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-height: 240px; padding: var(--s4); background: var(--paper); border-left: 2px solid var(--error); }
.fce-fail__msg { font: 600 var(--fs-lead)/1.6 var(--f-serif); }

/* ── 版面：表單 1–8 欄＋摘要欄 9–12 欄（sticky）；≤1099 單欄（摘要接在表單後、底部固定列接手） ── */
.fce-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.fce-form > * { grid-column: 1 / 9; min-width: 0; }
.fce-form > .fce-sum { grid-column: 9 / 13; grid-row: 1 / span 3; position: sticky; top: calc(var(--fce-top) + var(--s3)); transition: top var(--t-state) var(--ease-io); }
/* 導言在表單上方獨立一段（p_fee.py 隨 HTML 出）：左欄第一條區塊線與摘要面板上緣因此同一條線 */
.fce-lead { margin: 0 0 var(--s3); color: var(--fce-fg-2); max-width: 40em; }

/* ── 段（fieldset；01／02／03＋段名；可收合；必填全過＝✓） ── */
.fce-sec { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.fce-sec__legend { display: contents; }
.fce-sec__tog {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--fce-btn); margin: 0 0 var(--s3); padding: var(--s1) 0;
  border: 0; border-top: 1px solid var(--fg); background: none; cursor: pointer; text-align: left;
}
.fce-sec__tog[aria-expanded="false"] { margin-bottom: 0; }   /* 收合：區塊間距仍只有 --s4 */
.fce-sec__no { font: 400 var(--fs-label)/1 var(--f-mono); letter-spacing: .12em; color: var(--fg-2); min-width: var(--s3); }
.fce-sec__name { font: 600 var(--fs-h3)/1.3 var(--f-serif); letter-spacing: .1em; color: var(--fg); }
.fce-sec__note { font-size: var(--fs-small); color: var(--fce-fg-2); line-height: 1.6; }
.fce-sec__ok { width: 24px; height: 24px; margin-left: auto; flex: 0 0 auto; }
.fce-sec__ok path, .fce-chip__ok path { fill: none; stroke: var(--accent); stroke-width: 1.6px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 180ms var(--ease-out); }
.fce-sec.is-ok .fce-sec__ok path { stroke-dashoffset: 0; transition-duration: 320ms; }
/* 未勾＝✓ 整個透明（只靠 dashoffset 時虛線起點會留一個反鋸齒小點） */
.fce-sec__ok, .fce-chip__ok { transition: opacity 180ms var(--ease-out); }
.fce-sec:not(.is-ok) .fce-sec__ok, .fce-chip__in:not(:checked) + .fce-chip__ok { opacity: 0; }
.fce-sec__chev { position: relative; width: var(--fce-mark); height: 24px; flex: 0 0 auto; }
.fce-sec__chev::before, .fce-sec__chev::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fg); transition: transform var(--t-state) var(--ease-out); }
.fce-sec__chev::after { transform: rotate(90deg); }
.fce-sec__tog[aria-expanded="true"] .fce-sec__chev::after { transform: rotate(0deg); }
.fce-sec__tog:focus-visible .fce-sec__name { color: var(--accent); }
@media (hover: hover) { .fce-sec__tog:hover .fce-sec__name { color: var(--accent); } }
.fce-sec__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fce-gap) var(--fce-gut); align-items: start; }
/* 跨兩欄：地區、開關、匯率、四段分段。
   768～1279 半欄放不下三段字（字不降級）：三段也跨兩欄；設計類型同列沒有鄰欄了，一起跨 */
.fce-sec__body > .fce-field--regions, .fce-sec__body > .fce-field--items, .fce-sec__body > .fce-rates,
.fce-sec__body > .fce-field--n4 { grid-column: 1 / -1; }
@media (min-width: 768px) and (max-width: 1279.98px) {
  .fce-sec__body > .fce-field--n3, [data-fce-product="design"] .fce-sec__body > [data-key="dtype"] { grid-column: 1 / -1; }
}
/* 同列三欄（設計頁：設計項數、總圖數、年費；fc-embed.js desk 的 row3 包一層子區塊，沿用本區塊的格線、欄距與窄寬單欄）：
   寬 ≥768 一律同一列三欄、三等分（年費欄保底 9em——下拉選項字與箭頭放得下、標籤不被擠成兩行；標籤、說明、錯誤字不撐寬，跟著欄寬折行）；<768 單欄。
   年費下拉末項與其他年同樣顯示「N 年」（fc-embed.js yearOpts），選項字最寬就是「25 年」，三等分下放得下。
   同列對齊（≥768）：每欄改子格線（subgrid），標籤、控制項、其後的提示／說明／錯誤字各佔一列，同列欄位共用列高——
   標籤列高＝該列實際最高的標籤、標籤貼控制項（字行數不同控制項仍同一條線，也不多留空白）。5＝一欄最多的子元素數（標籤、控制項、提示、說明、錯誤字）；
   子格線列距 0，間距照各元素既有的 --s1 外距。不支援 subgrid＝退回同列標籤一起留兩行高、字貼控制項。
   本段選擇器一律限定設計估算台（[data-fce-product="design"]），不動發明、商標與共用 .fce-sec__body 規則 */
[data-fce-product="design"] .fce-sec__body > .fce-sec__body--r3 { grid-column: 1 / -1; }
@media (min-width: 768px) {
  [data-fce-product="design"] .fce-sec__body--r3 > .fce-field > :is(.fce-label, .fce-note, .fce-err) { contain: inline-size; }
  [data-fce-product="design"] .fce-sec__body--r3 > .fce-field { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  [data-fce-product="design"] .fce-sec__body--r3 > .fce-field > .fce-label { grid-row: 1; align-self: end; }
  [data-fce-product="design"] .fce-sec__body--r3 > .fce-field > :is(.fce-step, .fce-select) { grid-row: 2; }
}
@media (min-width: 768px) {
  [data-fce-product="design"] .fce-sec__body--r3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(9em, 1fr); }
}
/* 子區塊列距歸 0：子格線跨的 5 列之間仍會加上父格線的列距（空列也加，Chrome 實測一欄多出約 36px）；子區塊只有同一列，不需列間距 */
@supports (grid-template-columns: subgrid) {
  @media (min-width: 768px) { [data-fce-product="design"] .fce-sec__body--r3 { row-gap: 0; } }
}
@supports not (grid-template-columns: subgrid) {
  @media (min-width: 768px) {
    [data-fce-product="design"] .fce-sec__body--r3 > .fce-field { display: block; grid-row: auto; }
    [data-fce-product="design"] .fce-sec__body--r3 > .fce-field > .fce-label { display: flex; align-items: flex-end; min-height: calc(2 * 1.6em); }
  }
}
[data-fce-product="design"] .fce-nowrap { white-space: nowrap; }   /* 標籤內不從中間折行的一段字（例「1～100」；fc-embed.js numField spec.keep） */
/* 含 .fce-nowrap 的標籤（總圖數）不套全站標籤的 balance：Chromium 的 balance 遇 nowrap 段會把短的前綴字從中間拆（折成「總圖／數（所有設計的圖張總數）」詞中斷）；改回一般折行＝括號段整段換行、前綴字不拆 */
[data-fce-product="design"] .fce-sec__body--r3 > [data-key="figs"] > .fce-label { text-wrap-style: auto; }

/* ── 欄位 ── */
.fce-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.fce-label { display: block; margin: 0 0 var(--s1); padding: 0; font-size: var(--fs-small); line-height: 1.6; letter-spacing: .04em; color: var(--fg); }
.fce-note { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.6; color: var(--fce-fg-2); }
/* 說明字、錯誤字（含摘要欄狀態行同字）：一般中文換行（詞可拆到兩行）＋兩端對齊（對齊規則只寫在 base.css 中文內文那條）。
   原本 word-break: keep-all（只在標點、空白與 <wbr> 處換行）已拿掉：業主 11/08 20:26:24 選甲。字串裡與 errText 補的 <wbr> 留著不影響 */
.fce-lead, .fce-note, .fce-err, .fce-status { overflow-wrap: break-word; }
.fce-hint { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.6; color: var(--fg); }
.fce-err { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.6; color: var(--error); }   /* 字左緣＝欄左緣（不另畫豎線） */
.fce-input {
  height: var(--fce-ctl); width: 100%; padding: 0 var(--s2); border: 1px solid var(--fce-ctl-line); border-radius: 0;
  background: var(--paper); color: var(--text); font: 400 var(--fs-body)/1 var(--f-mono);
}
/* 數字欄字往上提（單 3mq）：Chrome 把等寬字型的上升、下降各取整數 px；寬 ≤777（字級 <16.371px）取整後數字墨跡偏低 0.5～1px，≥778 已置中不動。
   777.98＝目前 --fs-body 公式下取整跳階的寬度（實測等寬字框高：≤493 為 20px、494～777 為 21px、≥778 為 22px）。例外：1.25px＝提 0.625px */
@media (max-width: 777.98px) { .fce-input { padding-bottom: 1.25px; } }
/* 提示字（「例：1」，欄位清空才出現）：瀏覽器預設灰對紙色不到 4.5:1；改 --fg-2（≥4.5:1），不用 --fce-fg-2——要與已輸入的值分得出來 */
.fce-input::placeholder { color: var(--fg-2); opacity: 1; }
/* 聚焦框內縮、提高層級：完整一圈、不凸出外框、不被步進鈕蓋。錯誤＝一層 1px 紅框；錯誤又聚焦＝同色 3px（框變粗＝焦點在此） */
.fce-input:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -2px; }
.fce-input[aria-invalid="true"], .fce-input.is-filtered { position: relative; z-index: 1; outline: 1px solid var(--error); outline-offset: -1px; }
.fce-input[aria-invalid="true"]:focus-visible, .fce-input.is-filtered:focus-visible { outline-width: 3px; outline-offset: -3px; }
/* 步進鈕（44×44）：整組撐滿欄寬，數字欄吃掉剩下的寬 */
.fce-step { display: flex; width: 100%; }
.fce-step .fce-input { flex: 1 1 0; width: auto; min-width: 0; text-align: center; border-inline: 0; }
.fce-step__btn {
  position: relative; flex: 0 0 auto; width: var(--fce-ctl); height: var(--fce-ctl); padding: 0; border: 1px solid var(--fce-ctl-line);
  background: var(--paper); color: var(--text); cursor: pointer; transition: background var(--t-micro), color var(--t-micro);
}
.fce-step__btn::before, .fce-step__btn--inc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: 0 0 0 -7px; background: currentColor; }
.fce-step__btn--inc::after { transform: rotate(90deg); }
.fce-step__btn:focus-visible { z-index: 1; background: var(--ink); color: var(--cream); }
@media (hover: hover) { .fce-step__btn:hover { background: var(--ink); color: var(--cream); } }   /* 只在真的能懸停的裝置：觸控點過不留底色 */
.fce-step__btn[aria-disabled="true"] { color: var(--fce-ctl-line); background: var(--paper); cursor: default; }
/* 分段按鈕（底下原生 radio）：撐滿欄寬，各段等寬 */
.fce-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--fce-ctl-line); background: var(--paper); }
.fce-seg__opt { position: relative; display: flex; min-width: 0; cursor: pointer; }
.fce-seg__opt + .fce-seg__opt { border-left: 1px solid var(--fce-ctl-line); }
.fce-seg__in, .fce-chip__in, .fce-switch__in { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fce-seg__txt {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: calc(var(--fce-ctl) - 2px); padding: 0 var(--s1); color: var(--text); font-size: var(--fs-body); line-height: 1.3; white-space: nowrap;   /* 例外：扣 1px 框×2，外框＝--fce-ctl */
  transition: background var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out);
}
@media (hover: hover) { .fce-seg__opt:hover .fce-seg__txt { background: var(--paper-2); } }
/* 四段的分隔線落在地區格欄距中線（≥768）：段寬 w+12、w+24、w+24、w+12，w＝地區 4 欄的欄寬。例外：11／70＝扣 1px 外框 */
@media (min-width: 768px) {
  .fce-seg--n4 { grid-template-columns: calc((100% - 70px) / 4 + 11px) calc((100% - 70px) / 4 + 24px) calc((100% - 70px) / 4 + 24px) minmax(0, 1fr); }
}
.fce-seg__in:checked + .fce-seg__txt { background: var(--ink); color: var(--cream); }
.fce-seg__in:focus-visible + .fce-seg__txt { outline: 2px solid var(--focus); outline-offset: -5px; }
html[data-season] .fce-seg__in:checked:focus-visible + .fce-seg__txt { outline-color: var(--gold); }
/* 下拉（原生 select 換外觀） */
.fce-select { position: relative; }
.fce-select::after { content: ""; position: absolute; right: var(--s2); top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--text); border-width: 0 1px 1px 0; transform: rotate(45deg); pointer-events: none; }
.fce-select__el {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--fce-ctl); padding: 0 var(--s5) 0 var(--s2);
  border: 1px solid var(--fce-ctl-line); border-radius: 0; background: var(--paper); color: var(--text); font-size: var(--fs-body); cursor: pointer;
}
/* 申請地區晶片（44px；未選＝虛線框、已選＝實線框＋✓：「待主張 → 主張」） */
/* 工具列：已選數在第 1 欄、兩顆鈕在第 2 欄。格子版＝兩鈕各對第 3、4 欄（間距＝格子欄距）；帳冊列＝兩鈕合起來＝下方分段區左右緣 */
.fce-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fce-gut); align-items: center; margin: 0 0 var(--s1); }
.fce-count { font-size: var(--fs-small); color: var(--fg); letter-spacing: .04em; }
.fce-tools__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fce-gut); }
.fce-tools--inv .fce-tools__btns { gap: var(--s1); }
.fce-link {
  min-height: var(--fce-ctl); padding: 0 var(--s1); border: 1px solid var(--fce-ctl-line); background: var(--paper); color: var(--text);
  font-size: var(--fs-body); line-height: 1.3; letter-spacing: .06em; cursor: pointer; transition: background var(--t-micro), color var(--t-micro);
}
.fce-link:focus-visible { background: var(--ink); color: var(--cream); }
@media (hover: hover) { .fce-link:hover { background: var(--ink); color: var(--cream); } }
/* 設計、商標地區＝4 欄格子：gutter 同區塊 2 欄，第 2、3 欄之間正好是 2 欄的欄線；≤600 改 2 欄 */
.fce-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1) var(--fce-gut); }
.fce-chip { position: relative; border: 1px dashed var(--fce-ctl-line); background: transparent; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.fce-chip.is-on { border-style: solid; border-color: var(--ink); background: var(--paper); }
.fce-chip__lab { display: flex; align-items: center; gap: var(--s1); min-height: calc(var(--fce-ctl) - 2px); padding: 0 var(--s1); cursor: pointer; }   /* 例外：扣 1px 框×2 */
.fce-chip__ok { flex: 0 0 auto; width: 16px; height: 16px; }
.fce-chip__in:checked + .fce-chip__ok path { stroke-dashoffset: 0; }
.fce-chip__name { color: var(--fg-2); transition: color 180ms; line-height: 1.3; }
.fce-chip.is-on .fce-chip__name { color: var(--text); }
.fce-chip:has(.fce-chip__in:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .fce-chip__lab:hover .fce-chip__name { color: var(--text); } }
/* 發明地區＝帳冊列：每列同高，勾選與地區名在第 1 欄、分段鈕在第 2 欄（左右緣＝區塊 2 欄的欄線）；沒有新型制度的列第 2 欄留白但列線不斷。
   列線用 --line；未勾＝方框空、分段鈕左右框虛線（對應格子版的「未選＝虛線」） */
.fce-chips--inv { display: block; border-top: 1px solid var(--line); }
.fce-chips--inv .fce-chip, .fce-chips--inv .fce-chip.is-on {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fce-gut); align-items: stretch;
  border: 0; border-bottom: 1px solid var(--line); background: none;
}
.fce-chips--inv .fce-chip__lab { grid-column: 1 / -1; min-height: var(--fce-ctl); padding: 0; }
.fce-chips--inv .fce-chip--seg .fce-chip__lab { grid-column: 1; }
.fce-chips--inv .fce-chip__ok { box-sizing: border-box; border: 1px solid var(--fce-ctl-line); background: var(--paper); }
.fce-chips--inv .fce-chip__in:not(:checked) + .fce-chip__ok { opacity: 1; }
.fce-chips--inv .fce-chip__in:not(:checked) + .fce-chip__ok path { opacity: 0; }
.fce-chip__seg { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-inline: 1px solid var(--fce-ctl-line); background: var(--paper); }
.fce-chip__seg .fce-seg__txt { min-height: var(--fce-ctl); padding: 0 var(--s1); font-size: var(--fs-small); letter-spacing: 0; }   /* 字級只有兩級：控制項 --fs-body、這裡 --fs-small */
.fce-chip:not(.is-on) .fce-chip__seg { border-inline-style: dashed; }
/* 擇一國兩段（發明、新型）：欄寬與三段列同一組，兩段對齊上下列的前兩段；第三格留白（同沒有新型制度的列第 2 欄留白），
   右框改由 ::after 畫在第三格左緣＝三段列第 2、3 段的分隔線位置；外框右邊透明，欄寬照算 */
.fce-chip__seg--n2 { border-right-color: transparent; background: none; }
.fce-chip__seg--n2 .fce-seg__opt { background: var(--paper); }
.fce-chip__seg--n2::after { content: ''; border-left: 1px solid var(--fce-ctl-line); }
.fce-chip:not(.is-on) .fce-chip__seg--n2::after { border-left-style: dashed; }
/* 計費項目開關 */
/* 三等分（2 欄與 3 欄同為 6 欄的細分）：每格一個框、外框由欄寬決定 */
.fce-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1) var(--fce-gut); }
.fce-switch { position: relative; display: flex; align-items: center; gap: var(--s1); min-height: var(--fce-ctl); padding: 0 var(--s1); border: 1px solid var(--fce-ctl-line); background: var(--paper); cursor: pointer; }
.fce-switch__track { flex: 0 0 auto; }
.fce-switch__track { position: relative; width: 40px; height: 20px; border: 1px solid var(--fce-ctl-line); background: var(--paper); transition: background var(--t-micro) var(--ease-out); }
.fce-switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: var(--text-2); transition: transform var(--t-micro) var(--ease-out), background var(--t-micro); }
.fce-switch__in:checked + .fce-switch__track { background: var(--ink); border-color: var(--ink); }
.fce-switch__in:checked + .fce-switch__track::after { transform: translateX(20px); background: var(--paper); }
.fce-switch__in:focus-visible + .fce-switch__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.fce-switch__txt { color: var(--text); }
/* 匯率（收合） */
.fce-rates { padding-top: var(--s1); border-top: 1px dashed var(--line); }
.fce-rates__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--fce-gut); }
.fce-rates__head .fce-note { margin: 0; }
.fce-rates__btn { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--fce-ctl); padding: 0; border: 0; background: none; color: var(--text); font-size: var(--fs-body); cursor: pointer; }
/* 例外：平移量＝旋轉後墨跡離框的距離（圖示幾何），收合、展開時字面左緣都貼欄線 */
.fce-rates__chev { width: 8px; height: 8px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateX(-4px) rotate(-45deg); transition: transform var(--t-state) var(--ease-out); }
.fce-rates__btn[aria-expanded="true"] .fce-rates__chev { transform: translateX(1.66px) rotate(45deg); }
.fce-rates__btn:focus-visible { color: var(--accent); }
@media (hover: hover) { .fce-rates__btn:hover { color: var(--accent); } }
.fce-rates__panel { margin-top: var(--s1); }
.fce-rates__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fce-gap) var(--fce-gut); align-items: start; }
.fce-rate { display: grid; gap: var(--s1); }
.fce-rate__lab { font-size: var(--fs-small); line-height: 1.6; color: var(--fce-fg-2); }
.fce-rate :is(.fce-hint, .fce-err) { margin-top: 0; }   /* 格內已有 gap＝與欄位下方提示、錯誤同距 */
.fce-rates__reset { display: block; width: calc((100% - var(--fce-gut)) / 2); margin-top: var(--fce-gap); }   /* 寬＝區塊第 1 欄 */

/* ── 摘要欄（送出前即時摘要＋估算鈕＋狀態行；aria-live 只此一行） ── */
.fce-sum { position: relative; padding: var(--s3); border: 1px solid var(--line); background: var(--paper); }
.fce-sum::before, .fce-sum::after { content: ""; position: absolute; width: var(--s2); height: var(--s2); border: 0 solid var(--accent); pointer-events: none; }
.fce-sum::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.fce-sum::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.fce-sum__title { margin: 0 0 var(--s2); font: 600 var(--fs-body)/1.5 var(--f-serif); letter-spacing: .06em; }
.fce-sum__list { margin: 0 0 var(--s3); font-size: var(--fs-small); line-height: 1.5; }
.fce-sum__group + .fce-sum__group { margin-top: var(--s2); }
.fce-sum__sec { display: flex; gap: var(--s1); align-items: baseline; padding-top: var(--s1); border-top: 1px solid var(--line); color: var(--fg); }
.fce-sum__no { font: 400 var(--fs-label)/1 var(--f-mono); color: var(--fg-2); }
/* 標籤與值都不折行：一行放不下時值整段換到下一行、仍靠右 */
.fce-sum__row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s2); margin: 0; }
.fce-sum__k { white-space: nowrap; }
.fce-sum__row:not(.fce-sum__row--solo) .fce-sum__v { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.fce-sum__k { color: var(--fce-fg-2); }
.fce-sum__v { color: var(--fg); text-align: right; }
/* 字面右緣補正（fc-embed.js summary 判字尾）：全形右括號字格右側有空白，往右補 .64em（截圖墨跡量）；破折號字面滿格，往左讓 1px（例外：字形幾何）。
   選擇器多一層＝蓋過上一條的 margin-left */
.fce-sum__row .fce-sum__v.fce-sum__v--cb { margin-right: -.64em; }
.fce-sum__row .fce-sum__v.fce-sum__v--dash { margin-right: 1px; }
.fce-sum__row--solo .fce-sum__v { text-align: left; }
.fce-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--fce-btn); padding: 0 var(--s1); border: 1px solid var(--ink);
  border-radius: 0; cursor: pointer; font-size: var(--fs-body); letter-spacing: .12em;
  transition: background var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out);
}
.fce-fail__btn, .fce-switchto { padding-inline: var(--s3); }   /* 這兩顆不在欄內、寬隨字 */
.fce-btn--go { background: var(--ink); color: var(--cream); }
.fce-btn--go:focus-visible { background: var(--ink-2); color: var(--paper); }
.fce-btn--ghost { background: var(--paper); color: var(--ink); }
.fce-btn--ghost:focus-visible { background: var(--ink); color: var(--cream); }
@media (hover: hover) {
  .fce-btn--go:hover:not(:disabled) { background: var(--ink-2); color: var(--paper); }
  .fce-btn--ghost:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
}
.fce-btn:disabled { cursor: default; background: var(--paper-2); border-color: var(--fce-ctl-line); color: var(--text-2); }
.fce-sum .fce-btn--go { width: 100%; letter-spacing: .3em; text-indent: .3em; }   /* 字級同其他鈕；text-indent 抵銷尾字距（字才水平置中） */
/* 控制項字的垂直置中（單 3mq）：分段、全選類、估算／下載鈕、下拉都是 Noto Sans TC。行高用倍數時 Chrome 把半行距捨去成整數 px，
   字框比控制項中心高 0～1px、隨字級（16～17px 隨寬度變）鋸齒式跳；中文字墨跡又在字框中心下方約 1px，兩者相加＝不同寬度高低不一。
   line-height: normal＝字框就是行框、沒有半行距可捨去（各寬度字框都正中）；下內距再把字提 0.875px 抵銷墨跡偏低。
   例外：1.75px 非間距級距。底部固定列的鈕另有量測，不在此列（維持原樣） */
.fce-seg .fce-seg__txt, .fce-link, .fce-btn:not(.fce-bar .fce-btn), .fce-select__el { line-height: normal; padding-bottom: 1.75px; }
.fce-status { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.6; color: var(--fce-fg-2); }
.fce-status:empty { margin-top: 0; }   /* 沒訊息不占位（元素留著：讀屏的 live region 要先在） */
.fce-status.is-err { color: var(--error); }
.fce-err--srv:not([hidden]) + .fce-status { display: none; }   /* 伺服器錯誤已在鈕下顯示：同字不重複出現（狀態行仍在、讀屏照報） */

/* ── 結果區（估算中＝頂端金線來回） ── */
.fce-out { position: relative; margin-top: var(--s4); scroll-margin-top: calc(var(--fce-top) + var(--fce-tabs-h) + var(--s2)); }
/* 金線不占位：在流內時會切斷估算單與結果區的邊距合併，估算中整張下移 26px */
.fce-run { display: none; position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--gold) 25%, transparent); }
.fce-run i { display: block; width: 32%; height: 100%; background: var(--gold); animation: fce-run 1100ms var(--ease-io) infinite alternate; }
.fce-out.is-running .fce-run { display: block; }
@keyframes fce-run { from { transform: translateX(0); } to { transform: translateX(212.5%); } }
@media (prefers-reduced-motion: reduce) { .fce-run i { width: 100%; } }

/* ── 估算單（一張紙：四角對位、標題＋「概估」印、總計、比例條、下載、明細、免責） ── */
.fce-sheet {
  position: relative; margin-top: var(--s3); padding: var(--s5) var(--s5) var(--s4); background: var(--paper); border: 1px solid var(--line);
  scroll-margin-top: calc(var(--fce-top) + var(--fce-tabs-h) + var(--s2));
}
.fce-sheet::before, .fce-sheet::after { content: ""; position: absolute; width: var(--s3); height: var(--s3); border: 0 solid var(--accent); pointer-events: none; }
.fce-sheet::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.fce-sheet::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
/* 過期提示：結果區捲動時黏在頁首（窄寬含分頁列）下方，蓋在表頭之上；表頭同時往下讓一個提示高（--fce-stale-h，只有過期時才有值） */
.fce-stale {
  position: sticky; top: calc(var(--fce-top) + var(--fce-tabs-h)); z-index: 3;
  margin: 0 0 var(--s3); padding: var(--s1) var(--s2); border-left: 2px solid var(--accent);
  background: var(--paper-2); color: var(--text); font-size: var(--fs-small); line-height: 1.7;
  transition: top var(--t-state) var(--ease-io);
}
.fce-sheet.is-stale { --fce-stale-h: calc(var(--fs-small) * 1.7 + var(--s1) * 2); }
.fce-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--fg); }
.fce-sheet__title { font: 600 var(--fs-h2)/1.3 var(--f-serif); letter-spacing: .06em; text-wrap-style: balance; }   /* 窄寬平衡換行 */
.fce-sheet__tseg { display: inline-block; white-space: nowrap; }   /* 大標兩段（產品名／佈局費用預估）各自不斷行，只在段間換行 */
@media (max-width: 359.98px) { .fce-sheet__tseg { display: inline; white-space: normal; } }   /* 極窄：段內也准斷，避免溢出 */
.fce-sheet__res { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.7; color: var(--fce-fg-2); }
/* 摘要各項：排法同下載 PDF／Excel——每項一格、不印「｜」，同欄左緣對齊；欄數 --fce-sum-k 由 fc-embed.js fitSummary 依容器寬定（最多 min(4, 項數)）。
   只有一列＝欄寬依內容；多列（is-eq）＝等寬欄、至少容得下該欄最寬項。每項不從中間斷行；1 欄仍放不下（is-wrap）才准換行。
   摘要框寬不隨格內容變（contain: inline-size；標題欄佔滿印記左側），否則欄數與框寬互相牽動 */
.fce-sheet__titles { flex: 1 1 auto; min-width: 0; }
.fce-sheet__summary { display: block; flex: 1 1 16em; min-width: 0; overflow: hidden; contain: inline-size; }
.fce-sum-items { --fce-sum-gap: var(--s3); --fce-sum-gap-s: var(--s2); display: grid; grid-template-columns: repeat(var(--fce-sum-k, 1), max-content); column-gap: var(--fce-sum-gap); justify-content: start; }
.fce-sum-items.is-eq { grid-template-columns: repeat(var(--fce-sum-k, 1), minmax(max-content, 1fr)); }
.fce-sum-items.is-tight { column-gap: var(--fce-sum-gap-s); }   /* 該欄數放不下時先縮欄距（fc-embed.js fitSummary） */
.fce-sum-probe { display: block; height: 0; }   /* 量摘要框寬的探針（fc-embed.js summaryEl） */
/* 再放不下：2 欄等寬、名稱不斷，值在自己格內換行，續行對齊值的起點 */
.fce-sum-items.is-vwrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fce-sum-items.is-vwrap .fce-sum-items__it { display: flex; align-items: baseline; white-space: normal; }
.fce-sum-items.is-vwrap .fce-sum-items__k { flex: none; white-space: nowrap; }
.fce-sum-items.is-vwrap .fce-sum-items__v { min-width: 0; }
.fce-sum-items__it { min-width: 0; white-space: nowrap; }
.fce-sum-items__k { color: var(--fce-fg-2); }   /* 同右側摘要欄 .fce-sum__k／__v：名稱淡、值深，數字等寬 */
.fce-sum-items__v { color: var(--fg); font-variant-numeric: tabular-nums; }
.fce-sum-items.is-wrap .fce-sum-items__it { white-space: normal; }
.fce-sum-items.is-one { grid-template-columns: minmax(0, 1fr); }
.fce-sum-items.is-one .fce-sum-items__it { display: flex; justify-content: space-between; column-gap: var(--s2); }   /* 1 欄（窄螢幕）：名稱靠左、值靠右，同右側摘要欄 .fce-sum__row */
.fce-sheet__label { padding: 2px var(--s1); border: 1px solid var(--fce-ctl-line); color: var(--fg); letter-spacing: .12em; white-space: nowrap; }   /* 例外：2px＝框內上下 */
/* 「概估」印：t1 印色（logo 紅）對 --paper 不到 4.5:1，小字印改用 logo 紅與墨調出的深一階（color-mix，對紙色字 ≥4.5:1，實測見交件）；t2 金框陰刻印照 base.css */
.fce-seal { --seal-fs: 20px; flex: 0 0 auto; margin-top: var(--s1); }   /* 例外：印字 20px（印記尺寸，非版面字級） */
/* ≤767：結果單頭改格線——大標、「估算結果」在左，印記在右（跨兩列）；摘要另起一列、伸到印記下方佔滿全寬，
   1 欄時值的右緣＝印記右緣＝下方橫線右緣（業主 11/08 03:18:16 要細節整齊）。.fce-sheet__titles／__res 不成框、子項直接排進格線 */
@media (max-width: 767.98px) {
  .fce-sheet__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0; align-items: start; }
  .fce-sheet__titles, .fce-sheet__res { display: contents; }
  .fce-sheet__title { grid-column: 1; grid-row: 1; }
  .fce-sheet__label { grid-column: 1; grid-row: 2; justify-self: start; margin-top: var(--s1); }
  .fce-seal { grid-column: 2; grid-row: 1 / 3; }
  .fce-sheet__summary { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s1); }
}
html[data-season="t1"] .fce-seal {
  --fce-seal-c: color-mix(in srgb, var(--seal-paper) 82%, var(--ink));
  background: var(--fce-seal-c); box-shadow: inset 0 0 0 3px var(--fce-seal-c), inset 0 0 0 4px rgba(243, 239, 230, .62);
}
.fce-grand { display: grid; gap: var(--s1); padding: var(--s4) 0 var(--s3); }
.fce-grand__label { font-size: var(--fs-body); line-height: 1.6; color: var(--fg); }
/* 例外：極窄寬字級隨視窗縮，最大案 15 字元（NTD 加 9 位數）不折行。8.2＝該字串字寬對字級比，74px＝≤369 寬的頁邊距加卡片內距（單 3r 量）；≥369 寬維持 --fs-h1 */
/* 總額與「舊結果」標記同一列（放不下＝標記換到下一行）；標記只在過期時出現 */
.fce-grand__num { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font: 400 clamp(28px, calc((100vw - 74px) / 8.2), var(--fs-h1))/1.1 var(--f-latin); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; color: var(--fce-grand); }
.fce-unit { font-size: var(--fs-small); color: var(--fce-fg-2); }
/* 過期（單 3m1）：總計維持藍、結果區不淡化（文字對比照常）；改以總額旁的「舊結果」標記＋黏頂提示＋下載停用表示。
   標記與「估算結果」小框同族（同字級、內距、框寬、字距），框線用 --accent 與黏頂提示的左線同色 */
.fce-grand__stale { flex: 0 0 auto; padding: 2px var(--s1); border: 1px solid var(--accent); color: var(--fg); font: 400 var(--fs-small)/1.7 var(--f-sans); letter-spacing: .12em; white-space: nowrap; }   /* 例外：2px＝框內上下 */
/* 階段比例條 */
.fce-ratio { margin: 0 0 var(--s4); }
.fce-ratio__bar { display: flex; gap: 2px; height: 12px; }   /* 例外：2px 分隔、12px 條高（圖形幾何） */
.fce-ratio__seg { display: block; min-width: 2px; flex-basis: 0; }
/* 圖例＝兩欄表（業主 11/10 16:12:16）：左欄色塊＋階段名（可在欄內換行），右欄百分比；每項一列，所有百分比右緣上下對齊。
   階段名欄寬＝最長名（窄時縮、名換行），故寬螢幕百分比緊跟名後而非推到卡片右緣。例外：10px＝色塊、.8em＝半個行高 */
.fce-ratio__legend { display: grid; grid-template-columns: 10px minmax(0, max-content) auto; column-gap: var(--s1); row-gap: var(--s1); justify-content: start; margin-top: var(--s2); list-style: none; font-size: var(--fs-small); }
.fce-ratio__item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; line-height: 1.6; }
@supports not (grid-template-columns: subgrid) { .fce-ratio__item { grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: var(--s1); } }
.fce-ratio__dot { margin-top: calc(.8em - 5px); width: 10px; height: 10px; }   /* 例外：圖例色塊（對齊第一行中線） */
.fce-ratio__name { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap-style: auto; }   /* 圖例名不從詞中間斷，只在標點處換行 */
.fce-ratio__seg2 { display: inline-block; max-width: 100%; }   /* 階段名兩段（「（」前後，fc-embed.js ratioName）：括號段整段換行 */
.fce-ratio__pct { justify-self: end; padding-left: var(--s2); text-align: right; font-variant-numeric: tabular-nums; color: var(--fce-fg-2); }   /* 百分比右緣上下對齊、與第一行同高 */
.fce-ratio--none { font: 400 var(--fs-h3)/1 var(--f-mono); color: var(--fg-2); }
.fce-tone-0 { background: var(--ink); }
.fce-tone-1 { background: var(--fce-grand); }
.fce-tone-2 { background: var(--gold-ink); }
.fce-tone-3 { background: var(--text-2); }
/* 下載（PDF 主鈕＋Excel 副鈕；四狀態：待命／產生中／完成 ✓／失敗＝鈕下訊息） */
.fce-dlrow { margin: 0 0 var(--s5); }
/* 兩顆等寬平分內容欄（外框由欄寬決定，「產生中…」字變不動外框） */
.fce-dlrow__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.fce-dl { min-width: 0; }
.fce-dl__msg { margin-top: var(--s1); }
.fce-dl.is-busy { cursor: progress; }
.fce-dl.is-done::after, .fce-bar__dl.is-done::after {
  content: ""; width: 6px; height: 11px; margin: -4px 0 0 var(--s1); border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
/* 明細（每階段 <details> 預設展開；水平細線；表頭 sticky） */
.fce-stage { border-top: 1px solid var(--line); }
.fce-stage:last-child { border-bottom: 1px solid var(--line); }
.fce-stage__sum { display: flex; align-items: center; gap: var(--s2); min-height: var(--fce-btn); padding: var(--s1) 0; cursor: pointer; list-style: none; }
.fce-stage__sum::-webkit-details-marker { display: none; }
.fce-stage__no { font: 400 var(--fs-label)/1 var(--f-mono); color: var(--fg-2); }
.fce-stage__title { font: 600 var(--fs-lead)/1.4 var(--f-serif); letter-spacing: .06em; }
.fce-stage__amt { margin-left: auto; color: var(--fg); }
.fce-stage__mark, .fce-rcard__mark { position: relative; flex: 0 0 auto; width: var(--fce-mark); height: 24px; }
.fce-stage__mark::before, .fce-stage__mark::after, .fce-rcard__mark::before, .fce-rcard__mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform var(--t-state) var(--ease-out); }
.fce-stage__mark::after, .fce-rcard__mark::after { transform: rotate(90deg); }
.fce-stage[open] > .fce-stage__sum .fce-stage__mark::after, .fce-rcard[open] > .fce-rcard__sum .fce-rcard__mark::after { transform: rotate(0deg); }
.fce-stage__sum:focus-visible .fce-stage__title { color: var(--accent); }
@media (hover: hover) { .fce-stage__sum:hover .fce-stage__title { color: var(--accent); } }
.fce-stage__body { padding: 0 0 var(--s3); }
.fce-num { font-family: var(--f-mono); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fce-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-small); }
.fce-table col:first-child, .fce-table th:first-child { width: 28%; }
.fce-table thead th {
  position: sticky; top: calc(var(--fce-top) + var(--fce-tabs-h) + var(--fce-stale-h, 0px)); z-index: 1; padding: var(--s1); background: var(--paper);
  border-bottom: 1px solid var(--fg); font-size: var(--fs-label); letter-spacing: .1em; color: var(--fce-fg-2); text-align: left;
  transition: top var(--t-state) var(--ease-io);
}
.fce-table thead th.fce-num { font-family: var(--f-sans); letter-spacing: 0; text-align: right; }   /* 不留尾字距：表頭字右緣才對金額右緣 */
.fce-table tbody th, .fce-table td, .fce-table tfoot th { padding: 12px var(--s1); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }   /* 例外：12px＝表格列高內距 */
.fce-table td { text-align: right; }
/* 合計列：上方實線（框線合併時上一列的線會蓋過 tfoot，兩邊都寫）分層；「合計」二字 Serif 600，
   數字格與明細同款等寬字 400（IBM Plex Mono 只載 400，不新增字重；單 3m1），右緣對齊照 .fce-num */
.fce-table tfoot th, .fce-table tfoot td { border-bottom: 0; border-top: 1px solid var(--fg); color: var(--fg); }
.fce-table tfoot th { font: 600 var(--fs-small)/1.5 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; }
.fce-table tfoot td { font: 400 var(--fs-small)/1.5 var(--f-mono); font-variant-numeric: tabular-nums; }
.fce-table tbody tr:last-child > * { border-bottom-color: var(--fg); }
/* 表格左緣對階段標題、最後一欄右緣對階段金額（＝內容欄右緣讓開＋／－圖示）；列線照舊滿版 */
.fce-table :is(thead, tbody, tfoot) tr > :first-child { padding-left: 0; }
.fce-table :is(thead, tbody, tfoot) tr > :last-child { padding-right: var(--fce-amt-r); }
.fce-rtype { display: block; font-size: var(--fs-label); color: var(--fce-fg-2); }
.fce-sub { color: var(--fg); }
.fce-rcards { display: none; list-style: none; }
.fce-rcard { border-bottom: 1px solid var(--line); }
.fce-rcard__sum { display: flex; align-items: center; gap: var(--s2); min-height: var(--fce-ctl); padding: var(--s1) 0; cursor: pointer; list-style: none; }
.fce-rcard__sum::-webkit-details-marker { display: none; }
.fce-rcard__name { flex: 1 1 auto; min-width: 0; }
.fce-rcard__dl { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s2); padding: 0 var(--fce-amt-r) var(--s2) 0; font-size: var(--fs-small); color: var(--fce-fg-2); }   /* 例外：4px 列距 */
.fce-rcard__dl dd { color: var(--fg); }
.fce-rcards__total { display: flex; justify-content: space-between; padding: var(--s1) var(--fce-amt-r) var(--s1) 0; border-top: 1px solid var(--fg); }
.fce-rcards__total > span { font: 600 var(--fs-body)/1.5 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; }
.fce-rcards__total > .fce-num { font: 400 var(--fs-body)/1.5 var(--f-mono); font-variant-numeric: tabular-nums; }   /* 手機合計數字＝卡片小計同款等寬字 400（同上） */
/* 地區說明（設計 region_notes；fc-embed.js stageBlock）：申請費表該地區列正下方一行，字比明細小一級、次要字色、可換行；
   地區列與說明列之間不畫線（線畫在說明列下方）。桌面＝表格說明列（跨五欄，左右緣同表格）；手機＝卡片下方、在收合內容外 */
.fce-table tbody tr.fce-has-note > * { padding-bottom: 0; border-bottom: 0; }
.fce-table td.fce-rnote { padding-top: 2px; text-align: left; font: 400 var(--fs-label)/1.6 var(--f-sans); color: var(--fce-fg-2); }   /* 例外：2px＝與地區名的字距 */
.fce-rcards > li.fce-has-note > .fce-rcard { border-bottom: 0; }
.fce-rcards p.fce-rnote { margin: 0; padding: 0 var(--fce-amt-r) var(--s1) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; color: var(--fce-fg-2); }
.fce-disc { margin-top: var(--s3); font-size: var(--fs-small); line-height: 1.8; color: var(--fce-fg-2); }

/* ── 動態（§6.4；減動態＝base.css §11 全關＋JS 不加 fce-anim） ── */
.fce-sheet.fce-anim:not(.is-in) { clip-path: inset(0 0 100% 0); }
.fce-sheet.fce-anim.is-in { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ease-out); }
.fce-sheet.fce-anim:not(.is-in) .fce-row { opacity: 0; transform: translateY(8px); }
.fce-sheet.fce-anim.is-in .fce-row { transition: opacity var(--t-state) var(--ease-out), transform var(--t-state) var(--ease-out); transition-delay: calc(700ms + var(--i, 0) * 40ms); }
.fce-sheet.fce-anim:not(.is-in) .fce-seal { opacity: 0; transform: scale(1.6) rotate(-6deg); }
.fce-sheet.fce-anim.is-in .fce-seal { transition: opacity 420ms var(--ease-stamp) 1600ms, transform 420ms var(--ease-stamp) 1600ms; }
.fce-sheet [data-k].is-flash { animation: fce-flash 900ms var(--ease-out); }
@keyframes fce-flash { from { background: color-mix(in srgb, var(--gold) 45%, transparent); } to { background: transparent; } }

/* ── 換行（通用規則，不針對特定字）：估算台內會折行的短標籤一律平衡換行、段落一律避免末行落單；
   目標＝折行時最後一行不只剩 1～2 個字（量測：tmp_j4b_wrap.js）。不支援 text-wrap 的瀏覽器＝一般換行 ── */
.fce :is(h2, h3, legend, label, th, summary, button, dt, dd, li, p, span),
.fce-bar :is(p, span, button) { text-wrap-style: balance; }   /* 用 longhand：不動既有 nowrap（text-wrap 簡寫會把它改回可換行） */
.fce :is(.fce-lead, .fce-note, .fce-rnote, .fce-disc, .fce-noscript, .fce-err, .fce-hint, .fce-fail__msg, .fce-stale, .fce-status, .fce-note__ln) { text-wrap-style: pretty; }
/* 例外（Safari／WebKit）：WebKit 的 pretty 整段重排、非末行常提早折，兩端對齊（base.css 中文內文那條）再把該行字距撐開（業主 11/10 iPhone 截圖）；
   兩端對齊的說明字在 WebKit 改一般換行（末行可能只剩 1～2 字）。Chromium 的 pretty 只調末幾行，量得撐開小、保留。
   hanging-punctuation 目前只有 Safari 支援，拿來辨認 WebKit；量測 j2w_work/fc1/just.js。.fce-note__ln＝說明裡各自一行的句子（商標申請方式） */
@supports (hanging-punctuation: first) {
  .fce :is(.fce-lead, .fce-note, .fce-disc, .fce-noscript, .fce-err, .fce-hint, .fce-fail__msg, .fce-status, .fce-note__ln) { text-wrap-style: auto; }
}
.fce-note__ln { display: block; }

/* ── 底部固定列（≤1099px；64px＋safe-area；頁尾留出等高空間） ── */
.fce-bar { display: none; }
@media (max-width: 1099.98px) {
  .fce { --fce-tabs-h: 48px; }
  .fce-tabs__list { position: sticky; top: var(--fce-top); z-index: 6; height: 48px; margin-bottom: var(--s3); background: var(--bg); transition: top var(--t-state) var(--ease-io); }
  html:not(.aw-ok) .fce-tabs { padding-top: calc(48px + var(--s3)); }
  .fce-form > .fce-sum { grid-column: 1 / -1; grid-row: auto; position: static; }
  .fce-form > * { grid-column: 1 / -1; }
  .fce-skel__form { grid-column: 1 / -1; }
  .fce-skel__aside { grid-column: 1 / -1; margin-top: var(--s4); }
  html.fce-has-bar { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--s2)); }
  html.fce-has-bar .aw-footer { padding-bottom: calc(var(--s4) + 64px + env(safe-area-inset-bottom, 0px)); }
  .fce-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; align-items: center; gap: var(--s1);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    /* 左右緣＝內容欄：768～1099 內容欄從外層 12 欄的第 3 欄起（p-fee.css .p-fee__est-slot），% 以視窗寬計 */
    padding: 0 var(--aw-margin) env(safe-area-inset-bottom, 0px) calc(var(--aw-margin) + 2 * ((100% - 2 * var(--aw-margin) - 264px) / 12 + 24px));   /* 例外：264／24＝外層 12 欄 gutter 幾何 */
    background: var(--paper); border-top: 1px solid var(--ink); color: var(--text);
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--t-state) var(--ease-out), visibility 0s linear var(--t-state);
  }
  .fce-bar.is-on { transform: none; visibility: visible; transition: transform var(--t-state) var(--ease-out), visibility 0s; }
  .fce-bar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .fce-bar__k { font-size: var(--fs-label); color: var(--fce-fg-2); letter-spacing: .1em; }
  .fce-bar__v { font-size: var(--fs-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 估算單與明細表：單欄版內容欄變窄；四個金額欄等寬（第一欄 18%），小計欄左內距歸零、右內距讓開圖示 */
  .fce-sheet { padding: var(--s4) var(--s3) var(--s3); }
  .fce-table thead th:first-child { width: 18%; }
  .fce-table :is(thead, tbody, tfoot) tr > .fce-num { padding-right: 0; }
  .fce-table :is(thead, tbody, tfoot) tr > :last-child { padding-left: 0; padding-right: var(--fce-amt-r); }
  .fce-form > .fce-sum { top: auto; }   /* p-fee.css 在這段寬度把摘要改 position:relative，top 不歸零會把面板整塊下移一個 --s3、凸出容器 */
  .fce-bar .fce-btn { flex: 0 0 auto; min-height: var(--fce-ctl); padding: 0; }
  .fce-bar__go { width: 104px; letter-spacing: .3em; }   /* 例外：固定寬，「估算中…」字變不動外框 */
  .fce-bar__dl { display: none !important; width: 72px; letter-spacing: .04em; }   /* 例外：同上 */
  .fce-bar.is-result .fce-bar__go { display: none; }
  .fce-bar.is-result .fce-bar__dl { display: inline-flex !important; }
  .fce-bar.is-result .fce-bar__v { font: 400 var(--fs-lead)/1.2 var(--f-latin); color: var(--fce-grand, #3B7190); font-variant-numeric: lining-nums tabular-nums; }
  .fce-bar.is-stale .fce-bar__k { display: none; }
  .fce-bar.is-stale .fce-bar__v { white-space: normal; font-size: var(--fs-small); }
}
@media (max-width: 767.98px) {
  .fce { padding: var(--s5) 0; }
  .fce-sec__tog { flex-wrap: wrap; row-gap: 0; }
  .fce-sec__note { order: 9; flex: 1 0 100%; padding-left: calc(var(--s3) + var(--s2) - .65em); }   /* 段名旁的括號說明：窄寬改到段名下一行；扣 .65em＝全形左括號字格左側的空白，字面才對段名（截圖墨跡量） */
  .fce-stage__sum { flex-wrap: wrap; row-gap: 0; }
  .fce .fce-stage__title { flex: 1 1 0; min-width: 0; text-wrap-style: pretty; }   /* 用滿扣掉收合鈕後的整行，不提早平衡折行 */
  .fce-stage__amt { order: 3; flex: 1 0 100%; margin-left: 0; padding-right: var(--fce-amt-r); text-align: right; color: var(--fce-fg-2); }   /* 階段金額改到標題下一行，右緣仍對金額欄 */
  .fce-bar { padding-left: var(--aw-margin); }   /* 外層 12 欄到這裡已併成單欄 */
  .fce-sec__body { grid-template-columns: minmax(0, 1fr); }
  .fce-rates__head { grid-template-columns: minmax(0, 1fr); }
  .fce-tools--inv { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s1); }   /* 同帳冊列的 2:3 */
  .fce-rates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fce-rates__reset { width: 100%; }
  /* 帳冊列：第 1 欄窄一點、分段鈕寬一點；「發明＋新型」那段多留字寬 */
  .fce-chips--inv .fce-chip, .fce-chips--inv .fce-chip.is-on { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s1); }
  .fce-chip__seg { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); }
  .fce-sheet { padding: var(--s4) var(--s2) var(--s3); }
}
/* 明細表放不下大金額的寬度（小計欄＝字寬＋讓開圖示＋字面距 4，最大案單格 10 字元；單 3r 量）：
   ≤839 第一欄縮到地區名放得下、表內字用 --fs-label（13px），金額欄仍等寬；≤620 連這樣都不夠，換手機明細 */
@media (max-width: 839.98px) {
  .fce-table thead th:first-child { width: 12%; letter-spacing: 0; }
  .fce-table, .fce-table tfoot th, .fce-table tfoot td { font-size: var(--fs-label); }
  .fce-table td.fce-rnote { font-size: calc(var(--fs-label) - 1px); }   /* 例外：表內字已是最小一級 --fs-label，說明再小 1px 才比明細小一級 */
}
@media (max-width: 620px) {
  .fce-table { display: none; }
  .fce-rcards { display: block; }
}
/* 601～1099 面板全寬：標籤與值不撐到兩端（標籤欄固定寬、值接在後面左對齊）。768～1099 再分兩欄：案件參數一欄；地區、計費、估算鈕一欄 */
@media (min-width: 601px) and (max-width: 1099.98px) {
  .fce-sum__row:not(.fce-sum__row--solo) { display: grid; grid-template-columns: 10.2em minmax(0, 1fr); column-gap: var(--s1); }
  .fce-sum__row:not(.fce-sum__row--solo) .fce-sum__v { margin-left: 0; text-align: left; }
  .fce-sum__row .fce-sum__v.fce-sum__v--cb, .fce-sum__row .fce-sum__v.fce-sum__v--dash { margin-right: 0; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .fce-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fce-gut); align-items: start; }
  .fce-sum > * { grid-column: 2; }
  .fce-sum > .fce-sum__title { grid-column: 1 / -1; }
  .fce-sum__list { display: contents; }
  .fce-sum__group { grid-column: 2; }
  .fce-sum__group--1 { grid-column: 1; grid-row: 2 / span 5; }
  .fce-sum__group--1 + .fce-sum__group { margin-top: 0; }
  .fce-sum .fce-btn--go { margin-top: var(--s3); }
}
@media (max-width: 600px) {
  .fce-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fce-tools__btns { gap: var(--s1); }   /* 格子只剩 2 欄：兩鈕合起來＝第 2 欄 */
  .fce-switches { grid-template-columns: minmax(0, 1fr); }
  .fce-dlrow__btns { grid-template-columns: minmax(0, 1fr); }
  .fce-sheet__head { flex-direction: row; }
  .fce-tabs__list { gap: 0 var(--s3); }
  .fce .fce-tab { font-size: var(--fs-body); letter-spacing: .04em; }
}

/* 矮視窗（寬 ≥1024、高 ≤800）：標題區收緊，第一組控制項與標籤進第一屏（開場與版位在 p-fee.css 同條件）；無 JS 前的分頁列留高跟著改＝不跳版 */
@media (min-width: 1024px) and (max-height: 800px) {
  .fce-head { margin-bottom: var(--s2); padding-bottom: var(--s1); }
  .fce-tabs__list { height: 48px; margin-bottom: var(--s2); }
  .fce-lead { margin-bottom: var(--s2); }
}
@media (min-width: 1024px) and (max-height: 800px) and (scripting: enabled) {
  html:not(.aw-ok) .fce-tabs { padding-top: calc(48px + var(--s2)); }
}

/* 列印：估算單整張印（底部列、骨架、步進鈕不印） */
@media print {
  .fce-bar, .fce-skel, .fce-run, .fce-step__btn, .fce-sum .fce-btn, .fce-dlrow { display: none !important; }
  .fce-sheet { clip-path: none !important; }
  .fce-rcards { display: none !important; }
  .fce-table { display: table !important; }
}