/* 緒論互動練習 · 樣式（2026-10-07）
   配色沿用站內 CSS 變數（--ink / --clay / --gold / --border），與筆記頁同一套視覺。 */

.zq-wrap { margin: 22px 0 34px; }

/* ---------- 進度條 ---------- */
.zq-bar { margin-bottom: 18px; }
.zq-bar-in {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-2, #4A4239);
  background: var(--paper-2, #FBF6EC);
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 10px;
  padding: 9px 14px;
}
.zq-bar-in b { color: var(--clay, #A83E2E); font-weight: 700; }
.zq-reset {
  margin-left: auto;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink-3, #6D6358);
  background: transparent;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 7px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.zq-reset:hover { color: var(--clay, #A83E2E); border-color: var(--clay, #A83E2E); }

/* ---------- 單題卡 ---------- */
.zq {
  background: #fff;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 12px;
  padding: 16px 18px 14px;
  margin-bottom: 14px;
}
.zq-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.zq-n {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-3, #6D6358);
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 5px;
  padding: 1px 8px;
}
.zq-pips { display: flex; gap: 4px; }
.zq-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border, #E0D7C8);
  display: inline-block;
}
.zq-pip.is-done { background: var(--gold, #a07d1c); }
.zq-pip.is-ok { background: #2E6F6B; }
.zq-pip.is-no { background: var(--clay, #A83E2E); }

.zq-q {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink, #2E2A25);
  margin: 0 0 12px;
}

/* ---------- 選項 ---------- */
.zq-choices { list-style: none; margin: 0 0 12px; padding: 0; }
.zq-c {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2, #4A4239);
  background: var(--paper, #FFFDF8);
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 9px;
  padding: 9px 13px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.zq-c:hover:not(.is-lock) {
  border-color: var(--clay, #A83E2E);
  background: #FFF9F0;
}
.zq-c:focus-visible { outline: 2px solid var(--clay, #A83E2E); outline-offset: 2px; }
.zq-k {
  flex: 0 0 auto;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--ink-3, #6D6358);
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 5px;
  padding: 0 6px;
  line-height: 20px;
}
/* 答對 */
.zq-c.is-a {
  border-color: #2E6F6B;
  background: #EAF3F2;
  color: #1F4F4C;
  font-weight: 600;
}
.zq-c.is-a .zq-k { color: #2E6F6B; border-color: #2E6F6B; }
/* 答錯（揀錯嗰個） */
.zq-c.is-x {
  border-color: var(--clay, #A83E2E);
  background: #FBEDEA;
  color: #8A2E22;
}
.zq-c.is-x .zq-k { color: var(--clay, #A83E2E); border-color: var(--clay, #A83E2E); }
.zq-c.is-lock { cursor: default; }

/* ---------- 結果 ---------- */
.zq-fb { display: none; }
.zq-fb.is-on {
  display: block;
  border-top: 1px dashed var(--border, #E0D7C8);
  padding-top: 11px;
  margin-top: 2px;
}
.zq-verdict { font-size: 15px; font-weight: 700; margin: 0 0 7px; }
.zq-verdict.is-ok { color: #2E6F6B; }
.zq-verdict.is-no { color: var(--clay, #A83E2E); }

.zq-ans, .zq-why {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2, #4A4239);
  margin: 0 0 5px;
}
.zq-ans-l, .zq-why-l {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #fff;
  background: var(--ink-3, #6D6358);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 7px;
  vertical-align: 2px;
}
.zq-why-l { background: var(--gold, #a07d1c); }

.zq-hint { font-size: 13px; color: var(--ink-3, #6D6358); margin: 0; }

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .zq { padding: 14px 14px 12px; }
  .zq-q { font-size: 15px; }
  .zq-c { font-size: 14px; padding: 8px 11px; }
}