/* 내신 등급 계산기 전용 CSS (2026-10-20). 위 모드 카드 + 체계(sgc-top) → ① 평균: 결과 띠(sgc-sum) → 성적표(sgc-book) → 목표 평균(sgc-goal)
   ② 석차: 결과 띠 → 입력 줄(sgc-rin) → 좌석표 | 등급별 범위(sgc-seatrow). 공용 부품은 assets/v2.css.
   시각 요소(R45): 학기별 추이 그래프(선 그리기·점 미끄러짐) · 교과별 위치 점(미끄러짐) · 목표 눈금(표식 미끄러짐) · 수강자 좌석표(등급별 농도, 내 자리 강조). 동작 줄이기면 멈춤.
   accent 는 화면마다 한 곳: 평균 = 남은 학기에 필요한 평균, 석차 = 내 자리. */
.sgc{container:sgc / inline-size}
.sgc [hidden]{display:none !important}

/* 위: 모드 카드 두 장 + 등급 체계 */
.sgc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:end;padding:14px 18px;border-bottom:1px solid var(--soft)}
.sgc-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sgc-mode{display:grid;gap:3px;justify-items:start;min-width:0;padding:9px 13px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.sgc-mode:hover{background:var(--btn)}
.sgc-mode .sgc-mk{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted)}
.sgc-mode b{font-family:var(--sans);font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.sgc-mode small{max-width:100%;font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgc-mode[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.sgc-mode[aria-pressed="true"] .sgc-mk,.sgc-mode[aria-pressed="true"] small{color:var(--on-fill);opacity:.78}
.sgc-mode:focus-visible,.sgc-sems button:focus-visible,.sgc-clist button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sgc-scale{display:grid;gap:5px}
.sgc-seg button{display:grid;align-content:center;height:auto;min-height:var(--v2-ctl,42px);padding:4px 12px;line-height:1.25;text-align:left}
.sgc-seg button small{font-size:11px;font-weight:500;opacity:.8}

/* ① 평균: 결과 띠 */
.sgc-sum{padding:16px 18px 18px;border-bottom:1px solid var(--soft)}
.sgc-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px 26px;align-items:start}
.sgc-main{min-width:0}
.sgc-main .v2-label,.sgc-trend .v2-label,.sgc-subs .v2-label,.sgc-combos .v2-label,.sgc-cuts .v2-label,.sgc-seatfig .v2-label,.sgc-boxlabel{display:block;margin-bottom:6px}
.sgc-main .v2-big>span i{font-style:normal;font-size:.4em;font-weight:700;margin-left:5px;color:var(--muted)}
.sgc-main .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.sgc-stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0}
.sgc-stats div{display:grid;gap:1px}
.sgc-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.sgc-stats dd{margin:0;font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.sgc-trend{margin:0;min-width:0}
.sgc-trend svg{display:block;width:100%;height:auto;overflow:visible}
.sgc-grid{stroke:var(--soft);stroke-width:1}
.sgc-ax{font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--muted)}
.sgc-sx{opacity:.55}
.sgc-sx.is-on{opacity:1;fill:var(--ink)}
.sgc-avgl{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.sgc-avgt{font-family:var(--sans);font-size:10px;font-weight:700;fill:var(--muted)}
.sgc-line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.sgc-pts circle{fill:var(--card);stroke:var(--ink);stroke-width:2}
.sgc-need{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 3}
.sgc-npts rect{fill:var(--accent)}
.sgc-npts text{font-family:var(--sans);font-size:10.5px;font-weight:750;fill:var(--accent);font-variant-numeric:tabular-nums}
.sgc-pts text{font-family:var(--sans);font-size:10.5px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums}
.sgc-tip{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.sgc-tip:empty{display:none}

/* 교과별 위치 | 교과 조합 */
.sgc-mid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px 26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--soft)}
.sgc-dots{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sgc-dots li,.sgc-tk{display:grid;grid-template-columns:34px minmax(0,1fr) 36px 50px;gap:10px;align-items:center;min-height:26px}
.sgc-dl{font-family:var(--sans);font-size:12.5px;font-weight:650}
.sgc-dt{position:relative;height:18px;margin:0 6px}
.sgc-dt::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.sgc-dt::after{content:"";position:absolute;left:var(--avg,-10%);top:-3px;bottom:-3px;border-left:1px dashed var(--muted);transition:left .35s cubic-bezier(.2,.7,.2,1)}
.sgc-dd{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);transition:left .35s cubic-bezier(.2,.7,.2,1)}
.sgc-dots b{font-family:var(--sans);font-size:13px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.sgc-dots small{font-family:var(--sans);font-size:11px;color:var(--muted);white-space:nowrap}
.sgc-dots li.is-out .sgc-dl,.sgc-dots li.is-out b{color:var(--muted)}
.sgc-dots li.is-out .sgc-dd{background:var(--card);border:2px solid var(--muted)}
.sgc-dots li.is-none .sgc-dd{display:none}
.sgc-dots li.is-none b{color:var(--muted);font-weight:500}
.sgc-tk{min-height:16px}
.sgc-tkr{position:relative;height:14px;margin:0 6px}
.sgc-tkr span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10px;font-weight:600;color:var(--muted)}
.sgc-clist{display:grid;gap:4px}
.sgc-clist button{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:8px;align-items:center;height:34px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.sgc-clist button:hover{background:var(--btn)}
.sgc-clist span{font-family:var(--sans);font-size:12.5px;font-weight:650}
.sgc-clist b{font-family:var(--sans);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.sgc-clist small{font-family:var(--sans);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.sgc-clist button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.sgc-clist button[aria-pressed="true"] small{color:var(--on-fill);opacity:.75}
.sgc-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:3px}
.sgc-notes:empty{display:none}
.sgc-notes li{position:relative;padding-left:12px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.sgc-notes li::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;background:var(--line)}
.sgc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}

/* 성적표 */
.sgc-book{padding:16px 18px 18px;border-bottom:1px solid var(--soft)}
.sgc-bhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sgc-count{font-family:var(--sans);font-size:12px;color:var(--muted);text-align:right}
.sgc-sems{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:8px 0 10px}
.sgc-sems button{display:grid;place-items:center;gap:1px;min-width:0;height:44px;padding:0 4px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.sgc-sems button span{font-family:var(--sans);font-size:13px;font-weight:750;line-height:1.1}
.sgc-sems button small{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.sgc-sems button.has-data{color:var(--ink)}
.sgc-sems button:hover{background:var(--btn)}
.sgc-sems button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.sgc-hint{margin:0 0 10px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.sgc-form{container:sgcl / inline-size} /* 폼을 품은 칸은 v2.css 가 v2in 컨테이너로 잡으므로 줄 배치 기준은 폼 자신 */
.sgc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px}
.sgc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;grid-template-areas:"sub name del" "w g .";gap:5px;align-items:center}
.sgc-row .sgc-sub{grid-area:sub}.sgc-row .sgc-name{grid-area:name}.sgc-row .sgc-w{grid-area:w}.sgc-row .sgc-g{grid-area:g}.sgc-row .sgc-del{grid-area:del}
@container sgcl (min-width:330px){ .sgc-row{grid-template-columns:58px minmax(0,1fr) 70px 66px 28px;grid-template-areas:"sub name w g del"} .sgc-del{width:28px} }
@container sgcl (min-width:440px){ .sgc-row{grid-template-columns:66px minmax(0,1fr) 80px 74px 30px} .sgc-del{width:30px} }
@container sgcl (min-width:740px){ .sgc-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sgc-row select{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 20px 0 8px;border:1px solid var(--line);border-radius:var(--radius);appearance:none;-webkit-appearance:none;background:var(--paper) no-repeat right 7px center/9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");font-family:var(--sans);font-size:13.5px;font-weight:650;color:var(--ink);text-overflow:ellipsis}
.sgc-row select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sgc-row .v2-input{min-width:0}
.sgc-row .v2-input input{padding:0 7px;font-size:14.5px}
.sgc-row .sgc-name input{text-align:left;font-weight:550}
.sgc-row .sgc-w b{min-width:0;padding:0 6px}
.sgc-row .is-miss{border-style:dashed;border-color:var(--accent)}
.sgc-row [aria-invalid="true"]{color:var(--accent)}
.sgc-row .sgc-w:has([aria-invalid="true"]){border-color:var(--accent)}
.sgc-del{width:30px;height:var(--v2-ctl,42px);border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.sgc-del:hover{background:var(--btn);color:var(--ink)}
.sgc-empty{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:13px;color:var(--muted)}
.sgc-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.sgc-q{height:30px;padding:0 10px;background:var(--paper);border-color:var(--soft);font-weight:600}
.sgc-q:disabled{opacity:.45;cursor:default}
.sgc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}

/* 목표 평균까지 */
.sgc-goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sgc-gin{padding:16px 18px 18px}
.sgc-gform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sgc-gin .sgc-hint{margin:10px 0 0}
.sgc-gout{display:grid;align-content:start;gap:6px;padding:16px 18px 18px;border-left:1px solid var(--soft)}
.sgc-gbig{display:flex;align-items:baseline;gap:6px;margin:0;font-family:var(--sans);line-height:1.1}
.sgc-gbig b{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.sgc-gbig span{font-size:15px;font-weight:700;color:var(--ink)}
.sgc-gscale{margin:6px 8px 0}
.sgc-gtrack{position:relative;height:22px}
.sgc-gtrack::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid var(--soft)}
.sgc-gm{position:absolute;top:50%;transition:left .35s cubic-bezier(.2,.7,.2,1),opacity var(--ease)}
.sgc-gm.is-now{width:12px;height:12px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.sgc-gm.is-goal{width:2px;height:22px;background:var(--ink);transform:translate(-50%,-50%)}
.sgc-gm.is-need{width:12px;height:12px;background:var(--accent);transform:translate(-50%,-50%) rotate(45deg)}
.sgc-gm.is-hidden,.sgc-gscale.is-off .sgc-gm{opacity:0}
.sgc-gticks{position:relative;height:14px;margin-top:2px}
.sgc-gticks span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10px;font-weight:600;color:var(--muted)}
.sgc-gkey{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sgc-gkey li{display:inline-flex;align-items:center;gap:6px}
.sgc-gkey li::before{content:"";width:9px;height:9px;background:var(--ink)}
.sgc-gkey li.is-now::before{border-radius:50%}
.sgc-gkey li.is-goal::before{width:2px;height:11px}
.sgc-gkey li.is-need::before{background:var(--accent);transform:rotate(45deg) scale(.85)}
.sgc-note{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ② 석차 */
.sgc-res--rank{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sgc-rrows li span{min-width:0}
.sgc-rin{padding:16px 18px 18px;border-bottom:1px solid var(--soft)}
.sgc-rform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sgc-rin .sgc-hint{margin:10px 0 0}
.sgc-racts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sgc-seatrow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.sgc-seatfig{margin:0;padding:16px 18px 18px;min-width:0}
.sgc-seats{display:grid;grid-template-columns:repeat(var(--cols,10),minmax(0,1fr));gap:2px}
.sgc-seats span{aspect-ratio:1;min-width:0;border-radius:1px;cursor:pointer;transition:background-color .3s ease,box-shadow .2s ease}
.sgc-seats span:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.sgc-seats span.is-me{background:var(--accent) !important;box-shadow:0 0 0 1px var(--card)}
.sgc-seats.is-strip{display:flex;position:relative;height:38px;gap:1px}
.sgc-seats.is-strip span{flex-basis:0;aspect-ratio:auto;cursor:default}
.sgc-seats .sgc-me{position:absolute;top:-4px;bottom:-4px;min-width:2px;background:var(--accent);transition:left .35s ease,width .35s ease}
.sgc-seats.is-off{display:block;min-height:0}
.sgc-seatfig .sgc-note{margin-top:8px}
.sgc-cuts{padding:16px 18px 18px;border-left:1px solid var(--soft);min-width:0}
.sgc-cutlist{list-style:none;margin:0;padding:0}
.sgc-cutlist li{display:grid;grid-template-columns:12px 44px 62px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 6px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.sgc-cutlist li:last-child{border-bottom:1px solid var(--soft)}
.sgc-cutlist li i{width:12px;height:12px;border-radius:1px}
.sgc-cutlist li b{font-weight:700}
.sgc-cp{font-size:11.5px;color:var(--muted)}
.sgc-cr{text-align:right;white-space:nowrap}
.sgc-cn{min-width:44px;text-align:right;color:var(--muted);white-space:nowrap}
.sgc-cutlist li.is-cur{background:var(--wash);font-weight:750}
.sgc-cutlist li.is-cur .sgc-cn{color:var(--ink)}
.sgc-cutlist li.is-zero .sgc-cr,.sgc-cutlist li.is-zero b{color:var(--muted)}

/* 등급별 농도(앞 등급일수록 진함) — 좌석·띠·범위 표 견본 공통 */
[data-s="5"] .g1{background:color-mix(in srgb, var(--fill) 90%, var(--paper))}
[data-s="5"] .g2{background:color-mix(in srgb, var(--fill) 66%, var(--paper))}
[data-s="5"] .g3{background:color-mix(in srgb, var(--fill) 44%, var(--paper))}
[data-s="5"] .g4{background:color-mix(in srgb, var(--fill) 26%, var(--paper))}
[data-s="5"] .g5{background:color-mix(in srgb, var(--fill) 12%, var(--paper))}
[data-s="9"] .g1{background:color-mix(in srgb, var(--fill) 92%, var(--paper))}
[data-s="9"] .g2{background:color-mix(in srgb, var(--fill) 80%, var(--paper))}
[data-s="9"] .g3{background:color-mix(in srgb, var(--fill) 68%, var(--paper))}
[data-s="9"] .g4{background:color-mix(in srgb, var(--fill) 57%, var(--paper))}
[data-s="9"] .g5{background:color-mix(in srgb, var(--fill) 46%, var(--paper))}
[data-s="9"] .g6{background:color-mix(in srgb, var(--fill) 36%, var(--paper))}
[data-s="9"] .g7{background:color-mix(in srgb, var(--fill) 27%, var(--paper))}
[data-s="9"] .g8{background:color-mix(in srgb, var(--fill) 19%, var(--paper))}
[data-s="9"] .g9{background:color-mix(in srgb, var(--fill) 12%, var(--paper))}

/* 좁은 작업면: 두 칸을 한 칸으로 */
@container sgc (max-width:640px){
  .sgc-top{grid-template-columns:minmax(0,1fr)}
  .sgc-res,.sgc-res--rank,.sgc-mid,.sgc-goal,.sgc-seatrow{grid-template-columns:minmax(0,1fr)}
  .sgc-gout,.sgc-cuts{border-left:0;border-top:1px solid var(--soft)}
}
@container sgc (max-width:420px){
  .sgc-top,.sgc-sum,.sgc-book,.sgc-gin,.sgc-gout,.sgc-rin,.sgc-seatfig,.sgc-cuts{padding-left:14px;padding-right:14px}
  .sgc-mode b{font-size:19px}
  .sgc-sems{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sgc-cutlist li{grid-template-columns:12px 40px minmax(0,1fr) auto;gap:6px}
  .sgc-cutlist li .sgc-cp{display:none}
}
@container v2in (max-width:330px){ .sgc .sgc-gform,.sgc .sgc-rform{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .sgc-dd,.sgc-dt::after,.sgc-gm,.sgc-seats span,.sgc-seats .sgc-me,.sgc-line{transition:none !important} }