/* ============================================================
   매일학습 자세히 보기 — class/js/study-view.js 의 스타일
   학생 제출 화면(submit.html) · 교사 학생 상세(index.html) 공용. 토큰만 쓴다.
   ============================================================ */
.sv-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--yj-s2)}
.sv-kv > div{background:var(--yj-leaf-tint);border-radius:var(--yj-r-sm);padding:var(--yj-s2) var(--yj-s3)}
.sv-kv b{display:block;font-family:var(--yj-font-disp);font-size:var(--yj-t-vocab);font-weight:800;color:var(--yj-ink-deep)}
.sv-kv span{display:block;font-size:var(--yj-t-label);font-weight:700;color:var(--yj-leaf-ink)}
.sv-kv small{display:block;font-size:var(--yj-t-label);color:var(--yj-slate);margin-top:2px}

.sv-h{display:flex;align-items:baseline;gap:var(--yj-s2);margin:var(--yj-s5) 0 var(--yj-s2);font-size:var(--yj-t-cap);font-weight:800;color:var(--yj-ink-deep)}
.sv-h small{font-weight:600;color:var(--yj-slate);font-size:var(--yj-t-label)}
.sv-note{margin:var(--yj-s2) 0 0;font-size:var(--yj-t-cap);line-height:1.6;color:var(--yj-slate)}
.sv-note b{color:var(--yj-ink-deep)}
.sv-empty{margin:var(--yj-s2) 0 0;font-size:var(--yj-t-cap);color:var(--yj-slate)}
.sv-foot{margin:var(--yj-s5) 0 0;padding-top:var(--yj-s3);border-top:1px solid var(--yj-hairline);font-size:var(--yj-t-label);color:var(--yj-steel)}
.sv-warn{color:var(--yj-orange-ink);font-weight:700}

.sv-scroll{overflow-x:auto}
.sv-tb{width:100%;border-collapse:collapse;font-size:var(--yj-t-cap);white-space:nowrap}
.sv-tb th,.sv-tb td{padding:var(--yj-s2);text-align:left;border-bottom:1px solid var(--yj-hairline)}
.sv-tb thead th{font-size:var(--yj-t-label);font-weight:800;color:var(--yj-slate)}
.sv-tb tbody th{font-weight:800;color:var(--yj-ink-deep)}
.sv-tb tbody th small{display:inline-block;margin-left:4px;font-size:var(--yj-t-label);color:var(--yj-amber-ink);background:var(--yj-amber-tint);
  border-radius:var(--yj-r-xs);padding:0 4px}
.sv-tb td.n{text-align:right;font-variant-numeric:tabular-nums}
.sv-tb tr.is-now{background:var(--yj-amber-tint)}
.sv-prog{display:flex;align-items:center;gap:var(--yj-s2);min-width:190px;font-variant-numeric:tabular-nums}
.sv-prog small{color:var(--yj-slate)}
.sv-bar{flex:1;min-width:60px;height:8px;border-radius:var(--yj-r-full);background:var(--yj-surface-2);overflow:hidden}
.sv-bar i{display:block;height:100%;background:var(--yj-leaf)}
.sv-bar--grad i{background:var(--yj-grad)}

.sv-bands{display:flex;height:14px;border-radius:var(--yj-r-full);overflow:hidden;background:var(--yj-surface-2)}
.sv-bands i{display:block;height:100%}
.sv-b--s3{background:var(--yj-leaf)}
.sv-b--s2{background:var(--yj-leaf-tint)}
.sv-b--s1{background:var(--yj-amber-tint)}
.sv-b--low{background:var(--yj-orange)}
.sv-legend{display:flex;flex-wrap:wrap;gap:var(--yj-s3);margin-top:var(--yj-s2);font-size:var(--yj-t-label);color:var(--yj-slate)}
.sv-legend span{display:inline-flex;align-items:center;gap:4px}
.sv-legend i{display:inline-block;width:10px;height:10px;border-radius:var(--yj-r-xs)}

.sv-list{list-style:none;margin:0;padding:0}
.sv-list li{display:flex;align-items:center;gap:var(--yj-s2);flex-wrap:wrap;padding:var(--yj-s2) 0;border-top:1px solid var(--yj-hairline);font-size:var(--yj-t-cap)}
.sv-list li:first-child{border-top:0}
.sv-w{flex:1;min-width:0;display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sv-w b{font-size:var(--yj-t-body);font-weight:700;color:var(--yj-ink-deep)}
.sv-hz{font-family:var(--yj-font-hanja);font-size:var(--yj-t-vch);color:var(--yj-steel)}
.sv-w small,.sv-list small{color:var(--yj-slate);font-size:var(--yj-t-label)}
.sv-date{min-width:52px}
.sv-acc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--yj-ink)}
.sv-go{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--yj-s3);border-radius:var(--yj-r-sm);
  background:var(--yj-amber-tint);color:var(--yj-amber-ink);font-weight:700;text-decoration:none}