* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Malgun Gothic", sans-serif; background: #f4f5f7; color: #1d2330; }
header { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; background: #1d2330; color: #fff; }
header .right { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
main { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem; }
.card { background: #fff; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow-x: auto; }
.card.narrow { max-width: 420px; margin: 3rem auto; }
h1, h2 { margin-top: 0; }
h2 small { font-weight: normal; color: #555; font-size: .8em; margin-left: .5rem; }
label { display: block; margin-bottom: .8rem; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .5rem; font: inherit; border: 1px solid #c5cad3; border-radius: 6px; }
textarea { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
select { width: auto; min-width: 8rem; }
button { padding: .55rem 1.2rem; border: 0; border-radius: 6px; background: #2f6fed; color: #fff; font: inherit; cursor: pointer; }
button.link { background: none; color: #cfd8ff; padding: 0; text-decoration: underline; }
button.danger { background: #c0392b; }
button.small { padding: .25rem .6rem; font-size: 13px; }
form.inline { display: inline; margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid #e3e6ea; padding: .4rem .5rem; text-align: left; white-space: nowrap; }
.scores td, .scores th { text-align: center; }
.error { background: #fdecea; color: #a12a1d; padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.warn { background: #c0392b; color: #fff; padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.ok { color: #1e8449; font-weight: 600; }
.hint { color: #666; font-size: 13px; }
.closed { font-weight: 700; color: #a12a1d; }
pre { background: #f6f8fa; padding: .8rem; border-radius: 6px; overflow: auto; font-size: 13px; }
.v { display: inline-block; min-width: 2.6em; text-align: center; padding: 1px 4px; margin-right: 2px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; background: #888; }
.v-AC { background: #1e8449; } .v-OLE { background: #a04000; } .v-WA { background: #c0392b; } .v-TLE { background: #d68910; } .v-MLE { background: #8e44ad; } .v-RE { background: #34495e; }
.st { font-weight: 600; }
.st-AC { color: #1e8449; } .st-WA, .st-TLE, .st-MLE, .st-OLE, .st-RE, .st-CE { color: #c0392b; } .st-SE { color: #2c5aa0; } .st-PENDING, .st-JUDGING { color: #d68910; }
button.secondary { background: #5d6d7e; }
.buttons { display: flex; gap: .6rem; }
.v { min-width: 2.6em; }
.sample-case { border-top: 1px solid #e3e6ea; padding-top: .6rem; margin-top: .6rem; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.io .in { grid-column: 1 / -1; }
.io h4 { margin: 0 0 .3rem; font-size: 13px; color: #555; }
.io pre { margin: 0; max-height: 160px; }

/* 헤더 */
header .clock { font-variant-numeric: tabular-nums; color: #cfd8ff; font-size: 15px; }
/* 학생 화면: 넓은 2단 레이아웃 */
main.wide { max-width: 1440px; }
.layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }
.col-left .card { position: sticky; top: .8rem; }
.scorebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; }
.scorebar .total { font-size: 20px; }
.scorebar .total strong { font-size: 26px; }
.scorebar .per-problem { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.scorebar .pp strong { font-size: 17px; }
.scorebar .hint { flex-basis: 100%; margin: 0; }
/* 문제 선택 탭 */
.tabs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .35rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tab { position: relative; margin: 0; padding: .45rem .2rem; text-align: center; border: 1px solid #c5cad3; border-radius: 6px; cursor: pointer; background: #fff; font-weight: 600; }
.tab input { position: absolute; opacity: 0; pointer-events: none; }
.tab .tab-id { display: block; font-size: 15px; }
.tab .tab-score { display: block; font-size: 11px; font-weight: 500; color: #777; }
.tab.full .tab-score { color: #1e8449; font-weight: 700; }
.tab.partial .tab-score { color: #d68910; font-weight: 700; }
.tab:has(input:checked) { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.tab:has(input:checked) .tab-score { color: #e8eeff; }
.tab:has(input:focus-visible) { outline: 2px solid #1d2330; outline-offset: 2px; }
/* 내 제출 표 */
table.subs tr.cases-row td { border-bottom: 1px solid #e3e6ea; padding-top: 0; }
table.subs tr:has(+ tr.cases-row) td { border-bottom: 0; }
button.quiet { background: #e3e6ea; color: #333; }
/* Test Sample 결과를 짧게 */
details.sample-case { padding-top: .45rem; margin-top: .45rem; }
details.sample-case summary { cursor: pointer; padding: .2rem 0; }
details.sample-case[open] summary { margin-bottom: .4rem; }
details.sample-case .io { margin-bottom: .3rem; }
#sample-result h2 { margin-bottom: .4rem; }
#sample-result pre.log { max-height: 160px; }
/* 코드 편집기 (CodeMirror) */
.CodeMirror { height: 460px; margin-top: .3rem; border: 1px solid #c5cad3; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.45; }
.CodeMirror-focused { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }
.CodeMirror-gutters { background: #f6f8fa; border-right: 1px solid #e3e6ea; }