/* =============================================================================
   cs-sugang 화면 공용 스타일 — 교직원포털 UI 규칙(docs/ui/portal-ui-rules.md) 구현체
   -----------------------------------------------------------------------------
   · 색은 portal-tokens.css 의 var(--wp-*) 로만 쓴다. hex/rgb 하드코딩 금지(규칙 §1).
   · 불러오는 순서: portal-tokens.css → app.css  (토큰이 먼저여야 한다)
   · 이 파일은 cs-sugang 소유다. 토큰 CSS·규칙 문서는 cs-prof 가 원본이므로 여기서 고치지 않는다(§10).
   ============================================================================= */

:root {
  /* 수강신청 고유 상태색 — 새 hex 를 만들지 않고 포털 상태색에서 파생시킨다(§1.1) */
  --sg-seat-open:  var(--wp-success);   /* 여유 */
  --sg-seat-tight: var(--wp-warn);      /* 마감 임박 */
  --sg-seat-full:  var(--wp-danger);    /* 마감 */

  /* 이수구분 계열 색 — 표에서 두 글자로 줄인 것을 눈이 무리로 잡게 한다(2026-08-17).
     ★색은 보조 단서다. 글자(전필)가 언제나 남아 있어 색을 못 봐도 정보가 줄지 않는다(§8). */
  --sg-isu-major:   var(--wp-primary);          /* 전공 — 전기·전필·전선 */
  --sg-isu-liberal: var(--wp-success);          /* 교양 — 교필·교선 */
  --sg-isu-conv:    var(--wp-warn);             /* 융합 — 융필·융선 */
  --sg-isu-etc:     var(--wp-text-secondary);   /* 그 밖 — 교직·부전·복수·국제·일선 */

  /* 치수 — §2·§3 */
  --sg-control-h: 32px;                 /* 버튼·입력 높이(모바일 40px, 아래 미디어쿼리) */
  --sg-radius: 8px;                     /* 컨트롤 */
  --sg-radius-card: 14px;               /* 카드 */

  /* §2 가 값으로 지정한 카드 그림자. 대응하는 색 토큰이 없어 리터럴이 불가피하므로
     화면 코드가 아닌 이 파일 한 곳에만 두고 나머지는 이 변수를 참조한다. */
  --sg-shadow-card: 0 1px 3px rgba(15, 23, 42, .06);
}

@media (max-width: 768px) {
  :root { --sg-control-h: 40px; }       /* 터치 목표 최소 40px(§7) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wp-bg);
  color: var(--wp-text);
  font-family: "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-size: 14px;                      /* 기본 14px — 모바일에서도 줄이지 않는다(§2) */
  line-height: 1.5;
}

h1, h2 { margin: 0; font-weight: 700; }

/* ----------------------------------------------------------------- 레이아웃 */
.wp-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px;
  background: linear-gradient(90deg, var(--wp-navy-from), var(--wp-navy-to));
  color: var(--wp-on-navy);
}
.wp-header h1 { font-size: 18px; }
.wp-header .wp-muted { color: var(--wp-on-navy-dim); }
.wp-spacer { flex: 1; }

.wp-main {
  max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px;
  display: grid; gap: 16px;
}
/* 🔴grid/flex 자식의 기본 min-width 는 auto 라, 안에 든 표의 **최소 너비**가 컨테이너를 밀어낸다.
   그러면 max-width 로 가운데 정렬해 둬도 카드만 오른쪽으로 삐져나가 화면 전체가 쏠려 보인다
   (실측 2026-08-13: 본문 1180 vs 카드 1554 — 374px 초과). 자식은 줄어들 수 있어야 한다. */
.wp-main > * { min-width: 0; }

/* --------------------------------------------------------------------- 카드 */
.wp-card {
  background: var(--wp-card);
  border: 1px solid var(--wp-card-border);
  border-radius: var(--sg-radius-card);
  box-shadow: var(--sg-shadow-card);
}
.wp-card__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--wp-divider);
}
.wp-card__head h2 { font-size: 16px; }
.wp-card__body { padding: 16px; }
.wp-card__foot { padding: 12px 16px; border-top: 1px solid var(--wp-divider); }

.wp-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
}
.wp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wp-stack { display: grid; gap: 16px; }
.wp-pre { white-space: pre-wrap; word-break: break-all; margin: 12px 0 0; }

/* ------------------------------------------------------------------- 버튼 §3 */
.wp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--sg-control-h); padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--sg-radius);
  font: inherit; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer;
}
.wp-btn:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 2px; }
.wp-btn[disabled] { cursor: not-allowed; opacity: .55; }

.wp-btn--primary { background: var(--wp-primary); color: var(--wp-on-navy); }
.wp-btn--primary:hover:not([disabled])  { background: var(--wp-primary-hover); }
.wp-btn--primary:active:not([disabled]) { background: var(--wp-primary-active); }

.wp-btn--default { background: var(--wp-card); border-color: var(--wp-card-border); color: var(--wp-text); }
.wp-btn--default:hover:not([disabled]) { background: var(--wp-surface-hover); }

/* 위험(취소·삭제) — 흰 배경 + 글자·테두리 danger */
.wp-btn--danger { background: var(--wp-card); border-color: var(--wp-danger); color: var(--wp-danger); }
.wp-btn--danger:hover:not([disabled]) {
  background: var(--wp-surface);
  background: color-mix(in srgb, var(--wp-danger) 8%, transparent);
}

/* 네이비 헤더 위에 얹는 보조 버튼 */
.wp-btn--on-navy { background: var(--wp-navy-top); color: var(--wp-on-navy); }
.wp-btn--on-navy:focus-visible { outline-color: var(--wp-on-navy); }

/* ------------------------------------------------------------------- 입력 §3 */
.wp-input, .wp-select {
  height: var(--sg-control-h); padding: 0 10px;
  border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  background: var(--wp-card); color: var(--wp-text); font: inherit;
}
.wp-input::placeholder { color: var(--wp-text-muted); }
.wp-input:focus, .wp-select:focus {
  outline: 2px solid var(--wp-primary); outline-offset: -1px; border-color: var(--wp-primary);
}
.wp-label { display: block; font-size: 12px; color: var(--wp-text-secondary); margin-bottom: 6px; }

/* --------------------------------------------------------------------- 표 §3 */
.wp-table-wrap { overflow: auto; max-height: 46vh; }
.wp-table { width: 100%; border-collapse: collapse; }
.wp-table th, .wp-table td {
  padding: 8px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--wp-grid-line);
}
.wp-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--wp-th-bg); color: var(--wp-text-secondary);
  text-align: center; font-weight: 700;
}
.wp-table td.num, .wp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.wp-table td.mid, .wp-table th.mid { text-align: center; }
.wp-table tbody tr:hover { background: var(--wp-row-hover); }

.wp-empty { padding: 24px 16px; text-align: center; color: var(--wp-text-secondary); }
/* 표 안에서는 `.wp-table td` 가 더 구체적이라 위 정렬·여백이 먹지 않는다 — 같은 구체성으로 되돌린다. */
.wp-table td.wp-empty { padding: 24px 16px; text-align: center; }

/* --------------------------------------------------------------- 뱃지·문구 §3 */
.wp-badge {
  display: inline-block; border-radius: 6px; padding: 2px 8px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* 배경 = 상태색 12% 투명. color-mix 를 못 읽는 브라우저는 앞줄(표면색)로 떨어진다. */
.wp-badge--success { background: var(--wp-surface); background: color-mix(in srgb, var(--wp-success) 12%, transparent); color: var(--wp-success); }
.wp-badge--warn    { background: var(--wp-surface); background: color-mix(in srgb, var(--wp-warn) 12%, transparent);    color: var(--wp-warn); }
.wp-badge--danger  { background: var(--wp-surface); background: color-mix(in srgb, var(--wp-danger) 12%, transparent);  color: var(--wp-danger); }
.wp-badge--info    { background: var(--wp-surface-2); color: var(--wp-primary); }
.wp-badge--count   { background: var(--wp-surface-2); color: var(--wp-text-secondary); }
.wp-badge--muted   { background: var(--wp-surface-2); color: var(--wp-text-muted); }

.wp-tag {
  display: inline-block; background: var(--wp-navy-top); color: var(--wp-on-navy);
  border-radius: 6px; padding: 2px 10px; font-size: 12px;
}
.wp-hint { font-size: 12px; color: var(--wp-text-secondary); line-height: 1.7; }
.wp-note { font-size: 12px; color: var(--wp-text-secondary); }   /* 비활성 사유 등(§3) */
.wp-muted { color: var(--wp-text-muted); }                        /* 보조 설명 전용(§8) */
.wp-strong { color: var(--wp-text-strong); font-weight: 700; }
.wp-num { font-variant-numeric: tabular-nums; }

/* 안내 띠 — 색만으로 구분하지 않도록 문구를 함께 넣는다(§8) */
.wp-notice {
  display: none; margin: 0 16px 12px; padding: 10px 12px;
  border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  background: var(--wp-surface);
}
.wp-notice.is-open {
  display: block; border-color: var(--wp-success); color: var(--wp-success);
  background: color-mix(in srgb, var(--wp-success) 10%, transparent);
}
.wp-notice.is-closed {
  display: block; border-color: var(--wp-danger); color: var(--wp-danger);
  background: color-mix(in srgb, var(--wp-danger) 10%, transparent);
}

.wp-msg { display: none; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--sg-radius); }
.wp-msg.is-error { display: block; color: var(--wp-danger); border-color: var(--wp-danger);
                   background: color-mix(in srgb, var(--wp-danger) 8%, transparent); }
.wp-msg.is-ok    { display: block; color: var(--wp-success); border-color: var(--wp-success);
                   background: color-mix(in srgb, var(--wp-success) 8%, transparent); }
/* 안내 — 기간·자격으로 막힌 것은 **오류가 아니다**(UI 규칙 §6).
   붉게 보여 주면 학생이 자기가 뭘 잘못 눌렀다고 생각해 같은 시도를 반복한다. */
.wp-msg.is-info  { display: block; color: var(--wp-primary); border-color: var(--wp-primary);
                   background: color-mix(in srgb, var(--wp-primary) 8%, transparent); }

/* ------------------------------------------------------------------- 합계 줄 */
.wp-totals { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.wp-totals b { font-size: 16px; color: var(--wp-text-strong); font-variant-numeric: tabular-nums; }
.wp-totals b.is-negative { color: var(--wp-danger); }
.wp-totals b.is-positive { color: var(--wp-success); }

/* --------------------------------------------------------------------- 지표 */
.wp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wp-kpi {
  background: var(--wp-surface); border: 1px solid var(--wp-card-border);
  border-radius: var(--sg-radius); padding: 12px;
}
.wp-kpi__k { font-size: 12px; color: var(--wp-text-secondary); }
.wp-kpi__v { margin-top: 4px; font-size: 20px; font-weight: 700; color: var(--wp-text-strong);
             font-variant-numeric: tabular-nums; }
.wp-kpi--warn { border-color: var(--wp-warn); }
.wp-kpi--warn .wp-kpi__v { color: var(--wp-warn); }
.wp-kpi--bad { border-color: var(--wp-danger); }
.wp-kpi--bad .wp-kpi__v { color: var(--wp-danger); }

/* --------------------------------------------------------------------- 탭 */
.wp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-tabs .wp-btn { background: var(--wp-card); border-color: var(--wp-card-border); color: var(--wp-text-secondary); }
.wp-tabs .wp-btn.is-on { background: var(--wp-primary); border-color: var(--wp-primary); color: var(--wp-on-navy); }

/* ------------------------------------------------------------------- 로그인 */
.wp-authpage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.wp-auth {
  width: 360px; max-width: 100%; overflow: hidden;
  background: var(--wp-card); border: 1px solid var(--wp-card-border);
  border-radius: var(--sg-radius-card); box-shadow: var(--sg-shadow-card);
}
.wp-auth__head {
  padding: 16px 24px; font-size: 16px; font-weight: 700;
  background: linear-gradient(90deg, var(--wp-navy-from), var(--wp-navy-to)); color: var(--wp-on-navy);
}
.wp-auth__body { padding: 24px; display: grid; gap: 16px; }
.wp-auth__foot { padding: 0 24px 24px; }
.wp-auth .wp-input, .wp-auth .wp-btn { width: 100%; }

/* ------------------------------------------------------------------- 토스트 */
.wp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  max-width: 90vw; padding: 12px 16px; border-radius: var(--sg-radius);
  background: var(--wp-navy-top); color: var(--wp-on-navy); box-shadow: var(--sg-shadow-card);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.wp-toast.is-show { opacity: 1; }
.wp-toast.is-error { background: var(--wp-danger); }

.hidden { display: none !important; }

/* 🔴표준 hidden 속성은 UA 스타일(display:none)이라 **작성자 규칙에 진다**.
   .sg-seg{display:inline-flex} 같은 규칙 하나로 숨겨야 할 것이 계속 보인다 —
   실제로 학과 범위 버튼이 '전공' 체크 전에도 보였고, 그걸 누르면 조용히 걸러졌다. */
[hidden] { display: none !important; }

/* =============================================================================
   모바일(768px 이하) — 표를 카드로 바꾼다. 가로 스크롤 금지(§7)
   각 td 의 data-label 이 헤더 자리를 대신하므로 렌더러가 반드시 붙여야 한다.
   ============================================================================= */
@media (max-width: 768px) {
  .wp-header { padding: 12px 16px; }
  .wp-main { padding: 16px 12px 32px; }

  .wp-table-wrap { max-height: none; overflow: visible; }
  .wp-table, .wp-table tbody, .wp-table td { display: block; width: 100%; }
  /* tr 에는 좌우 여백을 주므로 width:100% 를 주면 그만큼 넘쳐 가로 스크롤이 생긴다 — auto 로 둔다. */
  .wp-table tr { display: block; }
  .wp-table thead { display: none; }

  .wp-table tr {
    margin: 12px 16px; padding: 4px 12px;
    background: var(--wp-card); border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  }
  .wp-table tbody tr:hover { background: var(--wp-card); }

  .wp-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; text-align: right; white-space: normal;
    border-bottom: 1px solid var(--wp-divider);
  }
  .wp-table td:last-child { border-bottom: 0; }
  .wp-table td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: 12px; color: var(--wp-text-secondary); text-align: left;
  }
  /* 조작 칸·빈 목록 안내는 라벨 없이 그대로 */
  .wp-table td.act::before { content: none; }
  .wp-table td.act { justify-content: stretch; }
  .wp-table td.act .wp-btn { flex: 1; }
  .wp-table td.wp-empty { display: block; text-align: center; padding: 24px 16px; }
  .wp-table td.wp-empty::before { content: none; }

  .wp-totals { gap: 16px; }
}

/* =============================================================================
   학생 화면 전용 레이어 (sg-*)  — 2026-08-13 개편
   -----------------------------------------------------------------------------
   ★왜 새 레이어인가 — wp-* 컴포넌트는 관리자 화면(admin.html)이 함께 쓴다.
     학생 화면 골격을 바꾸려고 그것을 고치면 관리자 화면이 같이 흔들린다.
     색·버튼·입력 규격(UI 규칙 §1~§3)은 그대로 쓰고, **골격만** 여기서 새로 정의한다.

   고친 것 셋(전부 실측으로 확인한 문제다).
     ① 카드가 컨테이너를 뚫고 나가 화면이 오른쪽으로 쏠리던 것 → 어디서든 min-width:0
     ② 2542px 화면에서 1180px(46%)만 쓰던 것 → 폭을 화면에 맞춰 늘린다
     ③ 목록이 max-height:46vh 상자 안에서만 스크롤되던 것 → 페이지 스크롤 하나로 통일
   ============================================================================= */

/* 화면 폭에 따라 자라는 본문. 좁으면 여백을 줄여 붙고, 넓으면 1680까지 쓴다. */
.sg-shell {
  width: min(1680px, 100%);
  margin-inline: auto;
  padding-inline: clamp(12px, 2.5vw, 40px);
}

/* --------------------------------------------------------------- 상단 앱바 */
.sg-appbar {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(90deg, var(--wp-navy-from), var(--wp-navy-to));
  color: var(--wp-on-navy);
  box-shadow: var(--sg-shadow-card);
}
.sg-appbar__in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.sg-appbar h1 { font-size: 17px; letter-spacing: -.2px; }
/* 여백 채우개 — 뒤에 오는 것을 오른쪽 끝으로 민다.
 * ★예전에는 `.sg-appbar` 안에서만 정의돼 있어, 상단 바 밖에서는 <b>아무 일도 하지 않았다</b>.
 *   조회 도구 줄(과목 수·카드/표)과 패널 머리가 그래서 왼쪽에 몰려 있었다(2026-08-16 발견). */
.sg-sp { flex: 1 1 auto; }
.sg-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sg-who__name { font-weight: 700; }
.sg-who__id { color: var(--wp-on-navy-dim); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 레이아웃 */
.sg-layout {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr);          /* ★minmax(0,·) — ①의 재발 방지 */
  padding: 20px 0 40px;
}
@media (min-width: 1200px) {
  .sg-layout { grid-template-columns: minmax(0, 1fr) 336px; }
  /* 오른쪽 요약은 스크롤을 따라온다 — 학점이 얼마 남았는지 보려고 위로 올라가지 않게. */
  .sg-rail { position: sticky; top: 68px; display: grid; gap: 16px; }
}
.sg-col { display: grid; gap: 16px; min-width: 0; }

/* --------------------------------------------------------------------- 패널 */
.sg-panel {
  background: var(--wp-card); border: 1px solid var(--wp-card-border);
  border-radius: var(--sg-radius-card); box-shadow: var(--sg-shadow-card);
  min-width: 0;
  /* ★열 숨김의 기준을 **이 패널의 폭**으로 삼는다(컨테이너 질의).
     뷰포트로 재면 틀린다 — 오른쪽 요약(336px)과 여백을 빼고 나면 표가 쓰는 폭은 훨씬 좁다.
     실측 2026-08-14: 뷰포트 1440에서 패널은 1084인데 표는 1215라 **신청 버튼이 잘려 나갔다**. */
  container-type: inline-size;
  container-name: sgpanel;
  /* ★hidden 이 아니라 clip 이다 — overflow:hidden 은 이 패널을 **스크롤 컨테이너**로 만들고,
     그러면 안에 든 sticky 검색바가 뷰포트가 아니라 패널을 기준으로 붙는다. 그 결과 검색바가
     자기 높이만큼 아래로 밀려 첫 과목 카드를 덮었다(실측 2026-08-13: 검색바 188~245, 첫 카드 205).
     clip 은 모서리만 잘라내고 스크롤 컨테이너를 만들지 않는다. */
  overflow: clip;
}
.sg-panel__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--wp-divider);
}
.sg-panel__head h2 { font-size: 15px; }
.sg-panel__body { padding: 16px; }

/* ---------------------------------------------------------------- 검색 도구 */
.sg-tools {
  position: sticky; top: 52px; z-index: 20;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--wp-card); border-bottom: 1px solid var(--wp-divider);
}
.sg-search { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.sg-search .wp-input { width: 100%; }

/* 보기 전환(카드/표) — 선택은 기억한다 */
.sg-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--wp-surface-2); border-radius: var(--sg-radius); }
.sg-seg button {
  height: calc(var(--sg-control-h) - 6px); padding: 0 12px;
  border: 0; border-radius: 6px; background: transparent; color: var(--wp-text-secondary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sg-seg button.is-on { background: var(--wp-card); color: var(--wp-text-strong); box-shadow: var(--sg-shadow-card); }
.sg-seg button:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 1px; }

/* 토글 칩(여석만 보기 등) */
.sg-chip {
  height: var(--sg-control-h); padding: 0 14px;
  border: 1px solid var(--wp-card-border); border-radius: 999px;
  background: var(--wp-card); color: var(--wp-text-secondary);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sg-chip.is-on { border-color: var(--wp-primary); color: var(--wp-primary);
                 background: color-mix(in srgb, var(--wp-primary) 8%, transparent); }
.sg-chip:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 2px; }

/* --------------------------------------------------------- 개설과목: 카드형 */
/* 넓은 화면에서는 저절로 2단이 된다 — 남는 폭을 여백이 아니라 정보에 쓴다. */
.sg-list { display: grid; gap: 12px; padding: 16px; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
@media (max-width: 560px) { .sg-list { grid-template-columns: 1fr; padding: 12px; } }
/* ★한글은 단어 중간에서 끊지 않는다 — 끊으면 "부 동산경영학과" 처럼 읽기가 무너진다. */
.sg-course, .sg-mine__it { word-break: keep-all; overflow-wrap: break-word; }

.sg-course {
  display: grid; gap: 6px 16px; grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px;
  border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius-card);
  background: var(--wp-card);
}
.sg-course:hover { border-color: var(--wp-primary); }
.sg-course.is-mine { border-color: var(--wp-success);
                     background: color-mix(in srgb, var(--wp-success) 4%, transparent); }
.sg-course.is-full { background: var(--wp-surface); }

.sg-course__title { grid-column: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sg-course__name { font-size: 16px; font-weight: 700; color: var(--wp-text-strong); }
.sg-course__act  { grid-column: 2; grid-row: 1 / span 4; display: grid; gap: 6px; align-content: start; width: 116px; }

/* 보조 정보 — 점으로 잇되 줄바꿈되면 점이 줄 앞에 오지 않게 각 항목 앞에 붙인다 */
.sg-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 10px;
           font-size: 13px; color: var(--wp-text-secondary); min-width: 0; }
.sg-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.sg-meta > span + span::before { content: "\00B7"; color: var(--wp-text-muted); margin-right: 6px; }
.sg-meta b { color: var(--wp-text); font-weight: 600; }

/* 좌석 — 색만으로 알리지 않는다(§8). 게이지 + 숫자 + 글자를 함께 준다. */
.sg-seat { grid-column: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-gauge { flex: 0 1 150px; height: 6px; border-radius: 999px; background: var(--wp-surface-2); overflow: hidden; }
.sg-gauge > i { display: block; height: 100%; background: var(--sg-seat-open); }
.sg-gauge.is-tight > i { background: var(--sg-seat-tight); }
.sg-gauge.is-full  > i { background: var(--sg-seat-full); }
.sg-seat__t { font-size: 12px; color: var(--wp-text-secondary); font-variant-numeric: tabular-nums; }
.sg-seat__t b { color: var(--wp-text-strong); }

.sg-course .wp-select { width: 100%; }
.sg-course__act .wp-btn { width: 100%; }

/* ------------------------------------------------------------ 개설과목: 표형 */
/* ★overflow 를 주지 않는다 — overflow 가 있으면 그 상자가 스크롤 컨테이너가 되고,
   안의 sticky 머리글이 **페이지가 아니라 그 상자** 기준으로 붙는다. 그러면 머리글이
   자기 top 값만큼 아래로 밀려 첫 행들을 덮는다(실측 2026-08-13: 첫 행 156, 머리글 196).
   가로 넘침은 스크롤이 아니라 **열을 접어서** 없앤다(아래 미디어쿼리). */
.sg-tablewrap { min-width: 0; }
/* ★table-layout: fixed — 마지막 방어선. 지정 폭 합이 표보다 크면 브라우저가 비율로 줄여
   **어떤 경우에도 패널 밖으로 나가지 않는다**(패널은 overflow: clip 이라 나가면 그대로 사라진다). */
.sg-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.sg-table th.c-sec  { width: 56px; }
.sg-table th.c-form { width: 84px; }
.sg-table th.c-dept { width: 150px; }
/* 과정은 「융합과정[E-Mobility]」처럼 16자까지 간다(운영 실측). 다 담을 수는 없으므로
   넉넉히 주고 넘치면 말줄임 + title 로 원본을 남긴다. */
.sg-table th.c-course { width: 156px; }
.sg-table th.c-grade { width: 56px; }
/* 이수구분은 화면에서 두 글자로 줄여 쓴다(전공필수 → 전필). 원본은 title 에 있다. */
.sg-table th.c-isu  { width: 64px; }
.sg-table th.c-prof { width: 84px; }
.sg-table th.c-time { width: 124px; }
.sg-table th.c-cred { width: 56px; }
.sg-table th.c-cap  { width: 58px; }
.sg-table th.c-enrolled { width: 58px; }
.sg-table th.c-seat { width: 78px; }
.sg-table th.c-act  { width: 92px; }
/* 값이 길면 잘라 준다 — 줄바꿈으로 행 높이가 들쭉날쭉해지는 것보다 낫다(과목명만 예외). */
/* 표 보기 상단 줄임말 범례 — 줄였으면 뜻을 곁에 둔다(UI 규칙 §6). */
/* 🔴12개 항목을 **한 줄에** 둔다(2026-08-17 요청).
   ① flex-wrap 이면 폭에 따라 마지막 한 항목만 떨어져 깨져 보이고
   ② 격자로 깔면 반듯하지만 두 줄이 된다.
   그래서 줄바꿈을 금지하고(`nowrap`), 폭이 모자라면 **그 줄만 가로로 스크롤**하게 한다.
   표 위의 한 줄이라 세로 공간을 먹지 않는 편이 목록을 보는 데 유리하다. */
.sg-legend {
  margin: 0; padding: 10px 16px;
  font-size: 12px; color: var(--wp-text-secondary);
  background: var(--wp-surface); border-bottom: 1px solid var(--wp-grid-line);
}
.sg-legend__row {
  display: flex; flex-wrap: nowrap; gap: 10px; align-items: baseline;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;              /* 얇게 — 스크롤바가 줄 높이를 밀지 않게 */
  padding-bottom: 2px;
}
.sg-legend__row > * { flex: 0 0 auto; white-space: nowrap; }
.sg-legend em { display: block; margin-top: 6px; }
.sg-legend b { color: var(--wp-text); font-weight: 700; }
/* 🔴줄임말은 <i> 로 감싼 것만 굵힌다.
   종전 `::first-letter` 는 **첫 글자 하나**만 굵혀 「전필」이 「전」만 진하게 나왔다(2026-08-17). */
/* 🔴선택자는 `.sg-legend__row` 기준이다.
   항목을 한 줄 컨테이너 안으로 옮기면서 종전의 `.sg-legend > span` 이 한 단계 어긋나
   **색과 굵기가 통째로 빠졌다**(2026-08-17). 직계 자식(`>`) 사슬은 구조를 바꾸면 조용히 끊긴다. */
.sg-legend__row > span > i {
  font-style: normal; font-weight: 700;
  padding: 1px 4px; border-radius: 5px; margin-right: 3px;
  color: var(--sg-isu-etc); background: var(--wp-card);
  border: 1px solid var(--wp-border-soft);
}
.sg-legend__row > span.is-major   > i { color: var(--sg-isu-major);   border-color: var(--sg-isu-major); }
.sg-legend__row > span.is-liberal > i { color: var(--sg-isu-liberal); border-color: var(--sg-isu-liberal); }
.sg-legend__row > span.is-conv    > i { color: var(--sg-isu-conv);    border-color: var(--sg-isu-conv); }
.sg-legend em { font-style: normal; color: var(--wp-text-muted); }
.sg-legend em b { font-weight: 700; }

.sg-table td { overflow: hidden; text-overflow: ellipsis; }
/* td 안을 span 으로 감싸면(title 을 달기 위해) 말줄임이 span 에도 걸려야 한다. */
.sg-table td > span[title] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-table th, .sg-table td { padding: 11px 12px; border-bottom: 1px solid var(--wp-grid-line); text-align: left; }
.sg-table th {
  position: sticky; top: 109px; z-index: 10;
  padding: 10px 12px; font-size: 12px; letter-spacing: .02em;
  background: var(--wp-th-bg); color: var(--wp-text-secondary); text-align: center; font-weight: 700;
  border-bottom: 2px solid var(--wp-card-border);
}
/* 줄무늬 — 열이 많은 표에서 눈이 행을 따라가려면 배경이 번갈아야 한다.
   ※ 내가 신청한 행(is-mine)은 아래에서 다시 칠하므로 줄무늬에 묻히지 않는다. */
.sg-table tbody tr:nth-child(even) { background: var(--wp-surface); }
.sg-table td:first-child { padding-left: 16px; }
.sg-table td:last-child  { padding-right: 16px; }
.sg-table td.num, .sg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sg-table td.mid, .sg-table th.mid { text-align: center; }
.sg-table tbody tr:hover, .sg-table tbody tr:nth-child(even):hover { background: var(--wp-row-hover); }
.sg-table tbody tr.is-mine, .sg-table tbody tr.is-mine:nth-child(even) {
  background: color-mix(in srgb, var(--wp-success) 10%, transparent);
}
/* 과목명이 이 표의 주인공이다 — 나머지보다 한 단계 크고 진하게, 줄바꿈도 여기서만 허용 */
.sg-table .sg-nm { font-size: 15px; font-weight: 700; color: var(--wp-text-strong); }
.sg-table td:nth-child(1) { min-width: 220px; word-break: keep-all; }
.sg-table td, .sg-table th { white-space: nowrap; }
.sg-table td:nth-child(1) { white-space: normal; }
.sg-table td.act { text-align: right; white-space: nowrap; overflow: visible; }
.sg-table td.act .wp-btn { padding: 0 10px; }
.sg-table .wp-select { max-width: 96px; }

/* 좁아지면 덜 중요한 열부터 접는다 — 가로 스크롤 대신 열을 줄인다.
   기준은 **패널 폭**이다(위 container-name: sgpanel). 신청 버튼(c-act)은 절대 숨기지 않는다. */
@container sgpanel (max-width: 1240px) { .sg-table .c-dept { display: none; } }
@container sgpanel (max-width: 1120px) { .sg-table .c-course { display: none; } }
@container sgpanel (max-width: 1000px) { .sg-table .c-form { display: none; } }
@container sgpanel (max-width: 900px)  { .sg-table .c-grade { display: none; } }
@container sgpanel (max-width: 820px)  { .sg-table .c-isu { display: none; } }
@container sgpanel (max-width: 740px)  { .sg-table .c-cap, .sg-table .c-enrolled { display: none; } }
@container sgpanel (max-width: 660px)  { .sg-table .c-time { display: none; } }

/* 768 이하는 표를 쓰지 않는다 — 카드형으로 강제한다(§7 가로 스크롤 금지) */
@media (max-width: 768px) {
  /* 🔴숨기는 것은 **보기 전환(카드/표)** 하나다.
     종전에는 `.sg-seg` 를 통째로 숨겼는데, 그 클래스를 **구분(전공·교양…)과 학과 범위**도
     함께 쓰고 있었다. 그래서 모바일에서 **과목을 걸러낼 방법이 아예 사라졌다**(2026-08-17 지적).
     공용 클래스에 화면별 규칙을 걸면 이렇게 엉뚱한 것이 함께 사라진다 — 대상 전용 클래스로 좁힌다. */
  .sg-seg--view { display: none; }
  .sg-tablewrap { display: none !important; }
  .sg-list { display: grid !important; }

  /* 필터는 손가락으로 눌린다 — 터치 목표를 규칙(§3 모바일 40px)에 맞춘다. */
  .sg-seg button { height: 36px; padding: 0 14px; font-size: 14px; }
  .sg-frow { gap: 6px; }
}

/* --------------------------------------------------------------- 오른쪽 요약 */
.sg-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-sum__v { font-size: 22px; font-weight: 700; color: var(--wp-text-strong); font-variant-numeric: tabular-nums; }
.sg-sum__v small { font-size: 13px; font-weight: 600; color: var(--wp-text-secondary); }
.sg-bar { height: 8px; border-radius: 999px; background: var(--wp-surface-2); overflow: hidden; margin: 10px 0 6px; }
.sg-bar > i { display: block; height: 100%; background: var(--wp-primary); }
.sg-bar.is-max > i { background: var(--sg-seat-full); }

.sg-mine { display: grid; gap: 8px; }
.sg-mine__it {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  background: var(--wp-surface);
}
.sg-mine__nm { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--wp-text-strong); }
.sg-mine__meta { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--wp-text-secondary); }
/* ★버튼이 두 줄을 가로지르는 칸에 들어가면 grid 가 기본으로 **늘려 채운다**.
   그래서 과목명이 길어 두 줄이 되는 행만 취소 버튼이 커 보였다. 크기를 고정한다. */
/* ★열을 지정하지 않으면 자동 배치가 이 버튼을 **1열**에 놓아 과목명이 오른쪽으로 밀린다.
   또 두 줄을 가로지르는 칸은 grid 가 기본으로 늘려 채워서, 과목명이 긴 행만 버튼이 커 보였다. */
.sg-mine__it .wp-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 64px; }

.sg-empty { padding: 28px 16px; text-align: center; color: var(--wp-text-secondary); }

/* ------------------------------------------------- 모바일 하단 요약(고정) §7 */
.sg-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 4vw, 20px);
  background: var(--wp-card); border-top: 1px solid var(--wp-card-border);
}
.sg-dock__t { flex: 1; font-size: 13px; color: var(--wp-text-secondary); }
.sg-dock__t b { color: var(--wp-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) {
  .sg-dock { display: flex; }
  .sg-layout { padding-bottom: 76px; }          /* 하단 바에 마지막 카드가 가리지 않게 */
}

/* 기간 안내 띠 — 학생이 가장 먼저 봐야 하는 문장이라 본문 맨 위에 둔다 */
.sg-period { margin: 0; border-radius: var(--sg-radius-card); }

/* 더 보기 — 559건을 한 번에 그리면 화면이 멎는다(실측). 끊어 그리고 이어 붙인다. */
.sg-more { display: flex; justify-content: center; padding: 4px 16px 20px; }
.sg-more .wp-btn { min-width: 200px; }

/* ------------------------------------------------------------- 조회 조건 */
.sg-filters { display: grid; gap: 8px; width: 100%; }
.sg-frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-q { flex: 1 1 180px; min-width: 140px; max-width: 260px; }

/* 체크박스 — 터치 목표를 확보하려고 라벨 전체를 누를 수 있게 만든다(§7) */
.sg-check {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--sg-control-h); padding: 0 12px;
  border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  background: var(--wp-card); color: var(--wp-text); font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
}
.sg-check:has(input:checked) {
  border-color: var(--wp-primary); color: var(--wp-primary);
  background: color-mix(in srgb, var(--wp-primary) 8%, transparent);
}
.sg-check input { accent-color: var(--wp-primary); width: 15px; height: 15px; margin: 0; }
.sg-check:focus-within { outline: 2px solid var(--wp-primary); outline-offset: 2px; }

.sg-vline { width: 1px; height: 20px; background: var(--wp-divider); }
.sg-scope button { white-space: nowrap; }

/* 관리자 이수구분 시뮬레이터 — 「일반선택」 판정 행을 눈에 띄게.
   색은 토큰만 쓴다(§7). 배경을 칠하지 않고 왼쪽 띠 + 글자색으로만 표시해
   표의 밀도와 가독성을 해치지 않는다. */
.wp-table tr.is-warn td { color: var(--wp-warn); }
.wp-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--wp-warn); }

/* 이수구분 시뮬레이터 — 개설코드 칸. 25자리라 줄바꿈되면 표가 흐트러진다. */
.sg-nowrap { white-space: nowrap; }
.sg-nowrap code { font-size: 12px; color: var(--wp-text-muted, var(--wp-text)); }
.wp-table .sg-copy { padding: 2px 8px; font-size: 12px; line-height: 1.4; }


/* ==================================================================== 로그인 화면
   로그인 카드 + 안내를 나란히 둔다. 안내를 붙이는 이유는 문의를 줄이기 위해서다 —
   자기 차례가 언제인지, 왜 막혔는지를 로그인 전에 알 수 있어야 한다.
   900px 이하에서는 세로로 쌓는다(UI 규칙 §7). */
.sg-loginpage {
  align-items: flex-start;
  /* 아주 옅은 상단 광채. 색은 전부 토큰에서 파생시킨다(§1.1) — hex 를 새로 만들지 않는다. */
  background:
    radial-gradient(1100px 420px at 50% -180px,
      color-mix(in srgb, var(--wp-primary) 10%, transparent), transparent 70%),
    var(--wp-bg);
}
.sg-login {
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start;
}
.sg-guide { display: grid; gap: 16px; min-width: 0; }

/* 로그인 카드 — 안내 카드보다 한 단계 더 떠 보이게 한다. 여기가 이 화면의 목적이다. */
.sg-login > .wp-auth {
  position: sticky; top: 24px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--wp-navy-to) 14%, transparent);
}
.sg-login > .wp-auth .wp-auth__head { letter-spacing: -.01em; font-size: 18px; }

/* ── 일정 표 ── */
.sg-sched td, .sg-sched th { font-variant-numeric: tabular-nums; }
/* 진행 중인 줄을 찾기 쉽게. 색만으로 알리지 않는다(§8) — 상태 뱃지의 글자가 본체다. */
.sg-sched tbody tr.is-now { background: color-mix(in srgb, var(--wp-success) 7%, transparent); }
.sg-sched tbody tr.is-now td:first-child { box-shadow: inset 3px 0 0 var(--wp-success); font-weight: 600; }

/* ── 신청 3단계 ── */
.sg-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: sgstep; }
.sg-steps li {
  counter-increment: sgstep; position: relative; padding-left: 36px; line-height: 1.7;
}
.sg-steps li::before {
  content: counter(sgstep);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--wp-primary) 12%, transparent); color: var(--wp-primary);
}
.sg-steps .wp-hint { display: block; margin-top: 2px; }

/* ── 접이식 안내 ──────────────────────────────────────────────────────────
   <details> 를 그대로 쓴다. 키보드·스크린리더가 기본 지원한다.
   🔴누를 수 있다는 것이 **보여야** 한다 — 표시(∨)와 글자(「자세히 보기」)를 함께 준다.
   화살표만 두면 못 알아채고, 글자만 두면 링크처럼 보인다. */
.sg-faq { display: grid; gap: 8px; }
.sg-faq__lead { margin: 0 0 4px; font-size: 12px; color: var(--wp-text-secondary); }

.sg-faq details {
  border: 1px solid var(--wp-card-border); border-radius: var(--sg-radius);
  background: var(--wp-surface); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sg-faq details:hover { border-color: color-mix(in srgb, var(--wp-primary) 45%, var(--wp-card-border)); }
.sg-faq details[open] {
  border-color: color-mix(in srgb, var(--wp-primary) 45%, var(--wp-card-border));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--wp-navy-to) 8%, transparent);
}

.sg-faq summary {
  cursor: pointer; padding: 12px; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 10px;
  transition: background .15s ease;
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary:hover { background: color-mix(in srgb, var(--wp-primary) 6%, transparent); }
.sg-faq summary:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: -2px; }

/* 왼쪽 표시 — 열리면 회전한다. 문자를 바꾸지 않고 돌려야 움직임이 자연스럽다. */
.sg-faq summary::before {
  content: '›';
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: color-mix(in srgb, var(--wp-primary) 10%, transparent); color: var(--wp-primary);
  transition: transform .18s ease;
}
.sg-faq details[open] > summary::before { transform: rotate(90deg); }

.sg-faq__t { flex: 1; min-width: 0; }

/* 오른쪽 단서 — 무엇을 하면 되는지 글자로 말한다(UI 규칙 §6). */
.sg-faq summary::after {
  content: '자세히 보기';
  flex: none; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--wp-primary);
}
.sg-faq details[open] > summary::after { content: '접기'; color: var(--wp-text-secondary); }

.sg-faq details[open] > summary { border-bottom: 1px solid var(--wp-card-border); }
.sg-faq details > *:not(summary) { padding: 12px; }
.sg-faq details > .wp-table-wrap { padding: 0; }
.sg-faq ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.7; }

/* 열릴 때 살짝 떠오르게. 높이는 네이티브라 애니메이션하지 않는다 — 내용만 부드럽게 받는다. */
.sg-faq details[open] > *:not(summary) { animation: sg-reveal .18s ease both; }
@keyframes sg-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sg-faq details[open] > *:not(summary) { animation: none; }
  .sg-faq summary::before { transition: none; }
}

@media (max-width: 900px) {
  .sg-login { grid-template-columns: minmax(0, 1fr); }
  /* 좁은 화면에서는 카드가 가운데 정렬돼 있으면 폭이 들쭉날쭉해 보인다. */
  .sg-login > .wp-auth { width: 100%; position: static; }
}
@media (max-width: 768px) {
  /* 터치 목표 40px 확보(UI 규칙 §7). */
  .sg-faq summary { padding: 14px 12px; }
  .sg-faq summary::after { content: '보기'; }
  .sg-faq details[open] > summary::after { content: '접기'; }
}


/* ══ 내 수강 현황 (모달) ══════════════════════════════════════════════════
 *
 * UI 규칙 §3 모달 — 라운드 14px · 제목 16px(700) · 버튼 오른쪽 아래(주 버튼이 맨 오른쪽)
 * · 좁은 화면은 하단 시트(§7).
 *
 * ★색은 전부 var(--wp-*) 다. 시간표를 과목별 색으로 칠하지 않는 이유는 §8 이다 —
 *   색만으로 구분하면 색을 못 가리는 학생에게는 아무 구분이 아니다. 대신 <b>붙은 교시를
 *   한 덩어리로 합쳐</b> 형태로 읽히게 했다.
 */
.sg-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.sg-modal[hidden] { display: none; }
.sg-modal__back { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.sg-modal__box {
  position: relative; width: min(980px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--wp-card); border: 1px solid var(--wp-card-border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
  animation: sg-pop .16s ease both;
}
@keyframes sg-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sg-modal__box { animation: none; } }

.sg-modal__head, .sg-modal__foot {
  display: flex; align-items: center; gap: 12px; padding: 16px;
}
.sg-modal__head { border-bottom: 1px solid var(--wp-divider); }
.sg-modal__foot { border-top: 1px solid var(--wp-divider); }
.sg-modal__head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--wp-text-strong); }
.sg-modal__body { padding: 16px; overflow: auto; display: grid; gap: 24px; }

/* 본문이 길어 스크롤될 때, 머리와 바닥이 붙어 있어야 닫기 버튼을 찾아 헤매지 않는다. */
.sg-dash__sec > h3 {
  margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--wp-text-strong);
}
.sg-dash__row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; }
.sg-dash__row > .wp-note { flex: 0 0 64px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chipv {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  background: var(--wp-surface-2); color: var(--wp-text);
}
.sg-chipv > b { color: var(--wp-text-strong); }

/* 대시보드 「이수구분별 학점」 칩 — 표의 배지와 같은 색이라 눈이 이어진다. */
.sg-chipv--major   { background: var(--wp-row-sel); }
.sg-chipv--major   > b { color: var(--sg-isu-major); }
.sg-chipv--liberal > b { color: var(--sg-isu-liberal); }
.sg-chipv--conv    > b { color: var(--sg-isu-conv); }

/* ── 이수구분 배지(표 보기)
   칸이 좁아 두 글자로 줄이므로, 계열을 색으로 묶어 「전공인지 교양인지」가 먼저 읽히게 한다.
   ★글자가 언제나 남아 있고 title 에 전체 이름이 있다 — 색은 거들 뿐이다. */
.sg-isu {
  display: inline-block; min-width: 34px; padding: 2px 6px;
  border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.5;
  text-align: center; white-space: nowrap;
  color: var(--sg-isu-etc); background: var(--wp-surface-2);
}
.sg-isu.is-major   { color: var(--sg-isu-major);   background: var(--wp-row-sel); }
.sg-isu.is-liberal { color: var(--sg-isu-liberal); background: var(--wp-surface); }
.sg-isu.is-conv    { color: var(--sg-isu-conv);    background: var(--wp-surface); }
/* 교양·융합은 배경을 옅게 두고 글자색으로 가른다 — 표 한 화면에 색 블록이 너무 많으면
   오히려 아무것도 눈에 띄지 않는다. 전공만 배경까지 준다(학생이 가장 많이 찾는 축). */

/* 비대면 신청 과목 — 요일·교시 없이 «무엇을 들었나»만 보여 준다.
   격자에 올리면 대면 과목과 겹친 것처럼 읽힌다(2026-08-19 지적). */
.sg-dash__online { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sg-dash__online > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                        padding: 10px 12px; border: 1px solid var(--wp-divider);
                        border-radius: 6px; background: var(--wp-surface); }

.sg-dash__more { margin-top: 12px; border-top: 1px solid var(--wp-divider); padding-top: 12px; }
.sg-dash__more > summary { cursor: pointer; font-size: 13px; color: var(--wp-primary); }
.sg-dash__more ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }

/* ── 주간 시간표 */
.sg-ttwrap { overflow-x: auto; }
.sg-tt { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.sg-tt th, .sg-tt td {
  border: 1px solid var(--wp-grid-line); padding: 4px; height: 40px; vertical-align: top;
}
.sg-tt thead th, .sg-tt tbody th {
  background: var(--wp-th-bg); color: var(--wp-text-secondary);
  text-align: center; font-weight: 600; vertical-align: middle;
}
.sg-tt__c, .sg-tt tbody th { width: 44px; }
/* 「내 것」을 뜻하는 선택 표면. 왼쪽 굵은 선으로 색 없이도 덩어리가 보이게 한다. */
.sg-tt__on {
  background: var(--wp-row-sel); border-left: 3px solid var(--wp-primary);
  vertical-align: middle;
}
.sg-tt__on b { display: block; color: var(--wp-text-strong); line-height: 1.4; }
.sg-tt__on span { display: block; color: var(--wp-text-secondary); font-size: 11px; }
.sg-tt__on.is-clash { background: var(--wp-card); border-left-color: var(--wp-danger); }
.sg-tt__clash {
  display: inline-block !important; margin-top: 4px; padding: 1px 6px; border-radius: 6px;
  background: rgba(239, 68, 68, .12); color: var(--wp-danger) !important; font-weight: 700;
}

/* 좁은 화면용 요일 목록 — 넓은 화면에서는 표가 있으므로 감춘다. */
.sg-ttlist { display: none; }
.sg-ttday { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--wp-divider); }
.sg-ttday:last-child { border-bottom: 0; }
.sg-ttday__d {
  flex: 0 0 32px; height: 24px; display: grid; place-items: center; border-radius: 6px;
  background: var(--wp-surface-2); color: var(--wp-text-secondary); font-size: 12px;
}
.sg-ttday ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1 1 auto; }
.sg-ttday li {
  border-left: 3px solid var(--wp-primary); background: var(--wp-row-sel);
  border-radius: 0 6px 6px 0; padding: 6px 10px;
}
.sg-ttday li b { display: block; color: var(--wp-text-strong); font-size: 13px; }
.sg-ttday li span { display: block; color: var(--wp-text-secondary); font-size: 12px; }

@media (max-width: 768px) {
  /* 좁은 화면에서 모달은 하단 시트가 된다(§7). */
  .sg-modal { padding: 0; place-items: end stretch; }
  .sg-modal__box {
    width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; border-bottom: 0;
  }
  .sg-modal__head, .sg-modal__foot, .sg-modal__body { padding: 12px; }
  .sg-dash__row { flex-direction: column; gap: 8px; }
  /* 🔴표를 가로로 스크롤시키지 않는다(§7) — 같은 데이터를 요일별 목록으로 바꿔 낸다.
     주간 표는 폰에서 한 화면에 하루도 들어오지 않아, 스크롤을 붙여도 읽히지 않는다. */
  .sg-ttwrap { display: none; }
  .sg-ttlist { display: block; }
}

/* 모달이 열린 동안 뒤 목록이 같이 스크롤되면 어디를 보는지 놓친다. */
body.is-locked { overflow: hidden; }


/* ── 「내 수강 현황」 진입점 — 학점 게이지 바로 아래.
 *
 * ★버튼 하나로는 <b>무엇이 열리는지</b>가 전달되지 않는다. 학생은 처음 보는 이름을
 *   눌러 보지 않는다. 그래서 제목 아래에 한 줄로 내용을 적고, 카드 전체를 과녁으로 만든다.
 *   자리도 이유가 있다 — 학점 게이지는 학생이 신청 뒤 반드시 확인하는 곳이라,
 *   시선이 이미 와 있다.
 */
/* ★색을 <b>열리는 것과 똑같이</b> 입힌다 — 시간표 블록이 쓰는 것과 같은
 *   「선택 표면 + 왼쪽 굵은 파란 선」이다. 눌러 보기 전에 무엇이 나올지 짐작이 되고,
 *   열고 나면 "아, 그 색"으로 이어진다. 장식이 아니라 예고다.
 *   주변(흰 패널·회색 보조문)과도 확실히 갈라져 눈에 먼저 들어온다. */
.sg-peek {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px;
  padding: 12px; text-align: left; cursor: pointer;
  background: var(--wp-row-sel); border-radius: 10px;
  border: 1px solid var(--wp-card-border); border-left: 3px solid var(--wp-primary);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sg-peek:hover { background: var(--wp-row-sel-hover); border-color: var(--wp-primary); }
.sg-peek:active { transform: translateY(1px); }
.sg-peek:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 2px; }
.sg-peek__main { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* 제목은 원색 파랑 — 「누를 수 있는 것」임을 색으로도 말한다. */
.sg-peek__t {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--wp-primary);
}
/* 🔴부제는 --wp-text-secondary 가 아니라 --wp-text 다. 파란 배경 위에서 보조색은
 *   대비가 3.6:1 로 떨어져 §8(본문 4.5:1)을 못 지킨다. 배경을 바꿨으면 글자도 따라 올린다. */
.sg-peek__s { font-size: 12px; color: var(--wp-text); line-height: 1.5; }
.sg-peek__go { flex: 0 0 auto; font-size: 20px; color: var(--wp-primary); line-height: 1; }

@media (prefers-reduced-motion: reduce) { .sg-peek { transition: none; } }
@media (max-width: 768px) { .sg-peek { padding: 14px 12px; } }   /* 터치 목표 40px(§7) */