/* 일일 증시 퀴즈 — /quiz 페이지 + 랜딩 티저.
   app.css 토큰만 쓴다. 종이면(surface-paper)이 기본이고 어두운 면(surface-dark)은 아래 덮어쓴다. */

.qz-page__head { margin-bottom: 2.5rem; }
.qz-page__lede { max-width: 40rem; }

.qz-list { display: grid; gap: 1.25rem; }

.qz-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem 1.5rem 1.2rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.qz-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.qz-card__no {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-600);
}
.qz-card__tag {
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-500);
}
.qz-card__rate {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.qz-card__q {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-900);
  text-wrap: balance;
}

.qz-opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.qz-opt {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.qz-opt:hover:not(:disabled) { border-color: var(--gold-500); background: #fff; }
.qz-opt:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.qz-opt:disabled { cursor: default; }
.qz-opt__mark { font-family: var(--font-mono); color: var(--ink-500); flex: none; }
.qz-opt__text { flex: 1; }
.qz-opt.is-correct { border-color: var(--gold-500); background: #fbf5e6; color: var(--ink-900); }
.qz-opt.is-correct .qz-opt__mark { color: var(--gold-600); }
.qz-opt.is-wrong { border-color: var(--red-200); background: var(--red-50); color: var(--ink-700); }
.qz-opt.is-wrong .qz-opt__mark { color: var(--red-600); }
.qz-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: 0.55; }

.qz-card__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.5rem;
}
.qz-reveal {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.qz-reveal:hover { color: var(--gold-600); }
.qz-msg { font-size: 0.8125rem; color: var(--ink-500); }
.qz-msg--err { color: var(--red-600); }

.qz-answer {
  border-top: 1px solid var(--ink-100);
  padding-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}
.qz-answer__verdict { font-weight: 700; font-size: 0.9375rem; }
.qz-answer__verdict.is-right { color: var(--gold-600); }
.qz-answer__verdict.is-wrong { color: var(--red-600); }
.qz-answer__verdict.is-neutral { color: var(--ink-700); }
.qz-answer__expl { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--ink-700); }
.qz-answer__src {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-500);
}
.qz-answer__src:empty { display: none; }
.qz-answer__src-label { letter-spacing: 0.06em; }
.qz-answer__src-link { color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; }
.qz-answer__src-plain { color: var(--ink-500); }

.qz-pager { margin-top: 2rem; }

.qz-recent { margin-top: 1.75rem; }
.qz-recent__label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 0.5rem;
}
.qz-recent__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qz-recent__item {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  text-decoration: none;
}
.qz-recent__item:hover { border-color: var(--gold-500); }
.qz-recent__item.is-active { background: var(--ink-900); color: var(--ink-50); border-color: var(--ink-900); }

.qz-cta { margin-top: 3rem; }
.qz-disclaimer { margin-top: 2rem; font-size: 0.75rem; color: var(--ink-500); line-height: 1.7; }

/* ── 랜딩 티저 (밝은 면, 1문항) ─────────────────────────── */
.qz-teaser { max-width: 42rem; }
.qz-teaser__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
  padding-bottom: 2px;
}
.qz-teaser__more:hover { color: var(--gold-600); }

@media (max-width: 640px) {
  .qz-card { padding: 1.1rem 1rem 1rem; }
  .qz-card__rate { margin-left: 0; width: 100%; }
}