/* 設計語彙取自公務用工具箱（gongwu-calc），字型只寫字族名、不載 webfont（零對外連線）。 */
:root{
  --ink:#1d2a30; --ink-soft:#566870; --ink-faint:#8b969b;
  --paper:#f3f1e9; --surface:#ffffff; --surface-2:#faf8f2;
  --line:#dcd7cb; --line-soft:#e9e5db;
  --seal:#9d2b25; --seal-deep:#7f2019; --seal-wash:#f6ebe8;
  --ok:#2c6e49; --ok-wash:#eef3ec; --ok-line:#cdddc6;
  --warn:#8a5a00; --warn-wash:#fbf3e2;
  --serif:"Noto Serif TC",serif;
  --sans:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --r:10px; --pad:16px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; overflow-wrap:anywhere;}
a{color:inherit;}
[hidden]{display:none !important;}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{position:absolute; left:-9999px; top:0; background:var(--seal); color:#fff; padding:8px 12px; z-index:50;}
.skip:focus{left:8px; top:8px;}
.wrap{max-width:760px; margin:0 auto; padding:0 var(--pad) 64px;}

.topbar{position:sticky; top:0; z-index:20; background:rgba(243,241,233,.94); border-bottom:1px solid var(--line-soft);}
.topbar .row{max-width:760px; margin:0 auto; padding:10px var(--pad); display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap;}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; min-height:32px;}
.brand .mark{font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:.02em;}
.brand .en{font-size:11px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase;}
.seal-dot{width:9px; height:9px; border-radius:2px; background:var(--seal); flex:none; transform:translateY(-1px);}
.back{font-size:14px; color:var(--seal-deep); text-decoration:none; font-weight:500; padding:8px 4px; min-height:44px; display:inline-flex; align-items:center;}
.back:hover{text-decoration:underline;}

header.page{margin:24px 0 14px;}
.eyebrow{font-size:12.5px; letter-spacing:.2em; color:var(--seal); font-weight:700; margin:0 0 8px;}
h1{font-family:var(--serif); font-weight:700; font-size:clamp(26px,6.4vw,33px); line-height:1.2; margin:0 0 10px;}
.lede{margin:0; color:var(--ink-soft); font-size:14.5px;}
.privacy{margin:0 0 4px; background:var(--ok-wash); border:1px solid var(--ok-line); color:var(--ok); border-radius:var(--r); padding:10px 14px; font-size:14px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px var(--pad); margin:16px 0;}
.card h2{font-size:15.5px; font-weight:700; margin:0 0 4px; letter-spacing:.03em;}
.card h2:focus{outline:none;}
.hint{font-size:13px; color:var(--ink-soft); margin:0 0 12px; line-height:1.55;}

.drop{border:2px dashed var(--line); border-radius:var(--r); background:var(--surface-2); min-height:120px; padding:20px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;}
.drop .drop-main{font-weight:700; color:var(--seal-deep); font-size:17px;}
.drop .hint{margin:0;}
.drop:hover,.drop.over{border-color:var(--seal); background:var(--seal-wash);}
.drop:focus-within{outline:3px solid var(--seal); outline-offset:2px;}
.drop.busy{opacity:.55; cursor:progress;}

.errbox{display:none; white-space:pre-line; color:var(--seal-deep); background:var(--seal-wash); border:1px solid #e3c3bd; border-radius:var(--r); padding:12px 14px; margin:14px 0; font-size:14.5px;}
.errbox.show{display:block;}
.notebox{display:none; white-space:pre-line; color:var(--warn); background:var(--warn-wash); border:1px solid #ecd9ae; border-radius:var(--r); padding:12px 14px; margin:14px 0; font-size:14.5px;}
.notebox.show{display:block;}
.bad{color:var(--seal-deep); font-size:14px; margin:6px 0;}
.warn{color:var(--warn); font-size:14px; margin:6px 0;}
.ok{color:var(--ok); font-size:14px; margin:6px 0; font-weight:500;}

.prog{position:sticky; top:58px; z-index:15; box-shadow:0 4px 14px rgba(0,0,0,.06);}
.pbar{height:14px; background:var(--line-soft); border-radius:7px; overflow:hidden; margin:10px 0 6px;}
.pfill{height:100%; width:0; background:var(--seal); transition:width .15s;}

.flist,.olist{list-style:none; padding:0; margin:0;}
.frep{border:1px solid var(--line-soft); background:var(--surface-2); border-radius:var(--r); padding:12px 14px; margin:10px 0;}
.frep-head{display:flex; gap:10px; align-items:flex-start; justify-content:space-between;}
.frep h3{font-size:15px; margin:4px 0 6px; word-break:break-all;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:0 0 6px; font-size:14px;}
.kv dt{color:var(--ink-soft);}
.kv dd{margin:0;}
details{margin:6px 0; font-size:14px;}
summary{cursor:pointer; color:var(--seal-deep); min-height:36px; display:list-item; padding:6px 0;}
details ul{margin:4px 0; padding-left:20px;}
.lv-ok{color:var(--ok);} .lv-warn{color:var(--warn);} .lv-bad{color:var(--seal-deep); font-weight:700;}
.perpage .hint{word-break:break-all;}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 14px; border-bottom:1px solid var(--line-soft); padding-bottom:10px;}
[role=tab]{appearance:none; cursor:pointer; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:23px; padding:0 16px; min-height:44px;}
[role=tab][aria-selected=true]{color:var(--seal-deep); background:var(--seal-wash); border-color:var(--seal); font-weight:700;}
[role=tab]:focus-visible{outline:3px solid var(--seal); outline-offset:2px;}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.field label{font-size:13px; color:var(--ink-soft); font-weight:500;}
input[type=text], select{width:100%; font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; min-height:46px;}
input:focus-visible, select:focus-visible, input[type=password]:focus{outline:none; border-color:var(--seal); box-shadow:0 0 0 3px var(--seal-wash);}
input[aria-invalid=true]{border-color:var(--seal); background:var(--seal-wash);}
.inrow{display:flex; gap:8px;}
.inrow input{flex:1; min-width:0;}

fieldset.modes{border:1px solid var(--line-soft); border-radius:var(--r); padding:10px 12px 4px; margin:14px 0;}
legend{font-size:13px; color:var(--ink-soft); padding:0 6px;}
.chk{display:flex; gap:10px; align-items:center; min-height:44px; cursor:pointer; font-size:15px;}
.chk input{width:20px; height:20px; accent-color:var(--seal); flex:none;}
.mode-opt{margin-left:30px;}
.chk .tech{display:block; font-size:12px; color:var(--ink-faint);}
.chk strong{color:var(--ink);}
.advset{border:1px solid var(--line-soft); border-radius:var(--r); padding:2px 12px; margin:10px 0 14px;}

button{font-family:var(--sans);}
.go{appearance:none; cursor:pointer; background:var(--seal); color:#fff; border:0; border-radius:var(--r); font-size:16px; font-weight:700;
  letter-spacing:.06em; min-height:54px; padding:8px 18px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;}
.go small{font-size:12px; font-weight:400; letter-spacing:.02em; opacity:.9;}
.go:hover{background:var(--seal-deep);}
.go.alt{background:#fff; color:var(--seal-deep); border:1px solid var(--seal);}
.go.alt:hover{background:var(--seal-wash);}
.go:focus-visible,.ghost:focus-visible{outline:3px solid var(--ink); outline-offset:2px;}
.go:disabled,.ghost:disabled{opacity:.45; cursor:not-allowed;}
.go.wide{width:100%; margin-top:6px;}
.ghost{appearance:none; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px; font-size:14.5px; min-height:44px; padding:0 14px;}
.ghost:hover{border-color:var(--seal); color:var(--seal-deep);}
.ghost.sm{min-height:40px; min-width:44px; padding:0 10px; font-size:14px; flex:none;}
.btnrow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 12px;}
.btnrow .span2{grid-column:1 / -1;}
.btnrow.sm{grid-template-columns:repeat(4,1fr); gap:6px;}
@media(max-width:420px){ .btnrow.sm{grid-template-columns:1fr 1fr;} }
.btnrow.sticky{position:sticky; bottom:0; background:var(--surface); padding:10px 0 4px; margin-bottom:0;}

.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; max-height:70vh; overflow:auto; padding:4px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface-2);}
.thumb{display:flex; flex-direction:column; gap:4px; background:#fff; border:2px solid var(--line-soft); border-radius:8px; padding:4px; cursor:pointer;}
.thumb.scanned{border-color:#bfc4c6; background:#eef0f0;}
.thumb:has(input:checked){border-color:var(--seal); background:var(--seal-wash);}
.thumb:focus-within{outline:3px solid var(--seal); outline-offset:1px;}
.thumb .ph{display:block; aspect-ratio:1/1.414; background:var(--line-soft); border-radius:4px; font-size:12px; color:var(--ink-faint); text-align:center; padding-top:40%;}
.thumb img{display:block; width:100%; height:auto; border-radius:4px; background:#fff;}
.thumb .cap{display:flex; gap:6px; align-items:center; font-size:13px; min-height:32px;}
.thumb .cap input{width:20px; height:20px; accent-color:var(--seal);}

.mlist{list-style:none; padding:0; margin:0 0 8px;}
.mrow{display:flex; align-items:center; gap:8px; border:1px solid var(--line-soft); background:var(--surface-2); border-radius:8px; padding:6px 8px; margin:6px 0;}
.mrow.dragging{opacity:.5;}
.mrow.disabled .mname{color:var(--ink-faint);}
.grip{cursor:grab; color:var(--ink-faint); user-select:none; padding:0 4px;}
.mname{flex:1; min-width:0; font-size:14.5px; word-break:break-all;}

.olist li{padding:8px 0; border-bottom:1px solid var(--line-soft);}
.dl{color:var(--seal-deep); font-weight:700; word-break:break-all; display:inline-block; min-height:32px; padding:4px 0;}

.foot{margin-top:28px; font-size:12.5px; color:var(--ink-faint); line-height:1.7;}

.lockbox{border:1px solid var(--ok-line); background:var(--ok-wash); border-radius:8px; padding:8px 12px; margin:8px 0; font-size:14px;}
.lockbox p{margin:4px 0;}
.lockline{color:var(--ok); font-size:14px; font-weight:500; margin:6px 0;}
dialog#pw-dialog{border:1px solid var(--line); border-radius:var(--r); padding:18px var(--pad); max-width:min(440px, calc(100vw - 32px)); width:100%; color:var(--ink); background:var(--surface);}
dialog#pw-dialog::backdrop{background:rgba(29,42,48,.45);}
#pw-dialog h2{font-size:17px; margin:0 0 6px;}
.pw-file{font-weight:700; word-break:break-all; margin:0 0 6px;}
input[type=password]{width:100%; font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-height:46px;}