/* 지원 전략 카드 — 클래스 머리 .sg- (.st- 는 styles.css 의 일정 상태 색이 이미 쓴다. 토큰·부품을 재사용하고 등장 애니메이션은 없다) */
.sg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sg-head .section-title { margin: 0; }
.sg-body { margin-top: 10px; border-top: 1px solid var(--gray-2); padding-top: 4px; }
.sg-h3 { margin: 14px 0 6px; font-size: 0.95rem; font-weight: 700; color: var(--pink-8); }
.sg-opt { margin-top: 10px; }
.sg-opt .chip-group { margin-top: 4px; }
.sg-opt .chip { min-height: 36px; }
.sg-note { font-size: 0.78rem; font-weight: 500; color: var(--gray-7); }
.routine .sg-note { display: block; margin-top: 2px; }
.sg-picks, .sg-list, .sg-crit { margin: 6px 0; padding-left: 0; list-style: none; }
.sg-list { padding-left: 20px; list-style: revert; font-size: 0.9rem; }
.sg-list li { padding: 3px 0; }
.sg-pick { padding: 8px 0; border-bottom: 1px solid var(--gray-1); font-size: 0.93rem; }
.sg-crit li { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--gray-1); font-size: 0.93rem; }
.sg-crit-name { flex: 1; min-width: 0; }
.sg-move { min-width: 44px; min-height: 44px; padding: 0; }
.sg-move:disabled { opacity: 0.35; cursor: default; }
/* 표는 진짜 table 을 가로 스크롤 상자에. 첫 열(학교)은 밀어도 남는다 */
.sg-scroll { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sg-scroll:focus-visible { outline: 2px solid var(--pink-8); outline-offset: 2px; }
.sg-pick, .sg-crit-name, .sg-list li { overflow-wrap: anywhere; }
.sg-table .num { font-variant-numeric: tabular-nums; }
.sg-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.sg-table caption { text-align: left; font-size: 0.8125rem; color: var(--gray-7); padding-bottom: 4px; }
.sg-table th, .sg-table td { padding: 8px 10px; border-bottom: 1px solid var(--gray-2); text-align: left; vertical-align: top; min-width: 84px; }
.sg-table thead th { font-size: 0.78rem; color: var(--gray-7); white-space: nowrap; }
.sg-table tbody th { position: sticky; left: 0; background: var(--white); font-weight: 700; min-width: 108px; }
.sg-mini { width: auto; min-width: 76px; height: 36px; padding: 0 6px; }
.sg-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 0.8125rem; cursor: pointer; }
.sg-check input { width: 20px; height: 20px; flex: none; accent-color: var(--pink-8); }
@media (prefers-contrast: more) { .sg-note { color: var(--gray-8); } }