:root { --ink:#262626; --muted:#65707c; --line:#d9dee4; --bg:#f5f6f7; --charcoal:#3f3f3f; --brand:#b53d32; --brand-dark:#8f3028; --brand-red:#d64b3c; --brand-yellow:#efbc4e; --brand-green:#709450; --brand-blue:#24a0ac; --good:#527d43; --warn:#a66a08; --bad:#b43736; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#f2f3f4 0,#fafafa 420px,#f5f6f7 100%); font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.55; }
button { font:inherit; cursor:pointer; min-height:44px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:.55rem .9rem; }
button:hover { border-color:var(--brand); } button:focus-visible, input:focus-visible { outline:3px solid #8ec5ff; outline-offset:2px; }
.app-shell { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:22px 0 42px; }.brand-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #d8d8d8; margin-bottom:18px; padding-bottom:14px; }.brand-logo { display:block; width:clamp(168px,22vw,230px); height:auto; }.beta-badge { border:1px solid #b8b8b8; border-radius:999px; color:var(--charcoal); font-size:.7rem; font-weight:800; letter-spacing:.12em; padding:5px 10px; }
.topbar { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:18px; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.4rem, 4vw, 2rem); } .eyebrow { margin-bottom:3px; color:var(--brand-red); font-size:.78rem; letter-spacing:.09em; font-weight:800; }.scope-summary { margin:5px 0 0; color:var(--muted); font-size:.84rem; word-break:keep-all; }.set-switcher { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.set-switcher a { color:#4f5967; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 10px; font-size:.75rem; font-weight:700; text-decoration:none; }.set-switcher a[aria-current="page"] { color:#fff; background:var(--charcoal); border-color:var(--charcoal); }
.timer { background:var(--charcoal); border:1px solid var(--charcoal); border-radius:10px; color:#fff; padding:7px 12px; text-align:right; white-space:nowrap; } .timer span { display:block; color:#d8d8d8; font-size:.73rem; } .timer strong { font-variant-numeric:tabular-nums; font-size:1.2rem; } .timer.urgent { border-color:var(--brand-red); background:#fff4f2; }.timer.urgent span { color:#83504a; }.timer.urgent strong { color:var(--bad); }
.fixture-note { margin-bottom:16px; padding:10px 12px; background:#fff6dd; border-left:4px solid var(--warn); border-radius:5px; font-size:.9rem; }
.state-card,.result-card,.question-card,.palette-wrap,.review { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 4px 18px #17253a0a; } .error { border-color:#efbac0; } .error h2 { color:var(--bad); }
.start-card { position:relative; max-width:760px; margin:28px auto 0; overflow:hidden; border-color:#d2d2d2; box-shadow:0 14px 40px #3f3f3f14; }.start-card::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--brand-red) 0 25%,var(--brand-yellow) 25% 50%,var(--brand-green) 50% 75%,var(--brand-blue) 75%); }.brand-dots { display:flex; gap:7px; margin:1px 0 16px; }.brand-dots i { width:10px; height:10px; border-radius:50%; }.brand-dots i:nth-child(1){background:var(--brand-red)}.brand-dots i:nth-child(2){background:var(--brand-yellow)}.brand-dots i:nth-child(3){background:var(--brand-green)}.brand-dots i:nth-child(4){background:var(--brand-blue)}.start-card>p:not(.eyebrow):not(.brand-byline) { color:var(--muted); }.start-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; margin:22px 0; padding:0; }.start-facts li { position:relative; background:#f5f5f4; border:1px solid #e5e5e3; border-radius:10px; padding:14px; overflow:hidden; }.start-facts li::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; }.start-facts li:nth-child(1)::before{background:var(--brand-red)}.start-facts li:nth-child(2)::before{background:var(--brand-yellow)}.start-facts li:nth-child(3)::before{background:var(--brand-blue)}.start-facts strong,.start-facts span { display:block; }.start-facts strong { color:var(--charcoal); font-size:1.05rem; }.start-facts span { color:var(--muted); font-size:.82rem; }.resume-box { border:1px solid #a8c4cb; background:#f0fafb; border-radius:10px; margin-bottom:16px; padding:14px; }.resume-box p { margin:4px 0 12px; color:#34465d; }.start-actions { display:flex; justify-content:flex-end; }.brand-byline { border-top:1px solid #e6e6e6; color:#777!important; font-size:.76rem; margin:20px 0 -5px!important; padding-top:14px; text-align:center; }
.progress-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-bottom:16px; font-size:.9rem; color:var(--muted); } .progress-track { height:10px; background:#e1e3e5; border-radius:999px; overflow:hidden; } .progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand-red),var(--brand-yellow),var(--brand-green),var(--brand-blue)); transition:width .2s; }
.exam-layout { display:grid; grid-template-columns:190px minmax(0, 1fr); gap:16px; } .palette-wrap h2 { font-size:1rem; margin-bottom:10px; } .palette { display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; } .palette button { padding:0; min-height:38px; font-size:.9rem; } .palette button.is-current { color:#fff; background:var(--charcoal); border-color:var(--charcoal); } .palette button.is-answered { border-color:var(--brand-green); background:#f0f6ed; color:#3e6634; } .palette button.is-current.is-answered { background:var(--charcoal); color:#fff; }
.palette-wrap p { color:var(--muted); font-size:.76rem; margin:14px 0 0; } .legend { display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 3px 0 7px; } .legend.answered { background:#a7e4ca; border:1px solid var(--good); } .legend.current { background:var(--brand); }
.question-card,.review-item { min-width:0; overflow-wrap:anywhere; }.question-number { color:var(--brand-red); font-weight:800; margin-bottom:6px; } .question-card h2 { font-size:clamp(1.1rem, 3.5vw, 1.35rem); margin-bottom:22px; white-space:pre-wrap; }
.question-card mjx-container,.review mjx-container { display:inline-block; color:inherit; max-width:100%; overflow-x:auto; overflow-y:hidden; vertical-align:middle; }.question-card mjx-container[display="true"],.review mjx-container[display="true"] { display:block; padding:.3rem 0; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }.question-card h2 mjx-container[display="true"] { font-size:.88em!important; margin:.45rem 0; }.choice mjx-container { margin:0 .08em; }
.choices { display:grid; gap:10px; } .choice { display:flex; gap:12px; align-items:flex-start; min-width:0; border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer; } .choice:has(input:checked) { border-color:var(--brand-blue); background:#eef8f9; } .choice input { flex:0 0 auto; margin-top:4px; accent-color:var(--brand-blue); width:18px; height:18px; } .choice span { flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.nav-actions { display:flex; justify-content:space-between; gap:10px; margin-top:25px; } .nav-actions button:disabled { cursor:not-allowed; opacity:.45; } .submit-row { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }.primary { background:var(--brand); border-color:var(--brand); color:white; font-weight:700; } .primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
#result { display:grid; gap:16px; width:100%; min-width:0; }.result-card,.review,#reviewList,.explanation { min-width:0; max-width:100%; }.score { display:flex; align-items:baseline; gap:10px; }.score strong { font-size:2rem; color:var(--brand-red); }.score span { color:var(--muted); }.review h2 { margin-bottom:14px; }.review-item { border-top:1px solid var(--line); padding:18px 0; }.review-item:first-of-type { border-top:0; padding-top:0; }.review-item h3 { margin:0 0 8px; font-size:1rem; }.review-item p { margin-bottom:6px; }.answer-ok { color:var(--good); font-weight:700; }.answer-wrong { color:var(--bad); font-weight:700; }.explanation { background:#f5f5f4; border-left:4px solid var(--brand-yellow); padding:10px; border-radius:7px; color:#34465d; }
dialog { max-width:min(440px, calc(100% - 32px)); border:0; border-radius:14px; color:var(--ink); padding:24px; box-shadow:0 12px 40px #17253a55; }dialog::backdrop { background:#17253a77; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (min-width: 651px) {
  .start-card { max-width:980px; margin-top:34px; padding:36px 40px 30px; }
  .start-card .brand-dots { gap:9px; margin-bottom:20px; }
  .start-card .brand-dots i { width:12px; height:12px; }
  .start-card .eyebrow { font-size:.88rem; margin-bottom:8px; }
  .start-card h2 { font-size:2.15rem; line-height:1.3; margin-bottom:16px; }
  .start-card>p:not(.eyebrow):not(.brand-byline) { font-size:1.08rem; }
  .start-facts { gap:14px; margin:28px 0; }
  .start-facts li { padding:18px; }
  .start-facts strong { font-size:1.22rem; }
  .start-facts span { font-size:.92rem; }
  .start-actions .primary { min-height:52px; padding:.72rem 1.35rem; font-size:1.05rem; }
  .brand-byline { font-size:.84rem; margin-top:26px!important; padding-top:17px; }
}
@media (max-width: 650px) { .app-shell { width:min(100% - 24px, 1120px); padding-top:12px; }.brand-strip { margin-bottom:14px; padding-bottom:10px; }.brand-logo { width:158px; }.beta-badge { font-size:.62rem; padding:4px 8px; }.topbar { align-items:center; }.topbar .eyebrow { display:none; }.timer { padding:5px 8px; }.start-card { margin-top:14px; padding:22px 20px 20px; }.start-facts { grid-template-columns:1fr; }.start-actions button,.resume-box button { width:100%; }.progress-row { grid-template-columns:1fr auto; }.progress-track { grid-row:2; grid-column:1 / -1; }.exam-layout { display:flex; flex-direction:column; }.palette-wrap { padding:14px; }.palette { grid-template-columns:repeat(5,1fr); }.palette-wrap p { display:none; }.question-card { padding:18px; }.question-card h2 mjx-container[display="true"] { font-size:.76em!important; padding:.2rem 0 .3rem; }.nav-actions button { flex:1; }.submit-row button { flex:1; } }