/* ==========================================================================
   상정고 통합 포털 — 공통 디자인 (모든 포털 화면이 이 값을 함께 씀)
   - 색·글꼴·모서리·그림자를 한곳에서 정함. 화면별 보정은 skin-*.css
   - 원본 화면(portal/pages/*.html)은 고치지 않고, 서버가 보낼 때 이 파일을 원본 스타일 뒤에 붙임
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap");

:root {
  --sj-navy: #10233d;
  --sj-navy-2: #1a3556;
  --sj-teal: #11b89f;
  --sj-teal-d: #0b8f7b;
  --sj-teal-soft: #e8fbf7;
  --sj-ink: #16243a;
  --sj-ink-2: #44556b;
  --sj-muted: #718096;
  --sj-line: #e2e8ee;
  --sj-bg: #f2f7f8;
  --sj-card: #ffffff;
  --sj-red: #d64545;
  --sj-red-soft: #fff0f0;
  --sj-amber: #b7791f;
  --sj-amber-soft: #fff6e5;
  --sj-blue: #2f5fa8;
  --sj-blue-soft: #e8eefa;
  --sj-radius: 16px;
  --sj-radius-sm: 10px;
  --sj-shadow: 0 4px 14px rgba(16, 35, 61, .05);
  --sj-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --sj-max: 1200px;
  --sj-h: 64px;            /* 공통 상단 메뉴 높이 (하위 메뉴가 그 아래에 붙음) */
}
@media (max-width: 760px) { :root { --sj-h: 108px; } }

html { scroll-padding-top: calc(var(--sj-h) + 60px); }
body { font-family: var(--sj-font) !important; background: var(--sj-bg) !important; color: var(--sj-ink); -webkit-font-smoothing: antialiased; }

/* ---------- 하위 메뉴(교과관리·커뮤니티·계정 화면 안의 탭) 공통 모양 ---------- */
.sj-subnav {
  position: sticky; top: var(--sj-h); z-index: 40;
  background: #fff; border-bottom: 1px solid var(--sj-line);
}
.sj-subnav .in {
  max-width: var(--sj-max); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.sj-subnav .in::-webkit-scrollbar { display: none; }
.sj-subnav .tab {
  flex: 0 0 auto; background: none !important; border: 0; border-radius: 0 !important;
  padding: 15px 14px 13px; font: 700 14px var(--sj-font); color: var(--sj-muted) !important;
  border-bottom: 2px solid transparent !important; cursor: pointer; white-space: nowrap; box-shadow: none !important;
}
.sj-subnav .tab:hover { color: var(--sj-ink) !important; }
.sj-subnav .tab.on { color: var(--sj-ink) !important; border-bottom-color: var(--sj-teal) !important; }

/* ---------- 공통 페이지 제목 ---------- */
.sj-page-head { margin: 0 0 18px; }
.sj-page-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 4px; color: var(--sj-ink); }
.sj-page-head p { margin: 0; font-size: 13.5px; color: var(--sj-muted); }

/* ---------- 포털 공통 팝업(교과관리 제출 현황 등) ---------- */
.sj-modal-bg { position: fixed; inset: 0; z-index: 300; background: rgba(16, 35, 61, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sj-modal { width: min(640px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: var(--sj-radius); padding: 22px; box-shadow: 0 20px 60px rgba(16, 35, 61, .3); font-family: var(--sj-font); }
.sj-modal h3 { margin: 0 0 4px; font-size: 17px; }
.sj-modal .sub { margin: 0 0 14px; font-size: 12.5px; color: var(--sj-muted); }
.sj-modal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sj-modal th, .sj-modal td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--sj-line); vertical-align: top; }
.sj-modal th { font-size: 12px; color: var(--sj-muted); background: #fafcfd; }
.sj-modal .actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.sj-modal .close { border: 0; border-radius: var(--sj-radius-sm); background: var(--sj-navy); color: #fff; font: 700 13px var(--sj-font); padding: 9px 16px; cursor: pointer; }
.sj-pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.sj-pill.ok { background: var(--sj-teal-soft); color: var(--sj-teal-d); }
.sj-pill.no { background: var(--sj-red-soft); color: var(--sj-red); }
.sj-pill.edit { background: var(--sj-blue-soft); color: var(--sj-blue); }
.sj-note { background: var(--sj-teal-soft); color: var(--sj-teal-d); border-radius: var(--sj-radius-sm); padding: 11px 14px; font-size: 12.5px; line-height: 1.6; margin: 0 0 14px; }
.sj-note a { color: inherit; font-weight: 700; }