/* DRTxECM 官網共用樣式 —— 極簡、無 JavaScript、無外部資源 */

body {
  font-family: system-ui, "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
  max-width: 820px; margin: 0 auto; padding: 0 16px 48px;
  line-height: 1.75; color: #222; background: #fff;
}

/* ---- 頁首 / 導覽 ---- */
header.site {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 0 10px; border-bottom: 1px solid #e5e5e5;
}
header.site .brand { margin: 0; }
header.site .brand a { display: block; line-height: 0; }
header.site .brand img { height: 30px; width: auto; display: block; }
header.site .ver { color: #999; font-size: 14px; }
header.site .spacer { flex: 1 1 auto; }
header.site .lang { font-size: 14px; }

nav.site { padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; }
nav.site a { margin-right: 16px; color: #0b57d0; text-decoration: none; }
nav.site a:hover { text-decoration: underline; }
nav.site a.here { color: #222; font-weight: 700; }

/* ---- 標題與文字 ---- */
h1 { font-size: 30px; margin: 30px 0 6px; }
h2 { border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-top: 38px; font-size: 21px; }
h3 { margin-top: 26px; font-size: 17px; }
p.lead { color: #555; font-size: 17px; margin-top: 4px; }
a { color: #0b57d0; }
ul, ol { padding-left: 24px; }
li { margin: 3px 0; }
hr { border: 0; border-top: 1px solid #eee; margin: 30px 0; }

/* ---- 表格 ---- */
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #f6f6f6; font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 程式碼 ---- */
code, pre {
  font-family: Consolas, "Courier New", monospace;
  background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 3px;
}
code { padding: 1px 5px; font-size: 14px; }
pre { padding: 10px 12px; overflow-x: auto; font-size: 14px; }

/* ---- 提示框 ---- */
.note { background: #fffbe6; border: 1px solid #efe0a0; padding: 10px 14px; border-radius: 3px; }
.warn { background: #fdf0f0; border: 1px solid #f0c0c0; padding: 10px 14px; border-radius: 3px; }
.ok   { background: #f0fbf7; border: 1px solid #a8e0cd; padding: 10px 14px; border-radius: 3px; }

/* ---- 下載區 ---- */
.dl { background: #f4f8ff; border: 1px solid #cfe0ff; padding: 16px 18px; border-radius: 4px; margin: 20px 0; }
.dl .big {
  display: inline-block; background: #0b57d0; color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 4px; font-weight: 700; font-size: 16px;
}
.dl .big:hover { background: #0947ab; }
.dl .meta { color: #666; font-size: 14px; margin-top: 8px; }

/* ---- 特色卡片 ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.card { border: 1px solid #e3e3e3; border-radius: 4px; padding: 12px 14px; }
.card b { display: block; margin-bottom: 4px; }
.card span { color: #555; font-size: 14px; }

/* ---- 三階段流程圖 ---- */
.pipe { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 20px 0; }
.pipe .step {
  flex: 1 1 180px; border: 1px solid #d8e3f5; border-left: 4px solid #0b57d0;
  border-radius: 4px; padding: 10px 14px; background: #f7faff;
}
.pipe .step b { display: block; color: #0f2c5c; }
.pipe .step span { font-size: 14px; color: #555; }
.pipe .arw { align-self: center; color: #0ea5a4; font-weight: 700; font-size: 20px; }

/* ---- 徽章 ---- */
.badges { margin: 10px 0 0; }
.badge {
  display: inline-block; background: #eef4ff; border: 1px solid #cfe0ff; color: #0b57d0;
  border-radius: 20px; padding: 2px 12px; font-size: 13px; margin: 0 6px 6px 0;
}

/* ---- 鍵盤按鍵 ---- */
kbd {
  font-family: inherit; font-size: 13px; background: #f4f4f4;
  border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px;
}

/* ---- 公式 ---- */
.formula {
  background: #fafafa; border: 1px solid #e8e8e8; border-left: 3px solid #0ea5a4;
  padding: 10px 14px; border-radius: 3px; font-family: Consolas, "Courier New", monospace;
  font-size: 14px; overflow-x: auto; margin: 12px 0;
}

/* ---- 截圖 ---- */
figure.shot { margin: 18px 0; }
figure.shot img { max-width: 100%; height: auto; border: 1px solid #dcdcdc; border-radius: 4px; display: block; }
figure.shot figcaption { color: #666; font-size: 14px; margin-top: 6px; }

/* ---- 贊助 QR ---- */
.qr {
  width: 200px; height: 200px; border: 1px solid #ddd; background: #fafafa;
  border-radius: 4px;
}

/* ---- 頁尾 ---- */
footer.site {
  margin-top: 60px; padding-top: 14px; border-top: 1px solid #ddd;
  color: #666; font-size: 14px;
}
footer.site a { color: #0b57d0; }