/* ===== 設計 token ===== */
:root{
  --bg:#f5f6f8; --card:#ffffff; --ink:#1b2230; --muted:#5b6472;
  --line:#e6e8ee; --brand:#0e7c66; --brand-ink:#0a5d4c; --accent:#c9962f;
  --chip:#eef2f1; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1116; --card:#161b22; --ink:#e7ebf0; --muted:#9aa4b2;
    --line:#252b34; --brand:#2bb394; --brand-ink:#7fd8c6; --accent:#e3b34d;
    --chip:#1c2230; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-ink)}

/* ===== 頂部列 ===== */
header{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--line); padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.brand .logo{width:30px;height:30px;object-fit:contain;flex:0 0 auto;display:block}
.brand b{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.langs{display:flex; gap:4px; background:var(--chip); padding:3px; border-radius:999px; flex:0 0 auto}
.langs button{
  border:0; background:transparent; color:var(--muted); font-weight:600;
  padding:6px 10px; border-radius:999px; font-size:13px; cursor:pointer; min-height:34px;
}
.langs button[aria-pressed="true"]{background:var(--card); color:var(--brand-ink); box-shadow:var(--shadow)}

/* ===== 版面 ===== */
main{max-width:760px; margin:0 auto; padding:20px 16px 64px}
.hero{padding:8px 2px 18px}
.hero h1{font-size:26px; line-height:1.25; margin:.2em 0 .35em}
.hero p{color:var(--muted); margin:0; font-size:15.5px}

section{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; margin:16px 0; box-shadow:var(--shadow);
}
section > h2{
  font-size:19px; margin:0 0 12px; display:flex; align-items:center; gap:9px; scroll-margin-top:70px;
}
section > h2 .ico{font-size:20px}
h3{font-size:15px; margin:16px 0 6px}
p{margin:.5em 0}

.lead{color:var(--muted); font-size:15px; margin-top:-2px}
.callout{
  background:var(--chip); border-left:3px solid var(--brand); border-radius:10px;
  padding:11px 13px; margin:12px 0; font-size:14.5px;
}
.callout.warn{border-left-color:var(--accent)}

/* 步驟 */
ol.steps{list-style:none; margin:6px 0 0; padding:0; counter-reset:s}
ol.steps li{position:relative; padding:12px 0 12px 46px; border-top:1px solid var(--line)}
ol.steps li:first-child{border-top:0}
ol.steps li::before{
  counter-increment:s; content:counter(s); position:absolute; left:0; top:12px;
  width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
ol.steps b{display:block; font-size:15.5px}
ol.steps span{color:var(--muted); font-size:14px}

/* 欄位表 */
.rows{display:flex; flex-direction:column; gap:0}
.row{padding:11px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.row:first-child{border-top:0}
.row .k{font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.row .v{color:var(--muted); font-size:14px}
.tag{font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--chip); color:var(--brand-ink)}
.tag.req{background:#fdecec; color:#b42318}
@media (prefers-color-scheme:dark){.tag.req{background:#3a1d1d;color:#f5a3a3}}

/* 類型卡 */
.type{border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0}
.type .badge{display:inline-block; font-size:12px; font-weight:700; color:#fff; background:var(--brand); padding:3px 9px; border-radius:999px}
.type h3{margin:9px 0 3px; font-size:16px}
.type .when{color:var(--muted); font-size:13.5px; margin:0 0 8px}
.kv{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.kv > div{display:flex; gap:8px; font-size:14px}
.kv .kk{flex:0 0 auto; font-weight:600; min-width:88px}
.kv .vv{color:var(--muted)}
.eg{font-size:13.5px; background:var(--chip); border-radius:9px; padding:9px 11px; margin-top:8px}
.eg b{color:var(--brand-ink)}

/* rules / actions */
ul.plain{list-style:none; margin:8px 0 0; padding:0}
ul.plain li{display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px}
ul.plain li:first-child{border-top:0}
ul.plain li .em{flex:0 0 auto; font-size:19px; line-height:1.4}
ul.plain li b{display:block}
ul.plain li span{color:var(--muted)}

/* ===== 截圖 ===== */
figure.shot{margin:12px 0 0}
figure.shot img{
  display:block; width:100%; height:auto; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); background:var(--chip);
}
figure.shot figcaption{color:var(--muted); font-size:12.5px; text-align:center; margin-top:6px}
/* 圖片未放置時的佔位框（載入失敗自動切換） */
figure.shot.missing img{display:none}
figure.shot.missing::before{
  content:"🖼 " attr(data-file); display:flex; align-items:center; justify-content:center;
  min-height:120px; border:2px dashed var(--line); border-radius:10px; color:var(--muted);
  font-size:13px; text-align:center; padding:16px; word-break:break-all; background:var(--chip);
}

/* FAQ */
details{border-top:1px solid var(--line); padding:2px 0}
details:first-of-type{border-top:0}
summary{list-style:none; cursor:pointer; padding:13px 26px 13px 0; position:relative; font-weight:600; font-size:15px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:2px; top:11px; font-size:20px; color:var(--muted); font-weight:400}
details[open] summary::after{content:"\2013"}
details .ans{color:var(--muted); font-size:14.5px; padding:0 0 13px}

footer{text-align:center; color:var(--muted); font-size:12.5px; padding:26px 16px calc(30px + env(safe-area-inset-bottom))}