/* ===== 設計代號 ===== */
:root{
  --paper:#F1F4F2; --surface:#FFFFFF; --surface-2:#F7F9F8;
  --ink:#14201C; --ink-2:#5B6C66; --ink-3:#849690;
  --line:#DBE3DF; --line-2:#EAEFEC;
  --accent:#0E6B58; --accent-ink:#0A4F41; --accent-soft:#E0EEE9;
  --warn:#AC5220; --warn-soft:#F6E8DF;
  --cho:#0E6B58; --pro:#B56A2B; --fat:#5C74AC;
  --shadow:0 1px 2px rgba(20,32,28,.05), 0 8px 24px -12px rgba(20,32,28,.18);
  --measure:64ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1412; --surface:#151F1C; --surface-2:#1B2724;
    --ink:#E6EDEA; --ink-2:#9CAEA8; --ink-3:#74847F;
    --line:#26332F; --line-2:#1F2B27;
    --accent:#4FC0A3; --accent-ink:#8ADCC4; --accent-soft:#15302A;
    --warn:#E28F5C; --warn-soft:#2E2016;
    --cho:#4FC0A3; --pro:#E0A466; --fat:#93A6DA;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1412; --surface:#151F1C; --surface-2:#1B2724;
  --ink:#E6EDEA; --ink-2:#9CAEA8; --ink-3:#74847F;
  --line:#26332F; --line-2:#1F2B27;
  --accent:#4FC0A3; --accent-ink:#8ADCC4; --accent-soft:#15302A;
  --warn:#E28F5C; --warn-soft:#2E2016;
  --cho:#4FC0A3; --pro:#E0A466; --fat:#93A6DA;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:15.5px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
.narrow{max-width:var(--measure)}

/* ===== 導覽列 ===== */
.nav{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20}
.nav-in{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:13px}
.brand{display:flex; align-items:baseline; gap:9px; font-family:"Noto Serif TC",serif; font-weight:700;
  font-size:17px; color:var(--ink); text-decoration:none; margin-right:auto; letter-spacing:.01em}
.brand small{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.nav-links{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.nav-links a{font-size:14px; color:var(--ink-2); text-decoration:none; padding:6px 11px; border-radius:7px}
.nav-links a:hover{background:var(--surface-2); color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--accent-ink); background:var(--accent-soft); font-weight:500}

/* ===== 按鈕 ===== */
.btn{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; padding:10px 18px;
  border-radius:9px; text-decoration:none; border:1px solid transparent; cursor:pointer; font:inherit;
  font-size:14.5px; line-height:1.4; transition:opacity .15s, background .15s}
.btn-solid{background:var(--accent); color:#fff; font-weight:500}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-solid{color:#08130F} }
:root[data-theme="dark"] .btn-solid{color:#08130F}
.btn-solid:hover{opacity:.88}
.btn-line{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-line:hover{background:var(--surface-2)}
.btn-sm{padding:7px 13px; font-size:13.5px}

/* ===== 版面 ===== */
.hero{padding-block:64px 52px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px}
h1{font-family:"Noto Serif TC",serif; font-weight:700; font-size:clamp(30px,5.4vw,46px);
  line-height:1.26; margin:0 0 16px; text-wrap:balance; letter-spacing:.01em}
h2{font-family:"Noto Serif TC",serif; font-weight:700; font-size:clamp(21px,3.2vw,27px);
  line-height:1.35; margin:0 0 14px; text-wrap:balance}
h3{font-family:"Noto Serif TC",serif; font-weight:600; font-size:17.5px; margin:0 0 9px}
.lede{font-size:17px; color:var(--ink-2); margin:0; max-width:var(--measure)}
p{margin:0 0 16px; max-width:var(--measure)}
section.band{padding-block:56px; border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:0}
.sec-head{margin-bottom:30px}
.sec-head p{color:var(--ink-2); margin:0}

.grid-2{display:grid; gap:20px}
@media(min-width:760px){ .grid-2{grid-template-columns:1fr 1fr; gap:22px} }
.grid-3{display:grid; gap:18px}
@media(min-width:820px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:24px 24px 26px; box-shadow:var(--shadow)}
.card p:last-child{margin-bottom:0}
.card .tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:10px}

/* 工具入口 */
.tool-cta{display:grid; gap:24px; align-items:center}
@media(min-width:860px){ .tool-cta{grid-template-columns:1.15fr .85fr; gap:36px} }
.tool-preview{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px 20px}
.tool-preview .row{display:grid; grid-template-columns:5.4em 1fr 2.9em; align-items:center; gap:11px;
  font-size:13px; color:var(--ink-2); margin-bottom:9px}
.tool-preview .row:last-child{margin-bottom:0}
.tool-preview .bar{height:8px; background:var(--line-2); border-radius:4px; overflow:hidden}
.tool-preview .bar i{display:block; height:100%; background:var(--accent); opacity:.85; border-radius:4px}
.tool-preview .v{font-family:"IBM Plex Mono",monospace; text-align:right; color:var(--ink); font-size:13.5px}
.tool-preview .cap{font-size:11.5px; color:var(--ink-3); margin:14px 0 0}

/* 條列 */
ul.plain{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; max-width:var(--measure)}
ul.plain li{display:grid; grid-template-columns:15px 1fr; gap:9px; color:var(--ink-2)}
ul.plain li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:11px; margin-left:5px}
ol.steps{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:var(--measure)}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:13px; color:var(--ink-2)}
ol.steps li::before{content:counter(s); font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--accent-ink); background:var(--accent-soft); width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; margin-top:3px}
ol.steps li b{color:var(--ink); font-weight:500}

dl.qa{margin:0; max-width:var(--measure)}
dl.qa dt{font-weight:500; color:var(--ink); margin-top:22px}
dl.qa dt:first-child{margin-top:0}
dl.qa dd{margin:6px 0 0; color:var(--ink-2)}

/* 待填標記 */
.todo{background:var(--warn-soft); color:var(--warn); border:1px dashed currentColor;
  border-radius:5px; padding:1px 7px; font-size:.93em; white-space:nowrap}

/* 聯絡 */
.contact-grid{display:grid; gap:18px}
@media(min-width:860px){ .contact-grid{grid-template-columns:1fr 1.25fr; gap:28px; align-items:start} }
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field label{font-size:13px; color:var(--ink-2); font-weight:500}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:15px}
.field textarea{min-height:104px; resize:vertical; line-height:1.7}
.form-note{font-size:11.5px; color:var(--ink-3); margin:10px 0 0; max-width:none}

/* 頁尾 */
footer.site{background:var(--surface); border-top:1px solid var(--line); padding-block:34px 40px}
footer.site .cols{display:grid; gap:22px; margin-bottom:24px}
@media(min-width:760px){ footer.site .cols{grid-template-columns:1.4fr 1fr 1fr} }
footer.site h4{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; font-weight:500}
footer.site a{display:block; font-size:13.5px; color:var(--ink-2); text-decoration:none; margin-bottom:6px}
footer.site a:hover{color:var(--accent-ink)}
.legal{font-size:12px; color:var(--ink-3); line-height:1.85; border-top:1px solid var(--line-2);
  padding-top:20px; max-width:78ch}
.legal strong{color:var(--ink-2); font-weight:500}