/* 通用樣式 */
body {
  font-family: 'Segoe UI', 'Noto Sans TC', sans-serif;
  /* 使用柔和暖色調的背景圖片 */
  background-image: url('bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* 深棕色文字，增加對比度以提升在暖色背景上的可讀性 */
  color: #5c3f2e;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.section {
  max-width: 650px;
  margin: 40px auto;
  padding: 30px;
  text-align: center;
  /* 使用更不透明的淡白色底，確保文字在深色背景上清晰 */
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hidden {
  /* Use !important so it overrides element-specific display settings */
  display: none !important;
}

h1, h2 {
  /* 調整標題顏色，使其在暖色背景上更突出 */
  color: #c75a3b;
  margin-bottom: 20px;
}

button {
  background-color: #ff7f50;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #ff5a26;
}

label {
  display: block;
  margin-bottom: 10px;
  text-align: left;
  font-size: 15px;
}

input[type="number"], select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 15px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* 將選項置中 */
  margin-bottom: 10px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 自訂單選按鈕的外觀與點擊動畫 */
.radio-label input {
  /* 隱藏原生按鈕 */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-label span {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(255, 127, 80, 0.5);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  /* 更深的字體顏色提升對比度 */
  color: #743c23;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.radio-label input:checked + span {
  background-color: #ff7f50;
  color: #fff;
  transform: scale(1.05);
  border-color: #ff7f50;
}
.radio-label span:hover {
  transform: scale(1.05);
}

/* 進度條 */
#progress {
  width: 100%;
  height: 6px;
  background-color: #fff0e5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

#progress .fill {
  height: 100%;
  width: 0;
  background-color: #ff7f50;
  transition: width 0.3s ease;
}

/* 舊的載入動畫（火柴人從胖變瘦、具有呼吸感） */
.loading-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.matchstick {
  position: relative;
  /* 放大火柴人以提升可見度 */
  width: 120px;
  height: 170px;
  margin-bottom: 10px;
}

.matchstick .head {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* 使用更鮮亮的橙色與陰影，使火柴人頭部在暖色背景中更突出 */
  background-color: #ffae71;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}

.matchstick .body {
  width: 50px;
  height: 100px;
  background-color: #ffe4d6;
  margin: 0 auto;
  border-radius: 10px;
  animation: shrink 3s infinite;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

@keyframes shrink {
  0% {
    width: 60px;
  }
  50% {
    width: 25px;
  }
  100% {
    width: 60px;
  }
}

.loading-text {
  font-size: 18px;
  color: #b8543b;
}

/* 隱藏手腳元素，保留簡約火柴人造型 */
.arm,
.leg {
  display: none;
}

/* 新的載入覆蓋層，用於顯示吉祥物追逐蝴蝶 */
/* 載入覆蓋層：覆蓋全畫面並置中內容 */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 248, 240, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#loadingOverlay .overlay-content {
  text-align: center;
  color: #743c23;
}

/* 火柴人載入動畫 */
@keyframes shrink {
  0% {
    width: 50px;
  }
  50% {
    width: 20px;
  }
  100% {
    width: 50px;
  }
}

/* 固定跑步動畫容器：置於底部中間 */
#runnerContainer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
}

/* 調整 runnerContainer 中的火柴人尺寸 */
#runnerContainer .matchstick {
  width: 80px;
  height: 130px;
  position: relative;
}
#runnerContainer .matchstick .head {
  width: 25px;
  height: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#runnerContainer .matchstick .body {
  width: 45px;
  height: 80px;
  border-radius: 10px;
  animation: shrink 3s infinite;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 載入遮罩樣式：覆蓋全畫面但允許滾動鎖定 */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 249, 243, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 20px;
  color: #b8543b;
}

/* 設置目標資訊文字樣式 */
.goal-info {
  font-size: 14px;
  color: #743c23;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: left;
}

/* 結果表格 */
#results {
  text-align: left;
  margin-bottom: 20px;
}

/* 將生活習慣步驟的標籤置中 */
/* 將步驟3的問題標題置中，但不影響選項本身 */
.step[data-step="3"] label:not(.radio-label) {
  width: 100%;
  text-align: center;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
}

.results-table th,
.results-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
}

.results-table th {
  background-color: #ffeadc;
  color: #743c23;
}

.results-table td {
  text-align: center;
}

/* CTA區塊的樣式 */
.cta-block {
  /* CTA 區塊使用稍微柔和的淺奶油色調以配合背景 */
  background-color: rgba(255, 248, 240, 0.95);
  border-radius: 12px;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center; /* 讓內部按鈕置中 */
}
.cta-block h3 {
  margin-top: 15px;
  margin-bottom: 8px;
  color: #c75a3b;
}
.cta-block p {
  margin: 5px 0 15px;
  text-align: left;
  line-height: 1.5;
}
.cta-button {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 24px;
  background-color: #ff7f50;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.2s ease;
  /* 讓按鈕具有呼吸動畫，吸引注意 */
  animation: breathe 3s ease-in-out infinite;
  /* 讓按鈕在父元素中置中 */
  margin-left: auto;
  margin-right: auto;
}
.cta-button:hover {
  background-color: #ff5a26;
}

/* 呼吸動畫：按鈕緩慢放大縮小以吸引使用者注意 */
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* 響應式設計：在寬度小於600px時調整布局與字型 */
@media (max-width: 600px) {
  .section {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
  }
  h1, h2 {
    font-size: 22px;
  }
  label {
    font-size: 14px;
  }
  button, .cta-button {
    font-size: 14px;
    padding: 10px 20px;
  }
  .matchstick {
    width: 90px;
    height: 130px;
  }
  .matchstick .head {
    width: 24px;
    height: 24px;
  }
  .matchstick .body {
    height: 90px;
  }
  .results-table th, .results-table td {
    font-size: 13px;
  }
  .cta-block {
    margin-top: 20px;
    padding: 15px;
  }
}

/* 固定火柴人動畫於頁面底部中央，使其不受其他元素影響 */
#runnerContainer {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
}
.pdf-btn{
  display:inline-block;
  padding:10px 16px;
  background:#0073aa;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.pdf-btn:hover{
  background:#005177;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}