/* static/css/finance.css — 재무 뷰(손익계산서 · 계정별 원장) (#72)
 *
 * ⛔ 기밀: 이 파일에도, 마크업에도 데이터는 없다. 값은 /api/finance/*(화이트리스트) 뒤에만 있다.
 *
 * 이식: finance_report/{income_statement,ledger_v2}.html 의 <style>을 그대로 옮겼다(디자인 변경 없음).
 *   · 두 리포트는 .kpis/.card/.tablewrap 등 46개 클래스명이 겹친다 → 한 스코프에 넣으면 서로 덮어쓴다.
 *     그래서 손익은 #isPanel, 원장은 #lgPanel 로 **패널마다 따로** 스코프했다.
 *   · 원본의 전역 리셋(html/body margin·height)은 버렸다 — 대시보드가 이미 처리한다.
 *   · :root 변수는 각 패널로 내렸다(전역에 흘리지 않는다).
 *   · 원본의 자체 헤더(.topbar-head/.brand)는 마크업에서 뺐다(대시보드 헤더 사용). 규칙은 남아도 무해.
 */

/* ⛔ 뷰 전환 — 빠뜨리면 "재무 표 밑에 퍼포먼스 대시보드가 같이 나온다"(#69에서 겪은 함정).
   system-channel.css / stock.css 의 view-* 패턴과 동일. */
.container.view-finance > .section:not(#financeView),
.container.view-finance > #bannerSlot,
.container.view-finance > #emptySlot { display: none; }

#financeView[hidden] { display: none; }

/* 권한 없음·오류 안내 */
#financeView .fin-msg {
  margin: 10px 0 0; padding: 12px 14px;
  background: #FCEDED; border: 1px solid #F3D2D2; border-radius: 10px;
  color: #B82828; font-size: 13px; font-weight: 600;
}
#financeView .fin-msg[hidden] { display: none; }

/* ⚠ 패널은 display:flex 라 [hidden] 속성만으론 안 숨는다(flex가 이긴다).
   권한 확인 전/비활성 탭은 반드시 감춰야 하므로 명시적으로 눌러준다. */
#financeView .content[hidden],
#financeView #isPanel[hidden],
#financeView #lgPanel[hidden] { display: none !important; }

/* '기밀 · 사내 전용' 배지 — 원본 .head-note 를 대시보드 section-title-actions 자리로 옮긴 것.
   SVG에 크기를 안 주면 기본값(300px)으로 퍼진다. */
#financeView .fin-lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
#financeView .fin-lock svg { width: 13px; height: 13px; flex: 0 0 auto; color: #3E4D41; }

/* 원장 검색창 — 원본은 자체 헤더(.topbar-head)에 있었고 지금은 필터 밴드(.field) 안으로 옮겼다.
   그 바람에 `#lgPanel .field input`(padding:8px 11px)이 `#lgPanel .search input`(padding-left:36px)를
   같은 특이도로 덮어써 돋보기 아이콘이 글자와 겹쳤다. 여기서 되돌린다. */
/* 세로 패딩은 다른 필드(8px)와 같게 — 9px 이면 검색창만 2px 높아 줄이 안 맞는다. */
#financeView #lgPanel .field .search input { padding: 8px 14px 8px 36px; }

/* 필터 밴드 sticky 해제 — 원본은 자체 헤더(70px) 바로 아래 달라붙게 `top:var(--head-h)` 였다.
   그 헤더를 없앤 지금은 스크롤 시 화면 한복판에 떠서 KPI 카드를 덮는다. 일반 흐름으로 되돌리고
   카드 톤(둥근 모서리·여백)을 준다. */
#financeView #lgPanel .topbar-tools {
  position: static;
  padding: 18px 20px;
  background: #fff;
  border: none;
  border-radius: var(--r, 18px);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

/* 탭 — 손익계산서 / 계정별 원장 */
#financeView .fin-tabs {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--surface-2, #F4F5F7); border: 1px solid var(--line, #ECEEF1);
  border-radius: 999px; margin: 0 0 14px;
}
#financeView .fin-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--muted, #79818B);
  transition: background .12s ease, color .12s ease;
}
#financeView .fin-tab:hover { color: var(--text-2, #4A5159); }
#financeView .fin-tab.is-active { background: #FFFFFF; color: #3E4D41; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
#financeView .fin-tab:focus-visible { outline: 2px solid #3E4D41; outline-offset: 2px; }

/* 연도 선택(2023~) — 손익/원장 탭(.fin-tabs)과 같은 pill 세그먼트 컨벤션을 따르되
   보조 선택이라 한 단계 작게. 연도가 하나뿐이면 JS가 [hidden] 으로 숨긴다. */
#financeView .fin-years {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-2, #F4F5F7); border: 1px solid var(--line, #ECEEF1);
  border-radius: 999px; margin: 0 0 12px;
}
#financeView .fin-years[hidden] { display: none; }
#financeView .fin-year {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--muted, #79818B);
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease;
}
#financeView .fin-year:hover { color: var(--text-2, #4A5159); }
#financeView .fin-year.is-active { background: #FFFFFF; color: #3E4D41; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
#financeView .fin-year:focus-visible { outline: 2px solid #3E4D41; outline-offset: 2px; }

/* ══════════════ 손익계산서 패널 (#isPanel) ══════════════ */

#isPanel{
  /* ── 대시보드(db.barybody.com) common.css 토큰 그대로 — Wealthio풍 세이지 액센트 ── */
  --bg:#F4F5F7; --panel:#FFFFFF; --ink:#1A1D21; --ink2:#4A5159; --muted:#79818B;
  --charcoal:#3A4047;
  --line:#ECEEF1; --line2:#F4F5F7; --line-strong:#D6DAE0;
  --accent:#3E4D41; --accent-deep:#2E3A30; --accent-2:#4A5A4D;
  --accent-soft:#EAEFEB; --accent-soft2:#EEF2EF; --accent-soft3:#DFE7E1;
  --sage:#9BAA9E;
  --pos:#1F8A4C; --pos-bg:#E7F4EC;
  --neg:#D23B3B; --neg-strong:#B82828; --neg-bg:#FCEDED; --zero:#C5C9D2;
  --surface-2:#F4F5F7; --surface-3:#FAFBFC;
  --thead-bg:#EEF0F3;
  --zebra:#FAFBFC; --hover:#F4F5F7; --chip:#F4F5F7;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-pop:0 4px 8px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.12);
  --r:18px; --r-md:12px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
  --head-h:70px;
}
#isPanel *, #isPanel *::before, #isPanel *::after{box-sizing:border-box}
#isPanel{-webkit-text-size-adjust:100%}
#isPanel{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
#isPanel .mono{font-variant-numeric:tabular-nums}
#isPanel .num{font-variant-numeric:tabular-nums;letter-spacing:0}
#isPanel button{font-family:inherit;cursor:pointer}
#isPanel :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* ===== layout — 사이드바 없는 단일 컬럼 풀폭(위→아래 흐름) ===== */
#isPanel .page{min-height:100vh;background:var(--bg)}
#isPanel .main{min-width:0;display:flex;flex-direction:column;width:100%}
/* ===== brand 헤더 — 페이지 상단. 대시보드 .sb-brand 결 ===== */
#isPanel .topbar-head{background:#fff;height:var(--head-h);padding:0 22px;
  position:sticky;top:0;z-index:21;display:flex;align-items:center;gap:18px}
#isPanel .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
#isPanel .brand-mark{width:34px;height:34px;border-radius:11px;flex:0 0 34px;
  background:linear-gradient(135deg,#7E9281 0%,#3E4D41 100%);box-shadow:0 4px 10px rgba(62,77,65,.28);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}
#isPanel .brand-txt{min-width:0}
#isPanel .brand h1{font-size:16px;margin:0;letter-spacing:-.01em;font-weight:700;color:var(--ink);white-space:nowrap}
#isPanel .brand .sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
#isPanel .head-note{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#isPanel .head-note .lock{width:13px;height:13px;display:inline-block;color:var(--accent)}
/* ===== content ===== */
#isPanel .content{padding:18px 22px 60px;display:flex;flex-direction:column;gap:16px}
/* KPI strip — 대시보드 .kpi-card 톤 */
#isPanel .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:stretch}
#isPanel .kpi{background:#fff;border:none;border-radius:var(--r-lg);padding:20px 22px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;min-width:0;transition:box-shadow .18s ease,transform .18s ease}
#isPanel .kpi:hover{box-shadow:var(--shadow-pop);transform:translateY(-2px)}
#isPanel .kpi .k{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:5px;min-height:17px}
#isPanel .kpi .v{font-size:clamp(18px,1.9vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink);
  display:flex;align-items:baseline;min-height:35px;min-width:0;overflow:hidden}
#isPanel .kpi .v.neg{color:var(--neg-strong)}
#isPanel .kpi .v.pos{color:var(--accent-deep)}
#isPanel .kpi .meta{font-size:11.5px;color:var(--muted);min-height:16px}
#isPanel .kpi .meta .tag{font-weight:700}
#isPanel .kpi .meta .tag.loss{color:var(--neg)}
#isPanel .kpi .meta .tag.profit{color:var(--pos)}
/* ===== card ===== */
#isPanel .card{background:#fff;border:none;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#isPanel .card .hd{padding:14px 18px 12px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:10px}
#isPanel .card .hd .hint{font-size:11px;color:var(--muted);font-weight:500}
#isPanel .card .bd{padding:14px 18px}
/* 차트 — 컨테이너 고정 높이(px) + 폭 100%. height:auto 금지 */
#isPanel #isTrend{position:relative;height:300px}
#isPanel #isTrendNi{position:relative;height:180px}
@media(max-width:1023px){#isPanel #isTrendNi{height:170px}}
@media(max-width:639px){#isPanel #isTrendNi{height:160px}}
#isPanel .chart{display:block;width:100%;height:100%}
@media(max-width:1023px){#isPanel #isTrend{height:280px}}
@media(max-width:639px){#isPanel #isTrend{height:260px}}
#isPanel .legend{display:inline-flex;gap:12px;align-items:center}
#isPanel .legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600}
#isPanel .legend .sw{width:9px;height:9px;border-radius:2px;display:inline-block}
#isPanel .legend .sw.rev{background:#9BAA9E}
#isPanel .legend .sw.op{background:#3E4D41}
#isPanel .legend .sw.ni{background:#C2683D}
/* ===== table — 손익 표 ===== */
#isPanel .tablewrap{background:#fff;border:none;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#isPanel .tbar{padding:14px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#isPanel .tbar .cnt{font-size:14px;font-weight:700;color:var(--ink)}
#isPanel .tbar .cnt span{color:var(--ink)}
#isPanel .tbar .rgt{display:flex;gap:8px;align-items:center}
#isPanel .btn-x{border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-pill);padding:7px 13px;font-size:12px;font-weight:600;color:var(--charcoal);transition:.15s}
#isPanel .btn-x:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
#isPanel .tscroll{overflow:auto}
#isPanel table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
#isPanel thead th{position:sticky;top:0;z-index:5;background:var(--thead-bg);border-bottom:1px solid var(--line);
  padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--charcoal);white-space:nowrap}
#isPanel thead th.r{text-align:right}
#isPanel thead th.tot{color:var(--charcoal)}
#isPanel tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
#isPanel td.r{text-align:right}
#isPanel td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
#isPanel td.tot{font-weight:700}
#isPanel .neg{color:var(--neg)}
#isPanel .zero{color:var(--zero)}
/* 대분류 행 — 클릭 접기/펼치기. 뉴트럴 그룹 행 톤(굵게·연회색 배경, grid-daily 계열과 통일).
   예전 세이지 tint 배경/딥세이지 텍스트가 "너무 초록초록"해서 중립 회색+진한 잉크 볼드로 낮춤. 강조는 굵기로. */
#isPanel tr.major{cursor:pointer}
#isPanel tr.major td{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-weight:700;color:var(--ink);font-size:12.5px;padding:9px 12px}
#isPanel tr.major:hover td{background:var(--line)}
#isPanel tr.major td.num{color:var(--ink)}
#isPanel tr.major td.num.neg{color:var(--neg-strong)}
#isPanel tr.major .romate{display:inline-flex;align-items:center;gap:7px}
#isPanel tr.major .vcnt{font-weight:600;color:var(--muted);font-size:10.5px;margin-left:6px}
/* 소계(세부 없는 대분류: 매출총이익·영업손익·법인세차감전·당기순) — 셰브론 자리 비움. thead 톤 뉴트럴로 한 단 강조 */
#isPanel tr.major.sub td{background:var(--thead-bg)}
#isPanel tr.major.sub:hover td{background:#E4E7EB}
/* 셰브론 SVG — 기본 오른쪽(▸), 펼침 시 rotate90(▾). 애니메이션 없이 즉시 */
#isPanel .exp{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
#isPanel .exp svg{width:13px;height:13px;display:block;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#isPanel tr.major.open .exp{transform:rotate(90deg)}
#isPanel .exp.ghost{visibility:hidden}
/* 세부 행 — 들여쓰기 */
#isPanel tr.detail td{background:#fff;color:var(--ink2);font-size:12px;padding:7px 12px}
/* 세부 행 좌여백은 드릴 가능 여부와 무관하게 24px로 통일한다.
   나머지 들여쓰기는 셰브론(.dexp, 없는 행은 .ghost로 자리만 차지)이 채운다 → 항목명 좌측이 한 줄로 맞는다.
   예전엔 여기 38px, drillable에만 24px이라 셰브론 유무에 따라 글자 시작점이 어긋났다. */
#isPanel tr.detail td:first-child{padding-left:24px}
#isPanel tr.detail td:first-child::before{content:"";position:absolute}
#isPanel tr.detail:hover td{background:var(--hover)}
#isPanel tr.detail td.num{color:var(--ink2)}
#isPanel tr.detail td.num.tot{color:var(--ink);font-weight:600}
#isPanel tr.detail td.num.neg{color:var(--neg)}
#isPanel td.itemcell{position:relative}
/* 열 최소 폭 — 12개월 연도(2023~2025)는 열이 13개(월 12 + 합계)라 table{width:100%} 만으로는
   항목명 열이 짜부라져 'Ⅰ. 매출액'이 한 글자씩 세로로 쪼개지고 합계 열도 잘렸다(사용자 지적).
   최소 폭을 주면 표가 필요한 만큼 넓어지고, 넘치는 만큼은 .tscroll 이 가로 스크롤한다. */
#isPanel thead th:first-child, #isPanel td.itemcell{min-width:200px;white-space:nowrap}
#isPanel thead th.r, #isPanel td.num{min-width:104px}
/* 항목 열 고정 — 12개월 연도는 가로 스크롤이 생기는데, 그대로면 오른쪽 월로 넘길수록
   어떤 계정의 숫자인지 알 수 없다. 배경은 각 행 규칙(tr.major td / tr.detail td …)이
   이미 셀에 칠하므로 스크롤되는 숫자가 비쳐 보이지 않는다.
   z-index: 헤더(5) > 항목열(4) 이라 세로 스크롤 시 헤더가 위에 남고,
   좌상단 교차 셀(6)이 둘 다 덮는다. position:relative 였던 자리를 sticky 로 바꾼다
   (::before 앵커 역할은 sticky 도 positioned 라 그대로 유지된다). */
#isPanel td.itemcell{position:sticky;left:0;z-index:4;border-right:1px solid var(--line)}
#isPanel thead th:first-child{left:0;z-index:6;border-right:1px solid var(--line)}
#isPanel tr.detail td.itemcell{border-left:2px solid var(--line)}
/* 세부 행 드릴다운(계정 직결) — 셰브론 + 클릭 시 원장 거래 인라인 펼침 */
#isPanel tr.detail.drillable{cursor:pointer}
/* (drillable 전용 padding-left 규칙 제거 — 위에서 24px로 통일했다) */
#isPanel tr.detail.drillable:hover td{background:var(--hover)}
#isPanel tr.detail .dexp{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;flex:0 0 12px;color:var(--muted);margin-right:6px;vertical-align:-1px}
#isPanel tr.detail .dexp svg{width:11px;height:11px;display:block;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#isPanel tr.detail.open .dexp{transform:rotate(90deg)}
/* 드릴다운이 없는 세부 행의 셰브론 자리 — 자리는 차지하되 보이지 않게(항목명 좌측 정렬 유지) */
#isPanel tr.detail .dexp.ghost{visibility:hidden}
#isPanel tr.detail .accode{display:inline-block;font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:5px;padding:1px 6px;margin-left:7px;font-variant-numeric:tabular-nums}
/* 거래처×월 매트릭스 행 — 메인 손익 표에 직접 삽입(같은 컬럼 폭 공유 → 월 열 픽셀 정렬).
   세부 행보다 한 단 더 들여쓰기로 위계. 금액은 cells()와 동일 td.num.r 사용. */
#isPanel tr.vrow{cursor:pointer}
#isPanel tr.vrow td{background:var(--surface-3);color:var(--ink2);font-size:11.5px;padding:6px 12px;border-bottom:1px solid var(--line2)}
#isPanel tr.vrow:hover td{background:var(--hover)}
#isPanel tr.vrow td.vname{padding-left:52px;border-left:2px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
#isPanel tr.vrow td.vamt{color:var(--ink2)}
#isPanel tr.vrow td.vamt.tot{color:var(--ink);font-weight:600}
#isPanel tr.vrow td.vamt.z{color:var(--zero)}
#isPanel tr.vrow td.vamt.neg{color:var(--neg)}
#isPanel tr.vrow .vchev{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;color:var(--muted);margin-right:6px;vertical-align:-1px}
#isPanel tr.vrow .vchev svg{width:10px;height:10px;display:block;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#isPanel tr.vrow.open .vchev{transform:rotate(90deg)}
#isPanel tr.vrow .vcode{color:var(--muted);font-size:10px;margin-left:5px;font-variant-numeric:tabular-nums}
/* 거래처 개별 거래 패널(colspan, 정렬 비대상) */
#isPanel tr.vdetail>td{padding:0;background:#fff;border-bottom:1px solid var(--line)}
#isPanel .vdwrap{padding:4px 12px 8px 64px}
#isPanel table.vdtbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
#isPanel table.vdtbl thead th{padding:5px 8px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line2);white-space:nowrap}
#isPanel table.vdtbl thead th.r{text-align:right}
#isPanel table.vdtbl tbody td{padding:4px 8px;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
#isPanel table.vdtbl tbody tr:last-child td{border-bottom:0}
#isPanel table.vdtbl td.dt{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#isPanel table.vdtbl td.ds{color:var(--ink2)}
#isPanel table.vdtbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#isPanel table.vdtbl td.amt{color:var(--ink);font-weight:600}
/* 원장 거래 패널 행 — 세부 행 아래 전 폭(colspan). ledger_v2 원장 톤 */
#isPanel tr.ledger>td{padding:0;background:var(--surface-3);border-bottom:1px solid var(--line)}
#isPanel .ledpanel{padding:10px 14px 12px 38px}
#isPanel .ledhd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
#isPanel .ledhd .lt{font-size:11.5px;font-weight:700;color:var(--ink)}
#isPanel .ledhd .lt .accode2{color:var(--muted);font-weight:600;margin-left:5px}
#isPanel .ledhd .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);padding:3px;gap:2px}
#isPanel .ledhd .seg button{border:0;background:transparent;padding:4px 11px;font-size:11px;font-weight:600;color:var(--ink2);border-radius:var(--r-pill);transition:.15s}
#isPanel .ledhd .seg button:hover:not(.on){color:var(--ink)}
#isPanel .ledhd .seg button.on{background:var(--ink);color:#fff}
/* 거래 스크롤 박스 — 거래 많은 계정(831 428건·404 395건) 대비 max-height */
#isPanel .ledscroll{max-height:340px;overflow:auto;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff}
#isPanel table.ledtbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px}
#isPanel table.ledtbl thead th{position:sticky;top:0;z-index:2;background:#F6F7F8;border-bottom:1px solid var(--line);
  padding:7px 10px;text-align:left;font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
#isPanel table.ledtbl thead th.r{text-align:right}
#isPanel table.ledtbl tbody td{padding:6px 10px;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--ink2)}
#isPanel table.ledtbl tbody tr:last-child td{border-bottom:0}
#isPanel table.ledtbl tbody tr:hover td{background:var(--hover)}
#isPanel table.ledtbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#isPanel table.ledtbl td.dt{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#isPanel table.ledtbl td.ds{color:var(--ink2);max-width:380px}
#isPanel table.ledtbl td.pn{color:var(--ink2);white-space:nowrap}
#isPanel table.ledtbl td.amt{color:var(--ink);font-weight:600}
#isPanel table.ledtbl .vcode{color:var(--muted);font-size:10px;margin-left:4px}
/* 거래처별 집계 행(rollup) */
#isPanel table.ledtbl tr.vgrp td{font-weight:600;color:var(--ink)}
#isPanel table.ledtbl tr.vgrp td.cntc{color:var(--muted);font-weight:600;font-size:10.5px}
/* 월 그룹 헤더(거래 목록 뷰) — 뉴트럴 회색 sticky 헤더 + 월계 우측정렬(화이트앤그레이) */
#isPanel table.ledtbl tr.mgrp td{position:sticky;top:27px;z-index:1;background:var(--surface-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 10px}
#isPanel table.ledtbl tr.mgrp td.ml{font-weight:700;color:var(--ink);font-size:11px;letter-spacing:-.2px}
#isPanel table.ledtbl tr.mgrp td.ml .sc{font-weight:600;color:var(--muted);font-size:10px;margin-left:7px}
#isPanel table.ledtbl tr.mgrp td.mv{text-align:right;font-weight:700;font-size:11px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
#isPanel table.ledtbl tr.mgrp td.ms{color:var(--muted);font-size:10px;text-align:right;font-weight:600}
/* 거래처×월 매트릭스 — 손익 표 월 열 구조와 동일(우측정렬·등폭·콤마) */
#isPanel table.ledtbl.matrix td, #isPanel table.ledtbl.matrix th{white-space:nowrap}
#isPanel table.ledtbl.matrix th.m, #isPanel table.ledtbl.matrix td.m{text-align:right;font-variant-numeric:tabular-nums}
#isPanel table.ledtbl.matrix th.tot, #isPanel table.ledtbl.matrix td.tot{text-align:right;font-variant-numeric:tabular-nums}
#isPanel table.ledtbl.matrix th.tot{color:var(--ink)}
#isPanel table.ledtbl.matrix td.vn{color:var(--ink2);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
#isPanel table.ledtbl.matrix td.m{color:var(--ink2)}
#isPanel table.ledtbl.matrix td.tot{color:var(--ink);font-weight:600}
#isPanel table.ledtbl.matrix td.z{color:var(--zero)}
#isPanel table.ledtbl.matrix td.neg{color:var(--neg)}
/* 합계 행(맨 아래, 거래처 합 = 손익 항목 월값) — 뉴트럴 회색 강조, sticky bottom(화이트앤그레이) */
#isPanel table.ledtbl.matrix tr.sumrow td{position:sticky;bottom:0;z-index:1;background:var(--surface-2);
  border-top:1px solid var(--line);font-weight:700;color:var(--ink);padding:7px 10px}
#isPanel table.ledtbl.matrix tr.sumrow td.m, #isPanel table.ledtbl.matrix tr.sumrow td.tot{color:var(--ink)}
#isPanel table.ledtbl.matrix tr.sumrow td.neg{color:var(--neg-strong)}
/* 거래처 행 — 클릭 시 개별 거래 펼침. 셰브론 */
#isPanel .ledhd .lednote{font-size:10.5px;color:var(--muted);font-weight:600}
#isPanel table.ledtbl.matrix tr.vrow{cursor:pointer}
#isPanel table.ledtbl.matrix tr.vrow:hover td{background:var(--hover)}
#isPanel table.ledtbl.matrix tr.vrow .vchev{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;color:var(--muted);margin-right:6px;vertical-align:-1px}
#isPanel table.ledtbl.matrix tr.vrow .vchev svg{width:10px;height:10px;display:block;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#isPanel table.ledtbl.matrix tr.vrow.open .vchev{transform:rotate(90deg)}
/* 개별 거래 펼침(거래처 행 아래) */
#isPanel tr.vdetail>td{padding:0;background:#fff;border-bottom:1px solid var(--line)}
#isPanel .vdwrap{padding:4px 10px 8px 28px}
#isPanel table.vdtbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
#isPanel table.vdtbl thead th{padding:5px 8px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line2);white-space:nowrap}
#isPanel table.vdtbl thead th.r{text-align:right}
#isPanel table.vdtbl tbody td{padding:4px 8px;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
#isPanel table.vdtbl tbody tr:last-child td{border-bottom:0}
#isPanel table.vdtbl td.dt{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#isPanel table.vdtbl td.ds{color:var(--ink2)}
#isPanel table.vdtbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#isPanel table.vdtbl td.amt{color:var(--ink);font-weight:600}
#isPanel .ledfoot{font-size:10.5px;color:var(--muted);margin-top:7px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
#isPanel .ledfoot b{color:var(--ink)}
/* footer */
#isPanel .foot{padding:16px 22px 30px;color:var(--muted);font-size:11.5px;line-height:1.6}
#isPanel .foot b{color:var(--ink2)}

/* responsive */
/* .kpis 는 auto-fit(minmax 220px)로 폭에 맞춰 자동 열수 조정 — 별도 브레이크포인트 불필요 */
@media(max-width:560px){
  #isPanel .brand .sub{display:none}
  #isPanel .topbar-head{gap:12px;padding:0 16px}
  #isPanel .head-note{display:none}
  #isPanel .content{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  #isPanel .kpi{transition:none}
}


/* ══════════════ 계정별 원장 패널 (#lgPanel) ══════════════ */

#lgPanel{
  /* ── 대시보드(db.barybody.com) common.css 토큰 그대로 — Wealthio풍 세이지 액센트 ── */
  --bg:#F4F5F7; --panel:#FFFFFF; --ink:#1A1D21; --ink2:#4A5159; --muted:#79818B;
  --charcoal:#3A4047;
  --line:#ECEEF1; --line2:#F4F5F7; --line-strong:#D6DAE0;
  /* 액센트 = 대시보드 세이지 브랜드(청록→세이지 교체) */
  --accent:#3E4D41; --accent-deep:#2E3A30; --accent-2:#4A5A4D;
  --accent-soft:#EAEFEB; --accent-soft2:#EEF2EF; --accent-soft3:#DFE7E1;
  --sage:#9BAA9E;
  /* 차변/대변 — 차변=텍스트 잉크, 대변=딥세이지(차트 대변 막대와 통일) */
  --dr:#1A1D21; --cr:#3E4D41; --pos:#1F8A4C; --pos-bg:#E7F4EC;
  --neg:#D23B3B; --neg-strong:#B82828; --neg-bg:#FCEDED; --zero:#C5C9D2;
  --surface-2:#F4F5F7; --surface-3:#FAFBFC;
  --thead-bg:#EEF0F3;
  --zebra:#FAFBFC; --hover:#F4F5F7; --chip:#F4F5F7;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-pop:0 4px 8px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.12);
  /* 라운드 — 대시보드 radius 체계 */
  --r:18px; --r-md:12px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
  --head-h:70px;   /* 대시보드 --topbar-h:70px와 통일 */
}
#lgPanel *, #lgPanel *::before, #lgPanel *::after{box-sizing:border-box}
#lgPanel{-webkit-text-size-adjust:100%}
#lgPanel{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
#lgPanel .mono{font-variant-numeric:tabular-nums}
#lgPanel .num{font-variant-numeric:tabular-nums;letter-spacing:0}
#lgPanel button{font-family:inherit;cursor:pointer}
#lgPanel input, #lgPanel select{font-family:inherit;font-size:13px}
#lgPanel :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* ===== layout — 사이드바 없는 단일 컬럼 풀폭(위→아래 흐름) ===== */
#lgPanel .page{min-height:100vh;background:var(--bg)}
#lgPanel .main{min-width:0;display:flex;flex-direction:column;width:100%}
/* ===== brand 헤더 — 페이지 상단(검색 헤더 좌측). 대시보드 .sb-brand 결 ===== */
#lgPanel .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
#lgPanel .brand-mark{width:34px;height:34px;border-radius:11px;flex:0 0 34px;
  background:linear-gradient(135deg,#7E9281 0%,#3E4D41 100%);box-shadow:0 4px 10px rgba(62,77,65,.28);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}
#lgPanel .brand-txt{min-width:0}
#lgPanel .brand h1{font-size:16px;margin:0;letter-spacing:-.01em;font-weight:700;color:var(--ink);white-space:nowrap}
#lgPanel .brand .sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
/* ===== 의미 프리셋 — 접이식 패널(필터바 아래, 기본 접힘) =====
   모서리가 각져 있어 위 필터바·아래 카드(둘 다 --r=18px)와 겉돌았다 → 같은 라운드·그림자로 통일.
   overflow:hidden 은 summary 의 hover 배경이 둥근 모서리 밖으로 삐져나오지 않게 한다. */
#lgPanel .preset-panel{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
#lgPanel .preset-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 22px;user-select:none;transition:background .12s}
#lgPanel .preset-summary::-webkit-details-marker{display:none}
#lgPanel .preset-summary:hover{background:var(--surface-3)}
#lgPanel .preset-summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#lgPanel .ps-lead{font-size:12px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
#lgPanel .ps-ico{font-size:13px}
#lgPanel .ps-hint{font-size:11px;color:var(--muted);font-weight:500}
/* 프리셋 패널 셰브론 — 대시보드 .ph-caret 동일 SVG(6 9 12 15 18 9). 펼침 시 rotate180 */
#lgPanel .ps-chev{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;color:var(--muted);transition:transform .18s ease,color .18s ease}
#lgPanel .ps-chev svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#lgPanel .preset-panel[open] .ps-chev{transform:rotate(180deg);color:var(--accent)}
/* 즉시 펼침(등장 애니메이션 없음 — 셰브론 SVG 회전만 유지) */
#lgPanel .preset-body{padding:2px 22px 16px}
/* 그룹 — 펼치면 가로로 흐르게(가로 풀폭) */
#lgPanel #presetBox{display:flex;flex-wrap:wrap;gap:8px 20px}
/* 프리셋 계정 탭 — 프리셋 안에서 계정을 고른다(매출/광고비…) */
#lgPanel .preset-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
#lgPanel .ptab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:#fff;border-radius:var(--r-pill);padding:6px 13px;font-size:12.5px;font-weight:600;
  color:var(--ink2);cursor:pointer;transition:.14s}
#lgPanel .ptab:hover{background:var(--surface-2);border-color:var(--line-strong)}
#lgPanel .ptab.on{background:var(--charcoal,#2C3230);border-color:var(--charcoal,#2C3230);color:#fff}
#lgPanel .ptab .pt-code{font-size:10.5px;font-weight:600;opacity:.6}
#lgPanel .ptab.on .pt-code{opacity:.75}
#lgPanel .preset-grp{margin-bottom:4px;min-width:0}
#lgPanel .preset-grp .gh{font-size:11px;font-weight:700;color:var(--ink2);margin:4px 2px 7px;display:flex;align-items:center;gap:6px}
#lgPanel .preset-grp .gh .dot{width:7px;height:7px;border-radius:50%;flex:none}
#lgPanel .presets{display:flex;flex-wrap:wrap;gap:6px}
#lgPanel .preset{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink2);
  padding:5px 9px;border-radius:999px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;
  transition:.12s;white-space:nowrap}
#lgPanel .preset:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft2)}
#lgPanel .preset.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
#lgPanel .preset .pc{font-size:10px;opacity:.6;font-variant-numeric:tabular-nums}
#lgPanel .preset.on .pc{opacity:.8}
/* 안내문 — 프리셋 박스 폭에 맞춰 꽉 채운다. max-width 760px 이 남는 공간을 못 쓰게 막아
   넓은 화면에서도 문구가 두 줄로 접히던 문제(2026-07-23 실측: 가용 1448px 인데 760px 로 묶여 있었다) */
#lgPanel .rail-note{margin:12px 0 0;padding:9px 12px;background:var(--accent-soft2);
  border-radius:var(--r-sm);font-size:11px;color:var(--ink2);line-height:1.5}
#lgPanel .rail-note b{color:var(--accent-deep)}
/* ===== topbar — borderless: 흰 헤더 띠(brand와 동일 흰색)가 회색 콘텐츠 영역과 색으로 구분.
   가로 구분선 제거, 스크롤 시 겹침은 필터바 하단 옅은 그림자로만 분리(대시보드 헤더 결) ===== *//* 검색 헤더 밴드 — 좌측 brand + 우측 검색. 단일 컬럼 풀폭 페이지 상단 헤더 */
#lgPanel .topbar-head{background:#fff;height:var(--head-h);padding:0 22px;
  position:sticky;top:0;z-index:21;display:flex;align-items:center;gap:18px}
/* 필터 도구 밴드 — 검색 헤더 아래. borderless: 하단 구분선 없음(흰 헤더 띠가 회색 콘텐츠와 면색으로 구분) */
#lgPanel .topbar-tools{background:#fff;padding:11px 22px;position:sticky;top:var(--head-h);z-index:20;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* 검색 알약 — 대시보드 .pagehead-search 톤(surface-2 배경, focus 시 흰+보더) */
#lgPanel .search{flex:1;min-width:220px;position:relative;display:flex;align-items:center}
#lgPanel .search svg{position:absolute;left:13px;width:16px;height:16px;color:var(--muted);pointer-events:none}
#lgPanel .search input{width:100%;padding:9px 14px 9px 36px;border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--surface-2);outline:none;color:var(--ink);font-size:13px;transition:background .15s ease,border-color .15s ease}
#lgPanel .search input::placeholder{color:var(--muted)}
#lgPanel .search input:focus{border-color:var(--line-strong);background:#fff}
#lgPanel .search .kbd{position:absolute;right:12px;font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:#fff;font-family:inherit}
#lgPanel .ctl{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
/* 필터 초기화는 항상 오른쪽 끝 — 보기 버튼이 늘어나도 아래로 떨어지지 않게 밀어 둔다.
   :last-child 가 아니라 #lgBtnReset 을 담은 필드를 직접 지목한다 — 뒤에 다른 .field 가
   하나라도 붙으면(숨김이어도 DOM 상 마지막 자식) 매칭이 그쪽으로 넘어가 버린다(2026-08-05).
   ⛔ 이 줄에 .field 를 더 추가하지 말 것. 도구 밴드가 2층이 된다 — 새 컨트롤은 표 위(.lg-bulk-bar)로. */
#lgPanel .ctl > .field:has(#lgBtnReset){margin-left:auto}
#lgPanel .field{display:flex;flex-direction:column;gap:5px}
#lgPanel .field label{font-size:11px;color:var(--muted);font-weight:600;padding-left:3px}
/* 셀렉트 — 대시보드 결: 네이티브 화살표 제거 + 세이지 caret SVG, pill 톤 보더/포커스 */
#lgPanel .field select, #lgPanel .field input{padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;outline:none;color:var(--ink);font-size:13px;line-height:1.3;transition:border-color .15s ease,box-shadow .15s ease}
#lgPanel .field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:30px;max-width:210px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2379818B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px}
#lgPanel .field select:hover{border-color:var(--accent)}
#lgPanel .field select:focus, #lgPanel .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#lgPanel .field .range{display:flex;align-items:center;gap:6px}
#lgPanel .field .range input{width:86px;text-align:right;font-variant-numeric:tabular-nums}
/* 세그먼트 토글 — 대시보드 톤: surface-2 트랙 + 활성=세이지 칩 */
#lgPanel .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);padding:3px;gap:2px}
#lgPanel .seg button{border:0;background:transparent;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ink2);border-radius:var(--r-pill);transition:.15s}
#lgPanel .seg button:hover:not(.on){color:var(--ink)}
#lgPanel .seg button.on{background:var(--accent);color:#fff}
#lgPanel .btn-reset{border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-pill);padding:8px 14px;font-size:12px;font-weight:600;color:var(--charcoal);transition:.15s}
#lgPanel .btn-reset:hover{background:var(--surface-2);border-color:var(--neg);color:var(--neg)}
/* ===== chips ===== */
/* 적용된 필터 칩 — 검색 카드 바로 아래. .preset-panel 과 동일한 카드 규격(여백·라운드·그림자) */
#lgPanel .chips{display:flex;gap:7px;flex-wrap:wrap;padding:11px 22px;background:#fff;
  border-radius:var(--r);box-shadow:var(--shadow);margin:10px 22px 0;min-height:0;align-items:center}
#lgPanel .chips:empty{display:none}
#lgPanel .chips .lead{font-size:11px;color:var(--muted);font-weight:600;margin-right:2px}
#lgPanel .chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 11px;font-size:12px;font-weight:500;color:var(--ink2)}
#lgPanel .chip b{color:var(--accent-deep);font-weight:700}
#lgPanel .chip .x{width:17px;height:17px;border-radius:50%;border:0;background:#fff;color:var(--muted);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s}
#lgPanel .chip .x:hover{background:var(--neg);color:#fff}
/* ===== content ===== */
#lgPanel .content{padding:18px 22px 60px;display:flex;flex-direction:column;gap:16px}
/* KPI strip — 대시보드 .kpi-card 톤(흰 카드, border:none, 2겹 그림자, 큰 값) */
#lgPanel .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:stretch}
/* KPI 카드 — 4장 라벨/값/보조 줄을 같은 수직 구조·높이로 정렬(보조 없는 카드도 같은 자리 차지) */
#lgPanel .kpi{background:#fff;border:none;border-radius:var(--r-lg);padding:20px 22px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;min-width:0;transition:box-shadow .18s ease,transform .18s ease}
#lgPanel .kpi:hover{box-shadow:var(--shadow-pop);transform:translateY(-2px)}
#lgPanel .kpi .k{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:5px;min-height:17px}
/* 값 줄: 고정 높이 + baseline 정렬 → '건' 단위 카드와 숫자만 카드의 큰 값이 같은 y에 */
#lgPanel .kpi .v{font-size:clamp(18px,1.9vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink);
  display:flex;align-items:baseline;min-height:35px;min-width:0;overflow:hidden}
#lgPanel .kpi .v.dr{color:var(--dr)} #lgPanel .kpi .v.cr{color:var(--cr)}
/* 보조(meta) 줄: 보조 없는 카드(&nbsp;)도 같은 높이 차지 → 모든 카드 보조 줄이 한 줄에 가지런 */
#lgPanel .kpi .meta{font-size:11.5px;color:var(--muted);min-height:16px}
/* panels grid */
#lgPanel .grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
/* 카드 — 대시보드 .table-card 톤: 흰 면, border:none, 2겹 그림자, radius 18 */
#lgPanel .card{background:#fff;border:none;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#lgPanel .card .hd{padding:14px 18px 12px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:10px}
#lgPanel .card .hd .hint{font-size:11px;color:var(--muted);font-weight:500}
#lgPanel .card .bd{padding:14px 18px}
/* SVG charts — 대시보드 수준 컴팩트 높이. viewBox 비율로 높이 결정, 과대 확대 방지 위해 폭 캡 *//* 차트 박스 — 대시보드 .chart-box 메커니즘 복제: position:relative + 고정 높이(px).
   차트는 컨테이너 폭을 100% 채우되 높이는 폭과 무관하게 이 고정값으로 일정(거대화 방지). */
#lgPanel #trend{position:relative;height:200px}
#lgPanel .chart{display:block;width:100%;height:100%}
@media(max-width:1023px){#lgPanel #trend{height:220px}}
@media(max-width:639px){#lgPanel #trend{height:200px}}
/* 차트 범례(차변/대변 그룹 막대) — 대시보드 톤 세이지 2종 */
#lgPanel .legend{display:inline-flex;gap:11px;align-items:center}
#lgPanel .legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600}
#lgPanel .legend .sw{width:9px;height:9px;border-radius:2px;display:inline-block}
#lgPanel .legend .sw.dr{background:#9BAA9E} #lgPanel .legend .sw.cr{background:#3E4D41}
#lgPanel .bar-row{display:grid;grid-template-columns:120px 1fr 92px;gap:9px;align-items:center;padding:4px 0;font-size:12px}
#lgPanel .bar-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
#lgPanel .bar-row .track{height:13px;background:#EEF0F2;border-radius:3px;overflow:hidden}
#lgPanel .bar-row .fill{height:100%;background:#9BAA9E;border-radius:3px}
#lgPanel .bar-row.clk:hover .fill{background:#3E4D41}
#lgPanel .bar-row .val{text-align:right;color:var(--ink)}
#lgPanel .bar-row.clk{cursor:pointer;border-radius:6px;margin:0 -6px;padding:4px 6px}
#lgPanel .bar-row.clk:hover{background:var(--hover)}
/* ===== table — 대시보드 표 카드 톤 ===== */
#lgPanel .tablewrap{background:#fff;border:none;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#lgPanel .tbar{padding:14px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#lgPanel .tbar .cnt{font-size:14px;font-weight:700;color:var(--ink)}
#lgPanel .tbar .cnt span{color:var(--accent-deep)}
/* 결과 요약 미니카드 — 상단 KPI 4카드와 동일 정렬: 라벨 한 줄(같은 y)→큰 값 한 줄→보조(억) 한 줄.
   보조값 없는 '총 건수'도 보조줄 자리를 빈 공간으로 유지하고 라벨·값 top 정렬(중앙으로 안 내려감). */
#lgPanel .rstat{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
#lgPanel .rstat .it{display:flex;flex-direction:column;justify-content:flex-start;padding:1px 16px;position:relative}
#lgPanel .rstat .it+.it::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)}
#lgPanel .rstat .it:first-child{padding-left:2px}
#lgPanel .rstat .it .rl{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.02em;min-height:13px}
#lgPanel .rstat .it .rv{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:1px;font-variant-numeric:tabular-nums;min-height:21px;display:flex;align-items:baseline}
#lgPanel .rstat .it .rv.dr{color:var(--dr)} #lgPanel .rstat .it .rv.cr{color:var(--cr)}
#lgPanel .rstat .it .rv .u{font-size:11px;color:var(--muted);font-weight:600;margin-left:3px;font-family:inherit}
#lgPanel .rstat .it .rsub{font-size:10px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums;min-height:13px}
#lgPanel .tbar .rgt{display:flex;gap:8px;align-items:center}
#lgPanel .tscroll{max-height:none;overflow:auto}
#lgPanel table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
/* thead — 대시보드 톤: 불투명 연회색(--thead-bg) sticky 헤더, text-2 라벨 */
#lgPanel thead th{position:sticky;top:0;z-index:5;background:var(--thead-bg);border-bottom:1px solid var(--line);
  padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--charcoal);white-space:nowrap;cursor:pointer;user-select:none;transition:color .12s ease}
#lgPanel thead th.r{text-align:right}
#lgPanel thead th .ar{color:var(--accent);margin-left:3px;font-size:10px}
#lgPanel thead th:hover{color:var(--accent)}
#lgPanel tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
/* zebra — 대시보드 .ua-table 톤(even 행 옅은 회색) */
#lgPanel tbody tr:nth-child(even) td{background:rgba(243,244,246,.45)}
#lgPanel tbody tr:hover td{background:var(--hover)}
#lgPanel td.r{text-align:right}
#lgPanel td.num{white-space:nowrap}
#lgPanel .acpill{display:inline-block;font-size:11px;font-weight:600;color:var(--ink2);background:var(--surface-2);border-radius:6px;padding:1px 7px;white-space:nowrap}
#lgPanel .lblpill{display:inline-block;font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px;white-space:nowrap}
/* ---- 라벨 편집 — pill 클릭으로 귀인채널·구분을 바꾼다(서버 저장) ---- */
#lgPanel .lblpill.edit{cursor:pointer}
#lgPanel .lblpill.edit:hover{outline:1px solid currentColor;outline-offset:1px}
#lgPanel .lblpill.edit.blank{color:var(--zero);background:transparent;border:1px dashed var(--line);font-weight:500}
#lgPanel .lblpill.edit.blank:hover{color:var(--ink2);border-color:var(--ink2);outline:none}
/* ⛔ 높이를 뷰포트에 묶어 둘 것 — 안 그러면 채널 목록·구분 목록이 둘 다 펼쳐졌을 때
   팝오버가 화면보다 길어져 저장 버튼이 밖으로 밀린다(2026-08-05 사용자 지적).
   위치 보정(JS)은 '아래로 넘치면 위로 뒤집기'뿐이라 팝오버 자체가 뷰포트보다 크면 소용없다. */
.lbl-pop{position:absolute;z-index:9000;min-width:300px;background:var(--card,#fff);border:1px solid var(--line,#e3e6e3);
  border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:12px 13px;font-size:12.5px;
  max-height:min(78vh,620px);overflow-y:auto;overscroll-behavior:contain}
.lbl-pop .lp-h{font-weight:700;color:var(--ink);margin-bottom:9px;font-size:12px}
.lbl-pop .lp-sec{color:var(--muted);font-size:11px;font-weight:600;margin:9px 0 5px}
.lbl-pop .lp-chips{display:block}
/* ⚠ 채널 드롭다운 목록이 팝오버 폭의 60%밖에 안 되던 원인 — 위 .lp-chips 가 flex 라
   자식(.lp-ddm)이 내용 폭으로만 늘어났다. block 으로 바꾸고 목록도 100% 로 못박는다. */
.lbl-pop .lp-ddm, .lbl-pop .lp-dd{width:100%;box-sizing:border-box}
.lbl-pop .lp-chip{padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink2);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.lbl-pop .lp-chip:hover{border-color:var(--c,var(--ink2));color:var(--c,var(--ink))}
.lbl-pop .lp-chip.on{background:var(--c,#3E4D41);border-color:var(--c,#3E4D41);color:#fff}
.lbl-pop .lp-chip.add{border-style:dashed;color:var(--muted);font-weight:500}
/* '+ 새 채널' 인라인 입력 — 브라우저 기본 prompt 대체 */
.lbl-pop .lp-new{display:inline-flex;align-items:center;gap:4px}
.lbl-pop .lp-new input{width:110px;padding:3px 8px;border:1px solid var(--accent,#3E4D41);border-radius:999px;
  font-size:11.5px;color:var(--ink);background:var(--card,#fff)}
.lbl-pop .lp-new input:focus{outline:none}
.lbl-pop .lp-new button{padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink2);font-size:11px;cursor:pointer}
.lbl-pop .lp-new button.ok{background:var(--accent,#3E4D41);border-color:var(--accent,#3E4D41);color:#fff;font-weight:600}
.lbl-pop .lp-q.need{border-color:var(--accent,#3E4D41);background:var(--accent-soft,#eef1ee)}
.lbl-pop .lp-q{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  font-size:12px;color:var(--ink);background:var(--card,#fff);margin-bottom:5px}
.lbl-pop .lp-q:focus{outline:none;border-color:var(--accent,#3E4D41)}
.lbl-pop .lp-list{max-height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:7px;padding:3px}
.lbl-pop .lp-item{display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px;border:0;border-radius:5px;
  background:transparent;color:var(--ink);font-size:12px;cursor:pointer;text-align:left}
.lbl-pop .lp-item:hover{background:var(--hover)}
.lbl-pop .lp-item.on{background:var(--accent-soft,#eef1ee);font-weight:700}
.lbl-pop .lp-item.add{color:var(--muted);font-size:11.5px;border-top:1px solid var(--line);border-radius:0;margin-top:3px}
.lbl-pop .lp-dot{width:8px;height:8px;border-radius:50%;flex:none}
.lbl-pop .lp-dot.none{border:1px dashed var(--line2,#ccc);background:transparent}
.lbl-pop .lp-g{margin-left:auto;color:var(--muted);font-size:10.5px;font-weight:500}
/* 전체 보기일 때 채널별 소제목 */
/* 채널 소제목 = 접기 버튼 */
.lbl-pop .lp-gh{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border:0;background:transparent;
  font-size:10.5px;font-weight:700;color:var(--muted);border-top:1px solid var(--line);margin-top:3px;
  cursor:pointer;text-align:left}
.lbl-pop .lp-gh:first-child{border-top:0;margin-top:0}
.lbl-pop .lp-gh:hover{color:var(--ink2)}
.lbl-pop .lp-gh .n{margin-left:auto;font-weight:600;color:var(--zero)}
.lbl-pop .lp-gh .cv{width:0;height:0;border-left:4px solid currentColor;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;transform:rotate(90deg);transition:transform .12s}
.lbl-pop .lp-gh.off .cv{transform:rotate(0deg)}
/* 새로 만들기 — 검색어를 치면 목록 맨 위에 뜬다 */
.lbl-pop .lp-item.mk{color:var(--accent,#3E4D41);font-weight:700;background:var(--accent-soft,#eef1ee)}
/* 채널 드롭다운 */
.lbl-pop .lp-dd{display:flex;align-items:center;gap:7px;width:100%;padding:6px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--card,#fff);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.lbl-pop .lp-dd:hover{border-color:var(--accent,#3E4D41)}
.lbl-pop .lp-dd .ph{color:var(--muted);font-weight:500}
.lbl-pop .lp-dd .cv{margin-left:auto;width:0;height:0;border-top:4px solid var(--muted);
  border-left:4px solid transparent;border-right:4px solid transparent}
.lbl-pop .lp-ddm{margin-top:4px;max-height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:7px;padding:3px}
/* 팝오버 제목 옆 계정 표시 — 어느 계정의 라벨을 고치는지 헷갈리지 않게 */
.lbl-pop .lp-acc{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:var(--muted)}
/* 저장·취소는 팝오버를 스크롤해도 항상 아래에 붙어 있어야 한다(위 max-height 와 짝). */
.lbl-pop .lp-b{display:flex;justify-content:flex-end;gap:6px;
  position:sticky;bottom:-12px;z-index:3;
  margin:10px -13px -12px;padding:9px 13px 12px;
  background:var(--card,#fff);border-top:1px solid var(--line,#e3e6e3)}
.lbl-pop .lp-b button{padding:4px 12px;border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--ink2);font-size:12px;cursor:pointer}
.lbl-pop .lp-b button.pri{background:var(--accent,#3E4D41);border-color:var(--accent,#3E4D41);color:#fff;font-weight:600}
/* ---- 수동 구분(사용자 자유 입력, localStorage 오버레이) — 기존 833 라벨(.lblpill)과 별개 ---- */
#lgPanel .memopill{display:inline-block;font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px;
  margin-left:6px;white-space:nowrap;color:var(--accent-deep);background:var(--accent-soft2);
  border:1px solid var(--accent-soft3);cursor:pointer}
#lgPanel .memopill:hover{background:var(--accent-soft3)}
/* 거래처 전체 적용(소스=vendor)은 흐리게, 개별 거래(소스=tx)는 진하게 — 구분 */
#lgPanel .memopill.v{color:var(--muted);background:var(--surface-2);border-style:dashed;font-weight:500;cursor:default}
#lgPanel .memohint{display:inline-block;font-size:10.5px;color:var(--muted);opacity:.5;margin-left:6px;
  cursor:pointer;white-space:nowrap;border-radius:6px;padding:1px 6px}
#lgPanel .memohint:hover{opacity:1;background:var(--accent-soft2);color:var(--accent-deep)}
#lgPanel .memo-edit{display:inline-flex;align-items:center;gap:5px;margin-left:6px;vertical-align:middle}
#lgPanel .memo-input{font-size:11.5px;font-family:inherit;padding:3px 7px;border:1px solid var(--accent);
  border-radius:6px;width:150px;outline:none;color:var(--ink)}
#lgPanel .memo-input:focus{box-shadow:0 0 0 3px var(--accent-soft)}
#lgPanel .memo-seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
#lgPanel .memo-scope{font-size:10px;font-weight:600;padding:3px 7px;border:none;background:#fff;color:var(--muted);
  cursor:pointer;white-space:nowrap}
#lgPanel .memo-scope:disabled{opacity:.4;cursor:not-allowed}
#lgPanel .memo-scope+.memo-scope{border-left:1px solid var(--line)}
#lgPanel .memo-scope.on{background:var(--accent);color:#fff}
#lgPanel .memo-ok, #lgPanel .memo-cancel{font-size:11px;width:20px;height:20px;line-height:18px;text-align:center;
  border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;padding:0}
#lgPanel .memo-ok{color:var(--accent-deep);border-color:var(--accent-soft3)}
#lgPanel .memo-ok:hover{background:var(--accent-soft2)}
#lgPanel .memo-cancel{color:var(--neg)}
#lgPanel .memo-cancel:hover{background:rgba(0,0,0,.04)}
#lgPanel .cellds{color:var(--ink2);max-width:340px}
#lgPanel .cellpn{color:var(--ink2);white-space:nowrap}
#lgPanel .cellpn .code{color:var(--muted);font-size:10.5px}
#lgPanel .dr-c{color:var(--dr);font-weight:600}
#lgPanel .cr-c{color:var(--cr);font-weight:600}
#lgPanel .neg{color:var(--neg)}
#lgPanel .zero{color:var(--zero)}
/* month group header — 월계 행: 본문과 같은 컬럼 구조(td)로 차변·대변을 해당 컬럼 아래 우측정렬.
   대시보드 세이지 톤(연세이지 칩 배경 + 세이지 경계) */
#lgPanel tr.mgrp td{background:var(--accent-soft);border-top:1px solid var(--accent-soft3);border-bottom:1px solid var(--accent-soft3);
  padding:7px 12px;position:sticky;top:33px;z-index:4}
/* 월계 행은 zebra 무늬 위에 항상 세이지 유지(even 행과 겹쳐도 우선) */
#lgPanel tr.mgrp:nth-child(even) td{background:var(--accent-soft)}
#lgPanel tr.mgrp td.ml{font-weight:700;color:var(--accent-deep);font-size:12px;letter-spacing:-.2px;cursor:pointer;user-select:none}
#lgPanel tr.mgrp td.ml .mchev{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:3px;background:var(--accent-deep);transition:transform .15s;
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  mask:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
#lgPanel tr.mgrp.collapsed td.ml .mchev{transform:rotate(-90deg)}
#lgPanel tr.mgrp:hover td{filter:brightness(.985)}
#lgPanel tr.mgrp td.ml .sc{font-weight:600;color:var(--muted);font-size:10.5px;margin-left:7px}
#lgPanel tr.mgrp td.mv{text-align:right;font-weight:700;font-size:12px;white-space:nowrap}
#lgPanel tr.mgrp td.mv.dr{color:var(--dr)} #lgPanel tr.mgrp td.mv.cr{color:var(--cr)}
/* rollup view (배경은 td에 명시 — zebra/nth-child(even)를 확실히 이김) */
#lgPanel tr.roll{cursor:pointer}
#lgPanel tr.roll td{font-weight:500}
#lgPanel tr.roll:hover td, #lgPanel tr.roll:nth-child(even):hover td{background:var(--hover)}
/* 드릴다운 화살표 — 대시보드 셰브론 SVG(.exp). 기본 오른쪽(▸), 펼침 시 rotate90(▾) */
#lgPanel .exp{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  vertical-align:-2px;margin-right:2px;transition:transform .16s ease,color .16s ease}
#lgPanel .exp svg{width:13px;height:13px;display:block;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#lgPanel tr.roll .exp{color:var(--muted)}
#lgPanel tr.roll.open .exp{transform:rotate(90deg);color:var(--accent)}
#lgPanel tr.drill td, #lgPanel tr.drill:nth-child(even) td{background:var(--surface-3);font-size:12px;padding:6px 12px 6px 12px;color:var(--ink2)}
/* L3 거래 행 — L2 거래처명 텍스트 시작점(거래처 padding 26 + 셰브론폭 16 ≈ 42px)에 좌측 정렬.
   3단 위계: 계정(L1) > 거래처(L2, 셰브론+26) > 거래(L3, 한 단 더 들여 42) */
/* 체크박스가 첫 열 안 인라인이라 계단식 들여쓰기를 줄여 왼쪽에 붙인다(2026-08-05).
   ⛔ 체크박스를 별도 열(td.selcol)로 되돌리지 말 것 — 이 padding 이 체크박스 칸에 걸려 칸이 벌어진다. */
#lgPanel tr.drill td:first-child{border-left:2px solid var(--line);padding-left:16px}
/* 드릴다운 즉시 펼침(등장 애니메이션 없음 — 셰브론 회전만) *//* account group (rollup L1) — 계정과목 그룹 헤더(클릭 시 소속 거래처 펼침). 대시보드 세이지 칩 톤 */
#lgPanel tr.acctgrp{cursor:pointer}
/* 그룹 헤더는 흰 바탕 — 초록 바탕이 표 전체를 덮어 답답했다(사용자 지시).
   위계는 굵기·선으로만 준다. */
#lgPanel tr.acctgrp td, #lgPanel tr.acctgrp:nth-child(even) td{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-weight:700;color:var(--ink);font-size:12px;padding:8px 12px}
#lgPanel tr.acctgrp:hover td{background:var(--hover)}
#lgPanel tr.acctgrp .exp{color:var(--ink2)}
#lgPanel tr.acctgrp.open .exp{transform:rotate(90deg)}
#lgPanel tr.acctgrp td.r{color:var(--ink)}
#lgPanel tr.acctgrp .vcnt{font-weight:600;color:var(--muted);font-size:10.5px;margin-left:7px}
/* 채널별 집계 맨 위 합계 행 */
#lgPanel tr.chan-total td{background:var(--surface-2);font-weight:800;color:var(--ink);font-size:12.5px;
  padding:9px 12px;border-bottom:2px solid var(--line)}
/* ---- 채널별 집계: 월별 매출/비용 가로 표 ---- */
#lgPanel tr.mh th, #lgPanel tr.mh2 th{background:var(--surface-2);white-space:nowrap}
#lgPanel tr.mh th.mgrp-h{text-align:center;font-size:11.5px;color:var(--ink2);border-left:1px solid var(--line)}
#lgPanel tr.mh th.mgrp-h.first{border-left:0}
#lgPanel tr.mh th.mgrp-h.tot{color:var(--ink);font-weight:800}
#lgPanel tr.mh2 th{font-size:10.5px;color:var(--muted);font-weight:600;padding-top:2px;padding-bottom:5px}
/* 첫 칸(채널·계정명)은 가로 스크롤해도 붙어 있어야 어느 행인지 안 잃는다. */
/* z-index: 같은 tbody 안에서 뒤 셀보다 위여야 경계 그림자가 안 덮인다(collapse 모드에서 특히). */
#lgPanel td.stick, #lgPanel th.stick{position:sticky;left:0;z-index:6;background:#fff;
  border-right:1px solid var(--line);min-width:210px;max-width:210px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lgPanel tr.chan-total td.stick{background:var(--surface-2)}
#lgPanel tr.drill td.stick{background:var(--surface-3)}
/* ⛔ #lgPanel thead th 가 z-index:5 다. 고정 칸은 그보다 위여야 월 헤더에 안 덮인다. */
#lgPanel th.stick{background:var(--surface-2);z-index:7}
#lgPanel tr.acctgrp:hover td.stick{background:var(--hover)}
/* 채널별 집계에서만 border-collapse:collapse — separate 이면 행 사이 가로선 두께만큼
   세로 구분선이 끊긴다. sticky 칸은 border 대신 box-shadow 를 쓰므로 collapse 여도 안전. */
#lgPanel table.chan-mode{border-collapse:collapse}
/* 월 경계 세로선 — 월이 시작되는 칸(매출) 왼쪽. 합계 앞은 더 진하게. */
#lgPanel td.msep, #lgPanel th.msep{border-left:1px solid var(--line)}
#lgPanel td.tsep, #lgPanel th.tsep{border-left:2px solid var(--ink2)}
#lgPanel tr.mh th.mgrp-h.tot{border-left:2px solid var(--ink2)}
/* 계정 그룹 안의 거래처 행(L2) — 들여쓰기 */
#lgPanel tr.roll.sub td:first-child{padding-left:12px}
#lgPanel tr.roll.sub td, #lgPanel tr.roll.sub:nth-child(even) td{background:#fff}
#lgPanel tr.roll.sub:hover td{background:var(--hover)}
/* empty */
#lgPanel .empty{padding:54px 20px;text-align:center;color:var(--muted)}
#lgPanel .empty .big{font-size:15px;font-weight:600;color:var(--ink2);margin-bottom:5px}
/* footer */
#lgPanel .foot{padding:16px 22px 30px;color:var(--muted);font-size:11.5px;line-height:1.6}
#lgPanel .foot b{color:var(--ink2)}

/* ── 상단 블록 좌우 정렬 ──
   .topbar-tools / .preset-panel 은 좌우 여백이 0이라 본문(.content padding:18px 22px)보다
   양쪽으로 22px씩 튀어나와, 아래 KPI·차트·표와 세로선이 어긋나 보였다(사용자 지적).
   같은 여백을 줘 한 줄로 맞춘다. 모바일(≤560px)은 본문 16px 규칙에 맞춘다. */
#lgPanel .topbar-tools{margin-left:22px;margin-right:22px}
#lgPanel .preset-panel{margin:10px 22px 0}
@media(max-width:560px){
  #lgPanel .topbar-tools{margin-left:16px;margin-right:16px}
  #lgPanel .preset-panel{margin-left:16px;margin-right:16px}
}

/* responsive */
@media(max-width:1100px){#lgPanel .grid2{grid-template-columns:1fr}}/* .kpis 는 auto-fit로 자동 조정 */
@media(max-width:880px){
  #lgPanel .cellds{max-width:none}
}
/* 모바일: brand 헤더 좁아지면 sub 숨기고 검색바 폭 확보 */
@media(max-width:560px){
  #lgPanel .brand .sub{display:none}
  #lgPanel .topbar-head{gap:12px;padding:0 16px}
  #lgPanel .topbar-tools, #lgPanel .preset-summary{padding-left:16px;padding-right:16px}
  #lgPanel .preset-body{padding-left:16px;padding-right:16px}
  #lgPanel .chips{padding-left:16px;padding-right:16px;margin-left:16px;margin-right:16px}
}
#lgPanel .scrim{position:fixed;inset:0;background:transparent}
/* 모션 최소화 선호 시 셰브론/포커스 전환 비활성(접근성) */
@media(prefers-reduced-motion:reduce){
  #lgPanel .ps-chev, #lgPanel .exp, #lgPanel .field select, #lgPanel .search input{transition:none}
}

/* ── Step-up 2FA 재인증 모달 (#72) ── */
.fin-2fa-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(20,24,28,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.fin-2fa-modal{
  background:var(--surface,#fff); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  padding:24px; width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:12px;
}
.fin-2fa-title{ margin:0; font-size:17px; font-weight:700; color:var(--text,#1A1D21); }
.fin-2fa-desc{ margin:0; font-size:13px; line-height:1.5; color:var(--muted,#79818B); }
.fin-2fa-send{
  padding:10px 14px; border:1px solid var(--line,#ECEEF1); border-radius:10px;
  background:var(--surface-2,#F4F5F7); color:var(--text,#1A1D21);
  font-size:13px; font-weight:600; cursor:pointer;
}
.fin-2fa-send:hover{ background:var(--line,#ECEEF1); }
.fin-2fa-code{
  padding:12px 14px; border:1px solid var(--line,#ECEEF1); border-radius:10px;
  font-size:20px; letter-spacing:4px; text-align:center; font-variant-numeric:tabular-nums;
}
.fin-2fa-msg{ font-size:12px; color:var(--muted,#79818B); }
.fin-2fa-msg.is-err{ color:var(--neg-strong,#B82828); }
.fin-2fa-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.fin-2fa-actions button{
  padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent;
}
.fin-2fa-cancel{ background:none; border-color:var(--line,#ECEEF1); color:var(--muted,#79818B); }
.fin-2fa-ok{ background:var(--ink,#1A1D21); color:#fff; }
.fin-2fa-ok:disabled{ opacity:.4; cursor:not-allowed; }


/* ── 비율행(매출/원가%·매출/광고비%·이익율 등) ─────────────────────────
   회계사 원본 손익계산서에 포함된 행이다. 금액이 아니라 배율(0.3282)이라 finance.js가
   fmt='pct'|'x' 를 보고 32.8% · 2.84배 로 렌더한다(금액 포맷이면 전부 '0'으로 보인다).
   금액 행과 섞여 있어 톤을 한 단계 낮춰 보조 정보로 읽히게 한다.
   :not(.neg) 로 음수(적자율) 빨강은 선언 순서와 무관하게 그대로 살린다. */
#isPanel td.num.ratio:not(.neg){color:var(--ink2)}
#isPanel td.num.ratio{font-weight:500}
#isPanel td.num.ratio.tot{font-weight:600}


/* ══════════════ 실금액 대조 패널 (#acPanel) ══════════════
   사용자가 4월에 손으로 하던 대조표를 그대로 화면으로 옮긴 것.
   [대상 / 대시보드 / 통장 / 차이 / 왜 다른가] — 표가 주인공이다.
   ⚠ 폭포수 차트는 뺐다(사용자: "폭포수가 뭔지 모르겠어 봐도"). 요약은 숫자 표로.
   대상은 재무를 모르는 사람 → 말투 "~해요", 숫자는 절대 빼지 않는다. */
#acPanel{
  --bg:#F4F5F7; --panel:#FFFFFF; --ink:#1A1D21; --ink2:#4A5159; --muted:#79818B;
  --line:#ECEEF1; --accent:#3E4D41; --miss:#C1653A;
  --r:18px; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  color:var(--ink); font-size:14px;
}
#acPanel .content{padding:18px 22px 60px;display:flex;flex-direction:column;gap:16px}

#acPanel .ac-onboard{display:flex;align-items:center;gap:10px;background:#EEF2EF;border:1px solid #DCE4DE;
  border-radius:14px;padding:12px 14px;color:var(--ink2);font-size:13px}
#acPanel .ac-onboard[hidden]{display:none}
#acPanel .ac-onboard-x{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;
  width:26px;height:26px;border-radius:50%}
#acPanel .ac-onboard-x:hover{background:#fff;color:var(--ink2)}

/* 결론 먼저(두괄식) */
#acPanel .ac-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 8px;line-height:1.4}
#acPanel .ac-head h2 b{color:var(--accent)}
#acPanel .ac-head p{font-size:15px;color:var(--ink2);line-height:1.7;margin:0;max-width:780px}
#acPanel .ac-head p b{color:var(--ink);font-weight:700}
#acPanel .ac-period{font-size:12px;color:var(--muted);text-align:right;margin-top:-6px}

/* 100만원 비유 카드 */
#acPanel .ac-analogy{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px}
#acPanel .ac-analogy-line{font-size:13px;color:var(--muted);margin-bottom:12px}
#acPanel .ac-analogy-row{display:flex;align-items:baseline;gap:12px;margin:8px 0}
#acPanel .ac-analogy-row .lb{font-size:14px;color:var(--ink2);min-width:150px}
#acPanel .ac-analogy-row .v{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--muted);
  font-variant-numeric:tabular-nums}
#acPanel .ac-analogy-row.real .v{color:var(--accent);font-size:32px}
#acPanel .ac-analogy-note{font-size:12px;color:var(--muted);margin-top:12px}

#acPanel .ac-sec{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:10px 0 -4px}
#acPanel .ac-card-wrap{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 10px}

/* 대조표 — 사용자 4월 표 구조 */
#acPanel .ac-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
#acPanel .ac-tbl th{text-align:left;font-size:11.5px;font-weight:700;color:var(--muted);padding:12px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFA}
#acPanel .ac-tbl th:first-child{border-radius:12px 0 0 0} #acPanel .ac-tbl th:last-child{border-radius:0 12px 0 0}
#acPanel .ac-tbl td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle}
#acPanel .ac-tbl tr:last-child td{border-bottom:0}
#acPanel .ac-tbl tr:hover td{background:#FAFBFA}
#acPanel .ac-tbl .r{text-align:right}
#acPanel .ac-tbl .nm{font-weight:700;color:var(--ink);white-space:nowrap}
#acPanel .ac-tbl .num{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#acPanel .ac-tbl .diff{color:var(--muted)}
#acPanel .ac-tbl .diff.up{color:#B7791F} #acPanel .ac-tbl .diff.down{color:#3E6B8A}
#acPanel .ac-tbl .why{white-space:nowrap}
#acPanel .ac-sig{font-size:12.5px;font-weight:600}
#acPanel .ac-sig.ok{color:#3E4D41} #acPanel .ac-sig.warn{color:#B7791F} #acPanel .ac-sig.bad{color:#C0392B}

/* 왜 다른지 — 표 아래 쭈르륵 */
#acPanel .ac-reason{padding:14px 12px;border-bottom:1px solid var(--line)}
#acPanel .ac-reason:last-child{border-bottom:0}
#acPanel .ac-reason-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#acPanel .ac-reason-h b{font-size:14px;color:var(--ink)}
#acPanel .ac-reason-t{font-size:14px;font-weight:700;color:var(--accent)}
#acPanel .ac-reason-amt{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
#acPanel .ac-reason p{margin:6px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.7}
#acPanel .ac-empty{font-size:13px;color:var(--muted);padding:18px 12px;margin:0}

/* 그래서 정리하면 — 그림 없이 숫자 표 */
#acPanel .ac-sum{padding:18px 22px}
#acPanel .ac-sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
#acPanel .ac-sum-row b{font-variant-numeric:tabular-nums;font-size:18px;color:var(--ink);font-weight:700}
#acPanel .ac-sum-row.minus b{color:var(--miss)}
#acPanel .ac-sum-row.total{border-bottom:0;padding-top:16px}
#acPanel .ac-sum-row.total span{font-weight:700;color:var(--ink)}
#acPanel .ac-sum-row.total b{font-size:26px;color:var(--accent);font-weight:800}

#acPanel .ac-foot{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:0 4px}

@media(max-width:900px){
  #acPanel .content{padding:14px 14px 48px}
  #acPanel .ac-head h2{font-size:21px}
  #acPanel .ac-analogy-row .v{font-size:24px}
  #acPanel .ac-analogy-row.real .v{font-size:26px}
  #acPanel .ac-tbl{font-size:12.5px}
  #acPanel .ac-tbl th,#acPanel .ac-tbl td{padding:9px 8px}
  #acPanel .ac-tbl .why{white-space:normal}
}
@media (prefers-reduced-motion: reduce){ #acPanel *{transition:none !important;animation:none !important} }

/* ══════════════════════ 회계 상식 모달 (finance.js 가 DOM 생성) ══════════════════════
   index.html 을 안 건드리는 대신 스타일만 여기 둔다. 본문은 static/finance-guide.html. */
/* 탭 줄을 감싸는 행 — 좌: 탭 세그먼트 / 우: 회계 상식 버튼 (JS가 만든다) */
#financeView .fin-tabs-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 14px}
#financeView .fin-tabs-row .fin-tabs{margin-bottom:0}
.fg-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  border:1px solid #3E4D41;background:#3E4D41;color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .12s ease,border-color .12s ease}
.fg-btn svg{width:14px;height:14px}
.fg-btn:hover{background:#334036;border-color:#334036}
.fg-btn:focus-visible{outline:2px solid #3E4D41;outline-offset:2px}

.fg-wrap[hidden]{display:none}
.fg-wrap{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:24px}
.fg-backdrop{position:absolute;inset:0;background:rgba(20,24,21,.42)}
.fg-modal{position:relative;display:flex;flex-direction:column;width:min(880px,100%);max-height:88vh;
  background:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.24);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif}
.fg-head{display:flex;align-items:baseline;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line,#e3e6e3);
  background:var(--surface-2,#F8F9FA);flex:0 0 auto}
.fg-title{font-size:15px;font-weight:800;color:var(--ink,#1A1D21);letter-spacing:-.01em}
.fg-sub{font-size:11.5px;color:var(--muted,#79818B);font-weight:500}
.fg-x{margin-left:auto;border:0;background:transparent;cursor:pointer;color:var(--muted,#79818B);
  font-size:14px;line-height:1;padding:4px 6px;border-radius:6px}
.fg-x:hover{background:rgba(0,0,0,.06);color:var(--ink,#1A1D21)}
.fg-body{overflow-y:auto;padding:6px 28px 34px;flex:1 1 auto;outline:none;
  font-size:14px;line-height:1.75;color:var(--ink2,#3A4047);-webkit-overflow-scrolling:touch}
.fg-loading{padding:60px 0;text-align:center;color:var(--muted,#79818B);font-size:13px}

/* 본문 서식 — 문서가 길어 위계가 분명해야 읽힌다 */
.fg-body h1{font-size:19px;font-weight:800;color:var(--ink,#1A1D21);margin:34px 0 14px;
  padding-bottom:9px;border-bottom:2px solid var(--accent,#3E4D41);letter-spacing:-.02em}
.fg-body h1:first-child{margin-top:16px}
.fg-body h2{font-size:15.5px;font-weight:700;color:var(--ink,#1A1D21);margin:26px 0 10px;letter-spacing:-.01em}
.fg-body h3{font-size:13.5px;font-weight:700;color:var(--ink2,#4A5159);margin:20px 0 8px}
.fg-body p{margin:11px 0}
.fg-body strong{color:var(--ink,#1A1D21);font-weight:700}
.fg-body hr{border:0;border-top:1px solid var(--line,#e3e6e3);margin:26px 0}
.fg-body ul{margin:11px 0;padding-left:20px}
.fg-body li{margin:5px 0}
.fg-body code{background:var(--surface-2,#F1F3F5);padding:1px 5px;border-radius:4px;
  font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fg-body pre{background:#F7F9F8;border:1px solid var(--line,#e3e6e3);border-radius:9px;
  padding:13px 15px;overflow-x:auto;margin:13px 0}
.fg-body pre code{background:none;padding:0;font-size:12.5px;line-height:1.7;white-space:pre}
.fg-body blockquote{margin:13px 0;padding:11px 15px;background:var(--surface-2,#F8F9FA);
  border-left:3px solid var(--accent,#3E4D41);border-radius:0 8px 8px 0;font-size:13px;color:var(--ink2,#4A5159)}
.fg-body table{width:100%;border-collapse:collapse;margin:13px 0;font-size:13px}
.fg-body th,.fg-body td{padding:8px 11px;border-bottom:1px solid var(--line,#e9ebe9);text-align:left;vertical-align:top}
.fg-body thead th{background:var(--surface-2,#F8F9FA);font-weight:700;color:var(--muted,#79818B);
  font-size:11.5px;white-space:nowrap}
.fg-body th.r,.fg-body td.r{text-align:right;font-variant-numeric:tabular-nums}
.fg-body tbody tr:hover td{background:#FAFBFA}

@media(max-width:639px){
  .fg-wrap{padding:0}
  .fg-modal{max-height:100vh;border-radius:0;width:100%}
  .fg-body{padding:6px 18px 28px;font-size:13.5px}
  .fg-body h1{font-size:17px}
}

/* 분개(T계정) — 회계 장부 형식. ASCII 파이프로 그리면 글꼴에 따라 세로줄이 어긋나서
   좌우 두 칸 + 가운데 경계선으로 만든다. 양쪽 합이 같다는 게 눈에 보여야 한다. */
.fg-body .fg-journal{display:grid;grid-template-columns:1fr 1fr;margin:15px 0;
  border:1px solid var(--line,#e3e6e3);border-radius:10px;overflow:hidden;background:#fff}
.fg-body .fgj-side{padding:0}
.fg-body .fgj-side+.fgj-side{border-left:1px solid var(--line,#e3e6e3)}
.fg-body .fgj-head{padding:9px 14px;background:var(--surface-2,#F4F6F5);font-size:11.5px;
  font-weight:700;color:var(--muted,#79818B);border-bottom:1px solid var(--line,#e3e6e3);
  letter-spacing:.01em}
.fg-body .fgj-dr .fgj-head{color:#3E4D41}
.fg-body .fgj-row,.fg-body .fgj-sum{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:9px 14px;font-size:13px}
.fg-body .fgj-row span{color:var(--ink2,#4A5159)}
.fg-body .fgj-row b,.fg-body .fgj-sum b{font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--ink,#1A1D21);white-space:nowrap}
.fg-body .fgj-sum{border-top:1px solid var(--ink2,#4A5159);margin-top:2px;
  background:var(--surface-2,#FAFBFA)}
.fg-body .fgj-sum span{color:var(--muted,#79818B);font-size:12px;font-weight:600}
@media(max-width:639px){
  .fg-body .fg-journal{grid-template-columns:1fr}
  .fg-body .fgj-side+.fgj-side{border-left:0;border-top:1px solid var(--line,#e3e6e3)}
}

/* 다중 선택 — 라벨 일괄 지정(2026-08-05). 변수는 이 파일 기존 관례(.btn-reset 등)를 따른다.
   ⛔ 이 바는 **표 바로 위**(.tablewrap 안)에 있다. 필터 밴드로 옮기지 말 것 —
      줄이 넘쳐 도구 밴드가 2층이 된다(사용자 반복 지적). 비용 관리 .cost-bulk-bar 와 같은 자리. */
#lgContent .lg-bulk-bar{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 14px;
  background:#fff;border:1px solid var(--line-strong);border-radius:12px}
#lgContent .lg-bulk-bar[hidden]{display:none}
#lgContent .lg-bulk-count{font-size:13px;font-weight:700;color:var(--ink);margin-right:auto}
#lgContent .lg-bulk-bar button{border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-pill);
  padding:0 14px;height:32px;font-size:13px;font-weight:600;color:var(--charcoal);cursor:pointer;white-space:nowrap;transition:.15s}
#lgContent .lg-bulk-bar #lgBulkLabel{border-color:var(--accent);background:var(--accent);color:#fff}
#lgContent .lg-bulk-bar #lgBulkLabel:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
#lgContent .lg-bulk-bar #lgBulkClear:hover{border-color:var(--neg);color:var(--neg)}
/* ⛔ 네이티브 체크박스에 width/height 만 주면 브라우저가 자체 렌더링하며 서브픽셀 반올림이
   튀어 행마다 크기·위치가 제각각으로 보인다(2026-08-05 사용자 지적). appearance:none 으로
   직접 그려 크기를 못박는다. 표 안 체크박스는 전부 이 규칙 하나로 통일할 것. */
#lgPanel table input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  box-sizing:border-box;width:15px;height:15px;flex:0 0 15px;
  border:1.5px solid var(--line-strong);border-radius:4px;background:#fff;
  display:inline-block;vertical-align:middle;position:relative;cursor:pointer;margin:0;
  transition:background-color .12s ease,border-color .12s ease}
#lgPanel table input[type="checkbox"]{margin-right:7px}
#lgPanel table input[type="checkbox"]:hover{border-color:var(--accent)}
#lgPanel table input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
#lgPanel table input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* 채널별 뷰(chan-mode) — 고정 열(stick) 안에 인라인 체크박스. 모양·여백은 위 공통 규칙 하나로 통일. */

/* 커스텀 드롭다운(.cs-*)을 원장 필터 높이·톤에 맞춘다(2026-08-05).
   ⛔ cost.css 원본은 height:38px·font-size:14px·radius:10px 이라 그대로 두면
      계정·거래처·구분라벨·월 박스만 검색창·초기화 버튼보다 커진다(사용자 지적, 재발).
      여기 값은 위 `#lgPanel .field select` 와 **같은 수치**로 유지할 것. */
#lgPanel .field .cs{display:block;max-width:210px}
#lgPanel .field .cs-btn{
  height:auto;padding:8px 30px 8px 11px;
  font-size:13px;line-height:1.3;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);
  min-width:150px;max-width:210px}
#lgPanel .field .cs-btn:hover{border-color:var(--accent)}
#lgPanel .field .cs-btn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#lgPanel .field .cs-caret{margin-right:0;border-right-color:var(--muted);border-bottom-color:var(--muted)}
#lgPanel .field .cs-btn[aria-expanded="true"] .cs-caret{border-color:var(--accent)}