/* test.css — 미니 진단(test.html) 전용 스타일.
 * 진단 셸 · 인트로 · 문항 · 진행바 · 결과 화면. 공통 뼈대는 base.css 참고.
 */

/* ── 미니 진단 ────────────────────────────────── */
.quiz-main { padding-block: clamp(7rem, 13vh, 8.5rem) var(--space-3xl); }

.quiz-shell { max-width: 42rem; margin-inline: auto; }

.quiz-progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-block-end: var(--space-xs);
}

/* display 지정이 hidden 속성을 이기지 않게 */
.quiz-progress[hidden], .quiz-bar[hidden] { display: none; }

.quiz-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  overflow: hidden;
  margin-block-end: var(--space-lg);
}

.quiz-bar__fill {
  height: 100%;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-long) var(--ease-out);
}

.quiz-card {
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 4.5vw, var(--space-xl));
}

.quiz-card--enter { animation: qswap var(--dur-short) var(--ease-out) backwards; }

@keyframes qswap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.quiz-card h1, .quiz-card h2 { font-size: var(--text-lg); max-width: 24ch; }

/* 스크린리더용으로 스크립트가 제목에 포커스를 옮기지만(tabindex=-1),
   눈에 보이는 포커스 테두리는 숨긴다 — 사용자가 직접 탭으로 이동한 게 아니므로. */
.quiz-card [data-focus]:focus { outline: none; }

.quiz-intro__lede { margin-block-start: var(--space-md); max-width: 32rem; color: var(--color-ink-2); }
.quiz-intro__soft { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.quiz-intro .btn { margin-block-start: var(--space-lg); }

.opts {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.opt {
  display: block;
  width: 100%;
  min-height: 48px;
  text-align: left;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  font: inherit;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.opt:hover {
  border-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
}

.opt:active { transform: scale(0.99); }

.opt[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
  font-weight: 600;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-lg);
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
}

.btn-quiet:hover { color: var(--color-ink); }
.btn-quiet:disabled { opacity: 0; pointer-events: none; }

/* 결과 */
.result__kicker {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-text);
}

.result h2 { margin-block-start: var(--space-2xs); font-size: var(--text-xl); }

.result__head {
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.4;
  max-width: 26ch;
}

.result__body { margin-block-start: var(--space-sm); max-width: 34rem; color: var(--color-ink-2); }

.result__sub { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.result__solve {
  margin-block-start: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-paper);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 34rem;
  color: var(--color-ink-2);
}

.result__solve strong { color: var(--color-ink); }

.result__cta {
  margin-block-start: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.result__soft { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }