/* 線上申請表單。
   設計 token 取自 static_base/web/css/style.css：
   主色 #322153 深紫 / 強調 #84BD5A 綠 / Roboto / pill 按鈕 radius:100px
   手機優先 —— 客群幾乎全為手機。 */
:root{
  --purple:#322153; --green:#84BD5A; --text:#444; --muted:#888;
  --line:#e3e6ea; --bg:#f5f6f8; --white:#fff;
  --danger:#c0392b; --danger-bg:#fdecea; --warn:#b7791f;
  --r:10px; --pill:100px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Roboto','Microsoft JhengHei',sans-serif;
     color:var(--text);font-size:16px;line-height:1.6}

.apply-wrap{max-width:560px;margin:0 auto;padding:20px 16px 60px}

/* 站台 CSS 有一條 `section{float:left;width:100%;padding:50px 0}`。
   本頁大量使用 <section>（每個步驟、請先備妥、恢復卡、完成卡），
   浮動元素**不撐開父容器的高度**，且周圍的 margin 不會正常運作 ——
   2026-08-25 實測：.intro-body 只有 80px 卻裝著 211px 的內容，
   而「貸款需求」標題的高度變成 215px，怎麼加 margin 都推不開。
   本頁一律取消浮動；padding 由各自的規則決定。 */
.apply-wrap section{float:none}
.step{padding:0}

/* 站台的底部諮詢列是 position:fixed、z-index:9999、且不分螢幕尺寸都在。
   在這一頁它會整條蓋住「下一步／送出申請」（實測步驟 6、8 完全被遮住，
   重疊 51px＝整條列高），等於把最重要的按鈕擋掉。
   加 padding 沒用 —— 底下還有 footer，按鈕仍會停在視窗底緣。
   本頁隱藏它；同樣的 LINE 與電話入口已經在上方選單裡（且保留了
   contact_line／contact_phone 這兩個 class，GA 的點擊追蹤不受影響）。
   本檔只在申請頁與感謝頁載入，這條規則因此天生只作用於這兩頁，
   不必去動共用的 base template。 */
.bottom_navi_bar{display:none}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;
      padding:18px 16px 22px;box-shadow:0 2px 10px rgba(50,33,83,.06)}

/* ---- 步驟指示器 ---- */
/* 每一段是可點的按鈕（2026-08-27）。

   **選擇器一定要是 button 不是 i** —— 標記換了而這裡沒換的話，三條規則
   全部失配，進度條會變成八個沒有樣式的空按鈕，而 HTML 檢查全部會通過。

   視覺仍然是細條：8px 的色塊畫在 ::before，按鈕上下的 18px padding 只是
   把觸控目標撐到 44px 高（站主 2026-08-27 在可互動的原型上選的方案 C）。

   寬度是硬限制：卡片可用寬 326px（iPhone 13），8 段各 44px 需要 387px，
   所以段寬上限 36px。35×44 遠超 WCAG 2.5.8 AA 的 24×24，低於 Apple HIG
   建議的 44×44 —— 這是擠不下，不是疏忽。 */
.steps{display:flex;gap:6px;margin-bottom:6px}
.steps button{flex:1;padding:18px 0;border:0;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.steps button::before{content:'';display:block;height:8px;border-radius:99px;
  background:var(--line)}
.steps button.on::before{background:var(--green)}
.steps button.cur::before{background:var(--purple)}
.steps button:disabled{cursor:default}
.steps button:focus-visible{outline:3px solid rgba(132,189,90,.5);
  outline-offset:1px;border-radius:8px}
.steplabel{display:flex;justify-content:space-between;align-items:center;
           font-size:.76rem;color:var(--muted);margin-bottom:16px;min-height:22px}
.steplabel b{color:var(--purple)}

/* 步驟標題。跟在引導區塊後面時需要明顯的呼吸空間，
   否則「貸款需求」會緊貼著上面的「請先備妥」方框。 */
.q{font-size:1.14rem;color:var(--purple);font-weight:700;margin:0 0 14px}
.intro + .q{margin-top:34px}

/* ---- 欄位 ---- */
/* 欄位之間的間距**只由這一條決定**。
   原本它散在三個地方（.fld 的 2px、.f 標籤的 14px、.up 的 11px），
   再被 margin collapsing 合併，結果同一頁裡出現 2px／11px／14px 三種
   間距 —— 文字欄位接上傳框時只剩 2px，看起來像黏在一起
   （2026-08-26 站主回報）。沒有任何一處在管「欄位之間該隔多遠」，
   間距只是三段各自的邊界相加後的副產品。

   所以 .f 與 .up 的外距歸零，節奏交給包住每個欄位的 .fld ——
   之後不論欄位裡面是輸入框、上傳框還是選項卡，間距都一樣。 */
.fld{margin-bottom:18px}
.fld[hidden]{display:none}
.f{display:block;font-size:.88rem;font-weight:500;color:#333;margin:0 0 6px}
.f .req{color:var(--danger);margin-left:3px}
input.t,select.t{width:100%;padding:12px 13px;border:1px solid #ccd2d8;border-radius:var(--r);
   font-size:1rem;font-family:inherit;background:#fff;min-height:46px}
input.t:focus,select.t:focus{outline:3px solid rgba(132,189,90,.35);border-color:var(--green)}

/* ---- 選項卡（觸控目標 ≥44px、間距 ≥8px）---- */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid #d5dae0;border-radius:var(--pill);padding:11px 17px;font-size:.92rem;
     cursor:pointer;background:#fff;min-height:44px;display:flex;align-items:center;
     transition:background .18s,border-color .18s,color .18s}
.opt:hover{border-color:var(--green)}
.opt.sel{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:500}
/* 原生 radio/checkbox 隱藏但仍可鍵盤聚焦（不可用 display:none） */
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt:focus-within{outline:3px solid rgba(132,189,90,.35)}

/* ---- 步驟區塊 ---- */
.step[hidden]{display:none}

/* ---- 上傳槽位五狀態（Phase 2.5 §5）---- */
.up{border:1.5px dashed #cbd2d9;border-radius:var(--r);padding:14px;background:#fcfdfe}
.up .head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.up .nm{font-size:.9rem;font-weight:500;color:#333}
.up .act{background:none;border:0;font-family:inherit;font-size:.82rem;color:var(--purple);
  text-decoration:underline;cursor:pointer;white-space:nowrap;min-height:44px;padding:0 4px}
.up .file{font-size:.78rem;color:var(--muted);margin-top:7px;word-break:break-all}
.up .bar{height:7px;background:#e9edf1;border-radius:99px;overflow:hidden;margin:9px 0 5px;display:none}
.up .bar>i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .2s}
.up.doing .bar{display:block}
.up .st{font-size:.78rem;display:flex;align-items:center;gap:5px;color:var(--muted)}
.up .chk{width:16px;height:16px;flex:none}
.up.done{border-style:solid;border-color:var(--green);background:#f4faf0}
.up.done .st{color:#4f8b2b}
.up.doing{border-style:solid;border-color:#9dc7e8;background:#f5fafd}
.up.doing .st{color:#2b6c9b}
.up.error{border-style:solid;border-color:var(--danger);background:var(--danger-bg)}
.up.error .st{color:var(--danger)}
.up.resume{border-style:solid;border-color:var(--warn);background:#fffaf0}
.up.resume .st{color:var(--warn)}

/* ---- 檔案列 ---- */
/* 狀態色在「列」上而不是整個槽位：三個檔並行上傳時，槽位層級的邊框
   顏色會互相蓋掉，客戶看不出是哪一個失敗了。 */
.up.multi{border-style:solid;border-color:#cbd2d9}
.up .files:empty{display:none}
.up .files{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.f-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;
  border:1px solid #e2e7ec;border-radius:10px;background:#fff}
.f-thumb{flex:none;width:46px;height:46px;border-radius:7px;overflow:hidden;
  background:#eef2f5;display:flex;align-items:center;justify-content:center}
.f-thumb:empty::after{content:'檔案';font-size:.62rem;color:var(--muted)}
.f-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.f-body{flex:1;min-width:0}
.f-name{font-size:.78rem;color:#333;word-break:break-all}
.f-row .bar{margin:6px 0 3px}
.f-row .st{margin-top:3px}
/* 負 margin 讓 44px 的點擊區不把整列撐高 */
.f-del{flex:none;width:44px;height:44px;margin:-9px -10px -9px 0;
  background:none;border:0;font-size:1rem;line-height:1;color:var(--muted);
  cursor:pointer}
.f-del:hover{color:var(--danger)}
.f-row.done{border-color:var(--green);background:#f4faf0}
.f-row.done .st{color:#4f8b2b}
.f-row.doing{border-color:#9dc7e8;background:#f5fafd}
.f-row.doing .st{color:#2b6c9b}
.f-row.doing .bar{display:block}
.f-row.error{border-color:var(--danger);background:var(--danger-bg)}
.f-row.error .st{color:var(--danger)}
.f-row.resume{border-color:var(--warn);background:#fffaf0}
.f-row.resume .st{color:var(--warn)}

/* ---- 電子簽名 ---- */
.sigpad{border:1.5px dashed #cbd2d9;border-radius:var(--r);background:#fcfdfe;height:150px;
  margin-top:8px;touch-action:none}
.sigpad.signed{border-style:solid;border-color:var(--green);background:#f4faf0}
.sigpad canvas{display:block;width:100%;height:100%}
.sigact{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:.8rem}
.siglink{background:none;border:0;font-family:inherit;font-size:.8rem;color:var(--purple);
  text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px}
#sig-state{color:#4f8b2b}

/* ---- 簽名：點一下放大（欄位屬性 expand）---- */
/* .sig-tap 同時是提示與裝置判斷的依據。**判斷寫在這裡，JS 只讀結果** ——
   沿用 main.js:79 的原則：不要在 JS 裡再寫一次 hover 媒體查詢。 */
.sigpad{position:relative}
.sig-tap{display:none}
@media (hover: none){
  .sig-tap{display:flex;align-items:center;justify-content:center;
    position:absolute;inset:0;gap:6px;color:var(--purple);font-size:.95rem;
    font-weight:600;letter-spacing:.5px}
}

/* 已經簽好的那張圖。與裝置無關 —— 手機桌機都靠它做到
   「重新整理之後簽名還在」（spec §9）。

   pointer-events:none 不能漏：這張圖蓋在 canvas 上，會擋住桌機的筆。
   object-fit:contain 不能漏：手機在覆蓋層簽的是 2.27:1，桌機的板是 3.3:1，
   直接拉滿會把客戶的簽名壓扁。 */
.sig-preview{position:absolute;inset:6px;width:calc(100% - 12px);
  height:calc(100% - 12px);object-fit:contain;pointer-events:none}

/* 已經有簽名時，提示縮到角落，不要蓋住簽名 */
@media (hover: none){
  .sigpad.signed .sig-tap{inset:auto 8px 6px auto;font-size:.78rem;
    color:var(--muted);font-weight:400}
}

.sigov[hidden]{display:none}
.sigov{position:fixed;inset:0;z-index:9999;background:#fff;
  display:flex;overscroll-behavior:none;touch-action:none;height:100dvh}
.sigov-pad{flex:1;min-width:0;min-height:0;
  border:1.5px dashed #cbd2d9;border-radius:var(--r);background:#fcfdfe}
.sigov-pad canvas{display:block;width:100%;height:100%;touch-action:none}
.sigov-bar{display:flex;align-items:center;justify-content:space-between;
  flex:none;gap:8px}
.sigov-btn{background:none;border:0;font-family:inherit;font-size:.9rem;
  font-weight:600;color:var(--purple);cursor:pointer;padding:0 10px;
  min-height:44px;min-width:44px;white-space:nowrap}
.sigov-done{background:var(--green);color:#fff;border-radius:var(--pill);
  padding:0 24px}
.sigov-hint{font-size:.82rem;color:var(--muted);white-space:nowrap}
.sigov-btn:focus-visible,.sigov-pad canvas:focus-visible{
  outline:3px solid rgba(132,189,90,.5);outline-offset:2px}

/* 不旋轉（橫向視窗或桌機）：工具列在上下 */
.sigov{flex-direction:column;padding:8px}
.sigov-bar{height:44px}

/* 旋轉：工具列變成手機左右兩邊的直條，文字轉 -90°。
   **UI 轉 -90° 而輸出影像轉 +90°，符號相反是對的** ——
   一個是把畫面預先轉歪讓橫握手機的人看正，另一個是把人寫正的東西
   轉正回來存檔。見 spec §3.5，不要「修」成一致。 */
.sigov.rot{flex-direction:row}
/* space-evenly 而不是 space-between：transform 繞元素自身中心旋轉，
   而元素的**版面**寬度是文字長度（「把手機橫過來簽…」約 180px）。
   貼在直條兩端的話，旋轉後那 180px 有一半跑到視窗外，文字與「完成簽名」
   都會被切掉（2026-08-28 截圖抓到）。放在 1/3 與 2/3 就進得來。 */
/* column-reverse 不是 column。畫面順時針轉 90° 時 new_x = 高 − y、new_y = x，
   所以：

     手機的**左**邊 → 客戶的**上**（所以文件順序就是對的，不需要 order）
     手機的**上**方 → 客戶的**右**（所以直條裡要反過來排）

   2026-08-28 截圖抓到：不反排的話客戶會看到「取消」在左上、「完成簽名」
   在右下 —— 與不旋轉模式左右相反。 */
.sigov.rot .sigov-bar{flex-direction:column-reverse;width:44px;height:auto;
  justify-content:space-evenly}
.sigov.rot .sigov-btn,
.sigov.rot .sigov-hint{transform:rotate(-90deg)}

/* ---- autosave 指示 ---- */
.save{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.save.ok{color:#4f8b2b}
.save.err{color:var(--danger)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---- 按鈕（pill，同站上 learn-more-btn）---- */
.nav{display:flex;gap:10px;margin-top:22px}
.btn{border:0;border-radius:var(--pill);padding:13px 26px;font-size:.95rem;font-weight:600;
     font-family:inherit;letter-spacing:.5px;cursor:pointer;min-height:48px;flex:1;
     transition:opacity .18s}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.4;cursor:default}
.btn.p{background:var(--purple);color:#fff}
.btn.g{background:var(--green);color:#fff}
.btn.o{background:#fff;color:var(--purple);border:1.5px solid #d5dae0;flex:0 0 34%}

/* ---- 個資告知同意 ---- */
.consent{border:1px solid var(--line);border-radius:var(--r);background:#fafbfc;padding:12px 14px;margin-top:8px}
.consent-head{font-size:.84rem;font-weight:700;color:var(--purple);margin-bottom:6px}
.consent-body{font-size:.76rem;color:#666;line-height:1.75;max-height:66px;overflow:hidden}
.consent-body.open{max-height:none}
.consent-body p{margin:0 0 8px}
.consent-more{background:none;border:0;padding:4px 0;font-family:inherit;
     font-size:.78rem;color:var(--purple);text-decoration:underline;cursor:pointer}
.consent-agree{font-size:.78rem;color:var(--muted);margin:9px 0 0;text-align:center}

/* ---- 草稿恢復 ---- */
.resume-card{text-align:center;padding:16px 10px 20px}
.resume-card .sub{font-size:.85rem;color:var(--muted);margin:0}
.resume-card .big{font-size:2.1rem;font-weight:700;color:var(--purple);margin:6px 0 2px}
.pbar{height:9px;background:#e9edf1;border-radius:99px;overflow:hidden;margin:12px 0 6px}
.pbar>i{display:block;height:100%;background:var(--green)}
.meta{font-size:.8rem;color:var(--muted)}
/* 「重新開始」刻意做成文字連結而非按鈕：多數人是要繼續填，
   而這個動作會放棄已填的內容，不該跟主要動作搶注意力。 */
.linkish{background:none;border:0;padding:8px 4px;margin-top:4px;
  font:inherit;font-size:.82rem;color:var(--muted);
  text-decoration:underline;cursor:pointer}
.linkish:hover{color:var(--purple)}

/* ---- 開發面板（僅 DEBUG）---- */
.dev-panel{position:fixed;right:12px;bottom:12px;z-index:50;background:#2d2e2e;color:#fff;
  border-radius:10px;padding:10px 12px;font-size:.74rem;max-width:290px;opacity:.94}
.dev-title{font-weight:700;margin-bottom:6px;letter-spacing:.5px}
.dev-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px}
.dev-btn{background:#444;color:#fff;border:0;border-radius:99px;padding:5px 10px;
  font-family:inherit;font-size:.72rem;text-decoration:none;cursor:pointer}
.dev-btn:hover{background:var(--green)}
/* 讓頁尾按鈕能捲到面板上方 */
.dev-spacer{height:200px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- 送出完成 ---- */
.done-card{text-align:center;padding:22px 14px 26px}
.done-card .sub{font-size:.86rem;color:var(--muted);margin:0}
.done-card .q{margin:14px 0 6px}
.tick{width:62px;height:62px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto}
/* 感謝頁的動作鈕是 <a> 而不是 <button>，而且直向排列要佔滿寬度。
   .btn.o 原本帶著 flex:0 0 34%（給上一步／下一步那一列用的），
   在 flex-direction:column 之下那會變成高度，必須蓋掉。 */
.done-card .nav .btn{width:100%;flex:none;text-align:center;
  text-decoration:none;line-height:22px}
.summary{background:#f7f8fa;border-radius:var(--r);padding:13px 15px;text-align:left;
  font-size:.86rem;margin-top:18px}
.summary div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.summary span:first-child{color:var(--muted);flex:none}

/* ---- 送出缺漏 ---- */
.err-box{background:var(--danger-bg);border:1px solid #f5c6cb;border-left:4px solid var(--danger);
  border-radius:var(--r);padding:12px 14px;font-size:.85rem;color:#7d2820;margin:16px 0 18px}

/* 待辦表出現時，第一步的主視覺不再往上收。
   .intro 的 margin-top:-18px 原本是要收緊與步驟標籤的距離，中間插進待辦表
   之後那個負邊界會把圖往上拉、蓋住「回到送出」（2026-08-26 站主截圖回報）。
   由 e2e_submit_errors.py 用命中測試守著 —— 只看中心點抓不到，
   被吃掉的是按鈕下緣。 */
#submit-errors:not([hidden]) ~ .step .intro{margin-top:0}
.err-box[hidden]{display:none}
.err-box b{display:block;margin-bottom:6px}
.err-box ul{margin:0;padding-left:18px}
.err-box li{padding:2px 0}
.err-box a{color:var(--danger)}
/* 修好的項目劃掉。客戶要看得出還剩幾項、什麼時候可以按送出。 */
.err-box li.done{color:#4f8b2b;text-decoration:line-through;opacity:.75}
.err-box li.done a{color:#4f8b2b}
.err-box li.done::marker{content:'✓ '}
/* 一鍵回到最後一步。刻意不做浮動列 —— 見本檔開頭 .bottom_navi_bar 的說明。 */
#btn-to-submit{width:100%;margin-top:10px}
#btn-to-submit[hidden]{display:none}

/* 時間欄位：外框由容器畫，原生元件絕對定位鋪滿並設為透明。

   為什麼不直接對 input 設 width:100% —— iOS Safari 的 <input type="time">
   有依語系文字算出的**內建最小寬度**，即使 box-sizing:border-box 也不會
   縮到比它小，會撐破容器（2026-08-26 實機回報：欄位超出右邊）。
   絕對定位 + top/right/bottom/left:0 才是唯一能強制尺寸的方式。

   顯示的字由我們畫（原生元件的格式由裝置語系決定，控制不了：
   iOS 把 21:30 顯示成「下午 09:30」，數字和早上的 09:30 一模一樣）。
   點擊仍然開啟原生時間選擇器 —— 精確到分鐘的能力與送出的值都不變。

   .on 由 JS 加上：JS 沒跑起來時維持原生外觀，不會變成看不見的欄位。 */
.timewrap{position:relative}

/* **這一層只給沒有 hover 能力的裝置（手機、平板）。**
   2026-08-27 站主在桌面 Chrome 回報「沒辦法選時間」。原因是把原生元件
   透明化：它的分段編輯器與右邊開啟選擇器的時鐘圖示其實都還在、也都還
   能用，**只是看不見**。使用者點下去落在一個看不見的分段上，得不到任何
   回饋，也找不到時鐘圖示。

   手機沒事，是因為點一下會跳出全螢幕的系統選擇器 —— 那個回饋很明確。
   桌面沒有這種東西。

   而桌面本來就不需要這一層：它要解決的是 iOS 把 21:30 顯示成
   「下午 09:30」（與早上的 09:30 一模一樣），桌面 Chrome 顯示的是
   02:30 PM，沒有那個歧義。

   踩過一次的教訓：端對端腳本全部跑 iPhone 模擬，所以桌面從來沒被測到。
   scripts/e2e_desktop_time.py 現在守著這件事。 */
.timeshow{display:none}

/* 桌面：整格都可以點開選擇器（main.js 呼叫 showPicker），
   所以游標要看起來像可以點的，而不是文字輸入的 I 形游標。 */
@media (hover: hover) {
  .timewrap input[type="time"]{cursor:pointer}
}

@media (hover: none) {
  .timewrap.on{
    border:1px solid #ccd2d8;border-radius:var(--r);background:#fff;
    min-height:46px;padding:12px 13px;
  }
  .timewrap.on:focus-within{
    outline:3px solid rgba(132,189,90,.35);border-color:var(--green);
  }
  .timewrap.on input[type="time"]{
    position:absolute;top:0;right:0;bottom:0;left:0;
    width:100%;height:100%;min-width:0;
    opacity:0;border:0;padding:0;margin:0;background:transparent;
    -webkit-appearance:none;appearance:none;
  }
  .timewrap.on .timeshow{
    display:block;font-size:1rem;line-height:1.5;color:#22303c;
    pointer-events:none;               /* 點擊要穿透到底下的原生元件 */
  }
  .timewrap.on .timeshow.empty{color:#8a97a3}
}


/* 案件編號要好認、好念、好截圖 —— 客戶可能是用電話報給客服的。
   獨立一行（不用 inline-block），否則後面的說明會緊貼著編號，
   客人一眼看不出哪一段才是要報給客服的。 */
.err-box .ref{font-family:monospace;font-size:1.1em;letter-spacing:.08em;
  font-weight:700;margin:8px 0;padding:8px 12px;background:#fff;
  border-radius:6px;width:fit-content}

/* ---- 上傳縮圖 ---- */
.up .thumb:empty{display:none}
.up .thumb{margin-top:9px}
.up .thumb img{display:block;max-width:100%;max-height:190px;border-radius:8px;
  border:1px solid var(--line);background:#fff}

/* ---- 欄位層級的格式錯誤 ---- */
input.t.bad,select.t.bad{border-color:var(--danger);background:var(--danger-bg)}
/* 欄位說明。給「顯示但選填」的檔案欄位講清楚附了的好處 ——
   選填而沒有說明，看起來就是不重要，客戶不會附。 */
/* ---- 步驟層說明 ---- */
/* 「聯絡人不是保證人」那段。站主要求要顯眼。

   用綠色而不是紅色或警告色：這是**安心的訊息**，不是錯誤也不是警告。
   .err-box 是紅底 + role="alert"，拿來放這段會讓客戶以為自己填錯了。

   左邊 4px 實邊 + 淺底色，是本檔既有的強調語彙（見 .err-box 的紅色版本），
   客戶不必學新的視覺規則。 */
.notice{display:flex;gap:10px;align-items:flex-start;
  background:#f2f8ec;border:1px solid #d3e7c2;border-left:4px solid var(--green);
  border-radius:var(--r);padding:13px 14px;margin:0 0 18px}
.notice-icon{flex:0 0 20px;width:20px;height:20px;margin-top:1px;color:#5a8f33}
/* min-width:0 讓 flex 子項可以收縮 —— 少了它長字串會把版面撐出橫向捲動。 */
.notice-text{min-width:0}
.notice-title{margin:0 0 4px;font-weight:700;font-size:.95rem;color:#3d6b21}
.notice-body{margin:0;font-size:.85rem;line-height:1.75;color:#4a5a3c}

.hint{font-size:.8rem;color:var(--muted);line-height:1.7;margin:7px 0 0}
.up .hint{margin-top:9px}
.fielderr:empty{display:none}
.fielderr{font-size:.78rem;color:var(--danger);margin-top:5px}

/* ---- 勾選數下限的即時計數（老車貸的財力證明）---- */
/* 沒達標時用警示色而不是錯誤紅：客戶還在填，這不是他犯的錯。
   達標之後轉綠 —— 「可以往下走了」要有明確的訊號，
   否則謹慎的客戶會多勾用不到的項目，每一項都是一個必上傳的檔案。 */
.mck{font-size:.82rem;line-height:1.7;margin:8px 0 2px;padding:9px 11px;
     border-radius:var(--r);border:1px solid transparent}
.mck.short{color:var(--warn);background:#fdf6e7;border-color:#f0dcae}
.mck.ok{color:#4a7c2f;background:#f0f7ea;border-color:#cfe3bd}
.mck a{color:inherit;text-decoration:underline;font-weight:600}

/* ---- 第一步引導（主視覺 + 請先備妥）---- */
/* 左右負邊界讓圖片貼齊卡片邊緣（卡片左右 padding 是 16px）；
   上方負邊界收緊與步驟標籤之間的距離。 */
.intro{margin:-18px -16px 8px}
.intro img{display:block;width:100%;height:auto;border-radius:14px 14px 0 0}
.intro-body{padding:16px 16px 0}
.intro-title{font-size:1.22rem;color:var(--purple);font-weight:700;margin:0 0 10px;
  letter-spacing:.5px}

/* 重點條件。亮綠 #84BD5A 配白底只有約 2.3:1，當文字用不符 WCAG AA，
   所以底色用淡綠、文字用較深的綠（約 4.6:1），與上傳完成狀態同一組配色。 */
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 16px;padding:0}
.chip{background:#f4faf0;border:1px solid var(--green);color:#4f8b2b;
  border-radius:var(--pill);padding:4px 12px;font-size:.8rem;font-weight:500}

.prepare{border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 var(--r) var(--r) 0;background:#fafbfc;padding:12px 14px 14px}
.prepare-title{display:flex;align-items:center;gap:6px;font-size:.92rem;
  color:var(--purple);font-weight:700;margin:0 0 8px}
.prepare-title svg{width:17px;height:17px;flex:none}
.prepare-list{margin:0;padding-left:22px;font-size:.86rem;line-height:1.9}
/* 站台 CSS 有一條 `li{list-style:outside none none}`，它比設在 ol／ul 上的
   規則更具體，會把編號與項目符號清掉。**必須同樣針對 li 才蓋得過去。**
   這一頁每一個清單都要各自宣告一次 —— 漏了就是沒有標記，而且不會有
   任何錯誤（2026-08-26：加分條件與延伸閱讀就是這樣漏掉的）。 */
.prepare-list li{list-style:decimal outside}

/* 備妥清單下方的注意事項。用短句，語氣比清單本身弱。 */
.intro-notes{margin:9px 0 0;padding:0;list-style:none;
  font-size:.8rem;line-height:1.8;color:var(--muted)}
/* 點點用 ::before 而不是 list-style，因為要單獨上綠色。
   但 inline 的 ::before 會佔掉**第一行**的位置，換行之後的字就退回 li 的
   左緣 —— 比第一行的文字還左 6px（2026-08-27 站主截圖回報：「產」「考」
   跟點點在同一個 X 座標）。
   絕對定位掛進 padding 區，行為就與原生的 list marker 一致
   （.prepare-list 用 decimal 所以本來就沒這個問題）。
   刻意不寫 top：省略時偽元素留在靜態位置，也就是第一行，垂直對齊自然。 */
.intro-notes li{position:relative;padding-left:1em}
.intro-notes li::before{content:'·';color:var(--green);
  position:absolute;left:0}

/* 可展開面板（月付款表、加分條件）。 */
.panel{border:1px solid var(--line);border-radius:var(--r);margin-top:9px;
  background:#fff}
.panel>summary{padding:11px 13px;font-size:.86rem;font-weight:600;
  color:var(--purple);cursor:pointer;list-style:none;min-height:44px;
  display:flex;align-items:center;gap:6px}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::before{content:'▸';font-size:.9rem;transition:transform .15s}
.panel[open]>summary::before{transform:rotate(90deg)}

/* 表格自己捲，頁面不捲。9 列 × 4 欄直接放進 390px 會撐破版面。 */
.panel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 13px 13px}
.panel-table{border-collapse:collapse;font-size:.8rem;white-space:nowrap}
.panel-caption{margin:0 13px 6px;font-size:.82rem;font-weight:600;color:#333}
.panel-scroll + .panel-caption{margin-top:12px}
.panel-table th,.panel-table td{border:1px solid var(--line);
  padding:6px 10px;text-align:right}
.panel-table th{background:#f7f8fa;color:var(--muted);font-weight:600}
.panel-table th:first-child,.panel-table td:first-child{text-align:left}

.panel-lead{margin:0 13px 6px;font-size:.82rem;color:#333}
.panel-list{margin:0;padding:0 13px 13px 32px;font-size:.82rem;line-height:1.9}
/* 編號要設在 li 上，見上面 .prepare-list 的說明。
   用數字而不是點：說明文字寫「以下至少一項」，業務跟客戶對的時候
   講「第 3 項」比講「不動產那條」快。 */
.panel-list li{list-style:decimal outside}

/* 延伸閱讀：轉換頁上的離開出口，所以刻意做得安靜。 */
.intro-reads{margin-top:14px}
.reads-title{font-size:.86rem;color:#333;font-weight:600;margin:0 0 6px}
.intro-reads ul{margin:0;padding-left:18px;font-size:.82rem;line-height:1.9}
.intro-reads li{list-style:disc outside}
.intro-reads a{color:var(--purple)}
.prepare-list li::marker{color:var(--purple);font-weight:700}
.prepare-note{font-size:.78rem;color:var(--muted);line-height:1.7;margin:10px 0 0}
.prepare-note a{color:var(--purple)}

@media (min-width:768px){
  .intro img{max-height:280px;object-fit:cover}
}

/* ---- repeat 可重複區塊（貸款評估：名下貸款、方便聯絡時間） ---- */
.rpt { display: flex; flex-direction: column; gap: 12px; }
.rpt-empty { margin: 0; color: #667; font-size: 14px; }
.rpt-rows { display: flex; flex-direction: column; gap: 12px; }
.rpt-row {
  border: 1px solid rgba(50, 33, 83, .18); border-radius: 12px;
  padding: 12px 14px; background: #fafaff;
  display: flex; flex-direction: column; gap: 10px;
}
.rpt-row-head { display: flex; justify-content: space-between; align-items: center; }
.rpt-row-title { font-weight: 700; color: #322153; }
.rpt-del {
  background: none; border: none; color: #a33; cursor: pointer;
  font-size: 14px; padding: 8px 10px;      /* 觸控目標要夠大 */
}
.rpt-add {
  align-self: flex-start; background: #fff; cursor: pointer;
  border: 1.5px dashed #84BD5A; color: #35682d;
  border-radius: 12px; padding: 12px 18px; font-weight: 700;
}
.rpt-sum {
  margin: 0; font-weight: 800; color: #322153;
  background: rgba(132, 189, 90, .15); border-radius: 10px; padding: 10px 12px;
}
/* 生日欄位的「滿 X 歲」 */
.agehint { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #35682d; }

/* ---------- 貸款委任契約的條文 ----------
   模板是 templates/loanapp/contract_body.html，**頁面與 PDF 共用**。
   PDF 那一側的樣式寫在 contract_pdf.html 的 <style> 裡（A4、浮水印、
   嵌入字型），那些在網頁上都用不到；這裡只管網頁上的呈現。

   為什麼需要這一塊：不寫的話條文吃站上預設的 h1/p 樣式 ——
   「貸 款 委 任 契 約 書」在手機上會大到換行兩排，而「第一條」
   與條文黏成一句（2026-08-31 截圖看到的）。 */
.contract-body { margin: 14px 0 20px; font-size: 15px; line-height: 1.85; color: #333; }
/* 上面的引導區已經有標題了，這裡不重複。PDF 那份仍然需要它。 */
.contract-body .c-title { display: none; }
.contract-body p { margin: 0 0 12px; text-align: justify; }
/* 條號要看得出來是條號 */
.contract-body .c-no { font-weight: 800; color: #322153; margin-right: 6px; }
/* 第五條的四款。
   **原文沒有編號**（JotForm 原始碼與實際簽過的 PDF 都是純文字換行），
   所以不加「一、二、三、四」。圓點是站主 2026-08-31 要的，理由是
   可讀性 —— 用 ::before 而不是寫進條文模板，那樣圓點會變成條文的字，
   逐字比對會紅。**排版可以改，字不能改。** */
.contract-body .c-item { margin-left: 16px; padding-left: 1.1em;
                         position: relative; }
.contract-body .c-item::before { content: "•"; position: absolute; left: 0; }
/* 代入值（甲方、費率、起始日）要跟條文分得開 —— 客戶要核對的就是這幾個 */
.contract-body .c-fill {
  border-bottom: 1px solid #999; padding: 0 6px; font-weight: 800; color: #322153;
}

/* ---------- 純簽約頁（PAGE['bare_chrome']）----------
   目前只有貸款委任契約用。這一頁沒有站台外框（logo、選單、導覽列
   全關掉，站主 2026-08-31 裁定維持舊 JotForm 頁的現況），
   所以版面得自己撐起「這是一份文件」的樣子，而不是一張申請表。

   全部收在 .bare 底下 —— 其餘 12 張一個像素都不會動。 */

/* 文件比表單需要更多寬度：條文是長段落，560px 在平板上每行只有
   二十幾個字，讀十條會很累。 */
.apply-wrap.bare{max-width:660px;padding-top:26px}

/* 卡片做成紙的樣子：白底、細框、上緣一條主色。
   進度條在單步時只有一段，正好就是那條主色橫規。 */
.apply-wrap.bare .card{border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.apply-wrap.bare .steps{gap:0;margin-bottom:10px}
.apply-wrap.bare .steps button{padding:0;cursor:default}
.apply-wrap.bare .steps button::before{height:4px;border-radius:0}

/* 單步時「步驟 1／1」沒有意義，只留下自動存檔的狀態。
   min-height:0 是必要的：那一列變空之後仍佔著高度，
   主色橫規與標題之間會空出一大塊（2026-08-31 截圖看到的）。 */
.apply-wrap.bare .steplabel b{display:none}
.apply-wrap.bare .steplabel{justify-content:flex-end;min-height:0;margin:0}
.apply-wrap.bare .intro-body{padding-top:6px}

/* 標題當成文件的抬頭：置中、字距拉開、下面一條細線。
   （條文模板自己的 .c-title 仍然隱藏 —— 兩個標題是先前最醜的地方。） */
.apply-wrap.bare .intro{margin-bottom:0}
.apply-wrap.bare .intro-title{
  text-align:center;font-size:1.5rem;letter-spacing:.28em;
  text-indent:.28em;               /* 補回最後一個字多出來的字距 */
  margin:10px 0 14px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.apply-wrap.bare .chips{justify-content:center;margin-bottom:14px}

/* 條文區：留白比表單大，讀起來像文件不像說明文字。 */
.apply-wrap.bare .contract-body{
  margin:16px 0 26px;padding:20px 18px 6px;
  border:1px solid var(--line);border-radius:4px;background:#fcfcfd;
}
.apply-wrap.bare .contract-body p{margin-bottom:14px}

/* 「簽署委任契約」在這裡的角色是「以下由立委任人填寫」的分隔，
   所以做成一條有字的橫規，而不是一個標題。 */
.apply-wrap.bare .step > .q{
  margin-top:30px;padding-top:18px;border-top:2px solid var(--purple);
  font-size:1.05rem;letter-spacing:.06em;
}

@media (min-width:640px){
  .apply-wrap.bare .contract-body{padding:26px 26px 10px}
}

/* 契約 PDF 的下載鍵在背景產完之前不能按（apply/contract_done.js）。
   沒有 href 的 <a> 本來就不能點，這裡只是讓它看起來也像不能點 ——
   不然客戶會一直戳它。 */
.btn.waiting { opacity: .55; cursor: default; }