:root{
  --bg:#eef1f7; --card:#fff; --line:#e3e5ea; --ink:#1c1f26; --dim:#6b7280;
  --accent:#2f6df6; --plus:#0f8a5f; --minus:#d1483c;
  --shadow:0 1px 2px rgba(20,25,40,.05), 0 6px 18px -10px rgba(20,25,40,.18);
  --glow:#d7e3ff;
  --hero:linear-gradient(135deg,#4a86ff 0%,#2b57d4 100%);
  --hero-neg:linear-gradient(135deg,#ef6b5c 0%,#c8382a 100%);
  --tabbg:#e7eaf1;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#13151a; --card:#1e2128; --line:#2e323c; --ink:#e9ecf2; --dim:#98a0ae;
    --accent:#5b8dff; --plus:#37c48b; --minus:#ff7b6d;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --glow:#1c2740;
    --hero:linear-gradient(135deg,#3e6fe0 0%,#22398c 100%);
    --hero-neg:linear-gradient(135deg,#c9503f 0%,#7e2418 100%);
    --tabbg:#262a33; }
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  background:var(--bg);
  background-image:radial-gradient(900px 380px at 50% -140px, var(--glow) 0%, transparent 72%);
  background-repeat:no-repeat; background-attachment:fixed;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Malgun Gothic",sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
main{
  max-width:840px; margin:0 auto;
  padding:16px max(14px, env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar h1{max-width:840px; margin:0 auto; padding:13px 16px 9px; font-size:16px; font-weight:700; letter-spacing:-.2px}
.tabs{
  max-width:840px; margin:0 auto 10px; display:flex; gap:3px;
  padding:3px; background:var(--tabbg); border-radius:11px;
  width:calc(100% - 28px);
}
.tab{
  appearance:none; border:0; background:none; color:var(--dim); cursor:pointer;
  flex:1; padding:8px 4px; font-size:13px; font-weight:600;
  border-radius:9px; transition:background .15s, color .15s; white-space:nowrap;
}
.tab.is-on{color:var(--accent); background:var(--card); box-shadow:0 1px 3px rgba(20,25,40,.12)}
.panel{display:none}
.panel.is-on{display:block}

/* nav row */
.navrow{display:flex; align-items:center; gap:8px; margin:4px 0 14px}
.navbtn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
}
.navlabel{flex:1; text-align:center}
.navlabel strong{display:block; font-size:16px}
.navlabel span{font-size:12px; color:var(--dim)}

/* buttons */
button{font-family:inherit}
.ghost{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:9px; padding:7px 12px; font-size:13px; cursor:pointer;
}
.primary{
  border:0; background:var(--accent); color:#fff; border-radius:9px;
  padding:8px 15px; font-size:14px; font-weight:600; cursor:pointer;
}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* stats */
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:12px 14px; box-shadow:var(--shadow)}
.stat.wide{grid-column:1/-1}
.stat.hero{
  background:var(--hero); border-color:transparent; color:#fff;
  box-shadow:0 8px 22px -12px rgba(43,87,212,.75);
}
.stat.hero.neg{background:var(--hero-neg); box-shadow:0 8px 22px -12px rgba(200,56,42,.75)}
.stat.hero .k{color:rgba(255,255,255,.82)}
.stat.hero .note{color:rgba(255,255,255,.78)}
.stat.hero b, .stat.hero b.plus, .stat.hero b.minus{color:#fff}
.stat.hero .bar{background:rgba(255,255,255,.28)}
.stat.hero .bar i{background:#fff}
.stat.hero .bar i.over{background:#ffd9d4}
.stat .k{display:block; font-size:12px; color:var(--dim); margin-bottom:3px}
.stat b{font-size:18px; font-variant-numeric:tabular-nums}
.stat b.big{font-size:30px; letter-spacing:-.8px; display:block; margin-top:1px}
.plus{color:var(--plus)} .minus{color:var(--minus)}
.stat .note{display:block; font-size:12px; color:var(--dim); margin-top:6px}
.bar{height:7px; border-radius:4px; background:var(--line); overflow:hidden; margin-top:10px}
.bar i{display:block; height:100%; background:var(--accent); border-radius:4px; transition:width .25s}
.bar i.over{background:var(--minus)}

/* accumulator */
.accum{
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:12px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; box-shadow:var(--shadow);
}
.accum-main .k{display:block; font-size:12px; color:var(--dim)}
.accum-main b{font-size:20px; font-variant-numeric:tabular-nums}
.accum-sub{flex:1; font-size:12px; color:var(--dim)}
.accum-sub b{font-variant-numeric:tabular-nums; color:var(--ink)}
.acclist{
  background:var(--card); border:1px solid var(--line); border-top:0;
  border-radius:0 0 13px 13px; margin-top:-1px; padding:4px 14px 10px; font-size:13px;
}
.acclist div{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line)}
.acclist div:last-child{border-bottom:0}
.acclist span{font-variant-numeric:tabular-nums}

/* box */
.box{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:14px; margin-top:14px; box-shadow:var(--shadow)}
.box h2{margin:0 0 8px; font-size:14px; font-weight:700}
.box h3{margin:14px 0 6px; font-size:13px; font-weight:700}
.hint{margin:0 0 10px; font-size:12px; color:var(--dim); line-height:1.55}
.chip{display:inline-block; background:var(--line); color:var(--dim); border-radius:20px; padding:1px 8px; font-size:11px; font-weight:600; vertical-align:middle}

textarea, input, select{
  font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; width:100%;
}
textarea{resize:vertical; line-height:1.6; font-size:13px}
.field{display:block; font-size:13px; color:var(--dim); margin-bottom:12px}
.field input{margin-top:5px; color:var(--ink)}

/* tables */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:11px; color:var(--dim); font-weight:600; padding:0 6px 6px; white-space:nowrap}
th .sub{display:block; font-weight:400; opacity:.75; font-size:10px; margin-top:2px}
td{padding:3px 6px; border-top:1px solid var(--line); vertical-align:middle}
tr.locked td{background:transparent}
td input, td select{border:1px solid transparent; background:transparent; padding:6px 6px; border-radius:7px}
td input:focus, td select:focus{border-color:var(--accent); background:var(--bg); outline:0}
td input:disabled{color:var(--dim)}
td.num input{text-align:right; font-variant-numeric:tabular-nums}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
td.act{width:34px; text-align:center}
.del{border:0; background:none; color:var(--dim); cursor:pointer; font-size:16px; line-height:1; padding:4px 6px; border-radius:6px}
.del:hover{color:var(--minus)}
.empty{color:var(--dim); font-size:13px; padding:14px 4px; text-align:center}
td.dup{color:var(--dim)}
.dupflag{font-size:11px; color:var(--minus)}
tfoot td{font-weight:700; border-top:2px solid var(--line)}

.pvopts{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin:14px 0 8px}
.pvopts label{display:flex; align-items:center; gap:6px; cursor:pointer}
.pvopts input{width:auto; margin:0}

.break{margin-top:10px; font-size:12px; color:var(--dim); display:flex; gap:14px; flex-wrap:wrap}
.break b{color:var(--ink); font-variant-numeric:tabular-nums}

@media (max-width:480px){
  .stat b.big{font-size:26px}
  .box{padding:13px 12px; border-radius:15px}
  .stat{border-radius:15px}

  /* iOS는 입력 글씨가 16px 미만이면 포커스할 때 화면을 확대해버린다 */
  textarea, input, select, td input, td select{font-size:16px}
  td input, td select{padding:8px 6px}
  th{font-size:11px}
  .ghost{padding:9px 13px}
  .primary{padding:10px 17px}
  .navbtn{width:38px; height:38px}
}