/* 這裡放 CSS */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #fffefedf;
      color: #333;
    }

    header {
      background: #021c1f97;
      color: white;
      padding: 20px;
      text-align: center;
    }
h1{
  font-size: 2rem;
    color: rgb(16, 82, 45);
  text-align: center;
}

h2{
  font-size: 1.5rem;
  color: rgb(16, 82, 45);
  text-align: left;
}
p{
  font-size: 1.2rem;
  color: rgb(16, 82, 45);
  text-align: left;
  margin-left: 50px;
}
    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    nav a:hover {
      text-decoration: underline;
    }

    main {
      padding: 40px;
      text-align: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

.wrapper{
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}
.wrapper a{
  text-decoration: none;
  color: #021c1f97;
}
.wrapper a:hover{
  color: #0077cc;
}
.btn-group {
  display: flex;
  justify-content: center;  /* 水平置中 */
  gap: 16px;                /* 三個按鈕之間的間距 */
  margin: 20px 0;
}

.btn-group a {
  display: inline-block;
  padding: 12px 24px;
  background-color: #021c1f97;  /* 綠色 */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.btn-group a:hover {
  background-color: #155d27;  /* hover 深綠 */
  transform: translateY(-2px);
}

.content{
  text-align: left;
  line-height: 1.6;
}
/*文章標題 → class="title"

作者名字 → class="author"

整個文章區塊 → class="result"*/
.articles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  text-align: left;
}
.articles p{
  margin: 10px 0;
  text-align: center;
}
.articles img{
  width: 100%;
  aspect-ratio: 1 / 1;   /* 強制寬高比 1:1 */
  object-fit: cover;     /* 保持比例，超出的裁切掉 */
  border-radius: 8px;    /* 可選：圓角 */
}
.articles a{
  text-decoration: none;
  color: #021c1f97;
}
.articles a:hover{
  color: #0077cc;
}
.title{
  font-size: 2rem;
  font-weight: bold;
  color: #021c1f97;
  text-align: left;
  font-weight: bold;
}

.actor {
  display: flex;
  align-items: center;   /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  margin-bottom: 10px;
}

.actor .icon {
  width: auto;  /* 控制圖片大小 */
  height: 45px
}

.actor .text {
  font-size: 1.2rem;
  color: #555;
  height: auto;                  /* 內容區塊高度 */
  padding: 10px;
  border: 2px solid #00080997;      /* ✅ 外框 */
  border-radius: 8px;               /* ✅ 圓角 */
  background-color: #e4eff197;   /* ✅ 背景色 */
  text-align: center;
  margin-left: 0; /* 不留空隙 */
  
}

.result{
  background:#fff; 
  padding:15px; 
  margin-bottom:12px; 
  border-radius:8px; 
  box-shadow:0 2px 5px rgba(0,0,0,0.1); 
}
.result h1{
  font-size: 2rem;
  font-weight: bold;
  color: #000b0c97;
  text-align: left;
}
.result h2{
  font-size: 1.2rem;
  font-weight: bold;
  color: #021c1f97;
  text-align: left;
}
.result h3{
  font-size: 1.2rem;
  font-weight: bold;
  color: #06677297;
  text-align: left;
}
.result p{
  font-size: 1rem;
  color: #000708;
  margin: 10px 0;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
}
.result a{
  color: #021c1f97;
  text-decoration: none;
  font-weight: bold;
   text-align: left;
}
.result li{
  font-size: 1.0rem;
  color: #031c1f97;
  text-decoration: none;
  font-weight: bold;
   text-align: left;
}


    :root{
      --fg:#0f5132;/*深綠*/
      --fg-2:#145a38;
      --muted:#6b7280;/*灰*/
      --bg:#f7faf7;/*淡綠灰底*/
      --card:#ffffff;
      --ring:#cfe9da;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:#111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Noto Sans TC",sans-serif;line-height:1.65}
    .wrap{max-width:880px;margin:48px auto;padding:0 20px}
    header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px;text-align:center}
    header h1{margin:0;font-size:clamp(24px,4vw,36px);color:var(--fg);letter-spacing:.5px}
    header p{margin:0;color:var(--muted)}

    .card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:20px 18px;box-shadow:0 6px 20px rgba(17,24,39,.06);}
    .grid{display:grid;gap:16px}
    @media (min-width:768px){.grid{grid-template-columns:1fr 1fr}}

    h2{margin:6px 0 10px;font-size:20px;color:var(--fg-2)}
    .lead{font-weight:600;color:#0a0a0a}
    .qa{display:flex;gap:12px;align-items:flex-start}
    .q{flex:0 0 auto;font-weight:700;color:var(--fg);}
    .a{flex:1}

    details{border:1px dashed var(--ring);border-radius:12px;padding:12px 14px;background:#fff}
    summary{cursor:pointer;font-weight:700;color:var(--fg)}

    .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--ring);background:#fff}
    .center-row{display:flex;justify-content:center;align-items:center;gap:0}/* 圖片與文字緊貼且整組置中 */
    .center-row img{width:28px;height:auto;}
    .center-row span{margin-left:0;color:var(--fg);font-weight:600}

    .muted{color:var(--muted)}
    .todo{background:#fff9db;border-color:#ffe58f}

        :root{
      --bg:#0b0c0f; /* 背景 */
      --card:#12141a; /* 卡片 */
      --muted:#c8cfdb; /* 次要文字 */
      --text:#e9eef7; /* 主要文字 */
      --accent:#86b7ff; /* 強調 */
      --accent-2:#ffb7d5; /* 次強調 */
      --border:#232633; /* 邊框 */
      --ok:#46d39a;
      --warn:#ffcf5a;
      --danger:#ff7a90;
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#f7f8fb;--card:#ffffff;--muted:#5b677a;--text:#0f1726;--accent:#336dff;--accent-2:#d23a87;--border:#e7eaf0;
      }
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--text)}
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:none}
    .wrap{max-width:1100px;margin:0 auto;padding:24px}

    /* 頁首 */
    .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted)}
    .badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--card)}

    /* 版面：側邊目錄 + 內容 */
    .layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
    @media (max-width: 980px){.layout{grid-template-columns:1fr}}

    /* 目錄 */
    nav.toc{position:sticky;top:16px;align-self:start;border:1px solid var(--border);background:var(--card);border-radius:16px;padding:16px}
    .toc h3{margin:0 0 10px 0;font-size:14px;color:var(--muted);letter-spacing:0.4px}
    .toc a{display:block;padding:6px 6px;border-radius:8px;color:var(--text)}
    .toc a:hover{background:rgba(131,149,255,0.12)}
    .toc ol, .toc ul{margin:0;padding-left:18px}

    /* 內容卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  text-align: left;
}
    section + section{margin-top:18px}
    h2{margin:0 0 8px 0;font-size:clamp(20px,2.6vw,28px)}
    h3{margin:18px 0 6px;font-size:18px}
    p{margin:10px 0;}
    ul{margin:10px 0;list-style: disc;}
    .muted{color:var(--muted)}

    /* 表格 */
    .table{overflow:auto;border-radius:14px;border:1px solid var(--border)}
    table{width:100%;border-collapse:collapse;min-width:680px}
    th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
    thead th{background:rgba(131,149,255,0.08);font-weight:700}
    tbody tr:hover{background:rgba(131,149,255,0.06)}

    /* callout */
    .callout{display:flex;gap:12px;border:1px solid var(--border);padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(134,183,255,.08),transparent)}
    .callout.warn{background:linear-gradient(180deg,rgba(255,207,90,.16),transparent)}
    .callout.danger{background:linear-gradient(180deg,rgba(255,122,144,.14),transparent)}
    .callout .icon{font-size:20px}

    /* 清單美化 */
    ul{padding-left:20px}
    li+li{margin-top:4px}


    /* 小元件 */
    .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 12px;border-radius:10px}
    .btn:hover{filter:brightness(1.05);text-decoration: none;}
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip{background:rgba(134,183,255,.12);border:1px solid var(--border);padding:4px 8px;border-radius:999px;font-size:13px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media (max-width:720px){.grid-2{grid-template-columns:1fr}}
    details{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--card)}
    details+details{margin-top:10px}


footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: white;
  background-color: rgb(3, 32, 33);
}
 footer p {
   text-align: center;
   margin: 0;
   color: white;
 }