/* 디지털 기초 미션 — 퀴즈 공용 스타일 */

.q-progress { display: flex; justify-content: space-between; align-items: center; max-width: 560px; margin: 0 auto 16px; font-size: .9rem; font-weight: 800; color: #64748B; }
.q-progress .q-score { color: #7C3AED; }

.q-card {
  max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 18px; padding: 28px 26px; box-shadow: 0 8px 28px rgba(0,0,0,.07);
}
.q-card .q-no { font-size: .78rem; font-weight: 900; color: #7C3AED; letter-spacing: .06em; }
.q-card h2 { font-size: 1.25rem; font-weight: 900; margin: 8px 0 20px; line-height: 1.6; word-break: keep-all; }

.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; color: #1F2937;
  background: #F8FAFC; border: 2px solid #E2E8F0; border-radius: 12px;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.q-opt:hover { border-color: #93C5FD; background: #F0F6FF; }
.q-opt .q-letter {
  width: 28px; height: 28px; border-radius: 50%; background: #E2E8F0; color: #475569;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 900; flex-shrink: 0;
}
.q-opt.correct { border-color: #22C55E; background: #F0FDF4; }
.q-opt.correct .q-letter { background: #22C55E; color: #fff; }
.q-opt.wrong { border-color: #EF4444; background: #FEF2F2; }
.q-opt.wrong .q-letter { background: #EF4444; color: #fff; }
.q-opt:disabled { cursor: default; }
.q-opt:disabled:hover { border-color: inherit; }

.q-exp {
  display: none; margin-top: 16px; border-radius: 12px; padding: 14px 16px;
  font-weight: 700; line-height: 1.65; word-break: keep-all; animation: fbIn .25s ease;
}
.q-exp.show-good { display: block; background: #F0FDF4; border: 2px solid #86EFAC; color: #15803D; }
.q-exp.show-bad { display: block; background: #FEF2F2; border: 2px solid #FECACA; color: #B91C1C; }

.q-next { text-align: center; margin-top: 18px; }

.q-end { max-width: 560px; margin: 0 auto; text-align: center; background: #fff; border: 2px solid #DDD6FE; border-radius: 20px; padding: 40px 28px; }
.q-end .qe-emoji { font-size: 3.6rem; }
.q-end h2 { font-size: 1.5rem; font-weight: 900; margin: 12px 0 4px; }
.q-end .qe-score { font-size: 2.4rem; font-weight: 900; color: #7C3AED; margin: 10px 0; }
.q-end p { color: #4B5563; line-height: 1.8; word-break: keep-all; margin-bottom: 20px; }
.q-end .btn { margin: 4px; }