@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@400;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--color-paper:oklch(98.5% .004 250);--color-paper-2:oklch(96.2% .006 250);--color-paper-3:oklch(92.5% .009 250);--color-ink:oklch(24% .02 258);--color-ink-2:oklch(34% .018 257);--color-muted:oklch(48% .016 257);--color-rule:oklch(82% .012 255);--color-rule-strong:oklch(67% .018 255);--color-accent:oklch(55% .2 256);--color-accent-dark:oklch(43% .17 256);--color-accent-soft:oklch(93% .035 256);--color-accent-ink:oklch(98.5% .004 250);--color-focus:oklch(48% .2 256);--color-graphite:oklch(22% .016 260);--color-graphite-2:oklch(28% .018 260);--color-code-ink:oklch(94% .008 250);--color-code-muted:oklch(72% .012 255);--color-success:oklch(42% .105 154);--color-error:oklch(46% .16 27);--color-success-soft:oklch(94% .025 154);--color-error-soft:oklch(94% .028 27);--font-display:"Space Grotesk", "Noto Sans KR", sans-serif;--font-body:"Noto Sans KR", sans-serif;--font-mono:"JetBrains Mono", "Noto Sans KR", monospace;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;--space-4xl:9rem;--text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.25rem;--text-lg:1.5625rem;--text-xl:1.953rem;--text-2xl:2.441rem;--text-3xl:3.052rem;--text-display:clamp(3rem, 9vw, 6.5rem);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.1s;--dur-short:.18s;--dur-long:.42s;--rule-hairline:1px;--rule-heavy:2px;--radius-control:.375rem;--radius-panel:.625rem;--radius-round:999px;--page-gutter:clamp(1rem, 4vw, 3.5rem);--page-max:80rem;--tap-target:2.75rem}html,body{overflow-x:clip}.quiz-shell,.quiz-status-page{background:var(--color-paper);min-height:100svh;color:var(--color-ink-2);font-family:var(--font-body);font-size:var(--text-base)}.quiz-shell *,.quiz-status-page *{box-sizing:border-box}.quiz-shell button,.quiz-status-page button,.quiz-shell summary{font:inherit}.quiz-playground,.result-page{width:min(100%, var(--page-max));padding-inline:var(--page-gutter);margin-inline:auto}.quiz-button:active,.answer-option:active{transform:translateY(var(--space-3xs))}.quiz-button:focus-visible,.answer-option:focus-visible,.review-item summary:focus-visible{outline:var(--rule-heavy) solid var(--color-focus);outline-offset:var(--space-2xs)}.quiz-button:disabled,.answer-option:disabled{cursor:not-allowed;opacity:.5}.quiz-meta,.progress-rail__copy,.prompt-panel__meta,.answer-panel__heading,.review-item summary>span:first-child,.review-options__key,.review-options__state{font-family:var(--font-body);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.05em;text-transform:uppercase}.quiz-playground{padding-block:var(--space-xl) var(--space-3xl)}.progress-rail{gap:var(--space-sm);margin-bottom:var(--space-xl);display:grid}.progress-rail__copy{justify-content:space-between;gap:var(--space-md);color:var(--color-muted);display:flex}.progress-rail__copy span:first-child{color:var(--color-accent-dark)}.quiz-progress{height:var(--space-2xs);border-radius:var(--radius-round);background:var(--color-paper-3);color:var(--color-ink);overflow:clip}.quiz-progress>span{transform-origin:0;background:var(--color-accent);width:100%;height:100%;color:var(--color-accent-ink);transition:transform var(--dur-short) linear;display:block}.playground-board{border:var(--rule-hairline) solid var(--color-rule-strong);border-radius:var(--radius-panel);background:var(--color-paper);color:var(--color-ink);grid-template-columns:minmax(0,1fr);display:grid;overflow:clip}.prompt-panel,.answer-panel{min-width:0}.prompt-panel{min-height:26rem;padding:var(--space-lg);background:var(--color-graphite);color:var(--color-code-ink);flex-direction:column;display:flex}.prompt-panel__meta,.answer-panel__heading{justify-content:space-between;align-items:center;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:var(--rule-hairline) solid var(--color-graphite-2);display:flex}.prompt-panel__meta{color:var(--color-code-muted)}.prompt-panel__meta span:first-child{color:var(--color-accent)}.quiz-question{min-width:0;max-width:65ch;padding-block:var(--space-xl);font-family:var(--font-display);font-size:clamp(var(--text-md), 4vw, var(--text-xl));letter-spacing:-.035em;overflow-wrap:anywhere;margin-block:auto;font-style:normal;font-weight:600;line-height:1.35}.quiz-question>:first-child,.answer-option__copy>:first-child,.review-item__prompt>:first-child{margin-top:0}.quiz-question>:last-child,.answer-option__copy>:last-child,.review-item__prompt>:last-child{margin-bottom:0}.quiz-prose pre{max-width:100%;margin-block:var(--space-lg) 0;padding:var(--space-lg);border:var(--rule-hairline) solid var(--color-graphite-2);border-radius:var(--radius-control);background:var(--color-graphite-2);color:var(--color-code-ink);box-shadow:none;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.65;overflow-x:auto}.quiz-prose code.inline-flex{margin-inline:var(--space-3xs);padding:var(--space-3xs) var(--space-xs);border:var(--rule-hairline) solid var(--color-rule-strong);border-radius:var(--radius-control);background:var(--color-paper-3);color:var(--color-accent-dark);font-family:var(--font-mono);overflow-wrap:anywhere;white-space:normal;font-size:.85em;font-weight:500;display:inline}.prompt-panel .quiz-prose code.inline-flex{border-color:var(--color-graphite-2);background:var(--color-graphite-2);color:var(--color-code-ink)}.prompt-panel__hint{color:var(--color-code-muted);font-size:var(--text-sm);margin:0}.answer-panel{padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink)}.answer-panel__heading{border-color:var(--color-rule);color:var(--color-muted)}.answer-panel__heading span:last-child{color:var(--color-accent-dark)}.answer-list{gap:var(--space-sm);padding-top:var(--space-lg);display:grid}.answer-option{grid-template-columns:var(--tap-target) minmax(0, 1fr) var(--tap-target);gap:var(--space-sm);width:100%;min-height:4.5rem;padding:var(--space-sm);border:var(--rule-hairline) solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink-2);cursor:pointer;text-align:start;transition:border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);align-items:center;display:grid}.answer-option[data-state=selected]{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-ink)}.answer-option[data-state=loading],.quiz-button[data-state=loading]{cursor:wait;opacity:.7}.answer-option[data-state=error],.quiz-button[data-state=error]{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error)}.answer-option[data-state=success],.quiz-button[data-state=success]{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success)}.answer-option__key,.answer-option__marker{width:var(--tap-target);height:var(--tap-target);place-items:center;display:grid}.answer-option__key{border-radius:var(--radius-control);background:var(--color-paper-2);color:var(--color-muted);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600}.answer-option[data-state=selected] .answer-option__key{background:var(--color-accent);color:var(--color-accent-ink)}.answer-option__copy{overflow-wrap:anywhere;min-width:0;line-height:1.6}.answer-option__marker{color:var(--color-accent-dark)}.question-actions{gap:var(--space-md);padding-top:var(--space-lg);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;display:grid}.question-actions__status{color:var(--color-muted);font-family:var(--font-body);font-size:var(--text-xs);text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.quiz-button{justify-content:center;align-items:center;gap:var(--space-xs);min-height:var(--tap-target);padding:var(--space-sm) var(--space-lg);border:var(--rule-hairline) solid var(--color-rule-strong);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);font-weight:700;display:inline-flex}.quiz-button--primary{border-color:var(--color-accent-dark);background:var(--color-accent-dark);color:var(--color-accent-ink)}.quiz-button--light{border-color:var(--color-code-muted);background:var(--color-code-ink);color:var(--color-graphite)}.result-page{padding-block:var(--space-xl) var(--space-3xl)}.result-console{gap:var(--space-xl);padding:var(--space-xl);border-radius:var(--radius-panel);background:var(--color-graphite);color:var(--color-code-ink);display:grid}.result-console__lead h1,.review-section__heading h2,.quiz-status-page h1{min-width:0;font-family:var(--font-display);letter-spacing:-.045em;overflow-wrap:anywhere;margin:0;font-style:normal;font-weight:600}.result-console__lead h1{margin-top:var(--space-sm);font-size:clamp(var(--text-xl), 5vw, var(--text-3xl));line-height:1.1}.result-console__lead>p:last-child{max-width:45ch;color:var(--color-code-muted);line-height:1.65}.result-score{align-items:baseline;gap:var(--space-sm);font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin:0;display:flex}.result-score strong{font-family:var(--font-display);font-size:var(--text-display);letter-spacing:-.065em;font-weight:600;line-height:.9}.result-score span{color:var(--color-code-muted);font-size:var(--text-md)}.result-stats{border-top:var(--rule-hairline) solid var(--color-graphite-2);border-bottom:var(--rule-hairline) solid var(--color-graphite-2);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.result-stats div{gap:var(--space-xs);padding:var(--space-md);border-inline-end:var(--rule-hairline) solid var(--color-graphite-2);display:grid}.result-stats div:last-child{border-inline-end:0}.result-stats dt{color:var(--color-code-muted);font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase}.result-stats dd{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums;margin:0}.result-console .quiz-button{justify-self:start}.result-console .quiz-button:focus-visible{outline-color:var(--color-code-ink)}.review-section{gap:var(--space-xl);padding-block:var(--space-3xl);display:grid}.review-section__heading{gap:var(--space-sm);grid-template-columns:minmax(0,1fr);display:grid}.review-section__heading h2{font-size:var(--text-2xl)}.review-section__heading p{max-width:45ch;color:var(--color-muted);margin:0;line-height:1.65}.review-list{border-top:var(--rule-hairline) solid var(--color-rule-strong)}.review-item{border-bottom:var(--rule-hairline) solid var(--color-rule-strong)}.review-item summary{grid-template-columns:var(--space-xl) minmax(0, 1fr) var(--tap-target);gap:var(--space-sm);cursor:pointer;align-items:center;min-height:4rem;list-style:none;display:grid}.review-item summary::-webkit-details-marker{display:none}.review-item summary>span:first-child{color:var(--color-accent-dark)}.review-item summary>svg{justify-self:end}.review-item summary:active{color:var(--color-accent-dark)}.review-item summary[aria-disabled=true]{cursor:not-allowed;opacity:.5}.review-item[open] summary>svg{transform:rotate(180deg)}.review-item__content{gap:var(--space-lg);padding:0 0 var(--space-xl) calc(var(--space-xl) + var(--space-sm));display:grid}.review-item__prompt{max-width:65ch;padding:var(--space-lg);border-radius:var(--radius-control);background:var(--color-paper-2);color:var(--color-ink);line-height:1.65}.review-options{gap:0;margin:0;padding:0;list-style:none;display:grid}.review-options li{grid-template-columns:var(--space-xl) minmax(0, 1fr) auto;gap:var(--space-sm);padding-block:var(--space-sm);border-top:var(--rule-hairline) solid var(--color-rule);align-items:start;display:grid}.review-options li.is-correct{color:var(--color-success)}.review-options li.is-incorrect{color:var(--color-error)}.review-options__state{align-items:center;gap:var(--space-2xs);white-space:nowrap;display:inline-flex}.perfect-result{align-items:center;gap:var(--space-md);margin-top:var(--space-3xl);padding:var(--space-xl);border:var(--rule-hairline) solid var(--color-success);border-radius:var(--radius-control);background:var(--color-success-soft);color:var(--color-success);font-weight:700;display:flex}.quiz-status-page{place-content:center;gap:var(--space-lg);padding:var(--page-gutter);grid-template-columns:minmax(0,36rem);display:grid}.quiz-status-page__mark{width:var(--space-2xl);height:var(--space-2xl);border-radius:var(--radius-control);background:var(--color-graphite);color:var(--color-code-ink);place-items:center;display:grid}.quiz-status-page h1{max-width:13ch;font-size:clamp(var(--text-xl), 7vw, var(--text-3xl));line-height:1.1}.quiz-status-page__copy{max-width:45ch;color:var(--color-muted);margin:0;line-height:1.65}.quiz-status-page--error>svg,.quiz-status-page--error .quiz-meta{color:var(--color-error)}.quiz-status-page .quiz-button{justify-self:start}.quiz-shell svg,.quiz-status-page svg{width:var(--space-md);height:var(--space-md);stroke-width:1.75px}.sr-only{width:var(--rule-hairline);height:var(--rule-hairline);clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}@media (width>=48rem){.playground-board{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.answer-panel{border-inline-start:var(--rule-hairline) solid var(--color-rule-strong)}.result-console{grid-template-columns:minmax(0,1fr) auto;align-items:end}.result-console__lead,.result-stats{grid-column:1/-1}.result-console .quiz-button{justify-self:end}.review-section{grid-template-columns:minmax(12rem,.55fr) minmax(0,1.45fr)}}@media (width<=32rem){.question-actions{gap:var(--space-xs);grid-template-columns:auto minmax(0,1fr) auto}.question-actions__status{font-size:var(--text-2xs)}.quiz-button{padding-inline:var(--space-md)}.answer-option{grid-template-columns:var(--tap-target) minmax(0, 1fr)}.answer-option__marker{display:none}.result-stats{grid-template-columns:minmax(0,1fr)}.result-stats div{border-inline-end:0;border-bottom:var(--rule-hairline) solid var(--color-graphite-2);grid-template-columns:minmax(0,1fr) auto;align-items:baseline}.result-stats div:last-child{border-bottom:0}.review-item__content{padding-inline-start:0}.review-options li{grid-template-columns:var(--space-lg) minmax(0, 1fr)}.review-options__state{grid-column:2}}@media (hover:hover) and (pointer:fine){.answer-option:hover{border-color:var(--color-accent);background:var(--color-paper-2)}.quiz-button:hover:not(:disabled){border-color:var(--color-ink);background:var(--color-paper-2)}.quiz-button--primary:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink)}.quiz-button--light:hover:not(:disabled){border-color:var(--color-paper);background:var(--color-paper);color:var(--color-graphite)}.review-item summary:hover{color:var(--color-accent-dark)}}@media (prefers-reduced-motion:reduce){.quiz-shell *,.quiz-status-page *{animation-duration:var(--dur-micro)!important;scroll-behavior:auto!important;transition-duration:var(--dur-micro)!important;animation-iteration-count:1!important}.quiz-button:active,.answer-option:active{transform:none}}html{word-break:keep-all;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}