/* =========================
   基本變數與全域
   ========================= */
:root{
  --color-text:#1f2937;
  --color-primary:#0ea5e9;
  --color-primary-dark:#0f766e;
  --color-bg:#f8fafc;
  --radius:12px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Noto Sans TC","微軟正黑體",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang TC",sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
}

/* =========================
   導覽列 + 中央資訊膠囊
   ========================= */
header.navbar{
  background:#fff;
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
}
.navbar .wrap{
  max-width:1200px; margin:0 auto;
  padding:12px 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr; /* 左：品牌｜中：資訊｜右：連結 */
  align-items:center;
}
.brand{ font-weight:700; font-size:18px; }

.nav-actions{ justify-self:end; }
.nav-actions a{
  margin-left:16px; text-decoration:none; color:#334155;
  padding:6px 10px; border-radius:8px;
}
.nav-actions a:hover{ background:#f1f5f9; }
.nav-actions a.active{ background:#e6f6fe; color:#0b4a6f; font-weight:700; }

/* 導覽列中間考生資訊 */
.nav-info{
  justify-self:center;
  font-size:14px;
  color:#0b4a6f;
  background:#e6f6fe;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:var(--shadow);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;
}

/* =========================
   Hero（啟動頁會用到）
   ========================= */
.hero{
  background:linear-gradient(135deg,#0ea5e9 0%,#22d3ee 60%,#a5f3fc 100%);
  padding:60px 20px;
  text-align:center;
  color:#06334a;
}
.hero h1{ margin:0 0 10px; font-size:36px; }
.hero p{ margin:0 0 20px; font-size:16px; }
.cta{
  background:#fff; color:#0f172a;
  padding:10px 18px; border-radius:999px; font-weight:700;
  text-decoration:none; box-shadow:var(--shadow);
}
.cta:hover{ transform:translateY(-2px); }

/* =========================
   卡片容器（啟動頁/作答頁皆用）
   ========================= */
.container{
  background:#fff; max-width:720px; margin:40px auto; padding:2em;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
h2{ text-align:center; margin:0 0 16px; }

/* 小提醒膠囊（可選） */
.tip{
  background:#fff7e6; color:#7c5200; border:1px solid #ffe0a3;
  border-radius:999px; padding:8px 12px; margin:6px auto 12px;
  display:inline-block; box-shadow:var(--shadow); font-size:14px;
}

/* =========================
   表單輸入（僅限文字類型）
   ========================= */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"]{
  width:100%; padding:0.8em 1em; margin:0.6em 0;
  font-size:1em; border:1px solid #ccc; border-radius:6px;
}

/* 選項（radio）排版：一行一個，圖文置中對齊 */
.choices label{
  display:flex; align-items:center; gap:8px;
  margin:8px 0; line-height:1.4;
}
.choices input[type="radio"]{
  width:auto; margin:0; flex:0 0 auto;
}

/* 題幹中的圖片 */
.question-text img{ max-width:100%; height:auto; margin-top:.5em; }

/* =========================
   按鈕
   ========================= */
button{
  width:100%; background:var(--color-primary); color:#fff;
  font-size:1.1em; padding:0.7em; border:none;
  border-radius:6px; cursor:pointer;
}
button:hover{ background:var(--color-primary-dark); }

.btn-prev{ background:#6c757d; }
.btn-next{ background:#0ea5e9; }
.btn-submit{ background:#0f766e; width:100%; margin-top:1em; }
.btn-prev:hover, .btn-next:hover, .btn-submit:hover{ opacity:.9; }

/* =========================
   進度條（#progress）
   ========================= */
#progress{
  position:relative; margin:8px auto 14px; height:14px;
  background:#e5eef5; border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06); overflow:hidden;
}
#progress::before{
  content:""; position:absolute; inset:0; width:var(--prog,0%);
  background:linear-gradient(90deg,#0ea5e9,#22d3ee);
  box-shadow:0 0 10px rgba(34,211,238,.35) inset;
  transition:width .35s ease;
}
#progress::after{
  content:attr(data-label); position:absolute; left:50%; top:-22px;
  transform:translateX(-50%); font-size:13px; color:#475569;
}

/* =========================
   解析（details）
   ========================= */
/* 一般解析元件 */
.explain{
  margin:8px 0 12px;
  border:1px dashed #bae6fd;
  background:#f0f9ff;
  border-radius:10px;
}
.explain summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  margin:6px 8px; padding:6px 10px;
  background:#e6f6fe; color:#0b4a6f;
  border-radius:999px; font-weight:700;
  box-shadow:var(--shadow);
}
.explain summary::-webkit-details-marker{ display:none; }
.explain .explain-body{
  padding:0 12px 12px 12px; color:#334155; line-height:1.6;
  max-height:240px; overflow:auto; /* 內容過長可捲動 */
}
.explain[open] summary{ background:#d1fadf; color:#065f46; }

/* 放在題號行右側的解析（.q-head 內） */
.q-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.q-head h3{ margin:0; }
.q-head .explain.as-head{
  margin-left:auto; border:none; background:transparent; padding:0;
}
.q-head .explain.as-head summary{
  /* 只影響抬頭右側那顆，避免覆蓋一般解析 */
  margin:0;
}
.q-head .explain.as-head[open]{ width:100%; }
.q-head .explain.as-head[open] .explain-body{
  margin-top:8px;
}

/* =========================
   頁腳
   ========================= */
footer{
  margin-top:40px; background:#0b1220; color:#cbd5e1;
  text-align:center; padding:16px;
}

/* =========================
   RWD
   ========================= */
@media (max-width:900px){
  .nav-info{ max-width:70vw; font-size:12px; padding:4px 8px; }
}
@media (max-width:560px){
  .hero h1{ font-size:28px; }
  .container{ margin:24px auto; padding:1.25em; }
}

/* ========== 手機版修正：避免再試一次壓到首頁 ========== */
@media (max-width: 560px) {
  .navbar .wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand actions"
      "info  info";
    gap: 8px;
    padding: 10px 12px;
  }
  .brand {
    grid-area: brand;
  }
  .nav-actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    gap: 8px;
  }
  .nav-info {
    grid-area: info;
    justify-self: stretch;
    max-width: 100%;
    white-space: nowrap; /* 如要允許換行可改成 normal */
  }
  .nav-actions a {
    margin-left: 0;
    padding: 6px 10px;
  }
}