:root{
    --bg:#0d0d0f; --surface:#161619; --surface2:#1e1e23; --surface3:#26262c;
    --border:#2f2f37; --border2:#3b3b45;
    --text:#f3f3f5; --muted:#9a9aa3; --faint:#6d6d76;
    --red:#e5231b; --red-hi:#ff4237; --red-dim:#3a1310;
    --yellow:#f5c518; --yellow-dim:#3a3211;
    --green:#37c26b; --green-dim:#123021;
    --radius:12px;
    --mono:"Consolas","SF Mono",ui-monospace,monospace;
    --sans:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}
  input,select{font-family:inherit}

  /* ---------- LOGIN ---------- */
  #gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg)}
  .gate-card{width:340px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 28px;text-align:center}
  .gate-card h1{font-size:19px;letter-spacing:-.5px;margin-bottom:6px}
  .gate-card p{color:var(--muted);font-size:13px;margin-bottom:22px}
  .gate-card input{width:100%;height:46px;text-align:center;font-size:20px;letter-spacing:6px;background:var(--surface2);
    border:1px solid var(--border2);border-radius:10px;color:var(--text);margin-bottom:14px}
  .gate-card input:focus{outline:none;border-color:var(--red)}
  .gate-card button{width:100%;height:46px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700}
  .gate-card button:hover{background:var(--red-hi)}
  .gate-err{color:var(--red-hi);font-size:12.5px;height:16px;margin-bottom:8px}
  .shake{animation:shake .32s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

  /* ---------- APP SHELL ---------- */
  #app{display:none;max-width:1220px;margin:0 auto;padding:22px 26px 60px}
  header.top{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
  .brand{display:flex;align-items:baseline;gap:9px}
  .brand .logo{width:11px;height:22px;background:var(--red);border-radius:2px;transform:skewX(-8deg)}
  .brand h1{font-size:20px;letter-spacing:-.6px}
  .brand span{color:var(--faint);font-size:12px}
  .top .spacer{flex:1}
  select#month{height:38px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);
    border-radius:9px;padding:0 12px;font-size:14px;min-width:96px}
  .search{position:relative}
  .search input{height:38px;width:190px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);
    border-radius:9px;padding:0 12px 0 34px;font-size:14px}
  .search input:focus{outline:none;border-color:var(--red)}
  .search svg{position:absolute;left:11px;top:11px;color:var(--faint)}
  .btn{height:38px;padding:0 15px;border-radius:9px;font-size:13.5px;font-weight:600;border:1px solid var(--border2);
    background:var(--surface2);color:var(--text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .btn:hover{border-color:var(--faint)}
  .btn.primary{background:var(--red);border-color:var(--red);color:#fff}
  .btn.primary:hover{background:var(--red-hi);border-color:var(--red-hi)}
  .btn.ghost{background:transparent}

  /* ---------- KPI ---------- */
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px}
  .kpi .lab{color:var(--muted);font-size:12px;margin-bottom:9px;display:flex;align-items:center;gap:6px}
  .kpi .val{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1}
  .kpi .sub{color:var(--faint);font-size:11.5px;margin-top:7px}
  .kpi .tick{width:6px;height:6px;border-radius:50%;background:var(--faint)}
  .kpi.accent .val{color:var(--yellow)}
  .kpi.neg .val{color:var(--red-hi)}
  .kpi.pos .val{color:var(--green)}
  .kpi.warn{border-color:var(--red-dim)}
  .kpi.warn .tick{background:var(--red-hi)}

  /* ---------- TABLE ---------- */
  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
  .panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
  .panel-head h2{font-size:15px;letter-spacing:-.3px}
  .panel-head .count{color:var(--faint);font-size:12.5px;font-weight:400;margin-left:8px}
  table{width:100%;border-collapse:collapse}
  thead th{background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;text-align:left;
    padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
  thead th.num{text-align:right}
  thead th.ctr{text-align:center}
  tbody td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--surface2)}
  td.num{text-align:right;font-family:var(--mono);letter-spacing:-.3px}
  td.ctr{text-align:center}
  td.name{font-weight:600}
  .rem-pos{color:var(--yellow)}
  .rem-zero{color:var(--faint)}
  .mgr{color:var(--muted);font-size:12.5px;white-space:nowrap}
  .paylist{display:flex;flex-wrap:wrap;gap:4px;max-width:230px}
  .paychip{background:var(--surface3);border:1px solid var(--border2);border-radius:6px;padding:2px 7px;font-size:11px;
    font-family:var(--mono);color:var(--muted);white-space:nowrap}
  .paychip b{color:var(--text);font-weight:600}

  .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
  .badge.done{background:var(--green-dim);color:var(--green)}
  .badge.run{background:var(--yellow-dim);color:var(--yellow)}
  .badge.over{background:var(--red-dim);color:var(--red-hi)}

  .rowbtns{display:flex;gap:6px;justify-content:flex-end}
  .mini{height:30px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:600;border:1px solid var(--border2);
    background:var(--surface2);color:var(--text)}
  .mini:hover{border-color:var(--faint)}
  .mini.pay{border-color:var(--red);color:var(--red-hi)}
  .mini.pay:hover{background:var(--red);color:#fff}
  .mini.done{border-color:var(--green);color:var(--green)}
  .mini.done:hover{background:var(--green);color:#06210f}
  .mini.x{color:var(--faint);padding:0 9px}
  .mini.x:hover{border-color:var(--red);color:var(--red-hi)}

  .empty{padding:46px 20px;text-align:center;color:var(--faint);font-size:13.5px}

  /* ---------- EXPENSES ---------- */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .exp-add{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--border)}
  .exp-add input{height:36px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:0 11px;font-size:13.5px}
  .exp-add input.lab{flex:1}
  .exp-add input.amt{width:110px;text-align:right;font-family:var(--mono)}
  .sum-row td{font-weight:700;background:var(--surface2)}

  /* ---------- MODAL ---------- */
  .modal-bg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:20px}
  .modal-bg.on{display:flex}
  .modal{width:420px;max-width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:16px;overflow:hidden}
  .modal h3{font-size:16px;padding:18px 20px;border-bottom:1px solid var(--border)}
  .modal .body{padding:18px 20px}
  .field{margin-bottom:14px}
  .field label{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
  .field input,.field select{width:100%;height:42px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);
    border-radius:9px;padding:0 12px;font-size:14px}
  .field input:focus,.field select:focus{outline:none;border-color:var(--red)}
  .field .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .field.mono input{font-family:var(--mono)}
  .hint{color:var(--faint);font-size:11.5px;margin-top:5px}
  .seg{display:flex;border:1px solid var(--border2);border-radius:9px;overflow:hidden}
  .seg button{flex:1;background:var(--surface2);color:var(--muted);border:none;border-right:1px solid var(--border2);
    padding:10px 6px;font-size:13px;font-weight:600;min-height:42px}
  .seg button:last-child{border-right:none}
  .seg button.on{background:var(--red);color:#fff}
  .modal .foot{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border);justify-content:flex-end}
  .modal .foot .btn{height:42px;padding:0 20px}
  .pay-hist{margin-top:4px;max-height:150px;overflow:auto}
  .pay-hist .ph{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);
    border-radius:8px;margin-bottom:6px;font-size:13px}
  .pay-hist .ph .d{font-family:var(--mono);color:var(--muted)}
  .pay-hist .ph .a{font-family:var(--mono);font-weight:700}
  .pay-hist .ph button{background:none;border:none;color:var(--faint);font-size:15px}
  .pay-hist .ph button:hover{color:var(--red-hi)}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:120;
    background:var(--surface3);border:1px solid var(--border2);color:var(--text);padding:11px 20px;border-radius:10px;
    font-size:13.5px;opacity:0;transition:.22s;pointer-events:none}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---------- TABS ---------- */
  .tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border)}
  .tab{padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--muted);background:none;border:none;
    border-bottom:2px solid transparent;margin-bottom:-1px}
  .tab.on{color:var(--text);border-bottom-color:var(--red)}
  .tab:hover{color:var(--text)}
  .tab .n{display:inline-block;min-width:20px;padding:0 6px;margin-left:7px;border-radius:10px;background:var(--surface3);
    font-size:11.5px;color:var(--muted);font-weight:700}
  .tab.on .n{background:var(--red);color:#fff}

  /* ---------- DAY NAV ---------- */
  .day-nav{display:flex;align-items:center;gap:8px;margin-bottom:18px}
  .day-nav input[type=date]{height:38px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);
    border-radius:9px;padding:0 12px;font-size:14px;font-family:var(--mono)}
  .day-nav .arrow{width:38px;height:38px;border-radius:9px;border:1px solid var(--border2);background:var(--surface2);
    color:var(--text);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
  .day-nav .arrow:hover{border-color:var(--faint)}
  .day-nav .dl{color:var(--muted);font-size:13px;margin-left:6px}
  #todayKpis{grid-template-columns:repeat(4,1fr)}

  /* ---------- MANAGER GROUP ---------- */
  #mgrGroups .panel{margin-bottom:16px}
  .mgr-stat{font-size:12.5px;color:var(--muted)}
  .mgr-stat b{color:var(--text);font-family:var(--mono)}
  .mgr-stat b.red{color:var(--red-hi)}
  .progwrap .d{font-size:12px;color:var(--muted);font-family:var(--mono)}
  .prog{height:6px;background:var(--surface3);border-radius:4px;overflow:hidden;margin-top:5px;width:150px;max-width:100%}
  .prog i{display:block;height:100%;background:var(--yellow)}
  .prog i.done{background:var(--green)}
  .day-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12.5px;font-weight:700}
  .day-badge.paid{color:var(--green)}
  .day-badge.miss{color:var(--red-hi)}

  /* ---------- USER / ACCOUNTS ---------- */
  .me-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);padding:0 2px;white-space:nowrap}
  .me-chip b{color:var(--text)}
  .role{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;background:var(--surface3);color:var(--muted)}
  .role.sup{background:var(--red-dim);color:var(--red-hi)}
  .urow{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
  .urow .ui b{font-size:14px}
  .urow .ui .uid{color:var(--faint);font-size:12px;font-family:var(--mono)}
  .urow .ua{display:flex;gap:6px}
  .acct-add{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
  .gate-card .grow{margin-bottom:12px;text-align:left}
  .gate-card .grow label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
  .gate-card .grow input{width:100%;height:44px;text-align:left;font-size:15px;letter-spacing:normal;
    background:var(--surface2);border:1px solid var(--border2);border-radius:10px;color:var(--text);padding:0 12px;margin:0}
  .gate-card .grow input:focus{outline:none;border-color:var(--red)}

  @media(max-width:1080px){.kpis{grid-template-columns:repeat(3,1fr)}.two-col{grid-template-columns:1fr}
    #todayKpis{grid-template-columns:repeat(2,1fr)}}
  /* desktop overflow menu = plain inline buttons */
  .hdr-menu{display:contents}
  .menu-toggle{display:none}
  .actions{display:contents}
  .modal-wide{width:480px}
  :focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}

  /* ---------- MOBILE (<=640px) ---------- */
  @media(max-width:640px){
    body{font-size:15px}
    input,select,textarea{font-size:16px}
    #app{padding:14px 0 84px}
    header.top{padding:0 12px;gap:8px}
    .brand h1{font-size:18px}
    .brand span{display:none}
    .me-chip{font-size:12px;margin-left:auto}
    .search{flex:1 1 100%;order:5}
    .search input{width:100%}
    select#month{flex:1 1 auto;height:44px;order:6}
    #addLoanBtn{flex:1 1 auto;justify-content:center;height:46px;order:7}
    .hdr-menu{display:block;position:relative;order:4}
    .menu-toggle{display:inline-flex;height:44px;width:46px;justify-content:center;align-items:center;font-size:22px;padding:0}
    .actions{display:none;position:absolute;right:0;top:52px;flex-direction:column;background:var(--surface2);
      border:1px solid var(--border2);border-radius:12px;padding:8px;z-index:40;min-width:168px;box-shadow:0 12px 34px rgba(0,0,0,.6)}
    .actions.open{display:flex}
    .actions .btn{width:100%;justify-content:flex-start;height:48px}

    .tabs{padding:0 12px;margin-bottom:16px}
    .tab{flex:1;text-align:center;padding:13px 8px;min-height:48px}
    .day-nav{padding:0 12px;flex-wrap:wrap}
    .day-nav input[type=date]{flex:1;height:46px}
    .day-nav .arrow{width:46px;height:46px}
    .day-nav .btn{height:46px}
    .day-nav .dl{flex:1 1 100%;order:5;margin:2px 2px 0}
    #todayKpis,.kpis{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px}
    .kpi .val{font-size:20px}

    .panel{border-radius:0;border-left:none;border-right:none;margin-bottom:16px}
    .panel-head{padding:13px 14px;flex-wrap:wrap;gap:4px}

    /* tables -> cards */
    #loanTable thead,#mgrGroups thead{display:none}
    #loanBody tr,#mgrGroups tbody tr{display:block;margin:10px 12px;border:1px solid var(--border2);
      border-radius:12px;background:var(--surface2);overflow:hidden}
    #loanBody td,#mgrGroups tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:11px 14px;border:none;border-top:1px solid var(--border);text-align:right;width:auto;white-space:normal}
    #loanBody td[data-label]:not([data-label=""])::before,
    #mgrGroups tbody td[data-label]:not([data-label=""])::before{content:attr(data-label);color:var(--muted);
      font-size:12.5px;font-weight:600;text-align:left;white-space:nowrap;flex:0 0 auto}
    #loanBody td.name,#mgrGroups tbody td.name{justify-content:flex-start;font-size:16px;font-weight:700;
      background:var(--surface3);border-top:none;padding:12px 14px}
    #loanBody td.name::before,#mgrGroups tbody td.name::before{content:none}
    .paylist{justify-content:flex-end;max-width:none}
    .progwrap{width:auto;align-items:flex-end;display:flex;flex-direction:column;gap:4px}
    .prog{width:160px;max-width:52vw}
    td.actcell{padding:12px 14px}
    td.actcell .rowbtns{width:100%;gap:8px;justify-content:stretch}
    td.actcell .rowbtns .mini{flex:1;height:48px;font-size:14px}
    td.empty{display:block;text-align:center}
    td.empty::before{content:none}

    .two-col{gap:16px}
    .exp-add{flex-wrap:wrap}
    .exp-add input.lab{flex:1 1 100%}
    .exp-add input.amt{flex:1;text-align:right}
    .exp-add .btn{height:46px}

    /* bottom-sheet modals */
    .modal-bg{align-items:flex-end;padding:0}
    .modal,.modal-wide{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto}
    .field input,.field select{height:48px}
    .modal .foot .btn{height:48px}
    .mini{min-height:40px}
  }

/* ================= SERVER-VERSION ADDITIONS ================= */
/* 사고자 blink */
@keyframes sagoBlink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes sagoBg{0%,100%{background:var(--surface)}50%{background:var(--red-dim)}}
.badge.sago{background:var(--red);color:#fff}
tr.is-sago td.name,#loanBody tr.is-sago td.name,#mgrGroups tbody tr.is-sago td.name{animation:sagoBg 1s infinite}
.blink{animation:sagoBlink 1s infinite}
.mini.sago{border-color:var(--red-hi);color:var(--red-hi)}
.mini.sago:hover{background:var(--red-hi);color:#fff}
.mini.sago.on{background:var(--red);color:#fff;border-color:var(--red)}

/* customer sub (phone/memo for 동명이인) */
.cust-sub{color:var(--faint);font-size:11.5px;font-weight:400;font-family:var(--mono);margin-top:2px}
td.name .cust-sub{white-space:nowrap}

/* filter bar */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:0 2px}
.filterbar select{height:38px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:9px;padding:0 12px;font-size:13.5px}
.filterbar .fclear{height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:13px}
.filterbar .fclear:hover{color:var(--text);border-color:var(--faint)}
.filterbar .flabel{color:var(--faint);font-size:12.5px}

/* KPI clickable */
.kpi.click{cursor:pointer;transition:border-color .15s,transform .05s}
.kpi.click:hover{border-color:var(--faint)}
.kpi.click:active{transform:translateY(1px)}
.kpi.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}

/* drilldown list */
.drill{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px;overflow:hidden}
.drill-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border)}
.drill-head h3{font-size:14.5px}
.drill-head .x{background:none;border:none;color:var(--faint);font-size:18px;cursor:pointer}
.drill-head .x:hover{color:var(--red-hi)}
.drill .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13.5px}
.drill .row:last-child{border-bottom:none}
.drill .row .who{color:var(--muted);font-size:12px}
.drill .amt{font-family:var(--mono);font-weight:700}

/* incident (사고) modal note */
#sagoModal .field textarea{width:100%;min-height:90px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:9px;padding:10px 12px;font-size:14px;font-family:var(--sans);resize:vertical}
#sagoModal .field textarea:focus{outline:none;border-color:var(--red)}

/* branch chips in account modal */
.branch-list{margin-bottom:16px}
.bchip{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
.bchip .bn{font-weight:600}
.bchip .bmgr{color:var(--faint);font-size:12px}

/* ===== MOBILE touch-target refinements (accessibility-review) ===== */
@media(max-width:640px){
  .filterbar{padding:0 12px;gap:8px}
  .filterbar .flabel{flex:1 1 100%;margin-bottom:-2px}
  .filterbar select{flex:1;height:44px;font-size:15px}
  .filterbar .fclear{height:44px;padding:0 14px}
  .bchip select.bmgrsel{height:40px !important;font-size:13px !important}
  .bchip .mini.x{min-height:40px;min-width:40px}
  .drill .row{padding:13px 16px}
  .drill-head{padding:14px 16px}
  .drill-head .x{padding:6px 4px}
  #u_mgr{width:20px;height:20px}
  .acct-add label input[type=checkbox]{width:20px;height:20px}
}