@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;src:url("/fonts/PretendardVariable.woff2") format("woff2-variations")}
/* =========================================================================
   교육공무직관리프로그램 — Shared design tokens, layout, components
   ========================================================================= */

:root {
  --bg:        oklch(98.6% 0.003 250);
  --surface:   #ffffff;
  --surface-2: oklch(97.2% 0.004 250);
  --surface-3: oklch(95.5% 0.005 250);
  --border:    oklch(92% 0.005 250);
  --border-2:  oklch(88% 0.006 250);
  --ink:       oklch(22% 0.012 260);
  --ink-2:     oklch(40% 0.010 260);
  --ink-3:     oklch(58% 0.008 260);
  --ink-4:     oklch(72% 0.006 260);
  --ink-5:     oklch(85% 0.005 260);

  --accent:    oklch(45% 0.13 265);
  --accent-2:  oklch(96% 0.02 265);
  --accent-3:  oklch(92% 0.04 265);
  --accent-ink: oklch(36% 0.13 265);

  --ok:        oklch(55% 0.13 155);
  --ok-2:      oklch(96% 0.04 155);
  --ok-ink:    oklch(40% 0.13 155);

  --warn:      oklch(70% 0.15 75);
  --warn-2:    oklch(96% 0.05 80);
  --warn-ink:  oklch(48% 0.13 65);

  --danger:    oklch(58% 0.18 25);
  --danger-2:  oklch(96% 0.04 25);
  --danger-ink: oklch(45% 0.16 25);

  --info:      oklch(58% 0.13 240);
  --info-2:    oklch(96% 0.03 240);
  --info-ink:  oklch(42% 0.14 240);

  --header-h:  56px;
  --sidebar-w: 260px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
button, input, select, textarea { font-family: inherit; }
svg { display: block; }
a { color: inherit; }

/* ===== Top header ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(var(--sidebar-w) - 24px);
  padding-right: 24px;
  margin-right: 8px;
  border-right: 1px solid var(--border);
  height: 100%;
  text-decoration: none;
}
.brand-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
}
.brand-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* Topbar 현재 페이지 표시 (옛 .topnav 자리, 2026-05-11) */
.topbar-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 4px;
  min-width: 0;
}
.topbar-breadcrumb {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-breadcrumb span {
  color: var(--ink-3);
  margin: 0 4px;
  font-weight: 400;
}
.topbar-page-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-2);
}
.user-chip .avatar {
  min-width: 22px; width: auto; height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  display: grid; place-items: center;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 14px 24px;
  z-index: 20;
}
.sb-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin: 14px 8px 8px;
}
.sb-section-label:first-child { margin-top: 0; }

.date-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 14px;
  margin-bottom: 8px;
}
.date-card label {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 500;
}
.date-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.date-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(45% 0.13 265 / 0.12);
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
  user-select: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active {
  background: var(--accent-2);
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-item .ico {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  color: currentColor;
  opacity: 0.85;
}
.nav-item .label { flex: 1; }
.nav-item .chev {
  width: 12px; height: 12px;
  color: var(--ink-4);
  transition: transform 150ms ease;
}
.nav-item.expanded .chev { transform: rotate(90deg); }

.submenu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px 28px;
}
.submenu .nav-item {
  font-size: 13px;
  padding: 6px 10px;
  color: var(--ink-3);
}

.sb-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-2);
  font-size: 11.5px;
  color: var(--ink-4);
  padding-left: 8px;
  line-height: 1.55;
}
.sb-footer strong { color: var(--ink-3); font-weight: 600; }

/* ===== Main layout ===== */
.main {
  margin-left: var(--sidebar-w);
  padding: calc(var(--header-h) + 28px) 36px 48px;
  max-width: 1400px;
}
.main.wide { max-width: none; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
/* .page-head .crumbs / .page-head h1 — Topbar 로 이동 (2026-05-11). 셀렉터 제거. */
.page-head .sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}
.page-head .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-primary:hover { background: oklch(40% 0.13 265); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger {
  background: var(--surface);
  color: var(--danger-ink);
  border-color: var(--border-2);
}
.btn-danger:hover { background: var(--danger-2); border-color: var(--danger); }
.btn-icon {
  width: 32px; padding: 0;
  display: inline-grid; place-items: center;
}
.btn .ico { width: 14px; height: 14px; }
.btn-lg .ico { width: 15px; height: 15px; }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card + .card { margin-top: 20px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.card-head .title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-head .meta {
  font-size: 12.5px;
  color: var(--ink-4);
}
.card-head .meta strong {
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-body { padding: 20px 24px; }
.card-body.flush { padding: 0; }

/* ===== Form controls ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}
.input, .select, .textarea {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(45% 0.13 265 / 0.12);
}
.search {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.search .ico {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--ink-4);
  pointer-events: none;
}
.search .input {
  width: 100%;
  padding-left: 32px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

/* ===== Tables ===== */
.tbl-wrap {
  overflow: auto;
  max-height: calc(100vh - 320px);
}
table.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.tbl thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 10px 14px;
  white-space: nowrap;
  z-index: 1;
}
table.tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl td.right, table.tbl th.right { text-align: right; }
table.tbl td.center, table.tbl th.center { text-align: center; }
table.tbl td.muted { color: var(--ink-3); }
table.tbl td.num { font-weight: 600; }
table.tbl .row-check { width: 32px; padding-left: 16px; }

.chk {
  width: 15px; height: 15px;
  border: 1.5px solid var(--border-2);
  border-radius: 4px;
  background: var(--surface);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  vertical-align: middle;
}
.chk:hover { border-color: var(--accent); }
.chk.on {
  background: var(--accent);
  border-color: var(--accent);
}
.chk.on::after {
  content: "";
  width: 8px; height: 4px;
  border: 1.6px solid white;
  border-top: 0; border-right: 0;
  transform: translate(0, -1px) rotate(-45deg);
}

/* ===== Badges & pills ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.ok    { background: var(--ok-2);    color: var(--ok-ink); }
.badge.warn  { background: var(--warn-2);  color: var(--warn-ink); }
.badge.err   { background: var(--danger-2); color: var(--danger-ink); }
.badge.info  { background: var(--info-2);  color: var(--info-ink); }
.badge.muted { background: var(--surface-3); color: var(--ink-3); }
.badge.accent { background: var(--accent-2); color: var(--accent-ink); }

/* ===== Pagination ===== */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-3);
}
.pager .controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pager .pg {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.pager .pg:hover { background: var(--surface-2); }
.pager .pg.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
}
.pager .pg:disabled { opacity: 0.4; cursor: default; }

/* ===== Empty state ===== */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}
.empty .title {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 6px;
}
.empty .desc {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 340px;
  margin: 0 auto;
}

/* ===== Stat numbers ===== */
.num-display {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1.05;
}

/* ===== 원본 JS 호환 + 반응형 ===== */

/* nav-submenu: 기본 hidden, expanded 시 flex */
.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px 28px;
}
.nav-item-group.expanded .nav-submenu { display: flex; }
.nav-item-group.expanded .chev { transform: rotate(90deg); }
.chev { transition: transform 150ms ease; }

.nav-submenu-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}
.nav-submenu-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-submenu-item.active { color: var(--accent-ink); font-weight: 600; }

/* 전체 폰트 사이즈 소폭 증가 */
body { font-size: 15px; }
.nav-item { font-size: 14.5px; }
table.tbl { font-size: 14px; }
table.tbl thead th { font-size: 12.5px; }

/* 반응형 */
.main { min-width: 0; }
.tbl-wrap { overflow-x: auto; }
table.tbl { min-width: 600px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.toolbar select, .toolbar .search { flex-shrink: 0; }

/* user-chip */
#user-name-display { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 원본 JS 호환 — 구버전 CSS 변수 별칭 ===== */
:root {
  --accent-primary:  oklch(45% 0.13 265);
  --text-secondary:  oklch(40% 0.010 260);
  --text-muted:      oklch(58% 0.008 260);
  --text-primary:    oklch(22% 0.012 260);
  --bg-card:         #ffffff;
  --border-color:    oklch(92% 0.005 250);
  --border-light:    oklch(92% 0.005 250);
}

/* ===== 일반 table (class 없는 table도 스타일 적용) ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table thead {
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 10;
}
table thead th {
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
}
table thead th:first-child { text-align: center; }
table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
table tbody tr:hover td { background: var(--surface-2); }
table tbody tr:last-child td { border-bottom: none; }

/* records-table-wrapper 스크롤 */
#records-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
}

/* ===== 체크박스 ===== */
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-2);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 120ms ease, border-color 120ms ease;
  vertical-align: middle;
}
.checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox:checked::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

/* ===== 페이지네이션 (records.js renderPagination) ===== */
#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms ease;
}
.page-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.page-btn.active { background: var(--accent); color: white; font-weight: 600; }
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-info { font-size: 13px; color: var(--ink-3); padding: 0 8px; }

/* ===== tag (records.js uses tag-purple, tag-blue) ===== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-blue   { background: var(--accent-2); color: var(--accent-ink); }
.tag-purple { background: var(--info-2);   color: var(--info-ink); }
.tag-green  { background: var(--ok-2);     color: var(--ok-ink); }
.tag-red    { background: var(--danger-2); color: var(--danger-ink); }
.tag-amber  { background: var(--warn-2);   color: var(--warn-ink); }

/* ===== empty-state ===== */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}
.empty-state .empty-title {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 8px;
}
.empty-state .empty-desc {
  font-size: 13.5px;
  max-width: 340px;
  margin: 0 auto;
}

/* ===== 모달 (records.js detail modal) ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  backdrop-filter: blur(2px);
}
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 92%;
  max-width: 900px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
  transform: scale(0.97);
  transition: transform 200ms ease;
}
.modal-overlay.show .modal { transform: scale(1); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  transition: background 120ms ease;
  font-family: inherit;
}
.modal-close:hover { background: var(--surface-3); color: var(--ink); }
.modal-body { padding: 20px 24px 28px; }

/* records 테이블 — 날짜 컬럼 최소폭 보장 */
#records-table-wrapper table th,
#records-table-wrapper table td {
  white-space: nowrap;
  min-width: 80px;
}
/* 이름·학교 컬럼은 좁아도 됨 */
#records-table-wrapper table td:nth-child(2),
#records-table-wrapper table th:nth-child(2) { min-width: 70px; }

/* records-view (read-only) — 모든 셀 검정 + 밑줄/포인터 제거 (verifyMode 색칠 + scoreCell 빨강 무시) */
.records-view-readonly td,
.records-view-readonly td * {
  color: #0f172a !important;
  text-decoration: none !important;
  cursor: default !important;
}