/* 학교 입학·졸업 연도 계산기 전용 CSS (2026-10-18). 위 입력 막대 · 답 타일 3개 · 학교 계단(SVG) · 학교별 입학·졸업 목록 | 올해 학년별 출생 격자 · 복사 sc-*.
   공용 부품은 assets/v2.css. 움직임 하나: '지금' 표식이 첫 칸에서 제 학년까지 계단을 올라감 700ms cubic-bezier(.22,1,.36,1), 고른 해 테두리 180ms, 동작 줄이기면 끔.
   단계 색: --fill을 종이색과 섞은 농도 차이(유치원 → 고등학교로 갈수록 진함), 대학은 옅은 면, 재수는 빗금. 강조색은 '지금' 칸·표식 한 곳. 두 열 ↔ 한 열은 툴 폭 컨테이너(640px). */
.sc-work{container:sc / inline-size}
.sc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"bar bar" "hero hero" "line line" "list side" "foot foot"}
.sc-work [hidden]{display:none !important}
.c-pre{--k:color-mix(in srgb, var(--fill) 14%, var(--paper))}
.c-elem{--k:color-mix(in srgb, var(--fill) 30%, var(--paper))}
.c-mid{--k:color-mix(in srgb, var(--fill) 48%, var(--paper))}
.c-high{--k:color-mix(in srgb, var(--fill) 66%, var(--paper))}
.c-univ{--k:color-mix(in srgb, var(--fill) 22%, var(--paper))}

/* 입력 막대 */
.sc-bar{grid-area:bar;display:flex;flex-direction:column;gap:12px;padding:16px 18px 14px;border-bottom:1px solid var(--soft);min-width:0}
.sc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.sc-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px;margin:0}
.sc-f-wide{grid-column:span 2}
.sc-fields .v2-label em{margin-left:5px;font-style:normal;font-weight:500;color:var(--muted);opacity:.8}
.sc-select{display:block;width:100%;max-width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-overflow:ellipsis;transition:border-color var(--ease),box-shadow var(--ease)}
.sc-select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sc-select:disabled{opacity:.5}
.v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.sc-opts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px}
.sc-opt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.sc-opt-lab{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.sc-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 답 */
.sc-hero{grid-area:hero;display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0;border-bottom:1px solid var(--soft)}
.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sc-tile{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 14px;border-left:1px solid var(--soft)}
.sc-tile:first-child{padding-left:0;border-left:0}
.sc-tile b{font-family:var(--sans);font-size:clamp(20px,4.2cqi,30px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.sc-tile b.is-long{font-size:clamp(15px,2.6cqi,19px);line-height:1.3}
.sc-tile:last-child b{color:var(--ink)}
.sc-say{margin:2px 0 0}
.sc-alt{margin:0;padding:8px 10px;border-left:2px solid var(--line);font-size:12.8px;line-height:1.6;color:var(--muted);background:var(--paper)}
.sc-link{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sc-chips li{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:12.5px;line-height:1.4}
.sc-chips li span{font-family:var(--sans);font-weight:600;color:var(--muted)}
.sc-chips li b{font-family:var(--sans);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-chips li.is-now{border-color:var(--accent)}
.sc-chips li.is-now b{color:var(--accent)}

/* 학교 계단 */
.sc-line{grid-area:line;padding:16px 18px 12px;border-bottom:1px solid var(--soft);min-width:0}
.sc-line-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sc-legend{display:flex;gap:12px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sc-legend li{display:inline-flex;align-items:center;gap:5px}
.sc-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}
.sc-legend .k-now{background:var(--accent);border-radius:50%}
.sc-legend .k-pick{border:1.5px solid var(--ink)}
.sc-legend .k-gap{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 5px);border:1px solid var(--line)}
.sc-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
.sc-stairs{position:relative;min-width:100%;touch-action:pan-x pan-y;cursor:pointer;border-radius:var(--radius);outline:0}
.sc-stairs:focus-visible{box-shadow:0 0 0 2px var(--accent-wash),0 0 0 1px var(--ink)}
.sc-stairs svg{display:block;overflow:visible}
.sc-stairs rect.c{fill:var(--k);stroke:color-mix(in srgb, var(--ink) 14%, transparent);stroke-width:.6;transition:fill 180ms cubic-bezier(.22,1,.36,1)}
.sc-stairs rect.c.gap{fill:url(#scHatch);stroke-dasharray:3 2}
.sc-stairs #scHatch path{stroke:var(--line);stroke-width:1.4}
.sc-stairs rect.c.on{stroke:var(--ink);stroke-width:1.6}
.sc-stairs text{font-family:var(--sans);fill:var(--ink);pointer-events:none}
.sc-stairs text.g{font-size:10.5px;font-weight:700;text-anchor:middle;fill:color-mix(in srgb, var(--ink) 78%, transparent)}
.sc-stairs rect.c-high + text.g{fill:var(--paper)}
.sc-stairs text.yr{font-family:var(--mono);font-size:10px;text-anchor:middle;fill:var(--muted)}
.sc-stairs rect.band{fill:var(--k);stroke:none}
.sc-stairs rect.band.gap{fill:url(#scHatch);stroke:var(--line);stroke-width:.8}
.sc-stairs text.bt{font-size:10.5px;font-weight:700;text-anchor:middle;fill:var(--ink)}
.sc-stairs text.b-high{fill:var(--paper)}
.sc-stairs .pick rect{fill:color-mix(in srgb, var(--ink) 5%, transparent);stroke:none}
.sc-stairs .pick{transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.sc-stairs line.now{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 3}
.sc-stairs .me{transition:transform 700ms cubic-bezier(.22,1,.36,1)}
.sc-stairs .me circle{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.sc-stairs .me-t{font-size:10.5px;font-weight:800;text-anchor:middle;fill:var(--accent)}
.sc-cap{min-height:1.6em;margin:8px 0 2px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-keys{display:block;font-size:11.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sc-stairs .me,.sc-stairs .pick,.sc-stairs rect.c{transition:none}}

/* 학교별 입학·졸업 */
.sc-list{grid-area:list;display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0;border-right:1px solid var(--soft)}
.sc-rows{list-style:none;margin:0;padding:0}
.sc-rows li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;gap:4px 10px;padding:7px 0;border-top:1px solid var(--soft);font-size:13.5px}
.sc-rows li:first-child{border-top:0}
.sc-rows .nm{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;color:var(--ink);white-space:nowrap}
.sc-rows .nm i{flex:0 0 auto;width:10px;height:10px;border-radius:2px;background:var(--k);border:1px solid color-mix(in srgb, var(--ink) 18%, transparent)}
.sc-rows li b{justify-self:end;font-family:var(--sans);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.sc-rows li em{font-style:normal;font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap}
.sc-rows li.hi .nm,.sc-rows li.hi b{font-weight:500;color:var(--muted)}
.sc-rows .r-pre{--k:color-mix(in srgb, var(--fill) 14%, var(--paper))}
.sc-rows .r-elem{--k:color-mix(in srgb, var(--fill) 30%, var(--paper))}
.sc-rows .r-mid{--k:color-mix(in srgb, var(--fill) 48%, var(--paper))}
.sc-rows .r-high{--k:color-mix(in srgb, var(--fill) 66%, var(--paper))}
.sc-rows .r-univ,.sc-rows .r-col,.sc-rows .r-mas,.sc-rows .r-doc{--k:color-mix(in srgb, var(--fill) 22%, var(--paper))}
.sc-gaps{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:4px}
.sc-gap{display:flex;align-items:center;gap:8px}
.sc-gap-lab{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink)}
.sc-gap-lab em{display:block;font-style:normal;font-weight:500;font-size:11px;color:var(--muted)}
.sc-step{display:inline-flex;align-items:center;gap:4px}
.sc-step .v2-btn{width:30px;height:30px;justify-content:center;padding:0;font-size:16px}
.sc-step output{min-width:1.4em;text-align:center;font-family:var(--sans);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.sc-step b{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.sc-exam{margin:0;padding:8px 10px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--soft);font-size:13px;line-height:1.55;font-variant-numeric:tabular-nums}
.sc-exam span{font-family:var(--sans);font-weight:700;color:var(--muted);margin-right:4px}
.sc-note{margin:0;font-size:11.8px;line-height:1.55;color:var(--muted)}

/* 올해 학년별 출생 격자 */
.sc-side{grid-area:side;display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0}
.sc-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr));gap:6px;margin:0;padding:0;list-style:none}
.sc-cells button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:50px;padding:6px 8px;border:1px solid var(--soft);border-left:4px solid var(--k);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.sc-cells button:hover{background:var(--btn)}
.sc-cells button b{font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--ink)}
.sc-cells button span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.sc-cells button.on{border-color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb, var(--accent-wash) 60%, var(--paper))}
.sc-cells button.on span{color:var(--ink)}
.sc-cells .r-pre{--k:color-mix(in srgb, var(--fill) 14%, var(--paper))}
.sc-cells .r-elem{--k:color-mix(in srgb, var(--fill) 30%, var(--paper))}
.sc-cells .r-mid{--k:color-mix(in srgb, var(--fill) 48%, var(--paper))}
.sc-cells .r-high{--k:color-mix(in srgb, var(--fill) 66%, var(--paper))}
.sc-cmp{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.sc-cmp-rows li{flex-wrap:wrap;row-gap:2px}
.sc-cmp-rows li b{white-space:normal;text-align:right;font-weight:600}
.sc-cmp-rows li.on span,.sc-cmp-rows li.on b{color:var(--ink);font-weight:800}

/* 복사 */
.sc-foot{grid-area:foot;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 18px 16px;border-top:1px solid var(--soft)}
.v2-status.ok{color:var(--ink)}

@container sc (max-width:639px){
  .sc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "bar" "line" "list" "side" "foot"}
  .sc-hero{border-bottom:1px solid var(--soft)}
  .sc-list{border-right:0;border-bottom:1px solid var(--soft)}
  .sc-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sc-tile:first-child{grid-column:1 / -1;padding:0 0 10px;border-bottom:1px solid var(--soft)}
  .sc-tile:nth-child(2){padding-left:0;border-left:0;padding-top:10px}
  .sc-tile:nth-child(3){padding-top:10px}
  .sc-tile b{font-size:clamp(19px,6cqi,26px)}
  .sc-tile b.is-long{font-size:15px}
}
@container sc (max-width:400px){
  .sc-bar,.sc-hero,.sc-line,.sc-list,.sc-side,.sc-foot{padding-left:14px;padding-right:14px}
  .sc-f-wide{grid-column:1 / -1}
  .sc-rows li{grid-template-columns:minmax(0,1fr) auto}
  .sc-rows li b{grid-column:1 / -1;justify-self:start;text-align:left}
  .sc-rows li em{grid-row:1;grid-column:2}
}