/* Deal Ledger — 2c 장부.
   한 화면에 요약·목록·상세가 다 들어간다. 돈의 방향은 태그가 아니라 색으로만 말한다:
   초록이 들어오는 돈, 갈색이 나가는 돈. 늦은 것은 색을 못 봐도 알도록 여백선과 배경으로도 표시한다. */
:root{
  --bg:#EDF0EE; --surface:#FFFFFF; --sunk:#F6F8F6;
  --ink:#1A211D; --ink-2:#5C6863; --ink-3:#8B948F;
  --line:#E3E8E5; --line-2:#EFF2F0;
  --in:#2C6B52;  --in-soft:#E8F1EC;   /* 들어오는 돈 · 고객 */
  --out:#A85426; --out-soft:#F8EBE1;  /* 나가는 돈 · 벤더 */
  --late:#C0392B; --late-soft:#FCEDEB;
  --warn:#9C7211; --warn-soft:#FCF6E4;
  --chip:#1A211D; --chip-ink:#FFFFFF;
  --focus:#2C6B52; --shadow:0 1px 3px rgba(0,0,0,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121714; --surface:#1B211E; --sunk:#161C19;
    --ink:#E7EBE8; --ink-2:#A9B3AE; --ink-3:#7B857F;
    --line:#2C3531; --line-2:#232B27;
    --in:#7CC4A3; --in-soft:#1C3428; --out:#E0A075; --out-soft:#3A2718;
    --late:#E88B80; --late-soft:#3A211E; --warn:#DFC066; --warn-soft:#332C13;
    --chip:#E7EBE8; --chip-ink:#121714;
    --focus:#7CC4A3; --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#121714; --surface:#1B211E; --sunk:#161C19;
  --ink:#E7EBE8; --ink-2:#A9B3AE; --ink-3:#7B857F;
  --line:#2C3531; --line-2:#232B27;
  --in:#7CC4A3; --in-soft:#1C3428; --out:#E0A075; --out-soft:#3A2718;
  --late:#E88B80; --late-soft:#3A211E; --warn:#DFC066; --warn-soft:#332C13;
  --chip:#E7EBE8; --chip-ink:#121714;
  --focus:#7CC4A3; --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:15px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25;text-wrap:balance}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.in{color:var(--in)} .out{color:var(--out)} .late{color:var(--late)} .warnc{color:var(--warn)}
.r{text-align:right}
.scroll{overflow-x:auto}

/* ── 상단 ─────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:8px;padding:12px 22px;background:var(--surface);
     border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-family:"Newsreader",Georgia,"Noto Serif KR",serif;font-weight:600;font-size:22px;
       text-decoration:none;margin-right:10px;white-space:nowrap}
.tab{text-decoration:none;padding:6px 12px;border-radius:6px;color:var(--ink-2);font-size:14.5px}
.tab:hover{background:var(--sunk);color:var(--ink)}
.tab.on{background:var(--sunk);color:var(--ink);font-weight:600}
.top .grow{flex:1}
/* 언어 전환 — 화면 말만 바꾼다. 고객에게 가는 인보이스는 언제나 영어다. */
.langs{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.langs button{border:0;border-radius:0;padding:7px 11px;font-size:13px;background:var(--surface);color:var(--ink-3)}
.langs button + button{border-left:1px solid var(--line)}
.langs button:hover{background:var(--sunk);color:var(--ink)}
.langs button.on{background:var(--chip);color:var(--chip-ink);font-weight:600}
/* 여러 업체 모드에서만 보인다 — 지금 어느 업체의 장부를 보고 있는지 */
.who{display:inline-flex;align-items:center;gap:8px;margin-left:4px;font-size:13.5px;color:var(--ink-2)}
.who #who-name{font-weight:600;color:var(--ink);max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who button{padding:6px 10px;font-size:13px}
.who[hidden]{display:none}
.page{max-width:1240px;margin:0 auto;padding:20px 22px 90px}

/* ── 버튼 ─────────────────────────────────────────────── */
button{font:inherit;border-radius:7px;cursor:pointer;white-space:nowrap;border:1px solid var(--line);
       background:var(--surface);color:var(--ink-2);padding:8px 14px;font-size:14px}
button:hover{background:var(--sunk);color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
button[disabled]{opacity:.45;cursor:not-allowed}
.btn-in{background:var(--in);border-color:var(--in);color:#fff;font-weight:600}
.btn-in:hover{background:var(--in);color:#fff;filter:brightness(1.08)}
.btn-out{background:var(--out);border-color:var(--out);color:#fff;font-weight:600}
.btn-out:hover{background:var(--out);color:#fff;filter:brightness(1.08)}
.btn-in-o{border-color:var(--in);color:var(--in);font-weight:600}
.btn-out-o{border-color:var(--out);color:var(--out);font-weight:600}
.btn-sm{padding:5px 10px;font-size:13px}
.danger:hover{color:var(--late);border-color:var(--late)}

/* ── 요약 띠 (타일이 아니라 한 줄) ──────────────────────── */
.band{display:flex;align-items:center;gap:0;flex-wrap:wrap;background:var(--surface);
      border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:14px 20px;margin-bottom:14px}
.band .cell{display:flex;align-items:baseline;gap:10px;padding-right:26px;margin-right:26px;border-right:1px solid var(--line-2)}
.band .cell:last-of-type{border-right:0}
.band .l{font-size:13.5px;color:var(--ink-2)}
.band .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
         font-size:26px;font-weight:500;letter-spacing:-.01em}
.band .note{margin-left:auto;font-size:13px;color:var(--ink-3)}
.band .note b{color:var(--late);font-weight:600}

/* ── 필터 칩 ──────────────────────────────────────────── */
.chips{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:7px 13px;
      font-size:13.5px;color:var(--ink-2);cursor:pointer}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--chip);border-color:var(--chip);color:var(--chip-ink);font-weight:600}
.chips .hint{margin-left:auto;font-size:12.5px;color:var(--ink-3)}

/* ── 장부 표 ──────────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
        border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ledger thead th{font-size:12px;font-weight:600;color:var(--ink-3);text-align:left;
                 padding:9px 12px;background:var(--sunk);border-bottom:1px solid var(--line);white-space:nowrap}
.ledger thead th.r{text-align:right}
.ledger td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ledger tbody tr:last-child td{border-bottom:0}
/* 왼쪽 여백선 — 색을 못 봐도 형태로 구분된다 */
.lrow > td:first-child{border-left:4px solid transparent}
.lrow.s-late > td:first-child{border-left-color:var(--late)}
.lrow.s-warn > td:first-child{border-left-color:var(--warn)}
.lrow.s-late > td{background:var(--late-soft)}
.lrow{cursor:pointer;min-height:56px}
.lrow:hover > td{background:var(--sunk)}
.lrow.s-late:hover > td{background:var(--late-soft);filter:brightness(.99)}
.lrow.open > td{background:var(--sunk)}
.lrow.s-late.open > td{background:var(--late-soft)}

/* 인보이스 표 — 장부 행과 같은 규칙(늦으면 왼쪽 선 + 배경), 누르면 문서가 열린다 */
.irow{cursor:pointer}
.irow > td:first-child{border-left:4px solid transparent}
.irow.s-late > td:first-child{border-left-color:var(--late)}
.irow.s-late > td{background:var(--late-soft)}
.irow:hover > td{background:var(--sunk)}
.irow.s-late:hover > td{background:var(--late-soft);filter:brightness(.99)}
.irow .due{white-space:nowrap;font-size:13.5px;color:var(--ink-2)}
.irow .due .late{font-weight:600}
.irow .act{text-align:right;white-space:nowrap}
.ledger td.act{text-align:right;white-space:nowrap;width:1%}
.st{font-size:14px;font-weight:600;white-space:nowrap}
.st small{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:3px}
.did{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--ink-2);white-space:nowrap}
.deal .t{font-weight:600}
.deal .who{color:var(--ink-2);font-size:14px}
.money{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
       font-size:16px;font-weight:600;text-align:right;white-space:nowrap}
.money .sub{display:block;font-size:12px;font-weight:400;margin-top:2px}
.caret{color:var(--ink-3);text-align:right;width:26px;user-select:none}

/* 인보이스 문서 아이콘 — 접힌 행에서 펼치지 않고 바로 연다 */
.inv{width:34px;text-align:center;padding-left:0;padding-right:0;white-space:nowrap}
.inv .ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
          border-radius:6px;color:var(--ink-3);text-decoration:none;vertical-align:middle}
.inv .ico + .ico{margin-left:1px}
.inv .ico:hover,.inv .ico:focus-visible{color:var(--in);background:var(--in-soft)}
.inv .ico:focus-visible{outline:2px solid var(--in);outline-offset:1px}
tr.open .inv .ico{color:var(--in)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:5px;
     border:1px dashed var(--ink-3);color:var(--ink-2);vertical-align:middle}
.tfoot td{background:var(--sunk);font-weight:600;border-top:1px solid var(--line)}

/* ── 펼친 상세 ────────────────────────────────────────── */
.exp > td{padding:0 12px 14px;background:var(--sunk)}
.exp.s-late > td{background:var(--late-soft)}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.panes{grid-template-columns:1fr}}
.pane{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;padding:13px 15px}
.pane.cust{border-left-color:var(--in)} .pane.vend{border-left-color:var(--out)}
.pane .ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.pane .ph b{font-size:15px}
.pane .ph .meta{font-size:12.5px;color:var(--ink-3)}
.pane .line{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px;color:var(--ink-2)}
.pane .line .num{color:var(--ink)}
.pane .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
            margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2)}
.pane .foot .lbl{font-size:14px;color:var(--ink-2)}
.pane .foot .amt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
                 font-size:19px;font-weight:600;margin-left:6px}
.pane.empty{color:var(--ink-3);font-size:14px;display:flex;align-items:center;justify-content:center;min-height:92px}

.warn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 13px;
      background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 7px 7px 0;font-size:13.5px}
.warn .k{font-size:11.5px;font-weight:700;color:var(--warn);border:1px solid var(--warn);
         border-radius:4px;padding:1px 6px;white-space:nowrap}
.warn.bad{background:var(--late-soft);border-left-color:var(--late)}
.warn.bad .k{color:var(--late);border-color:var(--late)}
.warn .next{margin-left:auto;color:var(--ink-2);font-size:13px}

.acts{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:11px;font-size:13.5px}
.acts .margin{color:var(--ink-2);margin-right:10px}
.acts .margin b{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--ink);font-size:15px}
.acts button{border:0;background:none;color:var(--ink-2);padding:5px 9px;font-size:13.5px;border-radius:6px}
.acts button:hover{background:var(--line-2);color:var(--ink)}
.acts button::before{content:"▸ ";color:var(--ink-3)}
.acts button.on::before{content:"▾ "}
.drawer{margin-top:11px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.drawer h4{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ── 표 안 폼 ─────────────────────────────────────────── */
input,select,textarea{font:inherit;font-size:14px;background:var(--bg);color:inherit;border:1px solid var(--line);
             border-radius:6px;padding:7px 9px;width:100%;min-width:0}
textarea{resize:vertical;line-height:1.5}
input.num{text-align:right}
input.bare,textarea.bare{background:transparent;border-color:transparent;padding:4px 7px}
input.bare:hover,textarea.bare:hover{border-color:var(--line)}
input.bare:focus,textarea.bare:focus{background:var(--bg);border-color:var(--line)}
/* 장부 표 안의 입력칸 — width:100%·min-width:0이라 자동 표 배치에서 열의 최소폭이 0으로
   잡히고, 빈 열과 값이 든 열이 폭을 나눠 가지면서 값이 잘렸다. 열마다 값이 보일 만큼의
   최소폭을 주고, 창이 그보다 좁으면 .scroll이 가로로 민다. 칸 여백은 입력칸 자체 여백과
   합쳐 머리글 글자와 같은 12px에 맞춘다. */
.ledger td:has(> input.bare, > select){padding:8px 4px}
.ledger td > input.bare{min-width:5em}
.ledger td > input[name=name]{min-width:10.5em}
.ledger td > input[name=corp]{min-width:7em}
.ledger td > input[name=sellers_permit]{min-width:11.5em}
.ledger td > input[name=address]{min-width:13em}
.ledger td > input[name=contact],.ledger td > input[name=order_channel]{min-width:9em}
.ledger td > select{width:auto}
.f:has(> select){min-width:150px}

/* 인보이스 문서로 나가는 링크 — 새 탭에서 열린다 */
a.doc{color:var(--in);text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
a.doc:hover{opacity:.75}
a.doc.btn-sm{align-self:flex-end;border:1px solid var(--line);border-radius:6px;text-decoration:none}
.form{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3);flex:1;min-width:104px}
.f.sm{flex:0 0 112px} .f.wide{flex:2}
.mini{width:100%;border-collapse:collapse;font-size:13.5px}
.mini th{font-size:11.5px;color:var(--ink-3);text-align:left;font-weight:600;padding:5px 7px 5px 0;border-bottom:1px solid var(--line)}
.mini td{padding:5px 7px 5px 0;border-bottom:1px solid var(--line-2)}
.mini tr:last-child td{border-bottom:0}
.rows{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.rows .it{display:flex;justify-content:space-between;gap:10px;align-items:center}
.log{font-size:12.5px;color:var(--ink-3);line-height:1.75}
.log b{color:var(--ink-2);font-weight:500}

/* ── 모달 ─────────────────────────────────────────────── */
.veil{position:fixed;inset:0;background:rgba(10,16,13,.42);display:flex;align-items:flex-start;
      justify-content:center;padding:44px 16px;z-index:60;overflow:auto}
/* .veil의 display:flex가 UA의 [hidden]{display:none}을 이기므로 명시적으로 되돌린다 */
.veil[hidden],[hidden]{display:none!important}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:100%;max-width:660px;
       box-shadow:0 12px 40px rgba(0,0,0,.22)}
.sheet .sh{display:flex;justify-content:space-between;align-items:center;gap:12px;
           padding:15px 19px;border-bottom:1px solid var(--line)}
.sheet .sh h3{font-size:18px}
.sheet .sb{padding:17px 19px}
.sheet .sf{display:flex;gap:9px;align-items:center;padding:13px 19px;border-top:1px solid var(--line);background:var(--sunk);border-radius:0 0 12px 12px}
.sheet .sf .grow{flex:1}
.pick{display:flex;gap:11px;align-items:center;padding:11px 13px;border:1px solid var(--line);
      border-radius:8px;cursor:pointer;margin-bottom:7px;background:var(--surface)}
.pick:hover{border-color:var(--ink-3)}
.pick.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pick input{width:auto;flex:none}
.pick .g{flex:1;min-width:0}
.pick .g .a{font-size:14.5px}
.pick .g .b{font-size:12.5px;color:var(--ink-3)}

.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:14px;
       border:1px dashed var(--line);border-radius:10px;background:var(--surface)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
       padding:11px 17px;border-radius:8px;font-size:14px;z-index:80;max-width:90vw;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.bad{background:var(--late);color:#fff}
@media (prefers-reduced-motion: no-preference){.toast{animation:rise .16s ease-out}}
@keyframes rise{from{opacity:0;transform:translate(-50%,7px)}to{opacity:1;transform:translate(-50%,0)}}