/* 유니메이트 ERP — A안 「유니메이트 다크」. 모든 색은 토큰으로만. */
:root {
  --bg:#0d0d1a; --surface:#1e1e30; --surface-sunken:#252540; --surface-raised:#2a2a48;
  --ink:#f3f4f6; --muted:#9ca3af; --line:#374151; --line-soft:#2b2b45;
  --accent:#3b82f6; --accent-hover:#2563eb; --on-accent:#ffffff; --accent-soft:#1e3a5f;
  --mm:#f2cc7a; --mm-soft:#3a2f12; --consul:#6ee0b8; --consul-soft:#143a2e; --kr:#9cc2ff; --kr-soft:#1c2f55;
  --warn:#f4c47a; --warn-soft:#3d2a10; --crit:#fca5a5; --crit-strong:#ef4444; --crit-soft:#451a1a;
  --closed:#4b5563; --focus:#93c5fd;
  --wait-bg:#2d2d4a;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --font-sans:"Noto Sans KR","Apple SD Gothic Neo","Noto Sans Myanmar",sans-serif; --font-mono:"IBM Plex Mono",Menlo,monospace;
  --shadow-pop:0 8px 24px rgba(0,0,0,.55);
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { height:100%; }
body { margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
a { color:var(--kr); text-decoration:none; } a:hover { color:#c3daff; text-decoration:underline; }

/* 상단 바 */
.top { display:flex; align-items:center; gap:20px; height:56px; padding:0 20px; background:rgba(26,26,46,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; white-space:nowrap; letter-spacing:-.01em; }
.brand .u { width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.brand .muted { font-weight:400; font-size:12px; }
.muted { color:var(--muted); font-weight:400; font-size:12px; }
nav { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; height:100%; align-items:stretch; }
.units { display:flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:2px; align-self:center; }
.units a { padding:0 12px; height:26px; border-radius:6px; border-bottom:0; font-size:13px; font-weight:500; color:var(--muted); }
.units a:hover { background:var(--surface-sunken); }
.units a.active { background:var(--accent); color:var(--on-accent); font-weight:600; }
.units a.active:hover { background:var(--accent-hover); }
.units a[hidden] { display:none; }
.menus { display:flex; gap:2px; align-items:stretch; }
.menus a[hidden] { display:none; }
nav::-webkit-scrollbar { display:none; }
nav[hidden] { display:none; }
[hidden] { display:none !important; }
nav a { color:#d1d5db; padding:0 10px; display:flex; align-items:center; border-bottom:2px solid transparent; white-space:nowrap; font-size:13.5px; }
nav a:hover { color:var(--ink); text-decoration:none; background:var(--surface-sunken); }
nav a.active { border-bottom-color:var(--accent); color:#93c5fd; font-weight:600; }
.gsearch { margin-left:auto; position:relative; flex:0 1 220px; min-width:120px; }
.gsearch input { width:100%; height:32px; border-radius:999px; padding:0 14px; font-size:13px; }
.gres { position:absolute; top:38px; right:0; width:min(420px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); padding:6px; z-index:30; max-height:70vh; overflow:auto; }
.gres a { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:var(--r-md); color:var(--ink); }
.gres a:hover, .gres a.on { background:var(--surface-sunken); text-decoration:none; }
.gres a b { font-size:13.5px; }
.gres a span { font-size:12px; color:var(--muted); }
.gres .empty { padding:10px; color:var(--muted); font-size:13px; }
.who { margin-left:0; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; }
main { max-width:1440px; margin:0 auto; padding:20px 24px; }
h1 { font-size:22px; line-height:30px; margin:0 0 14px; font-weight:700; letter-spacing:-.01em; }
h1 .muted { font-size:13px; margin-left:8px; }
h2 { font-size:15px; line-height:22px; margin:18px 0 8px; font-weight:600; }
h2 .muted { margin-left:6px; }
.card > h2:first-child, .card > h2[style*="margin-top:0"] { margin-top:0; }
h3 { font-size:13px; margin:12px 0 6px; }
p { margin:6px 0; }

/* 카드·그리드 */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:14px; }
.card .card { background:var(--surface-sunken); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.grid > .card { margin:0; }
.card label + b, .grid label + b { font-family:var(--font-mono); font-size:18px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > div > b { display:block; font-size:14px; }
.card.row { padding:12px 16px; }

/* 표 */
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:12px; white-space:nowrap; background:var(--surface); position:sticky; top:0; z-index:1; }
tbody tr:nth-child(even) td, table > tr:nth-child(even) td { background:var(--surface-sunken); }
tr:hover td { background:var(--surface-raised) !important; }
td a { font-weight:500; }
.mono { font-family:var(--font-mono); font-size:12.5px; }
b.mono { font-weight:600; }

/* 태그 */
.tag { display:inline-block; font-size:11px; line-height:15px; font-weight:500; padding:2px 8px; border-radius:var(--r-sm); border:1px solid var(--line); white-space:nowrap; color:#d1d5db; background:var(--surface-sunken); vertical-align:middle; }
.tag.mm { background:var(--mm-soft); color:var(--mm); border-color:transparent; }
.tag.kr { background:var(--kr-soft); color:var(--kr); border-color:transparent; }
.tag.consul { background:var(--consul-soft); color:var(--consul); border-color:transparent; }
.tag.ok { background:var(--consul-soft); color:var(--consul); border-color:transparent; }
.tag.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.tag.critical { background:var(--crit-soft); color:var(--crit); border-color:transparent; }

/* 버튼·입력 */
button { font:inherit; font-size:12.5px; font-weight:500; height:32px; padding:0 12px; border:1px solid #4b556380; background:var(--surface-sunken); border-radius:var(--r-md); cursor:pointer; color:var(--ink); white-space:nowrap; }
button:hover { background:var(--surface-raised); border-color:#6b7280; }
button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.danger { color:var(--crit); border-color:#7f1d1d; background:transparent; }
button.danger:hover { background:var(--crit-soft); }
button:disabled { opacity:.45; cursor:default; }
td button, .cell button, .adm-checks button, .adm-next button, .who button { height:24px; padding:0 8px; font-size:11.5px; }
input, select, textarea { font:inherit; font-size:13.5px; height:32px; padding:0 10px; border:1px solid #4b556380; border-radius:var(--r-md); background:var(--bg); color:var(--ink); }
textarea { height:auto; min-height:64px; padding:6px 10px; }
input:hover, select:hover, textarea:hover { border-color:#6b7280; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
input[type=checkbox] { height:auto; }
label { font-size:12px; color:var(--muted); display:block; margin-bottom:3px; font-weight:500; }

/* 매트릭스 셀 */
.cell { display:inline-block; min-width:48px; text-align:center; padding:3px 6px; border-radius:var(--r-sm); font-size:11px; font-family:var(--font-mono); font-weight:500; cursor:pointer; border:1px solid transparent; line-height:15px; }
.c-wait { background:var(--wait-bg); color:var(--muted); }
.c-mm { background:var(--mm-soft); color:var(--mm); }
.c-consul { background:var(--consul-soft); color:var(--consul); }
.c-kr { background:var(--kr-soft); color:var(--kr); }
.c-done { background:var(--accent); color:var(--on-accent); }
.c-fix { background:var(--crit-soft); color:var(--crit); border-color:var(--crit-strong); }
.c-locked { outline:1px dashed var(--muted); outline-offset:-3px; }
.c-opt { opacity:.55; }
.legend span { margin-right:10px; font-size:11px; }
table td:first-child a { white-space:nowrap; }

/* 로그인 */
.login { max-width:400px; margin:56px auto; padding:28px 28px 24px; }
.login .hero { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; }
.login .hero .u { width:56px; height:56px; border-radius:14px; font-size:26px; }
.login .hero b { font-size:22px; }
.login h1 { text-align:center; font-size:18px; margin-bottom:16px; }
.login input { width:100%; height:44px; border-radius:var(--r-lg); font-size:15px; margin-bottom:12px; }
.login button.primary { width:100%; height:44px; border-radius:var(--r-lg); font-size:14px; margin-top:4px; }

/* 토스트·모달 */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#f3f4f6; color:#0d0d1a; padding:10px 18px; border-radius:var(--r-lg); font-size:13px; z-index:20; box-shadow:var(--shadow-pop); max-width:90vw; }
.toast.err { background:var(--crit-strong); color:#fff; }
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:15; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px 22px; width:min(480px,100%); box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:12px; }
.modal h3 { margin:0; font-size:15px; }
.modal .msg { font-size:13px; color:var(--muted); white-space:pre-line; }
.modal input, .modal textarea, .modal select { width:100%; }
.modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }

/* 이벤트·마일스톤 */
.events { font-size:12px; max-height:320px; overflow:auto; }
.events div { padding:4px 0; border-bottom:1px solid var(--line-soft); }
.milestones { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; font-size:12px; }
.milestones div { background:var(--surface-sunken); border-radius:var(--r-md); padding:8px 10px; }
.milestones div b { display:block; font-family:var(--font-mono); font-weight:500; font-size:13px; }
.my { font-family:"Noto Sans Myanmar","Myanmar Sangam MN",sans-serif; color:var(--muted); font-size:12px; }

/* 학교 로고 */
.logo { width:20px; height:20px; border-radius:5px; vertical-align:-5px; margin-right:6px; background:#fff; object-fit:contain; padding:1px; }
.logo.lg { width:40px; height:40px; border-radius:9px; vertical-align:middle; }
.logo-fb { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; vertical-align:-5px; margin-right:6px; background:var(--kr-soft); color:var(--kr); font-size:10px; font-weight:700; }
.logo-fb.lg { width:40px; height:40px; font-size:17px; border-radius:9px; }

/* 대시보드 KPI */
.grid .card label { margin-bottom:4px; }
.grid .card > div.mono { font-size:22px; line-height:28px; }

@media (max-width:720px) {
  main { padding:12px 16px; }
  .units a { padding:0 9px; }
  .top { padding:0 14px; gap:12px; }
  .brand span:not(.u) { display:none; }
  h1 { font-size:19px; }
  .card { padding:12px 14px; border-radius:var(--r-md); }
}

/* ===== 온라인 출석부 (강사용, 휴대폰 우선) ===== */
.reg-wrap { max-width:760px; margin:0 auto; }
.reg-sec { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; margin:18px 0 8px; }
a.reg-card { display:flex; justify-content:space-between; gap:12px; align-items:center; color:inherit; margin-bottom:10px; }
a.reg-card:hover { border-color:var(--accent); text-decoration:none; color:inherit; }
.reg-card .rc-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.reg-card .rc-main b { font-size:16px; }
.reg-card .rc-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; text-align:right; }
.reg-card .rc-go { color:var(--kr); font-weight:600; font-size:13px; }
.reg-head h1 { margin:6px 0 2px; }
.reg-bar { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.reg-date { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.reg-date input, .reg-date button { height:38px; }
.reg-date b { font-size:15px; margin-left:4px; }
.reg-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.reg-meta label { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--ink); }
.reg-meta #hours { width:72px; }
.reg-meta #topic { flex:1 1 200px; min-width:0; }
.reg-hint { font-size:12.5px; color:var(--muted); }
.reg-hint.warn { color:var(--warn); }
.reg-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 8px; }
.reg-tools button { height:38px; }
.reg-list { display:flex; flex-direction:column; gap:8px; }
.reg-row { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--r-lg); padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; }
.reg-row.is-present { border-left-color:#34d399; } .reg-row.is-late { border-left-color:var(--warn); } .reg-row.is-absent { border-left-color:var(--crit-strong); } .reg-row.is-excused { border-left-color:var(--kr); }
.reg-row.dirty { box-shadow:0 0 0 1px var(--accent) inset; }
.reg-name { display:flex; flex-direction:column; min-width:0; }
.reg-name b { font-size:15px; }
.reg-name span { font-size:12px; color:var(--muted); }
.seg { display:flex; gap:4px; }
.seg button { height:42px; min-width:58px; font-size:13.5px; font-weight:600; border-radius:var(--r-md); }
.seg button.on.p { background:#064e3b; border-color:#34d399; color:#d1fae5; }
.seg button.on.l { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.seg button.on.a { background:var(--crit-soft); border-color:var(--crit-strong); color:var(--crit); }
.seg button.on.e { background:var(--kr-soft); border-color:var(--kr); color:var(--kr); }
.reg-sub { grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.reg-sub input { height:30px; flex:1 1 180px; font-size:12.5px; min-width:0; }
.reg-save { position:sticky; bottom:0; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:10px; background:rgba(13,13,26,.94); backdrop-filter:blur(6px); border-top:1px solid var(--line); padding:10px 0; margin-top:12px; }
.reg-save button { height:46px; min-width:150px; font-size:14.5px; }
.reg-foot { margin:14px 0 30px; font-size:12.5px; }
@media (max-width:600px) {
  .reg-row { grid-template-columns:1fr; }
  .seg { display:grid; grid-template-columns:repeat(4,1fr); }
  .seg button { min-width:0; height:46px; }
  a.reg-card { flex-direction:column; align-items:stretch; }
  .reg-card .rc-side { align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap; gap:8px; }
}

/* ===== 출석부 표 ===== */
.att-scroll { overflow:auto; max-height:70vh; border-radius:var(--r-md); }
table.att-grid { width:auto; border-collapse:separate; border-spacing:0; }
.att-grid th, .att-grid td { padding:0; border-bottom:1px solid var(--line-soft); text-align:center; vertical-align:middle; }
.att-grid th.st, .att-grid td.st { position:sticky; left:0; z-index:2; background:var(--surface); text-align:left; padding:6px 10px; min-width:180px; border-right:1px solid var(--line); white-space:nowrap; }
.att-grid th.st { z-index:4; }
.att-grid th.d { min-width:40px; padding:5px 2px; font-size:10.5px; line-height:1.25; }
.att-grid th.d small { display:block; color:var(--muted); font-size:9.5px; }
.att-grid th.d.today { color:var(--kr); }
.att-grid td.ac { width:40px; height:32px; font-size:12px; font-weight:600; cursor:pointer; user-select:none; position:relative; }
.att-grid td.ac.p { color:#34d399; } .att-grid td.ac.l { color:var(--warn); } .att-grid td.ac.a { color:var(--crit); } .att-grid td.ac.e { color:var(--kr); }
.att-grid td.ac.im { opacity:.7; }
.att-grid td.ac.ed::after { content:''; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--warn); }
.att-grid td.ac.dirty { outline:2px solid var(--accent); outline-offset:-2px; }
.att-grid td.ac:hover { background:var(--surface-raised); }
.att-grid td.rate { padding:6px 10px; font-family:var(--font-mono); font-size:12px; text-align:right; white-space:nowrap; }
.att-savebar { position:sticky; bottom:0; z-index:4; display:flex; gap:10px; align-items:center; justify-content:flex-end; background:rgba(13,13,26,.94); border-top:1px solid var(--line); padding:10px 0; }
.att-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px; }
.att-legend b { font-family:var(--font-mono); }

/* ===== 수료증 ===== */
.cert-tabs { display:flex; gap:4px; margin:0 0 14px; flex-wrap:wrap; }
.cert-tabs a { padding:6px 12px; border-radius:var(--r-md); border:1px solid var(--line); color:var(--muted); font-size:13px; }
.cert-tabs a:hover { text-decoration:none; color:var(--ink); }
.cert-tabs a.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.cls-list a { display:block; padding:9px 10px; border-radius:var(--r-md); color:inherit; border:1px solid transparent; margin-bottom:2px; }
.cls-list a:hover { background:var(--surface-sunken); text-decoration:none; color:inherit; }
.cls-list a.on { border-color:var(--accent); background:var(--accent-soft); }
.cls-list b { display:block; font-size:13.5px; }
.ratebar { display:inline-block; width:60px; height:6px; border-radius:3px; background:var(--surface-raised); vertical-align:middle; margin-right:6px; overflow:hidden; }
.ratebar i { display:block; height:100%; background:#34d399; }
.ratebar.low i { background:var(--crit-strong); }
.prog-tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--r-sm); color:#fff; vertical-align:middle; }
.modal.wide { width:min(1000px,100%); max-height:92vh; overflow:auto; }
.imp-cols { display:flex; flex-wrap:wrap; gap:4px; font-size:11.5px; }
.imp-cols span { padding:2px 6px; border-radius:var(--r-sm); background:var(--surface-sunken); font-family:var(--font-mono); }
.imp-cols span.h { opacity:.55; text-decoration:line-through; }
.imp-cols span.w { background:var(--warn-soft); color:var(--warn); }
.tpl-grid { display:grid; grid-template-columns:minmax(340px,1fr) auto; gap:18px; align-items:start; }
.tpl-form { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.tpl-form .full { grid-column:1 / -1; }
.tpl-form input, .tpl-form textarea, .tpl-form select { width:100%; }
.tpl-form .hint { font-size:11.5px; color:var(--muted); margin-top:3px; }
.tpl-prev { width:calc(210mm * .6); height:calc(297mm * .6); position:sticky; top:70px; }
.tpl-prev .scaler { transform:scale(.6); transform-origin:0 0; width:210mm; }
.tpl-prev .cert { box-shadow:0 8px 24px rgba(0,0,0,.5); }
.bands { display:grid; grid-template-columns:64px 1fr 1fr 1.3fr 1.6fr; gap:6px; align-items:center; font-size:12px; }
.bands input { width:100%; }
.chk { display:inline-flex !important; gap:6px; align-items:center; margin:0 14px 0 0 !important; color:var(--ink) !important; font-size:13px !important; }
@media (max-width:1100px) { .tpl-grid { grid-template-columns:1fr; } .tpl-prev { position:static; } }
.modal .chk input[type=checkbox] { width:auto; height:auto; }
.modal .chk input[type=number] { width:70px; }
.modal .chk select { width:auto; height:28px; }
.tpl-form .chk input[type=checkbox] { width:auto; height:auto; }
.brand .tlogo { height:28px; width:auto; max-width:120px; object-fit:contain; background:#fff; border-radius:7px; padding:2px 5px; }
.who select { height:28px; font-size:12px; padding:0 6px; }
.who a { font-size:12px; }