:root{font-family:Inter,"Segoe UI","Malgun Gothic",sans-serif;color:#253247;background:#f4f6f9;font-size:14px;--navy:#182f48;--teal:#087f83;--line:#dbe2ea}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid #cbd5df;background:white;border-radius:7px;padding:9px 13px;color:inherit}button:hover{background:#edf5f5}button:disabled{cursor:not-allowed;opacity:.5}.primary{background:var(--teal);color:white;border-color:var(--teal);font-weight:700}.primary:hover{background:#086568}input,select,textarea{border:1px solid #c8d2dc;border-radius:6px;background:#fff;padding:9px;max-width:100%;width:100%;color:#24364a}input:focus,select:focus,textarea:focus{outline:2px solid #119a9d;outline-offset:1px}input:disabled,select:disabled{background:#e9edf1;color:#586777}input[type=checkbox]{width:auto}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}header{height:70px;background:var(--navy);color:white;display:flex;align-items:center;gap:24px;padding:0 28px}.brand{font-size:23px;font-weight:800;color:white;text-decoration:none;letter-spacing:-.5px}.brand span{font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:2.6px}.sandbox{font-size:12px;color:#a9d5d6;border:1px solid #3d5b6f;border-radius:20px;padding:6px 10px}#identity{margin-left:auto;display:flex;align-items:center;gap:10px}#identity a{color:#d6eeee}#app:not([hidden]){display:flex}aside{width:228px;flex-shrink:0;background:white;border-right:1px solid var(--line);padding:25px 18px;min-height:calc(100vh - 70px)}aside label{margin-bottom:12px}aside>button{width:100%}nav{display:grid;gap:8px;margin-top:30px}nav button,nav a{text-align:left;border:0;text-decoration:none;color:inherit;padding:12px}nav .selected{background:#e0f1ee;color:#075e62;font-weight:700}.aside-note{font-size:12px;color:#778594;line-height:1.8;margin-top:50px}.workspace{padding:27px 32px;min-width:0;flex:1;max-width:1600px}.context{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.context h1{margin:5px 0;font-size:25px}.context p{color:#67788a}.context label{width:170px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--teal)!important;font-weight:800}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 2px 3px #132e4410}summary{font-weight:700;cursor:pointer;margin-bottom:18px}h2{font-size:18px;margin:8px 0 12px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.wide{grid-column:span 3}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0}.toolbar label{min-width:190px}.toolbar select{width:auto;min-width:140px}.input-title{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.input-title p{font-size:12px;color:#67788a}.segmented{display:flex}.segmented button[aria-pressed=true]{background:var(--navy);color:white}.hint{margin-left:auto;font-size:11px;color:#67788a}.quickbar{display:flex;align-items:center;gap:7px;margin:12px 0;font-size:12px;flex-wrap:wrap}.quickbar button{padding:6px 12px;color:var(--teal);font-weight:700}.grid{padding:0;overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}th{background:#edf2f6;font-size:12px;text-align:left;position:sticky;top:0;z-index:1}td,th{padding:10px;border-bottom:1px solid #e4e9ef}td:first-child{min-width:145px}td input{width:92px}td select{width:100px}td small{display:block;color:#788698;font-size:10px;margin-top:4px}.name{font-weight:700}.subid{font-family:monospace;color:#7f8a96;font-size:10px}.cell-changed{background:#fff7d9!important}tr.ineligible{background:#f2f4f6}tr.locked{background:#fff9ef}.savebar{position:sticky;bottom:0;background:#fffffff5;backdrop-filter:blur(8px);border:1px solid var(--line);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:10px;margin-top:15px;z-index:3}.savebar small{display:block;color:#758597;margin-top:5px;font-size:11px}#status{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#182f48;color:#fff;border-radius:8px;padding:12px 20px;box-shadow:0 5px 20px #0003;z-index:20;max-width:85%;pointer-events:none}#status:empty{display:none}dialog{border:1px solid var(--line);border-radius:14px;padding:25px;max-width:min(940px,94vw);max-height:90vh;overflow:auto;box-shadow:0 20px 60px #15253640}dialog::backdrop{background:#132d4666}dialog form{display:grid;gap:14px;margin:15px 0}dialog table{white-space:normal}dialog label{margin:10px 0}.warning{background:#fff2d1;color:#7a5107;padding:12px;border-radius:7px;margin:10px 0}.error{background:#ffebe7;color:#9d291a;padding:12px;border-radius:7px;margin:10px 0}.empty{padding:40px;text-align:center;color:#768697}.card-nav{display:none}.login{max-width:440px;margin:80px auto}.login form{display:grid;gap:18px;margin-top:25px}button.history-link{font-size:10px;padding:2px 6px;border:0;color:#517280}.conflict-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.conflict-values>div{padding:9px;background:#f0f4f8;border-radius:5px;overflow-wrap:anywhere}body[data-view=cards] .card-nav{display:flex;justify-content:space-between;align-items:center;margin:15px 0}body[data-view=cards] .grid{overflow:visible}body[data-view=cards] #grid table,body[data-view=cards] #grid tbody{display:block}body[data-view=cards] #grid thead{display:none}body[data-view=cards] #grid tr{display:none;padding:20px}body[data-view=cards] #grid tr.card-current{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}body[data-view=cards] #grid td{display:block;border:0;padding:0}body[data-view=cards] #grid td:first-child{grid-column:1/-1;font-size:19px;margin-bottom:10px}body[data-view=cards] #grid td:not(:first-child)::before{content:attr(data-label);display:block;font-size:12px;color:#607386;margin:0 0 6px}body[data-view=cards] #grid td input,body[data-view=cards] #grid td select{width:100%}[hidden]{display:none!important}@media(max-width:850px){header{padding:0 16px;gap:10px}.sandbox{display:none}aside{width:180px;padding:18px 12px}.workspace{padding:20px 16px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:span 2}.hint{display:none}}@media(max-width:620px){header{height:62px}.brand{font-size:19px}#identity{font-size:11px}#app:not([hidden]){display:block}aside{width:100%;min-height:0;padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}aside label{width:100%;margin:0}aside>button{width:auto}nav{display:flex;gap:4px;margin:0;flex-wrap:wrap}nav button,nav a{padding:8px;font-size:12px}.aside-note{display:none}.workspace{padding:18px 12px}.context{gap:10px}.context h1{font-size:20px}.context label{width:135px}.context p{font-size:11px}.panel{padding:15px}.grid{padding:0}.toolbar{gap:7px}.toolbar button{font-size:12px}.input-title{align-items:flex-start;gap:10px}.input-title h2{font-size:17px}.segmented button{padding:7px;font-size:11px}.savebar{padding:12px}.savebar strong{font-size:12px}.savebar button{font-size:12px}.conflict-values{grid-template-columns:1fr}.login{margin:35px 15px}.quickbar span:last-child{display:none}}

#identity button{color:#253247;white-space:nowrap}body[data-view=cards] #grid td{white-space:normal;min-width:0}body[data-view=cards] #grid td .history-link{display:block;margin-top:4px}body[data-view=cards] #grid td:not(:first-child)::before{overflow-wrap:anywhere}.segmented{flex-shrink:0}

/* Keep the familiar dense classroom workspace, with a stable student column. */
.assignment-control{display:flex;min-width:0;gap:4px}.assignment-control input{min-width:0}.assignment-control button{padding:5px;flex-shrink:0;font-size:11px}#add-assignment{align-self:center;justify-self:start}
.grade-cuts{display:flex;gap:10px;flex-wrap:wrap}.grade-cuts label{display:flex;flex-direction:row;align-items:center}.grade-cuts input{width:90px}td textarea{min-width:190px;max-width:280px;width:100%;display:block;margin-top:4px}body[data-view=cards] #grid td:last-child{grid-column:1/-1}body[data-view=cards] #grid td textarea{max-width:none;min-width:0}
#assignment-fields{display:grid!important;grid-column:1/-1;grid-template-columns:1fr;gap:0}#assignment-fields>label{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:8px}#assignment-fields .assignment-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}summary #add-assignment{float:right;padding:4px 8px;font-size:12px}@media(max-width:620px){#assignment-fields{grid-template-columns:1fr}#assignment-fields>label{grid-template-columns:85px minmax(0,1fr);gap:8px}#assignment-fields .assignment-control{grid-template-columns:1fr auto}}
header{height:58px;padding:0 20px}header>a:first-child{color:inherit;font-size:12px}
aside{width:204px;background:#1f3864;color:#fff;padding:18px 12px;min-height:calc(100vh - 58px)}
aside>button{background:#ffffff12;color:inherit;border-color:#ffffff40}nav{gap:2px;margin-top:18px}nav a,nav button{padding:9px 12px;border-radius:5px;background:transparent;color:inherit}nav a:hover,nav button:hover{background:#ffffff20}nav .selected{background:#fff;color:#1f3864}.aside-note{color:#c5cfdf;margin-top:24px}
.workspace{padding:16px 22px}.context{margin-bottom:8px}.context h1{font-size:22px;margin:3px 0}.context p{margin:5px 0}.eyebrow{margin:0!important}.panel{border-radius:7px;padding:14px}summary{margin-bottom:12px}.toolbar{margin:10px 0;gap:8px}button,input,select,textarea{padding:7px 9px}.form-grid{gap:9px 14px;grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid>label{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:8px}.form-grid>.wide{grid-column:1/-1}.form-grid textarea{resize:vertical;min-height:34px;height:38px}.input-title{margin-top:16px}.input-title h2{margin:0 0 5px}.input-title p{margin:0}.grid{padding:0;max-height:65vh}td,th{padding:6px 8px}td:first-child,th:first-child{position:sticky;left:0;z-index:2;background:#fff;min-width:132px}th:first-child{z-index:4;background:#edf2f6}th{z-index:3}tr.ineligible td:first-child{background:#f2f4f6}tr.locked td:first-child{background:#fff9ef}td small{margin-top:2px}.student-jump-label{flex-direction:row;align-items:center;font-size:12px}.savebar{padding:10px 14px}.save-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.save-actions a{font-size:12px;color:#1f3864}.savebar small{font-size:11px}body[data-view=cards] .grid{max-height:none}body[data-view=cards] #grid td:first-child{position:static;background:transparent}
@media(max-width:850px){.form-grid>label{grid-template-columns:80px minmax(0,1fr)}.workspace{padding:14px}}
@media(max-width:620px){header{padding:0 10px;gap:8px}header>a:first-child{display:none}aside{width:100%;min-height:0;padding:10px 12px}aside nav{flex-wrap:nowrap;overflow-x:auto;width:100%;margin-top:4px;padding-bottom:3px}aside nav a,aside nav button{white-space:nowrap;flex-shrink:0}.workspace{padding:12px}.context label{width:130px}.form-grid{grid-template-columns:1fr}.form-grid>.wide{grid-column:1}.form-grid>label{grid-template-columns:85px minmax(0,1fr)}.savebar{align-items:flex-start;gap:8px}.save-actions{gap:8px}.save-actions button{width:100%}.save-actions a{font-size:11px}.savebar>div:first-child{min-width:95px}.toolbar .student-jump-label{width:100%}.student-jump-label select{min-width:0;flex:1}.grid{max-height:65vh}body[data-view=cards] .grid{max-height:none}nav .selected{background:#fff;color:#1f3864}}

/* Keep the PC input row compact; mobile retains a full comment card. */
body[data-view=table] td[data-label="개별 코멘트"]{min-width:310px}body[data-view=table] td textarea{display:inline-block;vertical-align:middle;width:190px;height:34px;min-height:34px;margin:0 0 0 4px;resize:vertical}body[data-view=table] td select{vertical-align:middle}
/* Strict work-screen parity: measured legacy sidebar 222px, topbar 58px,
   body 13px, table text 12px, entry controls 25px. Output styles are separate. */
.sidebar-brand{font-size:15px;font-weight:800;padding:0 2px 14px;color:#fff}.sidebar-brand small{display:block;font-size:11px;margin-top:4px;font-weight:500}.work-title{display:none}
body:has(#app[hidden]) header #review,body:has(#app[hidden]) header #new-lesson{display:none}
@media(min-width:851px){
 :root{font-size:13px;background:#faf9f6;color:#111827;--teal:#111827;--navy:#111827}
 body:has(#app:not([hidden])) header{margin-left:222px;height:58px;background:#fff;color:#111827;padding:8px 20px;gap:10px;border-bottom:1px solid #e5e1db}
 body:has(#app:not([hidden])) header>.brand,body:has(#app:not([hidden])) header>a:first-of-type{display:none}
 body:has(#app:not([hidden])) .work-title{display:block;font-size:15px;font-weight:800;white-space:nowrap}
 header .sandbox{border:0;color:#6b7280;font-size:10px;padding:0}#identity{font-size:11px;gap:6px}header button{white-space:nowrap}
 #app>aside{position:fixed;inset:0 auto 0 0;width:222px;min-height:100vh;overflow:auto;background:#111827;padding:16px 12px;border:0}
 #app>.workspace{margin-left:222px;padding:12px 18px;max-width:none}
 aside nav{gap:2px;margin-top:12px}aside nav a,aside nav button{font-size:12px;padding:9px 10px;min-height:36px;font-weight:600;border-radius:8px}aside .aside-note{margin-top:16px;font-size:10px;line-height:1.5}aside label{font-size:11px}aside select{height:36px}
 button{font-size:12px;padding:7px 12px;border-radius:8px;min-height:32px}label{font-size:12px}
 .context{margin:0 0 8px;align-items:center;gap:12px}.context .eyebrow{display:none}.context h1{font-size:14px;display:inline;margin:0 12px 0 0}.context p#context-line{display:inline;font-size:11px;margin:0}.context label{display:flex;flex-direction:row;align-items:center;width:auto;white-space:nowrap;font-size:11px}.context input{width:140px;padding:4px 6px;height:30px}
 .toolbar{gap:7px;margin:0 0 8px}.toolbar label{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}.toolbar select{padding:5px 8px;height:32px;max-width:310px}.toolbar button{font-size:11px;padding:6px 9px}
 #header-details{padding:0;border-radius:10px;overflow:hidden;margin-bottom:10px}#header-details summary{padding:8px 14px;margin:0;border-bottom:1px solid #e5e7eb;background:#fff;font-size:12px}#add-assignment{min-height:26px;padding:3px 8px;font-size:11px;margin-left:12px}
 #lesson-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 #lesson-form .form-grid>label,#lesson-form #assignment-fields>label{grid-column:1/-1;display:grid;grid-template-columns:160px minmax(0,1fr);gap:0;align-items:center;min-height:34px;background:linear-gradient(to right,#e8f3fd 160px,#fff 160px);border-bottom:1px solid #e5e1db;padding:0 10px 0 12px;font-size:12px;font-weight:700}
 #lesson-form .form-grid>label:has([name=lesson_date]),#lesson-form .form-grid>label:has([name=sequence]),#lesson-form .form-grid>label:has([name=exam_name]),#lesson-form .form-grid>label:has([name=total_score]){grid-column:auto}
 #lesson-form input,#lesson-form textarea{padding:5px 8px;font-size:12px;border:0;background:transparent;min-height:30px;height:30px;border-radius:4px;resize:vertical;font-weight:400}
 #lesson-form .grade-cuts{gap:10px;padding:3px 0}.grade-cuts label{font-size:10px}.grade-cuts input{width:65px!important;border:1px solid #dbe2ea!important;height:25px!important;min-height:25px!important}
 .assignment-control button{min-height:24px;font-size:10px;padding:2px 6px}
 .input-title{margin:0;padding:6px 10px;background:#fff;border:1px solid #e5e1db;border-radius:10px 10px 0 0;gap:10px}.input-title h2{font-size:12px;margin:0}.input-title p{font-size:10px;margin:3px 0 0}.segmented button{font-size:11px;min-height:28px;padding:4px 9px}
 .input-title+.toolbar{margin:0;padding:5px 8px;background:#fff;gap:10px;font-size:11px}.student-jump-label{font-size:10px}.student-jump-label select{height:26px;padding:2px 6px;font-size:11px}.hint{font-size:10px}
 .quickbar{margin:0;padding:4px 8px;background:#fff;gap:6px;font-size:10px}.quickbar button{min-height:24px;padding:2px 8px;font-size:11px}
 body[data-view=table] #grid{border-radius:0;max-height:calc(100vh - 160px)}
 body[data-view=table] #grid th{background:#f0efff;color:#111827;border:1px solid #e0ddfd;padding:5px 6px;font-size:11px;height:30px}
 body[data-view=table] #grid td{padding:5px 6px;border:1px solid #e5e1db;font-size:12px;height:38px}
 body[data-view=table] #grid td input,body[data-view=table] #grid td select{height:25px;min-height:25px;padding:3px 6px;font-size:12px;border-radius:7px}
 body[data-view=table] #grid td small{font-size:9px;margin:1px 0 0;line-height:11px}body[data-view=table] #grid .subid{font-size:9px;display:inline;margin-left:4px}
 body[data-view=table] #grid td:first-child{min-width:120px}body[data-view=table] #grid td:first-child small{display:inline;margin-left:4px}
 body[data-view=table] #grid .history-link{min-height:20px;padding:1px 4px;font-size:9px}
 body[data-view=table] #grid td:last-child{min-width:265px}body[data-view=table] #grid td textarea{height:25px;min-height:25px;min-width:160px;padding:3px 6px;margin:0;font-size:12px;vertical-align:middle}
 .savebar{padding:7px 12px;margin-top:8px;border-radius:7px;min-height:42px;font-size:11px}.savebar small{font-size:10px;margin-top:2px}
}
@media(max-width:850px){.sidebar-brand{display:none}.work-title{display:none}header #new-lesson{font-size:10px;padding:5px}header #review{font-size:11px;padding:5px}header .brand{font-size:15px}header>a:first-of-type{display:none}#identity{font-size:10px}#identity span{max-width:85px;overflow:hidden;text-overflow:ellipsis}header{gap:5px!important}#identity button{padding:4px;font-size:10px}}
@media(max-width:850px){header #new-lesson{color:#111827;white-space:nowrap}header #review{white-space:nowrap}header .brand{flex-shrink:0}header #identity span{display:none}}

/* Student-specific tasks share drafts while keeping the desktop table compact. */
#assignment-rule-panel { margin-top:10px; }
#rule-students input:not([type=checkbox]) {max-width:100%;min-width:0;}
#rule-students td {vertical-align:top;}
@media(max-width:620px){#rule-students table,#rule-students tbody,#rule-students tr,#rule-students td {display:block;width:100%;min-width:0;box-sizing:border-box;}#rule-students thead{display:none;}#rule-students tr{border-bottom:1px solid #d7e0ea;padding:8px 0;}#rule-students td{position:static;white-space:normal;}#rule-students td::before{content:attr(data-label);display:block;font-weight:600;font-size:12px;margin-bottom:4px;}#rule-students input:not([type=checkbox]){width:100%;}#rule-students label{white-space:normal;}}