/* 對焦板 — 照 doc-templates/gray-white-minimal/DESIGN.md v1.0 */
:root{
  --ink:#111; --mid:#555; --light:#999; --bg:#fafafa; --border:#e5e5e5;
  --green:#1a7a3a; --green-bg:#f0fff4; --blue:#1a3ab8; --blue-bg:#f0f4ff;
  --orange:#b84a1a; --red:#cc2222; --red-bg:#fff0f0;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,'PingFang TC','Noto Sans TC',sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:var(--ink)}
.wrap{max-width:1060px;margin:0 auto;padding:40px 28px 80px}
.narrow{max-width:840px}

/* hero */
.hero{border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:44px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light)}
h1{font-size:28px;font-weight:800;letter-spacing:-.025em;margin:6px 0 4px}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:15px;font-weight:700;margin:0 0 6px}
.sub{color:var(--mid);font-size:14px}

/* section label = 本系統最強識別 */
.label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--light);border-bottom:1px solid var(--border);padding-bottom:6px;margin:0 0 14px
}
section{margin-bottom:44px}

.box{background:#fff;border:1px solid var(--border);border-radius:8px;padding:18px}
.box + .box{margin-top:14px}

/* 版面：主欄 + 右軌 */
.cols{display:flex;gap:28px;align-items:flex-start}
.main{flex:1 1 auto;min-width:0}
.rail{flex:0 0 300px}
@media (max-width:860px){ .cols{flex-direction:column} .rail{flex:1 1 auto;width:100%} }
.rail .box{padding:14px 16px}

/* 區塊 meta */
.meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.owner{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.ver{font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:1px 7px;border-radius:4px}
.ver.v0{color:var(--light);background:#f0f0f0}
.stamp{font-size:12px;color:var(--light)}

textarea{
  width:100%;min-height:140px;resize:vertical;padding:12px 13px;
  border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:14px;line-height:1.7
}
textarea:focus{outline:none;border-color:var(--ink)}
textarea[readonly]{background:#fafafa;color:var(--mid)}
.ro{white-space:pre-wrap;color:var(--mid);font-size:14px}
.ro:empty:before{content:'（尚未填寫）';color:var(--light)}

button{
  font-family:inherit;font-size:13px;font-weight:700;padding:7px 16px;
  border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:#fff;cursor:pointer
}
button.ghost{background:#fff;color:var(--ink)}
button:disabled{opacity:.35;cursor:default}
.row{display:flex;gap:10px;align-items:center;margin-top:10px}
.saved{font-size:12px;color:var(--green)}
.err{font-size:12px;color:var(--red)}

/* alert = 語義背景 + 4px 左邊框 */
.alert{border-radius:6px;padding:11px 14px;font-size:14px;margin-bottom:14px}
.alert.go{background:var(--green-bg);border-left:4px solid var(--green)}
.alert.new{background:var(--blue-bg);border-left:4px solid var(--blue)}
.alert.red{background:var(--red-bg);border-left:4px solid var(--red)}

/* 清單 */
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{border-bottom:1px solid var(--border);padding:8px 0;font-size:13px}
ul.plain li:last-child{border-bottom:0}
.dim{color:var(--light)}
.note{border-bottom:1px solid var(--border);padding:9px 0;font-size:13px}
.note:last-child{border-bottom:0}
.note b{font-weight:700}
.note .t{color:var(--light);font-size:11px}