/* === 全域樣式設定 === */
body {
  font-family: "Segoe UI", sans-serif; /* 設定主要字型為 Segoe UI，若無則用 sans-serif */
  margin: 0;                            /* 清除預設外距 */
  padding: 0;                           /* 清除預設內距 */
  background: #f0f4f8;                  /* 頁面背景色為淺灰藍 */
  color: #333;                          /* 全文預設字色為深灰 */
}

/* === 主要內容容器 === */
.container {
  max-width: 800px;     /* 限制寬度不超過 800px */
  margin: 0 auto;       /* 水平置中容器 */
  padding: 1rem;        /* 容器內距 */
}

/* === 標題樣式 === */
.title {
  color: #007BFF;        /* 藍色字體 */
  text-align: center;    /* 置中對齊 */
  margin-bottom: 1rem;   /* 與下方元素間距 */
}

/* === 上傳表單中的文字輸入欄位（電話與姓名） === */
.upload-form input[type="text"] {
  width: calc(50% - 1rem);    /* 兩個欄位並排顯示，分佔一半減去間距 */
  padding: 0.5rem;            /* 內距 */
  margin: 0.5rem 0.5rem 0.5rem 0;  /* 外距，右側留空間與另一個欄位區隔 */
  border: 1px solid #ccc;     /* 邊框為淺灰色 */
  border-radius: 4px;         /* 圓角邊框 */
}

/* === 拖曳上傳區塊 === */
#drop-area {
  border: 2px dashed #ccc;     /* 虛線邊框 */
  padding: 2rem;               /* 內距 */
  text-align: center;          /* 內容置中 */
  margin: 1rem 0;              /* 上下間距 */
  background-color: #fafafa;   /* 淺灰白背景 */
  border-radius: 8px;          /* 圓角外框 */
  transition: 0.3s;            /* 動畫效果：背景色與邊框顏色漸變 */
}

/* === 拖曳中時的變化樣式（使用 JS 加上的 class） === */
#drop-area.dragover {
  background-color: #d0ebff;   /* 拖曳時背景變為淡藍色 */
  border-color: #339af0;       /* 邊框變成亮藍色 */
}

/* === 按鈕排列區塊 === */
.button-group {
  display: flex;           /* 使用 Flex 排列 */
  gap: 0.5rem;             /* 按鈕之間的間距 */
  flex-wrap: wrap;         /* 若按鈕太多，自動換行 */
  margin-bottom: 1rem;     /* 與下方區塊間距 */
}

/* === 所有按鈕共用樣式 === */
.btn {
  padding: 0.5rem 1rem;       /* 內距 */
  border: none;               /* 移除按鈕預設邊框 */
  border-radius: 6px;         /* 圓角 */
  color: #fff;                /* 字體為白色 */
  cursor: pointer;            /* 滑鼠指標改為手形 */
  font-size: 1rem;            /* 字體大小 */
  text-decoration: none;      /* 移除超連結按鈕的底線 */
}

/* === 特定按鈕顏色樣式 === */
.cyan {
  background-color: #17a2b8;   /* 青藍色背景 */
  font-size: 1.2rem;           /* 字體略大 */
}

.blue {
  background-color: #007bff;   /* 藍色背景 */
}

.orange {
  background-color: #fd7e14;   /* 橘色背景 */
}

.green {
  background-color: #28a745;   /* 綠色背景 */
}

/* === 檔案列表區塊 === */
#file-list {
  margin-top: 1rem;            /* 上方留空間 */
}

/* === 每個檔案項目的容器（含進度條） === */
.file-item {
  margin-bottom: 0.5rem;       /* 每個檔案項目間距 */
}

/* === 進度條的外框區塊 === */
.progress-bar {
  width: 100%;                 /* 佔滿寬度 */
  background-color: #e0e0e0;   /* 淺灰底色 */
  border-radius: 8px;          /* 圓角外框 */
  overflow: hidden;            /* 限制內部元素不要超出 */
  height: 10px;                /* 高度固定為 10px */
  margin-top: 0.25rem;         /* 與上方項目些微距離 */
}

/* === 實際的進度條（寬度由 JS 動態控制） === */
.progress {
  height: 100%;                /* 與外框同高 */
  background-color: #28a745;   /* 綠色代表進度 */
  width: 0%;                   /* 初始為 0%，由 JS 調整 */
}

/* === 錯誤訊息顯示樣式 === */
#error-message {
  color: red;                  /* 紅色文字 */
  margin-top: 1rem;            /* 上方間距 */
  font-weight: bold;           /* 加粗字體 */
}

/* === 上傳成功提示訊息樣式 === */
.success-message {
  background-color: #d4edda;   /* 淺綠色背景 */
  padding: 0.75rem;            /* 內距 */
  border: 1px solid #c3e6cb;   /* 綠邊框 */
  color: #155724;              /* 深綠字體 */
  border-radius: 5px;          /* 圓角 */
  margin-bottom: 1rem;         /* 下方間距 */
}

/* === 公告欄外觀樣式 === */
.notice-board {
  margin-top: 2rem;            /* 與上方區塊距離 */
  background: #fff3cd;         /* 淺黃色底色 */
  padding: 1rem;               /* 內距 */
  border-left: 5px solid #ffeeba; /* 左側標示邊條（醒目） */
  border-radius: 4px;          /* 圓角外框 */
}

/* === 公告欄內標題樣式 === */
.notice-board h2 {
  margin-top: 0;               /* 移除標題上方預設空間 */
}