:root{
  --ink:#1d2230; --muted:#5f6778; --line:#e3e5ea; --line2:#eef0f3; --bg:#f6f6f3; --card:#fff;
  --accent:#2c5a8c; --accent-d:#244b76; --accent-soft:#e7eef7; --accent-ink:#1d3d6b;
  --ok:#2f7d55; --ok-soft:#e8f4ee; --warn:#8a5a0a; --warn-soft:#fdf1d6; --bad:#9a3a1c; --bad-soft:#fdecea; --red:#d4462f;
  --cls-bg:#e1ecfb; --cls-bd:#3b6db3; --cls-tx:#1d3d6b; --cln-bg:#fdf1d6; --cln-bd:#c08a17; --cln-tx:#6b4a07;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:17px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)} a:hover{color:var(--accent-d)}
h1{font-size:28px;margin:0;font-weight:700}
h2{font-size:19px;margin:0;font-weight:700}
h3{font-size:17px;margin:0;font-weight:700}
.muted{color:var(--muted)} .small{font-size:15px} .xs{font-size:14px}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right} .nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 레이아웃 */
.app{min-height:100vh;display:flex;flex-wrap:wrap}
.side{flex:1 1 220px;max-width:100%;background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.side .brand{padding:0 12px 18px}
.side .brand b{display:block;font-size:21px}
.side .brand span{font-size:14.5px;color:var(--muted)}
.side a.nav{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:8px;color:var(--ink);text-decoration:none;min-height:44px}
.side a.nav:hover{background:var(--line2)}
.side a.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.side .badge{font-size:14px;background:var(--red);color:#fff;border-radius:10px;padding:0 8px;line-height:22px;font-weight:500}
.side .me{margin-top:auto;padding:16px 12px 0;border-top:1px solid var(--line2);font-size:15px;color:var(--muted)}
.side .me b{color:var(--ink);font-weight:500}
.side .demo{margin:8px 4px 0;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--cln-tx);font-size:14px}
.main{flex:999 1 560px;min-width:0;padding:28px 32px 60px}
.page{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-h .sub{font-size:15.5px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.grid2,.grid3{grid-template-columns:1fr}.main{padding:20px 16px 60px}}
@media (max-width:520px){.grid4{grid-template-columns:1fr}}
@media (max-width:780px){.side{flex-basis:100%;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line);padding:12px}.side .brand{width:100%;padding:0 8px 8px}.side .me{width:100%;margin-top:6px}}

/* 카드 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.card-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.kpi .lab{font-size:15.5px;color:var(--muted)}
.kpi .val{font-size:34px;font-weight:700;line-height:1.25}
.kpi .val small{font-size:17px;font-weight:500;color:var(--muted)}
.kpi .foot{font-size:15px;color:var(--muted)}
.rev{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.rev .hero{flex:1 1 340px;background:var(--accent-soft);border-radius:10px;padding:22px 26px;color:var(--accent-ink);display:flex;flex-direction:column;justify-content:center;gap:4px}
.rev .hero .val{font-size:52px;font-weight:700;line-height:1.15}
.rev .hero .val small{font-size:22px;font-weight:500}
.rev .rest{flex:2 1 420px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;align-content:center}
.rev .rest .val{font-size:22px;font-weight:700}
.rev .rest .val small{font-size:15px;font-weight:500;color:var(--muted)}
.methods{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--muted);padding-top:12px;margin-top:16px;border-top:1px solid var(--line2)}
.methods b{color:var(--ink);font-weight:500}

/* 버튼·입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:8px;min-height:44px;padding:0 18px;cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:#c5c9d2}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-d)}
.btn.outline{border-color:var(--accent);color:var(--accent)}
.btn.danger{color:var(--bad)}
.btn.danger-solid{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{min-height:36px;padding:0 13px;font-size:15.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{border:none;background:none;cursor:pointer;font-size:26px;line-height:1;color:var(--muted);width:44px;height:44px;border-radius:8px}
.icon-btn:hover{background:var(--line2)}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;min-height:38px;padding:0 15px;cursor:pointer;font-size:15.5px}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=datetime-local],input[type=password],input[type=tel],select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;min-height:44px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
:focus-visible{outline:3px solid #8db3e2;outline-offset:2px}
textarea{min-height:90px;resize:vertical}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field .lab{font-size:15px;color:var(--muted)}
.field .hint{font-size:14px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.check{display:inline-flex;gap:8px;align-items:center;cursor:pointer;min-height:36px}
.days{display:flex;gap:4px;flex-wrap:wrap}
.days label{cursor:pointer}.days input{position:absolute;opacity:0;width:1px;height:1px}
.days span{display:inline-block;width:42px;height:42px;line-height:40px;text-align:center;border:1px solid var(--line);border-radius:8px;background:#fff;user-select:none}
.days input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.days input:focus-visible+span{outline:3px solid #8db3e2}

/* 칩 */
.chip{display:inline-block;font-size:14px;padding:1px 10px;border-radius:999px;white-space:nowrap;line-height:1.6}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.info{background:var(--accent-soft);color:var(--accent)}
.chip.warn{background:var(--warn-soft);color:var(--cln-tx)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.mute{background:var(--line2);color:var(--muted)}
.chip.line{border:1px solid var(--line);color:var(--muted);background:#fff}

/* 표 */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:16px}
table.t th{text-align:left;padding:9px 8px;color:var(--muted);font-weight:500;font-size:15px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:#fafbfc}
table.t td.act{white-space:nowrap;text-align:right}
table.t th.right,table.t td.right{text-align:right}
table.t tfoot td{font-weight:700;border-bottom:none}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:none;background:none;padding:12px 18px;color:var(--muted);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;min-height:44px}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);background:#fff;border-radius:8px 8px 0 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters input[type=search]{max-width:260px}
.filters select{width:auto;min-width:140px}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.notice{border-radius:10px;padding:12px 16px;font-size:15.5px}
.notice.warn{background:var(--warn-soft);color:var(--cln-tx)}
.notice.bad{background:var(--bad-soft);color:#7a2416;border:1px solid #f3c2ba}
.notice.info{background:var(--accent-soft);color:var(--accent-ink)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:16px}
.list li:last-child{border-bottom:none}
.list .when{color:var(--muted);flex:none;width:96px}
.lesson{display:flex;gap:14px;align-items:center;padding:10px 12px;border-radius:8px;background:var(--cls-bg);box-shadow:inset 3px 0 0 var(--cls-bd);color:var(--cls-tx)}
.lesson.cln{background:var(--cln-bg);box-shadow:inset 3px 0 0 var(--cln-bd);color:var(--cln-tx)}
.lesson b{width:110px;flex:none}
.box-line{border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.box-dash{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;color:var(--muted)}

/* 팝업 */
.modal-wrap{position:fixed;inset:0;background:rgba(20,24,33,.4);display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto}
.modal{background:#fff;border-radius:12px;width:100%;max-width:620px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal.wide{max-width:960px}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 6px 22px}
.modal-h h3{font-size:21px}
.modal-b{padding:8px 22px 20px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line2)}
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.2);transition:opacity .4s}
.toast.err{background:var(--bad)} .toast.out{opacity:0}

/* 로그인 */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:100%;max-width:420px;padding:32px}

/* 시간표 시트 (기존 프로그램 디자인 그대로) */
.sheet-wrap{overflow:auto;background:#e9eaee;border-radius:var(--radius);padding:16px;border:1px solid var(--line)}
.sheet{background:#fff;padding:22px 24px 18px;margin:0 auto;color:#1b1f2a}
.sheet .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sheet .ttl{font-size:28px;font-weight:700}
.sheet .sub{font-size:15.5px;color:#5c6272;margin-top:2px}
.legend{display:flex;gap:12px;font-size:15.5px;color:#4b5161;align-items:center}
.legend i{display:inline-block;width:18px;height:13px;border-radius:2px;margin-right:4px;vertical-align:-1px;border-left:3px solid}
table.st{border-collapse:collapse;table-layout:fixed;width:100%}
table.st th,table.st td{border:1px solid #d6d9e0;text-align:center;padding:4px;vertical-align:middle}
table.st thead th.dayh{background:#2b3a55;color:#fff;font-size:18px;padding:8px 3px}
table.st thead th.dayh.we{background:#4d3f6e}
table.st thead th.stf{background:#f0f2f6;font-size:16px;font-weight:700;padding:4px 2px;line-height:1.25;word-break:keep-all}
table.st thead th.stf small{display:block;font-weight:500;color:#8a6111;font-size:13.5px}
table.st th.tc{width:70px;background:#f7f8fa;font-size:15.5px;font-weight:500;color:#4b5161}
table.st td{height:58px;font-size:15.5px;line-height:1.25}
table.st .ds{border-left:2px solid #7d8597}
table.st td.b{cursor:pointer;word-break:keep-all}
table.st td.cls{background:var(--cls-bg);color:var(--cls-tx);box-shadow:inset 3px 0 0 var(--cls-bd)}
table.st td.cln{background:var(--cln-bg);color:var(--cln-tx);box-shadow:inset 3px 0 0 var(--cln-bd)}
table.st td.cls .nm{font-weight:700;font-size:16.5px}
table.st td.cls .tm{font-size:14px;opacity:.85}
table.st td.cln .lb{font-weight:700;font-size:14.5px}
table.st td.cln .sm{font-size:13.5px}
table.st td.cf{background:#fde4df!important;color:#8a1f0e!important;box-shadow:inset 0 0 0 2px var(--red)!important}
table.st td.multi{padding:2px;background:#fde4df;box-shadow:inset 0 0 0 2px var(--red)}
table.st td.multi div{font-size:13.5px;line-height:1.2;padding:1px 2px;color:#8a1f0e;font-weight:700}
.sheet .foot{margin-top:8px;font-size:14px;color:#6b7180;display:flex;justify-content:space-between}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rcard{border:1px solid #d6d9e0;border-top:5px solid var(--cls-bd);border-radius:8px;padding:14px 16px}
.rcard h4{margin:0;font-size:19px;display:flex;justify-content:space-between;gap:6px}
.rcard h4 span:last-child{font-size:15.5px;color:#5c6272;font-weight:500}
.rcard .meta{font-size:14.5px;color:#5c6272;margin:3px 0 7px}
.rcard ol{margin:0;padding-left:24px;font-size:16.5px;columns:2;column-gap:10px}
.rcard ol.one{columns:1}
.rcard li small{color:#6b7180;margin-left:4px;font-size:14px}

/* 청구서 이미지 */
.invoice-img{width:640px;background:#fff;color:#1d2230;font-family:"Noto Sans KR",sans-serif}
.invoice-img .top{background:#2b3a55;color:#fff;padding:32px 40px 28px}
.invoice-img .top div:first-child{font-size:17px;opacity:.85}
.invoice-img .top div:last-child{font-size:32px;font-weight:700}
.invoice-img .bd{padding:28px 40px 30px;display:flex;flex-direction:column;gap:20px}
.invoice-img table{width:100%;border-collapse:collapse;font-size:18px}
.invoice-img td{padding:12px 0;border-bottom:1px solid #eef0f3}
.invoice-img .sum{background:#e7eef7;border-radius:10px;padding:20px 24px;display:flex;justify-content:space-between;align-items:baseline;color:#1d3d6b}
.invoice-img .sum b{font-size:32px}
.invoice-img .info{display:flex;flex-direction:column;gap:8px;font-size:17px}
.invoice-img .info div{display:flex;gap:16px}
.invoice-img .info span:first-child{color:#5c6272;width:84px;flex:none}
.invoice-img .ft{border-top:1px solid #e3e5ea;padding-top:16px;font-size:15px;color:#5c6272;display:flex;justify-content:space-between}

@media print{.side,.no-print{display:none!important}.main{padding:0}}