/* =========================================================
   style.css — 系統狀態頁（三區塊）
   配色來源：你的參考樣式（淺色主題 + #069393）
   結構相容：index.html（#block-status / #block-issues / #block-updates）
   --------------------------------------------------------- */

/* 0) CSS 變數（品牌/尺寸/色彩） */
:root{
  --bg:#f9fafb;               /* 頁面背景 */
  --bg2:#ffffff;              /* 卡片底色 */
  --fg:#1a1a1a;               /* 主要文字 */
  --muted:#6b7280;            /* 次要文字 */
  --line:#d1d5db;             /* 邊界/分隔線 */
  --accent:#069393;           /* 品牌主色 */
  --accent-press:#037c7e;     /* 主色按下狀態 */
  --radius:14px;              /* 一致圓角 */
  --tap:48px;                 /* 觸控友善高度 */
  --container:1000px;         /* 版心寬度（狀態頁較窄） */
}

/* 1) Reset / Typography / Link */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.65;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* 2) 版心與頁首 */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:24px clamp(12px,3vw,24px) 80px;
}
h1{
  margin:0 0 12px;
  font-size:clamp(20px,2.6vw,28px);
  color:var(--accent);
  text-align:left;
  word-break:keep-all;
}
.meta-bar{
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
}

/* 3) 區塊容器（每個區塊放一張卡片） */
.grid{ display:grid; gap:16px; }

/* 4) 卡片基礎樣式 */
.card{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  overflow:hidden;
}
.card-head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.card-body{
  padding:14px 16px;
}
.card h2, .card h3{
  margin:0;
  font-size:18px;
}

/* 5) 系統狀態卡片（依狀態著色） */
.card.system h2{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(6,147,147,.10);
  border:1px solid rgba(6,147,147,.28);
}
.card.system.green h2{
  background:rgba(16,185,129,.12);    /* 綠 */
  border-color:rgba(16,185,129,.30);
}
.card.system.red h2{
  background:rgba(239,68,68,.12);     /* 紅 */
  border-color:rgba(239,68,68,.30);
}
.card.system.blue h2{
  background:rgba(59,130,246,.12);    /* 藍 */
  border-color:rgba(59,130,246,.30);
}

/* 6) 列表（問題/更新） */
.list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.item{
  padding:10px 12px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:#fff;
}
.title{ font-weight:600; margin-bottom:6px; }
.summary, .desc{ line-height:1.65; }
.meta{ color:var(--muted); font-size:13px; margin-top:6px; }

/* 嚴重度徽章 */
.sev{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  border:1px solid var(--line);
  vertical-align:middle;
}
.sev-重大{ border-color:#ef4444; color:#b91c1c; background:#fee2e2; }
.sev-高  { border-color:#f59e0b; color:#b45309; background:#fef3c7; }
.sev-中  { border-color:#eab308; color:#854d0e; background:#fef9c3; }
.sev-低  { border-color:#10b981; color:#065f46; background:#d1fae5; }

/* 摺疊詳細（更新內容） */
details summary{
  cursor:pointer;
  color:#0f766e;
  margin:6px 0;
}
pre{
  white-space:pre-wrap;
  word-wrap:break-word;
  background:#f3f4f6;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line);
}

/* 7) 空狀態與錯誤 */
.empty{ color:var(--muted); }
.card.error{ border-color:#e11d48; background:#fff1f2; }
.card.error .card-body{ color:#9f1239; }

/* 8) 互動元素（按鈕、Fab — 若之後需要） */
.btn{
  min-height:var(--tap);
  padding:10px 14px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  cursor:pointer;
  transition:opacity .15s ease, transform .06s ease, background .15s ease;
}
.btn:active{ transform:scale(0.98); background:var(--accent-press); }
.btn.ghost{ background:transparent; color:var(--fg); border-color:var(--line); }

.fab{
  position:fixed;
  right:clamp(12px,3vw,20px);
  bottom:clamp(16px,4vw,24px);
  width:56px; height:56px;
  display:grid; place-items:center;
  font-size:24px;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:50%;
  box-shadow:0 10px 24px rgba(2,6,6,.25);
  cursor:pointer;
  z-index:10;
}
.fab:active{ background:var(--accent-press); transform:translateY(1px); }
@media (min-width:900px){ .fab{ display:none; } }

/* 9) RWD */
@media (max-width:900px){
  .wrap{ padding-bottom:48px; }
}
/* Google Form：同卡片寬，但表單內容限寬置中 */
:root { --gform-max: 860px; } /* 依喜好調 720~900 之間 */

.gform-embed{
  display: grid;
  justify-content: center;  /* 置中 iframe */
}

.gform-frame{
  width: 100%;
  max-width: var(--gform-max);
}

/* 手機就滿寬 */
@media (max-width: 900px){
  .gform-frame{ max-width: 100%; }
}
/* === 讓底部的表單區寬度與其他卡片一致 === */
#block-gform .gform-embed{
  display:block;              /* 取消置中 grid */
}
#block-gform .gform-frame{
  width:100%;
  max-width:none;             /* 取消內部 860px 的限寬 */
}