/* 퀴즈 탭 (8번) */
.qzhero { display: grid; gap: 14px; }
.qzgrade { display: grid; gap: 2px; justify-items: center; text-align: center; }
.qzgrade small { color: var(--muted); }
.qzgrade b { font-family: var(--f-mono); font-size: 56px; line-height: 1.05; color: var(--accent); }
.qzscale { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; }
.qzscale i { height: 10px; border-radius: 3px; background: var(--surface2); }
.qzscale i.st { margin-left: 4px; }
.qzscale i.past { background: color-mix(in srgb, var(--accent) 40%, var(--surface2)); }
.qzscale i.on { background: var(--accent); }
.qzscl { display: grid; grid-template-columns: repeat(5, 1fr); font-size: 11px; color: var(--muted); text-align: center; font-family: var(--f-mono); }
.qzbank { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qzbank span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: var(--surface2); font-size: 12px; color: var(--muted); }
.qzbank b { font-family: var(--f-mono); font-size: 16px; color: var(--fg); }
.qzq { display: grid; gap: 10px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.qzmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.qzlv { padding: 2px 8px; border-radius: 999px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.qztext { font-family: var(--f-kana); font-size: 21px; line-height: 1.8; font-weight: 500; }
.qztext u { text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.qzopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qzopt { position: relative; min-height: 56px; padding: 8px 12px 8px 34px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-family: var(--f-kana); font-size: 18px; text-align: left; }
.qzopt kbd { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.qzopt:not(:disabled):hover { border-color: var(--accent); }
.qzopt.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.qzopt.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.qzopt.dim { opacity: .55; }
@media (max-width: 480px) { .qzopts { grid-template-columns: 1fr; } }
.note.good { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.note.err { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.qzrev { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-family: var(--f-kana); }
.qzrev:first-of-type { border-top: 0; }
.qzchart { width: 100%; height: auto; }
.qzchart line.g { stroke: var(--line); stroke-width: 1; }
.qzchart text { fill: var(--muted); font-size: 9px; font-family: var(--f-mono); }
.qzchart polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.qzchart circle { fill: var(--accent); }
.qzfmt { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-family: var(--f-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }
#paste { min-height: 0; padding: 10px 12px; line-height: 1.6; font: inherit; }
.rowcard .lbtn { border: 0; background: none; color: var(--bad); font-size: 16px; }
.rowcard .rs:not(.kana) { font-family: var(--f-mono); font-size: 15px; font-weight: 700; }