/* ============================================================
   共用樣式:所有頁面共用的設計系統(顏色、按鈕、表單、卡片)
   ============================================================ */
* { box-sizing: border-box; }

:root {
  /* 全站統一色彩系統:主色調不超過三種(莫蘭迪綠 + 暖金,用米白當背景),字體用深灰。
     assessment.html 裡「各大類別」對應的動態顏色是唯一例外,因為那是用來區分卡牌分類的功能性配色。 */
  --brand-green: #6F8F72;
  --brand-gold: #C7A86B;
  --bg-cream: #FAF7F2;
  --text-main: #333333;
  --text-muted: #6b6459;
  --brand-dark: #333333;
  --accent: #6F8F72;
  --accent-dark: #5a7a5d;
  --bg-page: #FAF7F2;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Noto Sans TC", sans-serif;
  background: var(--bg-page);
  margin: 0; padding: 0;
  color: var(--text-main);
  min-height: 100vh;
}

.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

/* ---------- 導覽列 ---------- */
.navbar {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1rem 1.5rem; background:#fff; box-shadow: 0 2px 10px rgba(15,23,42,0.06);
  position: sticky; top:0; z-index: 10;
}
.navbar .brand-name { font-weight:700; color:var(--brand-dark); font-size:1.05rem; text-decoration:none; white-space:nowrap; }
.navbar nav { display:flex; flex-wrap:nowrap; gap:1.2rem; }
.navbar nav a {
  margin-left: 0; text-decoration:none; color: var(--text-muted); font-weight:600; font-size:0.92rem; white-space:nowrap;
}
.navbar nav a:hover, .navbar nav a.active { color: var(--accent-dark); }

/* 手機版:縮小品牌名稱與導覽字體、間距,確保「商店」不會被擠到下一行 */
@media (max-width: 480px) {
  .navbar { padding: 0.8rem 1rem; }
  .navbar .brand-name { font-size:0.78rem; }
  .navbar nav { gap:0.6rem; }
  .navbar nav a { font-size:0.78rem; }
}

/* ---------- 版面容器 ---------- */
.page-container { max-width: 720px; margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.center-card {
  background:#fff; border-radius:18px; box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  padding: 1.8rem; max-width: 480px; margin: 2rem auto; text-align:left;
}

/* ---------- 按鈕 ---------- */
.btn-primary {
  width:100%; padding:0.95rem; border:none; border-radius:12px;
  background: linear-gradient(135deg,#6F8F72,#5a7a5d); color:#fff; font-size:1.05rem; font-weight:700; cursor:pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px rgba(111,143,114,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(111,143,114,0.45); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform:none; box-shadow:none; }

.option-btn {
  display:block; width:100%; margin: 0.8rem 0; padding: 1.05rem;
  border:2px solid #C7A86B; border-radius: 12px; background:#FAF7F2;
  color:#6F8F72; font-size:1.03rem; font-weight:600; cursor:pointer; text-align:left;
  transition: 0.2s;
}
.option-btn:hover { background:#6F8F72; color:#fff; transform: translateY(-1px); }

/* ---------- 表單 ---------- */
.form-row { margin-bottom: 0.9rem; }
.form-row label { display:block; font-size:0.88rem; font-weight:600; color:#334155; margin-bottom:0.3rem; }
.form-row input, .form-row select {
  width:100%; padding:0.65rem 0.75rem; font-size:0.95rem;
  border:1px solid #ddd4c4; border-radius:8px; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus, .form-row select:focus {
  outline:none; border-color:#6F8F72; box-shadow: 0 0 0 3px rgba(111,143,114,0.15);
}
.form-row .required { color:#ef4444; }

.consent-row { display:flex; align-items:flex-start; gap:0.5rem; background:#f8fafc; padding:0.8rem; border-radius:8px; margin-bottom:0.8rem; }
.consent-row input[type="checkbox"] { margin-top:0.25rem; width:auto; flex-shrink:0; }
.consent-row .consent-text { font-size:0.82rem; color:#475569; line-height:1.6; }
.consent-row a { color:#6F8F72; }

.checkbox-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:0.5rem; }
.checkbox-item {
  display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; font-weight:500; color:#334155;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:0.55rem 0.7rem; cursor:pointer;
  transition: background 0.15s, border-color 0.15s;
}
.checkbox-item:hover { background:#faf3e8; }
.checkbox-item input[type="checkbox"] { width:auto; accent-color:#6F8F72; cursor:pointer; }
.checkbox-item:has(input:checked) { background:#eef3ec; border-color:#a8c2ab; color:#5a7a5d; font-weight:700; }

.error-msg {
  display:none; color:#dc2626; background:#fef2f2; border:1px solid #fecaca;
  padding:0.6rem 0.8rem; border-radius:8px; font-size:0.85rem; margin-top:0.8rem; text-align:center;
}

.section {
  background:#fff; padding:1.3rem 1.4rem; margin:1rem auto; max-width:560px; border-radius:16px;
  box-shadow:0 6px 20px rgba(15,23,42,0.06); text-align:left;
}
.section h3 { text-align:center; color:#333333; margin-top:0; }

.footer-note { text-align:center; color:#94a3b8; font-size:0.8rem; margin: 2rem 0 1rem; line-height:1.6; }

/* ---------- 響應式輔助:區分手機版/電腦版顯示不同內容區塊 ---------- */
.mobile-only { display:block; }
.desktop-only { display:none; }
@media (min-width: 900px) {
  .mobile-only { display:none; }
  .desktop-only { display:block; }
}