/* 다크 우선. 사장님이 원본 앱을 다크모드로 쓰고 계셔서 같은 톤으로 맞췄다. */
:root{
  --bg:#141414; --card:#1E1E1E; --card2:#262626; --line:#2E2E2E;
  --ink:#EDEDED; --ink2:#B6B6B6; --muted:#7E7E7E;
  --inc:#4E9BE6;           /* 수입 파랑 (원본 Set.A) */
  --exp:#E8524A;           /* 지출 빨강 */
  --warn:#E0A93B;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --tabh:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5; word-break:keep-all;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.inc{color:var(--inc)} .exp{color:var(--exp)} .muted{color:var(--muted)}
.empty{padding:60px 20px;text-align:center;color:var(--muted);line-height:1.9}

/* ---------------- 상단 ---------------- */
.topbar{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:4px;
  padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--line);
}
.topbar .nav{width:40px;height:40px;font-size:26px;color:var(--ink2)}
.topbar .ym{flex:1;text-align:center;font-size:18px;letter-spacing:-.01em}
.sync{min-width:64px;text-align:right;font-size:11px;color:var(--muted)}
.sync.wait{color:var(--warn)} .sync.off{color:var(--exp)}

/* ---------------- 본문 ---------------- */
.body{padding-bottom:calc(var(--tabh) + 84px)}

.summary{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.summary .sm{padding:12px 6px;text-align:center;border-bottom:2px solid transparent}
.summary .sm span{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.summary .sm b{font-size:16px;font-variant-numeric:tabular-nums}
.summary .sm.on{border-bottom-color:var(--ink2);background:var(--card)}

.daybar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 16px;background:var(--card2);font-size:13px;color:var(--ink2);
}
.daybar em{font-style:normal;display:flex;gap:10px;font-variant-numeric:tabular-nums}

.row{
  display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;
  width:100%;padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;
}
.row .cat{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mid b{display:block;font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mid small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.row .amt{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.row.pending{background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(224,169,59,.06) 8px,rgba(224,169,59,.06) 16px)}

/* ---------------- 달력 ---------------- */
.cal{padding:8px 6px}
.calhead,.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.calhead{padding:6px 0;font-size:12px;color:var(--muted);text-align:center}
.calhead .sun{color:var(--exp)}
.cell{
  min-height:62px;padding:5px 3px;border:1px solid var(--line);margin:-1px 0 0 -1px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.cell.blank{background:transparent;border-color:transparent}
.cell .d{font-size:12px;color:var(--ink2)}
.cell i{font-style:normal;font-size:10px;font-variant-numeric:tabular-nums}

/* ---------------- 통계 ---------------- */
.stats{padding:18px 16px}
.stats h2{margin:0 0 18px;font-size:17px;font-weight:600}
.bar{margin-bottom:14px}
.barhead{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}
.barhead b{font-variant-numeric:tabular-nums}
.barhead small{color:var(--muted);font-weight:400}
.track{height:7px;background:var(--card2);overflow:hidden}
.fill{height:100%;background:var(--exp)}

/* ---------------- 설정 ---------------- */
.settings{padding:16px}
.card{background:var(--card);border:1px solid var(--line);padding:16px;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:15px}
.card p{margin:0 0 10px;font-size:14px}

/* ---------------- 버튼 ---------------- */
.btn{padding:11px 16px;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:14px}
.btn.ghost{background:transparent}
.btn.big{width:100%;padding:15px;background:var(--inc);border-color:var(--inc);color:#fff;font-size:16px;font-weight:600}
.btn.tiny{padding:6px 10px;font-size:12px}
.btn.danger{width:100%;color:var(--exp);border-color:var(--exp);background:transparent}
.btn:disabled{opacity:.4}

.fab{
  position:fixed;right:18px;bottom:calc(var(--tabh) + 18px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;background:var(--inc);color:#fff;
  font-size:30px;line-height:1;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.5);
}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--card);border-top:1px solid var(--line);
}
.tabbar button{font-size:13px;color:var(--muted)}
.tabbar button.on{color:var(--ink);font-weight:600}

/* ---------------- 입력 시트 ---------------- */
.sheet{
  position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}
.sheethead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sheethead .x{width:40px;height:40px;font-size:20px;color:var(--ink2)}
.sheethead .ttl{flex:1;text-align:center;font-weight:600}
.sheethead .save{padding:9px 16px;background:var(--inc);color:#fff;font-weight:600}
.types{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.types button{padding:9px 0;border:1px solid var(--line);color:var(--muted);font-size:14px}
.types button.on.inc{color:var(--inc);border-color:var(--inc)}
.types button.on.exp{color:var(--exp);border-color:var(--exp)}
.scroll{flex:1;overflow-y:auto}

.f{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.f>span{width:52px;flex:0 0 auto;font-size:14px;color:var(--muted)}
.f input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:16px}
.f input::placeholder{color:#5A5A5A}
.f.loc em{flex:1;font-style:normal;font-size:14px;color:var(--ink2)}

.photobar{padding:14px 16px;border-bottom:1px solid var(--line)}
.photobar .btn{width:100%}

.catpick{padding:10px 0 4px}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ct{background:var(--card);padding:16px 6px;font-size:14px;color:var(--ink2)}
.ct i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.ct.sub{background:var(--card2);font-size:13px}
.ct.on{color:var(--exp);font-weight:600}
.ct.blank{background:var(--card2)}

.items{padding:16px}
.items h4{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:500}
.it{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.it em{font-style:normal;color:var(--muted);font-size:12px}
.it b{font-variant-numeric:tabular-nums;font-weight:500}
.dangerbar{padding:20px 16px 40px}

/* ---------------- 영수증 확인 ---------------- */
.rcpt{padding:16px}
.store{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px}
.store b{font-size:17px}
.store span{font-size:13px;color:var(--muted)}
.warn{padding:12px;border:1px solid var(--warn);color:var(--warn);font-size:13px;margin:0 0 14px}
.grp{border:1px solid var(--line);margin-bottom:12px}
.grphead{display:flex;justify-content:space-between;padding:11px 13px;background:var(--card2)}
.grphead em{font-style:normal;font-variant-numeric:tabular-nums}
.grp .it{padding:9px 13px}
.busy{align-items:center;justify-content:center;gap:16px}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--inc);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}

/* ---------------- 로그인 ---------------- */
.login{max-width:380px;margin:0 auto;padding:64px 24px}
.login h1{font-size:26px;margin:0 0 28px;text-align:center}
.lf{margin-bottom:10px}
.lf input{width:100%;padding:14px;background:var(--card);border:1px solid var(--line);outline:none;font-size:16px}
.login .btn{margin-top:8px;width:100%}
.err{color:var(--exp);font-size:13px;text-align:center;min-height:20px;margin-top:12px}

/* 밝은 화면 기기에서도 읽히게 */
@media (prefers-color-scheme:light){
  :root{--bg:#F5F5F5;--card:#FFFFFF;--card2:#ECECEC;--line:#DDDDDD;--ink:#1A1A1A;--ink2:#4A4A4A;--muted:#808080}
  .fab{box-shadow:0 6px 20px rgba(0,0,0,.2)}
}