/* 1. 重置預設樣式：瀏覽器預設會給元素一些邊距，先清掉方便自己控制 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 讓 padding 不會把元素撐得比預期寬 */
}

/* 2. 整體頁面樣式 */
body {
  font-family: "Microsoft JhengHei", Arial, sans-serif; /* 中文用微軟正黑體 */
  background-color: #f2f4f7;
  color: #333;
  line-height: 1.6;
}

/* 3. 容器：限制內容最大寬度，並置中 */
.container {
  max-width: 1100px; /* 加寬一些，讓兩個定律左右並列時每欄還有足夠空間 */
  margin: 0 auto;   /* 上下 0，左右 auto → 水平置中 */
  padding: 40px 20px;
}

/* 3-1. 兩個定律的卡片左右並列 */
.law-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.law-row .card {
  flex: 1;
  min-width: 0; /* 避免卡片內的表格把 flex 欄位撐開 */
  margin-bottom: 0; /* 外層 .law-row 已經有 margin-bottom，卡片自己不用重複留白 */
}

/* 螢幕太窄時（手機），改成上下堆疊比較好閱讀 */
@media (max-width: 700px) {
  .law-row {
    flex-direction: column;
  }
}

/* 4. 標題區 */
header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  color: #1f2d3d;
}

/* 5. 卡片樣式：三個 section 共用同一個 class="card" */
.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 淡淡的陰影，看起來像浮起來的卡片 */
}

.card h2 {
  margin-bottom: 12px;
  color: #2c3e50;
}

/* 6. 上傳資料區塊：標題、說明文字、選檔按鈕都置中 */
#upload {
  text-align: center;
}

#upload p {
  margin-bottom: 16px;
}

#analyzeBtn {
  margin-left: 10px;
  padding: 8px 20px;
  background-color: #2f80ed;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#analyzeBtn:hover {
  background-color: #1c64d1;
}

/* 7. 結果表格 */
/* 表格欄位較多，並列雙欄或手機窄螢幕時容易放不下，
   讓表格自己可以橫向捲動，避免把整個頁面撐寬 */
#resultPlaceholder,
#resultPlaceholder2 {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 460px; /* 保留表格最基本的可讀寬度，不夠時交給外層捲動 */
  border-collapse: collapse; /* 讓格線不要重疊變粗 */
  margin-top: 12px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: center;
}

th {
  background-color: #2c3e50;
  color: #fff;
}

tr:nth-child(even) {
  background-color: #f7f8fa; /* 隔行變色，方便閱讀 */
}

/* 班佛第二定律：Z 統計量超出 ±1.96 的異常列特別標紅提示 */
tr.anomaly-row {
  background-color: #fdecea;
}

tr.anomaly-row td {
  color: #c0392b;
  font-weight: bold;
}

/* 提示/警告文字 */
.warning {
  color: #c0392b;
  background-color: #fdecea;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

/* 8. 長條圖：現在排在表格上方，改用下邊距跟表格保持間距 */
.chart {
  margin-bottom: 20px;
}

.chart-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #555;
}

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.swatch.actual { background-color: #2f80ed; }

/* 折線圖例：用一小段線 + 圓點來代表「理論百分比」的折線樣式 */
.swatch-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: #f2994a;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
}

.swatch-line::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f2994a;
}

/* 圖表本體：實際百分比用長條（rect），理論百分比用折線（polyline）疊圖 */
.chart-svg {
  width: 100%;
  height: auto;
}

.chart-axis {
  stroke: #333;
  stroke-width: 2;
}

.bar-actual {
  fill: #2f80ed;
  transition: height 0.3s ease, y 0.3s ease; /* 高度變化時有一點動畫效果 */
}

.line-expected {
  fill: none;
  stroke: #f2994a;
  stroke-width: 2;
}

.point-expected {
  fill: #f2994a;
}

.axis-label {
  font-size: 12px;
  fill: #555;
  text-anchor: middle;
}