:root{
  --bg:#f4f6fa; --panel:#fff; --line:#e3e8ef; --text:#1d2733; --muted:#69788c;
  --brand:#0b4ea2; --brand2:#1d6fd4; --accent:#e8f1fc; --danger:#d33; --ok:#1a9c5d;
  --side:#122238; --side2:#0d1a2b;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif; background:var(--bg); color:var(--text); font-size:14px}
.hidden{display:none!important}

/* 로그인 */
.login-overlay{position:fixed; inset:0; background:linear-gradient(135deg,#122238,#0b4ea2); display:flex; align-items:center; justify-content:center; z-index:100}
.login-box{background:#fff; padding:40px 36px; border-radius:14px; width:340px; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center}
.login-box h1{color:var(--brand); letter-spacing:2px; font-size:26px}
.login-box .sub{color:var(--muted); margin:6px 0 22px}
.login-box input{width:100%; padding:12px; margin-bottom:10px; border:1px solid var(--line); border-radius:8px; font-size:15px}
.login-box button{width:100%; padding:12px; background:var(--brand); color:#fff; border:0; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer}
.err{color:var(--danger); margin-top:10px; min-height:18px; font-size:13px}

/* 레이아웃 */
.app{display:flex; min-height:100vh}
.sidebar{width:210px; background:var(--side); color:#cfe0f5; display:flex; flex-direction:column; position:fixed; top:0; bottom:0}
.logo{padding:22px 18px 16px; font-size:19px; font-weight:800; color:#fff; letter-spacing:1px}
.logo span{color:#6db3ff}
.logo small{display:block; font-size:11px; color:#8fa9c9; font-weight:400; margin-top:3px}
#menu{flex:1; overflow-y:auto}
#menu a{display:block; padding:12px 18px; cursor:pointer; color:#cfe0f5; border-left:3px solid transparent; user-select:none}
#menu a:hover{background:var(--side2)}
#menu a.active{background:var(--side2); border-left-color:#6db3ff; color:#fff; font-weight:700}
.side-bottom{padding:14px 18px; border-top:1px solid #23374f; font-size:12px}
.side-bottom #whoami{margin-bottom:8px; color:#8fa9c9}
main{flex:1; margin-left:210px; padding:24px 28px}
h2{font-size:22px; margin-bottom:16px}
h2 small{color:var(--muted); font-size:13px; font-weight:400}
h3{font-size:15px; margin-bottom:10px; color:var(--brand)}

/* 패널/카드 */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid2 .panel{margin-bottom:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.card .k{color:var(--muted); font-size:12px; margin-bottom:6px}
.card .v{font-size:20px; font-weight:800}
.card .v.blue{color:var(--brand)} .card .v.red{color:var(--danger)} .card .v.green{color:var(--ok)}

/* 폼 */
.row{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.row.right{justify-content:flex-end}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-bottom:10px}
.form-grid label{display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px}
.form-grid label.span2{grid-column:span 2}
input,select{padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; background:#fff; font-family:inherit}
input:focus,select:focus{outline:2px solid #bcd7f7}
.chk{display:flex; gap:6px; align-items:center; font-size:13px; color:var(--muted)}
.btn{background:var(--brand); color:#fff; border:0; border-radius:7px; padding:9px 16px; font-size:14px; cursor:pointer; font-weight:600; font-family:inherit}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:#fff; color:var(--brand); border:1px solid var(--brand)}
.btn.sm{padding:6px 10px; font-size:12px}
.btn.big{width:100%; padding:14px; font-size:16px; margin-top:10px}
.btn.danger{background:var(--danger)}
.badge{background:var(--accent); color:var(--brand); font-size:11px; padding:3px 8px; border-radius:10px; font-weight:700}
.msg{font-size:13px; color:var(--ok); min-height:16px}
.msg.error{color:var(--danger)}

/* 테이블 */
.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{background:#f0f4f9; color:#41546e; text-align:left; padding:8px 10px; white-space:nowrap; border-bottom:2px solid var(--line)}
td{padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody tr:hover{background:#f7fafd; cursor:pointer}
td.r,th.r{text-align:right}
.pill{display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:700}
.pill.blue{background:#e8f1fc; color:#0b4ea2} .pill.green{background:#e5f7ee; color:#137a48}
.pill.red{background:#fdeaea; color:#c22} .pill.gray{background:#eef1f5; color:#5a6b80}
.pill.orange{background:#fff3e0; color:#c77700}

/* 계산박스 */
.calc-box{font-size:14px}
.calc-box .cr{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line)}
.calc-box .cr.total{font-size:17px; font-weight:800; color:var(--danger)}
.calc-box .cr.paid{color:var(--ok); font-weight:700}

/* 자동완성 */
.suggest{border:1px solid var(--line); border-radius:8px; max-height:200px; overflow-y:auto; margin-bottom:8px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08)}
.suggest div{padding:8px 12px; cursor:pointer; border-bottom:1px solid #f0f3f7; font-size:13px}
.suggest div:hover{background:var(--accent)}

/* 모달 */
.modal-wrap{position:fixed; inset:0; background:rgba(10,20,35,.5); display:flex; align-items:center; justify-content:center; z-index:90}
.modal{background:#fff; border-radius:12px; padding:22px; width:min(560px,94vw); max-height:88vh; overflow-y:auto; box-shadow:0 24px 70px rgba(0,0,0,.3)}
.modal h3{margin-bottom:14px; font-size:17px}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .sidebar{width:64px}
  .logo{font-size:11px; padding:14px 6px}
  #menu a{padding:12px 8px; font-size:18px; text-align:center}
  main{margin-left:64px; padding:14px}
  .side-bottom{display:none}
}

/* 전역 로딩바 & 토스트 (v1.2) */
#loadbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,#0b4ea2,#6db3ff,#0b4ea2);background-size:200% 100%;transition:opacity .2s}
#loadbar.on{opacity:1;animation:loadmove 1s linear infinite}
@keyframes loadmove{from{background-position:0 0}to{background-position:200% 0}}
.toast{position:fixed;top:14px;right:14px;z-index:210;background:#c22;color:#fff;padding:11px 18px;
  border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-width:70vw;animation:toastin .25s ease}
.toast.ok{background:#137a48}
.toast + .toast{margin-top:46px}
@keyframes toastin{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}