:root {
  --bg: #f4f7f8; --panel: #fff; --ink: #1d2b30; --muted: #66777d; --line: #dde5e8;
  --brand: #11606f; --brand-2: #1a7d8f; --accent: #93dde8; --soft: #e8f4f6;
  --hi: #1e7b4f; --hi-bg: #e5f4ec; --mid: #8a5a00; --mid-bg: #fdf1d8; --lo: #a3342b; --lo-bg: #fbe6e3;
  --dep: #0b5ea8; --wd: #b23b2e;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--lo); min-height: 1.2em; margin: 6px 0 0; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--brand-2); }
.btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--brand-2); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-2); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--lo); }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.kbd { font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--muted); font-weight: 500; }

/* 로그인 */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: grid; gap: 10px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card p { margin: 0 0 6px; }
.login-card label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.login-icon { width: 56px; height: 56px; border-radius: 12px; }

/* 상단 */
.top { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--brand); color: #fff; flex-wrap: wrap; }
.top .brand { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.top .brand img { width: 28px; height: 28px; border-radius: 6px; }
.top .brand .muted { color: #bfe3ea; font-size: 13px; }
.top .company-pick { display: flex; gap: 6px; flex: 1; min-width: 260px; }
.top select { min-width: 260px; max-width: 420px; flex: 1; border: 0; color: var(--ink); }
.top .btn.ghost { color: #fff; border-color: #3a8a99; }
.top .me { display: flex; gap: 8px; align-items: center; }
.tabs { display: flex; gap: 2px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 12px 14px; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
main { padding: 20px; max-width: 1500px; margin: 0 auto; }
h2 { font-size: 18px; margin: 0 0 4px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.lead { margin: 0 0 16px; color: var(--muted); }

/* 카드·그리드 */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.imp-card { display: grid; gap: 8px; align-content: start; }
.imp-card .n { font-size: 12px; background: var(--soft); color: var(--brand); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.imp-card .stat { font-size: 13px; }
.imp-card .stat b { color: var(--brand); }
.drop { border: 1.5px dashed var(--line); border-radius: 8px; padding: 12px; text-align: center; color: var(--muted); cursor: pointer; font-size: 13px; }
.drop.over { border-color: var(--brand-2); background: var(--soft); }
.imp-card textarea { width: 100%; height: 64px; resize: vertical; font-size: 12px; }
.note { background: var(--soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.note.warn { background: var(--mid-bg); }

/* 표 */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; max-height: calc(100vh - 290px); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f7fafb; position: sticky; top: 0; z-index: 1; font-weight: 600; color: #3b4d52; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.dep { color: var(--dep); } td.wd { color: var(--wd); }
tr.sel td { background: #eef8fa; }
tr:hover td { background: #fafcfc; }
tr.sel:hover td { background: #e4f3f6; }
td.memo { max-width: 280px; }
td.nowrap { white-space: nowrap; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.badge.high { background: var(--hi-bg); color: var(--hi); }
.badge.mid { background: var(--mid-bg); color: var(--mid); }
.badge.low { background: var(--lo-bg); color: var(--lo); }
.badge.done { background: var(--soft); color: var(--brand); }
.badge.open { background: #eef1f2; color: var(--muted); }
.lines { margin-top: 4px; font-size: 12px; color: var(--muted); display: grid; grid-template-columns: auto 1fr auto; gap: 0 10px; }
.lines .d { color: var(--dep); } .lines .c { color: var(--wd); }
select.opt { max-width: 420px; width: 100%; }

/* 작업대 */
.work { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.steps { display: grid; gap: 6px; align-content: start; }
.step { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.step.on { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.step .cnt { font-weight: 700; color: var(--brand); }
.step .cnt.zero { color: #b8c4c7; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.toolbar .grow { flex: 1; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; min-width: 150px; }
.stat-box .k { font-size: 12px; color: var(--muted); }
.stat-box .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 대화상자 */
.dlg { border: 0; border-radius: 12px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg form { padding: 20px; display: grid; gap: 10px; }
.dlg::backdrop { background: rgba(10,30,35,.4); }
.f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.seg { display: flex; gap: 14px; flex-wrap: wrap; }
.seg.small { font-size: 13px; }
fieldset.learn { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; padding: 10px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #16353c; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; z-index: 50; }
.toast.on { opacity: 1; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
details summary { cursor: pointer; }
@media (max-width: 900px) { .work { grid-template-columns: 1fr; } main { padding: 12px; } }
.work > * { min-width: 0; }
@media (max-width: 700px) {
  .top { padding: 10px 12px; gap: 8px; }
  .top .company-pick { min-width: 0; width: 100%; }
  .top select { min-width: 0; }
  .tabs { padding: 0 8px; }
}
.dlg.wide { width: min(1100px, 96vw); }
#mapTable select { font-size: 12px; padding: 3px 4px; min-width: 96px; }
#mapTable tr.hdr td { background: var(--soft); font-weight: 600; }
#mapTable tr.muted td { color: #a9b6b9; }
.ok { color: var(--hi); } .bad { color: var(--lo); }
.verify td.num.bad, .verify td.num.ok { font-weight: 600; }
.banner { border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; font-weight: 600; }
.banner.ok { background: var(--hi-bg); } .banner.bad { background: var(--lo-bg); } .banner.wait { background: #eef1f2; color: var(--muted); }
.form-grid .f select, .form-grid .f input { width: 100%; min-width: 0; }

/* v0.3 */
.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--wd); color: #fff; font-size: 11px; font-weight: 700; margin-left: 3px; line-height: 17px; }
.badge.asked { background: #fff1d6; color: #8a5a00; } .badge.answered { background: #e6f0ff; color: #0b5ea8; }
.badge.booked { background: #efe9fb; color: #5b3aa0; } .badge.ready { background: var(--mid-bg); color: var(--mid); } .badge.exported { background: var(--hi-bg); color: var(--hi); }
.badge.pending { background: var(--mid-bg); color: var(--mid); } .badge.sent { background: #e6f0ff; color: #0b5ea8; } .badge.registered { background: var(--hi-bg); color: var(--hi); }
.client-ans { margin-top: 3px; font-size: 12px; background: #eef5ff; border-radius: 6px; padding: 3px 7px; color: #164a7a; }
.prog { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eef1f2; margin: 6px 0 2px; }
.prog i { display: block; height: 100%; }
.prog .booked { background: #9b86d6; } .prog .exported { background: #2e9e67; } .prog .ready { background: #e0b04a; } .prog .answered { background: #5d9be0; } .prog .asked { background: #f2cf85; } .prog .open { background: #d9dfe1; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.thread { display: grid; gap: 4px; margin-top: 6px; }
.msg { font-size: 12px; padding: 4px 8px; border-radius: 8px; max-width: 520px; }
.msg.client { background: #fff4d6; justify-self: start; } .msg.agent { background: var(--soft); justify-self: end; }
.msg .who { color: var(--muted); font-size: 11px; margin-right: 6px; }
.cards2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(640px, 100%), 1fr)); }
a.btn { text-decoration: none; color: inherit; display: inline-block; }
.kpi { display: flex; gap: 10px; flex-wrap: wrap; }
.presence { font-size: 12px; color: var(--hi); }
tr.booked td { color: #6b5b95; }
/* v0.5 금융거래처 현황 */
.warn-box { border-color: #e9c46a !important; background: #fffaf0; }
span.warn, div.warn { color: #9a6b00; }
/* v0.6 자금일보 */
.dlg.xl { width: min(1480px, 98vw); max-height: 94vh; }
.dlg-body { padding: 18px 20px; display: grid; gap: 4px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #eef8fa; }
tr.grp td { background: #f2f6f7; font-weight: 600; }
tr.sub-g td:first-child { color: var(--lo); }
tr.diffrow td { background: #fff1ef; }
tr.unposted td { color: #7b8a8f; }
tr.flash td { background: #ffe9a8 !important; transition: background .4s; }
.chip { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; background: #eef1f2; margin-right: 4px; white-space: nowrap; }
.chip.book_only { background: var(--lo-bg); color: var(--lo); } .chip.amount { background: var(--mid-bg); color: var(--mid); }
.chip.opening { background: #e6f0ff; color: #0b5ea8; } .chip.gap { background: #efe9fb; color: #5b3aa0; } .chip.adjust { background: var(--hi-bg); color: var(--hi); }
.hint { font-size: 11.5px; color: #6a4b00; background: #fff7e0; border-radius: 5px; padding: 1px 6px; margin-top: 2px; }
.hint.dup, .hint.direct_sale { background: #fde8e5; color: #8f2b22; }
table.ledger td, table.ledger th { padding: 4px 6px; }
.cash-tbl { max-height: calc(100vh - 330px); }
.stat-box .v.ok { color: var(--hi); } .stat-box .v.bad { color: var(--lo); } .stat-box .v.muted { color: var(--muted); }
.cash-tbl td:nth-child(3) { min-width: 200px; }
.cash-tbl td:first-child { white-space: nowrap; }
table.ledger td:nth-child(6) { min-width: 230px; }
/* v0.6 통장정리·채권채무 */
.subtabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.subtabs button { border: 1px solid var(--line); border-bottom: 0; background: #f7fafb; padding: 7px 14px; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--muted); }
.subtabs button.on { background: #fff; color: var(--brand); font-weight: 600; box-shadow: inset 0 3px 0 var(--brand); }
.actbar { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.grp-tbl tr.sel td { background: #dff1f5; }
tr.gsub > td { background: #fafcfc; padding: 4px 8px 10px; }
table.inner { font-size: 12.5px; } table.inner td { border-bottom: 1px dashed var(--line); padding: 3px 6px; }
.ctx { position: fixed; z-index: 100; background: #fff; border: 1px solid #c9d6da; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 220px; padding: 4px 0; font-size: 13px; }
.ctx .ci { padding: 6px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; position: relative; white-space: nowrap; }
.ctx .ci:hover { background: #eef8fa; }
.ctx .ci.dis { color: #b5c0c3; cursor: default; }
.ctx .ci.sub > .inner { display: none; position: absolute; left: 100%; top: -4px; }
.ctx .ci.sub:hover > .inner { display: block; }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
td.warn { color: #9a6b00; }
table.ed input, table.ed select { padding: 4px 6px; font-size: 13px; }
table.gridtbl tr.sel td { background: #e4f3f6; }