/* 格爾空間設計 — 工程請款單
   設計原則：工地現場單手可填。大字級、大點擊區、少打字、自動試算。 */

:root{
  --paper:#f6f4f0;
  --card:#ffffff;
  --ink:#1a1815;
  --ink-2:#4c4741;
  --ink-3:#8b847a;
  --line:#e4dfd6;
  --line-2:#d6cfc2;
  --brass:#b07d3a;
  --brass-soft:#f6efe3;
  --green:#3f6b4f;
  --red:#b3402e;
  --red-soft:#fbeeeb;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(26,24,21,.05), 0 8px 24px -12px rgba(26,24,21,.18);
  --tap:56px;
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(880px,100%);margin-inline:auto;padding-inline:16px}

/* ---------- 頁首 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(246,244,240,.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.brand{display:flex;align-items:center;min-width:0}
.brand__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand__text b{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.06em}
.brand__text small{font-size:9px;letter-spacing:.14em;color:var(--ink-3)}
.topbar__doc{
  margin:0;flex:none;font-size:12px;letter-spacing:.16em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:99px;padding:4px 12px;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:22px 18px;
  margin-top:16px;
}
.card--head{margin-top:22px;padding-top:26px}
.head__title h1{
  font-family:var(--serif);font-weight:600;
  font-size:30px;line-height:1.25;margin:0 0 8px;letter-spacing:.02em;
}
.head__title p{margin:0 0 22px;color:var(--ink-2);font-size:15px}

.sec{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:600;margin:0 0 18px;letter-spacing:.02em;
}
.sec__no{
  flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--brass-soft);color:var(--brass);
  font-size:13px;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}

/* ---------- 欄位 ---------- */
.grid{display:grid;gap:16px}
.field{display:block;margin-bottom:16px}
.field:last-child{margin-bottom:0}
.grid .field{margin-bottom:0}
.field__label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:7px;
}
.req{color:var(--brass);font-style:normal;font-size:13px}
.hint{font-weight:400;font-size:12px;color:var(--ink-3)}

input[type=text],input[type=tel],input[type=date],textarea{
  width:100%;
  min-height:var(--tap);
  padding:12px 14px;
  font:inherit;font-size:17px;
  color:var(--ink);
  background:#fdfcfa;
  border:1.5px solid var(--line-2);
  border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:auto;line-height:1.6;resize:vertical}
input::placeholder,textarea::placeholder{color:#b6ada0}
input:focus,textarea:focus{
  outline:none;background:#fff;
  border-color:var(--brass);
  box-shadow:0 0 0 4px rgba(176,125,58,.13);
}
input[type=date]{min-height:var(--tap)}

.split{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}

/* 金額 */
.money__box{
  display:flex;align-items:center;gap:10px;
  min-height:var(--tap);
  padding:6px 14px;
  background:#fdfcfa;
  border:1.5px solid var(--line-2);
  border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.money__box em{
  font-style:normal;font-size:13px;font-weight:700;color:var(--ink-3);
  letter-spacing:.04em;flex:none;
}
.money__box input,.money__box output{
  flex:1;min-width:0;width:100%;
  border:0;background:none;padding:0;min-height:auto;
  font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:right;letter-spacing:.01em;
}
.money__box input:focus{box-shadow:none}
.money__box:focus-within{
  border-color:var(--brass);background:#fff;
  box-shadow:0 0 0 4px rgba(176,125,58,.13);
}
.money--accent .money__box{border-color:var(--brass);background:var(--brass-soft)}
.money--accent .money__box input{color:#7d5620}
.money--calc .money__box{background:#f4f2ee;border-style:dashed;border-color:var(--line-2)}
.money--calc output{color:var(--ink-2);display:block}
.money--calc.is-neg output{color:var(--red)}

.alert{
  margin:14px 0 0;padding:11px 14px;border-radius:12px;
  font-size:14px;line-height:1.5;
  background:var(--red-soft);color:var(--red);
  border:1px solid #f0cfc8;
}

/* ---------- 選項 chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  min-height:50px;padding:10px 16px 10px 13px;
  border:1.5px solid var(--line-2);border-radius:99px;
  background:#fdfcfa;cursor:pointer;
  font-size:16px;font-weight:500;color:var(--ink-2);
  transition:all .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.chip input{
  flex:none;width:21px;height:21px;margin:0;
  accent-color:var(--brass);cursor:pointer;
}
.chip:has(input:checked){
  border-color:var(--brass);background:var(--brass-soft);
  color:#6f4c1c;font-weight:600;
}
.chip:has(input:focus-visible){box-shadow:0 0 0 4px rgba(176,125,58,.18)}
.chip:active{transform:scale(.98)}
.chip--wide{
  display:flex;width:100%;border-radius:var(--radius);
  margin-bottom:16px;padding:12px 16px;
}
.other{margin-top:11px}

/* ---------- 比例 ---------- */
.ratio__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ratio__input{
  display:flex;align-items:center;gap:4px;flex:none;
  border:1.5px solid var(--line-2);border-radius:var(--radius);
  background:#fdfcfa;padding:6px 14px;min-height:var(--tap);width:132px;
}
.ratio__input:focus-within{border-color:var(--brass);background:#fff;box-shadow:0 0 0 4px rgba(176,125,58,.13)}
.ratio__input input{
  border:0;background:none;padding:0;min-height:auto;text-align:right;
  font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;
}
.ratio__input input:focus{box-shadow:none}
.ratio__input em{font-style:normal;font-size:15px;color:var(--ink-3);font-weight:600}
.bar{
  flex:1;min-width:160px;height:12px;border-radius:99px;
  background:#eceae5;overflow:hidden;display:flex;
}
.bar span{background:#cfc6b6;height:100%;transition:width .25s ease}
.bar i{background:var(--brass);height:100%;transition:width .25s ease}
.ratio__legend{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:10px 0 0;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.ratio__legend span{color:var(--ink-2);font-weight:600;margin-right:10px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot--paid{background:#cfc6b6}
.dot--now{background:var(--brass)}

/* ---------- 簽核 ---------- */
.signs{display:grid;gap:14px}
.sign__role{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.sign__pad{
  position:relative;height:150px;
  border:1.5px dashed var(--line-2);border-radius:var(--radius);
  background:#fdfcfa;overflow:hidden;touch-action:none;
}
.sign__pad canvas{display:block;width:100%;height:100%}
.sign__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#b6ada0;font-size:15px;pointer-events:none;
}
.sign__pad.is-signed{border-style:solid;border-color:var(--line-2);background:#fff}
.sign__pad.is-signed .sign__ph{display:none}
.sign__clear{
  position:absolute;right:8px;bottom:8px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.94);
  border-radius:9px;padding:7px 13px;font:inherit;font-size:13px;
  color:var(--ink-2);cursor:pointer;
}
.sign__clear:active{background:#f2efe9}
.sign--blank .sign__line{
  height:78px;border:1.5px dashed var(--line);border-radius:var(--radius);
  background:repeating-linear-gradient(-45deg,transparent 0 8px,#faf8f5 8px 16px);
}
.signs__note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}

/* ---------- 頁尾 ---------- */
.foot{padding:28px 4px 8px;text-align:center;color:var(--ink-3);font-size:13px}
.foot p{margin:0 0 4px}
.foot__save{font-size:12px}
.linkbtn{
  margin-top:14px;border:0;background:none;font:inherit;font-size:13px;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;
}

/* ---------- 底部操作列 ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar__inner{display:flex;align-items:center;gap:10px;padding-block:11px}
.actionbar__sum{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0}
.actionbar__sum small{font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.actionbar__sum strong{
  font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.btn{
  flex:none;min-height:50px;padding:0 18px;border-radius:13px;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;transition:transform .1s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--ink);color:#fff}
.btn--ghost{background:#fff;border-color:var(--line-2);color:var(--ink-2)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-size:15px;
  padding:12px 20px;border-radius:99px;z-index:40;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  max-width:calc(100% - 32px);text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.printhead{display:none}

/* ---------- 窄螢幕：金額獨立一行，按鈕等寬好按 ---------- */
@media (max-width:479px){
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
  .actionbar__inner{flex-wrap:wrap;gap:8px;padding-block:10px}
  .actionbar__sum{
    width:100%;flex-direction:row;align-items:baseline;gap:8px;margin:0 0 2px;
  }
  .actionbar__sum small{flex:none}
  .btn{flex:1;padding:0 10px}
  .toast{bottom:calc(140px + env(safe-area-inset-bottom))}
}

/* ---------- 平板以上 ---------- */
@media (min-width:640px){
  .wrap{padding-inline:24px}
  .card{padding:28px 26px}
  .grid--2{grid-template-columns:1fr 1fr;gap:18px}
  .field--full{grid-column:1/-1}
  .head__title h1{font-size:36px}
  .signs{grid-template-columns:repeat(3,1fr);gap:16px}
  .sign__pad{height:130px}
  .sign--blank .sign__line{height:130px}
  .actionbar__inner{padding-block:13px}
  .topbar__inner{height:66px}
}
@media (min-width:900px){
  .card{padding:32px 30px}
}

/* ---------- 列印／PDF ---------- */
@media print{
  @page{size:A4;margin:12mm 12mm 10mm}
  html,body{background:#fff}
  body{font-size:10.5pt;line-height:1.45;padding:0;color:#000}
  .wrap{width:100%;padding:0;max-width:none}
  .topbar,.actionbar,.toast,.foot,.sign__clear,.sign__ph,.hint,.req{display:none !important}
  .head__title p{display:none}

  .printhead{
    display:flex;align-items:flex-end;justify-content:space-between;
    border-bottom:2px solid #000;padding-bottom:6pt;margin-bottom:10pt;
  }
  .printhead__brand b{font-size:14pt;font-family:var(--serif);letter-spacing:.04em}
  .printhead__brand small{display:block;font-size:6.5pt;letter-spacing:.18em;color:#666}
  .printhead__title{font-size:15pt;font-weight:700;letter-spacing:.12em}

  .card{
    border:none;box-shadow:none;border-radius:0;padding:0;margin:0 0 7pt;
    break-inside:avoid;
  }
  .card--head{margin-top:0}
  .head__title h1{display:none}
  .sec{
    font-size:10.5pt;margin:0 0 5pt;gap:5pt;
    border-bottom:1px solid #000;padding-bottom:3pt;
  }
  .sec__no{
    width:14pt;height:14pt;border-radius:3pt;font-size:8pt;
    background:#000;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .grid{gap:4pt 14pt}
  .grid--2{grid-template-columns:1fr 1fr}
  .field{margin-bottom:5pt}
  .field__label{font-size:8.5pt;margin-bottom:1pt;color:#000;font-weight:700}

  input[type=text],input[type=tel],input[type=date],textarea{
    min-height:0;padding:1pt 0 2pt;font-size:10.5pt;
    border:0;border-bottom:.6pt solid #999;border-radius:0;background:none;
  }
  textarea{border:.6pt solid #999;padding:3pt 5pt;height:30pt;min-height:0;overflow:hidden}
  input[type=date]::-webkit-calendar-picker-indicator{display:none}
  input::placeholder,textarea::placeholder{color:transparent !important;opacity:0 !important}
  .split{gap:8pt}

  .money__box{min-height:0;padding:1pt 0 2pt;border:0;border-bottom:.6pt solid #999;border-radius:0;background:none;gap:5pt}
  .money__box input,.money__box output{font-size:11.5pt;font-weight:700}
  .money--accent .money__box{border-bottom-width:1.4pt;border-bottom-color:#000}
  .money--accent .money__box input{color:#000}
  .money--calc .money__box{background:none;border-bottom-style:solid}

  .chips{gap:3pt 10pt}
  .chip{
    min-height:0;padding:0;border:0;background:none !important;border-radius:0;
    font-size:10pt;color:#000 !important;font-weight:400 !important;gap:3pt;
  }
  .chip input{width:9pt;height:9pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chip:has(input:checked){font-weight:700 !important}
  .chip--wide{width:auto;margin-bottom:5pt}
  .other{border-bottom:.6pt solid #999 !important}

  .ratio__row{gap:10pt}
  .ratio__input{min-height:0;width:auto;padding:1pt 0;border:0;border-bottom:.6pt solid #999;border-radius:0;background:none}
  .ratio__input input{font-size:11.5pt;width:44pt}
  .bar{display:none}
  .ratio__legend{display:none}
  .alert{display:none}

  .signs{grid-template-columns:repeat(3,1fr);gap:10pt;margin-top:2pt}
  .sign__role{font-size:8.5pt;margin-bottom:2pt}
  .sign__pad,.sign--blank .sign__line{
    height:52pt;border:.6pt solid #999;border-radius:2pt;background:none !important;
  }
  .sign__pad{border-style:solid}
  .signs__note{font-size:7.5pt;color:#666;margin-top:4pt}
}