dialog{border:1px solid #dce2d9;border-radius:18px;padding:26px;max-width:560px;width:calc(100% - 32px);max-height:90dvh;color:#17362f}dialog::backdrop{background:#14251bb3}dialog h2{margin-top:0}dialog p,dialog label{font-size:14px}dialog textarea{width:100%;resize:vertical;font:12px monospace;padding:12px;border:1px solid #a5b7a8;border-radius:8px}dialog table{width:100%;font-size:12px;border-collapse:collapse;text-align:left}dialog th,dialog td{padding:8px;border-bottom:1px solid #dce2d9}dialog .subtle{color:#60736a;font-size:12px}
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#17362f;background:#f5f5ee;font-synthesis:none;line-height:1.65;--green:#163c35;--muted:#60736a;--line:#dce2d9;--accent:#d9eea1}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:4px}.site-header{max-width:1080px;margin:auto;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.brand{text-decoration:none;font-weight:800;letter-spacing:-.8px;font-size:20px}.brand span{font-weight:400;margin-left:10px;font-size:14px}.site-header>a:last-child{color:var(--muted)}main{max-width:980px;margin:auto;padding:20px 28px 40px}.intro{position:relative;padding:24px 0 34px;max-width:720px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}h1{font-size:44px;letter-spacing:-2px;line-height:1.3;margin:18px 0}p{word-break:keep-all;overflow-wrap:anywhere}.intro p{max-width:560px;color:var(--muted);font-size:15px}.total{display:flex;align-items:baseline;gap:10px;margin-top:22px}.total strong{font-size:36px;line-height:1}.total span{font-size:13px;color:var(--muted)}.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.area-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;color:inherit;transition:transform .15s,border-color .15s}.area-card:hover{transform:translateY(-3px);border-color:#628775}.card-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.book{background:#edf1e7;padding:3px 9px;border-radius:5px;color:var(--green)}h2{font-size:21px;letter-spacing:-.7px;margin:17px 0 6px}.area-card>p{font-size:13px;color:var(--muted);margin:0 0 23px}.progress-label{display:flex;justify-content:space-between;font-size:12px}.progress-label strong{font-size:15px}progress{display:block;width:100%;height:7px;border:0;border-radius:8px;background:#e9ede5;margin:8px 0 12px;overflow:hidden}progress::-webkit-progress-bar{background:#e9ede5}progress::-webkit-progress-value{background:#3f7961;border-radius:8px}progress::-moz-progress-bar{background:#3f7961}.counts{display:flex;gap:15px;font-size:11px;color:var(--muted)}.counts b{color:var(--green);margin-left:3px}.card-action{display:flex;justify-content:space-between;font-weight:600;font-size:13px;margin-top:22px;padding-top:15px;border-top:1px solid #edf0ea}.guide{margin-top:28px;background:#eaf0df;padding:22px 25px;border-radius:16px}.guide h2{margin:0;font-size:15px}.guide p{font-size:13px;color:#4c6356;margin:8px 0}.text-button{border:0;background:none;padding:10px 0;color:var(--green);font-size:13px;text-decoration:underline;text-underline-offset:4px;min-height:44px}footer{max-width:980px;margin:auto;padding:12px 28px 40px;color:var(--muted);font-size:11px}.quiz-nav{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.quiz-heading{max-width:680px;margin:10px auto 24px}.quiz-heading h1{font-size:28px;letter-spacing:-1px}.question-card,.complete{max-width:680px;margin:auto;padding:30px;background:white;border:1px solid var(--line);border-radius:20px}.question-meta{display:flex;gap:12px;justify-content:space-between;color:var(--muted);font-size:12px}.question-card h2{font-size:22px;line-height:1.7;margin:22px 0 26px;white-space:pre-line;overflow-wrap:anywhere}fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}.option{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px;font-size:15px;cursor:pointer;position:relative;overflow-wrap:anywhere}.option:has(input:checked):not(.correct):not(.wrong){background:#eff6ff;border:2px solid #2563eb;padding:14px}.option input{position:absolute;opacity:0;width:1px;height:1px}.option:has(input:focus-visible){outline:3px solid #8daa38;outline-offset:3px}.option-number{flex-shrink:0;background:#f0f2eb;border-radius:50%;width:26px;height:26px;text-align:center;font-size:12px;line-height:26px}.option.correct{border-color:#377457;background:#eef7e9}.option.wrong{border-color:#b0553d;background:#fff2eb}.answer-tag{font-size:11px;display:inline-block;margin-left:5px}.primary{width:100%;border:0;border-radius:12px;background:var(--green);color:white;font-weight:600;padding:16px;margin-top:22px;min-height:54px}.primary:disabled{background:#dce2d9;color:#78877d;cursor:not-allowed}.feedback{border-top:1px solid var(--line);margin-top:26px;padding-top:22px;outline:none}.result{color:#2a6b3d;font-weight:700;font-size:16px}.result.incorrect{color:#9c4e32}.feedback h3{font-size:13px;margin:20px 0 0}.feedback p{font-size:14px;white-space:pre-line}.feedback a{font-size:12px;color:var(--muted)}.bottom-actions{max-width:680px;margin:16px auto;text-align:right}.complete{text-align:center;padding:55px 24px}.completion-mark{background:var(--accent);border-radius:50%;font-size:35px;line-height:70px;width:70px;margin:auto}.complete p{color:var(--muted);font-size:14px}.error{background:#fff0e8;border:1px solid #bd6041;padding:16px;border-radius:12px;color:#842e20;margin-bottom:16px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}button:focus-visible,a:focus-visible{outline:3px solid #75943a;outline-offset:4px}@media(max-width:600px){.site-header{padding:20px}.brand{font-size:18px}.brand span{font-size:12px;margin-left:6px}main{padding:4px 18px 24px}.intro{padding:22px 2px 28px}h1{font-size:36px}.intro p{font-size:14px}.area-grid{grid-template-columns:1fr;gap:13px}.area-card{padding:21px}.guide{padding:20px}.question-card{padding:22px 18px;border-radius:16px}.question-card h2{font-size:19px}.option{font-size:14px;padding:14px}.option:has(input:checked){padding:13px}.quiz-heading h1{font-size:25px}.counts{gap:13px}footer{padding:10px 20px 30px}.question-meta{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.mode-tabs{display:flex;gap:8px;max-width:680px;margin:0 auto 20px}.mode-tabs button{flex:1;min-height:46px;border:1px solid #dce2d9;border-radius:10px;background:#fff;color:#163c35}.mode-tabs button[aria-pressed=true]{background:#163c35;color:white}.reading-intro{max-width:680px;margin:0 auto 24px}.reading-intro p{font-size:14px;color:#60736a}.reading-intro select{padding:10px;max-width:100%;border-radius:8px;border:1px solid #a5b7a8;background:white}.reading-list{display:grid;gap:20px}.reading-list article{width:100%;scroll-margin-top:20px}.reading-options{padding-left:28px;font-size:14px}.reading-options li{padding:9px 4px}.reading-correct{background:#eef7e9;color:#2a6b3d}.reading-explanation{border-top:1px solid #dce2d9;margin-top:20px;padding-top:14px;font-size:14px}.reading-explanation h3{font-size:14px}.reading-explanation a{font-size:12px;color:#60736a}

/* Shared TOPCIT visual language, sized for accessible reading. */
.site-header nav{display:flex;gap:18px}.skip{position:absolute;top:-80px;background:white;padding:12px}.skip:focus{top:0}.question-meta{flex-wrap:wrap;gap:8px}.pagination{max-width:680px;margin:24px auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.pagination button,.pagination select,.dialog-actions button{font:inherit;border:1px solid var(--line);border-radius:8px;background:white;padding:10px 14px;color:var(--green);min-height:44px}.pagination button:disabled{opacity:.45;cursor:default}.dialog-actions{display:flex;justify-content:flex-end;gap:12px}.dialog-actions button:last-child{background:var(--green);color:white}.reading-explanation p{white-space:pre-line}.question-card h2{font-size:20px}.question-meta,.eyebrow,.quiz-nav,.progress-label,.feedback a,.reading-explanation a,footer,.counts,.card-top,.card-action{font-size:14px}.option,.feedback p,.reading-options,.reading-explanation,.intro p,.reading-intro p{font-size:16px}.reading-intro select{font:inherit}.brand{white-space:nowrap}button:disabled{cursor:default}fieldset:disabled .option{cursor:default}.reading-options li{overflow-wrap:anywhere}.question-card{min-width:0}select{max-width:100%}@media(max-width:600px){.brand span{display:none}.site-header nav{gap:12px}.site-header{gap:12px}.mode-tabs{gap:5px}.mode-tabs button{font-size:14px}.question-card h2{font-size:19px}.pagination{flex-wrap:wrap}.question-meta{font-size:13px}.question-card{padding:20px 16px}.option{font-size:16px}.area-card h2{word-break:keep-all}}
.option>span:last-child,.reading-options li{white-space:pre-wrap}

/* Selection and grading have separate colors and explicit text labels. */
.selection-tag{display:none}
a.area-card{text-decoration:none}.skip:focus{z-index:10000}
.option:has(input:checked) .selection-tag{display:inline-block;color:#1e40af;background:#dbeafe}
.answer-tag,.selection-tag{font-size:12px;font-weight:700;margin:6px 0 0;padding:3px 9px;border-radius:6px;white-space:normal}
.option.correct{border:2px solid #15803d;padding:14px;background:#ecfdf3}
.option.correct .option-number,.option.correct .answer-tag{background:#166534;color:#fff}
.option.wrong{border:2px dashed #be123c;padding:14px;background:#fff1f2}
.option.wrong .option-number,.option.wrong .answer-tag{background:#be123c;color:#fff}

.question-context{margin-top:16px;padding:14px 16px;background:#f6f8f5;border:1px solid #dce2d9;border-radius:10px;font-size:13px;line-height:1.8}
.category-path,.syllabus-detail{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px}
.syllabus-detail{border-top:1px solid #dce2d9;margin-top:10px;padding-top:10px}
.category-separator{color:#708076;margin:0 4px}
.question-context small{color:#60736a}
.question-context a{font-size:12px}
.question-context span{overflow-wrap:anywhere}
.reading-options li{padding:12px 14px;border-radius:8px}
.history-trigger{border:0;padding:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:4px;font:inherit;font-weight:700;cursor:pointer}.history-trigger:focus-visible{outline:2px solid #3f7961;outline-offset:4px}.history-open{overflow:hidden}.history-dialog{position:fixed;inset:0;margin:auto;width:min(680px,calc(100% - 32px));max-width:680px;max-height:80dvh;overflow:auto;overscroll-behavior:contain;background:#fff}.history-dialog header{display:flex;gap:16px;align-items:center;justify-content:space-between}.history-dialog h2{margin:0}.history-close{flex-shrink:0;padding:10px;border:1px solid #dce2d9;border-radius:8px;background:#f5f5ee;color:#17362f}.history-list{list-style:none;padding:0;margin:20px 0 0}.history-list li+li{margin-top:12px}.history-list a{display:block;border:1px solid #dce2d9;border-radius:12px;padding:16px;text-decoration:none;word-break:keep-all;overflow-wrap:anywhere}.history-list a:hover,.history-list a:focus-visible{background:#edf4e7;outline:2px solid #3f7961}.history-meta{display:block;font-size:12px;color:#60736a;margin-bottom:8px}.history-empty{padding:20px 0}.history-target{scroll-margin-top:90px;outline:3px solid #3f7961;outline-offset:4px}
/* Executable exercises preserve indentation without overflowing narrow screens. */
.question-code{margin:1.5rem 0;min-width:0}
.question-code figcaption{font-size:.9rem;font-weight:700;margin-bottom:.5rem}
.question-code pre{max-width:100%;overflow:auto;padding:1rem;background:var(--surface,#f2f4ef);border:1px solid var(--line,#d8dfd3);border-radius:.5rem;font-size:.95rem;line-height:1.65;text-align:left}
.question-code pre:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.question-card h2,.option .tts-readable,.reading-options li{white-space:pre-wrap;overflow-wrap:anywhere}
.allocation-table{max-width:100%;overflow:auto}
.allocation table{width:100%;border-collapse:collapse;font-size:.95rem}
.allocation th,.allocation td{padding:.7rem .5rem;border-bottom:1px solid var(--line,#d8dfd3);text-align:left}
.allocation td{white-space:nowrap}