:root { color-scheme: light; --ink:#18212f; --muted:#5f6b7a; --line:#dce2ea; --brand:#2457d6; --brand-dark:#183f9f; --soft:#f4f7fb; --danger:#a52323; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.65; }
a { color:var(--brand-dark); }
.container { width:min(1080px,calc(100% - 2rem)); margin-inline:auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.75rem; }
.site-header { border-bottom:1px solid var(--line); background:#fff; }
.nav,.nav-links { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav { min-height:64px; }.nav-links form { margin:0; }.brand { font-weight:800; text-decoration:none; color:var(--ink); }
.link-button { border:0; background:none; color:var(--brand-dark); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
.disclaimer { background:#fff6d9; border-bottom:1px solid #e9d58c; padding:.55rem 1rem; text-align:center; font-size:.9rem; }
.draft-preview-banner { background:#ffe8e8; border-bottom:1px solid #d99; color:#761a1a; padding:.55rem 1rem; text-align:center; font-size:.9rem; font-weight:700; }
main { padding-block:2rem 4rem; }.footer { border-top:1px solid var(--line); padding-block:1.5rem; color:var(--muted); font-size:.9rem; }
.hero { padding:4rem 0; max-width:760px; }.hero h1 { font-size:clamp(2rem,6vw,4rem); line-height:1.1; margin:.4rem 0 1rem; }
.eyebrow,.tag { color:var(--brand-dark); font-weight:700; }.tag { display:inline-block; font-size:.85rem; background:#eaf0ff; border-radius:999px; padding:.2rem .65rem; }
.grid { display:grid; gap:1rem; }.grid.three { grid-template-columns:repeat(3,1fr); }.grid.two { grid-template-columns:repeat(2,1fr); }
.ops-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1rem; }
.stat-card { border:1px solid var(--line); border-radius:14px; padding:1rem; background:var(--soft); min-height:132px; }
.stat-card h3 { margin:0; font-size:1rem; }.stat-value { margin:.5rem 0 0; font-size:2rem; font-weight:800; line-height:1.2; }
.ops-actions { margin-top:2.5rem; }.ops-actions .journey-steps { align-items:center; }
.card,.question-card,.result-card,.summary-card { border:1px solid var(--line); border-radius:14px; padding:1.25rem; background:#fff; box-shadow:0 4px 20px rgba(22,34,58,.05); }
.card h2,.card h3 { margin:.65rem 0 .35rem; }.button { display:inline-block; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-weight:700; padding:.65rem 1rem; text-decoration:none; cursor:pointer; }
.button.primary { background:var(--brand); color:#fff; border-color:var(--brand); }.button.primary:hover { background:var(--brand-dark); }.button.danger { color:var(--danger); border-color:#e5b3b3; }
.section-heading,.exam-header,.question-nav,.summary-card { display:flex; justify-content:space-between; align-items:center; gap:1rem; }.section-heading { margin-top:2.5rem; }
.summary-card { max-width:320px; background:var(--soft); }.summary-card span,.big-score { font-size:2rem; font-weight:800; }
.plain-list { padding:0; list-style:none; }.plain-list li { padding:.7rem 0; border-bottom:1px solid var(--line); }
.filter-form,.stacked-form,.answer-form,.stack { display:grid; gap:1rem; }.filter-form { grid-template-columns:repeat(3,max-content); align-items:end; margin-bottom:1.5rem; }
select,input,textarea { width:100%; border:1px solid #aab4c2; border-radius:8px; padding:.65rem; font:inherit; }.narrow { max-width:460px; margin:auto; }
.lesson { max-width:780px; }.lead { font-size:1.2rem; color:var(--muted); }.lesson-body { margin:2rem 0; }.notice,.error-box { padding:1rem; border-radius:10px; background:#fff6d9; border:1px solid #e9d58c; }
.messages { list-style:none; padding:0; }.messages li { padding:.8rem; margin-bottom:.5rem; border-radius:8px; background:var(--soft); }.messages .error { background:#ffe8e8; color:#761a1a; }
.exam-shell { max-width:820px; margin:auto; }.question-card { margin:1rem 0; }.question-prompt { font-size:1.3rem; font-weight:650; }.choice { display:flex; gap:.8rem; padding:.85rem; border:1px solid var(--line); border-radius:8px; margin:.6rem 0; }.choice input { width:auto; }
.question-nav { flex-wrap:wrap; }.question-nav form { margin-left:auto; }.facts div { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding:.5rem 0; }.facts dt { font-weight:700; }.facts dd { margin:0; text-align:right; }
.answer-review { padding-left:1.5rem; }.answer-review li { padding:.8rem; border-bottom:1px solid var(--line); }.answer-review span { float:right; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:720px) { .nav { align-items:flex-start; padding-block:.8rem; }.nav-links { flex-wrap:wrap; justify-content:flex-end; }.grid.three,.grid.two { grid-template-columns:1fr; }.filter-form { grid-template-columns:1fr; }.hero { padding:2rem 0; }.exam-header { align-items:flex-start; }.answer-review span { float:none; display:block; } }
@media (max-width:900px) { .ops-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .ops-grid { grid-template-columns:repeat(2,1fr); } }
html { -webkit-text-size-adjust:100%; overflow-wrap:anywhere; }
img,video,audio { max-width:100%; }
fieldset { min-width:0; }
a,button,input,select,textarea { touch-action:manipulation; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #ffbf47; outline-offset:3px; }
.button,.link-button { min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
.link-button { padding:.45rem; }
.choice { min-height:48px; align-items:center; }
.timer-panel { margin:1rem 0; padding:.8rem 1rem; border:2px solid var(--brand); border-radius:10px; background:#f5f8ff; }
.timer-panel p { margin:.15rem 0; }
.timer-detail { color:var(--muted); font-size:.9rem; }
.timer-expired { color:var(--danger); font-weight:800; }
.journey-steps,.result-actions { display:flex; flex-wrap:wrap; gap:.75rem; padding:0; list-style:none; }
.practice-feedback { scroll-margin-top:1rem; }
@media (max-width:720px) {
  .nav { flex-direction:column; }
  .nav-links { width:100%; justify-content:flex-start; gap:.5rem; }
  .nav-links > a { min-height:44px; display:inline-flex; align-items:center; padding:.35rem; }
  .question-nav { display:grid; grid-template-columns:1fr; width:100%; }
  .question-nav .button,.question-nav form,.question-nav form .button,.result-actions .button,.journey-steps,.journey-steps li,.journey-steps .button { width:100%; }
  .question-nav form { margin-left:0; }
  .facts div { align-items:flex-start; flex-direction:column; }
  .facts dd { text-align:left; }
  .card,.question-card,.result-card,.summary-card { padding:1rem; }
}