/* 顏色統一放這裡，方便日後修改 */
:root {
  --bg: #f5f5f3;
  --panel: #fcfcfb;
  --text: #0b0b0b;
  --text-soft: #52514e;
  --line: #e2e1dc;
  --blue: #2a78d6;   /* 實際業績 */
  --gray: #b9b8b2;   /* 預計業績 */
  --orange: #eb6834; /* 毛利率 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
}

header, .cards, .panel {
  max-width: 1100px;
  margin: 0 auto 20px;
}

h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 0 0 12px; }

.note {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 8px;
}

/* 重點數字卡片：自動排成多欄 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.card .label { color: var(--text-soft); font-size: 14px; }
.card .value { font-size: 26px; font-weight: bold; margin-top: 4px; }

/* 白色區塊 */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

/* 圖表固定高度 */
.chart-box { position: relative; height: 340px; }

/* 表格太寬時可左右捲動 */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

th:first-child, td:first-child { text-align: left; }
th { color: var(--text-soft); }