@charset "utf-8";
/* ═══════════════════════════════════════════════
   28 그린북 — 회계·정산 어드민
   컨셉: 그린 머니톤 장부형 / 아이콘 미니 사이드바 / 우측 요약 패널 / 분개 전표 폼
   ═══════════════════════════════════════════════ */
:root{
  --green:#1e7a4f;
  --green-deep:#155c3b;
  --green-bg:#e8f3ec;
  --bg:#f2f5f1;
  --card:#fff;
  --paper:#fbfaf4;
  --line:#dde7dd;
  --ink:#212a21;
  --dim:#74837a;
  --plus:#1e7a4f;
  --minus:#c2452f;
  --warn:#d97706;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.num{font-variant-numeric:tabular-nums}

/* ── 앱: 아이콘 미니 사이드바 ── */
.app{display:grid;grid-template-columns:78px 1fr;min-height:100vh}
.app>*{min-width:0}
.sb{background:var(--green-deep);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;position:sticky;top:0;height:100vh}
.sb .brand{width:46px;height:46px;border-radius:14px;background:#fff;color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;margin-bottom:14px}
.sn{width:52px;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(255,255,255,.62);font-size:9.5px;font-weight:700;transition:.15s}
.sn .ic{font-size:18px}
.sn:hover{background:rgba(255,255,255,.1);color:#fff}
.sn.is-act{background:#fff;color:var(--green-deep)}
.sb .foot{margin-top:auto}

/* ── 탑바 ── */
.tb{display:flex;align-items:center;gap:16px;padding:14px 26px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.tb .burger{display:none;font-size:20px}
.tb h1{font-size:18px;font-weight:900;letter-spacing:-.02em}
.tb .period{display:flex;align-items:center;gap:8px;background:var(--green-bg);border-radius:9px;padding:7px 14px;font-size:13px;font-weight:800;color:var(--green-deep)}
.tb .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb .bell{position:relative;font-size:17px}
.tb .bell i{position:absolute;top:-4px;right:-6px;background:var(--minus);color:#fff;font-size:9.5px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-style:normal}
.tb .me{display:flex;align-items:center;gap:9px}
.tb .me .av{width:32px;height:32px;border-radius:50%;background:var(--green-bg);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.tb .me span{font-size:13px;color:var(--dim)}

.content{padding:22px 26px 54px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.pg-head h2{font-size:20px;font-weight:900;letter-spacing:-.02em}
.pg-head .sub{font-size:13px;color:var(--dim);margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:800;transition:.15s}
.btn-gr{background:var(--green);color:#fff}
.btn-gr:hover{background:var(--green-deep)}
.btn-gh{border:1px solid var(--line);color:var(--dim);background:var(--card)}
.btn-gh:hover{color:var(--ink);border-color:var(--dim)}

/* 대시보드 3컬럼 (메인 2 + 우측 요약 1) */
.dash{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.dash>*{min-width:0}

/* KPI 장부 스트립 */
.ledger-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.lg-it{padding:18px 20px;border-right:1px solid var(--line)}
.lg-it:last-child{border-right:0}
.lg-it .lb{font-size:12px;color:var(--dim);font-weight:700}
.lg-it .v{font-size:22px;font-weight:900;margin-top:5px}
.lg-it .v.plus{color:var(--plus)}
.lg-it .v.minus{color:var(--minus)}
.lg-it .d{font-size:11.5px;color:var(--dim);margin-top:3px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px}
.panel h3{font-size:14.5px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.panel h3 .mr{font-size:12px;color:var(--dim);font-weight:600}
.chart-box{position:relative;height:260px}

/* 우측 요약 패널 */
.aside-col .panel{background:var(--paper)}
.cash{text-align:center;padding:8px 0 14px;border-bottom:1px dashed var(--line);margin-bottom:13px}
.cash .lb{font-size:12px;color:var(--dim);font-weight:700}
.cash .v{font-size:28px;font-weight:900;color:var(--green-deep);margin-top:4px}
.sched{display:grid;gap:10px}
.sc{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;font-size:13px}
.sc .d-day{background:var(--green-bg);color:var(--green-deep);border-radius:9px;text-align:center;font-size:11px;font-weight:900;padding:7px 0}
.sc .d-day.hot{background:#fdeaea;color:var(--minus)}
.sc b{font-weight:800;display:block;font-size:13px}
.sc span{font-size:11.5px;color:var(--dim)}
.sc .amt{font-weight:900;font-size:13px}

/* 장부 테이블 */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.tbl th{position:sticky;top:0;background:var(--green-bg);color:var(--green-deep);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-align:left;padding:10px 13px;border-bottom:1.5px solid var(--green);white-space:nowrap}
.tbl td{padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody tr:hover{background:var(--paper)}
.tbl .amt{text-align:right;font-weight:800}
.tbl th.amt{text-align:right}
.tbl .amt.plus{color:var(--plus)}
.tbl .amt.minus{color:var(--minus)}
.tbl input[type=checkbox]{accent-color:var(--green);width:15px;height:15px}
.bdg{display:inline-block;font-size:11px;font-weight:800;border-radius:6px;padding:3px 10px}
.bdg.ok{background:var(--green-bg);color:var(--green-deep)}
.bdg.wait{background:#fdf3e2;color:var(--warn)}
.bdg.issue{background:#e3eefc;color:#1d62c4}
.bdg.cancel{background:#fdeaea;color:var(--minus)}

/* 필터 */
.filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filter select,.filter input{background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:13px;padding:9px 12px;outline:0}
.filter .seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.filter .seg button{padding:9px 16px;font-size:13px;font-weight:700;color:var(--dim);background:var(--card)}
.filter .seg button.on{background:var(--green);color:#fff}
.filter .sp{flex:1}
.paging{display:flex;gap:6px;justify-content:center;margin-top:18px}
.paging a{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--dim);background:var(--card)}
.paging a.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:900}

/* ── 분개 전표 폼 ── */
.slip{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px}
.slip .slip-head{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
.fld label{display:block;font-size:12px;font-weight:800;color:var(--dim);margin-bottom:6px}
.fld label .req{color:var(--minus)}
.fld input,.fld select,.fld textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:13.5px;padding:10px 12px;outline:0;transition:.15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--green)}
.je-tbl{width:100%;border-collapse:collapse;font-size:13px}
.je-tbl th{background:var(--green-bg);color:var(--green-deep);font-size:11.5px;font-weight:800;padding:9px 12px;text-align:left;border:1px solid var(--line)}
.je-tbl td{border:1px solid var(--line);padding:5px}
.je-tbl td input,.je-tbl td select{width:100%;border:0;background:transparent;padding:7px 9px;font-size:13px;outline:0;color:var(--ink)}
.je-tbl td.amt-cell input{text-align:right;font-weight:800}
.je-tbl tfoot td{background:var(--paper);font-weight:900;padding:10px 12px}
.je-tbl tfoot .ok{color:var(--plus)}
.je-add{margin-top:10px;font-size:13px;font-weight:800;color:var(--green-deep)}
.form-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.balance-bar{display:flex;justify-content:space-between;align-items:center;background:var(--green-bg);border-radius:11px;padding:13px 18px;margin:14px 0;font-size:13.5px;font-weight:800;color:var(--green-deep)}
.balance-bar .num{font-size:16px}

/* ── LOGIN ── */
.login-bg{min-height:100vh;display:grid;place-items:center;background:
  linear-gradient(rgba(21,92,59,.92),rgba(21,92,59,.97)),
  repeating-linear-gradient(0deg,#1a6b45 0 2px,transparent 2px 26px);padding:24px}
.login-card{width:min(430px,100%);background:var(--paper);border-radius:18px;padding:42px 40px;box-shadow:0 34px 80px rgba(0,0,0,.35)}
.login-card .brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:22px}
.login-card .brand .bx{width:42px;height:42px;border-radius:13px;background:var(--green-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}
.login-card .brand b{font-size:19px;font-weight:900}
.login-card .brand small{display:block;font-size:10px;color:var(--dim);letter-spacing:.22em;font-weight:700}
.login-card h2{font-size:19px;font-weight:900;text-align:center}
.login-card .ds{font-size:13px;color:var(--dim);text-align:center;margin:5px 0 22px}
.login-card .fld{margin-bottom:14px}
.login-card .btn{width:100%;justify-content:center;padding:13px;margin-top:4px}
.login-card .etc{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-top:15px}
.login-card .etc a:hover{color:var(--green)}
.login-card .demo{margin-top:20px;background:var(--green-bg);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--dim)}
.login-card .demo b{color:var(--green-deep)}

/* ── 반응형 ── */
@media (max-width:1180px){
  .dash{grid-template-columns:1fr}
  .ledger-strip{grid-template-columns:1fr 1fr}
  .lg-it{border-bottom:1px solid var(--line)}
}
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .25s ease}
  .sb.open{transform:none;box-shadow:14px 0 40px rgba(0,0,0,.4)}
  .tb .burger{display:block}
  .tb .period{display:none}
  .content{padding:16px 14px 44px}
  .slip .slip-head{grid-template-columns:1fr 1fr}
  .je-tbl{min-width:560px}
  .slip .tbl-scroll{overflow-x:auto}
}
@media (max-width:540px){
  .ledger-strip{grid-template-columns:1fr}
  .slip .slip-head{grid-template-columns:1fr}
}