/* 說明文章共用樣式。跟首頁同一套配色，但版面是「讀文章」不是「看落地頁」：
   單欄、行長控制在 38em 左右，表格才放寬到 max-width 之外。 */
:root{
  color-scheme: dark;
  --bg:#080b0e; --surface:#10161b; --surface-2:#0d1317;
  --line:#1e2a32; --line-soft:#18232a;
  --ink:#e7f0f4; --ink-dim:#a3b4bf; --ink-faint:#74858f;
  --cyan:#3ee0d0; --violet:#a78bfa;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.85; -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58rem 34rem at 82% -8%, rgba(62,224,208,.08), transparent 62%),
    radial-gradient(50rem 30rem at 6% 106%, rgba(167,139,250,.07), transparent 62%);
}
a{color:var(--cyan)}
a:hover{color:#6ceee0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
img{max-width:100%}

.wrap{max-width:52rem;margin:0 auto;padding-inline:20px;padding-block:0}

/* ---- 麵包屑 ---- */
.crumb{
  font-size:.86rem;color:var(--ink-faint);
  padding-block:22px 0;display:flex;flex-wrap:wrap;gap:.4em;align-items:center;
}
.crumb a{color:var(--ink-dim);text-decoration:none}
.crumb a:hover{color:var(--cyan)}
.crumb span[aria-hidden]{opacity:.5}

/* ---- 標題區 ---- */
header.head{padding-block:28px 8px;border-bottom:1px solid var(--line-soft);margin-bottom:34px}
.kicker{
  margin:0 0 10px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;
}
h1{
  margin:0 0 14px;font-size:clamp(1.6rem,4.4vw,2.35rem);line-height:1.3;
  letter-spacing:-.01em;font-weight:700;
}
.standfirst{margin:0 0 22px;color:var(--ink-dim);font-size:1.04rem}
.meta{margin:0 0 24px;font-size:.82rem;color:var(--ink-faint)}

/* ---- 內文 ---- */
main h2{
  margin:48px 0 16px;font-size:clamp(1.22rem,3vw,1.5rem);line-height:1.4;
  padding-top:14px;border-top:1px solid var(--line-soft);
}
main h3{margin:32px 0 10px;font-size:1.06rem;color:var(--ink)}
main p{margin:0 0 18px}
main ul,main ol{margin:0 0 18px;padding-left:1.35em}
main li{margin-bottom:8px}
main li::marker{color:var(--ink-faint)}
strong{color:#fff;font-weight:600}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:5px;padding:.1em .4em;
}

/* ---- 重點框 ---- */
.note{
  margin:26px 0;padding:18px 20px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--cyan);
}
.note p:last-child{margin-bottom:0}
.note .lbl{
  display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin-bottom:6px;
}
.note.warn{border-left-color:var(--violet)}
.note.warn .lbl{color:var(--violet)}

/* ---- 表格 ---- */
.tw{overflow-x:auto;margin:26px 0;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
caption{
  caption-side:top;text-align:left;padding:14px 18px 12px;
  color:var(--ink-dim);font-size:.86rem;border-bottom:1px solid var(--line-soft);
}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{
  color:var(--ink-faint);font-weight:600;font-size:.8rem;
  letter-spacing:.04em;white-space:nowrap;background:rgba(255,255,255,.015);
}
tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tr.hl td,tr.hl th{background:rgba(62,224,208,.05)}
td{color:var(--ink-dim)}
table.rr td{line-height:2.1}
.m{
  display:inline-block;margin:0 6px 4px 0;padding:2px 10px;border-radius:20px;
  background:rgba(62,224,208,.08);border:1px solid rgba(62,224,208,.2);
  color:var(--ink);font-size:.88rem;white-space:nowrap;
}
.m i{font-style:normal;color:var(--ink-faint);margin:0 .45em;font-size:.85em}
.bye{
  display:inline-block;padding:2px 10px;border-radius:20px;
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.2);
  color:var(--ink-dim);font-size:.85rem;white-space:nowrap;
}

/* ---- 導去工具的卡片 ---- */
.cta{
  display:block;margin:32px 0;padding:22px 24px;border-radius:14px;text-decoration:none;
  background:linear-gradient(135deg,rgba(62,224,208,.07),rgba(167,139,250,.05));
  border:1px solid var(--line);transition:border-color .18s,transform .18s;
}
.cta:hover{border-color:rgba(62,224,208,.4);transform:translateY(-2px)}
.cta b{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:6px}
.cta span{display:block;color:var(--ink-dim);font-size:.92rem;line-height:1.7}
.cta em{display:block;margin-top:10px;font-style:normal;color:var(--cyan);font-size:.9rem;font-weight:600}

/* ---- 其他文章 ---- */
.more{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--line-soft)}
.more h2{border:0;padding:0;margin:0 0 16px;font-size:1.1rem}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:0;padding:0;list-style:none}
.cards a{
  display:block;height:100%;padding:16px 18px;border-radius:12px;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);transition:border-color .18s;
}
.cards a:hover{border-color:rgba(62,224,208,.4)}
.cards b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:5px;line-height:1.5}
.cards span{display:block;color:var(--ink-faint);font-size:.86rem;line-height:1.6}

footer{
  margin-top:56px;padding:26px 0 44px;border-top:1px solid var(--line-soft);
  color:var(--ink-faint);font-size:.85rem;
}
footer p{margin:0 0 8px}
footer a{color:var(--ink-dim)}

@media (max-width:520px){
  body{line-height:1.8}
  .m{font-size:.84rem;padding:2px 8px}
  th,td{padding:8px 11px}
}