/* ============================================================
   BAS 정리기 — Geist-style (Vercel design-system tokens), pared down
   canvas #ffffff · foreground #171717 · body #4d4d4d · muted #666666
   border #ebebeb · surface #fafafa · controls 36px / 6px / 1px ring
   Geist for UI, Geist Mono only for amounts, dates and form codes.
   One column. Sections are separated by a single hairline, not boxes.
   Dark values are an extrapolation of the same neutral steps.
   ============================================================ */
:root{
  --canvas:#ffffff; --surface:#fafafa; --fg:#171717; --body:#4d4d4d; --muted:#666666; --border:#ebebeb;
  --primary:#171717; --primary-fg:#ffffff;
  --credit:#0a7a3a; --debit:#d02f2f; --mark:#fff3d6; --mark-fg:#7a4b00; --mark-ring:#f5c86b;
  --ring:0 0 0 1px var(--border);
  --r:6px;
  --font-ui:"Geist","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0a0a0a; --surface:#111111; --fg:#ededed; --body:#a1a1a1; --muted:#888888; --border:#2a2a2a;
    --primary:#ededed; --primary-fg:#0a0a0a;
    --credit:#3ecf7a; --debit:#ff6166; --mark:#2a2007; --mark-fg:#f5c86b; --mark-ring:#5c4410;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0a0a0a; --surface:#111111; --fg:#ededed; --body:#a1a1a1; --muted:#888888; --border:#2a2a2a;
  --primary:#ededed; --primary-fg:#0a0a0a;
  --credit:#3ecf7a; --debit:#ff6166; --mark:#2a2007; --mark-fg:#f5c86b; --mark-ring:#5c4410;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:var(--canvas);color:var(--fg);
  font-family:var(--font-ui);font-size:14px;line-height:1.43;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none!important}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.nowrap{white-space:nowrap}
.text-debit{color:var(--debit)}
.text-credit{color:var(--credit)}
.text-mute{color:var(--muted)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ---------- frame ---------- */
.page{max-width:1040px;margin:0 auto;padding:56px 16px 48px}
@media (min-width:640px){.page{padding-left:24px;padding-right:24px}}
.top{padding-bottom:40px}
.top-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.top h1{font-size:56px;font-weight:450;line-height:1;letter-spacing:-0.05em}
.lede{color:var(--body);font-size:16px;line-height:1.5;margin-top:16px;max-width:40em}

section{padding:32px 0;border-top:1px solid var(--border)}

/* ---------- controls ---------- */
.field{
  display:block;width:100%;margin-top:4px;height:36px;padding:0 12px;
  background:var(--canvas);border:0;box-shadow:var(--ring);border-radius:var(--r);
  color:var(--fg);font-size:14px;transition:box-shadow .12s;
}
.field:hover{box-shadow:0 0 0 1px var(--muted)}
.field:focus{outline:0;box-shadow:0 0 0 1px var(--fg)}
.field::placeholder{color:var(--muted)}
.field-sm{width:160px;margin-top:0}
textarea.field{height:auto;min-height:64px;padding:8px 12px;resize:vertical}
input[type="date"].field,input[type="number"].field{font-family:var(--font-mono);font-size:13px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;
  font-size:14px;font-weight:500;line-height:1;
  background:var(--canvas);color:var(--fg);border:0;box-shadow:var(--ring);border-radius:var(--r);
  transition:background .12s,box-shadow .12s;
}
.btn:hover:not(:disabled){background:var(--surface);box-shadow:0 0 0 1px var(--muted)}
.btn-main{background:var(--primary);color:var(--primary-fg);box-shadow:0 0 0 1px var(--primary)}
.btn-main:hover:not(:disabled){background:var(--body);box-shadow:0 0 0 1px var(--body)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.link{background:none;border:0;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--fg)}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{
  height:32px;padding:0 12px;font-size:13px;
  background:var(--canvas);color:var(--body);border:0;box-shadow:var(--ring);border-radius:var(--r);
  transition:box-shadow .12s,color .12s;
}
.chip:hover{color:var(--fg);box-shadow:0 0 0 1px var(--muted)}
.chip.on{background:var(--primary);color:var(--primary-fg);box-shadow:0 0 0 1px var(--primary)}

/* ---------- 1. input ---------- */
.setup{display:flex;flex-direction:column;gap:20px}
.drop{
  display:flex;align-items:center;gap:16px;min-height:88px;padding:16px 20px;cursor:pointer;
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--r);color:var(--fg);
  transition:border-color .12s,background .12s;
}
.drop:hover,.drop:focus-within{border-color:var(--muted)}
.drop.over{border-style:solid;border-color:var(--fg)}
.drop-icon{flex:none;width:30px;height:36px}
.drop-title{display:block;font-weight:500;font-size:15px}
.drop-hint{display:block;font-size:13px;color:var(--muted);margin-top:2px}

.files{list-style:none;margin:-8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.files:empty{display:none}
.file{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.file-dot{width:8px;height:8px;border-radius:9999px;background:var(--border);align-self:center}
.file.good .file-dot{background:var(--credit)}
.file.bad .file-dot{background:var(--debit)}
.file-name{font-family:var(--font-mono);font-size:12px;color:var(--fg);word-break:break-all}
.file-state{color:var(--muted)}

.period{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.dates{display:flex;align-items:center;gap:8px}
.dates .field{width:150px;margin:0}
.dash{color:var(--muted)}
.period-links{display:flex;gap:16px;margin-left:auto}
.modes .tab{height:32px;font-size:13px}

.more{font-size:13px}
.more summary{cursor:pointer;color:var(--muted);list-style:none;display:inline-flex;align-items:center;gap:6px;user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .12s;margin-top:-2px}
.more[open] summary::before{transform:rotate(45deg);margin-top:-4px}
.more summary:hover{color:var(--fg)}
.more-grid{display:grid;gap:24px;padding:20px 0 4px}
@media (min-width:768px){.more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lbl{display:block;font-size:13px;color:var(--body);margin-top:12px}
.lbl:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.grid2 .lbl{margin-top:0}
.hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}

/* ---------- 2. figures ---------- */
.stats{display:grid;gap:24px}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-k{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body)}
.stat-v{font-family:var(--font-mono);font-size:36px;font-weight:500;letter-spacing:-0.02em;line-height:1.1;color:var(--fg);white-space:nowrap}
.stat-s{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.stat-net .stat-k{color:var(--fg);font-weight:500}
.stat-net .stat-v{display:inline-block;align-self:flex-start;border-bottom:3px double var(--fg);padding-bottom:2px}
.stat-net .stat-s{font-family:var(--font-ui)}
.stat-net.idle .stat-v{color:var(--muted);border-color:var(--border)}

/* income-tax detail */
.tax-panel{display:grid;gap:32px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
@media (min-width:768px){.tax-panel{grid-template-columns:1fr 1fr;gap:48px}}
.tax-panel h3{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 8px}
table.kv{border-collapse:collapse;width:100%;font-size:14px}
table.kv td{padding:6px 0;border-bottom:1px solid var(--border);color:var(--fg)}
table.kv tr.kv-total td{font-weight:500;border-bottom:3px double var(--fg);border-top:1px solid var(--fg)}
table.kv tr.kv-total + tr td{border-top:0}
.payg{margin-top:16px;max-width:240px}
.payg .field{font-family:var(--font-mono)}

.warnings{margin-top:28px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.warnings:empty{display:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px}
.status{font-size:13px;color:var(--muted);margin-left:auto}
.status:empty{display:none}

/* ---------- 3. transactions ---------- */
.ledger{padding-bottom:0}
.ledger-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:12px}
.ledger-head h2{font-size:16px;font-weight:500}
.count{font-size:13px;font-weight:400;color:var(--muted);font-family:var(--font-mono);margin-left:4px}
.ledger-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tabs{display:inline-flex;box-shadow:var(--ring);border-radius:var(--r);overflow:hidden;background:var(--canvas)}
.tab{height:36px;padding:0 12px;border:0;background:transparent;color:var(--body);font-size:14px}
.tab + .tab{border-left:1px solid var(--border)}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--fg);font-weight:500}

.ledger-scroll{overflow:auto;max-height:72vh;margin:0 -16px}
@media (min-width:640px){.ledger-scroll{margin:0}}
table.tx{border-collapse:collapse;width:100%;font-size:14px}
table.tx th{
  position:sticky;top:0;z-index:1;background:var(--canvas);
  text-align:left;font-weight:400;color:var(--muted);font-size:13px;
  border-bottom:1px solid var(--border);padding:8px;white-space:nowrap;
}
table.tx td{border-bottom:1px solid var(--border);padding:10px 8px;vertical-align:top;color:var(--fg)}
table.tx td:first-child,table.tx th:first-child{padding-left:0}
table.tx td:last-child,table.tx th:last-child{padding-right:0}
@media (max-width:639.98px){
  table.tx td:first-child,table.tx th:first-child{padding-left:16px}
  table.tx td:last-child,table.tx th:last-child{padding-right:16px}
}
table.tx tr.out td{opacity:.42}
table.tx td.empty{text-align:center;color:var(--muted);padding:56px 16px}
table.tx td.mono{font-size:13px}
table.tx .desc{min-width:14rem;width:42%}
table.tx.one-acct .col-acct{display:none}
table.tx.mode-bas .col-sub{display:none}
table.tx.mode-tax .col-bas{display:none}
table.tx .col-sub select{max-width:150px}
.sub{display:block;font-size:12px;color:var(--muted);font-family:var(--font-ui)}
.clip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:12px;color:var(--muted);background:none;border:0;padding:0 2px;border-radius:4px;vertical-align:baseline;opacity:0;transition:opacity .12s}
tr:hover .clip,.clip:focus-visible,.clip.on{opacity:1}
.clip:hover{color:var(--fg)}
.clip.on a{color:var(--body);text-decoration:none}
.clip.on a:hover{color:var(--fg);text-decoration:underline}
.unclip{background:none;border:0;padding:0 3px;color:var(--muted);font-size:13px;line-height:1;border-radius:4px}
.unclip:hover{color:var(--debit)}

.cell-select{
  height:28px;padding:0 6px;background:transparent;border:0;border-radius:4px;
  box-shadow:0 0 0 1px transparent;color:var(--fg);font-size:13px;transition:box-shadow .12s;
}
.cell-select:hover{box-shadow:var(--ring);background:var(--canvas)}
.cell-select:focus{outline:0;box-shadow:0 0 0 1px var(--fg);background:var(--canvas)}
.cell-select:disabled{opacity:.35}
.cell-select.review{background:var(--mark);color:var(--mark-fg);box-shadow:0 0 0 1px var(--mark-ring)}
.pct{width:56px;text-align:right;font-family:var(--font-mono)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding-top:24px;margin-top:32px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}

@media (max-width:640px){
  .page{padding-top:40px}
  .top h1{font-size:40px;letter-spacing:-0.04em}
  .top{padding-bottom:28px}
  section{padding:24px 0}
  .stat-v{font-size:30px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}