/* DMRS Phase 5 design system (confirmed 2026-07-16).
   토큰(:root)·셸(사이드바+상단바)은 shell.css — 이 파일보다 먼저 로드된다.
   Tables: 13px, ~32px rows, ink rules (2px header line, double total line),
   tabular numerals. Gray scale/semantic colors follow GitHub Primer values. */

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Pretendard", system-ui, "Malgun Gothic", sans-serif;
    color: var(--gray-9);
    font-size: 14px;
    word-break: keep-all;
}

/* 본문 영역(회계 화면 전용 — 셸은 shell.css) */
/* overflow를 두지 않는다(스크롤 조상은 창 하나) — 두면 thead sticky가 죽는다.
   넓은 표의 가로 스크롤은 .tbl-wrap이 담당. */
.content { flex: 1; min-width: 0; padding: 22px 24px; }
.page { max-width: var(--page-w); margin: 0 auto; }
.page.full { max-width: none; }
/* ── 문서형 보고서(재무상태표·손익계산서 — 07-17 D안 확정) ──
   캔버스(책상, gray-1) 위 흰 종이(.doc-sheet 중앙 880px 대칭) + 옆 여백 레일.
   레일은 흐름 밖 오버레이(absolute 스트립 안 sticky)라 종이 배치에 영향이 없고,
   여백이 레일을 못 담으면(컨테이너 1180px 미만) 종이 위 우측으로 접힌다.
   인쇄 시 종이만 남는다(print.css에서 평면화). */
.content:has(.page.doc) { background: var(--gray-1); }
.doc-layout { container-type: inline-size; }
.doc-wrap { position: relative; max-width: 880px; margin: 0 auto; }
/* 문서형 드릴다운 안내: 종이 위가 아닌 책상(회색 영역)에 — 종이 은유 보존.
   doc-wrap 밖(레일 top:0 정렬 유지)에서 종이 폭(880px)에 맞춰 우측 정렬 */
.doc-desk-note { max-width: 880px; margin: 0 auto 8px; text-align: right; }
.doc-sheet {
    background: #fff;
    border: 1px solid var(--gray-2); border-radius: 2px;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .10), 0 12px 28px rgba(31, 35, 40, .10);
    padding: 40px 56px 56px; margin-bottom: 32px;
}
.doc-title { text-align: center; margin: 2px 0 4px; }
/* 종이 안에서 표는 종이 폭을 채운다. 금액 열은 고정폭(당기·전기말 2열 대응) */
.tbl-doc { margin: 0 auto; }
.doc-sheet .tbl-doc th.num, .doc-sheet .tbl-doc td.num { width: 168px; }
.doc-railzone {
    position: absolute; top: 0; bottom: 0; left: calc(100% + 16px);
    width: 164px; /* 고정폭 — max-content는 % 폭 자식과 순환해 레일이 무한정 넓어진다.
                     날짜 입력(110px)+요일 (수) 한 줄 수용 폭 */
}
.doc-rail {
    position: sticky; top: calc(var(--topbar-h) + 16px);
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 10px;
    background: var(--gray-0); border: 1px solid var(--gray-2); border-radius: 8px;
}
.doc-rail .btn { text-align: center; }
/* 날짜 입력+요일(.date-wd)을 한 줄 유지 — 요일이 다음 줄로 떨어지지 않게 */
.doc-rail .inline-form { display: flex; align-items: center; gap: 4px; }
.doc-rail .inline-form input.date-smart { flex: 1; min-width: 0; }
.doc-rail .date-wd { margin-left: 0; white-space: nowrap; }
.doc-rail .filter-form { flex-direction: column; align-items: stretch; }
.doc-rail input, .doc-rail select { width: 100%; box-sizing: border-box; }
@container (max-width: 1180px) {
    .doc-railzone { position: static; width: auto; margin-bottom: 10px; }
    .doc-rail {
        position: static; flex-direction: row; justify-content: flex-end;
        flex-wrap: wrap; background: transparent; border: 0; padding: 0;
    }
    .doc-rail .inline-form { display: inline; }
    .doc-rail .filter-form { flex-direction: row; align-items: center; }
    .doc-rail input[type="date"], .doc-rail select { width: auto; }
    .doc-rail input[type="number"] { width: 72px; }
}

h1 { font-size: 20px; margin: 0 0 16px; }

/* ── 홈(대시보드) — 이 화면만 본문 배경을 옅은 회색으로(카드가 뜨는 데스크) ── */
.content:has(.page.home) { background: var(--gray-0); }
.dash-date { font-size: 13px; color: var(--gray-5); margin: 0 0 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { background: #fff; border: 1px solid var(--gray-2); border-radius: 8px; padding: 12px 16px 10px;
        display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--gray-9); }
.tile:hover { border-color: var(--gray-3); }
.tile .lb { font-size: 12px; font-weight: 600; color: var(--gray-6); letter-spacing: .03em; }
.tile .val { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.tile .cap { font-size: 12px; color: var(--gray-5); font-variant-numeric: tabular-nums; }
.tile svg { margin-top: 4px; }
.up { color: var(--ok); font-weight: 600; }
.warn-t { color: var(--warn); font-weight: 600; }
.dash-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.dcard { background: #fff; border: 1px solid var(--gray-2); border-radius: 8px; padding: 12px 16px 14px; margin-bottom: 12px; }
.dcard h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--gray-6); display: flex; align-items: center; }
.dcard h4 .go { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.dcard h4 .go:hover { text-decoration: underline; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--gray-1); font-size: 13px; }
.todo li:last-child { border-bottom: 0; }
.todo .cnt { font-weight: 700; font-variant-numeric: tabular-nums; }
.todo .b { margin-left: auto; font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.todo .b:hover { text-decoration: underline; }
.todo .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot.blue { background: var(--accent); }
.dot.amber { background: #d4a72c; }
.dot.gray { background: var(--gray-3); }
h2 { font-size: 16px; margin: 24px 0 10px; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.msg { padding: 9px 12px; border-radius: 6px; margin-bottom: 6px; }
.msg.success { background: var(--ok-subtle); color: var(--ok); }
.msg.error { background: var(--danger-subtle); color: var(--danger); }
/* 에이전트 자동 업로드 도착 배너([은행내역] 폴링) — 작업 중일 때만 노출.
   display:flex가 hidden 속성(UA display:none)을 이기므로 [hidden] 복원 필수 */
.msg.poll-banner { display: flex; align-items: center; gap: 10px; background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.msg.poll-banner[hidden] { display: none; }

/* ── tables: ledger grammar ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--gray-1); text-align: left; }
thead th {
    background: var(--gray-0); font-weight: 600; font-size: 12px;
    color: var(--gray-6);
    /* 긴 표에서 머리행이 화면 상단에 고정. collapse된 border는 sticky를
       따라오지 않으므로 머리행 괘선(2px 먹선·차대 세로선)은 inset shadow로 그린다.
       line-height 고정 → 줄 높이 28px(7+14+7) 확정, 2단 머리 오프셋의 기준. */
    position: sticky; top: var(--topbar-h); z-index: 2; line-height: 14px;
    border-bottom: 0; box-shadow: inset 0 -2px 0 var(--rule);
}
thead th.vr { border-right: 0; box-shadow: inset -1px 0 0 var(--gray-3), inset 0 -2px 0 var(--rule); }
thead th.vl { border-left: 0; box-shadow: inset 1px 0 0 var(--gray-3), inset 0 -2px 0 var(--rule); }
/* 일·월계표 2단 머리행: 둘째 줄은 상단바+첫 줄 높이(28px)만큼 내려 고정 */
thead tr + tr th { top: calc(var(--topbar-h) + 28px); }
tbody tr:hover > td { background: var(--gray-0); }
/* 드릴다운 어포던스: 이동 가능 행(tr[data-href])만 커서 + 연청 hover — 일반 행과 구분 */
tbody tr[data-href] { cursor: pointer; }
tbody tr[data-href]:hover > td { background: var(--accent-subtle); }
/* data-rowkey 행(은행·매출매입·전표): hover 시 커서+연청 강조로 작업 행을 또렷이,
   상세로 나갔다 돌아오면 클릭했던 행을 .row-active로 강조 유지(remember_scroll.js) */
tbody tr[data-rowkey] { cursor: pointer; }
tbody tr[data-rowkey]:hover > td { background: var(--accent-subtle); }
tbody tr[data-rowkey].row-active > td { background: var(--accent-subtle); }
/* 분개장: 하이라이트가 라인(행)이 아니라 전표 단위로 움직인다 — 같은 data-entry 행 묶음
   (entry_group 인라인 JS가 hover 시 .entry-hover를 묶음 전체에 부여) */
tbody tr.entry-hover > td { background: var(--accent-subtle); }
/* 체크박스 선택 행: 연노랑 형광펜(2026-07-24 채택 — 연청은 드릴다운/복귀와 겹침).
   table_select.js가 체크 상태와 .sel을 동기화 — 긴 행에서 선택 대상 검산용 */
tbody tr.sel > td, tbody tr.sel:hover > td { background: var(--attention-subtle); }
/* 선택 작업 바: 표 위 고정(N건 선택 + 일괄 작업, 0건 시 비활성).
   thead sticky와 층을 나눔 — .has-selbar 표의 머리행은 바 높이만큼 내려 고정 */
.sel-bar {
    position: sticky; top: var(--topbar-h); z-index: 3;
    display: flex; align-items: center; gap: 8px; height: 40px;
    background: var(--gray-0); border: 1px solid var(--gray-2); border-radius: 6px;
    padding: 0 12px; margin-bottom: 8px;
}
.sel-bar .sel-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sel-bar .sel-count.zero { color: var(--gray-5); font-weight: 400; }
.has-selbar thead th { top: calc(var(--topbar-h) + 48px); }
/* 일괄 작업 버튼의 아이콘(+라벨 유지) */
.btn .ic { font-size: 13px; line-height: 1; margin-right: 1px; }
/* 대표 식별자(행의 주체 한 곳만 세미볼드 — 화면당 1열) */
td.cell-key { font-weight: 600; }
/* 반복 행 액션 아이콘 버튼: 툴팁·aria-label 필수. 30px 원형 테두리 —
   테두리 없는 소형은 발견성이 낮다는 피드백(07-24)으로 키움 */
.ib {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid var(--gray-3); border-radius: 50%;
    background: #fff; cursor: pointer; font-size: 15px; color: var(--gray-6); padding: 0;
}
.ib:hover { background: var(--gray-1); color: var(--gray-9); border-color: var(--gray-5); }
.ib.danger:hover { background: var(--danger-subtle); color: var(--danger); border-color: var(--danger); }
/* 행 액션 묶음(.ib-seg, 고스트형): 아이콘 위+라벨 아래, 테두리 없음 — [○○관리] 머리글이
   구분을 맡으므로 행 안 박스 불필요(07-30 수석 협의 3라운드: 이중 박스→한 테두리→무테두리.
   경위·규칙 정본 docs/phase-5-ui-design.md §4). 클릭 어포던스는 색 아이콘+hover 배경이 담당,
   파괴 칸은 ✕ 아이콘만 적색(행마다 반복되는 빨강 최소화). a·button 공용(.seg). */
.ib-seg { display: inline-flex; gap: 2px; vertical-align: middle; }
.ib-seg form { display: contents; }   /* POST 삭제(inline-form)도 칸으로 참여 */
.ib-seg .seg {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 44px; padding: 2px 6px 3px; border: 0; border-radius: 6px;
    background: none; color: var(--gray-6); font-family: inherit;
    font-size: 10.5px; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.ib-seg .ic { font-size: 14px; line-height: 1.15; }
.ib-seg .ic.info { color: var(--accent); }   /* ⓘ = 화면 사용법과 같은 안내 파랑 */
/* hover 강조는 색이 아니라 형태로 — 숨겼던 테두리가 링으로 되살아난다(07-30 수석 협의:
   연노랑은 체크 선택 의미로 예약·연청은 이동 의미라 표 안 새 hue 금지) */
.ib-seg .seg:hover {
    background: var(--gray-1); color: var(--gray-9);
    box-shadow: inset 0 0 0 1px var(--gray-3);
}
.ib-seg .seg.danger .ic { color: var(--danger); font-weight: 700; }
.ib-seg .seg.danger:hover {
    background: var(--danger-subtle); color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
}
/* 머리글 정렬(목록 화면 전용): 비활성 열 흐린 ↕, 활성 열 강조색 ▲▼ + aria-sort */
th.sortable { padding: 0; }
th.sortable .thb {
    display: flex; align-items: center; gap: 4px; width: 100%;
    padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--gray-6); text-decoration: none;
}
th.sortable.num .thb { justify-content: flex-end; }
th.sortable .thb:hover { color: var(--gray-9); }
th.sortable .arrow { font-size: 11px; color: var(--gray-3); }
th.sortable[aria-sort] .arrow { color: var(--accent); }
th.sortable[aria-sort] .thb { color: var(--gray-9); }
/* 매출매입 상태 탭(재설계 07-27) — 은행내역 탭과 같은 seg 문법 */
.sp-tabs { margin: 0 0 12px; }
/* 탭 패널 표시 — html[data-*-tab]는 탭 버튼 직후의 동기 스크립트가 첫 페인트 전에
   스탬프(하단 스크립트로 숨기면 모든 표가 겹쳐 보였다 사라지는 깜박임). JS 꺼짐=전부 표시 */
html[data-sp-tab="pending"] #sp-view-posted,
html[data-sp-tab="posted"] #sp-view-pending,
html[data-bank-tab="pending"] .bank-view:not(#view-pending),
html[data-bank-tab="excluded"] .bank-view:not(#view-excluded),
html[data-bank-tab="posted"] .bank-view:not(#view-posted) { display: none; }
/* 고정 레이아웃(재설계 a): 표만 내부 스크롤(은행 bank-scroll과 동일 방식) —
   제목·안내·업로드·탭·필터는 화면에 남고 창 스크롤이 생기지 않는다 */
.tbl-scroll { max-height: calc(100vh - 320px); min-height: 280px; overflow: auto; }
/* 상단 구성이 가벼운 화면(분개장 등): 표 높이를 더 크게 */
.tbl-scroll.tall { max-height: calc(100vh - 240px); }
/* 자금출납장 계좌 세그먼트 — 계좌가 많으면 줄바꿈 */
.seg.cb-accounts { margin: 0 0 12px; flex-wrap: wrap; }
/* 자금계획 결제예정 관리: 탭·인라인 수정 폼·분할 행 */
.seg.cp-tabs { margin: 0 0 12px; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
input.w-date { width: 108px; }
input.w-amt { width: 110px; text-align: right; }
tr.cp-split-row > td { background: var(--gray-0); }
/* [자금흐름 대사]: 은행 대체 묶음 문법 재사용 — 발생+짝 행은 좌측 색 바(같은 색=
   같은 묶음, 인접 교대 b1/b2·미회수=앰버 bw) + 🔗 pairchip. 폰트는 본 행과 동일 */
.flow-occ td:first-child, .flow-occ th:first-child { border-left: 4px solid transparent; }
/* 색 바는 의사요소로 — 묶음 시작(발생 행)·끝(마지막 짝 행)에 3px 여백을 둬
   인접 묶음의 바가 이어 붙지 않고 끊겨 보인다(묶음 간 구분) */
.flow-occ tr.bundle > td:first-child { position: relative; }
.flow-occ tr.bundle > td:first-child::before {
    content: ""; position: absolute; left: -4px; top: 0; bottom: 0;
    width: 4px; background: var(--b-bar);
}
.flow-occ tr[data-occ].bundle > td:first-child::before { top: 3px; }
.flow-occ tr.bundle-end > td:first-child::before { bottom: 3px; }
.flow-occ tr.b1 { --b-bar: #8250df; }
.flow-occ tr.b2 { --b-bar: #bf3989; }
.flow-occ tr.bw { --b-bar: #bf8700; }
tr.flow-hit > td { background: var(--accent-subtle); }
/* 짝 행 = 트리(└ 들여쓰기) + 배지 칩 — 폰트는 본 행과 동일 */
.flow-occ .sub-lbl { padding-left: 22px; color: var(--gray-6); }
form.flow-bulk { margin: 0 0 10px; }
/* 거래처원장: 요약+상세를 flex 한 상자로 — 요약이 쓰고 남은 높이를 상세가
   전부 차지(요약은 최대 40%에서 캡), 창 스크롤 없이 각자 내부 스크롤 */
.pl-stack {
    display: flex; flex-direction: column; gap: 12px;
    height: calc(100vh - 320px); min-height: 320px;
}
/* 요약은 축소 금지(flex-shrink 0) — 내용 높이만큼 온전히 차지하고 40%에서만 캡.
   shrink를 허용하면 상세에 밀려 한 줄도 안 보인 채 스크롤이 생긴다 */
.pl-summary-wrap { flex: 0 0 auto; max-height: 40%; overflow: auto; margin: 0; }
.pl-summary tbody tr[data-fold-target] { cursor: pointer; }
.pl-summary tbody tr[data-fold-target]:hover > td { background: var(--accent-subtle); }
.tbl-scroll.pl-detail { flex: 1 1 auto; max-height: none; min-height: 0; }

/* ── 상태 칩(P6, A안 방향 중심 — 재설계 c 채택 화면부터) ── */
.chip {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.chip.sale, .chip.in { background: var(--accent-subtle); color: var(--accent); }
.chip.buy, .chip.out { background: var(--orange-subtle); color: var(--orange); }
.chip.transfer { background: var(--purple-subtle); color: var(--purple); }
.chip.done { background: var(--ok-subtle); color: var(--ok); }
.chip.wait { background: var(--attention-subtle); color: var(--attention); }
.chip.off { background: var(--gray-1); color: var(--gray-6); }
.chip.danger { background: var(--danger-subtle); color: var(--danger); }
/* 출처 배지 = 원천 화면 역링크(분개장): 클릭하면 은행내역·매출/매입장·급여대장으로 */
a.src-link { text-decoration: none; cursor: pointer; }
a.src-link .chip { cursor: pointer; }
a.src-link:hover .chip { box-shadow: inset 0 0 0 1.5px currentColor; }

/* ── 화면 안내 통합 블록(P4, 재설계 f) — 첫 방문 펼침, 이후 상태 기억(screen_help.js) ── */
details.screen-help { margin: 0 0 10px; font-size: 12px; color: var(--gray-6); }
details.screen-help summary {
    cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center;
    color: var(--gray-5);
}
details.screen-help summary::before { content: "ⓘ"; color: var(--accent); }
details.screen-help[open] {
    background: var(--gray-0); border: 1px solid var(--gray-2); border-radius: 6px;
    padding: 8px 12px;
}
details.screen-help .help-body { margin-top: 6px; line-height: 1.7; }

/* ── 헤더 검색(P3, 재설계 e) — 🔍 팝오버 + 활성 시 값 칩 ── */
/* 모양은 공유하되 동작 클래스는 분리(07-31): .hsearch=header_search.js(GET 필터형),
   .lf-open=ledger_find.js(원장 강조형). 한 버튼에 둘 다 달면 팝오버가 두 개 열린다. */
th button.hsearch, th button.lf-open {
    border: 0; background: none; cursor: pointer; padding: 0 2px;
    font-size: 12px; color: var(--gray-5);
}
th button.hsearch:hover, th.searched button.hsearch,
th button.lf-open:hover, th.searched button.lf-open { color: var(--accent); }
.hchip {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
    background: var(--accent-subtle); color: var(--accent);
    border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}
.hchip a { color: inherit; text-decoration: none; font-weight: 700; }
.hpop {
    position: fixed; z-index: 40;
    background: #fff; border: 1px solid var(--gray-3); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 40, .15); padding: 8px;
}
.hpop input { font: inherit; font-size: 13px; padding: 5px 8px; width: 220px;
              border: 1px solid var(--gray-3); border-radius: 6px; }
.hpop .hint { font-size: 11px; color: var(--gray-5); margin-top: 6px; }
/* 제안 목록(.hsug) — 네이티브 datalist 대신 자체 렌더. 행 모양은 .acombo-list와 공유(아래 그룹 선택자) */
.hpop .hsug { margin: 6px 0 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.hpop .hlist { min-width: 140px; max-height: 220px; overflow: auto; font-size: 13px; }
.hpop .hlist div { padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.hpop .hlist div:hover, .hpop .hlist div.on { background: var(--accent-subtle); color: var(--accent); }
th button.hfilter {
    border: 0; background: none; cursor: pointer; padding: 0 2px;
    font-size: 11px; color: var(--gray-5);
}
th button.hfilter:hover, th.searched button.hfilter { color: var(--accent); }

/* 한눈에 보기(도움말) 요점 목록 */
.note-list { font-size: 13px; color: var(--gray-6); margin: 8px 0 20px; padding-left: 20px; }
.note-list li { margin: 3px 0; }
.note-list b { color: var(--accent); }

/* 자금일보: 좌우 2단 구획(자산/부채, 입금/출금) — 좁아지면 세로 적층 */
.dcr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-items: start; }
@media (max-width: 1000px) { .dcr-cols { grid-template-columns: 1fr; } }
.dcr-cols h3 { font-size: 14px; margin: 10px 0 6px; }
/* 관리항목 편집 줄(화면 전용) */
.dcr-items { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
             background: var(--gray-0); border: 1px solid var(--gray-2); border-radius: 6px;
             padding: 8px 12px; margin: 10px 0 4px; font-size: 13px; }
.dcr-items label { font-weight: 600; color: var(--gray-6); font-size: 12px; }
.dcr-items input[type=text] { width: 110px; }

/* 찾기/검색 입력의 발견성: 아이콘 + 충분한 폭 (label은 각 화면에서 제공) */
.search-box { position: relative; display: inline-flex; }
.search-box .mag {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    color: var(--gray-5); font-size: 13px; pointer-events: none;
}
.search-box input { width: 300px; padding-left: 28px; }
.find-bar label { font-size: 12px; font-weight: 600; color: var(--gray-6); white-space: nowrap; }
/* 연월 입력 규격 폭(P2) — 원장 시작/종료월 등 */
input.w-ym { width: 84px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot tr.totals td {
    border-top: 2px solid var(--rule); border-bottom: 3px double var(--rule);
    background: var(--gray-0);
}
/* negative amounts: sign first, color second (△1,234 pattern) */
.neg { color: var(--danger); }

/* 외화 병기(외화금액 @ 환율): 회색 축소 표기가 묻힌다는 피드백(07-17) —
   원화보다 한 단계 작게 유지하되 청색+세미볼드로 또렷하게 */
small.fx {
    font-size: 12px; font-weight: 600; color: var(--accent);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 전폭 표 보고서 머리(07-17 확정 문법) — 2줄 ──
   줄1 .report-tools: 도구 전부(토글·이동·필터·인쇄) 우측 정렬, 좁아지면 이 줄
   안에서만 줄바꿈. 줄2 .report-head: 좌(기간 라벨)·중앙(제목)·우(균형칸) 3분할.
   제목은 nowrap — 어떤 폭에서도 문서 머리는 안 깨진다. (이력: 도구가 제목과
   한 줄이던 3분할 단일 줄은 창 축소 시 세 구역이 폭을 다투며 붕괴해 개정) */
.report-tools {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 6px; row-gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
}
.report-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.report-head .side { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.report-head .side.r { justify-content: flex-end; }
.report-head h1 { margin: 0; text-align: center; white-space: nowrap; }
.report-note { text-align: center; margin: -4px 0 14px; }

td.ctr, th.ctr { text-align: center; }

/* 세로 괘선: 일계표·월계표의 차/대 구획 */
td.vr, th.vr { border-right: 1px solid var(--gray-3); }
td.vl, th.vl { border-left: 1px solid var(--gray-3); }

/* 대차 일치/불일치 등 상태 문구 */
.flag-ok { color: var(--ok); font-weight: 700; }
.flag-bad { color: var(--danger); font-weight: 700; }
/* 서술 문구 안 핵심 단어 강조(계표 검증의 줄었다/늘었다 등) */
.emph { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* 세그먼트 토글(계표 일계/월계/누계 등 화면 전환) */
.seg { display: inline-flex; border: 1px solid var(--gray-2); border-radius: 6px; overflow: hidden; }
.seg a {
    padding: 7px 12px; font-size: 13px; color: var(--gray-6);
    text-decoration: none; border-left: 1px solid var(--gray-2); white-space: nowrap;
}
.seg a:first-child { border-left: 0; }
.seg a:hover { background: var(--gray-0); }
.seg a.on { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
/* .seg 를 button 으로도(은행 처리상태 탭) */
.seg button { padding: 7px 14px; font: inherit; font-size: 13px; color: var(--gray-6);
    background: transparent; border: 0; border-left: 1px solid var(--gray-2);
    white-space: nowrap; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--gray-0); }
.seg button.on { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.seg button b { font-weight: 800; }
.bank-tabs { margin: 0 0 16px; }

/* 조회 필터 폼(툴바 안 인라인) */
.filter-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.filter-form.wrap { flex-wrap: wrap; }
.filter-form .spacer { flex: 1; }   /* 액션(조회·초기화)을 오른쪽으로 밀어냄 */

/* 테이블 셀·툴바 속 POST 폼 */
.inline-form { margin: 0; display: inline; }

/* 작은 보조 각주 */
.note { color: var(--muted); font-size: 12px; }

/* 넓은 표: 페이지가 아니라 표 안에서만 가로 스크롤 */
.tbl-wrap { overflow-x: auto; }
/* 상자 안 sticky는 상자 기준 — 상단바 오프셋(46px)이 아니라 상자 맨 위에 붙는다 */
.tbl-wrap thead th { top: 0; }

/* 작업대형 그리드(은행내역 등 .page.workbench): 창 대신 표만 내부 스크롤.
   sticky 머리행이 .tbl-wrap(스크롤 조상)에 갇히는 화면 — 상자에 세로 스크롤을
   줘서 머리행을 상자 위에 고정하고, 위 필터·아래 액션 버튼은 항상 보이게 한다. */
/* flex: none — .content의 기본 flex:1(basis 0)이 height를 무시하고 늘어나는 것을 막는다 */
.content:has(.page.workbench) { flex: none; height: calc(100vh - var(--topbar-h)); overflow: auto; }
.page.workbench { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.page.workbench form:has(> .tbl-wrap) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page.workbench .tbl-wrap { flex: 1; min-height: 180px; overflow: auto; }

/* 은행내역: 계좌 버튼 그리드·상태 바·행 표시 */
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); gap: 8px 16px; margin-bottom: 12px; }
.btn.ctr { text-align: center; }
.toolbar.nowrap-bar { flex-wrap: nowrap; white-space: nowrap; }
.range-inline { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
tr.row-flag > td { background: var(--warn-subtle); }

/* 폭·간격 유틸 */
.w-xs { width: 60px; }
.w-sm { width: 80px; }
/* 세로형 등록 폼 표의 라벨 열(발주 등록 등) — 인라인 style 금지 규칙의 공용 클래스 */
th.form-th { width: 130px; text-align: left; }
.tbl-narrow { max-width: 520px; }
.mt { margin-top: 14px; }
.mt-sm { margin-top: 8px; }
.tight { margin: 6px 0 0; }
.indent { padding-left: 24px; }
.indent2 { padding-left: 44px; }
/* 본문 중간의 굵은 합계 행(재무상태표 자산총계 등) */
tr.grand > td { border-top: 2px solid var(--rule); background: var(--gray-0); }
tr.row-strong > td { font-weight: 600; }
.btn.disabled { opacity: .45; cursor: not-allowed; }
.nonfield.warn { background: var(--warn-subtle); color: var(--warn); }

.btn {
    display: inline-block; padding: 7px 14px; border-radius: 6px;
    border: 1px solid var(--gray-2); background: #fff; color: var(--gray-9);
    text-decoration: none; cursor: pointer; font-size: 13px; font-family: inherit;
    white-space: nowrap;  /* 버튼 라벨은 절대 줄바꿈하지 않는다 */
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* 행 단위 파괴 액션은 .ib-seg .seg.danger로 통일(07-30) — 종전 .btn.danger-outline 폐기 */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 기간 이동 위젯 — ◀◀ ◀ [from]~[to] ▶ ▶▶ ⌂당월 «라벨» */
.date-nav { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.date-nav button {
    padding: 4px 8px; border-radius: 6px; font-size: 12px; font-family: inherit;
    border: 1px solid var(--gray-2); background: var(--gray-0); color: var(--gray-7); cursor: pointer;
}
.date-nav button:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.date-nav select.dn-month {
    margin-left: 6px; padding: 4px 6px; border-radius: 6px; font-size: 12px;
    font-family: inherit; border: 1px solid var(--gray-2); background: var(--gray-0); cursor: pointer;
}
.date-nav .dn-label { color: var(--gray-5); font-size: 12px; white-space: nowrap; }
/* 요일 스팬 폭 예약 — 템플릿이 빈 스팬을 미리 그리고 date.js가 "(화)"만 채운다.
   폭을 안 잡아두면 채워질 때 오른쪽 요소가 밀려 리로드마다 깜박인다. */
.date-nav .date-wd { display: inline-block; min-width: 26px; white-space: nowrap; }

/* ── 조회기간 선택기 팝오버(daterange.js) — .date-nav[data-range-picker] 전용, 분개장 시범.
   내부 버튼은 .date-nav button 규칙(0-1-1)을 .drp 스코프(0-2-0+)로 전량 덮어쓴다 ── */
.date-nav.drp-anchor { position: relative; }
.date-nav button.drp-open.open { background: var(--accent-subtle); border-color: var(--accent); }
.drp {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: none;
    background: #fff; border: 1px solid var(--gray-2); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 40, .15); font-size: 13px;
}
.drp.open { display: flex; flex-direction: column; }
.drp-main { display: flex; }
.drp-presets {
    display: flex; flex-direction: column; gap: 1px;
    border-right: 1px solid var(--gray-2); padding: 10px 8px; min-width: 110px;
}
.drp-presets .pt { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--gray-5); padding: 2px 10px 6px; }
.drp .drp-presets button {
    text-align: left; font-size: 13px; color: var(--gray-9); background: none; border: 0;
    border-radius: 5px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.drp .drp-presets button:hover { background: var(--gray-1); color: var(--gray-9); }
.drp .drp-presets button.on { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.drp-cals { display: flex; gap: 18px; padding: 12px 14px 8px; }
.drp-cal-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 26px; margin-bottom: 4px; font-weight: 600;
}
.drp .drp-nav {
    position: absolute; top: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px;
    background: none; color: var(--gray-5); font-size: 12px; cursor: pointer;
}
.drp .drp-nav:hover { background: var(--gray-1); color: var(--gray-9); border-color: transparent; }
.drp .drp-nav.prev { left: 0; }
.drp .drp-nav.next { right: 0; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 32px); justify-content: center; }
.drp-grid .dow { text-align: center; font-size: 11px; color: var(--gray-5); padding: 2px 0 4px; }
.drp-grid .dow.sun { color: var(--danger); }
.drp-grid .dow.sat { color: var(--accent); }
.drp .day {
    position: relative; height: 30px; padding: 0; border: 0; background: none;
    font-size: 12.5px; color: var(--gray-9); cursor: pointer; font-variant-numeric: tabular-nums;
}
.drp .day span {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin: 2px auto; border-radius: 50%;
}
.drp .day:hover { background: none; }
.drp .day:hover span { background: var(--gray-1); }
.drp .day.out { color: var(--gray-3); }
.drp .day.today span { box-shadow: inset 0 0 0 1px var(--gray-3); }
/* 범위 띠: 셀 전폭으로 이어지는 배경, 양끝은 원형 강조 */
.drp .day.in::before, .drp .day.edge.has-range::before {
    content: ""; position: absolute; z-index: 1; top: 2px; bottom: 2px; left: 0; right: 0;
    background: var(--accent-subtle);
}
.drp .day.edge.start.has-range::before { left: 50%; }
.drp .day.edge.end.has-range::before { right: 50%; }
.drp .day.edge.start.end::before { display: none; }
.drp .day.edge span, .drp .day.edge:hover span { background: var(--accent); color: #fff; font-weight: 600; }
.drp-foot {
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid var(--gray-2); padding: 9px 14px;
}
.drp-foot .drp-sum { margin-right: auto; color: var(--gray-5); }
.drp-foot .drp-sum b { color: var(--accent); }
.drp .drp-foot .btn { padding: 5px 14px; font-size: 13px; background: #fff; color: var(--gray-9); border: 1px solid var(--gray-2); }
.drp .drp-foot .btn:hover { background: var(--gray-1); }
.drp .drp-foot .btn.primary, .drp .drp-foot .btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.drp .drp-foot .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
    .drp { min-width: min(340px, 94vw); }
    .drp-main { flex-direction: column; }
    .drp-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--gray-2); }
    .drp-presets .pt { width: 100%; }
    .drp-cals { flex-direction: column; align-items: center; }
}

/* 2행 필터 폼 — 1행 날짜+액션(조회·초기화·조건저장) / 2행 조건. 행 폭 균형. */
.filter-form.rows { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.filter-form.rows .frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-form.rows .frow .spacer { flex: 1; }   /* 액션을 행 오른쪽으로 밀어냄 */

/* 표 내 찾기(하이라이트) — 필터 아님, 잔액 유지하며 매칭 행만 강조 */
.find-bar { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
tr.find-hit > td { background: var(--warn-subtle); }
/* Enter로 짚은 '지금 이 매칭' = 연청(--accent-subtle) — hover·복귀(row-active)와 같은
   "지금 이 행" 의미라 같은 색을 쓴다(07-31 수석). 노란 매칭들 사이에서 색으로 구분.
   hover(연청)보다 우선해야 하므로 규칙 순서상 뒤에 두고 !important 없이 특이도로 이긴다. */
tbody tr.find-cur > td, tbody tr.find-cur:hover > td { background: var(--accent-subtle); }

/* 저장된 조회조건(즐겨찾기) */
.saved-filters { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sf-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px;
    border: 1px solid var(--gray-2); border-radius: 999px; background: var(--gray-0); font-size: 12px;
}
.sf-chip .sf-go { cursor: pointer; color: var(--gray-8); text-decoration: none; }
.sf-chip .sf-go:hover { color: var(--accent); }
.sf-chip .sf-del { cursor: pointer; color: var(--gray-5); text-decoration: none; padding: 0 4px; }
.sf-chip .sf-del:hover { color: var(--danger); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.toolbar h1 { white-space: nowrap; margin: 0; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.badge.draft { background: var(--warn-subtle); color: var(--warn); }
.badge.confirmed { background: var(--ok-subtle); color: var(--ok); }
.badge.opening { background: var(--accent-subtle); color: var(--accent); }
.badge.normal { background: var(--gray-1); color: var(--gray-6); }
.badge.deleted { background: var(--danger-subtle); color: var(--danger); }

.form-grid { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; max-width: 520px; margin-bottom: 18px; }
.form-grid label { align-self: center; color: var(--muted); }
input, select {
    padding: 6px 8px; border: 1px solid var(--gray-2); border-radius: 5px;
    font-size: 14px; font-family: inherit;
}
table input, table select { font-size: 13px; }
input:focus-visible, select:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 일계표 상세 펼침 — 계정 행 클릭 시 전표 라인(전표번호·적요·금액)이 아래로 열린다 */
tr.expandable { cursor: pointer; }
.caret { display: inline-block; width: 13px; color: var(--muted); font-size: 11px; }
.caret::before { content: "▸"; }
tr.expandable.open .caret::before { content: "▾"; }
/* 원장 멀티계정 접힘/펼침(재설계 E): 계정 제목 클릭 = 그 원장 토글 */
/* ── 손익분기 도표(CVP, 07-31) — 서버가 좌표를 계산한 인라인 SVG ──
   색: 매출액=accent(파랑) / 총원가=warn(앰버) — 색맹 대비 ΔE 28.6(dataviz 검증기 통과),
   색만으로 구분하지 않도록 범례 + 선 끝 직접 라벨을 함께 단다. 고정비는 회색 점선(참조선). */
figure.cvp { margin: 0 0 16px; max-width: 860px; }
figure.cvp svg { width: 100%; height: auto; }
figure.cvp figcaption {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    font-size: 12px; color: var(--gray-6); margin-bottom: 6px;
}
figure.cvp .lg { display: inline-flex; align-items: center; gap: 5px; }
figure.cvp .lg::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
figure.cvp .lg-sales { color: var(--accent); }
figure.cvp .lg-cost { color: var(--warn); }
figure.cvp .lg-fixed { color: var(--gray-5); }
figure.cvp .lg-fixed::before { height: 0; border-top: 2px dashed currentColor; }

.cvp-grid { stroke: var(--gray-2); stroke-width: 1; }
.cvp-axis { stroke: var(--gray-5); stroke-width: 1; }
.cvp-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.cvp-sales { stroke: var(--accent); }
.cvp-cost { stroke: var(--warn); }
.cvp-fixed { stroke: var(--gray-5); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cvp-bepline { stroke: var(--gray-3); stroke-width: 1; stroke-dasharray: 3 3; }
.cvp-bep { fill: var(--gray-9); stroke: #fff; stroke-width: 2; }   /* 겹친 선 위 2px 흰 링 */
/* 선 위에 겹쳐도 읽히도록 흰 헤일로(겹친 마크에 2px 흰 링을 두는 규칙과 같은 취지) */
.cvp-beplabel {
    fill: var(--gray-9); font-size: 12px; font-weight: 600; text-anchor: middle;
    paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.cvp-tick { fill: var(--gray-6); font-size: 11px; }
.cvp-tick.r { text-anchor: end; }
.cvp-tick.c { text-anchor: middle; }
.cvp-endlabel { font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.cvp-endlabel.s { fill: var(--accent); }
.cvp-endlabel.c { fill: var(--warn); }
.cvp-endlabel.f { fill: var(--gray-6); font-weight: 400; }

/* 한 화면 안의 절 제목(손익분기분석의 실적표·분석표·예상 손익) — 표 사이 구분 */
h2.sec-title { border-bottom: 1px solid var(--gray-2); padding-bottom: 4px; }
h2.sec-title small { font-weight: 400; font-size: 12px; margin-left: 6px; }

h2.ledger-fold { cursor: pointer; user-select: none; }
h2.ledger-fold:hover { color: var(--accent); }
h2.ledger-fold .caret::before { content: "▾"; }
h2.ledger-fold.closed .caret::before { content: "▸"; }
h2.ledger-fold small { font-weight: 400; font-size: 13px; color: var(--gray-5); }
tr.detail-row > td {
    font-size: 12px; color: var(--gray-6); background: var(--bg-soft);
    padding-top: 3px; padding-bottom: 3px;
}
tr.detail-row .detail-label { text-align: left; padding-left: 20px; white-space: nowrap; }
tr.detail-row .detail-label::before { content: "\2022  "; color: var(--gray-3); }
tr.detail-row .detail-label.muted::before { content: ""; }  /* "외 N건" 안내 행은 제외 */

/* 은행내역 분개됨 탭 — 행 hover 시 전표 내용 툴팁(차/대·계정·금액 열 정렬).
   position:fixed + top은 템플릿 스크립트가 행 좌표(getBoundingClientRect)로 지정 —
   표 안쪽 스크롤(.tbl-wrap)과 무관하게 hover한 행 바로 아래에 뜬다 */
.entry-tip {
    display: none; position: fixed; right: 16px; z-index: 40;
    background: #fff; border: 1px solid var(--gray-2); border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 4px 6px;
}
tr:hover > td > .entry-tip { display: block; }
.entry-tip table { border-collapse: collapse; }
.entry-tip td { padding: 2px 8px; font-size: 12px; border: 0; white-space: nowrap; }
.entry-tip td + td { border-left: 1px solid var(--gray-1); }
.entry-tip .num { text-align: right; }

/* 날짜 약식 입력(date.js) — 정규화 실패 시 적색, 정규화 후 요일 병기 */
input.date-smart { width: 110px; }
input.date-smart:invalid { border-color: var(--danger); background: var(--danger-subtle); }
.date-wd { margin-left: 4px; color: var(--muted); }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: 4px 0; }
.nonfield { background: var(--danger-subtle); color: var(--danger); padding: 9px 12px; border-radius: 6px; margin-bottom: 12px; }

/* ── 로그인(전용 페이지 — 셸 없음, admin/login.html) ── */
body.login-page { background: var(--gray-0); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 340px; background: #fff; border: 1px solid var(--gray-2);
    border-top: 4px solid var(--navy); border-radius: 10px; padding: 26px 28px 24px;
}
.login-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.login-brand .mark { width: 13px; height: 13px; border-radius: 3px; background: var(--navy); flex: 0 0 auto; }
.login-cap { margin: 3px 0 20px; font-size: 12px; color: var(--gray-5); }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-6); margin: 12px 0 4px; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; }
.login-btn { width: 100%; margin-top: 20px; padding: 9px; font-size: 14px; }

.lines td, .lines th { padding: 5px 6px; }
/* 분개장: 전표 그룹을 실선 대신 배경 교대(zebra)로 구분 — 가로선 없음, 줄 높이 유지.
   짝수 전표만 옅은 회색, 홀수는 흰색. hover(entry-hover)·선택(row-active)이 특이도상 우선. */
/* row-alt: 단일 행 표(매출입·은행)의 짝수 행 교대 — 같은 문법·같은 색 */
tr.egrp-alt > td, tr.row-alt > td { background: var(--gray-0); }
/* 상태 배경(제외 제안 앰버)이 교대색보다 우선 — 정의 순서상 뒤에 온 row-alt에 안 덮이게 */
tr.row-alt.row-flag > td { background: var(--warn-subtle); }
.lines input[type=number] { width: 110px; text-align: right; }
.lines select { max-width: 170px; }
.totals { font-weight: 700; }
.totals.balanced { color: var(--ok); }
.totals.unbalanced { color: var(--danger); }
.muted { color: var(--muted); }

/* 은행내역 이미지 붙여넣기(OCR) 미리보기 모달 (bank_paste.js) */
.ocr-modal { position: fixed; inset: 0; z-index: 100; background: rgba(31,35,40,.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
/* hidden 속성이 display:flex를 이기도록(특이도 상향) — 없으면 모달이 항상 보임 */
.ocr-modal[hidden] { display: none; }
.ocr-dialog { background: #fff; border: 1px solid var(--gray-2); border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 14px 16px; width: min(920px, 96vw); }
/* 패널 1: 제목 바(제목 크게 + 우측 상단 버튼) */
.ocr-titlebar { display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--gray-2); padding-bottom: 10px; margin-bottom: 12px; }
.ocr-titlebar h2 { margin: 0; font-size: 20px; }   /* [은행내역 가져오기] h1과 동일 */
.ocr-titlebar .spacer { flex: 1; }                 /* 버튼을 우측 최상단으로 밀어냄 */
/* 패널 2·3: 카드형 구획 */
.ocr-panel { border: 1px solid var(--gray-2); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.ocr-panel:last-child { margin-bottom: 0; }
#ocr-status { margin: 0; }   /* 상태문 아래 빈 여백 제거 */
/* 패널 3 표: 헤더 고정 + 5행 높이 세로 스크롤 */
.ocr-tbl-scroll { max-height: 224px; overflow: auto; border: 1px solid var(--gray-1); border-radius: 6px; }
.ocr-tbl-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--gray-0);
    box-shadow: inset 0 -2px 0 var(--rule); }
#ocr-paste-zone { border: 2px dashed var(--gray-3); border-radius: 8px; background: var(--gray-0);
    padding: 22px; text-align: center; cursor: text; outline: none; }
#ocr-paste-zone:focus { border-color: var(--accent); background: var(--accent-subtle); }
/* 붙여넣기 처리 단계 표시(인식→파싱→처리결과→잔액대조) — 공용 .chip 사용 */
.ocr-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0; }
.ocr-steps[hidden] { display: none; }   /* hidden 속성이 display:flex를 이기도록 */
.ocr-steps .chip { font-size: 13px; padding: 3px 10px; }   /* 단계 칩 조금 크게 */
.ocr-steps .sep { color: var(--gray-4); }
/* 배지 바: 배지(좌) + 계좌 지정 dropdown(우, 같은 줄), 아래 표와 구분선 */
.ocr-badgebar { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
    border-bottom: 1px solid var(--gray-2); padding-bottom: 10px; margin-bottom: 10px; }
#ocr-account-row { margin-left: auto; flex: 0 0 auto; }   /* 배지 우측·같은 줄 */
#ocr-account-row[hidden] { display: none; }
/* 계좌 배지(붙여넣기 즉시 누적, 클릭=그 계좌 재편집) — 일반 chip보다 크게 */
.ocr-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1 1 auto; min-width: 0; }
.ocr-badges .chip { cursor: pointer; font-size: 14px; padding: 5px 14px; border-radius: 14px; }
.ocr-badges .chip.in { box-shadow: inset 0 0 0 1.5px currentColor; }   /* 활성 계좌 강조 */
.ocr-badges .chip .bx { margin-left: 8px; cursor: pointer; opacity: .55; font-weight: 700; }
.ocr-badges .chip .bx:hover { opacity: 1; color: var(--danger); }
tr.ocr-warn > td { background: var(--danger-subtle); }
#ocr-rows input { width: 100%; box-sizing: border-box; }
#ocr-rows input.w-date { min-width: 92px; }
#ocr-rows input.w-time { min-width: 70px; }
#ocr-rows input.num { text-align: right; }
#ocr-rows input[readonly] { background: var(--gray-0); color: var(--gray-6); cursor: default; }   /* 날짜·시간·잔액=수정 금지 */

/* print-only elements (see print.css) are hidden on screen */
.print-only { display: none; }

/* dates, entry numbers: never wrap mid-value */
td.nowrap, th.nowrap, span.nowrap { white-space: nowrap; }

/* 계정 자동완성 콤보(account_combo.js) — 원본 select는 숨기고 검색 입력으로 대체 */
select.acombo-src { display: none; }
.acombo { position: relative; display: inline-block; }
.acombo input { width: 240px; }              /* 일반 폼(매출입·자금·원장) */
.lines .acombo input { width: 170px; }       /* 그리드 행(은행 라인) */
.journal-lines .acombo input { width: 240px; }  /* 전표 라인: 계정과목 5글자(≈70px) 확대 */
.acombo-list {
    position: absolute; z-index: 30; left: 0; top: 100%; margin: 2px 0 0; padding: 0;
    list-style: none; background: #fff; border: 1px solid var(--gray-2); border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12); max-height: 260px; overflow-y: auto;
    min-width: 220px; white-space: nowrap;
}
/* 제안 행 문법은 헤더 검색 팝오버(.hpop .hsug)와 공유 — 어디서든 같은 폰트·hover·커서 */
.acombo-list li, .hpop .hsug li { padding: 5px 10px; cursor: pointer; font-size: 13px; }
.acombo-list li:hover, .hpop .hsug li:hover { background: var(--accent-subtle); }
/* 키보드 커서 위치는 반전(진한 배경+흰 글자)으로 뚜렷하게 */
.acombo-list li.active, .hpop .hsug li.active { background: var(--accent); color: #fff; }

/* 급여대장 입력 그리드 — 숫자칸 우측 정렬, 자동 계산칸은 옅은 배경으로 구분 */
.payroll-grid input.pay-num { width: 78px; text-align: right; }
.payroll-grid input.pay-day { width: 40px; text-align: right; }
.payroll-grid td.calc { background: var(--gray-0); }
/* NO·직책·성명 3열은 가로 스크롤에 왼쪽 고정 — 스크롤 중에도 누구 행인지 유지.
   left 오프셋(--fz2/--fz3)은 payroll_form.js가 실제 렌더 폭으로 계산.
   collapse 보더는 sticky를 따라오지 않으므로 고정 경계선은 inset shadow(머리행 관행). */
.payroll-grid thead tr:first-child th:nth-child(-n+3),
.payroll-grid tbody td:nth-child(-n+3),
.payroll-grid tfoot td:first-child { position: sticky; }
.payroll-grid thead tr:first-child th:nth-child(-n+3) { z-index: 3; }
.payroll-grid tbody td:nth-child(-n+3) { z-index: 1; background: #fff; white-space: nowrap; }
.payroll-grid tbody tr:hover > td:nth-child(-n+3) { background: var(--gray-0); }
.payroll-grid tfoot td:first-child { z-index: 1; }
.payroll-grid thead tr:first-child th:nth-child(1),
.payroll-grid tbody td:nth-child(1),
.payroll-grid tfoot td:first-child { left: 0; }
.payroll-grid thead tr:first-child th:nth-child(2),
.payroll-grid tbody td:nth-child(2) { left: var(--fz2, 40px); }
.payroll-grid thead tr:first-child th:nth-child(3),
.payroll-grid tbody td:nth-child(3) { left: var(--fz3, 100px); }
.payroll-note { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.payroll-note textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--gray-2); border-radius: 4px; }
/* 급여대장과 그 아래(정산·미리보기)를 가르는 쌍선(=) — 급여대장 아님을 명시 */
.payroll-sep {
    border-top: 3px double var(--gray-5); margin: 20px 0 12px; text-align: center;
}
.payroll-sep span {
    display: inline-block; transform: translateY(-50%); padding: 0 12px;
    background: #fff; font-size: 12px; font-weight: 600; color: var(--gray-5);
}
/* 정산표·미리보기 타이틀은 급여대장 제목(h1)과 같은 크기 */
.payroll-insurance .ci-head, .payroll-preview .ci-head { font-size: 20px; font-weight: 700; color: var(--gray-9); margin: 0 0 8px; }
.payroll-insurance .ci-head small, .payroll-preview .ci-head small { font-size: 12px; font-weight: 400; }
.payroll-insurance .ins-table, .payroll-preview .preview-table { width: auto; font-size: 13px; }
.payroll-preview .preview-table { min-width: 620px; }
.payroll-insurance .ins-table th, .payroll-insurance .ins-table td,
.payroll-preview .preview-table th, .payroll-preview .preview-table td { border: 1px solid var(--gray-2); padding: 5px 10px; }
.payroll-insurance .ins-table th, .payroll-insurance .ins-table td { text-align: right; }
.payroll-insurance .ins-table thead th, .payroll-insurance .ins-table tbody th { text-align: center; background: var(--gray-0); font-weight: 600; }
.payroll-insurance input.ci-num { width: 96px; text-align: right; font-size: 13px; }
.payroll-insurance .ins-sum td, .payroll-insurance .ins-sum th { background: var(--gray-0); font-weight: 700; }
.payroll-insurance [data-emp-total], .payroll-insurance [data-comp-total], .payroll-insurance [data-grand-total] { background: var(--gray-0); font-weight: 700; }
/* 건강·요양은 통합건강 내역(참고) — 연하게 */
.payroll-insurance .ins-table .sub { color: var(--gray-5); background: var(--gray-0); }
.payroll-preview { margin-top: 4px; }
.payroll-preview .preview-table tfoot .ins-sum td { background: var(--gray-0); font-weight: 700; }
.login-version { margin: 14px 0 0; text-align: center; font-size: 11px; color: var(--gray-5); }
/* 전표 엑셀 붙여넣기: 계정 미확인 칸 표시(journal_form.js) — 선택하면 해제 */
.paste-miss .acombo input { border-color: var(--danger); background: var(--danger-subtle); }
.payroll-body { border: 0; margin: 0; padding: 0; min-width: 0; }

/* 페이지 로딩 표시(loading.js) — 상단 중앙 토스트 */
.load-indicator {
    position: fixed; top: 14px; left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 9999; display: none; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: var(--navy, #1f2d4d); color: #fff;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
.load-indicator.on { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.load-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
    animation: load-spin .7s linear infinite;
}
@keyframes load-spin { to { transform: rotate(360deg); } }
@media print { .load-indicator { display: none !important; } }

/* ── 은행내역 3단 화면(처리 대기 / 처리 제외 / 처리 완료) ── */
.bank-scope { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--gray-0); }
/* 한 줄 안: 왼쪽 탭 + 오른쪽 계좌 스코프(적재범위는 오른끝) */
.bank-scope-form { display: flex; align-items: center; gap: 8px 14px; flex: 1;
    min-width: 0; flex-wrap: wrap; }
.bank-scope .bank-tabs { margin: 0; }
.bank-scope .lbl { font-size: 12px; font-weight: 700; color: var(--gray-6); }
select.bank-acct { height: 32px; min-width: 250px; padding: 0 10px;
    border: 1px solid var(--gray-2); border-radius: 6px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--gray-9); }
.bank-sum { font-size: 12.5px; color: var(--gray-6); }
.bank-sum b { color: var(--gray-9); }
.bank-panel { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.bank-panel > .bank-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    border-bottom: 1px solid var(--line); background: var(--gray-0); }
.bank-head h2 { font-size: 15px; margin: 0; }
.bank-head .hint { font-size: 12px; color: var(--gray-6); font-weight: 400; }
/* 탭으로 한 표만 보이므로 화면 높이에 맞춰 크게(액션바는 아래 유지) */
/* 표 높이: 상단(제목·안내·탭·계좌줄)+하단(페이지줄) 크롬을 빼고 계산 —
   창 스크롤과 표 스크롤이 동시에 생기지 않게(수석 지적 07-27) */
.bank-scroll { max-height: calc(100vh - 375px); min-height: 260px; overflow: auto; }
/* 행 숨통: 은행 표는 입력 콤보·칩이 빽빽해 어지럽다는 피드백 — 상하 여백 확대 */
.bank-panel .lines td { padding-top: 8px; padding-bottom: 8px; }
/* 패널 안 액션바는 표 아래 흐름 배치(상단 sticky 해제) */
.sel-bar.flow { position: static; top: auto; z-index: auto; border-top: 1px solid var(--line);
    border-bottom: 0; background: var(--gray-0); }
.bank-panel .empty-row { padding: 16px 14px; color: var(--gray-5); }
.bank-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--gray-0); }
.bank-search { height: 30px; border: 1px solid var(--gray-2); border-radius: 6px;
    padding: 0 10px; font: inherit; font-size: 13px; min-width: 160px; }
.bank-pager { display: flex; align-items: center; gap: 6px; padding: 8px 14px; flex-wrap: wrap; }
/* 알약형 페이지네이션(은행 처리대기·완료) */
.pagination { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pagination .pg { display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid var(--gray-2);
    border-radius: 6px; background: #fff; color: var(--gray-9); font-size: 12.5px;
    font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.pagination a.pg:hover { background: var(--gray-0); border-color: var(--gray-3); }
.pagination .pg.on { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.pagination .pg.arrow { color: var(--gray-6); font-size: 15px; line-height: 1; }
.pagination .pg.disabled { opacity: .35; pointer-events: none; }
.pagination .pg-gap { min-width: 16px; text-align: center; color: var(--gray-5); }
.pagination .pg-count { margin-left: 6px; font-size: 12px; color: var(--gray-6); white-space: nowrap; }

/* ── 은행 대체 묶음 표시 — 확신(실선 인디고)·의심(점선 인디고)·한쪽만(앰버) ── */
.bank-panel .lines td:first-child,
.bank-panel .lines th:first-child { border-left: 4px solid transparent; }  /* 정렬 예약 */
/* 배경 틴트는 제외(지저분) — 왼쪽 세로 바만 얇게 남긴다 */
.bank-panel tr.bundle > td:first-child { border-left-color: var(--b-bar); }
.bank-panel tr.b1 { --b-bar: #8250df; }  /* 묶음A(인디고) */
.bank-panel tr.b2 { --b-bar: #bf3989; }  /* 묶음B(분홍, 인접 구분) */
.bank-panel tr.bw { --b-bar: #bf8700; }  /* 한쪽만 처리됨(앰버) */
/* 대체 묶음 안내(제목 밑 접이식) + 색상 견본 */
.bank-help { margin: -2px 0 14px; font-size: 12.5px; color: var(--gray-6); }
.bank-help > summary { cursor: pointer; font-weight: 600; color: var(--accent); width: fit-content; }
.bank-help .help-body { padding: 8px 2px 0; }
.bank-help .help-body p { margin: 5px 0; line-height: 1.6; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 1px; }
.sw-b1 { background: #8250df; } .sw-b2 { background: #bf3989; } .sw-bw { background: #bf8700; }
/* [짝] 칩(클립) — 상대 계좌 + 상태를 알약으로 감쌈. 색은 묶음 색을 따름 */
.pairchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px;
    border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--pc); color: var(--pc); background: var(--pcs); }
.b1 .pairchip { --pc: #8250df; --pcs: #f2ebfd; }
.b2 .pairchip { --pc: #bf3989; --pcs: #ffeff7; }
.bw .pairchip { --pc: #9a6700; --pcs: #fdf3d0; }