/* 宏福苑網站 —— 共用樣式（沿用週報暖木色系） */
:root{
  --accent:#7a5641;     /* 主色 深木棕 */
  --accent2:#a9774e;    /* 次色 赭棕 */
  --accent-dark:#5f4030;/* header 深棕 */
  --bg:#ece0cd;         /* 頁面底 米色 */
  --card:#fffaf2;       /* 卡片 奶白 */
  --border:#e3d3bb;     /* 邊框 淺米 */
  --ink:#3a2c22;        /* 內文 深啡 */
  --muted:#8a7866;      /* 次要 灰啡 */
  --radius:12px;
  --maxw:680px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  padding:24px 16px 48px;
}
.wrap{max-width:var(--maxw);margin:0 auto;}

/* 導覽 */
nav.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
nav.tabs a{
  padding:9px 18px;border-radius:10px;text-decoration:none;
  color:var(--muted);font-weight:500;font-size:15px;
  border:1px solid transparent;
}
nav.tabs a:hover{color:var(--ink);}
nav.tabs a.active{background:var(--card);border-color:var(--border);color:var(--ink);}

/* Header */
header.hero{
  background:var(--accent-dark);color:#fff;
  border-radius:14px;padding:26px 26px;margin-bottom:22px;
  box-shadow:0 6px 20px rgba(90,60,40,.18);
}
header.hero h1{font-size:23px;font-weight:600;}
header.hero p{font-size:14px;opacity:.92;margin-top:6px;}

/* 卡片 */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;
  box-shadow:0 1px 4px rgba(120,90,60,.06);
}
.card h2{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--ink);}

/* metric cards */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.metric{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:13px 14px;}
.metric .label{font-size:12px;color:var(--muted);}
.metric .value{font-size:24px;font-weight:600;color:var(--ink);margin-top:2px;}
.metric .value.small{font-size:15px;margin-top:6px;}

/* 圖例 */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px;font-size:12.5px;color:var(--muted);}
.legend span.it{display:flex;align-items:center;gap:5px;}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;}

.chart-box{position:relative;width:100%;}

/* 空狀態 */
.empty{
  text-align:center;padding:38px 20px;color:var(--muted);
}
.empty .big{font-size:18px;color:var(--ink);font-weight:500;margin-bottom:8px;}

/* 週報按鈕清單 */
.btn{
  display:block;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:15px 18px;margin-bottom:11px;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:16px;
}
.btn:hover{border-color:var(--accent);}
.btn.latest{border:2px solid var(--accent);}
.btn .rng{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:4px;}
.badge{background:var(--accent);color:#fff;font-size:12px;padding:2px 10px;border-radius:10px;margin-left:8px;font-weight:400;}
.btn.feature{background:var(--accent2);color:#fff;border:none;display:flex;gap:12px;align-items:center;}
.btn.feature:hover{opacity:.93;}
.btn.feature .sub{display:block;font-size:12px;font-weight:400;opacity:.9;margin-top:2px;}

/* 內文段落 */
.prose p{margin-bottom:12px;}
.prose h3{font-size:15px;font-weight:600;margin:16px 0 6px;}
.note{font-size:12.5px;color:var(--muted);line-height:1.6;}

footer{text-align:center;color:var(--muted);font-size:12.5px;margin-top:26px;}
footer a{color:var(--muted);}

@media(max-width:520px){
  .metrics{grid-template-columns:repeat(3,1fr);}
  .metric .value{font-size:20px;}
}