/* static/css/channel-recon.css — 재무 실금액 대조(#crPanel) — 채널별 대조 스타일 (#72 계열)
 *
 * ⛔ 기밀: 이 파일에도 데이터는 없다. 값은 /api/finance/*(화이트리스트) 뒤에만 있다.
 *
 * 색 체계 1차(2026-07-23): 표면 회색을 4단으로 정리했었다.
 * 2차 수정(2026-07-23, 사용자 재지적 "드릴다운에 꼭 배경색 채워야해? 구분선을 더 적극적으로"):
 *   드릴다운(.cr-detail)과 펼친 행(.cr-row.is-open)의 색 채우기(세이지 배경)를 전부 걷어냈다.
 *   흰 배경 그대로 두고, 구역 구분은 전부 "선"으로 한다.
 *     · 좌측 accent 3px 바 — 펼친 행의 첫 셀 → 그 아래 상세까지 세로로 이어져 "하나의 열린
 *       채널" 임을 표시(색은 있지만 면이 아니라 선).
 *     · 상세 위/아래 2px 중립선(--line-strong) — 드릴다운의 시작·끝을 또렷이 끊는다.
 *     · 소제목(.cr-b-h) 2px 중립선 — 표 10개가 연달아 나와도 챕터 단위로 끊어 읽힌다.
 *   상세 안 중첩 표·인용·코드도 배경 대신 테두리(선)만으로 구획한다(흰 카드 띄우기 폐기 —
 *   부모가 이미 흰색이라 필요 없다).
 *   채널 표 쪽(흰 카드·표 헤더 옅은 회색·zebra 줄무늬)은 그대로 뒀다 — 이 부분은 문제 없다는
 *   피드백.
 */

#crPanel{
  --bg:#F4F5F7; --panel:#FFFFFF; --ink:#1A1D21; --ink2:#4A5159; --muted:#79818B;
  --line:#ECEEF1; --line-strong:#D6DAE0;
  --accent:#3E4D41; --accent-deep:#2E3A30; --miss:#C1653A;
  --pos:#3E6B8A; --neg:var(--miss); --zero:#9AA0A8;
  --surface-2:#F1F3F5; --thead-bg:var(--surface-2); --hover:var(--surface-2);
  --zebra:#FAFBFC;
  --r:18px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  color:var(--ink); font-size:14px;
}
#crPanel *, #crPanel *::before, #crPanel *::after{box-sizing:border-box}

/* ===== 세부 탭(합계/매출/비용) — 상위 fin-tabs 와 같은 pill 세그먼트 컨벤션 ===== */
#crPanel .cr-subtabs{
  display:inline-flex;gap:4px;padding:3px;margin:0 0 16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
}
#crPanel .cr-subtab{
  border:0;background:transparent;cursor:pointer;padding:7px 18px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--muted);
  transition:background .12s ease,color .12s ease;
}
#crPanel .cr-subtab:hover{color:var(--ink2)}
#crPanel .cr-subtab.is-active{background:var(--panel);color:var(--accent);box-shadow:0 1px 2px rgba(16,24,40,.06)}
#crPanel .cr-subtab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#crPanel .cr-sub[hidden]{display:none}

/* 준비 중 패널 — 점선 카드 안내 */
#crPanel .cr-empty{
  margin:8px 0 40px;padding:48px 24px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--panel);
}
#crPanel .cr-empty-t{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink)}
#crPanel .cr-empty-d{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

#crPanel .content{padding:18px 22px 60px;display:flex;flex-direction:column;gap:16px}

/* ===== 펼침/접힘 — JS는 style을 안 건드린다. CSS가 담당 ===== */
#crPanel .cr-group[data-open="false"] .cr-g-body{display:none}
#crPanel .cr-drow[hidden]{display:none}

/* ===== 헤드 ===== */
#crPanel .cr-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:2px 0 6px;line-height:1.4;color:var(--ink)}
#crPanel .cr-sub{font-size:14px;color:var(--ink2);line-height:1.6;margin:0}

/* 안내 박스 — 페이지 상단 고정 안내문(드릴다운 아님). 여긴 색 채우기 지적 대상이 아니라 그대로 둔다 */
#crPanel .cr-rule{background:#EEF2EF;border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:11px 14px;font-size:12.5px;color:var(--ink2);line-height:1.6}

/* ===== 전체 요약 ===== */
#crPanel .cr-total{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#crPanel .cr-t-item{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
#crPanel .cr-t-item i{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-bottom:6px}
#crPanel .cr-t-item b{display:block;font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#crPanel .cr-t-item b.pos{color:var(--pos)}
#crPanel .cr-t-item b.neg{color:var(--neg)}
#crPanel .cr-t-item b.zero{color:var(--zero)}
#crPanel .cr-t-diff em{display:block;font-size:13px;color:var(--muted);font-style:normal;margin-top:4px}

/* 커버리지 바 */
#crPanel .cr-cov{display:flex;flex-direction:column;gap:8px}
#crPanel .cr-cov-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
#crPanel .cr-cov-bar span{display:block;height:100%;background:var(--accent);transition:width .3s ease}
#crPanel .cr-cov-txt{font-size:12.5px;color:var(--ink2);margin:0}
#crPanel .cr-cov-txt b{color:var(--ink);font-weight:700}

/* ===== 그룹(판매가 채널 / 공급가 채널 …) ===== */
#crPanel .cr-group{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}

#crPanel .cr-g-head{width:100%;display:flex;align-items:center;gap:10px;
  border:0;background:var(--panel);padding:14px 16px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:inherit;color:inherit;transition:background .12s ease}
#crPanel .cr-g-head:hover{background:var(--surface-2)}
#crPanel .cr-g-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#crPanel .cr-g-name{font-size:15px;font-weight:700;color:var(--ink)}
#crPanel .cr-g-badge{font-size:12px;font-weight:600;color:var(--ink2);background:var(--surface-2);
  border:1px solid var(--line);padding:3px 10px;border-radius:999px}
/* 그룹 전체가 끝나면 초록 — 행 상태 배지 '확인 완료'(.cr-st.ok)와 같은 색을 쓴다. */
#crPanel .cr-g-badge.is-done{background:#E7F4EC;color:#1F8A4C;border-color:#BFE3CD;font-weight:700}
#crPanel .cr-g-nums{margin-left:auto;display:flex;gap:18px}
/* 헤더 합계는 접었을 때만 — 펼치면 표 맨 아래(cr-foot) 합계가 대신한다(중복 제거) */
#crPanel .cr-group[data-open="true"] .cr-g-nums{display:none}
/* 금액 길이가 달라도 어드민·원장·차이 열이 세로로 맞도록 고정 폭(십억대 13자 기준). */
#crPanel .cr-n{display:flex;flex-direction:column;align-items:flex-end;min-width:132px}
#crPanel .cr-n i{font-size:11px;color:var(--muted);font-style:normal}
#crPanel .cr-n b{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink);font-weight:700}
#crPanel .cr-n b.pos{color:var(--pos)}
#crPanel .cr-n b.neg{color:var(--neg)}
#crPanel .cr-n b.zero{color:var(--zero)}

/* 셰브론 — 정본 .d-chev(daily-table.css 전역 정의, 크기·색·여백 재정의 안 함).
   기본=아래(펼침), 접힘 상태에서만 -90deg 회전. */
#crPanel .cr-group[data-open="false"] .cr-g-head .d-chev{transform:rotate(-90deg)}
#crPanel .cr-row:not(.is-open) .d-chev{transform:rotate(-90deg)}
#crPanel .cr-g-head:hover .d-chev{color:var(--accent)}
#crPanel .cr-row:hover .d-chev{color:var(--accent)}

#crPanel .cr-g-body{padding:0 16px 14px;border-top:1px solid var(--line)}
#crPanel .cr-g-desc{font-size:13px;color:var(--ink2);margin:12px 0 8px;line-height:1.6}
#crPanel .cr-g-excl{font-size:12px;color:var(--muted);margin:0 0 10px}

/* ===== 채널 표 ===== */
#crPanel .cr-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
#crPanel .cr-tbl-wrap::-webkit-scrollbar{height:8px}
#crPanel .cr-tbl-wrap::-webkit-scrollbar-track{background:transparent}
#crPanel .cr-tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
#crPanel .cr-tbl{width:100%;border-collapse:collapse;font-size:13px}
#crPanel .cr-tbl th{font-size:11px;font-weight:700;color:var(--muted);padding:9px 10px;letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--thead-bg);text-align:left}
#crPanel .cr-tbl th.num{text-align:right}
#crPanel .cr-th-name{text-align:left}
#crPanel .cr-th-st{text-align:left;width:112px}
#crPanel .cr-tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
#crPanel .cr-tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#crPanel .cr-tbl .num.pos{color:var(--pos)}
#crPanel .cr-tbl .num.neg{color:var(--neg)}
#crPanel .cr-tbl .num.zero{color:var(--zero)}

/* 본문 줄무늬는 뺐다 — 채널 표는 채널행+상세행(cr-drow) 이 섞여 nth-child(even) 이
   화면상 채널 순서와 어긋나 특정 채널만 회색으로 보였다("복지몰만 다르다"는 오해). 행 구분선으로 충분. */

#crPanel .cr-row{cursor:pointer;transition:background .12s ease}
#crPanel .cr-row:hover{background:var(--hover)}
#crPanel .cr-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#crPanel .cr-row-flat{cursor:default}
#crPanel .cr-row-flat:hover{background:transparent}
/* 펼친 행 표시 — 배경색 대신 좌측 accent 바(3px) + 굵은 채널명 + 쉐브론 색.
   border-left 가 아니라 box-shadow:inset 로 그린다 — border-left 를 썼더니 아래 .cr-detail
   과 만나는 모서리에서 border-top(2px 회색)과 45도로 갈려(mitre) 세로선이 끊겨 보였다
   (사용자 지적, 확대 스크린샷 실측). box-shadow 는 border 렌더링에 관여하지 않아 가로선을
   깨끗이 가로지른다 — 그리고 레이아웃 폭을 전혀 차지하지 않으므로 padding 보정도 필요 없다
   (채널명 시작 x 좌표가 접힌 행·cr-row-flat 과 자동으로 같다). */
/* 좌측 세로 accent 바는 뺐다(사용자 요청) — 펼침 표시는 굵은 채널명·쉐브론 색으로만 */
#crPanel .cr-row.is-open td.cr-th-name{box-shadow:none}
#crPanel .cr-row.is-open .cr-c-name{font-weight:800}
#crPanel .cr-row.is-open .d-chev{color:var(--accent)}
/* 행의 아래 테두리는 끈다 — 경계선은 상세 쪽(.cr-detail 위 테두리) 하나로만 그어 겹선을 막는다 */
#crPanel .cr-row.is-open td{border-bottom:0}

/* 하위 항목(메타 세부 등) — 첫 칸 전체를 들여쓴다(제목·설명 같이 밀려야 어긋나지 않음) */
#crPanel .cr-row-child td.cr-th-name{padding-left:34px}

#crPanel .cr-c-name{font-weight:600;color:var(--ink)}
#crPanel .cr-c-sum{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:3px;margin-left:0}

/* 표 맨 아래 합계 행 — 채널 다 훑은 뒤 바로 합계 확인(그룹 헤더 합계는 접힘용으로 유지) */
#crPanel .cr-foot td{border-top:2px solid var(--line-strong);font-weight:700;color:var(--ink);padding-top:12px}
#crPanel .cr-foot .cr-foot-note{font-size:11px;font-weight:400;color:var(--muted)}

/* ===== 상세 — md 블록을 그대로 옮긴 영역. 배경은 흰색 그대로(부모 카드와 동일) =====
   구분은 전부 선으로: 좌측 accent 3px(위 펼친 행과 이어짐) + 위/아래 2px 중립선(시작·끝을
   또렷이 끊음). 안의 중첩 표·인용·코드도 배경 없이 테두리만으로 구획한다.
   좌측 바도 행과 마찬가지로 border-left 대신 box-shadow:inset — border-top·border-bottom과
   같은 모서리에서 만나면 대각선으로 갈려 끊겨 보이는 문제(사용자 지적)를 막는다. box-shadow는
   레이아웃 폭을 안 먹으므로 padding-left 를 3px(테두리였다면 먹었을 몫)만큼 늘려 원래
   들여쓰기(23px)를 그대로 유지한다. */
#crPanel .cr-drow > td{padding:0}
#crPanel .cr-detail{background:var(--panel);padding:18px 20px 20px 23px;
  border-top:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong)}
/* 블록 사이 간격 — 줄 간격(13.5px × 1.75 ≈ 23.6px)보다 넓어야 문단이 문단으로 보인다.
   14px 였을 땐 줄 사이보다 좁아 글이 통짜 벽으로 읽혔다(사용자 지적). */
#crPanel .cr-detail > * + *{margin-top:26px}
/* 표·목록은 앞 문단과 더 떼서 '자료 덩어리'로 분리 */
#crPanel .cr-detail > .cr-tbl-wrap + *, #crPanel .cr-detail > * + .cr-tbl-wrap{margin-top:30px}

/* 소제목(챕터 시작) — 상세 안에서 "① 결론", "② 유일한 차이" 같은 큰 구획을 가른다.
   위 여백을 크게 줘 앞 블록과 분리하고, 아래 2px 선으로 챕터 경계를 또렷이 한다. */
#crPanel .cr-b-h{font-size:14.5px;font-weight:800;color:var(--accent-deep);margin:0;
  padding-bottom:8px;border-bottom:2px solid var(--line-strong)}
#crPanel .cr-detail > .cr-b-h{margin-top:26px}
#crPanel .cr-detail > .cr-b-h:first-child{margin-top:0}
/* 더 작은 소제목 — 챕터 안의 보조 구획 */
#crPanel .cr-b-h5{font-size:13px;font-weight:700;color:var(--ink2);margin:0}
/* 본문 문단 */
/* 한 줄 길이 — 영문 45~75자(Bringhurst), WCAG 1.4.8 은 80자 이하. 한글은 전각이라
   같은 폭에 글자가 두 배로 들어가므로 절반으로 잡는다. 620px ÷ 13.5px ≈ 45자. */
#crPanel .cr-b-p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.75;max-width:620px}
#crPanel .cr-b-p strong{color:var(--ink);font-weight:700}
/* 목록 — 점 마커를 브랜드색으로 */
#crPanel .cr-b-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:620px}
#crPanel .cr-b-ul li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink2);line-height:1.7}
#crPanel .cr-b-ul li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
/* 인용/핵심 문장 — 배경 없이 좌측 accent 선만으로 구분(고전적 블록인용 스타일) */
#crPanel .cr-b-quote{background:none;border-left:3px solid var(--accent);
  padding:4px 0 4px 16px;font-size:13.5px;color:var(--ink2);line-height:1.7}
#crPanel .cr-b-quote strong{color:var(--accent-deep);font-weight:700}
/* 계산식/수식 — 배경 없이 테두리만. 표처럼 자기 안에서만 가로 스크롤(페이지 안 밀림) */
#crPanel .cr-b-code{display:block;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--ink);overflow-x:auto;white-space:pre}

/* 상세 안 중첩 표 — 배경 없이 테두리(선)만으로 구획. 표끼리도 테두리로 구분된다.
   테두리는 감싸는 div(.cr-tbl-wrap)가 아니라 table 자신에 준다 — wrap 에 주면 wrap 의
   1px 테두리만큼 표 자신의 좌우 끝이 소제목·인용보다 1px 안쪽으로 들어가 버린다(사용자
   실측 지적: 소제목 86.5 vs 표 87.5). table 자신의 border-box 에 테두리를 포함시키면
   표의 좌우 끝 x 좌표가 소제목·인용·문단과 정확히 같아진다. 대신 둥근 모서리는 포기한다
   (border-collapse:collapse 표에서 border-radius 는 브라우저마다 들쭉날쭉해 신뢰 못 함). */
/* 폭은 내용에 맞춘다(width:auto). 100% 였을 땐 2열짜리 표에서 항목과 숫자가 화면 양 끝으로
   갈라져 눈이 가로로 왔다갔다 해야 했다(사용자 지적). 열이 많은 표는 알아서 넓어진다. */
#crPanel .cr-d-tbl{width:auto;max-width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line)}
#crPanel .cr-d-tbl th{font-size:11.5px;font-weight:700;color:var(--muted);padding:9px 14px;letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);background:var(--thead-bg);text-align:left;white-space:nowrap}
#crPanel .cr-d-tbl th.num, #crPanel .cr-d-tbl td.num{text-align:right}
#crPanel .cr-d-tbl td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink2)}
/* 숫자 칸은 자리수가 흔들리지 않게 고정폭 숫자 */
#crPanel .cr-d-tbl td.num{font-variant-numeric:tabular-nums}
#crPanel .cr-d-tbl tbody tr:last-child td{border-bottom:0}
#crPanel .cr-d-tbl tbody tr:nth-child(even) td{background:var(--zebra)}

/* ===== 상세 안의 세부 표(지점별) — 바깥 채널 표와 같은 6열 구조 =====
   금액 하나만 보이던 옛 .cr-sub 카드를 표로 바꿨다(어드민·원장·차이가 다 보여야 대조가 된다). */
#crPanel .cr-subtbl{width:100%;margin-top:22px;border-collapse:collapse;
  border:1px solid var(--line);font-size:13px}
#crPanel .cr-subtbl th{font-size:11.5px;font-weight:700;color:var(--muted);padding:9px 12px;
  background:var(--thead-bg);border-bottom:1px solid var(--line-strong);text-align:left;white-space:nowrap}
#crPanel .cr-subtbl th.num{text-align:right}
#crPanel .cr-subtbl td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink2);
  vertical-align:top}
#crPanel .cr-subtbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#crPanel .cr-subtbl tbody tr:last-child td{border-bottom:0}
#crPanel .cr-sub-row.has{cursor:pointer}
#crPanel .cr-sub-row.has:hover{background:var(--zebra)}
#crPanel .cr-sub-row .cr-c-name{font-weight:600;color:var(--ink)}
#crPanel .cr-sub-row .cr-c-sum{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);
  line-height:1.55;max-width:520px}
/* 세부 행의 상세 — 배경 없이 왼쪽 선으로만 구분.
   (2026-08-06 회색 배경(--surface-2) 제거 — 상위 드릴다운(.cr-detail)과 같은 지적:
    "드릴다운에 꼭 배경색 채워야 해?" 색 채우기 대신 좌측 accent 선만 남긴다.) */
#crPanel .cr-sub-drow > td{padding:0}
#crPanel .cr-sub-d{padding:16px 18px;box-shadow:inset 3px 0 0 var(--accent)}

#crPanel .cr-src{margin-top:12px}
#crPanel .cr-src summary{font-size:12px;color:var(--muted);cursor:pointer}

/* ===== 상태 배지 ===== */
#crPanel .cr-st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 8px;
  border-radius:999px;white-space:nowrap}
#crPanel .cr-st.ok{background:#E7F4EC;color:#1F8A4C}
#crPanel .cr-st.fixed{background:#E8F1F5;color:#3E6B8A}
#crPanel .cr-st.warn{background:#FBF1E0;color:#B7791F}
#crPanel .cr-st.checking{background:#E8EEF5;color:#3E5C8A}
#crPanel .cr-st.todo{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
#crPanel .cr-st.na{background:var(--surface-2);color:var(--muted)}

/* 가운데 정렬 셀(판정 등) */
#crPanel .ctr{text-align:center}

/* ===== 반응형 — 표는 자기 안에서만 가로 스크롤. 페이지 본문은 절대 밀리지 않는다 ===== */
@media (max-width:720px){
  #crPanel .cr-total{grid-template-columns:1fr}
  #crPanel .cr-g-head{flex-wrap:wrap}
  #crPanel .cr-g-nums{margin-left:0;width:100%;display:flex;flex-direction:column;gap:3px}
  #crPanel .cr-n{min-width:0;flex-direction:row;justify-content:space-between;align-items:baseline;width:100%}
  #crPanel .cr-n i{font-size:11px}
  #crPanel .cr-n b{font-size:13px}
  #crPanel .cr-tbl{min-width:640px}
  #crPanel .cr-d-tbl{min-width:480px}
  #crPanel .cr-detail{padding:14px}
}

@media (prefers-reduced-motion: reduce){ #crPanel *{transition:none !important;animation:none !important} }

/* end of channel-recon.css */

/* ── 상세 안의 세부 항목 (메타의 자사·현대·오늘의집·GS·공구·해킹) ─────────────
   별도 행으로 두면 그룹 합계에 두 번 잡혀서, 상위 항목을 펼쳤을 때 그 안에 둔다.
   각 세부도 다시 펼쳐 자기 상세를 본다. */
#crPanel .cr-subs{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
#crPanel .cr-sub{padding:9px 2px;border-bottom:1px solid var(--line2,#f0f1f0)}
#crPanel .cr-sub:last-child{border-bottom:0}
#crPanel .cr-sub.has{cursor:pointer}
#crPanel .cr-sub.has:hover .cr-sub-name{color:var(--accent)}
#crPanel .cr-sub-h{display:flex;align-items:center;gap:7px}
/* 셰브론 방향은 표 행(.cr-row)과 같은 규칙 — 접힘 ▸(-90deg), 펼침 ▾(0deg). */
#crPanel .cr-sub-chev{display:inline-flex;justify-content:center;width:12px;flex:0 0 12px;color:var(--muted);
  transform:rotate(-90deg);transition:transform .14s}
#crPanel .cr-sub-chev svg{width:12px;height:12px}
#crPanel .cr-sub[data-open="true"] .cr-sub-chev{transform:rotate(0deg)}
#crPanel .cr-sub-name{font-weight:700;font-size:12.5px;color:var(--ink)}
#crPanel .cr-sub-st{font-size:11px}
#crPanel .cr-sub-num{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--ink)}
#crPanel .cr-sub-sum{margin:3px 0 0 19px;/* 셰브론 12 + gap 7 */font-size:11.5px;color:var(--muted);line-height:1.55}
#crPanel .cr-sub-d{margin:10px 0 4px 19px;padding-left:12px;border-left:2px solid var(--line)}

/* 계정과목 배지 — 비용 탭(채널 축)에서 한 채널 안의 줄을 계정으로 가른다.
   이름을 고치지 않고 배지만 얹는다(롤백 시 데이터 손 안 대도 됨). */
#crPanel .cr-acct{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:11px;font-weight:600;color:var(--muted);vertical-align:2px;white-space:nowrap}