:root {
    font-family:'Segoe UI','Malgun Gothic',system-ui,sans-serif;
    color:#1d2a40;
    background:#f3f6fb
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
.top {
    background:#132b51;
    color:white;
    padding:26px max(22px,calc((100vw - 1200px)/2));
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center
}
.eyebrow {
    letter-spacing:2px;
    font-size:11px;
    color:#a6c5f6;
    font-weight:700
}
.top h1 {
    font-size:26px;
    margin:6px 0
}
.top h1 span {
    color:#77d6d0
}
.top p {
    color:#c3d2e8;
    margin:0
}
.topright {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}
.mode {
    font-size:14px;
    white-space:nowrap
}
.mode input {
    accent-color:#48d1bd
}
.shell {
    max-width:1200px;
    margin:30px auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 285px;
    gap:22px;
    padding:0 18px
}
main {
    min-width:0
}
.info {
    display:flex;
    justify-content:space-between;
    margin:0 4px 12px;
    color:#526a8b;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px
}
.card,aside {
    background:white;
    border-radius:18px;
    box-shadow:0 10px 32px #16315412;
    border:1px solid #e4eaf3
}
.card {
    padding:30px
}
.qhead {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center
}
.qhead strong {
    color:#147c9b;
    font-size:24px
}
.qhead span {
    color:#6a7d96;
    font-size:12px
}
.player {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:#eaf3ff;
    padding:20px;
    border-radius:13px;
    margin:24px 0 10px
}
.muted {
    font-size:12px;
    color:#56708d;
    margin-bottom:4px
}
.status {
    color:#54708d;
    font-size:13px;
    min-height:22px;
    margin:8px 0 23px
}
h2 {
    font-size:21px;
    line-height:1.5;
    margin:0 0 25px;
    font-weight:650
}
.choices {
    display:grid;
    gap:11px
}
.choice {
    display:flex;
    align-items:flex-start;
    gap:13px;
    width:100%;
    text-align:left;
    border:1.5px solid #e0e6ef;
    background:#fff;
    border-radius:12px;
    padding:16px;
    font-size:16px;
    line-height:1.45;
    cursor:pointer;
    color:#26354a
}
.choice:hover {
    border-color:#5c9bd8;
    background:#f5faff
}
.choice.selected {
    background:#e7f4f1;
    border-color:#179d8b
}
.choice .circle {
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #c5d0df;
    width:26px;
    height:26px;
    font-size:13px
}
.choice.selected .circle {
    background:#178c80;
    color:white;
    border-color:#178c80
}
.choice:disabled {
    cursor:default;
    opacity:.85
}
.primary {
    background:#137d91;
    color:white;
    border:0
}
.primary:hover:not(:disabled) {
    background:#0b6375
}
button {
    font-family:inherit;
    border:1px solid #d2ddea;
    background:white;
    border-radius:10px;
    padding:12px 17px;
    cursor:pointer;
    font-weight:650;
    color:#26354a
}
button:disabled {
    opacity:.45;
    cursor:not-allowed
}
.ghost {
    background:#284366;
    color:white;
    border:1px solid #607897
}
.nav {
    display:flex;
    justify-content:space-between;
    margin-top:20px
}
.footnote {
    font-size:12px;
    color:#72839b;
    margin:17px 5px
}
aside {
    padding:22px;
    align-self:start;
    position:sticky;
    top:18px
}
.asideHead {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:19px
}
.asideHead span {
    font-size:12px;
    color:#72839b
}
.grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:9px
}
.grid button {
    padding:0;
    height:40px;
    font-size:13px;
    border-radius:9px
}
.grid button.done {
    background:#e6f6ee;
    border-color:#7fceaa;
    color:#167d57
}
.grid button.active {
    background:#137d91;
    color:white;
    border-color:#137d91
}
.legend {
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:#73849a;
    margin:16px 0 24px
}
.wide {
    width:100%;
    margin-bottom:10px
}
.score {
    background:#f1f7fe;
    border-radius:12px;
    padding:18px;
    margin-top:15px;
    font-size:14px;
    line-height:1.8
}
.score b {
    font-size:28px;
    color:#167d91
}
.teacher {
    border-top:1px dashed #cbd7e7;
    margin-top:25px;
    padding-top:20px
}
.teacherButtons {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.teacherButtons button {
    background:#fff7e8;
    border-color:#ead3a5
}
.teacherPanel {
    margin-top:14px;
    background:#fffaf1;
    border-radius:10px;
    padding:18px;
    white-space:pre-wrap;
    line-height:1.75;
    font-size:14px
}
.hidden {
    display:none!important
}
footer {
    text-align:center;
    font-size:12px;
    color:#7c8ca0;
    padding:30px
}
@media(max-width:850px) {
    .shell {
        grid-template-columns:1fr
    }
    aside {
        position:static;
        order:-1
    }
    .top {
        padding:20px;
        flex-wrap:wrap
    }
    .card {
        padding:20px
    }
    .grid {
        grid-template-columns:repeat(10,1fr)
    }
    .grid button {
        height:33px
    }
    .player {
        padding:15px
    }
    h2 {
        font-size:18px
    }
}
@media(max-width:450px) {
    .grid {
        grid-template-columns:repeat(5,1fr)
    }
    .player {
        flex-wrap:wrap
    }
    .player button {
        width:100%
    }
    .top h1 {
        font-size:22px
    }
}
/* v2: PC 전용 OMR 답안지 */
.shell {
    grid-template-columns:minmax(0,1fr) 325px
}
.omr-labels,.omr-row {
    display:grid;
    grid-template-columns:42px repeat(4,1fr);
    gap:7px;
    align-items:center;
    text-align:center
}
.omr-labels {
    font-size:12px;
    color:#6d7e95;
    font-weight:700;
    margin-bottom:7px
}
.grid {
    display:flex;
    flex-direction:column;
    gap:4px;
    max-height:660px;
    overflow:auto;
    padding:2px 4px 2px 0
}
.omr-row {
    border-radius:9px;
    padding:3px 4px
}
.omr-row.active {
    background:#e9f5fc
}
.grid .omr-row button {
    height:29px;
    min-width:0;
    padding:0;
    border-radius:8px;
    font-size:12px
}
.omr-number {
    background:#edf2f9!important;
    font-weight:800
}
.omr-row.active .omr-number {
    background:#137d91!important;
    color:white
}
.omr-choice {
    border-radius:50%!important;
    width:28px;
    height:28px;
    justify-self:center;
    background:white!important
}
.omr-choice.marked {
    background:#148c7f!important;
    border-color:#148c7f!important;
    color:white!important;
    font-weight:900
}
.nav {
    gap:12px
}
.nav button:last-child {
    margin-left:auto
}
@media(max-width:850px) {
    .shell {
        grid-template-columns:minmax(0,1fr) 325px
    }
    aside {
        position:sticky;
        top:18px;
        order:initial
    }
}

.exam-picker{max-width:1200px;margin:22px auto;padding:22px;background:var(--card,#fff);border-radius:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid #dce3ee}.exam-picker select{padding:12px 16px;min-width:220px;border:1px solid #bac7d9;border-radius:9px;font-size:16px}.exam-picker label{font-weight:700}.exam-picker span{color:#64748b}#modeLabel{padding:8px 14px;border-radius:20px;background:#e2e8f0;color:#1e293b}.hidden{display:none!important}

@media (max-width: 850px) { .layout {display:block!important;} main, aside {width:100%!important;max-width:none!important;} aside {margin-top:18px;} .top {padding:18px 16px;} .top h1 {font-size:21px;} .omr-row {min-height:35px;} }
@media (max-width: 480px) { .top {flex-wrap:wrap;} button {touch-action:manipulation;} .choice {min-height:48px;} .omr-choice {min-width:32px;min-height:32px;} }