: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; }

/* 상단 — v0.15.0 한 줄 머리글 (회사 ▾ · 이름 ▾ 작은 메뉴) + 메뉴 두 줄 */
.top { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--brand); color: #fff; flex-wrap: wrap; }
.top .brand { display: flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; }
.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: 0; align-items: center; flex-wrap: wrap; } /* 1366 이상은 한 줄 · 좁으면 이 안에서 줄바꿈 */
.top .company-pick .btn { white-space: nowrap; }
@media (max-width: 1480px) { .top .company-pick .kbd { display: none; } }
.top select { min-width: 220px; max-width: 420px; flex: 1 1 280px; border: 0; color: var(--ink); }
.top .btn.ghost { color: #fff; border-color: #3a8a99; }
.top .me { display: flex; gap: 8px; align-items: center; }
.dd { position: relative; }
.dd-btn { white-space: nowrap; }
.dd-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 70; min-width: 170px; display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(10,30,35,.2); padding: 4px; }
.dd-list.right { left: auto; right: 0; }
.dd-list button { border: 0; background: none; text-align: left; padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; color: var(--ink); }
.dd-list button:hover, .dd-list button:focus { background: var(--soft); outline: none; }
.tabs { background: #fff; border-bottom: 1px solid var(--line); }
.tabs .menus { display: flex; align-items: stretch; gap: 2px; padding: 0 12px; }
.tabs .menus button { border: 0; background: none; padding: 8px 16px 6px; cursor: pointer; color: #4a5b60; font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs .menus button:hover { color: var(--brand); }
.tabs .menus button.on { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .menus .menu-set { margin-left: auto; font-weight: 500; }
.tabs .subs { display: flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--soft); border-top: 1px solid var(--line); }
.tabs .subs button { border: 1px solid transparent; background: none; border-radius: 999px; padding: 2px 14px; cursor: pointer; color: #3b4d52; font-size: 13.5px; white-space: nowrap; }
.tabs .subs button:hover { background: #fff; border-color: var(--line); }
.tabs .subs button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tabs .subs .sub-hint { margin-left: auto; font-size: 11px; color: #8fa3a8; }
@media (max-width: 1100px) { .tabs .menus, .tabs .subs { overflow-x: auto; scrollbar-width: none; } .tabs .menus button { padding: 8px 11px 6px; } .tabs .subs .sub-hint { display: none; } } /* 좁은 창: 메뉴 줄 안에서만 옆으로 */
/* 화면 제목줄: 메뉴 › 화면 · 한 줄 설명 (main 과 같은 폭) */
.scrhead { display: flex; align-items: baseline; gap: 6px; max-width: 1500px; margin: 0 auto; padding: 9px 20px 0; font-size: 15px; white-space: nowrap; min-width: 0; }
.scrhead.wide { max-width: none; padding: 7px 16px 0; }
.scrhead .sh-sep { color: #9aabb0; }
.scrhead .sh-d { color: var(--muted); font-size: 13px; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scrhead .grow { flex: 1; }
.scrhead .sh-k { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0 2px; white-space: nowrap; }
.scrhead .sh-k:hover { color: var(--brand); }
main { padding: 10px 20px 20px; max-width: 1500px; margin: 0 auto; } /* v0.15.0 위 여백은 화면 제목줄 */
h2 { font-size: 18px; margin: 0 0 4px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.lead { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }

/* 카드·그리드 */
.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 - 230px); } /* 2.2.5 요약이 한 줄이 되어 표를 키움 (290 → 230) */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
/* common-09 (10-17): 행 단추가 있는 표는 창 폭으로 늘리지 않는다 — 열은 내용(또는 끌어 둔) 폭만, 남는 폭은 오른쪽 빈 공간 → 행 단추가 마지막 데이터 칸 바로 옆
   (단추 없는 큰 작업 표 — 할 일 › 통장 등 — 는 열이 내용에 따라 흔들리지 않게 지금처럼 전체 폭 · table.sg 는 화면이 표 폭을 직접 줌 · 열 폭을 끌면 grid.js 가 px 로 고정) */
:is(.tbl-wrap, .sg-wrap) > table:not(.sg):has(> tbody > tr > td:last-child > :is(button, .btn, a.btn)) { width: auto; }
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, span.dep, b.dep { color: #c0392b; } td.wd, span.wd, b.wd { color: #0b5ea8; } /* 통장 관례: 입금 빨강 · 출금 파랑 */
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.buy { background: var(--soft); color: var(--brand); font-weight: 500; vertical-align: middle; } /* 2.3.0 (1015 09:46 회계사님 '적요 칸의 분홍 구매대장 글자가 시각적으로 복잡') 적요는 통장 원문만 · 구매 표시는 상태 칸에 다른 단계와 같은 모양 */ /* 2.2.13 할 일 줄의 구매대장 표시 */
.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; }
/* 2.2.5 화면 표준 '요약 줄' (1014 00:16 회계사님 "쓸모없는 정보만 크게 보이는 카드 극혐 — 한 줄로, 아래 표를 키우고, 더블클릭하면 관련 정보"):
   .kpi = 한 줄 띠 · .stat-box = 「이름 값」 한 쌍 · data-open 이 있으면 더블클릭 → 관련 정보(statBind) */
.stat-box { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; line-height: 1.45; }
.stat-box .k { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.stat-box .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-box .v span { font-size: 12px !important; font-weight: 400; }
.stat-box > .muted { flex-basis: 100%; font-size: 11px !important; line-height: 1.3; max-width: 320px; }
.stat-box[data-open] { cursor: pointer; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.stat-box[data-open]:hover { background: #e4f1f3; } .stat-box[data-open].on { background: #d6ebee; box-shadow: inset 0 -2px 0 var(--pri, #1b6f7a); }

/* 대화상자 */
.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,.18); } /* v0.13.1 뒤 화면이 보이게 옅게 */
.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); }
.banner.warn { background: #fff4d6; color: #7a5600; } /* v0.15.0 이월잔액 검증 기간 다름 등 */
.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; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; background: #f4fafb; border: 1px solid #e3eef0; border-radius: 6px; padding: 4px 10px; margin: 0 0 8px; }
.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(2) { min-width: 150px; }
.cash-tbl td:first-child { white-space: nowrap; }
.cash-tbl table { font-size: 12.5px; } .cash-tbl th, .cash-tbl td { padding: 5px 6px; } .cash-tbl td.cash-st { min-width: 170px; } /* v0.15.0 1366에서 상태·원인 칸까지 보이게 */
.txv table { font-size: 12.5px; } .txv th, .txv td { padding: 5px 6px; } /* v0.15.0 원천세 신고서 ↔ 급여대장 표 (신고·대장 위아래) */
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; }
/* v0.15.5 거래처 원장·통장대체 점검 한 팝업: 짝 없는 줄 */
tr.unpaired td { background: #fff5f2; }
tr.unpaired.sel td { background: #fde9e3; }
tr[data-vk].unpaired { cursor: pointer; }
.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; }
.co-badge { font-size: 13px; font-weight: 600; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; border-radius: 999px; padding: 2px 12px; margin-left: 8px; vertical-align: 2px; }
.btn.danger-bg { background: var(--lo); border-color: var(--lo); }

/* 머리글 클릭 정렬 */
table:not(.ed):not(.gridtbl):not(.inner):not(.nosort) > thead th:not(:empty) { cursor: pointer; user-select: none; }
table:not(.ed):not(.gridtbl):not(.inner):not(.nosort) > thead th:not(:empty):hover { background: #eaf3f5; }
th.s-asc::after { content: ' ▲'; font-size: 10px; color: var(--brand); }
th.s-desc::after { content: ' ▼'; font-size: 10px; color: var(--brand); }

.pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pick-row input[type=number] { width: 130px; }
.pick-prev { max-height: 260px; overflow: auto; font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fafcfc; }
.pick-prev span { display: inline-block; margin: 2px 8px 2px 0; }

/* 진행 현황 → v0.15.0 홈 (.todo — 맨 아래) · 옛 .step 규칙은 단계별 일괄(.work .step)을 깨뜨려 뺌 */
.home { max-width: 1100px; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.p-done { background: #e3f3e8; color: #2e7d4f; } .p-todo { background: #e4f0f3; color: #1f5f6b; } .p-warn { background: #fbe3df; color: #b23b2e; }
.p-skip, .p-wait, .p-soon { background: #eef0f1; color: #6b7a7e; }

/* 처리 결과 줄 */
.resultbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; align-items: center; margin: 0; padding: 9px 20px; background: #e9f6ee; border-bottom: 1px solid #bfe3cb; font-size: 14px; }
.resultbar .ico { width: 22px; height: 22px; border-radius: 50%; background: #2e8b57; color: #fff; display: grid; place-items: center; font-size: 13px; }
/* 급여 */
.pay-up .drop { padding: 22px; text-align: center; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.emp { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafcfc; }
#payDlg { padding: 20px 24px; width: min(1100px, 96vw); }

/* 전표 처리 (세 칸) */
main.wide { max-width: none; padding: 10px 16px 0; }
.proc { display: grid; grid-template-rows: auto auto auto minmax(160px, 1fr) auto auto; height: calc(100vh - 120px); gap: 6px; }
.pc-tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--line); }
.pc-tabs > button[data-ev] { border: 0; background: none; padding: 8px 14px; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pc-tabs > button[data-ev].on { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.pc-filter, .pc-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc-filter input, .pc-filter select { padding: 5px 8px; }
.chip-f { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #3b4d52; }
.chip-f.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-f b { font-weight: 700; margin-left: 2px; }
.pc-list { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; outline: none; }
.pc-list:focus { border-color: var(--brand-2); }
.pc-tbl { font-size: 13px; }
.pc-tbl td { padding: 5px 8px; vertical-align: middle; }
.pc-tbl th[data-sk] { cursor: pointer; user-select: none; }
.pc-tbl tr.cur td { background: #dff0f3 !important; }
.pc-tbl tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.pc-tbl tr.sel td { background: #eef7f0; }
.pc-tbl tbody tr { cursor: default; }
.pc-lines { border: 1px solid var(--line); border-radius: 8px; background: #fff; max-height: 230px; overflow: auto; display: flex; flex-direction: column; }
.pc-lines table th { position: static; }
.pc-acts { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 8px; margin-top: auto; border-top: 1px solid var(--line); }
.pc-reason { background: #f7fafb; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; min-height: 36px; }
.ver { font-size: 11px; color: #cfe6ea; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 0 7px; margin-left: 6px; }
.loan-credit { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; } .loan-credit input { padding: 4px 6px; }

/* v0.10 — 행 선택 공통 · Enter 규칙 · 거래처 필수 · 정리 내역 · 전체 잔액 · 시스템 업데이트 */
.selbox:focus { outline: none; }
.selbox:focus-within, .selbox:focus { border-color: #9fcad3; }
.selbox tr[data-k] { cursor: default; }
.selbox tr.cur:not(.sel) td { background: #f3fafb; }
.selbox tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
.need-tag { font-size: 11px; font-weight: 600; color: var(--lo); background: var(--lo-bg); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
input.need { border-color: #e2a198; background: #fff8f6; }
.psug { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; }
.psug:empty { display: none; }
.chip-p { border: 1px solid #c9dde2; background: #f4fafb; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.chip-p:hover { border-color: var(--brand-2); background: #e6f4f7; }
.chip-p span { color: var(--muted); font-size: 11px; margin-left: 5px; }
.seg-btn { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg-btn button { border: 0; background: #fff; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.seg-btn button + button { border-left: 1px solid var(--line); }
.seg-btn button.on { background: var(--brand); color: #fff; }
.all-tbl tr.acct-h td { font-weight: 600; }
.all-tbl tr.acct-h .tw { display: inline-block; width: 12px; color: var(--muted); }
.all-tbl td.flags { min-width: 160px; max-width: 360px; }
.all-tbl .fl-text { display: none; font-size: 11.5px; color: #7a5a1a; margin-top: 2px; }
.all-tbl tr.sel .fl-text, .all-tbl tr.cur .fl-text { display: block; }
.chip.fl-neg, .chip.fl-nop { background: var(--lo-bg); color: var(--lo); } .chip.fl-biz { background: #efe9fb; color: #5b3aa0; }
.chip.fl-pair, .chip.fl-carry { background: var(--mid-bg); color: var(--mid); } .chip.fl-bank { background: #e6f0ff; color: #0b5ea8; }
.mod { color: #1f6f8b; font-weight: 600; }
tr.pl-row td { background: #fff8f6; }
tr.pl-row.sel td { background: #f6e9e6; }
.hfilter { padding: 10px 14px; }
.hfilter input, .hfilter select { padding: 5px 8px; }
code.cmd { display: inline-block; margin-top: 4px; background: #16353c; color: #d9f3f7; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; user-select: all; }
.flash-t { background: #ffe9a8; border-radius: 6px; padding: 2px 6px; transition: background .4s; }
.btn.primary .kbd { color: #d6eef2; border-color: rgba(255,255,255,.45); }

/* v0.11 — 전표 처리 바로 입력 · 통합 검색 칸 (요청 9·10) */
.proc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "filter" "chips" "list" "lines" "reason"; }
.proc > .pc-tabs { grid-area: tabs; } .proc > .pc-filter { grid-area: filter; } .proc > .pc-chips { grid-area: chips; }
.proc > .pc-list { grid-area: list; } .proc > .pc-lines { grid-area: lines; } .proc > .pc-reason { grid-area: reason; }
.proc > .pc-side { grid-area: side; display: none; }
.proc.side { grid-template-columns: minmax(0, 1fr) minmax(330px, 30%); grid-template-areas: "tabs tabs" "filter filter" "chips chips" "list side" "lines side" "reason side"; }
.proc.side > .pc-side { display: flex; }
.btn.on { background: var(--soft); border-color: var(--brand-2); color: var(--brand); font-weight: 600; }
.pc-learn { font-size: 12.5px; color: #3b4d52; display: inline-flex; gap: 4px; align-items: center; border: 1px dashed #c9dde2; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.pc-tbl td.ie { min-width: 96px; font-size: 12.5px; }
.pc-tbl td.ie-a { min-width: 130px; } .pc-tbl td.ie-p { min-width: 130px; }
.pc-tbl .sugg, .sugg-row td { color: #1b62c9; }
.pc-tbl tr.editing td { background: #fffbe8 !important; }
.pc-tbl tr.editing td.ie { padding: 2px 3px; }
.pc-tbl tr.with-edit td { background: #fff5d1 !important; }
.pc-tbl tr.just td { background: #f1faf3; }
.pc-tbl tr.just.cur td { background: #dff0f3 !important; }
.ie-in { width: 100%; min-width: 110px; padding: 3px 6px; font-size: 12.5px; border: 1px solid var(--brand-2); border-radius: 4px; background: #fff; }
.ie-in::placeholder { color: #1b62c9; opacity: .7; }
.ie-in.need { border-color: #e2a198; background: #fff5f2; }
.pc-prev { padding: 8px 10px; font-size: 13px; }
.p-skip { background: #eef1f2; color: #66777d; }
.pc-side { flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfd; overflow: hidden; margin-bottom: 8px; }
.ps-head { display: flex; gap: 6px; align-items: center; padding: 6px 8px 4px 10px; }
.ps-head .btn { padding: 0 8px; font-size: 16px; }
#psQ { margin: 0 8px 6px; padding: 5px 8px; }
.ps-body { overflow: auto; flex: 1; min-height: 0; padding-bottom: 8px; }
.ps-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 8px; font-size: 12.5px; }
.ps-card.dim { opacity: .62; }
.ps-t { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ps-acc { display: flex; gap: 6px 12px; flex-wrap: wrap; margin: 4px 0; }
.ps-acc span { background: #f3f8f9; border-radius: 6px; padding: 1px 7px; }
.ps-acc span.neg { background: #fde8ec; color: #b0264a; }
.ps-items { width: 100%; font-size: 12px; margin-top: 4px; }
.ps-items td { padding: 2px 4px; border-bottom: 1px solid #f0f3f4; }
.ps-items td.memo { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.ps-acts .btn { padding: 3px 8px; font-size: 12px; }

/* v0.11 — 일반전표 · 작업함 탭 · 잔액상계검토 · 하단창 (요청 15·17) */
.gn-tbl input { width: 100%; padding: 4px 6px; }
.gn-tbl input.num { text-align: right; }
.gn-tbl td { padding: 3px 4px; }
.gn-tbl input::placeholder { color: #1b62c9; opacity: .65; }
.gn-tplbox { background: #f7fbfc; border: 1px solid #d5e8ec; border-radius: 8px; padding: 8px 12px; margin-top: 6px; font-size: 13px; }
.gn-tplbox label { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; color: #3b4d52; }
.gn-tplbox input { padding: 4px 7px; }
b.warn { color: var(--mid); }
.wtabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }
.wtabs .btn { padding: 3px 10px; font-size: 12.5px; }
.badge.cls-sales { background: #e6f0ff; color: #0b5ea8; } .badge.cls-buys { background: #fdf1d8; color: #8a5a00; } .badge.cls-other { background: #efe9fb; color: #5b3aa0; }
.off-tbl td { vertical-align: top; }
.off-tbl td > div { white-space: nowrap; padding: 1px 0; }
.off-tbl .btn.ghost { padding: 0 6px; font-size: 11.5px; }
.negbox { background: #fde8ec; color: #b0264a; border-radius: 4px; padding: 0 4px !important; }
.gl-bottom { margin-top: 8px; border: 1px solid #b9d7dd; border-radius: 10px; background: #fff; padding: 10px 12px; box-shadow: 0 -2px 8px rgba(17, 96, 111, .06); }
.gl-split > .tbl-wrap { max-height: 34vh; }
tr.bot td { background: #fff4cf !important; }

/* v0.13 세금 납부 대사 */
.tax-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; margin-bottom: 14px; align-items: start; }
.tax-det { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow: auto; }
.tax-det .kv { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; font-size: 13px; }
#txWrap tr[data-k] { cursor: pointer; }
#txWrap tr.cur td { background: #eef6f8; }
#txWrap tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 1100px) { .tax-grid { grid-template-columns: 1fr; } .tax-det { position: static; max-height: none; } }

/* v0.13.1 떠 있는 창 — 제목줄로 옮기기, 뒤 화면 보며 입력 */
dialog.float { position: fixed; inset: auto; margin: 0; z-index: 900; max-height: 94vh; overflow: auto; border: 1px solid #b9d3d9; box-shadow: 0 14px 44px rgba(0,0,0,.28); }
dialog.float.resizable { resize: both; }
.dlg h3, .win-head { cursor: move; user-select: none; }
.dlg h3 button, .dlg h3 input, .dlg h3 select, .dlg h3 a, .win-head button { cursor: pointer; }
dialog.moving { opacity: .93; }
.win-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #eef6f8; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; border-radius: 12px 12px 0 0; }
.top .company-pick .kbd { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.gnwin { width: min(1240px, 97vw); }
.gnwin .dlg-body { padding: 10px 14px 12px; }
.gnwin .gn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.gnwin.noref .gn-grid { grid-template-columns: 1fr; } .gnwin.noref #gnRef { display: none; }
.gn-ref { border-left: 1px solid var(--line); padding: 6px 0 0 12px; font-size: 12.5px; max-height: 60vh; overflow: auto; }
.gn-ref.loading { opacity: .55; }
.gn-kpi { display: flex; gap: 14px; flex-wrap: wrap; background: #f4fafb; border-radius: 6px; padding: 5px 8px; }
table.mini { font-size: 12px; width: 100%; } table.mini td { padding: 2px 4px; } table.mini .btn { padding: 0 6px; font-size: 11.5px; }

/* ② 계정 줄 → 거래처별 명세 (v0.13.2) */
.verify tr.vrow{cursor:pointer}.verify tr.vrow:hover td{background:#f4fafb}.verify tr.vrow.open td{background:#eef6f8}.vtg{display:inline-block;width:12px;color:var(--muted)}
.verify tr.vsub td{background:#fbfdfd;font-size:12.5px;padding-top:4px;padding-bottom:4px}.verify tr.vsum td{border-top:1px solid #d6e6ea}
/* 통장 거래 → 일반전표 (v0.13.2) */
.gnwin tr.gn-lock input{background:#eef3f4;color:#44565b;border-color:#dfe8ea;cursor:default}.gnwin .gn-bank .dep{color:#c0392b;font-weight:600}.gnwin .gn-bank .wd{color:#1f5fbf;font-weight:600}
.off-tbl .off-line{cursor:pointer;border-radius:5px;padding:1px 4px}.off-tbl .off-line:hover{background:#eef6f8}.off-tbl .off-line.on{background:#d8eef3;outline:1px solid #7fb9c6}.off-tbl tr.sel td{background:#f3f9fa}
/* v0.14 위하고에서 받기 */
#pullBtn.busy { border-color: var(--brand-2); color: var(--brand); background: #eef7f9; }

/* v0.14.1 찾기 (Ctrl+F) */
.fdwin { width: min(97vw, max(720px, 60vw)); height: min(760px, 90vh); display: none; padding: 0; min-width: 520px; min-height: 300px; } /* v0.15.0 기본 = 화면 60% (1366에서 뒤 목록이 보이게) */
.fdwin[open] { display: flex; flex-direction: column; }
.fdwin .win-head .dep, .fdwin .dep { color: #c0392b; } .fdwin .wd { color: #1f5fbf; }
.fdwin .dlg-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; flex: 1; min-height: 0; }
.fd-filter { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12.5px; }
.fd-filter label { display: inline-flex; gap: 4px; align-items: center; }
.fd-filter input[type=date] { width: 132px; }
.fd-qb { padding: 1px 7px; font-size: 12px; }
.fd-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fd-tabs .chip-f[disabled] { opacity: .45; cursor: default; }
.fd-list { flex: 1; min-height: 160px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; outline: none; }
.fd-list:focus { border-color: #7fb9c6; box-shadow: 0 0 0 2px #d8eef3; }
.fd-list.loading { opacity: .5; }
/* 2.5.56 (gijang-29) 허리 경계 · 고른 거래 고정 줄 */
.fdwin .fd-split { flex: 0 0 6px; cursor: row-resize; position: relative; margin: -2px 30%; border-radius: 4px; }
.fdwin .fd-split::after { content: ''; position: absolute; left: 50%; top: 2px; width: 44px; margin-left: -22px; height: 2px; border-radius: 2px; background: #c9d6da; }
.fdwin .fd-split:hover, .fdwin .fd-split.on { background: #d8eef3; }
.fdwin:has(#fdDet.off) .fd-split { display: none; }
.fd-tbl tr.self td { background: #f3f5f6; color: #55666b; border-bottom: 2px solid #c9d6da; }
.fd-tbl tr.self .fd-src { background: #e2e8ea; color: #33424a; font-weight: 600; }
.fd-tbl tr.self td.src .fd-src { max-width: 220px; }
.fd-tbl { width: 100%; font-size: 12.5px; }
.fd-tbl thead th { position: sticky; top: 0; background: #f4f8f9; z-index: 1; }
.fd-tbl td { padding: 3px 6px; vertical-align: middle; }
.fd-tbl tr[data-i] { cursor: pointer; }
.fd-tbl tr[data-i]:hover td { background: #f6fbfc; }
.fd-tbl tr.cur td { background: #e3f1f5 !important; }
.fd-tbl tr.sel td { background: #d3ecd9; }
.fd-tbl tr.cur.sel td { background: #c4e5cd !important; }
.fd-tbl tr.exact td.amt { font-weight: 700; color: #166534; }
.fd-tbl tr.dim td { color: #8a9a9e; }
/* v0.16.1 (1001-FD) 묶음 없이 한 표 — 한 전표의 이어진 줄(cont)은 위 줄과 붙여서: 사이 경계선 없음 · 흐린 글 · '↳ 위하고 #…' */
.fd-tbl tr:has(+ tr.cont) td { border-bottom-color: transparent; }
.fd-tbl tr.cont td { color: #6b7d82; }
.fd-tbl tr.cont .fd-src { background: transparent; color: #8a9a9e; padding-left: 0; }
/* v0.15.0 한 줄로: 거래처·계정은 잘라서(툴팁에 전체), 적요는 남는 너비만 — 좁은 창(1366)에서 금액 칸이 밀려나지 않게 (적요가 먼저 줄어듦) */
.fd-tbl .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-tbl th.cb, .fd-tbl td.cb { width: 20px; padding-right: 0; }
.fd-tbl td.src { white-space: nowrap; }
.fd-tbl td.src .fd-src { max-width: 170px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.fd-tbl td.who .ell { max-width: 200px; }
.fd-tbl td.acct .ell { max-width: 150px; } /* 계정은 늘 '251 외상매입금' — 좁으면 … (툴팁에 전체) */
.fd-tbl th.sd, .fd-tbl td.sd { width: 24px; text-align: center; padding-left: 2px; padding-right: 2px; }
.fd-tbl td.sd { font-weight: 600; color: #3b5358; }
.fd-tbl td.memo { width: 100%; max-width: 0; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-tbl th.memo { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v0.16.1 (1001-FD) 머리글도 적요 칸이 먼저 줄어들게 */
.fd-tbl .fd-tm, .fd-tbl .fd-stl { font-size: 11px; }
.fdwin.narrow .fd-tbl td, .fdwin.narrow .fd-tbl th { padding: 3px 4px; }
.fdwin.narrow .fd-tbl .cb { padding-right: 0; } .fdwin.narrow .fd-tbl .sd { padding-left: 2px; padding-right: 2px; }
.fdwin.narrow .fd-tbl td.who .ell { max-width: 92px; } .fdwin.narrow .fd-tbl td.who .fd-pc { display: none; } /* 거래처 코드는 툴팁에 */
.fdwin.narrow .fd-tbl td.acct .ell { max-width: 108px; }
.fdwin.narrow .fd-tbl td.src .fd-src { max-width: 140px; } /* '↳ 위하고 #00001'까지는 다 보이게 (매입매출 #…은 …) */
.fdwin.narrow .fd-dup, .fdwin.narrow .fd-late, .fdwin.narrow .fd-of, .fdwin.narrow .fd-tm { display: none; } /* v0.16.1 (1001-FD) 좁은 창(1366·1920 기본 너비): 같은 금액 ×N·+N일은 줄 툴팁·경고 줄로 — 가로 스크롤 없이 원장·전표 단추까지 보이게 */
.fdwin.narrow .fd-tbl td.st .pill, .fdwin.narrow .fd-tbl td.how .pill { font-size: 11px; padding: 0 5px; }
.fdwin.narrow .fd-tools .btn { padding: 0 3px; font-size: 11px; }
.fd-tools .btn { padding: 0 5px; font-size: 11.5px; }
.fd-src { display: inline-block; padding: 0 6px; border-radius: 9px; font-size: 11px; background: #eef3f4; color: #3b5358; }
.fd-src.s-open { background: #fff4de; color: #8a5a00; } .fd-src.s-sum, .fd-src.s-vsum { background: #fde9e1; color: #9a3b12; }
.fd-src.s-sp { background: #e6f0ff; color: #1f4f9a; } .fd-src.s-journal { background: #eef0f7; color: #45507a; } .fd-src.s-bank { background: #e7f6ee; color: #1d6b41; }
/* 2.5.93 (gijang-56) 출처 = 「무엇 · 방향 · 번호」 — 입금·매출·채권 빨강 · 출금·매입·채무 파랑 (금액 칸과 같은 색) · 길면 두 줄 (숨기지 않음) */
.fd-src.dep, .fd-tbl tr.self .fd-src.dep { background: #fdecea; color: #c0392b; } .fd-src.wd, .fd-tbl tr.self .fd-src.wd { background: #e8f0fb; color: #1f5fbf; }
.fd-tbl td.src .fd-src { white-space: normal !important; line-height: 1.3; padding-top: 1px; padding-bottom: 1px; }
.fd-vp { font-size: 12.5px; color: #33424a; background: #f3f6f7; border: 1px solid #d7e1e4; border-radius: 6px; padding: 3px 8px; margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fd-vp.kw { background: #fff8e6; border-color: #f1dfb0; color: #6b4800; } .fd-vp .btn { margin-left: auto; }
.fd-hp { font-size: 12.5px; color: #0b5e3b; background: #e9f8ef; border: 1px solid #b7e2c8; border-radius: 6px; padding: 3px 8px; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v0.17.8 (1002-FD2) 이 창에서 고른 짝 */
.fd-dup-dlg { max-width: 640px; } .fd-dup-dlg h3 { margin: 0 0 6px; }
.fd-warn { font-size: 12px; color: #8a5a00; background: #fff8e6; border: 1px solid #f1dfb0; border-radius: 6px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.fd-exp { font-size: 12px; color: #2f5d50; background: #eef7f3; border: 1px solid #cfe6dc; border-radius: 6px; padding: 2px 8px; flex: 0 0 auto; line-height: 1.5; } /* 2.5.84 gijang-48 대표자로 넓혀 찾음 */
.fd-help { font-size: 11.5px; } .fd-help.warn { color: #9a6b00; font-weight: 600; }
.fd-seln { font-size: 12px; }
.pc2-tag.fdp { background: #e7f6ee; color: #1d6b41; } /* v0.16.1 (1001-FD) 할 일: 찾기로 고름 */
@media (max-width: 720px) { .fd-filter input[type=date] { width: 120px; } }

/* v0.14.2 거래처·계정 칸: 코드·이름이 아직 거래처/계정으로 안 바뀜 */
input.bad { border-color: var(--lo) !important; box-shadow: 0 0 0 2px var(--lo-bg); }
td.warn, div.warn, span.warn { color: var(--mid); }
/* v0.15.0 증빙 📎 · 되돌리기 알림 · 작은 입력 창 (엔지니어 D) */
.att-b { border: 1px solid #d9c27a; background: #fff8e1; border-radius: 6px; padding: 0 5px; font-size: 12px; line-height: 18px; cursor: pointer; vertical-align: middle; }
.att-b:hover { background: #ffefb8; }
.att-dlg { width: min(1100px, 96vw); } .att-dlg .row > .grow { flex: 1; }
.att-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; margin-top: 8px; align-items: start; }
.att-list { display: grid; gap: 4px; max-height: 70vh; overflow: auto; }
.att-item { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; word-break: break-all; }
.att-item.on { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.att-item .muted { font-size: 11px; }
.att-view { min-height: 300px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fafcfc; }
.att-view img { max-width: 100%; max-height: 66vh; display: block; margin: 0 auto; }
.att-view iframe { width: 100%; height: 66vh; border: 0; background: #fff; }
.panel.flash { box-shadow: 0 0 0 3px #f2c14e; transition: box-shadow .3s; }
.toast.undo-toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; bottom: 64px; }
.toast.undo-toast:not(.on) { pointer-events: none; }
.toast.undo-toast .btn { padding: 3px 10px; background: #fff; color: #16353c; border-color: #fff; }
@media (max-width: 760px) { .att-grid { grid-template-columns: 1fr; } }

/* v0.15.0 (F) 메뉴 두 줄 · 홈 '이번 달 할 일' · 단축키 도움말 */
main.wide .proc { height: calc(100vh - var(--chrome, 150px) - 16px); } /* --chrome = 머리글+메뉴+결과 줄+제목줄 높이 (setTabs·ResizeObserver 가 잼) */
.home-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.home-top .co { font-size: 17px; }
.home-top .grow { flex: 1; }
ol.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todo .td { display: grid; grid-template-columns: 28px 118px 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; min-height: 52px; }
.todo .td-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: #eef2f3; color: #4a5b60; }
.todo .td-t { font-size: 15px; white-space: nowrap; }
.todo .pill { justify-self: start; white-space: nowrap; font-size: 12px; }
.todo .td-b { min-width: 0; }
.todo .td-k { font-size: 13px; color: #3b4d52; display: flex; align-items: center; gap: 10px; min-width: 0; }
.todo .td-kt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.todo .td-k .bar { flex: 0 0 120px; height: 6px; background: #eef2f3; border-radius: 3px; overflow: hidden; }
.todo .td-k .bar i { display: block; height: 100%; background: #2e8b57; }
.todo .td-s { font-size: 12.5px; color: #8a5a00; display: flex; gap: 10px; align-items: center; margin-top: 2px; min-width: 0; }
.todo .td-s .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.todo .lnk { border: 0; background: none; padding: 0; color: var(--brand); font-size: 12.5px; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.todo .td-a .btn { min-width: 120px; }
.todo .td.st-done { background: #f7fbf8; } .todo .td.st-done .td-n { background: #2e8b57; color: #fff; } .todo .td.st-done .td-t { color: #4a6b55; }
.todo .td.st-skip, .todo .td.st-wait, .todo .td.st-soon { opacity: .75; }
.todo .td.st-warn .td-n { background: #fbe3df; color: #b23b2e; }
.todo .td.is-next { border: 2px solid var(--brand); padding: 7px 13px; box-shadow: 0 2px 10px rgba(31,95,107,.12); }
.todo .td.is-next .td-n { background: var(--brand); color: #fff; }
@media (max-width: 900px) { .todo .td { grid-template-columns: 28px 1fr auto; } .todo .td-b { grid-column: 1 / -1; } }
.keyhelp { width: min(1180px, 96vw); max-height: calc(100vh - 24px); overflow: auto; }
.keyhelp .kh-grid { columns: 3 320px; column-gap: 16px; }
.keyhelp section { break-inside: avoid; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.keyhelp section.on { border: 2px solid var(--brand); background: #f6fbfc; }
.keyhelp h4 { margin: 0 0 4px; font-size: 13.5px; }
.keyhelp table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.keyhelp th { text-align: left; white-space: normal; width: 40%; padding: 2px 10px 2px 0; color: var(--brand); font-weight: 600; vertical-align: top; position: static; background: none; border: 0; }
.keyhelp .kh-grid:focus { outline: none; }
.keyhelp td { padding: 2px 0; color: #3b4d52; border: 0; }

/* v0.15.0 (B) 전표 처리 › 할 일: 1366×768에서 목록 10줄 이상 — 윗 칸은 줄바꿈 없이 한 줄씩, 긴 단축키 줄은 '단축키 ?' 풍선, 아래 칸은 낮게·접기 */
.pc-tabs { position: relative; flex-wrap: nowrap; min-width: 0; }
.pc-acts-top { display: inline-flex; gap: 4px; margin-left: 12px; flex-wrap: nowrap; }
.pc-acts-top .btn { padding: 4px 9px; font-size: 12.5px; }
.pc-help { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.pc-help-btn { display: none; padding: 3px 9px; font-size: 12.5px; }
.pc-filter { flex-wrap: nowrap; }
.pc-filter select#pcBank { max-width: 240px; min-width: 0; }
.pc-filter input[type=date] { width: 138px; }
.proc .pc-chips { flex-wrap: nowrap; min-width: 0; } /* v0.15.0 전표 처리만 한 줄 (처리 내역 칩은 줄바꿈) */
.pc-chips .chip-f { padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.chip-f .chip-sub { font-size: 11.5px; opacity: .85; }
#pcSelInfo { white-space: nowrap; }
.pc-lines { max-height: 150px; }
.pc-ltbl td { padding: 3px 8px; }
.pc-ltbl th { padding: 4px 8px; }
.pc-reason { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; min-height: 0; }
.pc-r-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-r-acts { display: inline-flex; gap: 4px; flex: none; }
.pc-r-acts .btn { padding: 3px 9px; font-size: 12.5px; }
.proc.lines-off .pc-lines { display: none; }
.proc.lines-off .pc-lines:has(.pc-prev) { display: flex; } /* 바로 입력 중에는 미리보기를 보여 줌 */
.choice-dlg { width: min(560px, 94vw); }
@media (max-width: 1699px) {
  .pc-help { display: none; }
  .pc-help-btn { display: inline-block; }
  .proc.help-on .pc-help { display: block; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; white-space: normal; max-width: 560px; background: #fff; color: #3b4d52; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; line-height: 1.7; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
}
@media (max-width: 1500px) {
  .pc-tabs > button[data-ev] { padding: 6px 12px; }
}
@media (max-width: 1250px) { .pc-acts-top .btn .kbd { display: none; } }
.pc-tabs > .grow { flex: 1; }
@media (max-height: 820px) {
  .pc-tabs > button[data-ev] { padding: 5px 12px; }
  .pc-lines { max-height: 104px; }
  .proc { gap: 5px; }
  .pc-list .pc-tbl td { padding: 4px 8px; }
}

/* v0.16.0 cash/tax */
/* (930-16) 자금일보: 칩 한 줄 · 계좌 한 줄 */
.cash-bar { flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
.cash-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cash-chips .chip-f { padding: 2px 10px; font-size: 12.5px; white-space: nowrap; }
.chip-f b.bad { color: var(--lo); } .chip-f.on b.bad { color: #fff; }
.cash-tbl { max-height: calc(100vh - 210px); }
.cash-tbl td.cash-nm { min-width: 140px; }
.cash-sub, .cash-dt { font-size: 11px; font-weight: 400; }
.cash-why { font-size: 12px; }
/* (930-13) 올리기 칸 → 자료 받기로 옮김 한 줄 */
.up-moved { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0; padding: 5px 10px; border: 1px dashed var(--line); border-radius: 6px; font-size: 12.5px; background: var(--soft); }
.up-moved .btn { padding: 1px 10px; font-size: 12px; }
.up-moved .up-sum { color: var(--muted); }
/* (930-15) 예정표 밖 세금 = 통장 표 모양 */
.tx-others table { font-size: 12.5px; } .tx-others th, .tx-others td { padding: 4px 6px; }
.tx-others tr[data-k] { cursor: pointer; } .tx-others tr[data-k]:hover td { background: #eef8fa; }
.tx-others .tx-cls { padding: 1px 8px; font-size: 12px; }
.tx-clsd { white-space: nowrap; }
.tx-note { font-size: 11.5px; max-width: 420px; white-space: normal; }
.tx-osel { font-size: 12.5px; }
#txWrap tr[data-k] { cursor: pointer; }
.tx-others td.memo { min-width: 150px; }
.tx-others .tx-clsel { font-size: 12px; padding: 1px 4px; max-width: 110px; }

/* v0.16.0 gl/out */
/* (930-11)(930-12) 거래처 잔액 한 화면 — 칩 · 수지라식 촘촘한 표 · 합계 줄 고정 */
.gb-bar { margin: 2px 0 6px; gap: 6px; }
.gb-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.gb-chips .chip-f { padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.gb-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.chip-f.gb-negc.on { background: #b23b2e; border-color: #b23b2e; }
#gbQ { width: 220px; padding: 5px 8px; }
.gb-per { white-space: nowrap; font-size: 12.5px; } .gb-per input { padding: 4px 6px; }
.gb-act { margin: 0 0 6px; padding: 4px 8px; font-size: 12.5px; }
.gb-wrap { max-height: calc(100vh - var(--chrome, 150px) - 142px); min-height: 160px; }
.gb-tbl th, .gb-tbl td { padding: 3px 7px; white-space: nowrap; vertical-align: middle; }
.gb-tbl td.gb-pn { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.gb-tbl .gb-ck { width: 24px; text-align: center; padding: 3px 2px; }
.gb-tbl tbody tr[data-k] { cursor: pointer; }
.gb-tbl tfoot td { position: sticky; bottom: 0; background: #eef4f5; font-weight: 700; border-top: 2px solid #cfdfe2; z-index: 1; }
.gb-tbl tr.gb-g td { background: #f3f8f9; border-top: 2px solid #d5e3e6; font-size: 12.5px; }
.gb-tbl tr.gb-g .btn { padding: 1px 8px; font-size: 12px; }
.gb-c-sales, .gb-ar { color: #b0452f; } .gb-c-buys, .gb-ap { color: #1f5f9e; } .gb-c-other { color: #6a4fa3; } .gb-c-expense { color: #6b7a7e; }
.gb-ar, .gb-ap { font-weight: 600; }
.gb-help { font-size: 12px; margin: 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (930-18) 위하고 보내기 — 전표 상태 넷 */
.prog .exported, .prog .gb-o-exported { background: #7cc3d3; } .prog .missing, .prog .gb-o-missing { background: #d9534f; }
.prog .gb-o-booked { background: #9b86d6; } .prog .gb-o-ready { background: #e0b04a; }
.badge.missing { background: var(--lo-bg); color: var(--lo); }
.gb-olead { margin-bottom: 10px; }
.gb-opanel { margin-bottom: 10px; padding: 12px 14px; }
.gb-opanel h3 { font-size: 15px; }
.gb-onote { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-onote .btn { padding: 2px 10px; }
.gb-omiss { border-color: #e8b4ae; }
#obTbl td .btn { padding: 2px 8px; font-size: 12px; }
details.gb-opanel > summary { cursor: pointer; }

/* v0.16.0 in/grid */
/* (930-6)(930-13) 자료 받기 › 위하고 자료: 올리기 1~9 접는 칸 · 가상 거래처 점검 · 반제 대상 줄 → 원장 */
details.in-up > summary, details.in-carry > summary { font-size: 14px; line-height: 1.5; }
details.in-up > summary b, details.in-carry > summary > b:first-child { color: var(--brand); }
.in-sum, .in-got { font-size: 12.5px; font-weight: 400; color: #3b4d52; }
.in-sum .warn { font-weight: 400; }
details.in-up[open] > summary, details.in-carry[open] > summary { margin-bottom: 6px; }
details.in-up:not([open]), details.in-carry:not([open]) { padding-top: 9px; padding-bottom: 9px; }
.in-lead { margin: 4px 0 10px; }
.in-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.in-card { display: grid; gap: 8px; align-content: start; min-width: 0; }
.in-card .n { font-size: 12px; background: var(--soft); color: var(--brand); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.in-card .stat { font-size: 13px; color: var(--brand); }
.in-card .pay-up .drop { padding: 12px; }
.in-card.in-wide { grid-column: 1 / -1; }
.in-card.in-full { grid-column: 1 / -1; } /* v0.19.0 15 사업·기타·일용 지급 명세 */
.in-card.in-full .tbl-wrap td, .in-card.in-full .tbl-wrap th { padding: 3px 8px; }
@media (min-width: 1100px) { /* v0.18.0 (1002-1) 4칸 고정 — 9 통장내역은 8 원천세 신고서 바로 아래(4번째 칸), 10 부가세 신고서는 그 왼쪽 3칸 */
  .in-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .in-card.in-bank { grid-column: 4; }
  .in-card.in-wide { grid-column: 1 / span 3; }
}
.bk-up { display: grid; gap: 8px; } .bk-up textarea { width: 100%; height: 64px; resize: vertical; font-size: 12px; } .bk-up select { width: 100%; } /* 부가세 신고서 표·직접 넣기 칸이 좁지 않게 한 줄 전체 */
.in-card.in-wide .tbl-wrap { max-height: 180px; }
.in-card [data-vatbox] input, .in-card [data-vatbox] select { max-width: 100%; }
.in-virt { margin-top: 12px; padding-top: 10px; padding-bottom: 10px; }
.in-vhead { gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.in-vhead .btn { padding: 3px 10px; font-size: 12.5px; }
.in-vl { font-size: 13px; padding: 3px 8px; border-radius: 6px; margin-top: 3px; line-height: 1.6; }
.in-vl.bad { background: #fdecea; color: #8e1f15; } .in-vl.bad b { color: #b3261e; }
.in-vl.warn { background: #fff7e0; color: #6b5200; } .in-vl.warn b { color: #9a6b00; }
.in-vl.in-vok { color: #2e6b4f; font-size: 12.5px; padding-left: 8px; }
.in-vl .muted { font-weight: 400; }
.in-skip { padding: 0 8px; font-size: 12px; margin-left: 6px; }
.in-vhint { font-size: 12px; color: var(--muted); margin: 6px 0 0 8px; }
table.in-basis tr.click td { cursor: pointer; }
.in-why { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.in-imps table { font-size: 12.5px; }
/* (930-4)(930-5) 이월잔액 검증: 올리기·검증 접는 칸 · 거래처 줄 → 원장 */
details.in-carry { margin-bottom: 10px; }
details.in-carry .grid { margin-top: 6px; }
tr.vsub.click, tr.vsub-d.click { cursor: pointer; } tr.vsub.click:hover td, tr.vsub-d.click:hover td { background: #eef8fa; }
a.in-lwa { color: var(--brand); text-decoration: none; border-bottom: 1px dotted var(--brand); }
/* (930-2)(930-18) 통장내역: 위하고에 없음 표시 */
.badge.missing { background: #fdecea; color: #b3261e; }
/* 설정 › 사무소 공통 (관리자) */
.in-so-panel { margin-top: 12px; }
.in-so-panel h3 .muted { font-weight: 400; font-size: 13px; }
.in-so-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-so-key input { width: 320px; max-width: 100%; }
.in-so-note { font-size: 12px; margin: 4px 0 10px; }
.in-so-h { margin: 10px 0 6px; font-size: 14px; } .in-so-h .muted { font-weight: 400; font-size: 12.5px; }
.in-so-vt { max-height: 340px; } .in-so-vt td { padding: 3px 6px; } .in-so-vt input.in-so-n { width: 100%; min-width: 180px; } .in-so-vt input.in-so-c { width: 90px; }
.in-so-acts { margin-top: 6px; gap: 8px; align-items: center; }

/* v0.16.0 proc */
/* (930-10)(930-12) 할 일: 수지라 순서 단계 버튼 줄(할 것 · 처리) · 고른 단계 칸 · 태그 · 적요별 묶어 보기 · 정리 점검 창 · 전표 창 원천징수율 · 설정 자동 처리 규칙 */
.proc { grid-template-rows: auto auto auto auto minmax(140px, 1fr) auto auto; grid-template-areas: "tabs" "filter" "chips" "steps" "list" "lines" "reason"; }
.proc.side { grid-template-areas: "tabs tabs" "filter filter" "chips chips" "steps steps" "list side" "lines side" "reason side"; }
.proc > .pc2-steps { grid-area: steps; min-width: 0; }
.pc2-row { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.pc2-st { flex: 1 1 auto; min-width: 0; max-width: 190px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 2px 8px 3px; font: inherit; cursor: pointer; text-align: left; line-height: 1.25; color: var(--ink); }
.pc2-st:hover { border-color: var(--brand-2); }
.pc2-st .pc2-t { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2-st .pc2-c { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2-st .pc2-c b { color: var(--ink); font-weight: 700; }
.pc2-st.zero .pc2-todo b { color: var(--muted); font-weight: 400; }
.pc2-st .pc2-done { border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
.pc2-st .pc2-done:hover { background: var(--soft); text-decoration: underline; }
.pc2-st.on { border-color: var(--brand); background: var(--soft); box-shadow: inset 0 -2px 0 var(--brand); }
.pc2-st.on .pc2-todo.on, .pc2-st.on .pc2-done.on { color: var(--brand); font-weight: 700; }
.pc2-st.on .pc2-done.on { background: #fff; }
.pc2-ctx { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 6px 3px 10px; border: 1px solid #c9dde2; background: #f4fafb; border-radius: 8px; font-size: 12.5px; min-width: 0; }
.pc2-ctx > b { white-space: nowrap; flex: none; }
.pc2-ctx .pc2-desc { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2-ctx .btn { padding: 2px 9px; font-size: 12.5px; }
@media (max-width: 1250px) { .pc2-ctx .btn .kbd { display: none; } }
.pc2-tag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 999px; background: #e6f0ff; color: #0b5ea8; margin-right: 4px; white-space: nowrap; vertical-align: 1px; font-weight: 600; }
.pc2-tag.t2 { background: var(--mid-bg); color: var(--mid); }
.pc2-tag.dn { background: #eef2f3; color: var(--muted); font-weight: 500; }
.pc-acts-top #pc2Grp { margin-left: 10px; }
.pc2-gtbl tr.pc2-g td { vertical-align: top; }
.pc2-gtbl .pc2-tw { display: inline-block; width: 14px; color: var(--muted); font-size: 11px; }
.pc2-gtbl tr.pc2-mem td { background: #fafcfc; font-size: 12.5px; padding-top: 3px; padding-bottom: 3px; }
.pc2-gtbl tr.pc2-mem td.memo { padding-left: 26px; }
.pc2-gtbl .pill { margin-right: 2px; }
.pc2-lsum .pc2-lx { padding: 0 6px; font-size: 12px; }
tr.pc2-lrow td { background: #fafcfc; font-size: 12px; }
.pc2-hdlg .pc2-hhead { margin-bottom: 8px; } .pc2-hdlg .pc2-hhead > .grow { flex: 1; }
.pc2-hdlg .tab-badge { vertical-align: 1px; }
.gn-tbl tr.pc2-wh td { background: #f4fafb; font-size: 12.5px; padding: 3px 8px; }
.gn-tbl tr.pc2-wh input { width: 64px; padding: 2px 6px; text-align: right; }
.gn-tbl tr.pc2-wh .btn { padding: 1px 8px; font-size: 12px; }
.pc2-kwr { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: start; }
.pc2-kwd { font-size: 12px; }
.pc2-kchips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pc2-kchip { display: inline-flex; align-items: center; border: 1px solid #c9dde2; background: #f4fafb; border-radius: 999px; padding: 1px 4px 1px 10px; font-size: 12.5px; }
.pc2-kchip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 13px; line-height: 1; }
.pc2-kchip button:hover { color: var(--lo); }
.pc2-kadd { width: 130px; padding: 2px 8px; font-size: 12.5px; border-style: dashed; }
.pc2-btbl { width: 100%; font-size: 12.5px; } .pc2-btbl td { padding: 3px 6px; border-bottom: 1px solid var(--line); } .pc2-btbl .btn { padding: 1px 8px; font-size: 12px; }
@media (max-width: 760px) { .pc2-kwr { grid-template-columns: 1fr; } }
@media (max-height: 820px) { .pc2-st { padding: 1px 7px 2px; } .pc2-ctx { margin-top: 3px; padding: 2px 6px 2px 10px; } }
/* v0.16.0 통합 점검 — 1366 폭에서 표 오른쪽 열이 잘리지 않게 (거래처 잔액 거래처명 · 자금일보 원인 칸 줄바꿈) */
@media (max-width: 1500px) {
  .gb-tbl td.gb-pn { max-width: 190px; }
  .gb-tbl th, .gb-tbl td { padding: 3px 5px; }
  .cash-tbl td.cash-nm { min-width: 110px; max-width: 150px; }
  .cash-tbl th, .cash-tbl td { padding-left: 5px; padding-right: 5px; }
  .cash-tbl td:last-child { min-width: 180px; white-space: normal; }
  #gbQ { width: 150px; }
  .gb-bar input[type=date] { width: 128px; }
}

/* v0.17 (1001-1) 적요별 묶어 보기 = 맞추는 화면: 위하고 잔액 줄 · 잔액 칸 · 고른 합계 바 · 월별 차이 · 1건 빼기 */
.pc2-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; background: #f3f7f7; border-bottom: 1px solid var(--line, #d6e0e1); font-size: 12.5px; }
.pc2-bar.has-t { background: #0e4f57; color: #fff; flex-direction: column; align-items: stretch; }
.pc2-bar.has-t .muted { color: #cfe3e5; }
.pc2-bar .pcb-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pc2-bar .pcb-rest { padding: 1px 8px; border-radius: 6px; background: #fff1d6; color: #7a4a00; }
.pc2-bar .pcb-rest.zero { background: #e3f2e7; color: #1d6b35; }
.pc2-bar.has-t .btn { color: inherit; }
.pc2-bar.has-t .btn.primary { background: #fff; color: #0e4f57; }
.pc2-bar .pcb-mon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.pc2-bar .pcb-ml { margin-right: 4px; }
.pc2-bar .pcb-m { border: 0; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; background: #135b64; color: #fff; }
.pc2-bar .pcb-m.neg { background: #b42318; }
.pc2-bar .pcb-m.pos { background: #7a5a12; }
.pc2-bar .pcb-m.on { outline: 2px solid #fff; }
.pc2-bar .pcb-shift { margin-left: auto; font-size: 12px; }
.pc2-gtbl tr.pc2-t td { background: #e8f0fb; }
.pc2-gtbl tr.pc2-t.sel td { background: #cfe0f7; }
.pc2-gtbl .pc2-tb { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 8px; background: #1d4f9a; color: #fff; font-size: 11px; }
.pc2-gtbl tr.pc2-tm td { background: #f2f6fc; }
.pc2-gtbl tr.retire td { opacity: .78; }
.pc2-gtbl tr.pc2-odd td { background: #fff3d1; }
.pc2-gtbl tr.pc2-skip td { text-decoration: line-through; color: var(--muted, #8a9a9c); }
.pc2-gtbl tr.pc2-skip td input { text-decoration: none; }
.pc2-gtbl tr.pc2-dim td { opacity: .45; }
.pc2-gtbl tr.pc2-hit td { font-weight: 600; }
.pc2-gtbl td.pcb-ok { color: #1d6b35; font-weight: 700; }
.pc2-gtbl td.pcb-rest { color: #7a4a00; font-weight: 700; }
.pcb-reps { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid var(--line, #d6e0e1); border-radius: 6px; padding: 4px 8px; }
.pcb-rep { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.pcb-rep .num { margin-left: auto; }

/* v0.17.1 (1002-②) 금액 칸 차액 꼬리표 — 칸 바로 위, 숫자는 칸과 오른쪽 끝·자릿수 맞춤 */
.amt-tag { position: fixed; z-index: 2147483000; pointer-events: none; box-sizing: border-box; padding: 2px 0 2px 8px; background: #fffbea; border: 1px solid #e2c766; border-radius: 6px;
  box-shadow: 0 3px 10px rgba(60, 50, 0, .18); color: #3b3000; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.amt-tag .r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.amt-tag .k { font-size: .82em; color: #7a6a2a; font-weight: 400; }
.amt-tag b { font-weight: 700; letter-spacing: 0; }
.amt-tag .r.left b { color: #4b5a5f; } .amt-tag .r.left .k { color: #66777d; }
.amt-tag .r.ok .k { color: #1e7a45; font-weight: 700; font-size: .9em; }
.amt-tag .r.over b, .amt-tag .r.over .k { color: #b23b2e; font-weight: 700; }
.amt-tag .r.hint .k { font-size: .75em; color: #8a7b3a; }
.amt-tag::after { content: ''; position: absolute; right: 14px; bottom: -5px; width: 8px; height: 8px; background: #fffbea; border-right: 1px solid #e2c766; border-bottom: 1px solid #e2c766; transform: rotate(45deg); }
.amt-tag.below::after { bottom: auto; top: -5px; transform: rotate(225deg); }
input.num, input.e-amt, input.lw-am, #gnRows input[data-f=dr], #gnRows input[data-f=cr] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* v0.17.2 (1002-W) 급여 › 사업·일용·기타소득 */
.wo-kinds { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.wo-k { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; background: #f7fafb; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.wo-k b { min-width: 118px; } .wo-k label { display: inline-flex; gap: 4px; align-items: center; }
.wo-k input[data-woa] { width: 170px; } .wo-k input[data-wop] { width: 200px; } .wo-k input.need { border-color: #d9534f; background: #fdf0ee; }
.wo-tbl tr.sel td { background: #eef8fa; }

/* v0.18.0 (1002-2) 할 일: 목록 ↔ 아래 전표 칸 경계 끌기 · 전표 칸 기본 약 1cm 더 높게 (150 → 188 · 낮은 화면 104 → 142) */
.proc { grid-template-rows: auto auto auto auto minmax(110px, 1fr) 8px auto auto; grid-template-areas: "tabs" "filter" "chips" "steps" "list" "split" "lines" "reason"; }
.proc.side { grid-template-areas: "tabs tabs" "filter filter" "chips chips" "steps steps" "list side" "split side" "lines side" "reason side"; }
.proc > .pc-split { grid-area: split; cursor: row-resize; border-radius: 4px; margin: -3px 30%; background: transparent; position: relative; }
.proc > .pc-split::after { content: ''; position: absolute; left: 50%; top: 3px; width: 44px; margin-left: -22px; height: 2px; border-radius: 2px; background: #c9d6da; }
.proc > .pc-split:hover, .proc > .pc-split.on { background: #d8eef3; }
.proc .pc-lines { height: var(--pc-lines-h, 188px); max-height: none; }
@media (max-height: 820px) { .proc .pc-lines { height: var(--pc-lines-h, 142px); max-height: none; } }
.proc.lines-off > .pc-split { display: none; }
/* v0.18.0 (1002-4) 모아보기 › 위하고 잔액 전체 보기 */
.pc2-tall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 10px; background: #fff; border-bottom: 1px solid var(--line, #d6e0e1); font-size: 12.5px; }
.pc2-tall .pcb-allbtn { padding: 3px 10px; font-size: 12.5px; }
.pc2-tall .pcb-allbtn.on { background: #1d4f9a; border-color: #1d4f9a; color: #fff; font-weight: 600; }
.pc2-tall .pcb-clss { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pc2-tall .pcb-cls { border: 1px solid var(--line, #d6e0e1); background: #fff; border-radius: 12px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.pc2-tall .pcb-cls.on { background: #e8f0fb; border-color: #1d4f9a; color: #1d4f9a; }
.pc2-tall select { font-size: 12.5px; padding: 2px 4px; max-width: 260px; }
.pc2-gtbl thead th { top: var(--pc2bh, 0px); }

/* v0.18.6 (1005) 거래처 칸 대표자 */
.pc-ceo { font-size: 11px; font-weight: 400; }
/* v0.18.9 (1006) 받는 사람 구분 (급여)·(사업)·(기타)·(일용) */
.pk { font-size: 11px; font-weight: 600; margin-left: 1px; }
/* v0.19.4 (1007) 할 일 구분 칩 — 상태 칩 옆 */
.pk-chips { display: inline-flex; gap: 4px; align-items: center; } .pk-sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }
.pc-chips .chip-f.pkf { padding: 2px 8px; font-weight: 600; } .chip-f.pkf.zero { opacity: .5; } .chip-f.pkf.on { color: #fff; } .pk-pay { color: #1f5fbf; } .pk-biz { color: #a35a00; } .pk-etc { color: #7a3fb0; } .pk-day { color: #1e7b4f; } .pk-x { color: var(--muted, #777); } .pk-chk { color: #b0286e; }
/* v0.20.0 (1007) 가상 코드 · 급여·세금 › 예수금 */
.vc { display: inline-block; font: 600 11px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #6b4fa3; background: #f1ecfa; border: 1px solid #ddd0f2; border-radius: 4px; padding: 0 4px; margin-right: 2px; vertical-align: 1px; }
.vc:empty { display: none; }
.ys-notes { margin-top: 6px; display: grid; gap: 4px; }
.ys-notes .note { margin: 0; font-size: 12.5px; }
.ys-notes details > .note { margin-top: 4px; }
.ys-tbl th.ys-k { text-align: center; border-bottom: 1px solid var(--line, #ddd); }
.ys-tbl th.ys-k.ins { background: #f3f8f3; }
.ys-tbl th.ys-k .btn { padding: 0 6px; min-height: 0; line-height: 1.4; }
.ys-tbl td.num, .ys-tbl th.num { white-space: nowrap; }
.ys-tbl tfoot td { border-top: 2px solid var(--line, #ccc); background: #fafafa; position: sticky; bottom: 0; }
.ys-diff { color: #b5651d; font-weight: 700; cursor: help; }
.ys-map td, .ys-map th { padding: 4px 8px; }
.seg { display: inline-flex; gap: 0; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: 6px 0 0 6px; }
.seg .btn:last-child { border-radius: 0 6px 6px 0; }
#ysPT tr.sel td { background: #eaf2ff; }
/* v0.20.3 (1007) 원장 창 외화 계좌: 통장 잔액 칸 = 외화 잔액 */
.lw-fx { font-size: 12px; color: #1f5fbf; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v0.23.3 (1009) 위하고 통장 처리점·거래 구분·상대 사업자번호 — 적요 옆 흐린 글씨 */
.memo-x { color: var(--muted, #777); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
/* v0.23.4 (1009 20:31 회계사님) 할 일 › 통장 화면 간결화 — 상단 줄 줄이고 그리드에 높이를 · 동선은 왼쪽으로 */
.top.docked { padding: 3px 12px; gap: 8px; }
.top.docked .menus { display: flex; align-items: stretch; gap: 0; padding: 0; margin-left: 6px; order: 0; }
.top.docked .menus button { border: 0; background: none; padding: 6px 10px; cursor: pointer; color: #d6e9ee; font-size: 13.5px; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.top.docked .menus button:hover { color: #fff; }
.top.docked .menus button.on { color: #fff; border-bottom-color: #ffd166; }
.top.docked .menus .menu-set { margin-left: 0; font-weight: 500; }
.top.docked .menus .tab-badge { vertical-align: middle; }
.top.docked .company-pick { flex: 0 1 auto; }
.top.docked .brand .ver { display: inline; }
.tabs.docked .subs { border-top: 0; padding: 2px 10px; }
.tabs.docked .subs button { padding: 2px 11px; font-size: 13px; }
.scrhead.hidden { display: none; }
/* 통장 탭: 탭 줄 = 탭 + 상태 칩(왼쪽) · 거르기 줄 = 동작 단추(왼쪽) + 거르기 칸 · 단계는 한 줄 띠 */
.proc.cmp { grid-template-rows: auto auto auto minmax(110px, 1fr) 8px auto auto; grid-template-areas: "tabs" "filter" "steps" "list" "split" "lines" "reason"; gap: 4px; }
.proc.cmp.side { grid-template-areas: "tabs tabs" "filter filter" "steps steps" "list side" "split side" "lines side" "reason side"; }
.proc.cmp .pc-tabs { gap: 4px; }
.proc.cmp .pc-tabs > button[data-ev] { padding: 6px 11px; }
.proc.cmp .pc-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
.proc.cmp .pc-tabs .pc-learn { font-size: 12px; white-space: nowrap; margin-left: 6px; }
.proc.cmp .pc-tabs .pc-help { display: none; }
.proc.cmp .pc-tabs .pc-help-btn { display: inline-block; }
.proc.cmp.help-on .pc-tabs .pc-help { display: block; position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); white-space: normal; max-width: 720px; }
.proc.cmp .pc-filter { gap: 6px; }
.proc.cmp .pc-filter .pc-acts-top { margin-left: 0; }
.proc.cmp .pc-filter .pc-sel { font-size: 12px; white-space: nowrap; }
.proc.cmp .pc-filter input, .proc.cmp .pc-filter select { padding: 4px 7px; }
.proc.cmp .pc-filter input[type=date] { width: 128px; }
.proc.cmp .pc-chips .chip-f, .proc.cmp .pc-tabs .chip-f { padding: 2px 8px; font-size: 12px; }
.proc.cmp .chip-f.warn { background: #fff3cd; border-color: #e6c76b; color: #6b4b00; }
.proc.cmp .chip-f.jf-old, .chip-f.jf-old { background: #fde8e6; border-color: #e3a49b; color: #9b2c1f; } /* 2.5.73 gijang-41 받은 지 오래된 분개장 */
.badge.jf-after { background: #fff3cd; color: #6b4b00; border: 1px solid #e6c76b; font-size: 10.5px; padding: 0 4px; } /* 2.5.73 받은 분개장보다 뒤 거래 */
.proc.cmp .pc2-st { flex: 0 0 auto; max-width: none; border-radius: 4px; padding: 1px 8px; display: inline-flex; gap: 6px; align-items: center; height: 24px; }
.proc.cmp .pc2-st .pc2-t, .proc.cmp .pc2-st .pc2-c { display: inline; font-size: 12px; }
.proc.cmp .pc2-st .pc2-c { font-size: 11.5px; }
.proc.cmp .pc2-row { gap: 4px; }
.proc.cmp .pc-list th { font-size: 12.5px; font-weight: 700; padding: 4px 8px; }
.proc.cmp .pc-list td { padding: 3px 8px; font-size: 12.5px; line-height: 1.35; }
.proc.cmp .pc-list td.memo .badge, .proc.cmp .pc-list td .pill { line-height: 1.3; }
.proc.cmp .pc-lines td, .proc.cmp .pc-lines th { padding: 3px 8px; font-size: 12.5px; }
.proc.cmp .pc-lines th { font-weight: 700; }
.proc.cmp .pc-more { display: inline-block; }
.proc.cmp .pc-more .dd-list { min-width: 200px; }
.proc.cmp .pc-more .dd-list .btn.on { background: var(--soft); color: var(--brand); font-weight: 600; }
.proc.cmp .pc-filter #pcQ { flex: 1 1 160px; min-width: 140px; max-width: 360px; }
.proc.cmp .pc-filter #pcMin, .proc.cmp .pc-filter #pcMax { width: 86px !important; }
.proc.cmp .pc-filter select#pcBank { max-width: 180px; }
.proc.cmp .pc-list td { padding: 2px 8px; }
.proc.cmp .pc-list th { padding: 3px 8px; }
.proc.cmp .pc-lines { height: var(--pc-lines-h, 118px); }
.pc2-st .pc2-sl { color: #b8c4c8; margin: 0 2px; }
.pc2-st .pc2-done { color: var(--muted); }

/* v0.23.6 (1010 회계사님) 제안 확정 키캡 · 세 단추 노출 · 표는 내용 너비로 왼쪽에 붙임(열 끌기·더블클릭·오른쪽 클릭은 grid.js 0.16.0 그대로) · 잔액 열은 계좌 하나일 때만 */
.kbd.key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 17px; padding: 0 4px; font-size: 13px; line-height: 1; border-radius: 5px; }
.btn.primary .kbd.key { background: rgba(255,255,255,.14); }
.pc-acts-top #pc2Grp { margin-left: 0; }
.pc-acts-top .btn.on { background: var(--soft); color: var(--brand); border-color: var(--brand-2); font-weight: 600; }
.pc-list .pc-tbl:not(.gr-fixed) { width: max-content; max-width: none; min-width: 0; } /* v0.24.5 내용 너비 그대로 — 화면보다 넓으면 가로 스크롤 (칸이 잘려 …로 보이지 않게) */
.pc-list .pc-tbl td.memo { max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v0.24.5 잔액 열은 숨기지 않고 안 그림 (pcShowBal) */

/* v0.24.0 (1010 회계사님) 묶어 보기 = 한 표 (pcgrp.js) */
.pcg-tbl td, .pcg-tbl th { white-space: nowrap; }
.pcg-tbl tr.pcg-g td { vertical-align: middle; }
.pcg-tbl tr.pcg-led td { background: #eef5f0; }
.pcg-tbl tr.pcg-led.under td:first-child { box-shadow: inset 3px 0 0 #9fc9ad; }
.pcg-tbl tr.pcg-led.sel td { background: #d9ecdf; }
.pcg-tbl tr.pcg-led.cur td { background: #dff0f3 !important; }
.pcg-tbl tr.pcg-x td { background: #f6faf7; color: #4a5a60; font-size: 12px; }
.pcg-tbl tr.pcg-none td { color: #9b1c1c; background: #fff8f6; font-size: 12.5px; }
.pcg-tbl tr.pcg-sep td { background: #f4f7f8; font-weight: 700; color: #3a4a50; border-top: 2px solid #cfd8dc; padding-top: 5px; padding-bottom: 5px; }
.pcg-tbl td.pre { color: #7a8a90; font-style: italic; }
.pcg-tbl td.memo.pcg-name { max-width: 460px; overflow: hidden; text-overflow: ellipsis; }
.pcg-tbl .btn.ghost.pcg-lw, .pcg-tbl tr.pcg-led .btn.ghost { padding: 0 6px; font-size: 11.5px; height: 20px; line-height: 18px; }
.pcg-rest { font-size: 11.5px; padding: 0 6px; border-radius: 6px; background: #fff1d6; color: #7a4a00; font-weight: 600; }
.pcg-rest.ok { background: #e3f2e7; color: #1d6b35; }
.pcg-rest.over { background: #fde2e2; color: #9b1c1c; }
.pcg-all { padding: 1px 8px; font-size: 12px; font-weight: 500; margin-left: 8px; }
.pcg-all.on { background: #1d4f9a; border-color: #1d4f9a; color: #fff; }
.pc-sel .pcg-btn { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
.pcg-tbl tr.pcg-sep .pcb-cls { margin-left: 2px; }
.pcg-tbl tr.pcg-sep td { white-space: normal; }
.pcg-tbl tr.pcg-sep td > * { vertical-align: middle; }
.pcg-ready { font-weight: 400; font-size: 12px; margin-left: 14px; display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pcg-rd { display: inline-block; padding: 0 7px; border-radius: 6px; background: #eef2f3; color: #3a4a50; white-space: nowrap; }
.pcg-rd.warn { background: #fff1d6; color: #7a4a00; }
.pcg-rd.none { background: #f3f3f3; color: #8a9a9c; }
.pcg-tbl tr.pcg-l.sel td { background: #fff6dc; }
.pcg-tbl .lw-src { font-size: 11px; color: #1d4f9a; background: #e8f0fb; padding: 0 5px; border-radius: 4px; }
.pcg-tbl .lw-b { font-size: 11px; padding: 0 5px; border-radius: 4px; background: #eef2f3; }
/* v0.24.4 (1010 19:31 회계사님) 건별 통장 표: 어느 칸도 두 줄로 안 꺾임 — 넘치면 … (전체는 풍선) · 표가 넓으면 가로 스크롤 (열 폭은 끌어서) */
.pc-list .pc-tbl td, .pc-list .pc-tbl th { white-space: nowrap; }
.pc-list .pc-tbl td.ie-a { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pc-list .pc-tbl td.ie-p { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.pc-list .pc-tbl td.ie-m { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pc-list .pc-tbl td.ie-a .pc2-tag, .pc-list .pc-tbl td.ie-a .badge { white-space: nowrap; }
input.dmd { font-variant-numeric: tabular-nums; text-align: center; }
/* v0.25.0 (1010 22:10·22:20·22:26 회계사님) 원천 대사 (whrecon.js) — 신고 ↔ 지급 한 표 · 칸 색 · 오른쪽 상세 · 아래 관련 통장 · 떠 있는 창 */
.whr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 10px; align-items: start; }
.whr-wrap.win { grid-template-columns: minmax(0, 1fr) 340px; }
.whr-grid { overflow: auto; max-height: 52vh; }
.whr-wrap.win .whr-grid { max-height: none; }
.whr-tbl { width: max-content; min-width: 0; border-collapse: collapse; font-size: 12.5px; }
.whr-tbl th, .whr-tbl td { white-space: nowrap; padding: 3px 7px; border-bottom: 1px solid #edf1f2; }
.whr-tbl thead th { position: sticky; top: 0; background: #f4f7f8; z-index: 2; }
.whr-tbl thead tr:nth-child(2) th { top: 25px; font-weight: 500; color: #5a6a70; font-size: 11.5px; }
.whr-tbl th.whr-m, .whr-tbl th.whr-all { text-align: center; border-left: 1px solid #dfe5e8; }
.whr-tbl th.whr-all { background: #e9eff1; }
.whr-tbl td.whr-k { color: #3a4a50; font-weight: 600; }
.whr-tbl td.whr-l { min-width: 90px; }
/* 구분·항목은 왼쪽에 붙박이 (달이 많아 가로로 밀려도 이름이 보이게) */
.whr-tbl th:nth-child(1), .whr-tbl td.whr-k { position: sticky; left: 0; z-index: 3; background: #fff; width: 76px; min-width: 76px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.whr-tbl th:nth-child(2), .whr-tbl td.whr-l { position: sticky; left: 76px; z-index: 3; background: #fff; width: 104px; min-width: 104px; max-width: 104px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #dfe5e8; }
.whr-tbl thead th:nth-child(1), .whr-tbl thead th:nth-child(2) { z-index: 4; background: #f4f7f8; }
.whr-tbl tr.sum td.whr-k, .whr-tbl tr.sum td.whr-l { background: #f7f9fa; }
.whr-tbl td.whr-c { font-variant-numeric: tabular-nums; cursor: pointer; min-width: 84px; }
.whr-tbl td.whr-c.n { border-left: 1px solid #dfe5e8; color: #3a4a50; }
.whr-tbl td.whr-c.p { font-weight: 600; }
.whr-tbl td.whr-c.cur { outline: 2px solid #1f5f6b; outline-offset: -2px; }
.whr-tbl tr.sum td { background: #f7f9fa; font-weight: 700; border-top: 1px solid #d9e0e3; border-bottom: 2px solid #d9e0e3; }
.whr-tbl tr.sum td.whr-c { cursor: default; }
.whr-tbl tr.sec-tax td.whr-k { color: #5b3aa0; }
.whr-tbl td.st-ok { background: #e3f2e7; color: #1d6b35; }
.whr-tbl td.st-near { background: #eef7ea; color: #3a6b2a; }
.whr-tbl td.st-diff { background: #fff1d6; color: #7a4a00; }
.whr-tbl td.st-prop { background: #e8f0fb; color: #1d4f9a; }
.whr-tbl td.st-none { background: #fde2e2; color: #9b1c1c; }
.whr-tbl .whr-pp { color: #1d4f9a; font-weight: 500; }
.whr-tbl .whr-none { font-weight: 500; font-size: 11.5px; }
.whr-tbl .whr-plus { color: #1d4f9a; font-weight: 700; margin-left: 1px; }
.whr-tbl small.whr-bulk { display: inline-block; margin-left: 5px; font-size: 10.5px; padding: 0 5px; border-radius: 6px; background: #fff; border: 1px solid #cfd8dc; color: #3a4a50; font-weight: 500; }
.whr-legend { font-size: 11.5px; display: inline-flex; gap: 8px; align-items: center; }
.whr-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.whr-legend i.st-ok { background: #cfe9d6; } .whr-legend i.st-near { background: #dcefd4; } .whr-legend i.st-diff { background: #ffe3a8; } .whr-legend i.st-prop { background: #cfe0f7; } .whr-legend i.st-none { background: #f8c6c6; }
.whr-side { border-left: 1px solid #e5eaec; padding-left: 10px; min-height: 120px; font-size: 13px; }
.whr-side .whr-hint { padding: 10px 4px; line-height: 1.5; }
.whr-det h4 { margin: 10px 0 4px; font-size: 12.5px; color: #3a4a50; }
.whr-dh { display: flex; align-items: center; gap: 6px; }
.whr-dn { margin-top: 4px; }
.whr-stc { font-size: 11px; padding: 0 7px; border-radius: 999px; }
.whr-stc.st-ok { background: #e3f2e7; color: #1d6b35; } .whr-stc.st-near { background: #eef7ea; color: #3a6b2a; } .whr-stc.st-diff { background: #fff1d6; color: #7a4a00; } .whr-stc.st-prop { background: #e8f0fb; color: #1d4f9a; } .whr-stc.st-none { background: #fde2e2; color: #9b1c1c; }
.whr-tx { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px dashed #edf1f2; flex-wrap: wrap; }
.whr-tx.me { background: #fff9e8; }
.whr-tx .btn.sm { padding: 0 7px; font-size: 11.5px; height: 20px; line-height: 18px; margin-left: auto; }
.whr-tx .btn.sm + .btn.sm { margin-left: 0; }
.whr-det .lw-src { font-size: 11px; color: #1d4f9a; background: #e8f0fb; padding: 0 5px; border-radius: 4px; }
.whr-det .lw-src.wh { color: #5b3aa0; background: #efe9fb; }
.whr-bot { margin-top: 10px; }
.whr-bank { overflow: auto; max-height: 40vh; }
.whr-btbl { width: 100%; font-size: 12.5px; }
.whr-btbl th, .whr-btbl td { white-space: nowrap; }
.whr-btbl td.memo { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.whr-btbl td.whr-ln { max-width: 520px; overflow: hidden; text-overflow: ellipsis; color: #3a4a50; }
.whr-btbl tr.sel td { background: #fff6dc; }
.whr-btbl tr.me td { box-shadow: inset 3px 0 0 #1f5f6b; }
.whr-btbl td.whr-ba .btn.sm { padding: 0 7px; font-size: 11.5px; height: 20px; line-height: 18px; margin-right: 3px; }
.whr-btbl .chip.st-suggest, .whr-btbl .chip.st-weak { background: #e8f0fb; color: #1d4f9a; }
.whr-btbl .chip.st-done, .whr-btbl .chip.st-exported, .whr-btbl .chip.st-booked { background: #e3f2e7; color: #1d6b35; }
.whr-btbl .chip.st-open { background: #fde2e2; color: #9b1c1c; }
.whr-at-tbl { width: 100%; margin: 8px 0; }
.whr-at-tbl input.num { text-align: right; }
.whr-at-t { padding: 6px 8px; background: #f4f7f8; border-radius: 8px; }
.whr-at-rest { margin: 6px 0 10px; }
.whr-at-rest.bad { color: #9b1c1c; }
dialog.whr-win { padding: 0; min-width: 720px; width: min(1500px, 96vw); height: 46vh; max-height: 86vh; } /* 처음엔 아래쪽 — 위 통장 목록을 보며 (옮기거나 늘린 자리는 기억) */
dialog.whr-win > .dlg-body { padding: 8px 10px; }
dialog.whr-win .whr-grid { max-height: calc(46vh - 70px); }
/* v0.25.1 (1011 회계사님) 떠 있는 창을 브라우저 창으로 (⧉) — 새 창(html.pop)은 머리글·메뉴 없이 그 창만 꽉 차게 */
dialog.float > .pop-btn { position: absolute; top: 5px; right: 38px; z-index: 50; width: 24px; height: 22px; line-height: 20px; padding: 0; border: 1px solid #b9d3d9; border-radius: 6px; background: #fff; color: #1f5f6b; font-size: 14px; cursor: pointer; opacity: .75; }
dialog.float > .pop-btn:hover { opacity: 1; background: #eaf3f5; }
dialog.float#gnWin > .pop-btn, dialog.float#fdWin > .pop-btn, dialog.float.whr-win > .pop-btn { right: 8px; }
html.pop header.top, html.pop #tabs, html.pop #main, html.pop #result, html.pop .menus, html.pop #subs { display: none !important; }
html.pop body { background: #fff; overflow: hidden; }
html.pop dialog.float, html.pop dialog.float[open] { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; resize: none; }
html.pop dialog.float.whr-win .whr-grid, html.pop dialog.whr-win .whr-grid { max-height: calc(100vh - 64px) !important; }
html.pop dialog.float > .pop-btn { display: none; }

/* 2.1.0 통장2 — 거래처 기준 */
.b2 .b2-sw { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 1px 8px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.b2 .b2-sw.on { background: var(--soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.b2 .b2-sws { display: flex; gap: 5px; align-items: center; min-width: 0; overflow-x: auto; }
.b2 .badge.bank-b2 { background: #fde2e2; color: #9b1c1c; } .b2 .badge.sale-b2 { background: #dcebf7; color: #1f5fbf; } .b2 .badge.buy-b2 { background: #e6f0e6; color: #1e7b4f; } .b2 .badge.oth-b2 { background: #ece6f5; color: #5a3d8a; }
.b2 .b2-tbl tr.b2-grp td { background: #f4f7f8; font-weight: 700; color: var(--brand); font-size: 12px; padding: 2px 8px; }
.b2 .b2-tbl tr.sel td { background: #fff6dc; }
.b2 .b2-tbl tr.cur td { box-shadow: inset 2px 0 0 var(--brand); }
.b2 .b2-tbl td, .b2 .b2-tbl th { padding: 2px 8px; font-size: 12.5px; white-space: nowrap; }
.b2 .b2-tbl th { font-weight: 700; }
.b2 .pill.sug { background: #e4ecef; color: var(--brand); } .b2 .pill.open { background: #fde2e2; color: #9b1c1c; } .b2 .pill.ok { background: #e6f0e6; color: #1e7b4f; }
.b2 .b2-tbl td.memo { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.b2 .b2-tbl tr.cur td { box-shadow: none; } .b2 .b2-tbl tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* 2.1.1 엔진 비교 · 정답지 검증 모드 탭 */
.pc-tabs > button[data-mode] { border: 0; background: none; padding: 6px 11px; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pc-tabs > button[data-mode].on { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.sh #shRange input[type=date] { font: inherit; font-size: 12.5px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; }
/* 2.1.2 원천 대사 — 고지내역 줄·칸 */
.whr-ins-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; margin: 0 0 6px; padding: 6px 8px; background: var(--panel-2, #f6f8fa); border: 1px solid var(--line); border-radius: 6px; }
.whr-ins-bar .btn.sm { cursor: pointer; }
.whr-ins-warn { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.whr-ins-warn .pill { font-size: 11.5px; }
td.whr-c.n.ins { background: #f3f7ff; }
td.whr-c .whr-src { font-size: 9.5px; color: var(--brand); margin-left: 3px; font-weight: 700; }
.whr-ins { font-size: 12px; margin: 6px 0; }
.whr-ins td, .whr-ins th { padding: 2px 6px; }
.whr-ins tr.sum td { font-weight: 600; border-top: 1px solid var(--line); }

/* 2.1.6 원천 대사: 신고에 없는 지급 */
.whr-c .whr-over{display:block;font-size:10.5px;color:#a3342b;font-weight:600;line-height:1.1}
.whr-det h4.bad{color:#a3342b}
/* 2.1.6 통장2 — 먼저 보여 주고 검색은 거르기: 왼쪽 묶음 목록 + 오른쪽 한 표 */
.b2 .pc-list.b2-wrap { display: flex; align-items: stretch; overflow: hidden; }
.b2 .b2-left { flex: 0 0 300px; min-width: 240px; max-width: 360px; border-right: 1px solid var(--line); overflow: auto; background: #fbfcfc; }
.b2 .b2-right { flex: 1 1 auto; min-width: 0; overflow: auto; }
.b2 .b2-g-head { position: sticky; top: 0; background: #f4f7f8; padding: 4px 10px; font-size: 12px; border-bottom: 1px solid var(--line); z-index: 1; }
.b2 .b2-g { padding: 5px 10px 6px; border-bottom: 1px solid #eef1f2; cursor: pointer; font-size: 12.5px; line-height: 1.35; }
.b2 .b2-g:hover { background: #f1f5f6; }
.b2 .b2-g.on { background: #fff6dc; box-shadow: inset 3px 0 0 var(--brand); }
.b2 .b2-g-top { display: flex; justify-content: space-between; gap: 6px; }
.b2 .b2-g-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2 .b2-g-n { color: var(--brand); font-weight: 700; white-space: nowrap; }
.b2 .b2-g-mid { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2 .b2-g-mid .pill { font-size: 11px; padding: 0 5px; }
.b2 .b2-g-bot { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2 .b2-g-reg { color: #1e7b4f; } .b2 .b2-g-none { color: #9b1c1c; font-weight: 600; }
.b2 button.b2-np { background: none; border: 1px dashed #d9a3a3; border-radius: 4px; padding: 0 6px; font: inherit; font-size: 12px; cursor: pointer; } .b2 button.b2-np:hover { background: #fdecec; border-style: solid; } /* 2.5.8 거래처 등록 필요 → 누르면 등록 */
.b2 select[data-acct] { font-size: 12px; padding: 0 2px; max-width: 118px; }
.pc-hint { font-size: 12px; color: #7a5a1a; background: #fff8e6; border: 1px solid #f1e2b6; border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.pc-hint .lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.in-virt .in-vlog { font-size: 12px; margin-top: 4px; } .in-virt .in-vlog .bad { color: #a3342b; }
.memo-x.bulk-k { color: #1b6f7a; font-weight: 600; } /* 2.2.6 명세 세부로 나눈 자식 줄 표시 */
.badge.split { background: #e6f0ff; color: #0b5ea8; }

/* ===== 2.2.8 화면 표준 2차 (1014 10:36 회계사님) ===== */
/* ④ 행 1줄 고정: 셀은 한 줄, 넘치면 … · 두 줄짜리 보조 정보(.muted 줄)는 같은 줄에 이어 붙이고 풍선으로 */
.tbl-wrap table th, .tbl-wrap table td, table.pc-tbl td, table.bk-tbl td, table.pu-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; max-width: 420px; }
.tbl-wrap td > div.muted, table.pc-tbl td > div.muted { display: inline; margin-left: 5px; font-size: 11px !important; }
.tbl-wrap td > div.client-ans { display: inline; margin-left: 5px; }
.tbl-wrap th, .tbl-wrap td { padding-top: 3px; padding-bottom: 3px; height: 26px; box-sizing: border-box; }
td.memo, td.bku-memo, td.bd-memo { max-width: 360px; }
/* ③ 그리드 안 입력 칸: 둥근 상자 없이 셀 안에서 바로 */
.tbl-wrap td input:not([type=checkbox]):not([type=file]):not([type=date]), .tbl-wrap td select, table.pu-tbl td input, table.pu-tbl td select, td.code-cell input {
  border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; padding: 0 2px; margin: 0; font: inherit; color: inherit; width: 100%; min-width: 0; box-shadow: none; height: 22px; }
.tbl-wrap td input:not([type=checkbox]):focus, .tbl-wrap td select:focus, td.code-cell input:focus { outline: none; border-bottom: 2px solid var(--pri, #1b6f7a); background: #f3f9fa; }
td.code-cell { position: relative; cursor: text; } td.code-cell .code, .cc-sug .code { color: var(--muted); font-size: 11px; margin-right: 4px; }
.cc-sug { position: absolute; left: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #c9d6d9; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); min-width: 220px; max-height: 240px; overflow: auto; font-size: 12.5px; white-space: nowrap; }
.cc-sug div { padding: 3px 8px; cursor: pointer; } .cc-sug div.on, .cc-sug div:hover { background: #e4f1f3; }
/* ④ 풍선 */
.cell-tip { position: fixed; z-index: 9000; max-width: 420px; background: #1f2d33; color: #fff; font-size: 12px; line-height: 1.45; padding: 6px 9px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.22); pointer-events: none; white-space: normal; display: none; }
.cell-tip.on { display: block; } .cell-tip .tp-x { color: #cfe3e6; margin-top: 2px; } .cell-tip .tp-row { color: #cfe3e6; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 4px; font-size: 11.5px; } .cell-tip .tp-k { color: #9fd3da; }
/* ② 그리드 [엑셀] */
.tbl-wrap { position: relative; }
.grid-xlsx-bar { position: sticky; top: 0; height: 0; z-index: 3; text-align: right; overflow: visible; }
.grid-xlsx { position: relative; top: 2px; z-index: 3; margin: 0 4px 0 0; font: inherit; font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid #c9d6d9; border-radius: 4px; background: rgba(255,255,255,.92); color: #3b4d52; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.grid-xlsx .t { display: none; } .grid-xlsx:hover .t, .grid-xlsx:focus .t { display: inline; } /* 평소엔 작은 아이콘만(머리글을 가리지 않게) · 올리면 '엑셀' */
.grid-xlsx:hover { background: #e4f1f3; border-color: #7fb3bb; }
/* ① 요약 줄: 작은 아이콘 + 함축 단어 + 작은 숫자 */
.sico { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi { font-size: 12px; padding: 3px 8px; gap: 2px 14px; } .stat-box .k { font-size: 12px; } .stat-box .v { font-size: 12.5px; } .stat-box .sico { margin-right: 1px; color: var(--muted); }
.lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 1.6em; cursor: pointer; } .lead.open { white-space: normal; max-height: none; }

/* ===== 2.3.0 (1015) 전역 디자인 시스템 — 그리드 표준 (화면 전체가 같은 규칙) =====
   토큰: --sg-row 행 높이(고정) · --sg-px 셀 좌우 여백 · --sg-fs 글자 · 열 폭 기본값(th[data-w]) · 정렬(날짜·글자 왼쪽 / 숫자 오른쪽 · 가운데 없음)
   규칙: 전체 폭 · 열 폭 자유(grid.js 드래그 · 기억 · 기본 ↺) / 행 높이 고정 · 넘치면 말줄임 + 풍선(std.js 1개) · 셀 안 둥근 입력창 없음 · 코드+이름 검색(stdCodeCell) */
:root { --sg-row: 26px; --sg-px: 9px; --sg-fs: 13px; --sg-fs-sm: 12px; --sg-head: #f4f7f8; --sg-line: #eef2f4; --sg-hover: #fafcfc; --sg-sel: #eef8fa; --sg-edit: #fffdf2; --sg-seed: #f1f4f5; --sg-ok: #1e7b4f; --sg-warn: #8a5a00; --sg-bad: #a3342b; }
.sg-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
table.sg { table-layout: fixed; width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--sg-fs); }
table.sg > thead > tr > th { height: 32px; padding: 0 var(--sg-px); background: var(--sg-head); color: var(--muted); font-weight: 500; font-size: var(--sg-fs-sm); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); }
table.sg > tbody > tr > td { height: var(--sg-row); padding: 0 var(--sg-px); border-bottom: 1px solid var(--sg-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; }
table.sg th.num, table.sg td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sg td.calc { color: #9bb0b6; }
table.sg td.hint, table.sg .hint { color: #9bb0b6; }
table.sg > tbody > tr:hover > td { background: var(--sg-hover); }
table.sg > tbody > tr.sel > td { background: var(--sg-sel); }
table.sg > tbody > tr.cur > td { background: #f2fbfc; }
table.sg > tbody > tr.edit > td, table.sg > tbody > tr.new > td { background: var(--sg-edit); }
table.sg > tbody > tr.item > td { background: #fbfcfd; } table.sg > tbody > tr.item > td.ind { padding-left: 30px; color: var(--muted); }
table.sg > tbody > tr.head > td { font-weight: 600; }
table.sg > tbody > tr.seed > td { background: var(--sg-seed); color: var(--muted); }
table.sg > tbody > tr.flash > td { background: #ffe9a8 !important; transition: background .4s; }
table.sg td input.sg-in, table.sg td textarea.sg-in { display: block; width: 100%; height: 24px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: transparent; font: inherit; padding: 0; margin: 0; color: var(--ink); outline: none; text-overflow: ellipsis; }
table.sg tr:hover td input.sg-in { border-bottom-color: var(--line); } table.sg td input.sg-in:focus { border-bottom-color: var(--brand-2); background: #f3f9fa; }
table.sg td input.sg-in::placeholder { color: #b7c4c8; }
table.sg td.num input.sg-in { text-align: right; }
table.sg td input[type=checkbox] { width: 13px; height: 13px; margin: 0; vertical-align: middle; }
table.sg td.ck, table.sg th.ck { padding: 0 6px; text-align: center; }
table.sg td .cf { display: flex; align-items: center; gap: 4px; min-width: 0; } table.sg td .cf .grow, table.sg td .cf input.sg-in { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg .addi { opacity: .3; flex: none; padding: 0 5px; } table.sg tr:hover .addi { opacity: 1; }
/* 2.3.1 줄에 마우스를 올렸을 때만 보이는 단추(＋ 품목 추가 · 인건비로/구매로) — 스쳐서 눌리지 않게 */
table.sg tr:not(:hover):not(:focus-within) .hov { visibility: hidden; }
table.sg tr:not(:hover):not(:focus-within) .stc .hov { display: none; } /* 상태 칸은 자리도 차지하지 않게 — 글자가 … 로 잘리지 않음 */
.sg-bar[hidden] { display: none; }
/* 2.3.2 분류 칩 묶음 */
.sg-bar .seg { display: inline-flex; gap: 3px; }
table.sg .sg-in.pre { color: var(--muted); } /* 2.3.2 계산서에서 미리 채운 품목 — 확인 전 회색 */
table.sg td.legal b { font-weight: 700; }
table.sg td.partner .code, table.sg tr.seed .code { color: var(--muted); font-size: 11px; margin-right: 3px; } /* 2.3.1 거래처 = 코드 + 이름 */ /* 2.3.1 고른 줄이 없으면 작업 띠 줄을 아예 숨김 — 표가 한 줄 더 보임 */
.sg .stc .pick.hov { margin-left: 6px; font-size: 11.5px; }
.sg tr.seed .pick { color: var(--ink, #111); }
/* 칸 안의 짧은 표식 */
.sg .st { display: inline-block; font-size: 11.5px; line-height: 18px; border-radius: 3px; padding: 0 6px; background: #eef2f4; color: var(--muted); }
.sg .st.done { background: var(--hi-bg); color: var(--hi); } .sg .st.unpaid, .sg .st.rcpt, .sg .st.rcptunp, .sg .st.wait { background: var(--mid-bg); color: var(--mid); } .sg .st.noev, .sg .st.none, .sg .st.diff { background: var(--lo-bg); color: var(--lo); } .sg .st.requested { background: var(--soft); color: var(--brand); } .sg .st.draft, .sg .st.skip, .sg .st.closed { background: #e3e8ea; color: var(--muted); }
.sg .ok { color: var(--sg-ok); } .sg .warn { color: var(--sg-warn); } .sg .bad { color: var(--sg-bad); }
.sg .auto { display: inline-block; font-size: 10.5px; line-height: 15px; background: var(--hi-bg); color: var(--hi); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.sg .src { display: inline-block; font-size: 10.5px; line-height: 15px; border-radius: 3px; padding: 0 4px; margin-right: 4px; vertical-align: 1px; background: var(--mid-bg); color: var(--mid); font-weight: 600; }
.sg .pick { display: inline-block; border: 1px solid #9bc9d1; background: #f2fbfc; color: var(--brand); border-radius: 4px; padding: 0 7px; font-size: 12px; line-height: 20px; cursor: pointer; white-space: nowrap; } .sg .pick b { color: var(--lo); font-weight: 600; } .sg .pick.on { background: var(--brand); color: #fff; border-color: var(--brand); } .sg .pick.on b { color: #ffd9d3; } .sg .pick:hover { border-color: var(--brand-2); }
.sg .sug { display: inline-block; border: 1px solid var(--brand-2); background: #fff; color: var(--brand); border-radius: 4px; padding: 0 7px; font-size: 12px; line-height: 20px; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .sg .sug .k { font-size: 10.5px; border: 1px solid #9bc9d1; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; margin-left: 5px; color: var(--muted); background: var(--sg-head); }
.sg .none { color: var(--lo); font-size: 12px; margin-right: 3px; }
.sg .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wd); margin-right: 5px; vertical-align: 1px; }
.sg .tw { display: inline-flex; width: 14px; height: 14px; border: 1px solid #9bb0b6; border-radius: 3px; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); margin-right: 6px; vertical-align: -2px; cursor: pointer; }
svg.ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 줄 아래 고르기 창 (화면에 1개) */
.sg-pop { position: absolute; z-index: 60; width: 460px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--brand-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(17,96,111,.18); font-size: 12.5px; }
.sg-pop .ph { padding: 6px 10px; color: var(--muted); font-size: 11.5px; border-bottom: 1px solid var(--sg-line); display: flex; gap: 8px; align-items: center; }
.sg-pop .grp { padding: 4px 10px 1px; color: var(--muted); font-size: 11px; }
.sg-pop .cand { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--sg-line); cursor: pointer; } .sg-pop .cand b.n { width: 16px; color: var(--muted); } .sg-pop .cand.on { background: var(--soft); } .sg-pop .cand .m { color: var(--muted); font-size: 11.5px; margin-left: auto; white-space: nowrap; } .sg-pop .cand .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sg-pop .cand input[type=checkbox] { margin: 0; }
.sg-pop .pf { display: flex; gap: 6px; padding: 7px 10px; align-items: center; flex-wrap: wrap; } .sg-pop .pf input[type=text], .sg-pop .pf input[type=search] { font: inherit; font-size: 12px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; }
.sg-pop .msg { padding: 6px 10px; border-bottom: 1px solid var(--sg-line); white-space: pre-wrap; } .sg-pop .msg .who { color: var(--muted); font-size: 11.5px; } .sg-pop .msg.me { background: #f2fbfc; }
.sg-pop .msgs { max-height: 240px; overflow: auto; }
/* 칩 · 줄 위 도구 */
.sg-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.sg-bar .chip { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 0 10px; font-size: 12px; line-height: 22px; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .sg-bar .chip b { color: var(--ink); font-weight: 600; } .sg-bar .chip.on { background: var(--soft); border-color: var(--brand-2); color: var(--brand); } .sg-bar .chip.lo b { color: var(--lo); } .sg-bar .chip.mid b { color: var(--mid); } .sg-bar .chip.hi b { color: var(--hi); }
.sg-bar select, .sg-bar input[type=date], .sg-bar input[type=search], .sg-bar input[type=text] { font: inherit; font-size: 12px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sg-bar .btn { height: 26px; padding: 0 10px; font-size: 12px; }
.sg-bar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.sg-foot { display: flex; gap: 14px; padding: 5px 2px; color: var(--muted); font-size: 12px; align-items: center; flex-wrap: wrap; }
main.wide .sg-wrap { max-height: calc(100vh - var(--chrome, 150px) - 170px); }
@media (max-width: 900px) { table.sg { min-width: 1100px; } .sg-pop { width: calc(100vw - 16px); left: 8px !important; } }

/* 2.3.3 (1015 17:34) 칩 줄 이름표 — 처리상태 · 지출구분 (왼쪽에 모음) */
.sg-bar .sg-lbl { flex: none; width: 52px; font-size: 11.5px; color: var(--muted); }
.sg-bar .chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 2.3.3 머리글 정렬 (화면표준 8장) */
table.sg > thead > tr > th.sg-sortable { cursor: pointer; user-select: none; }
table.sg > thead > tr > th.sg-sortable:hover { color: var(--brand); }
table.sg > thead > tr > th.sorted { color: var(--brand); font-weight: 600; }
table.sg th .sg-sk { margin-left: 3px; font-size: 10px; }
/* 2.3.3 증빙·통장 확인 창 */
.sg-pop.wide { width: 680px; }
.sg-pop .ph .chip { border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; line-height: 20px; cursor: pointer; font-size: 11.5px; } .sg-pop .ph .chip.on { border-color: var(--brand-2); color: var(--brand); background: #f2fbfc; }
.sg-pop .ew { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; border-bottom: 1px solid var(--sg-line); }
.sg-pop .ew-c { padding: 6px 12px; min-width: 0; } .sg-pop .ew-c + .ew-c { border-left: 1px solid var(--sg-line); }
.sg-pop .ew-h { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.sg-pop .kv { display: flex; gap: 8px; font-size: 12.5px; line-height: 21px; } .sg-pop .kv .k { flex: none; width: 66px; color: var(--muted); font-size: 11.5px; } .sg-pop .kv .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pop .ew-chk { padding: 6px 12px; font-size: 12.5px; border-bottom: 1px solid var(--sg-line); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sg-pop .ew-note { padding: 6px 12px; font-size: 12px; background: #fff8e6; border-bottom: 1px solid var(--sg-line); } .sg-pop .ew-note.bad { background: #fdeceb; }
.sg-pop .ew-list { max-height: 260px; overflow: auto; } .sg-pop .ew-list .cand .m.warn { color: var(--sg-warn); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pop .ok { color: var(--sg-ok); } .sg-pop .bad { color: var(--sg-bad); } .sg-pop .warn { color: var(--sg-warn); }
.sg .ldiff { font-size: 11px; margin-left: 4px; cursor: pointer; }
/* 2.3.3 (1015 17:12·17:34 회계사님 · 화면표준 7장) 행 높이 = 전표 처리 › 할 일 › 통장 표 (13px · 위아래 5px → 26px, 화면 높이 820px 이하 4px → 24px) — 셀 안 입력칸·칩도 이 높이 안에 */
@media (max-height: 820px) { :root { --sg-row: 24px; } table.sg td input.sg-in, table.sg td textarea.sg-in { height: 21px; } }
table.sg td input.sg-in { height: 22px; }
.sg .pick, .sg .sug { line-height: 18px; }
table.sg td.acct .code { color: var(--muted); font-size: 11px; margin-right: 2px; } table.sg td.acct .hint .code { color: #b7c4c8; } /* 2.3.4 계정과목 = 코드 + 이름 · 계산서·원인전표 계정은 진하게, 거래처 규칙 추정만 회색 */
/* 2.3.5 (1015 20:22 회계사님 · 화면표준 6·8·9장) 전역 UI */
main { max-width: none; margin: 0; } /* 모든 화면 창 폭 전체 — 1500px 가운데 상자 없음 */
.scrhead { display: none !important; } /* 제목·설명 줄 없음 — 탭 이름이 제목 */
.tabs .subs .sub-help { margin-left: 8px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.tabs .subs .sub-help:hover { color: var(--brand); border-color: var(--brand-2); }
.scr-help-pop { position: fixed; z-index: 70; width: 420px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--brand-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(17,96,111,.18); padding: 10px 12px; font-size: 12.5px; line-height: 1.6; }
.scr-help-pop .d { color: var(--ink); margin: 4px 0 8px; white-space: normal; }
th.s-asc[data-sn]::after { content: ' ▲' attr(data-sn); } th.s-desc[data-sn]::after { content: ' ▼' attr(data-sn); }
thead th { user-select: none; }
/* 2.5.5 원천 대사 = 통장 출금 그대로 — 총괄표 · 추정(회색) · 제안(파랑) · 할 일 화면에서 이 칸의 출금 옅게 */
.whr-sum { margin: 0 0 10px; }
.whr-sum td.whr-c { cursor: pointer; }
.whr-sum .whr-df.ok { color: #1a7f37; }
.whr-sum .whr-df.near { color: #9a6700; }
.whr-sum .whr-df.bad { color: #b42318; font-weight: 600; }
.whr-est { color: #8a949b; font-style: italic; }
.whr-c.st-est { background: #f3f4f5; }
.whr-c.st-insum { background: #fafafa; }
.whr-tbl tr.sum td.whr-c[data-c] { cursor: pointer; }
.whr-lump { padding: 4px 0; border-bottom: 1px dashed #e3e8eb; }
.whr-lump.prop b { color: #1f5fbf; }
.whr-lp { font-size: 12px; margin: 2px 0 0 14px; color: #3b4a52; }
.pc-tbl tr.whr-mark:not(.cur) td { background: #fff7e0; }

/* 2.5.18 (1018) 구매대장 통장 출금 배지 · 줄 왼쪽 색 띠 · 새 거래처 줄 */
.sg .txb { display: inline-block; font-size: 11px; line-height: 17px; padding: 0 6px; border-radius: 9px; margin-right: 3px; font-weight: 600; vertical-align: 1px; }
.sg .txb.ok { background: var(--hi-bg); color: var(--hi); } .sg .txb.warn { background: var(--mid-bg); color: var(--mid); } .sg .txb.part { background: #ffe9d6; color: #9a4d00; } .sg .txb.bad { background: var(--lo-bg); color: var(--lo); } .sg .txb.na { background: #eef2f3; color: #7b8b90; font-weight: 500; }
table.sg > tbody > tr.txs-ok > td.ck { box-shadow: inset 3px 0 0 var(--hi); } table.sg > tbody > tr.txs-warn > td.ck { box-shadow: inset 3px 0 0 #e0a43a; } table.sg > tbody > tr.txs-bad > td.ck { box-shadow: inset 3px 0 0 var(--lo); }
.cc-sug div.cc-new { color: var(--brand, #0F5C6E); font-weight: 600; border-top: 1px solid #e3eaec; }

.sg .st.late { background: var(--lo-bg); color: var(--lo); font-weight: 600; } /* 2.5.19 늦게 온 계산서 */
.pc-dmenu { position: fixed; z-index: 70; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 340px; background: #fff; border: 1px solid #c9d6d9; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: 6px; font-size: 12.5px; } .pc-dmenu button { border: 1px solid #d5e0e3; background: #f5f9fa; border-radius: 4px; padding: 3px 9px; cursor: pointer; font: inherit; } .pc-dmenu button:hover { background: #e4f1f3; } .pc-dmenu .muted { font-size: 11.5px; padding-left: 4px; } /* 2.5.19 할 일 날짜 칸 목록 */
/* 2.5.21 수임처설명 칸 · 창 (결정 gijang-19 2단계) */
.pc-tbl td.pc-talk { max-width: 220px; min-width: 90px; font-size: 12px; line-height: 1.2; }
.pc-talk-b .badge { padding-top: 0; padding-bottom: 0; line-height: 1.3; }
.pc-talk-b { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.pc-talk-b.muted { color: #9aa7ab; }
.pc-talk-b:hover .pc-talk-t { text-decoration: underline; }
.pc-talk-n { font-size: 11px; color: #6b7a7e; }
.pc-talk-n.new { color: #c0392b; font-weight: 700; }
.talk-dlg { width: min(900px, 96vw); }
.talk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .talk-grid { grid-template-columns: 1fr; } }
.talk-grid table.kv th { text-align: left; font-weight: 500; color: #6b7a7e; padding: 3px 10px 3px 0; white-space: nowrap; width: 72px; }
.talk-grid table.kv td { padding: 3px 0; }
.talk-list { max-height: 300px; overflow: auto; display: grid; gap: 6px; }
.talk-m { border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.talk-m.ag { background: #eef4ff; margin-right: 24px; }
.talk-m.cl { background: #eefaf0; margin-left: 24px; }
.talk-m div { white-space: pre-wrap; margin-top: 2px; }
/* 2.5.21 수임처 통장(할 일) */
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .td-grid { grid-template-columns: 1fr; } }
.td-grid .f-l, .f-l { font-size: 12.5px; font-weight: 600; color: #3b4d52; margin: 4px 0; }
.td-talk { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.td-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e0a730; margin-right: 5px; vertical-align: middle; }
#tdTbl tr.asked td:first-child { box-shadow: inset 3px 0 0 #e0a730; }
#tdTbl tr.cur td { background: #dff0f3; }
#tdTbl tr.sel td { background: #eef7f0; }
/* 2.5.22 (1018) 「도우미 새 버전」 띠 — 머리글 바로 아래 */
.helper-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px; background: #fff7e0; border-bottom: 1px solid #f0d58a; font-size: 13px; color: #5c4400; }
.helper-bar .muted { color: #8a6d1f; }
.helper-bar .btn { height: 26px; padding: 0 10px; font-size: 12.5px; }
/* 2.5.26 수임처 통장(할 일) 아래 전표 칸 (읽기만) */
.td-list { max-height: calc(100vh - 470px); min-height: 260px; overflow: auto; }
.td-list:is([style*="--td-list-h"]) { height: var(--td-list-h); max-height: none; min-height: 120px; } /* 2.5.37 경계를 끈 높이 */
.td-split { height: 9px; margin: 2px 30% -4px; cursor: row-resize; border-radius: 4px; position: relative; touch-action: none; }
.td-split::after { content: ''; position: absolute; left: 50%; top: 3px; width: 44px; margin-left: -22px; height: 3px; border-radius: 2px; background: #c9d6da; }
.td-split:hover, .td-split.on { background: #d8eef3; }
.td-lines { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 90px; }
.td-lh { font-size: 13px; margin-bottom: 4px; } .td-lt { width: 100%; font-size: 13px; } .td-lt th, .td-lt td { padding: 3px 8px; } .td-lt tr.sum td { font-weight: 600; border-top: 1px solid var(--line); }
/* 2.5.28 수임처 전표 입력 */
.td-la { float: right; display: inline-flex; gap: 6px; } .td-ve td input, .td-ve td select { width: 100%; padding: 3px 6px; font-size: 13px; } .td-ve td input.num { text-align: right; }

/* 2.5.29 안내문은 제목 옆 한 줄 (결정 gijang-22) — 제목은 꺾이지 않음, 안내가 먼저 말줄임, 긴 안내는 [?] */
.pg-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; margin: 0 0 8px; }
.pg-t > h2 { margin: 0; flex: none; white-space: nowrap; }
.pg-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.toolbar > .pg-hint { align-self: center; margin-left: 4px; }
.pg-q { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #b9c9cd; background: #fff; color: #4d6167; font: 600 11.5px/18px inherit; cursor: pointer; align-self: center; }
.pg-q:hover, .pg-q.on { border-color: var(--brand); color: var(--brand); background: #eaf3f5; }
p.lead.th-moved { white-space: normal; max-height: none; background: #f6fafb; border: 1px solid #dbe7ea; border-radius: 8px; padding: 6px 10px; cursor: default; }
/* 2.5.29 사무소 머리글도 한 줄 — 좁아지면 단추 글자부터 숨김(아이콘·풍선은 그대로) */
@media (min-width: 901px) {
  header.top:has(> .company-pick) { flex-wrap: nowrap; } header.top:has(> .company-pick) .company-pick { flex-wrap: nowrap; } header.top:has(> .company-pick) .brand { flex: none; }
  header.top:has(> .company-pick) select { min-width: 160px; } header.top:has(> .company-pick) > .btn, header.top:has(> .company-pick) .me { flex: none; white-space: nowrap; }
  header.top:has(> .company-pick) #meName { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}
@media (min-width: 901px) and (max-width: 1100px) { header.top:has(> .company-pick) #meName { max-width: 110px; } } /* common-12 단추 글자는 숨기지 않음 */
.tabs .subs .sub-lead { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; margin-left: 10px; } .tabs .subs .sub-lead[hidden] { display: none; }
.tabs .subs .sub-lead .pg-hint { font-size: 12px; }
.tabs .subs .sub-hint, .tabs .subs .sub-help { flex: none; white-space: nowrap; }
.tabs .subs button.pg-q { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #b9c9cd; background: #fff; color: #4d6167; font-size: 11.5px; font-weight: 600; line-height: 18px; }
.tabs .subs button.pg-q:hover, .tabs .subs button.pg-q.on { border-color: var(--brand); color: var(--brand); background: #eaf3f5; }
/* 2.5.30 수임처 통장(할 일) 계정·거래처 칸 바로 입력 */
#tdTbl td.td-ic { cursor: text; } #tdTbl td.td-ic:hover { outline: 1px dashed var(--line); outline-offset: -2px; }
#tdTbl input.td-in { width: 100%; padding: 2px 5px; font-size: 13px; border: 1px solid #0b4d5c; border-radius: 4px; }
/* 2.5.31 (결정 gijang-23) 할 일 화면 — 눈길이 왼쪽에 모이게: 거르기 칸은 상태 칩 바로 옆 · 표·전표 칸은 내용 폭 그대로 왼쪽 */
.td-bar .td-gap { width: 14px; }
.td-lh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.td-la { float: none; order: 0; }
.td-lines .td-lt { width: auto; min-width: 720px; max-width: 1180px; }
.td-lines .td-lt th, .td-lines .td-lt td { white-space: nowrap; }
.td-lines .td-lt td:nth-child(2), .td-lines .td-lt td:nth-child(3) { min-width: 140px; } .td-lines .td-lt td:nth-child(6) { min-width: 180px; }
#tdTbl td.td-dr { background: #fff7d6; }
/* 2.5.108 (D-36 둘째 판 · gijang-65) 수임처 통장(할 일) 담당자 추천 — 흐린 기울임 · 표 안에서는 앞에 「추천」 */
.td-rec { color: #8b95a5; font-style: italic; }
#tdTbl .td-rec::before { content: '추천'; font-style: normal; font-size: 10.5px; color: #6b7a90; border: 1px solid #d5dbe4; border-radius: 3px; padding: 0 3px; margin-right: 4px; }
.proc .pc-lines table.pc-ltbl, .proc .pc-lines .pc-prev table { width: auto; min-width: 720px; max-width: 1180px; align-self: flex-start; }
.proc .pc-lines table.pc-ltbl td, .proc .pc-lines table.pc-ltbl th { white-space: nowrap; } .proc .pc-lines table.pc-ltbl td:nth-child(2), .proc .pc-lines table.pc-ltbl td:nth-child(3) { min-width: 150px; } .proc .pc-lines table.pc-ltbl td:nth-child(6) { min-width: 200px; }
.pc-talk.pc-dr { background: #fff7d6; }
.pc-reason .pc-r-acts { order: -1; } /* 2.5.31 단추(수임처설명·전표 창·확정)도 왼쪽 — 눈길이 왼쪽에 */
/* 2.5.33 원천 대사 한 달 = 한 칸 (위 신고 · 아래 지급) — 수임처 원천 대사와 같은 모양 */
:is(.whr-tbl, .whr-sum) td.whr-c.s { text-align: right; line-height: 1.3; padding: 3px 8px; border-left: 1px solid #e6ecee; min-width: 96px; vertical-align: middle; font-variant-numeric: tabular-nums; cursor: pointer; }
:is(.whr-tbl, .whr-sum) td.whr-c.s .wn { font-weight: 600; }
:is(.whr-tbl, .whr-sum) td.whr-c.s .wp { font-size: 11.5px; color: #5d6e74; font-weight: 400; }
:is(.whr-tbl, .whr-sum) td.whr-c.s .wd { font-size: 10.5px; color: #b42318; }
:is(.whr-tbl, .whr-sum) td.whr-c.s.whr-tot { background: #f4f7f8; border-left: 1px solid #cfd9dc; border-right: 1px solid #cfd9dc; cursor: default; }
:is(.whr-tbl, .whr-sum) td.whr-c.s.cur { outline: 2px solid #1f5f6b; outline-offset: -2px; }
.whr-sum td.st-ok { background: #e3f2e7; color: #1d6b35; } .whr-sum td.st-near { background: #eef7ea; color: #3a6b2a; } .whr-sum td.st-diff { background: #fff1d6; color: #7a4a00; } .whr-sum td.st-none { background: #fde2e2; color: #9b1c1c; }
.whr-sum td.whr-c.s.whr-tot.st-ok { background: #e3f2e7; } .whr-sum td.whr-c.s.whr-tot.st-diff { background: #fff1d6; }
:is(.whr-tbl, .whr-sum) th.whr-m, :is(.whr-tbl, .whr-sum) th.whr-all { text-align: right; padding-right: 8px; }
/* ---------- 2.5.36 (결정 gijang-24) 사무소 화면 — 수임처 화면과 같은 표준: 머리글 한 줄에 펼침 메뉴 · 아래 어두운 띠에 열린 탭 ---------- */
header.top { flex-wrap: nowrap !important; }
header.top .company-pick { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
header.top .company-pick select { flex: 0 1 260px; min-width: 150px; max-width: 300px; }
header.top .grow { flex: 1 1 0; min-width: 0; }
.gj-menus { display: flex; align-items: center; gap: 2px; flex: none; margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.28); }
.gj-menus .mb-g { position: relative; }
.gj-menus .mb-t { border: 0; background: none; font: inherit; font-size: 14px; color: #e3eff2; padding: 6px 11px; cursor: pointer; border-radius: 6px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.gj-menus .mb-t:hover { background: rgba(255,255,255,.12); color: #fff; }
.gj-menus .mb-t.on, .gj-menus .mb-g.open .mb-t { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.gj-menus .mb-dd { display: none; position: absolute; left: 0; top: calc(100% + 6px); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(10,30,35,.2); padding: 4px; min-width: 200px; z-index: 80; }
.gj-menus .mb-dd.right { left: auto; right: 0; }
.gj-menus .mb-g.open .mb-dd { display: grid; }
.gj-menus .mb-dd button { border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; padding: 7px 12px; border-radius: 6px; cursor: pointer; display: flex; gap: 8px; align-items: center; color: inherit; white-space: nowrap; }
.gj-menus .mb-dd button > span:first-child { flex: 1; }
.gj-menus .mb-dd button:hover { background: var(--soft); } .gj-menus .mb-dd button.on { color: var(--brand); font-weight: 600; }
.gj-menus .mb-dd .mb-open { font-style: normal; font-size: 8px; color: var(--brand-2, #2f7f8c); }
.me-narrow { display: none !important; }
.tabs.gj-band { display: flex; align-items: flex-end; gap: 8px; padding: 4px 16px 0; background: #0b4d5c; border-bottom: 0; min-height: 34px; position: sticky; top: 0; z-index: 40; }
.gj-tabs { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.gj-tab { display: inline-flex; align-items: center; border-radius: 8px 8px 0 0; font-size: 13px; color: #cfe3e8; }
.gj-tab:hover { background: rgba(255,255,255,.08); }
.gj-tab.on { background: var(--bg, #f3f6f7); color: var(--ink); }
.gj-tab button { border: 0; background: none; font: inherit; cursor: pointer; color: inherit; padding: 7px 4px; }
.gj-tab .t { padding-left: 14px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gj-tab.on .t { font-weight: 600; }
.gj-tab .t .st { font-style: normal; color: #ffd166; margin-left: 4px; }
.gj-tab .nw, .gj-tab .x { font-size: 12px; padding: 5px 6px; opacity: .7; } .gj-tab .x { padding-right: 10px; } .gj-tab .nw:hover, .gj-tab .x:hover { opacity: 1; }
.gj-band .gj-lead { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 7px; color: #cfe3e8; }
.gj-band .gj-lead .pg-hint { font-size: 12px; color: #cfe3e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gj-band .gj-lead button.pg-q { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #e3eff2; font-size: 11.5px; font-weight: 600; line-height: 18px; cursor: pointer; }
.gj-band .gj-lead[hidden] { display: none; }
.gj-band:not(:has(.gj-lead:not([hidden]))) .gj-tabs { flex: 1 1 auto; }
.gj-band .sub-help { flex: none; margin: 0 0 6px auto; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #e3eff2; border-radius: 999px; padding: 1px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.gj-band .sub-help:hover { background: rgba(255,255,255,.12); }
#panes > main[hidden] { display: none !important; }
.tb-ctx { position: fixed; z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(10,30,35,.2); padding: 4px; display: grid; min-width: 170px; }
.tb-ctx[hidden] { display: none; } .tb-ctx button { border: 0; background: none; text-align: left; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .tb-ctx button:hover { background: var(--soft); }
html.pop #panes, html.pop .gj-menus { display: none !important; }
/* 좁아지면 꺾지 않고 덜 중요한 것부터 접음: 단추 글자 → 근태급여·단축키를 이름 ▾ 안으로 → 메뉴 간격 */
header.top .company-pick { min-width: auto; } header.top .company-pick > .btn, header.top .company-pick > .dd { flex: none; }
@media (max-width: 1500px) { .gj-menus .mb-t { padding: 6px 8px; font-size: 13.5px; } } /* common-12 근태급여·단축키를 이름 ▾ 안으로 숨기던 것 없앰 */
@media (max-width: 1366px) { header.top .brand b { display: none; } header.top .company-pick select { flex-basis: 220px; } }
@media (max-width: 1200px) { .gj-menus .mb-t { padding: 6px 6px; font-size: 13px; } header.top .company-pick select { flex-basis: 180px; min-width: 130px; } header.top #meName { max-width: 90px !important; } }
#subs[hidden] { display: none !important; }
header.top { padding-top: 4px; padding-bottom: 4px; } /* 2.5.36 표가 한 줄이라도 위로 (화면표준 — 보이는 줄 수) */
.tabs.gj-band { padding-top: 3px; min-height: 29px; } .gj-tab button { padding-top: 5px; padding-bottom: 5px; } .gj-band .gj-lead { padding-bottom: 6px; } .gj-band .sub-help { margin-bottom: 5px; }
.gj-tab button { line-height: 18px; } .gj-band .sub-help { line-height: 18px; padding: 0 9px; margin-bottom: 4px; }
/* ---------- 화면 크기 표준 (결정 common-12) — 넘치면 숨기지 않고 두 줄 (scrfit.js 가 sf-tight → sf-wrap 을 붙임) ---------- */
header.top .me, header.top #meDd, header.top .me-g { flex: none; }
header.top.sf-wrap .me, header.top.sf-wrap #meDd { margin-left: auto; } header.top.sf-wrap .grow { display: none; }
/* 2026-10-19 gijang-25 유가증권 보조장부 1단계 */
.sec .sec-top { margin-top: 4px; }
.sec .sec-cnt:empty { display: none; }
.sec .sec-h { margin: 14px 0 6px; font-size: 13.5px; }
.sec .sec-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 14px 16px; background: #fbfcfc; font-size: 13px; }
.sec .sec-drop.on { border-color: var(--brand); background: var(--soft); }
.sec .sec-ok { color: var(--hi); }
.sec .sec-bad { color: var(--lo); font-weight: 600; }
.sec td.sec-1l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; font-size: 12px; }
.sec i.sec-m { display: inline-block; min-width: 18px; padding: 0 3px; margin-right: 2px; border-radius: 4px; font-style: normal; font-size: 11px; text-align: center; background: var(--lo-bg); color: var(--lo); }
.sec i.sec-m.on { background: var(--soft); color: var(--brand); }
.sec #secRT tbody tr { cursor: pointer; }
.sec #secRT tbody tr.sel td { background: var(--soft); }
.sec .sec-det { margin-top: 10px; }
.sec .sec-ck { margin: 0 0 8px; font-size: 12.5px; }
.sec .sec-bal { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.sec .sec-pdf { flex: 1 1 380px; min-width: 300px; }
.sec .sec-pdf iframe { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sec .sec-grid { flex: 1 1 560px; min-width: 300px; }
.sec .sec-ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 10px; margin-top: 8px; }
.sec .sec-ans, .sec .sec-pre { white-space: pre-wrap; font-size: 12.5px; background: #fbfcfc; border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-height: 360px; overflow: auto; }
.sec .sec-conf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.sec .sec-form { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sec .sec-form input:not([type=checkbox]) { max-width: 260px; }
/* 2.5.63 (결정 gijang-34 · 개발대기 D-11 시안7) 할 일 › 통장 단순화 — 큰 단계 3개 · 상태 칩 6개 · 받는 사람 칩 7개 · 기간 ▾ · 금액 ▾ · 도구 ▾ */
.proc.cmp .pc2-row { flex-wrap: wrap; overflow: visible; align-items: center; }
.proc.cmp .pc2-st.pc2-g { padding: 1px 10px; height: 24px; }
.proc.cmp .pc2-st.pc2-g .pc2-t { font-size: 13px; font-weight: 700; }
.pc2-st .pc2-gd { font-size: 11px; color: var(--muted); white-space: nowrap; margin-left: 2px; }
.pc2-subs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; align-items: center; }
.pc2-subs .chip-f { padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.pc2-subs .chip-f.zero { opacity: .55; }
.chip-f.pc-miss { color: #b3261e; border-color: #e0786b; background: #fdecea; font-weight: 600; }
.chip-f.pc-miss.on { background: #b3261e; border-color: #b3261e; color: #fff; }
.pk-exp { color: #7a5c00; } .pk-ar { color: #0b5c8c; }
.chip-f.pkf.pk-exp.on { background: #7a5c00; border-color: #7a5c00; } .chip-f.pkf.pk-ar.on { background: #0b5c8c; border-color: #0b5c8c; }
.btn.pc-per, .btn.pc-amt { white-space: nowrap; padding: 4px 9px; font-size: 12.5px; } .btn.pc-per b, .btn.pc-amt b { font-weight: 700; margin-left: 2px; }
.btn.pc-per.on, .btn.pc-amt.on, #pcToolBtn.on { border-color: var(--brand); background: var(--soft); }
.pc-pop { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.16); padding: 8px 10px; min-width: 220px; font-size: 13px; }
.pc-pop[hidden] { display: none; }
.pc-pop .pc-pop-h { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; color: #3b4d52; }
.pc-pop .pc-pop-ps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pc-pop .pc-pop-ps .chip-f { padding: 3px 10px; font-size: 12.5px; }
.pc-pop .pc-pop-in { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.pc-pop .pc-pop-tip { font-size: 11.5px; margin-top: 6px; }
.pc-toolmenu { padding: 4px; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.pc-toolmenu .btn.pc-tool-it { justify-content: flex-start; text-align: left; border-color: transparent; background: transparent; width: 100%; }
.pc-toolmenu .btn.pc-tool-it:hover { background: var(--soft); }
.pc-toolmenu .btn.pc-tool-it.on { background: var(--soft); border-color: var(--brand-2); }
.pc-reason .pc-learn { margin-left: 2px; }
/* 2.5.63 (gijang-34 · D-12) 자료 받기 메뉴 첫째 「위하고 받기」 · 받는 중 표시 */
.mb-dd .mb-act { font-weight: 600; } .mb-dd .mb-sep { border: 0; border-top: 1px solid var(--line); margin: 3px 6px; }
#menus .mb-t.busy .mb-busy { font-size: 11.5px; background: #eef7f9; color: var(--brand); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
/* 2.5.64 (결정 gijang-35 · 개발대기 D-17) 성격 ▾ — 상태 칩과 겹쳐 거름 · 다른 후보 · 확정 줄 흐리게 · 도구 ▾ Alt+↓ */
.btn.pc-nat { white-space: nowrap; padding: 4px 9px; font-size: 12.5px; } .btn.pc-nat b { font-weight: 700; margin-left: 2px; }
.btn.pc-nat.on, .btn.pc-nat.on-sel { border-color: var(--brand); background: var(--soft); }
.btn.pc-nat .kbd, #pcToolBtn .kbd { font-size: 10.5px; margin-left: 2px; }
.btn.pc-nat-x { padding: 2px 6px; margin-left: -4px; } .btn.pc-nat-x[hidden] { display: none; }
.pc-nat-dot { color: #b3261e; font-weight: 700; font-size: 12px; }
.pc-natpop { min-width: 380px; max-width: min(520px, calc(100vw - 16px)); padding: 6px; }
.pc-natpop .pc-nat-it { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; flex-wrap: wrap; }
.pc-natpop .pc-nat-it:hover, .pc-natpop .pc-nat-it.cur { background: var(--soft); }
.pc-natpop .pc-nat-it.cur { outline: 1px solid var(--brand-2); }
.pc-natpop .pc-nat-all { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: var(--muted); }
.pc-natpop .pc-nat-all.on { color: var(--brand); font-weight: 600; }
.pc-natpop .pc-nat-n { width: 12px; font-size: 11px; color: var(--muted); text-align: right; }
.pc-natpop .pc-nat-t { min-width: 120px; font-weight: 600; }
.pc-natpop .pc-nat-v { margin-left: auto; font-size: 12px; color: #3b4d52; }
.pc-natpop .pc-nat-v .bad { color: #b3261e; }
.pc-natpop .pc-nat-none { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 6px; }
.pc-natpop .pc-nat-sum { border-top: 1px solid var(--line); margin-top: 4px; padding: 6px 6px 2px; font-size: 12.5px; }
.pc-natpop .pc-nat-sum .ok { color: #1e7d4a; margin-left: 6px; } .pc-natpop .pc-nat-sum.bad { color: #b3261e; }
.pc-natpop .pc-nat-tools { display: flex; gap: 6px; justify-content: flex-end; padding: 4px 6px 2px; }
.pc2-steps.empty { display: none; }
.pc-nat-ctx { flex-wrap: wrap; row-gap: 4px; }
#pcList tr.pc-alt td { font-style: italic; opacity: .72; }
#pcList tr.pc-alt.cur td, #pcList tr.pc-alt.sel td { opacity: 1; }
#pcList tr.pc-fin td { color: #6b7b80; }
.badge.alt { background: #f1edf9; color: #5b3d99; border: 1px solid #d7cbef; font-style: normal; }
/* 2.5.65 (결정 gijang-36 · D-15) 장부 › 분개장 */
.jn-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.jn-bar .btn.jn-per { white-space: nowrap; padding: 4px 9px; font-size: 12.5px; } .jn-bar .jn-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.jn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.jn-seg button { border: 0; background: #fff; padding: 4px 9px; font: inherit; font-size: 12.5px; cursor: pointer; border-right: 1px solid var(--line); white-space: nowrap; }
.jn-seg button:last-child { border-right: 0; } .jn-seg button.on { background: var(--brand); color: #fff; }
.jn-sum { font-size: 12.5px; margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .jn-sum .ok { color: #1e7d4a; } .jn-sum .bad { color: #b3261e; }
.jn-wrap { max-height: calc(100vh - 230px); }
.jn-tbl td { font-size: 12.5px; } .jn-tbl tr.jn-v td { border-top: 1px solid #c9d6da; }
.jn-tbl td.jn-cr { padding-left: 14px; } .jn-tbl tr.jn-unbal td { background: #fff4f2; } .jn-tbl tr.jn-hit td { background: #fffbe8; } .jn-tbl tr.jn-mark td { background: #ffeeb8; } .jn-tbl tr.jn-mark td:first-child { box-shadow: inset 3px 0 0 #d99a00; } /* 2.5.73 gijang-41 점검 근거 줄 */
.jn-tbl tr.cur td { background: #dfeff3; } .jn-tbl tr.jn-month td { background: #f3f6f7; font-weight: 600; font-size: 12px; } .jn-tbl tr.jn-total td { background: #e8eff1; font-weight: 700; }
.jn-tbl td.memo { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2.5.66 (결정 gijang-37 · D-20·D-21) 할 일 › 통장 1행 = 통장 맞추기(녹색)·거래성격·원천 대사·점검·원복·조건찾기 등·↶ · 2행 = 상태 칩·범위 · 통장 맞추기 목록은 좁게(이름 옆 건수) */
.proc.cmp .pc-tabs { flex-wrap: wrap; row-gap: 2px; }
.pc-r1 { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-left: 2px; min-width: 0; }
.pc-r1 .btn { padding: 4px 9px; font-size: 12.5px; white-space: nowrap; }
.pc-r1 .btn.on { background: var(--soft); color: var(--brand); border-color: var(--brand-2); }
.btn.pc-nat.pc-match { background: #1f8a4c; border-color: #1f8a4c; color: #fff; font-weight: 700; font-size: 13.5px; padding: 5px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.btn.pc-nat.pc-match:hover { background: #18733f; border-color: #18733f; }
.btn.pc-nat.pc-match.on, .btn.pc-nat.pc-match.on-sel { background: #156a3a; border-color: #0f5a30; color: #fff; outline: 2px solid #9fd8b4; outline-offset: 1px; }
.btn.pc-nat.pc-match .kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); color: #fff; }
.btn.pc-nat.pc-match .pc-nat-dot { color: #ffd6d2; }
.btn.pc-kind.on-sel { border-color: var(--brand); background: var(--soft); }
.btn.pc-undo { padding: 4px 7px; }
.proc.cmp .pc-filter #pcChipBox { margin-right: 2px; }
.pc-natpop { min-width: 0; width: max-content; }
.pc-natpop .pc-nat-it { flex-wrap: nowrap; }
.pc-natpop .pc-nat-t { min-width: 96px; }
.pc-natpop .pc-nat-v { margin-left: 0; min-width: 74px; font-variant-numeric: tabular-nums; }
.pc-kindpop .pc-nat-t { min-width: 52px; }
.pc-kindpop .pc-nat-v { min-width: 34px; text-align: right; }
.pc-kindpop .pc-kind-it.zero { opacity: .55; }
.pc-natpop.pc-kindpop { max-width: 230px; } .pc-kindpop .pc-pop-h, .pc-kindpop .pc-nat-sum { white-space: normal; font-size: 12px; }
/* 2.5.66 (gijang-37 · D-19) 수임처 통장(할 일) 맨 위 진행 막대 · 폰도 같은 표 */
.td-prog { margin: 2px 0 8px; } .td-prog-t { font-size: 13.5px; color: #2f4147; } .td-prog-t b { color: var(--ink); }
.td-prog-q { font: inherit; padding: 0 2px; } .td-prog-q.on { color: #8a5a00; font-weight: 600; }
.td-prog-bar { height: 7px; background: #eef2f3; border-radius: 4px; overflow: hidden; margin-top: 4px; max-width: 520px; } .td-prog-bar i { display: block; height: 100%; background: #2e8b57; }
.td-r1 { margin-bottom: 4px; }
.td-prog-q { background: none; border: 0; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chip-f.fee-warn { background: #fff4dc; border-color: #e8c77a; color: #6b4a00; } /* 2026-10-29 gijang-47 이체수수료 n쌍 */
.pc-natpop .pc-pop-hint { white-space: normal; width: 0; min-width: 100%; box-sizing: border-box; font-size: 11.5px; line-height: 1.35; } /* 2.5.82 common-19 목록 고르기 안내 — 목록 폭을 넓히지 않고 접힘 */
.pc-natpop .pc-nat-t .kbd { font-weight: 400; margin-left: 2px; }
/* 2026-10-30 (gijang-61) 거래처 코드 화면 · 거래처 칸 목록 (pcode.js — 사무소·수임처 같음) */
.pcd-bar { flex-wrap: wrap; gap: 4px 6px; }
.pcd-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.pcd-xls { margin: 6px 0; padding: 8px 10px; } .pcd-xls .row { flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.pcd-xl { min-width: 0; font-weight: 600; } .pcd-warn { font-size: 12px; color: #8a5a00; }
.pcd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 10px; align-items: start; }
.pcd-list { max-height: calc(100vh - 290px); min-height: 200px; }
.pcd-list tr[data-code] { cursor: pointer; } .pcd-list tr.cur td { background: var(--soft); }
.pcd-list td .ell { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pcd-list .pcd-x { padding: 1px 6px; visibility: hidden; } .pcd-list tr:hover .pcd-x, .pcd-list tr.cur .pcd-x, .pcd-list tr.muted .pcd-x { visibility: visible; }
.pcd-det { position: sticky; top: 0; } .pcd-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcd-lock input, .pcd-lock select { background: #f1f3f4; color: var(--muted); }
.pcd-ed { margin: 6px 0; font-size: 12.5px; } .pcd-ed s { color: var(--muted); }
.pcd-nonum { margin-left: 4px; font-size: 11px; color: #8a5a00; background: #fff1d6; border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.pcd-sec { -webkit-text-security: disc; }
.pcd-eye.on { background: var(--soft); color: var(--brand); }
.pcd-sim:empty { display: none; } .pcd-sim { font-size: 12.5px; border: 1px dashed var(--line); border-radius: 6px; padding: 4px 8px; }
.pcd-simr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0; } .pcd-simr .btn { padding: 1px 8px; margin-left: auto; }
.pcd-note { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; display: none; gap: 8px; align-items: center; flex-wrap: wrap; max-width: calc(100vw - 32px);
  background: #1d2b30; color: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; }
.pcd-note.on { display: flex; } .pcd-note .btn.ghost { color: #fff; border-color: #fff6; }
.ptp { position: fixed; z-index: 2500; display: none; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.18); font-size: 12.5px; }
.ptp.on { display: block; }
.ptp-h { padding: 4px 8px; color: #8a5a00; background: #fffaf0; border-bottom: 1px solid var(--line); }
.ptp-r { display: grid; grid-template-columns: 58px minmax(0, 1fr) 30px minmax(0, 64px) minmax(0, 100px) auto auto; gap: 6px; align-items: center; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.ptp-r > span { overflow: hidden; text-overflow: ellipsis; } .ptp-n { display: flex; min-width: 0; align-items: baseline; } .ptp-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ptp-n .ptp-rec, .ptp-n .ptp-dup { flex: 0 0 auto; } .ptp-r:hover, .ptp-r.hl { background: var(--soft); }
.ptp-r.ptp-sub { padding-left: 18px; color: var(--muted); }
.ptp-k, .ptp-o, .ptp-b { color: var(--muted); }
.ptp-rec { margin-left: 4px; color: #6f9fd8; font-size: 11.5px; } /* 흐린 파란 (추천) */
.ptp-dup { margin-left: 4px; color: #8a5a00; font-size: 11px; }
.ptp-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 12px; } .ptp-x:hover { color: #b3261e; }
@media (max-width: 900px) { .pcd-grid { grid-template-columns: minmax(0, 1fr); } .pcd-det { position: static; } .pcd-form { grid-template-columns: minmax(0, 1fr); } }
.pcd-chk { align-self: end; display: flex; gap: 6px; align-items: center; font-size: 13px; padding-bottom: 8px; } .pcd-chk input { width: auto; }