/* Paperlogy 1.001: supplied fonts, hosted with the application. */
@font-face {
  font-family: "Paperlogy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/paperlogy-1.001/Paperlogy-4Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/paperlogy-1.001/Paperlogy-5Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/paperlogy-1.001/Paperlogy-6SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/paperlogy-1.001/Paperlogy-7Bold.ttf") format("truetype");
}

:root {
  --font-ui: "Paperlogy", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --navy: #10284b;
  --navy-2: #1a3a6b;
  --accent: #2f6fed;
  --accent-soft: #e8f0fe;
  --teal: #0e8f7e;
  --bg: #f4f6fa;
  --card: #ffffff;
  --line: #dde3ee;
  --text: #1c2432;
  --muted: #67718a;
  --danger: #c93b3b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg); color: var(--text); font-size: 14px;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---------- 로그인 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #24528f 100%);
  padding: 24px;
}
.login-card {
  width: 400px; max-width: 100%; background: var(--card); border-radius: 16px;
  padding: 36px 32px 28px; box-shadow: 0 24px 60px rgba(6, 18, 40, .45);
}
.brand-univ { font-size: 13px; color: var(--muted); letter-spacing: .1em; }
.brand-lab { font-size: 15px; font-weight: 600; color: var(--navy-2); margin-top: 2px; }
.login-brand h1 { font-size: 22px; margin: 10px 0 0; color: var(--navy); }
.login-secure {
  margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--teal);
}
.login-desc { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
#login-form label { display: block; margin-bottom: 14px; font-weight: 600; color: var(--navy-2); }
#login-form input, #login-form select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe;
}
#login-form input:focus, #login-form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.login-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted); }
.form-error { color: var(--danger); margin: -4px 0 12px; }

/* ---------- 버튼 ---------- */
.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 8px 14px; color: var(--text);
}
.btn:hover { background: #f0f3f9; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #245cd0; }
.btn-danger { color: var(--danger); border-color: #ecccd0; }
.btn-danger:hover { background: #fbeeee; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; padding: 12px; }

/* ---------- 상단바 ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--navy); color: #fff; padding: 10px 20px;
  position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-size: 17px; font-weight: 700; }
.topbar-lab { color: #9ec1ff; }
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.tab {
  background: transparent; border: none; color: #c8d4ea; padding: 8px 14px;
  border-radius: 8px; font-weight: 600;
}
.tab:hover { background: rgba(255,255,255,.1); color: #fff; }
.tab.active { background: rgba(255,255,255,.16); color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 10px; color: #dbe6f8; }

.content { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

/* ---------- 카드/요약 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
}
.card .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.card .v { font-size: 22px; font-weight: 700; margin-top: 6px; color: var(--navy); }
.card .v.pos { color: var(--teal); }
.card .v.neg { color: var(--danger); }
.card .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.card input {
  width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 16px; font-weight: 700; color: var(--navy);
}

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; margin-bottom: 20px;
}
.panel h2 { margin: 0 0 12px; font-size: 16px; color: var(--navy); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-actions input[type="month"] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; }
.check-label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }

/* ---------- 테이블 ---------- */
.table-scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; white-space: nowrap; }
table.grid th, table.grid td {
  border: 1px solid var(--line); padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums;
}
table.grid th { background: #eef2f9; color: var(--navy-2); font-size: 12.5px; position: sticky; top: 0; }
table.grid th, table.grid td.txt { text-align: center; }
table.grid tr:nth-child(even) td { background: #fafbfe; }
table.grid td.total { font-weight: 700; background: var(--accent-soft) !important; }
table.grid td.clickable { cursor: pointer; }
table.grid td.clickable:hover, table.grid td.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.record-picker { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.record-picker .btn { text-align: left; }
.settlement-detail { margin: 18px 0; }
table.grid td.formula-text { white-space: normal; min-width: 170px; }
.view-list { display: flex; flex-direction: column; gap: 6px; }
.view-row { display: flex; align-items: center; gap: 8px; }
.view-row label { flex: 1; }
.tab[draggable], .pill[draggable] { cursor: grab; }
table.grid tfoot td { font-weight: 700; background: #eef2f9 !important; }
table.grid tr.empty-row td { background: #f2f4f7; color: var(--muted); }
.muted { color: var(--muted); }
.edit-meta { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.history-editor .edit-meta { display: block; margin-top: 4px; }
.rate-ref { display: block; color: var(--danger); font-size: 11px; font-weight: 600; }

/* 학생 선택 */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600;
}
.pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.history-editor { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin: 14px 0 18px; }
.history-editor h2 { margin-bottom: 2px; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row { display: grid; grid-template-columns: minmax(160px, 220px) minmax(120px, 180px) auto; gap: 8px; align-items: end; }
.history-row label { color: var(--navy-2); font-size: 12.5px; font-weight: 600; }
.history-row input, .history-row select { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; }

/* ---------- 모달 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 20, 40, .5); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 14px; width: 560px; max-width: 100%; padding: 24px;
  box-shadow: 0 20px 60px rgba(6, 18, 40, .4);
}
.modal h2 { margin: 0 0 16px; font-size: 17px; color: var(--navy); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field-grid label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy-2); }
.field-grid input, .field-grid select {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px;
}
.field-help { display: block; margin-top: 4px; color: var(--danger); font-size: 11px; }
.field-grid .span2 { grid-column: span 2; }
.fund-section { grid-column: span 2; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.fund-section .fs-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.modal-total { grid-column: span 2; text-align: right; font-weight: 700; color: var(--navy); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; grid-column: span 2; }

/* 로그 */
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { padding: 8px 4px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; }
.log-time { color: var(--muted); font-size: 12.5px; min-width: 140px; }
.log-user { font-weight: 700; color: var(--navy-2); min-width: 80px; }

/* 토스트 */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(6,18,40,.35); z-index: 100;
}
.toast.error { background: var(--danger); }

@media (max-width: 600px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: visible; flex-wrap: wrap; }
  .tab { white-space: nowrap; padding: 7px 10px; }
  .content { padding: 14px 10px 48px; }
  .panel { padding: 13px; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .span2, .fund-section, .modal-total, .modal-actions { grid-column: span 1; }
  .history-row { grid-template-columns: 1fr 1fr auto; }
  .log-list li { flex-wrap: wrap; gap: 5px 10px; }
}
/* NBEL research operations visual theme */
.workspace-heading {flex-wrap:wrap;}
.backup-toolbar {flex-wrap:wrap;gap:10px;}
.backup-toolbar .btn {white-space:nowrap;font-size:14px;padding:14px 20px;}
.backup-toolbar .export-all {background:#fff2e2;color:#a96818;}
.backup-toolbar .export-dashboard {background:#eaf0ff;color:#4973eb;}
.restore-dialog {border:0;border-radius:18px;padding:28px;max-width:520px;width:calc(100% - 40px);box-sizing:border-box;box-shadow:0 20px 80px #0003;}
.restore-dialog::backdrop {background:#10182866;}
.restore-dialog label {display:grid;gap:8px;}
.restore-dialog input {padding:12px;border:1px solid #ddd;border-radius:8px;}
.restore-error {color:#b42318;}
.budget-panel {margin-bottom:24px;}
.budget-help {line-height:1.7;}
.budget-dialog label {margin-bottom:14px;}
.budget-dialog select {padding:12px;border:1px solid #ddd;border-radius:8px;background:white;max-width:100%;}
.budget-preview {font-weight:700;line-height:1.6;}
.budget-table td.txt {white-space:normal;min-width:180px;overflow-wrap:anywhere;}
.budget-panel .panel-head {gap:12px;flex-wrap:wrap;}
.card .v.neg {color:var(--danger);}
:root { --navy:#17191d; --navy-2:#343840; --accent:#557cf5; --accent-soft:#eaf1ff; --bg:#f5f6fa; --line:#eceef3; --text:#16181c; --muted:#85868c; --teal:#9d652c; }
.topbar { position:fixed; inset:0 auto 0 0; width:240px; padding:28px 20px; background:#fff; color:var(--text); flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:30px; }
.topbar-title { display:flex; align-items:center; gap:12px; font-size:12px; line-height:1.6; }
.topbar-title img { width:48px; height:56px; object-fit:contain; }
.tabs { display:flex; flex-direction:column; flex-wrap:nowrap; gap:6px; flex:0 1 auto; counter-reset:menu; overflow-y:auto; }
.tab { text-align:left; color:#42444a; border-radius:30px; padding:16px; font-size:14px; font-weight:500; }
.tab::before { counter-increment:menu; content:counter(menu,decimal-leading-zero); display:inline-block; font-size:11px; width:25px; color:#9b9da3; }
.tab:hover { background:#f5f6fa; color:var(--accent); }
.tab.active { background:var(--accent-soft); color:#416bc9; }
.tab.active::before { color:#bd8546; }
.topbar-user { margin-top:auto; border-top:1px solid var(--line); padding-top:18px; display:flex; flex-wrap:wrap; color:#777; font-size:12px; }
.btn-ghost { border-color:var(--line); color:#666; background:#f7f8fb; }
.btn-ghost:hover { background:var(--accent-soft); }
.content { max-width:none; margin:0 0 0 240px; padding:36px 38px 70px; min-width:0; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 28px; }
.workspace-heading small { font-size:10px; letter-spacing:2px; color:var(--muted); }
.workspace-heading h1 { font-size:34px; letter-spacing:-1px; margin:14px 0; }
.panel { padding:26px; border:0; border-radius:24px; box-shadow:0 5px 24px rgba(26,33,52,.025); }
.panel h2 { font-size:19px; }
.card { border:0; border-radius:22px; padding:25px; box-shadow:0 5px 24px rgba(26,33,52,.03); }
.card .v { font-size:26px; margin:16px 0; }
.card:first-child .v { color:#4b72c6; }
.card input { border:0; background:#f6f7fa; font-size:23px; padding:10px 8px; }
.btn { border:0; background:#f3f4f7; border-radius:24px; padding:10px 16px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#456ce4; }
.btn-danger { background:#fff2f1; color:var(--danger); }
.pill { border:0; background:#f4f5f8; font-weight:500; }
.pill.active { background:var(--accent-soft); color:#416bc9; }
table.grid th { background:#f3f4f8; color:#777b83; font-weight:500; padding:16px 12px; }
table.grid th,table.grid td { border-width:0 0 1px; }
table.grid td { padding:13px 12px; }
table.grid tr:nth-child(even) td { background:transparent; }
table.grid td.total { background:#f5f8ff !important; }
table.grid tfoot td { background:#eef3fc !important; }
.modal { border-radius:24px; }
.login-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(390px,40%) 1fr; padding:0; background:#fff; align-items:stretch; }
.login-card { width:auto; max-width:none; padding:45px 28px; box-shadow:none; border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.login-brand { display:flex; align-items:center; gap:24px; margin-bottom:44px; font-size:17px; font-weight:700; line-height:1.6; }
.login-brand img { width:140px; max-width:36%; object-fit:contain; }
.login-secure { font-size:10px; color:#777; letter-spacing:2px; margin:6px 0 10px; }
.login-heading { font-size:clamp(32px,3.6vw,54px); line-height:1.3; letter-spacing:-2px; margin:0 0 25px; }
.login-desc { font-size:12px; line-height:1.8; margin-bottom:30px; }
#login-form label { font-weight:400; font-size:12px; color:#555; margin-bottom:8px; }
#login-form input { border:0; border-radius:16px; background:#f6f7f9; padding:18px; font-size:14px; }
#login-form button { margin-top:5px; padding:17px; }
.login-foot { text-align:left; font-size:10px; color:#9b9da3; margin-top:24px; }
.login-art { position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#edf4ff,#fff6eb 65%,#e5edff); }
.art-orbit { width:min(44vw,640px); aspect-ratio:1; border:70px solid #e5e9f580; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 0 70px #e8edf660; }
.art-paper { width:75%; aspect-ratio:.83; border-radius:26px; background:linear-gradient(130deg,#fff,#f2f6ff); box-shadow:0 24px 48px #26324c22; transform:rotate(-5deg); padding:18% 12%; display:flex; flex-direction:column; gap:22px; }
.art-paper i { height:8px; min-height:5px; border-radius:20px; background:linear-gradient(90deg,#86aaf1 0 40%,transparent 40% 56%,#efd0a2 56%); }
.art-paper i:first-child { background:linear-gradient(90deg,#557cf5 0 40%,transparent 40% 56%,#d89743 56%); margin-bottom:20px; }
.art-caption { position:absolute; bottom:9%; left:9%; }
.art-caption small { color:#999; }.art-caption h2 { margin:12px 0; }
@media(max-width:1000px) { .topbar {width:210px;} .content {margin-left:210px;padding:24px;} .workspace-heading {align-items:flex-start;flex-wrap:wrap;} .login-brand {gap:12px;font-size:14px;} }
@media(max-width:700px) { .topbar {position:static;width:auto;padding:18px;gap:16px;} .topbar-title img{height:44px;} .tabs {flex-direction:row;flex-wrap:wrap;overflow:visible;order:0;} .tab {padding:9px 12px;font-size:12px;} .tab::before{width:20px;} .topbar-user {margin:0;padding:10px 0 0;} .content {margin:0;padding:20px 12px;} .workspace-heading h1{font-size:28px;} .panel{padding:18px 12px;border-radius:18px;} .card{padding:20px;} .login-wrap{display:block;} .login-card{min-height:100vh;padding:28px 24px;} .login-art{display:none;} .login-heading{font-size:40px;} .login-brand{font-size:15px;} }

.student-group-control { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#student-group { font: inherit; padding: 8px 12px; min-height: 40px; border: 1px solid #d9deea; border-radius: 8px; background: #fff; color: #172238; }

/* Column controls live in the table headings. */
table.grid th:has(.column-heading) { padding: 0; }
.column-heading { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 16px 12px; border: 0; background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.column-heading:hover { background: #e8edf7; }
.column-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.column-heading svg { flex-shrink: 0; }
.column-menu { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 16px; border: 1px solid #d9deea; border-radius: 12px; background: #fff; color: #172238; box-shadow: 0 8px 28px #17223826; font-size: 13px; }
.column-menu-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.column-menu-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.column-menu-list label { display: flex; align-items: center; gap: 8px; min-height: 28px; overflow-wrap: anywhere; }
.column-menu-list input { width: auto; margin: 0; flex-shrink: 0; }
.column-menu .muted { margin: 14px 0 8px; }

/* Direct editing stays inside the selected table cell. */
.grid td.editing { padding: 4px; background: #eef4ff; white-space: normal; }
.cell-editor { margin: 0; min-width: 90px; }
.cell-editor label { display: block; font-size: 12px; text-align: left; }
.cell-editor input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid #5277b8; border-radius: 4px; font: inherit; font-size: 16px; color: #172238; background: white; }
.cell-editor input:focus { outline: 2px solid #5277b8; outline-offset: 1px; }
.cell-editor-expanded { width: 220px; max-width: 65vw; display: grid; gap: 8px; white-space: normal; }
.cell-error { display: block; color: #b42318; white-space: normal; font-size: 12px; text-align: left; }

.program-basis-notice { margin: -12px 0 20px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }

/* Keep chronological history above the initial current-month viewport. */
.month-history-scroll { max-height: min(62vh, 620px); overflow: auto; overscroll-behavior: contain; position: relative; }
.month-history-scroll table.grid { border-collapse: separate; border-spacing: 0; }
.month-history-scroll table.grid th { z-index: 4; }
.month-history-scroll .current-month-row td { position: sticky; top: var(--month-heading-height, 44px); z-index: 2; background: #edf4ff !important; border-top: 2px solid #557cf5; }
.month-history-scroll .current-month-row td.editing { z-index: 3; }
.month-history-help { font-size: 12px; white-space: normal; }

.month-history-scroll .current-month-row:has(.cell-editor-expanded) td { position: static; }

/* Student details start collapsed and can be opened with mouse or keyboard. */
.student-disclosure > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 8px; }
.student-disclosure > summary::-webkit-details-marker { display: none; }
.student-disclosure > summary::before { content: '▸'; color: var(--accent); }
.student-disclosure[open] > summary::before { content: '▾'; }
.student-disclosure > summary::after { content: '펼치기'; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.student-disclosure[open] > summary::after { content: '접기'; }
.student-disclosure > summary h2 { margin: 0; font-size: 17px; }
.student-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.student-disclosure[open] > summary { margin-bottom: 14px; }