:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

.container{
  width:min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.hidden{ display:none !important; }

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(246,247,251,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.brand-dot{
  width:28px;height:28px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid var(--line);
}
.brand-title{ white-space:nowrap; }
.brand-sub{
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
}

.page{ padding: 22px 0 40px; }

/* ---------- Buttons ---------- */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}
.btn-primary:hover{
  background: var(--primary2);
  border-color: var(--primary2);
}
.btn-ghost{
  background:#fff;
}
.btn-wide{
  width:100%;
  padding:12px 14px;
}

/* ---------- Landing ---------- */
.hero{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:18px;
  align-items:stretch;
}

.hero-main{
  background: linear-gradient(90deg, rgba(255, 247, 207,.9), rgba(214, 246, 255,.9));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
}

.hero-kicker{
  font-weight:700;
  color:#0f172a;
  margin-bottom:10px;
  font-size:14px;
}

.hero-title{
  margin:0 0 12px;
  font-size:32px;
  letter-spacing:.3px;
}

.hero-desc{
  margin:0 0 14px;
  line-height:1.7;
  color:#111827;
}

.hero-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}

.hero-side .ticket{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  height:100%;
}
.ticket-title{
  font-weight:800;
  margin-bottom:10px;
}
.ticket-route{
  color:#374151;
  line-height:1.6;
  font-size:14px;
  margin-bottom:12px;
}
.ticket-quote{
  border-top:1px dashed var(--line);
  padding-top:12px;
  color:#111827;
  font-size:14px;
}

/* ---------- Carousel ---------- */
.carousel-wrap{
  margin-top:18px;
}
.section-title{
  margin: 0 0 12px;
  font-size:18px;
}
.section-subtitle{
  margin: 18px 0 10px;
  font-size:16px;
  color:#111827;
}

.bao-carousel{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden; /* 防止桌機跑版的第一道保險 */
  padding: 10px 10px 16px;
}

.bao-track{
  display:flex;
  gap:0;
  transform: translateX(0);
  transition: transform .35s ease;
  will-change: transform;
}

.bao-slide{
  flex: 0 0 100%;
  display:grid;
  place-items:center;
  padding: 18px 12px 8px;
  min-height: 260px; /* 桌機也不會扁掉 */
}

.bao-slide img{
  width: min(180px, 50vw);
  height:auto;
}

.bao-caption{
  margin-top:10px;
  color:#374151;
  font-size:14px;
  text-align:center;
}

.bao-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  padding-top:10px;
}
.bao-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:#d1d5db;
}
.bao-dot.active{
  width:20px;
  background: var(--primary);
}

/* ---------- Quiz ---------- */
.quiz-head{
  margin-bottom:14px;
}

.progress-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.progress-text{
  width:84px;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
}
.progress-bar{
  flex:1;
  height:10px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background: var(--primary);
  width:0%;
  transition: width .2s ease;
}

.quiz-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.q-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.q-station{
  font-weight:800;
  color:#0f172a;
  font-size:14px;
}

.q-text{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.6;
}

.q-options{
  display:grid;
  gap:10px;
}

.opt{
  border:1px solid var(--line);
  border-radius: 14px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  background:#fff;
}
.opt:hover{
  border-color:#c7d2fe;
  background:#f8fafc;
}
.opt input{ margin:0; }

.opt .opt-title{
  font-weight:700;
}
.opt .opt-desc{
  color:var(--muted);
  font-size:13px;
}

.nav-row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:14px;
}

.submit-area{
  margin-top:18px;
  border-top:1px dashed var(--line);
  padding-top:16px;
}
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.grid-span-2{ grid-column: span 2; }

.field{
  display:grid;
  gap:6px;
}
.field span{
  font-size:13px;
  color:#374151;
  font-weight:700;
}
.field input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.field input:focus{
  border-color:#93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.checkbox{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:12px 0 12px;
  color:#374151;
  font-size:14px;
  line-height:1.45;
}
.checkbox input{ margin-top:3px; }

.hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}

.q-scene{
  margin: 8px 0 12px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

/* 基礎表單樣式 */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.field > span {
  font-weight: 500;
  margin-bottom: 0.5em;
  color: #333;
}

.field select {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  background: #fafafa;
  color: #222;
  outline: none;
  transition: border-color 0.2s;
}

.field select:focus {
  border-color: #0078d4;
}

/* ---------- Result ---------- */
.result-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:18px;
  align-items:start;
}

.result-ticket{
  border-radius: 1.5rem;
  border:1px solid var(--line);
  background: #fffbeb;
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;

  /* 進場動畫 */
  opacity:0;
  transform: translateY(12px);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.result-ticket.is-visible{
  opacity:1;
  transform: translateY(0);
}

.result-ticket-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.result-ticket-header h2{
  margin:0;
  font-size:16px;
  letter-spacing:.25em;
}

.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line);
  background:#fff;
}

.result-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin: 10px 0 10px;
}
.kpi{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}
.kpi-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.kpi-value{
  font-size:20px;
  font-weight:900;
  margin-top:4px;
}

.result-note{
  margin: 10px 0 0;
  color:#111827;
  line-height:1.65;
}


/* 只影響乘車證，不影響四向度區塊 */
#ticket-card .doll-wrap,
#ticket-card .doll-layer{
  display: none !important;
}

#ticket-card .ticket-visual{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 紙娃娃疊圖：桌機不跑版的關鍵 */
.result-doll-wrap{
  margin-top:14px;
  border-top:1px dashed var(--line);
  padding-top:14px;
}
.result-doll{
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  position:relative;
  overflow:hidden;
  margin: 0 auto;
}
.doll-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain; /* 圖永遠縮在框內 */
}

.doll-actions{
  margin-top:10px;
  display:grid;
  gap:6px;
}

.dim-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.dim-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  display:grid;
  gap:10px;
}
.dim-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dim-title{
  font-weight:900;
}
.dim-level{
  font-size:12px;
  font-weight:900;
  color:#111827;
  background:#f3f4f6;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}
.dim-figure{
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  border-radius: 14px;
  padding: 10px;
  background:#fafafa;
}
.dim-figure img{
  width: min(160px, 40vw);
  height:auto;
}
.dim-text{
  margin:0;
  color:#111827;
  line-height:1.7;
}

/* 勸募資訊：不要只是「一塊文字」，用卡片與印章感 */
.finale{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.finale h2{
  margin:0 0 10px;
  font-size:18px;
}
.finale-cards{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
}
.finale-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.finale-card.subtle{
  background: #f8fafc;
}
.finale-stamp{
  position:absolute;
  top:12px;
  right:12px;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.2);
  color:#1d4ed8;
}
.finale-lead{
  margin:0 0 10px;
  line-height:1.7;
  font-weight:800;
}
.finale-text{
  margin:0 0 10px;
  color:#111827;
  line-height:1.7;
}
.finale-details summary{
  cursor:pointer;
  font-weight:900;
  margin-bottom:6px;
}
.finale-details ul{
  margin:8px 0 0 18px;
  color:#111827;
  line-height:1.7;
}

.finale-mini{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px dashed var(--line);
  background:#fff;
}
.mini-title{ font-weight:900; margin-bottom:6px; }
.mini-text{ color:#111827; line-height:1.7; }

.result-footer{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

.site-footer{
  border-top:1px solid var(--line);
  padding:16px 0;
  color:var(--muted);
}

/* ---------- Responsive (Improved) ---------- */
/* ---------- Responsive (fix) ---------- */
@media (max-width: 920px){
  .hero, .result-grid, .finale-cards{
    display: grid;              /* 確保它真的是 grid 容器 */
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 手機：真正會看得出差異的地方 */
@media (max-width: 640px){
  .brand-sub{ display:none; }

  .grid-2, .dim-grid{
    display: grid;              /* 同樣保險：避免其實是 flex */
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .grid-span-2{
    grid-column: 1 / -1;        /* 比 auto 穩定 */
  }

  /* 你截圖選到的就是這個：h1.hero-title */
  .hero-title{
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: .2px;
    margin: 0 0 10px;
  }

  /* 這個只有在題目文字真的叫 q-text 才會有效 */
  .q-text{
    font-size: 17px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  /* 所有按鈕/連結按鈕：好點、撐滿 */
  button, .btn, a.btn{
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* 常見按鈕列：改直排（你有哪個就套哪個 class） */
  .nav-row, .btn-row, .cta-row, .actions, .result-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 如果你的 CTA 有 grid 排版，也改單欄 */
  .cta-grid, .grid-2{
    grid-template-columns: 1fr;
  }
  
}

/* ===== Result ticket: 把背景圖放在白色框，不要撐高黃色區 ===== */
#ticket-card .ticket-visual{
  display: none !important; /* 上面黃色區不再被圖撐高 */
}

/* 白色框顯示背景圖 */
#ticket-card .result-doll{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 乘車證只顯示背景，不顯示紙娃娃疊圖（不影響四向度區） */
#ticket-card .doll-layer{
  display: none !important;
}

/* ===== CTA：避免與 details 重疊（桌機/手機通用） ===== */
.finale-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.finale-cta .btn{
  flex: 1 1 260px;   /* 桌機可並排，空間不足就自動換行 */
}

/* details 展開時留出空間（避免視覺擠壓） */
.finale-details{
  margin-bottom: 10px;
}
.finale-details[open] summary{
  margin-bottom: 8px;
}

/* ===== 手機：按鈕必定直排滿寬（你原本已做，但這裡針對 finale-cta 再保險） ===== */
@media (max-width: 640px){
  .finale-cta{
    flex-direction: column;
  }
  .finale-cta .btn{
    width: 100%;
  }
}