/* =============================================================
   계좌관리 — 맥 고밀도형 (사용자 2026-10-30 "1+2+8 시작해")
   범위: #bank_accounts-content 안쪽만. 다른 세션이 승인받은 '고밀도형' 규칙을 따른다
   (머리 54px · 제목 19px · 도구 28px · 표 행 28px / 머리 31px · 머리카락 선 · 줄무늬, 휴대폰 44px).
   조회 · 동기화 · 엑셀 · 매칭 · 리뷰 페이백 동작과 숫자 계산은 그대로(모양만).
   입금 초록 · 출금 빨강 · 매칭 상태색은 뜻이 있는 색이라 글자색으로 유지.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */
@media screen{
html #bank_accounts-content{ font-family:var(--ui-font); color:var(--ui-text-1); font-size:var(--ui-text-body) }
html #bank_accounts-content > .max-w-6xl{ max-width:none !important; margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; border:0 !important }

/* ── 머리: 아이콘 상자 없이 제목 19px + 설명 한 줄 ── */
html #bank_accounts-content > .max-w-6xl > .flex:first-child{ margin:0 0 10px !important; padding:4px 0 0 !important; min-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important }
html #bank_accounts-content > .max-w-6xl > .flex:first-child h2{ font-size:19px !important; line-height:26px !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:var(--ui-tracking-tight) !important; color:var(--ui-text-1) !important; gap:0 !important }
html #bank_accounts-content > .max-w-6xl > .flex:first-child h2 > span{ display:none !important }
html #bank_accounts-content > .max-w-6xl > .flex:first-child p{ margin:2px 0 0 !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }

/* ── 아래 탭 4개 → 맥 세그먼트 ── */
html #bank_accounts-content > .max-w-6xl > .flex:nth-child(2){
  display:inline-flex !important; gap:2px !important; padding:2px !important; margin:0 0 12px !important; border:0 !important;
  background:var(--ui-fill) !important; border-radius:var(--ui-radius-control) !important; box-shadow:none !important; flex-wrap:nowrap !important; max-width:100%; overflow-x:auto
}
html #bank_accounts-content > .max-w-6xl > .flex:nth-child(2) > button:not(.hidden){
  display:inline-flex !important; align-items:center; height:24px !important; padding:0 12px !important; margin:0 !important; border:0 !important; border-radius:5px !important;
  background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; box-shadow:none !important; white-space:nowrap
}
html #bank_accounts-content > .max-w-6xl > .flex:nth-child(2) > button i{ display:none !important }
html #bank_accounts-content > .max-w-6xl > .flex:nth-child(2) > button.text-blue-600,
html #bank_accounts-content > .max-w-6xl > .flex:nth-child(2) > button[class*="border-blue-500"]{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }

/* ── 조회 조건: 큰 카드 → 흰 바탕 한 묶음, 라벨은 작은 회색, 입력 28px ── */
html #bank_accounts-content #bank-panel-txn > div:first-child{
  background:var(--ui-surface) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) !important; padding:10px 12px !important; margin:0 0 10px !important
}
html #bank_accounts-content #bank-panel-txn > div:first-child > p:first-child{ display:none !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > .grid{ display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:8px 10px !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > .grid > div{ flex:0 0 auto }
html #bank_accounts-content #bank-panel-txn > div:first-child > .grid > div:first-child{ flex:1 1 220px; max-width:300px }
html #bank_accounts-content #bank-panel-txn > div:first-child label{ display:block; margin:0 0 3px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; letter-spacing:0 !important; text-transform:none !important }
html #bank_accounts-content #bank-panel-txn > div:first-child label i{ display:none !important }
html #bank_accounts-content #bank-panel-txn > div:first-child label span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #bank_accounts-content #bank-panel-txn > div:first-child :is(select,input){
  height:28px !important; min-height:28px !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important;
  background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-family:var(--ui-font) !important
}
html #bank_accounts-content #bank-panel-txn > div:first-child :is(select,input):focus{ outline:none !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #bank_accounts-content #bank-search-btn{
  height:28px !important; min-height:28px !important; padding:0 18px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:none !important;
  background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; width:auto !important
}
html #bank_accounts-content #bank-search-btn:hover{ background:var(--ui-accent-hover) !important }
html #bank_accounts-content #bank-search-btn i{ display:none !important }
/* 기간 빠른 선택 · 동기화 · 엑셀 줄 */
html #bank_accounts-content #bank-panel-txn > div:first-child > div.flex{ margin-top:8px !important; gap:8px !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > div.flex button{
  height:24px !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important;
  background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important
}
html #bank_accounts-content #bank-panel-txn > div:first-child > div.flex button:hover{ background:var(--ui-fill-subtle) !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > div.flex button i{ color:var(--ui-text-2) !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > p:last-child{ margin:6px 0 0 !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important; line-height:16px }
html #bank_accounts-content #bank-panel-txn > div:first-child > p:last-child i{ display:none !important }
html #bank_accounts-content #bank-panel-txn > div:first-child > p:last-child span{ color:var(--ui-text-2) !important }

/* ── 요약 5칸: 큰 색 카드 → 한 줄 띠(머리카락 칸막이), 숫자만 뜻 색 ── */
html #bank_accounts-content #bank-summary-wrap:not(.hidden){
  display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:0 !important; margin:0 0 10px !important;
  background:var(--ui-surface) !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) !important; overflow:hidden
}
html #bank_accounts-content #bank-summary-wrap > div{
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:7px 12px !important; text-align:left !important;
  display:flex; flex-direction:column; justify-content:center; min-height:48px
}
html #bank_accounts-content #bank-summary-wrap > div + div{ box-shadow:inset .5px 0 0 var(--ui-line) !important }
html #bank_accounts-content #bank-summary-wrap > div > div:first-child{ display:none !important }
html #bank_accounts-content #bank-summary-wrap > div > p:first-of-type{ margin:0 !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important; text-transform:none !important; letter-spacing:0 !important }
html #bank_accounts-content #bank-summary-wrap > div > p:nth-of-type(2){ margin:1px 0 0 !important; font-size:var(--ui-text-title3) !important; line-height:20px; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums; color:var(--ui-text-1) !important }
html #bank_accounts-content #bank-summary-wrap #bank-sum-deposit{ color:var(--ui-success) !important }
html #bank_accounts-content #bank-summary-wrap #bank-sum-withdraw{ color:var(--ui-danger) !important }
html #bank_accounts-content #bank-summary-wrap #bank-sum-scrapdt{ margin:0 !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }

/* ── 걸러보기: 알약 → 세그먼트 · 검색 28px ── */
html #bank_accounts-content #bank-filter-wrap:not(.hidden){ display:flex !important; gap:8px !important; margin:0 0 8px !important; align-items:center }
html #bank_accounts-content #bank-filter-wrap > div:first-child{ gap:2px !important; padding:2px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; box-shadow:none !important }
html #bank_accounts-content #bank-filter-wrap > div:first-child button{
  height:24px !important; padding:0 12px !important; border:0 !important; border-radius:5px !important; box-shadow:none !important;
  background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important
}
html #bank_accounts-content #bank-filter-wrap > div:first-child button.bg-blue-600{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #bank-filter-wrap > div:first-child button i{ display:none !important }
html #bank_accounts-content #bank-txn-search{ height:28px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important; box-shadow:none !important; font-size:var(--ui-text-body) !important; max-width:360px }
html #bank_accounts-content #bank-txn-search:focus{ box-shadow:var(--ui-focus-ring) !important; outline:none }
html #bank_accounts-content #bank-filter-wrap > .relative{ flex:0 1 360px !important }
html #bank_accounts-content #bank-filter-wrap > .relative i{ color:var(--ui-text-2) !important }
html #bank_accounts-content #bank-txn-count{ margin-left:auto; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* ── 거래 표: 행 28px · 머리 31px · 머리카락 선 · 줄무늬, 숫자 고정폭 ── */
html #bank_accounts-content #bank-txn-wrap > div{ background:var(--ui-surface) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) !important }
html #bank_accounts-content #bank-txn-wrap table{ font-family:var(--ui-font) !important; border-collapse:separate !important; border-spacing:0 !important }
html #bank_accounts-content #bank-txn-wrap thead{ background:transparent !important; border:0 !important }
html #bank_accounts-content #bank-txn-wrap th{
  height:31px !important; padding:0 10px !important; background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; box-shadow:inset 0 -.5px var(--ui-line) !important; border:0 !important
}
html #bank_accounts-content #bank-txn-wrap tbody{ border:0 !important }
html #bank_accounts-content #bank-txn-wrap tbody tr{ background:var(--ui-surface) !important; border:0 !important }
html #bank_accounts-content #bank-txn-wrap tbody tr:nth-child(even){ background:var(--ui-surface-alt) !important }
html #bank_accounts-content #bank-txn-wrap tbody tr:hover{ background:var(--ui-fill-subtle) !important }
html #bank_accounts-content #bank-txn-wrap tbody td{
  height:28px !important; padding:0 10px !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important;
  font-size:var(--ui-text-body) !important; line-height:18px !important; white-space:nowrap !important; color:var(--ui-text-1) !important
}
html #bank_accounts-content #bank-txn-wrap tbody td.font-mono, html #bank_accounts-content #bank-txn-wrap tfoot td{ font-family:var(--ui-font) !important; font-variant-numeric:tabular-nums }
html #bank_accounts-content #bank-txn-wrap tbody td.text-gray-400, html #bank_accounts-content #bank-txn-wrap tbody td.text-gray-500{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank_accounts-content #bank-txn-wrap tbody td.text-emerald-700{ color:var(--ui-success) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #bank-txn-wrap tbody td.text-red-600{ color:var(--ui-danger) !important; font-weight:var(--ui-weight-semibold) !important }
/* 구분: 색 알약 → 색 글자 */
html #bank_accounts-content #bank-txn-wrap tbody td > span.rounded{ background:transparent !important; padding:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #bank-txn-wrap tbody td > span.rounded.text-emerald-700{ color:var(--ui-success) !important }
html #bank_accounts-content #bank-txn-wrap tbody td > span.rounded.text-red-600{ color:var(--ui-danger) !important }
/* 적요 · 메모: 한 줄, 메모는 회색 작은 글자 */
html #bank_accounts-content #bank-txn-wrap tbody td.max-w-xs{ max-width:none !important; overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #bank-txn-wrap tbody td.max-w-xs > .font-medium{ font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #bank-txn-wrap tbody td.max-w-xs > span.bg-gray-100{ background:transparent !important; padding:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 매칭: 알약 테두리 없이 한 줄 */
html #bank_accounts-content #bank-txn-wrap tbody td span.rounded-full{ border:0 !important; background:transparent !important; padding:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #bank-txn-wrap tbody td span.rounded-full.text-emerald-700{ color:var(--ui-success) !important }
html #bank_accounts-content #bank-txn-wrap tbody td span.rounded-full.text-amber-700{ color:var(--ui-warning) !important }
html #bank_accounts-content #bank-txn-wrap tbody td span.rounded-full i{ color:inherit !important; opacity:.8 }
html #bank_accounts-content #bank-txn-wrap tbody td span.text-blue-500{ color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #bank-txn-wrap tfoot{ background:var(--ui-surface-alt) !important; border:0 !important }
html #bank_accounts-content #bank-txn-wrap tfoot td{ height:32px !important; padding:0 10px !important; font-size:var(--ui-text-footnote) !important; box-shadow:inset 0 .5px var(--ui-line) !important }
html #bank_accounts-content #bank-txn-wrap tfoot .text-emerald-700{ color:var(--ui-success) !important }
html #bank_accounts-content #bank-txn-wrap tfoot :is(.text-red-500,.text-red-600){ color:var(--ui-danger) !important }
html #bank_accounts-content #bank-txn-wrap tfoot .text-blue-600{ color:var(--ui-accent-text) !important }
}

/* ── 휴대폰: 조회 칸 두 줄 · 요약 띠 옆으로 밀기 · 표는 행 44px, 첫 칸(날짜) 고정, 옆으로 밀기 ── */
@media screen and (max-width:768px){
html #bank_accounts-content #bank-panel-txn > div:first-child > .grid > div{ flex:1 1 calc(50% - 5px) !important; max-width:none !important }
html #bank_accounts-content #bank-panel-txn > div:first-child :is(select,input){ height:36px !important; min-height:36px !important; width:100% !important }
html #bank_accounts-content #bank-search-btn{ height:36px !important; width:100% !important }
html #bank_accounts-content #bank-summary-wrap:not(.hidden){ display:flex !important; overflow-x:auto; scroll-snap-type:x proximity }
html #bank_accounts-content #bank-summary-wrap > div{ flex:0 0 auto; min-width:120px; scroll-snap-align:start }
html #bank_accounts-content #bank-filter-wrap > .relative{ flex:1 1 100% !important; order:3 }
html #bank_accounts-content #bank-txn-search{ height:36px !important; max-width:none }
html #bank_accounts-content #bank-txn-wrap tbody td{ height:44px !important }
html #bank_accounts-content #bank-txn-wrap :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:inherit }
html #bank_accounts-content #bank-txn-wrap tbody tr:nth-child(odd) td:first-child{ background:var(--ui-surface) !important }
html #bank_accounts-content #bank-txn-wrap tbody tr:nth-child(even) td:first-child{ background:var(--ui-surface-alt) !important }
html #bank_accounts-content #bank-txn-wrap th:first-child{ z-index:2 }
}

/* =============================================================
   2. 나머지 탭(수집 작업내역 · 예금주 조회 · 리뷰 페이백) + 여는 창(입금 → 계약 매칭 · 엑셀 업로드)
   사용자 2026-10-30 "3". 모양만 — 버튼 · 입력 id · 누르면 하는 일 · 금액 글자색(입금 파랑/초록 · 출금 빨강 · 경고 주황)은 그대로.
   ============================================================= */
@media screen{
/* 공통 카드: 큰 둥근 테두리 카드 → 흰 묶음(그림자 한 겹), 머리 띠 → 머리카락 선 */
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder,#bank-panel-payback) :is(.rounded-2xl,.rounded-xl).bg-white{
  border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) !important; background:var(--ui-surface) !important
}
html #bank_accounts-content #bank-panel-holder .rounded-2xl > div:first-child{ padding:10px 14px !important; background:transparent !important; border-bottom:0 !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #bank_accounts-content #bank-panel-holder .rounded-2xl > div:first-child > span, html #bank_accounts-content #bank-panel-holder .rounded-2xl > div:first-child > div > span:first-child{ display:none !important }
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder,#bank-panel-payback) :is(h4,p.font-bold){ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #bank_accounts-content #bank-panel-holder .rounded-2xl > .p-5{ padding:12px 14px !important }
/* 안내 띠(파랑 · 주황 상자) → 회색 글 한 덩이 */
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder) :is(.bg-blue-50,.bg-amber-50).border{
  background:var(--ui-fill-subtle) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; padding:10px 12px !important
}
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder) :is(.bg-blue-50,.bg-amber-50).border :is(p,div,li,span,strong){ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder) :is(.bg-blue-50,.bg-amber-50).border :is(strong,p.font-semibold){ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder) :is(.bg-blue-50,.bg-amber-50).border i{ color:var(--ui-text-2) !important }
/* 라벨 · 입력 · 단추 */
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) label{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) label i{ display:none !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) :is(input[type="text"],select){
  height:28px !important; min-height:28px !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important;
  background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important
}
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) :is(input,select):focus{ outline:none !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
/* 채운 파란/보라 단추 → 맥 파랑(탭마다 하나만 채움: 단건 '예금주 확인'), 나머지는 흰 단추 */
html #bank_accounts-content #holder-check-btn{ height:28px !important; padding:0 16px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:none !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #holder-check-btn i{ display:none !important }
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder,#bank-panel-payback) button:is(.bg-violet-600,.bg-blue-600,.border-dashed,.bg-white,.bg-emerald-50,.border):not(#holder-check-btn){
  height:24px !important; min-height:24px !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important;
  background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important
}
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder,#bank-panel-payback) button:is(.bg-violet-600,.bg-blue-600,.border-dashed,.bg-white,.bg-emerald-50,.border):not(#holder-check-btn) i{ color:var(--ui-text-2) !important }
html #bank_accounts-content :is(#bank-panel-jobs,#bank-panel-holder,#bank-panel-payback) button:is(.bg-violet-600,.bg-blue-600,.border-dashed,.bg-white,.bg-emerald-50,.border):not(#holder-check-btn):hover{ background:var(--ui-fill-subtle) !important }
/* 리뷰 페이백 '전체 / 계약 미연결만' → 세그먼트 모양(고른 쪽 흰 칸) */
html #bank_accounts-content #bank-panel-payback button.border-blue-300{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }
/* 표: 행 28px(두 줄 칸은 내용만큼) · 머리 31px · 머리카락 선 */
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) table{ font-family:var(--ui-font) !important; border-collapse:separate !important; border-spacing:0 !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) thead, html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) thead tr{ background:transparent !important; border:0 !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) th{ height:31px !important; padding:0 10px !important; background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important; white-space:nowrap }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) tbody tr{ border:0 !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) tbody td{ height:28px !important; padding:4px 10px !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important; font-size:var(--ui-text-body) !important; line-height:18px !important }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) tbody td .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
html #bank_accounts-content #bank-panel-payback :is(.text-gray-400,.text-slate-400){ color:var(--ui-text-2) !important }
html #bank_accounts-content #bank-panel-payback .text-gray-300{ color:var(--ui-text-3) !important }
html #bank_accounts-content #bank-panel-payback .font-bold{ font-weight:var(--ui-weight-semibold) !important }
/* 페이백 요약 4칸: 큰 카드 → 같은 흰 칸, 글자 크기만 정리(경고 주황 · 빨강 숫자는 그대로) */
html #bank_accounts-content #payback-wrap > .grid > div{ padding:8px 12px !important }
html #bank_accounts-content #payback-wrap > .grid > div > p:first-child{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #bank_accounts-content #payback-wrap > .grid > div > p.text-xl{ font-size:var(--ui-text-title3) !important; line-height:20px; font-weight:var(--ui-weight-semibold) !important; margin-top:1px !important }
html #bank_accounts-content #payback-wrap > .grid{ gap:8px !important; margin-bottom:10px !important }
html #bank_accounts-content #payback-wrap > div{ margin-bottom:10px !important }
html #bank_accounts-content #payback-wrap > div.p-5{ padding:12px 14px !important }
html #bank_accounts-content #payback-wrap .px-5.pt-4{ padding:10px 14px 8px !important }
/* 알약 꼬리표(계약 미연결 등) → 테두리 없는 작은 글자, 뜻 색 유지 */
html #bank_accounts-content #bank-panel-payback span.rounded-full{ background:transparent !important; padding:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #bank-panel-payback span.rounded-full.text-amber-700{ color:var(--ui-warning) !important }
/* 수집 작업내역 카드 → 한 줄 목록 */
html #bank_accounts-content #bank-jobs-wrap > .space-y-3{ background:var(--ui-surface); border-radius:var(--ui-radius-group); box-shadow:var(--ui-elev-raised); overflow:hidden }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > *{ margin:0 !important }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div{ border-radius:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important; padding:6px 14px !important; min-height:var(--ui-row) }
html #bank_accounts-content #bank-jobs-wrap .w-9.h-9{ display:none !important }
html #bank_accounts-content #bank-jobs-wrap span.rounded-full{ background:transparent !important; padding:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #bank-jobs-wrap span.rounded-full.text-emerald-700{ color:var(--ui-success) !important }
html #bank_accounts-content #bank-jobs-wrap span.rounded-full.text-amber-700{ color:var(--ui-warning) !important }
html #bank_accounts-content #bank-jobs-wrap span.rounded-full.text-blue-700{ color:var(--ui-accent-text) !important }
html #bank_accounts-content #bank-jobs-wrap p.font-mono{ font-family:var(--ui-font-mono) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important }
/* 빈 상태 큰 아이콘 → 작은 회색 글 */
html #bank_accounts-content :is(#bank-jobs-wrap,#holder-result-wrap,#bank-txn-wrap) .flex-col.items-center > i{ font-size:22px !important; color:var(--ui-text-3) !important; margin-bottom:6px !important }
html #bank_accounts-content :is(#bank-jobs-wrap,#holder-result-wrap,#bank-txn-wrap) .flex-col.items-center{ padding-top:28px !important; padding-bottom:28px !important; border-color:var(--ui-line) !important }
html #bank_accounts-content :is(#bank-jobs-wrap,#holder-result-wrap,#bank-txn-wrap) .flex-col.items-center p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* ── 입금 → 계약 매칭 창: 맥 시트(흰 머리 · 입금 정보는 회색 칸 · 결과는 한 줄 목록 · 채운 단추는 검색 하나) ── */
html #bank-contract-match-modal > .absolute{ background:var(--ui-scrim) !important; backdrop-filter:none !important }
html #bank-contract-match-modal > .relative{ border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) !important; max-width:640px !important }
html #bank-contract-match-modal > .relative > div:first-child{ background:var(--ui-surface) !important; padding:14px 16px 12px !important; border-bottom:0 !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #bank-contract-match-modal h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #bank-contract-match-modal h3 i{ display:none !important }
html #bank-contract-match-modal > .relative > div:first-child .bg-emerald-50{ background:var(--ui-fill-subtle) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; padding:8px 12px !important; margin-top:10px !important }
html #bank-contract-match-modal > .relative > div:first-child .bg-emerald-50 span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #bank-contract-match-modal > .relative > div:first-child .bg-emerald-50 p{ font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #bank-contract-match-modal > .relative > div:first-child .bg-emerald-50 p.text-emerald-700{ color:var(--ui-success) !important }
html #bank-contract-match-modal #bank-cm-search{ height:28px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important; box-shadow:none !important; font-size:var(--ui-text-body) !important }
html #bank-contract-match-modal #bank-cm-search:focus{ box-shadow:var(--ui-focus-ring) !important }
html #bank-contract-match-modal #bank-cm-search + button{ height:28px !important; padding:0 14px !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; box-shadow:none !important }
html #bank-contract-match-modal p.text-\[10px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div{ border:0 !important; border-radius:var(--ui-radius-row) !important; box-shadow:inset 0 -.5px var(--ui-line) !important; margin:0 !important; padding:6px 8px !important }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div:hover{ background:var(--ui-fill-subtle) !important }
html #bank-contract-match-modal #bank-cm-results .font-bold{ font-weight:var(--ui-weight-semibold) !important }
html #bank-contract-match-modal #bank-cm-results span.rounded-full{ background:transparent !important; padding:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #bank-contract-match-modal #bank-cm-results span.rounded-full.text-emerald-700{ color:var(--ui-success) !important }
html #bank-contract-match-modal #bank-cm-results span.rounded-full.text-amber-700{ color:var(--ui-warning) !important }
html #bank-contract-match-modal #bank-cm-results span.rounded-full.text-gray-500{ color:var(--ui-text-2) !important }
html #bank-contract-match-modal #bank-cm-results .text-indigo-700{ color:var(--ui-text-1) !important }
html #bank-contract-match-modal #bank-cm-results .text-\[10px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #bank-contract-match-modal #bank-cm-results .text-\[10px\] i{ display:none !important }
html #bank-contract-match-modal #bank-cm-matched .bg-blue-50{ background:var(--ui-accent-tint) !important; border:0 !important; border-radius:var(--ui-radius-group) !important }
html #bank-contract-match-modal #bank-cm-matched .bg-white{ border:0 !important; box-shadow:var(--ui-elev-raised) !important; border-radius:var(--ui-radius-row) !important }
html #bank-contract-match-modal #bank-cm-matched button{ border:0 !important; background:transparent !important; color:var(--ui-danger) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-footnote) !important }
html #bank-contract-match-modal #bank-cm-matched button:hover{ background:var(--ui-danger-tint) !important }
html #bank-contract-match-modal > .relative > div:last-child{ background:var(--ui-surface) !important; border-top:0 !important; box-shadow:inset 0 .5px var(--ui-line); padding:10px 16px !important }
html #bank-contract-match-modal > .relative > div:last-child button{ height:28px !important; padding:0 16px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important; background:var(--ui-surface) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }

/* ── 엑셀 업로드 창: 맥 시트, 놓는 칸은 점선 회색, 저장 단추만 파랑 ── */
html #bank-import-modal > div{ border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) !important; max-width:640px !important }
html #bank-import-modal > div > div:first-child{ background:var(--ui-surface) !important; border-bottom:0 !important; box-shadow:inset 0 -.5px var(--ui-line); padding:14px 16px 12px !important }
html #bank-import-modal h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #bank-import-modal h3 i{ display:none !important }
html #bank-import-modal h3 + p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank-import-modal label.block{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #bank-import-modal input[type="text"]{ height:28px !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body) !important }
html #bank-import-modal input[type="text"]:focus{ outline:none !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #bank-import-modal label[for="bi-file"]{ border:1.5px dashed var(--ui-line-dashed) !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important; padding:20px 12px !important }
html #bank-import-modal label[for="bi-file"]:hover{ background:var(--ui-accent-tint) !important; border-color:var(--ui-accent) !important }
html #bank-import-modal label[for="bi-file"] i{ color:var(--ui-text-3) !important; font-size:22px !important }
html #bank-import-modal label[for="bi-file"] span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank-import-modal #bi-filename{ color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank-import-modal > div > div:last-child{ background:var(--ui-surface) !important; border-top:0 !important; box-shadow:inset 0 .5px var(--ui-line); padding:10px 16px !important }
html #bank-import-modal > div > div:last-child button{ height:28px !important; padding:0 16px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important; background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #bank-import-modal > div > div:last-child #bi-save-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-weight:var(--ui-weight-semibold) !important }
html #bank-import-modal > div > div:last-child #bi-save-btn i{ display:none !important }
html #bank-import-modal table th{ background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
}
@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap > .grid{ display:flex !important; overflow-x:auto }
html #bank_accounts-content #payback-wrap > .grid > div{ flex:0 0 auto; min-width:150px }
/* 휴대폰 페이백 표: 작업 이름이 한 글자씩 세로로 쪼개지던 것 → 칸은 한 줄, 표는 옆으로 밀기, 첫 칸(작업 · 계약 · 번호) 고정 */
html #bank_accounts-content #payback-wrap table{ min-width:720px }
html #bank_accounts-content #payback-wrap :is(th,td){ white-space:nowrap }
html #bank_accounts-content #payback-wrap :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:var(--ui-surface) !important; max-width:150px; overflow:hidden; text-overflow:ellipsis; box-shadow:inset -.5px 0 var(--ui-line), inset 0 -.5px var(--ui-line) !important }
html #bank_accounts-content #payback-wrap th:first-child{ background:var(--ui-surface-alt) !important; z-index:2 }
html #bank_accounts-content #payback-wrap td:first-child > div{ overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content :is(#bank-panel-holder,#bank-panel-payback) :is(input[type="text"],select), html #bank_accounts-content #holder-check-btn{ height:36px !important; min-height:36px !important }
html #bank-contract-match-modal :is(input[type="text"],button), html #bank-import-modal :is(input[type="text"],button){ min-height:36px }
html #bank-contract-match-modal > .relative{ margin:auto 0 0 !important; max-height:90vh !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
}

/* =============================================================
   3. 행당 한 줄 (사용자 2026-10-30 "행당 한줄 만들어 고밀도 디자인이 적용되어야해")
   두세 줄로 쌓이던 칸(작업명 + 광고주, 계약번호 + 계약 이름 + [계약 잇기], 추천 계약 카드, 금액 + 건수)을
   같은 줄에 이어 붙임 — 둘째 값은 회색 작은 글자. 칸 안 글자 · 단추 · 누르면 하는 일은 그대로.
   추천 계약은 '번호 · 점수 · 남은 상품값' 한 줄 칩, 계약 이름 · 이유는 마우스를 올리면(title).
   계약을 고르는 펼침 줄(검색칸)은 여러 줄 그대로.
   ============================================================= */
@media screen{
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td{ height:28px !important; padding:0 10px !important; white-space:nowrap !important; vertical-align:middle !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td :is(div,p){ display:inline !important; margin:0 !important; max-width:none }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td :is(div,p) + :is(div,p,span,button), html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td > * + *{ margin-left:8px !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td :is(.text-\[11px\],.text-\[10px\]){ font-size:var(--ui-text-footnote) !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .truncate{ display:inline-block !important; max-width:200px; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:first-child{ max-width:260px; overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td > button.mt-1{ margin-top:0 !important }
/* 추천 계약 카드 → 한 줄 칩 */
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > p{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button{
  display:inline-flex !important; align-items:center; gap:6px; width:auto !important; max-width:none !important; height:22px; padding:0 8px !important; margin:0 0 0 6px !important;
  border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; vertical-align:middle
}
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button.border-blue-300{ box-shadow:var(--ui-elev-control), inset 0 0 0 1px var(--ui-accent) !important }
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button:hover{ background:var(--ui-accent-tint) !important }
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button > span{ display:inline-flex !important; gap:6px; margin:0 !important; width:auto !important; max-width:none !important; flex:none !important; white-space:nowrap !important }
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button > span > *{ margin:0 !important; width:auto !important }
/* 위 .truncate 줄(무게가 ID 3개)보다 세게 — 같은 :has 사슬을 붙임 */
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button > span:nth-child(2){ display:none !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button > span:nth-child(4){ display:none !important }
/* 한 줄에 들어가게: 칩 안 점수 · '추천 계약 · 눌러서 잇기' 안내는 줄이고(점수 · 이유는 칩에 마우스를 올리면), 앞에 '추천' 한 단어 */
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button > span:first-child > span{ display:none !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > p{ display:none !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1::before{ content:"추천"; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:first-child{ max-width:200px !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:first-child :is(div,span){ overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #payback-wrap tbody td .mt-2.space-y-1 > button b{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
/* 미연결 꼬리표 · 계약 잇기 */
html #bank_accounts-content #payback-wrap tbody td .space-y-1 > *{ margin-top:0 !important }
html #bank_accounts-content #payback-wrap tbody td button.text-blue-600{ color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-footnote) !important }
html #bank_accounts-content #payback-wrap tbody td button.text-blue-600 i{ display:none !important }

/* 수집 작업내역: 작업번호 · 기간 한 줄 */
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div p{ display:inline !important; margin:0 10px 0 0 !important }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div p + p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }

/* 매칭 창 추천 계약: 업체 · 꼬리표 · 상품 · 금액 · 담당 · 날짜 한 줄 */
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div{ display:flex !important; align-items:center; gap:12px; white-space:nowrap; min-height:32px }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:first-child{ flex:1 1 auto; min-width:0 }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:first-child > div:first-child{ min-width:0; overflow:hidden }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:nth-child(2){ flex:none; margin:0 !important; gap:10px !important }
}
@media screen and (max-width:768px){
/* 휴대폰도 한 줄: 업체 · 꼬리표 · 상품은 말줄임, 금액 · 담당 · 날짜는 늘 보임 */
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div{ min-height:44px }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:nth-child(2){ gap:6px !important; font-size:var(--ui-text-caption) }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:nth-child(2) > span:last-child{ display:inline !important }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:first-child > div:first-child > span.truncate{ min-width:0 }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div{ flex-wrap:nowrap !important; white-space:nowrap; min-height:44px }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div > div:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #bank-jobs-wrap > .space-y-3 > div p{ font-size:var(--ui-text-caption) !important; margin-right:6px !important }
}
/* 표가 화면보다 넓으면(추천 계약이 있는 줄 등) 표만 옆으로 밀고 첫 칸(작업 · 계약 · 번호)은 고정 — 승인된 광고주DB 고밀도형과 같은 방식 */
@media screen and (min-width:769px){
html #bank_accounts-content #payback-wrap table :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:var(--ui-surface) !important; box-shadow:inset -.5px 0 var(--ui-line), inset 0 -.5px var(--ui-line) !important }
html #bank_accounts-content #payback-wrap table th:first-child{ background:var(--ui-surface-alt) !important; z-index:2 }

}
/* 계약 미연결 줄: 반투명 노랑(고정 첫 칸 뒤로 글자가 비치던 것) → 불투명 옅은 노랑, 줄 전체 같은 색 */
html #bank_accounts-content #payback-wrap table tr.bg-amber-50\/60 > td{ background:color-mix(in srgb, var(--ui-highlight) 40%, var(--ui-surface)) !important }
/* 한 줄로 이으면서 붙어 버린 값 띄우기: 회색 둘째 값 · 계약번호 뒤 꼬리표 · 떼기(×) · 계약 이름 */
@media screen{
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td :is(div,p,span):is(.text-\[11px\],.text-\[10px\]){ margin-left:6px !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .space-y-1 > div > *{ margin-left:6px !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .space-y-1 > div > *:first-child{ margin-left:0 !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .space-y-1 > div + *{ margin-left:10px !important }
html #bank_accounts-content #payback-wrap tbody td span.bg-blue-50{ background:transparent !important; padding:0 !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important }
/* 계약 칸 폭 상한: 추천 계약이 많은 줄은 칸 안에서만 옆으로 밀림(표 오른쪽 합계 · 지급일이 늘 보이게) */
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:nth-child(2):has(.mt-2.space-y-1){ max-width:520px; overflow-x:auto; scrollbar-width:none }
/* 실제 데이터 확인(2026-10-30): 칸 안 가로 스크롤 막대(11px)가 줄을 35px 로 키움 → 막대 숨김(트랙패드로는 밀림),
   칩은 계약번호만(남은 상품값 · 점수 · 이름 · 이유는 마우스를 올리면) → 추천 3개까지 한 줄에 다 보임 */
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:nth-child(2):has(.mt-2.space-y-1)::-webkit-scrollbar{ display:none }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button > span:nth-child(3){ display:none !important }
}
@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td{ height:44px !important }
}
/* 실제 데이터 확인(2026-10-30): 추천 계약 칩이 있는 줄만 35px — 칩(22px)이 글줄 높이를 밀어 올림 → 칸 안 묶음을 가운데 맞춤 한 줄 상자로, 칩 20px */
@media screen{
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:has(.mt-2.space-y-1){ line-height:20px !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td:has(.mt-2.space-y-1) > :is(div,span,button){ vertical-align:middle !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1{ display:inline-flex !important; align-items:center; gap:6px; vertical-align:middle !important }
/* 계좌관리 공통 흰 단추 규칙(높이 24px, ID 무게 더 큼)을 이기도록 :not(#…) 로 무게를 올림 */
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button:not(#payback-chip-x):not(#payback-chip-y){ height:20px !important; min-height:0 !important; line-height:20px !important; margin:0 !important; padding-top:0 !important; padding-bottom:0 !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1{ height:20px; line-height:20px }
}
/* 좁은 창 칩 정리(사용자 2026-10-30 "2"): 추천 계약(서버가 최대 3개)은 앞의 2개만 칩으로, 3번째는 '외 1' 글자로.
   3번째 계약은 '직접 찾아 잇기' 검색으로 그대로 고를 수 있음. 칸이 넘쳐 글자가 잘리던 줄 없앰 */
@media screen{
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1 > button:nth-of-type(n+3){ display:none !important }
html #bank_accounts-content #payback-wrap tbody tr:not(:has(#payback-picker-q)) > td .mt-2.space-y-1:has(> button:nth-of-type(3))::after{ content:"외 1"; color:var(--ui-text-2); font-size:var(--ui-text-footnote); white-space:nowrap }
}
/* 아이폰(WebKit) 확인(2026-10-30): 매칭 창 한 줄에서 업체명이 4글자로 잘리고 날짜가 원본 그대로(2026-10-30T05:26…Z) 길게 나옴
   → 휴대폰은 업체 · 금액 · 담당 · 날짜, 업체명은 말줄임(…), 상품은 숨김(PC 에는 그대로) */
@media screen and (max-width:768px){
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:first-child > div:first-child > span.font-bold{ min-width:0; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto }
html #bank-contract-match-modal #bank-cm-results > .space-y-2 > div > div:first-child > div:first-child > span.truncate{ display:none !important }
}
/* 날짜가 '10.30' 짧은 표기가 되어 휴대폰에서도 다시 보이게 함(위 숨김 줄 삭제) */

/* =============================================================
   4. 케이뱅크 · 하나은행 장부 요약 칸 (사용자 2026-10-30 "1": 좁은 창에서 금액 '원'만 다음 줄로 꺾이던 것)
   장부 안 4칸 · 게이지 합계 5칸도 위 요약 4칸과 같은 크기(제목 11 · 금액 15/20px)로, 금액은 한 줄 고정,
   설명은 한 줄 말줄임 — 전체 설명은 마우스를 올리면(title, review-paybacks.js). 색 뜻(주황 · 빨강)은 그대로
   ============================================================= */
@media screen and (min-width:769px){
html #bank_accounts-content #payback-wrap .grid > div.rounded-2xl{ padding:8px 12px !important; min-width:0 }
html #bank_accounts-content #payback-wrap .grid > div:is(.rounded-2xl,.min-w-0) > p:first-child{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #bank_accounts-content #payback-wrap .grid > div:is(.rounded-2xl,.min-w-0) > p:is(.text-xl,.text-lg){ font-size:var(--ui-text-title3) !important; line-height:20px !important; font-weight:var(--ui-weight-semibold) !important; margin-top:1px !important; white-space:nowrap }
html #bank_accounts-content #payback-wrap .grid > div:is(.rounded-2xl,.min-w-0) > p.text-\[11px\]{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px !important }
html #bank_accounts-content #payback-wrap .grid > span.pt-4{ padding-top:16px !important; font-size:var(--ui-text-title3) !important }
}
/* 게이지 아래 범례: 이름이 3~4줄로 쪼개지고 금액 '원'이 꺾이던 것 → 한 줄(점 · 이름 말줄임 · 금액 · 비율), 이름 전체는 마우스를 올리면 */
@media screen and (min-width:769px){
html #bank_accounts-content #payback-wrap .grid.gap-x-4 > div.min-w-0{ flex-wrap:nowrap !important; align-items:center !important; gap:6px !important; white-space:nowrap }
html #bank_accounts-content #payback-wrap .grid.gap-x-4 > div.min-w-0 > span:nth-child(2){ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:var(--ui-text-caption) !important }
html #bank_accounts-content #payback-wrap .grid.gap-x-4 > div.min-w-0 > span:nth-child(3){ flex:none; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #payback-wrap .grid.gap-x-4 > div.min-w-0 > span:nth-child(4){ flex:none }
}
/* 범례 4개가 좁은 창에서 '기록 없이 …' 둘로 구분이 안 될 만큼 잘림 → 창 1400px 아래에서는 2칸 × 2줄(항목은 계속 한 줄) */
@media screen and (min-width:769px) and (max-width:1400px){
html #bank_accounts-content #payback-wrap .grid.gap-x-4.sm\:grid-cols-4{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important }
}

/* =============================================================
   5. 휴대폰 장부 시안 B (사용자 2026-10-30 "너무 텍스트만 장황 · 항목별 시각적 구분" + "날짜 26.10.30 · 가로 스크롤 없이")
   회색 바탕 위 흰 묶음(상품구입비 흐름 · 통장 · 날짜별 · 안내) — 아이폰 '설정' 목록 방식. 부제 · 설명문 · 칸 설명은 안내로 접음.
   날짜별 표는 26.10.30 + 칸 여백 6px · 머리글 두 줄 → 「리뷰어에게 보냄/나감」까지 옆으로 밀지 않고 보임. PC 는 그대로
   ============================================================= */
@media screen and (min-width:769px){
html #bank_accounts-content #payback-wrap :is(.pb-m-warn,details.pb-m-notes){ display:none !important }
}

@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)){ background:var(--ui-surface-alt) !important; box-shadow:none !important; padding-bottom:4px }
/* 머리: 제목 + 받은 시각 + 받기 단추만. 부제 · 설명문은 '안내'로 */
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .px-5.pt-4{ padding:12px 14px 6px !important; row-gap:6px !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .px-5.pt-4 > div:first-child > p:first-child > span{ display:none !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .px-5.pt-4 > div:first-child > p:nth-child(2){ display:none !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .px-5.pt-4 > div:first-child > p:first-child{ font-size:var(--ui-text-title3) !important }
/* 묶음 이름(작은 회색 대문자 줄) */
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(#payback-kbank-btn) > .px-5.pb-4::before{ content:"상품구입비 흐름" }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(#payback-kbank-btn) > .grid.grid-cols-2::before{ content:"케이뱅크 통장" }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(#payback-hana-btn) > .grid.grid-cols-2::before{ content:"하나은행 통장" }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto::before{ content:"날짜별"; display:block; padding:12px 16px 4px }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > :is(.px-5.pb-4,.grid.grid-cols-2,.overflow-x-auto)::before{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); font-weight:var(--ui-weight-regular); grid-column:1 / -1 }
/* 1) 상품구입비 흐름: 총액 한 줄 + 막대 + 항목별 한 줄(색 점 · 이름 · 금액 · 비율) */
html #bank_accounts-content #payback-wrap div.rounded-2xl > .px-5.pb-4:has(.grid.items-start){ display:block; padding:6px 12px 10px !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .px-5.pb-4:has(.grid.items-start)::before{ display:block; padding:0 4px 4px }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start{ display:block !important; background:var(--ui-surface); border-radius:var(--ui-radius-group) var(--ui-radius-group) 0 0; padding:10px 12px 0 !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start > :not(:first-child){ display:none !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start > div:first-child{ display:flex !important; align-items:baseline; justify-content:space-between; padding:0 !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start > div:first-child > p:first-child{ font-size:var(--ui-text-callout) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start > div:first-child > p:nth-child(2){ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.items-start > div:first-child > p:nth-child(3){ display:none !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > div.mt-3.flex{ margin:0 !important; height:auto !important; border-radius:0 !important; background:var(--ui-surface) !important; box-sizing:border-box; border:8px solid var(--ui-surface); border-width:8px 12px 6px; overflow:hidden }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > div.mt-3.flex > div{ height:10px !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4{ display:block !important; margin:0 !important; background:var(--ui-surface); border-radius:0 0 var(--ui-radius-group) var(--ui-radius-group); padding:0 0 0 12px !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0{ display:flex !important; align-items:center !important; gap:8px !important; min-height:40px; padding-right:12px; white-space:nowrap; box-shadow:inset 0 .5px var(--ui-line) }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0 > span:first-child{ width:8px !important; height:8px !important; border-radius:50% !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0 > span:nth-child(2){ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0 > span:nth-child(2).text-red-600{ color:var(--ui-danger) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0 > span:nth-child(3){ flex:none; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4 > .grid.gap-x-4 > div.min-w-0 > span:nth-child(4){ flex:none; width:38px; text-align:right; font-size:var(--ui-text-footnote) !important }
html #bank_accounts-content #payback-wrap .px-5.pb-4:has(.grid.items-start) > p{ display:none !important }
/* 2) 통장 4칸 → 한 줄씩(이름 ··· 금액), 설명 줄은 '안내'로 */
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2{ display:block !important; padding:6px 12px 6px !important; margin:0 !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2::before{ display:block; padding:4px 4px 4px }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl{ display:flex !important; align-items:center; justify-content:space-between; min-height:44px; padding:0 12px !important; margin:0 !important; border-radius:0 !important; box-shadow:inset 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl:first-of-type{ border-radius:var(--ui-radius-group) var(--ui-radius-group) 0 0 !important; box-shadow:none !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl:last-of-type{ border-radius:0 0 var(--ui-radius-group) var(--ui-radius-group) !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl > p:first-child{ font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl > p.text-xl{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; margin:0 !important; line-height:20px }
html #bank_accounts-content #payback-wrap div.rounded-2xl > .grid.grid-cols-2 > div.rounded-2xl > p.text-\[11px\]{ display:none !important }
/* 3) 날짜별 표: 흰 묶음 */
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto{ border:0 !important; margin:0 12px; background:transparent }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto > table{ background:var(--ui-surface); border-radius:var(--ui-radius-group); overflow:hidden }
/* 4) 안내: 기존 안내 목록 · 설명문 · 게이지 안내는 숨기고 '안내 N개 보기' 하나로(경고 문장만 위에 따로) */
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > ul{ display:none !important }
html #bank_accounts-content #payback-wrap .pb-m-warn{ margin:8px 12px 0; padding:8px 12px; background:var(--ui-surface); border-radius:var(--ui-radius-group); font-size:var(--ui-text-footnote) }
html #bank_accounts-content #payback-wrap details.pb-m-notes{ display:block; margin:8px 12px 6px; background:var(--ui-surface); border-radius:var(--ui-radius-group); padding:0 12px }
html #bank_accounts-content #payback-wrap details.pb-m-notes > summary{ min-height:44px; display:flex; align-items:center; font-size:var(--ui-text-body); color:var(--ui-accent-text); list-style:none; cursor:pointer }
html #bank_accounts-content #payback-wrap details.pb-m-notes > summary::-webkit-details-marker{ display:none }
html #bank_accounts-content #payback-wrap details.pb-m-notes > ul{ list-style:disc; padding:0 0 10px 16px; margin:0; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #bank_accounts-content #payback-wrap details.pb-m-notes > ul > li + li{ margin-top:4px }
}
/* 휴대폰 장부 날짜별 표: 날짜 26.10.30 + 칸 여백 · 머리글 두 줄 허용 → 「리뷰어에게 보냄/나감」까지 옆으로 밀지 않고 보임 */
@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto :is(th,td){ padding-left:6px !important; padding-right:6px !important }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto th{ white-space:normal !important; height:auto !important; min-height:31px; padding-top:4px !important; padding-bottom:4px !important; line-height:14px; vertical-align:bottom; word-break:keep-all }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto td{ white-space:nowrap }
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto td .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
}
/* 하나은행 표: '(n번)' '(n건)' 건수 꼬리는 휴대폰에서 숨김(같은 건수는 위 「하나은행 통장」 묶음과 안내에 있음) → 「리뷰어에게 나감」 칸까지 한 화면에 */
@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(#payback-hana-btn) > .overflow-x-auto td > span.text-\[11px\]{ display:none !important }
}
/* 위 '작업별 표 720px 고정'(휴대폰 옆으로 밀기용)이 장부 표에도 걸려 칸이 억지로 넓어지던 것 → 장부 표는 내용 폭대로 */
@media screen and (max-width:768px){
html #bank_accounts-content #payback-wrap div.rounded-2xl:has(:is(#payback-kbank-btn,#payback-hana-btn)) > .overflow-x-auto > table{ min-width:0 !important }
}