:root{--brand:#4B4948;--brand-red:#D6000F;--accent:#4B4948;--accent-soft:#ECECEB;--on-accent:#FFFFFF;
--bg:#F3F3F2;--surface:#FFFFFF;--border:#BFC0C0;--text:#1F1E1D;--text-2:#4B4948;--text-3:#6B6968}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,"Malgun Gothic",sans-serif;
overflow-x:hidden;padding-bottom:4.5rem}
.top{position:sticky;top:0;background:var(--brand);color:var(--on-accent);display:flex;justify-content:space-between;
align-items:center;padding:.6rem 1rem;font-size:.9rem;z-index:5}
.brand{font-weight:700}.sync{font-size:.8rem;opacity:.9}
main{max-width:600px;margin:0 auto;padding:1rem;overflow-x:hidden}
h1{font-size:1.25rem;margin:.2rem 0 .8rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.9rem;margin:.6rem 0;word-break:break-all}
.login label{display:block;margin:.7rem 0;font-size:.9rem;color:var(--text-2)}
.login input{display:block;width:100%;font-size:1rem;padding:.6rem;margin-top:.25rem;border:1px solid var(--border);border-radius:.4rem}
.login button{width:100%;font-size:1rem;padding:.7rem;border:0;border-radius:.4rem;background:var(--brand-red);color:var(--on-accent)}
.error{color:var(--brand-red);font-size:.9rem}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);border-top:2px solid var(--brand);z-index:5}
.tabs a{flex:1;text-align:center;padding:.8rem 0;font-size:.8rem;color:var(--text-3);text-decoration:none}
.tabs a.on{color:var(--brand);font-weight:700;box-shadow:inset 0 -3px 0 var(--brand-red)}
/* ── 미수금·원장 ── */
h2{font-size:1rem;margin:1rem 0 .3rem;color:var(--text-2)}
a.card{display:block;color:inherit;text-decoration:none}
.card .l1{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;font-size:1rem}
.card .l2,.l2{font-size:.85rem;color:var(--text-2);margin-top:.15rem}
.card .l3{font-size:.8rem;color:var(--text-3);margin-top:.15rem}
.amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.card.total{font-size:1.1rem;display:flex;justify-content:space-between}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary{font-weight:700;padding:.5rem 0;cursor:pointer;font-size:.95rem}
.t-입금{border-left:.3rem solid #1565C0}
.t-보정{border-left:.3rem solid #E65100}
.t-메모{border-left:.3rem solid #8A8A8A;color:var(--text-3)}
.t-청구{border-left:.3rem solid var(--brand)}
.search input{width:100%;font-size:1rem;padding:.6rem;border:1px solid var(--border);border-radius:.4rem}
.card.dl{text-align:center;background:var(--brand);color:var(--on-accent);font-weight:700}
.card .pay{color:#1565C0}
/* ── 청구·합계·통계 ── */
h2{font-size:1rem;margin:1.2rem 0 .3rem;color:var(--text-2)}
.sub{display:block;font-size:.8rem;color:var(--text-3);margin:.15rem 0}
.num{display:block;text-align:right;font-variant-numeric:tabular-nums}
.big{font-size:1.1rem;font-weight:700}
.warn{background:#FFF4E5;border-color:#E0A040;color:#7A4A00;font-weight:700}
.neg{color:var(--brand-red)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;margin:.4rem 0}
.pager a,.chips a{color:var(--brand);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.chips a{border:1px solid var(--border);background:var(--surface);border-radius:1rem;padding:.35rem .8rem;font-size:.85rem}
.chips a.on{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}
a.row-link{display:block;color:inherit;text-decoration:none}
.line{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.grow{flex:1;min-width:0}
.badge{font-size:.75rem;background:var(--accent-soft);border:1px solid var(--border);border-radius:.8rem;padding:.1rem .6rem;white-space:nowrap}
.check{color:var(--brand-red);font-weight:700;min-width:1.2rem;text-align:right}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin:.25rem 0}
.kv.small{font-size:.8rem;color:var(--text-3)}
.kv .num{display:inline}
.card.inv-total{border:2px solid var(--brand)}
.card.total{border:2px solid var(--brand)}
.bar{height:.55rem;background:var(--accent-soft);border-radius:.3rem;overflow:hidden;margin:.2rem 0}
.bar i{display:block;height:100%;background:var(--brand)}
.bar.seg-2 i{background:#E0A040}
.bar.seg-3 i{background:var(--brand-red)}
/* ── 메모 ── */
.memo-fab{position:fixed;right:.8rem;bottom:4.2rem;z-index:5;background:var(--brand);color:var(--on-accent);border:0;border-radius:1.4rem;padding:.7rem 1.1rem;font-size:.95rem;font-weight:700}
.memo-dialog{width:calc(100% - 2rem);max-width:30rem;border:1px solid var(--border);border-radius:.6rem;padding:.8rem}
.memo-dialog textarea{width:100%;box-sizing:border-box;font-size:1rem;padding:.5rem;border:1px solid var(--border);border-radius:.4rem}
.memo-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}
.memo-actions button{font-size:.95rem;padding:.5rem 1rem;border:1px solid var(--border);border-radius:.4rem;background:var(--surface)}
.memo-actions button[type=submit]{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}
.card.memo.done{opacity:.5}
.memo-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:.2rem 0}
/* ── 엑셀 모양 화면 ── */
.sheet-title{font-size:1rem;word-break:break-all}
.sheet-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;margin:.3rem 0 .5rem}
.sheet-bar a{color:var(--brand);text-decoration:none}
.zoom{display:flex;gap:.3rem}
.zoom a{border:1px solid var(--border);background:var(--surface);border-radius:.4rem;padding:.3rem .65rem;min-width:2.2rem;text-align:center}
.dl-small{font-size:.8rem;color:var(--text-3)!important}
.sheet-wrap{overflow:auto;max-width:100%;background:#FFFFFF;border:1px solid var(--border);-webkit-overflow-scrolling:touch}
table.xs{border-collapse:collapse;table-layout:fixed;background:#FFFFFF;color:#000000;font-size:11pt;font-family:"Malgun Gothic","맑은 고딕",sans-serif}
table.xs td{padding:0 2px;white-space:nowrap;vertical-align:bottom;line-height:1.15;overflow:visible;font-variant-numeric:tabular-nums}
/* ── 월별합계 줄 ── */
.srow{display:grid;grid-template-columns:minmax(0,1fr) 7.4rem 3.4rem;align-items:stretch;padding:0;overflow:hidden}
.srow .who{padding:.6rem .7rem;min-width:0}
.srow .who b{display:block}
.srow .money{padding:.6rem .6rem;border-left:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;display:flex;flex-direction:column;justify-content:center}
.srow .paid{border-left:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-3)}
.srow .paid i{font-style:normal;font-size:1.3rem;line-height:1}
.srow .paid.yes{background:#E8F3EA;color:#1E6B2E}
.srow .paid.no{background:#FFFFFF}
.srow-head{display:grid;grid-template-columns:minmax(0,1fr) 7.4rem 3.4rem;font-size:.75rem;color:var(--text-3);padding:0 .1rem}
.srow-head span:nth-child(2){text-align:right;padding-right:.6rem}
.srow-head span:nth-child(3){text-align:center}
.kind{font-size:.7rem;border:1px solid var(--border);border-radius:.6rem;padding:0 .45rem;margin-right:.25rem;white-space:nowrap;display:inline-block}
.kind.corp{background:#ECECEB}
.kind.indiv{background:#FFF4E5;border-color:#E0A040}