/* Layout: 플래너의 인덱스 탭처럼 왼쪽 메뉴 레일, 오른쪽은 장부 페이지 */
:root{
  --bg:#f2f7f3; --surface:#ffffff; --surface-2:#f8fbf9; --soft:#e6f4ea; --line:#cfe5d6; --line-2:#e2eee6;
  --ink:#1b2a21; --mut:#62746a; --accent:#1f9d55; --accent-hi:#18864a; --accent-2:#2fb36a;
  --on-accent:#ffffff; --on-accent-mut:#dcf2e4;
  --red:#d23f3f; --blue:#2c66d4; --org:#e8862a; --org-soft:#fdf0e1; --org-soft-2:#fbe3c9;
  --gold:#f2b100; --gold-soft:#fff5d1; --gold-line:#f4dc8a; --hint-bg:#fffaea; --track:#e8efea; --today:#d2efdc;
  --shadow:rgba(10,30,18,.18); --scrim:rgba(16,36,24,.42);
  --f-display:"Jua","IBM Plex Sans KR","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f1712; --surface:#16211a; --surface-2:#1b281f; --soft:#1d3326; --line:#2a3f31; --line-2:#223429;
  --ink:#e3eee6; --mut:#93a89a; --accent:#3cc276; --accent-hi:#52d088; --accent-2:#3cc276;
  --on-accent:#08130c; --on-accent-mut:#123020;
  --red:#ff7a7a; --blue:#7aa8ff; --org:#f3a35a; --org-soft:#33261a; --org-soft-2:#463220;
  --gold:#ffc83d; --gold-soft:#3a3115; --gold-line:#6b5a22; --hint-bg:#2a2614; --track:#24342a; --today:#1f4a30;
  --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0f1712; --surface:#16211a; --surface-2:#1b281f; --soft:#1d3326; --line:#2a3f31; --line-2:#223429;
  --ink:#e3eee6; --mut:#93a89a; --accent:#3cc276; --accent-hi:#52d088; --accent-2:#3cc276;
  --on-accent:#08130c; --on-accent-mut:#123020;
  --red:#ff7a7a; --blue:#7aa8ff; --org:#f3a35a; --org-soft:#33261a; --org-soft-2:#463220;
  --gold:#ffc83d; --gold-soft:#3a3115; --gold-line:#6b5a22; --hint-bg:#2a2614; --track:#24342a; --today:#1f4a30;
  --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6); color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--f-body);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.app{display:flex;min-height:100vh}

/* 좌측 메뉴 */
.side{width:252px;flex:none;background:var(--surface);border-right:1px solid var(--line);padding:18px 14px 24px;position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;gap:12px}
.brand{font-family:var(--f-display);font-size:22px;color:var(--accent);display:flex;align-items:center;gap:8px;padding:0 4px}
.brand i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:16px}
.yearbox{display:flex;align-items:center;justify-content:space-between;background:var(--soft);border-radius:12px;padding:6px 8px}
.yearbox b{font-family:var(--f-display);font-size:18px;font-weight:400}
.yearbox button{border:0;background:var(--surface);border-radius:8px;width:30px;height:30px;color:var(--accent)}
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.months button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 0;font-size:13px;position:relative}
.months button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.months button.has::after{content:"";position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--org)}
.navt{font-size:11px;color:var(--mut);margin:4px 6px 0;letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--soft)}
.nav a.on{background:var(--accent);color:var(--on-accent)}
.nav a.sub{padding-left:30px;font-weight:500;font-size:13px}
.nav .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:12px;font-weight:800;flex:none}
.nav a.on .num{background:var(--on-accent);color:var(--accent)}
.status{background:var(--soft);border-radius:14px;padding:12px 14px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.status div{display:flex;justify-content:space-between;gap:8px}
.status b{font-variant-numeric:tabular-nums}
.sync{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px;padding:0 6px}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.sync.saved::before{background:var(--accent-2)} .sync.saving::before{background:var(--gold)} .sync.error::before{background:var(--red)}

/* 본문 */
main{flex:1;min-width:0;padding-block:24px 80px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.ph{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:18px}
.pill{background:var(--accent);color:var(--on-accent);font-family:var(--f-display);border-radius:999px;padding:4px 16px;font-size:20px}
.ph h1{font-family:var(--f-display);font-weight:400;font-size:26px;margin:0;text-wrap:balance}
.ph .desc{color:var(--mut);font-size:13px;width:100%}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;min-width:0}
.card h2{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .tag{font-size:12px;color:var(--mut);font-weight:500}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grid2>.card{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.stack>.card{margin-bottom:0}
@media (max-width:1150px){.grid2{grid-template-columns:minmax(0,1fr)}}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi .l{font-size:12px;color:var(--mut)}
.kpi .v{font-size:20px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi.hl{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.kpi.hl .l{color:var(--on-accent-mut)}
.neg{color:var(--red)!important}
.pos{color:var(--blue)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px}
.tabs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.tabs .sub{font-size:12px;opacity:.75}

.in{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);min-width:0}
.in:focus{outline:2px solid var(--accent-2);outline-offset:-1px;border-color:transparent}
.in.money{text-align:right;font-variant-numeric:tabular-nums}
textarea.in{width:100%;resize:vertical;min-height:70px}
.btn{border:0;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:8px 14px;font-weight:700;white-space:nowrap}
.btn:hover{background:var(--accent-hi)}
.btn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.btn.warn{background:var(--red);color:var(--on-accent)}
.x{border:0;background:none;color:var(--mut);font-size:15px;padding:2px 6px;opacity:.6}
.x:hover{color:var(--red);opacity:1}
.addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.addrow .in{flex:1 1 110px}
.addrow .in.w-date{flex:0 0 150px}
.addrow .in.w-sel{flex:0 0 140px}
.addrow .in.money{flex:0 1 130px}

.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
th,td{padding:8px 10px;border-bottom:1px solid var(--line-2);text-align:left;font-variant-numeric:tabular-nums}
th{font-weight:700}
td.r,th.r{text-align:right}
tr.tot td,tr.tot th{background:var(--soft);font-weight:700;border-bottom:0}
.small{font-size:12px;color:var(--mut)}
.muted{color:var(--mut)}
.badge{display:inline-block;font-size:11px;border-radius:999px;padding:2px 8px;background:var(--soft);color:var(--accent);font-weight:700;white-space:nowrap}
.badge.irr{background:var(--org-soft);color:var(--org)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}

/* 주간 표 */
table.wk{min-width:860px;table-layout:fixed}
table.wk th,table.wk td{border:1px solid var(--line-2);text-align:center;padding:6px}
table.wk th.rh{width:128px;text-align:left;background:var(--surface-2)}
table.wk th.rh small{display:block;font-weight:500;color:var(--mut);font-size:11px}
table.wk thead th{background:var(--soft);vertical-align:top}
table.wk thead th.dim{opacity:.45}
table.wk thead th.today{background:var(--today)}
table.wk .dn{font-weight:700}
table.wk .dn.sun{color:var(--red)} table.wk .dn.sat{color:var(--blue)}
table.wk td.cell{cursor:pointer;height:40px;text-align:right}
table.wk td.cell:hover{background:var(--surface-2);outline:2px solid var(--accent-2);outline-offset:-2px}
table.wk td.cell .plus{color:var(--line)}
table.wk td.cell small{display:block;font-size:10px;color:var(--mut)}
table.wk td.cell.dim{background:var(--surface-2)}
table.wk .sum{background:var(--org-soft);font-weight:700;width:110px;text-align:right}
table.wk thead .sum{background:var(--org-soft-2);text-align:center}
.stk{margin:6px auto 2px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;line-height:1.15}
.stk.add{border:2px dashed var(--line);background:var(--surface);color:var(--mut);font-size:10px}
.stk.add:hover{border-color:var(--accent);color:var(--accent)}
.stk.on{border:0;background:var(--gold-soft);font-size:30px;box-shadow:0 0 0 3px var(--gold-line) inset}
.stk-none{display:block;height:54px;margin:6px auto 2px}

/* 달력 */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cal .ch{background:var(--soft);text-align:center;font-weight:700;padding:6px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal .ch.sun{color:var(--red)} .cal .ch.sat{color:var(--blue)}
.cday{min-height:96px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 6px;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
.cday:hover{background:var(--surface-2)}
.cday.out{background:var(--surface-2);cursor:default}
.cday.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cday .ct{display:flex;justify-content:space-between;align-items:center}
.cday .cn{font-weight:700}
.cday.sun .cn{color:var(--red)} .cday.sat .cn{color:var(--blue)}
.cday .cs{font-size:20px;line-height:1}
.cday .cnote{font-size:11px;white-space:pre-wrap;word-break:break-all;flex:1}
.cday .cexp{font-size:11px;color:var(--red);text-align:right;font-variant-numeric:tabular-nums}

.flist{display:grid;grid-template-columns:1fr 140px;gap:6px 10px;align-items:center}
.flist label{font-size:13px}
.bucket{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line-2)}
.bucket input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.bucket .in{flex:1;border-color:transparent;padding:6px}
.bucket .in:hover{border-color:var(--line)}
.bucket.done .in{text-decoration:line-through;color:var(--mut)}

/* 결산 */
.eq{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.eq .box{flex:1 1 140px;background:var(--soft);border-radius:12px;padding:10px 12px}
.eq .box .l{font-size:12px;color:var(--mut)}
.eq .box .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.eq .op{display:grid;place-items:center;font-family:var(--f-display);font-size:24px;color:var(--accent)}
.eq .box.total{background:var(--accent);color:var(--on-accent)}
.eq .box.total .l{color:var(--on-accent-mut)}
.circ{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-size:11px;font-weight:700;margin-right:4px;flex:none}
.bar{height:8px;background:var(--track);border-radius:99px;overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--accent-2)}
.big{font-family:var(--f-display);font-size:34px;font-variant-numeric:tabular-nums}
.stars{display:flex}
.stars button{border:0;background:none;font-size:26px;color:var(--track);padding:0 2px}
.stars button.on{color:var(--gold)}
.econ{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 14px}
.econ label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut)}

/* 연간 */
table.yr{min-width:1100px;font-size:13px}
table.yr th,table.yr td{border:1px solid var(--line-2);padding:6px 8px}
table.yr thead th{background:var(--accent);color:var(--on-accent);text-align:center}
table.yr thead th.mlink{cursor:pointer}
table.yr thead th.mlink:hover{background:var(--accent-hi)}
table.yr th.grp{background:var(--soft);color:var(--accent);writing-mode:vertical-rl;text-align:center;width:34px;letter-spacing:.1em}
table.yr td{text-align:right}
table.yr td.lbl{text-align:left;white-space:nowrap}
/* 구분별 합계 줄: 초록 바탕 + 위아래 굵은 선으로 위아래 항목과 확실히 나눠요 */
table.yr tr.st td{background:var(--soft);color:var(--accent-hi);font-weight:800;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
table.yr tr.st td.ytot{background:var(--soft);color:var(--accent-hi)}
table.yr tr.bigr td{background:var(--org-soft);font-weight:700}
table.yr tr.bal td{background:var(--accent);color:var(--on-accent);font-weight:700}
table.yr td.ytot{background:var(--gold-soft);font-weight:700}
table.yr tr.bal td.ytot{background:var(--accent-hi)}

.hint{background:var(--hint-bg);border:1px solid var(--gold-line);border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.loading{padding:40px 0;text-align:center;color:var(--mut)}

/* 모달 */
.modal{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.mbox{background:var(--surface);border-radius:16px;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 50px var(--shadow)}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.mbody{padding:16px 18px}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.palette button{font-size:34px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 0}
.palette button:hover{background:var(--gold-soft)}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;z-index:60;font-size:13px;max-width:calc(100% - 32px)}

@media (max-width:860px){
  .app{flex-direction:column}
  .side{width:auto;height:auto;position:static;border-right:0;border-bottom:1px solid var(--line);padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .months{grid-template-columns:repeat(6,1fr)}
  main{padding-block:16px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav a.sub{padding-left:12px}
  .navt{display:none}
  .flist{grid-template-columns:1fr 120px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
a.btn{display:inline-flex;align-items:center;text-decoration:none}