@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 입금 내역 페이지 전용 (2026-08-05)
   근거: docs/design/prototype-toss-interactive-2026-07-28.html #page-deposits
        docs/design/README-design-renewal.md 2·3절 (토큰·확정 결정)
   토큰(--rn-*)은 /css/renewal.css(:root)에서 공급된다.

   ⚠️ 스코프 규칙: 모든 선택자는 .rn-dep + 페이지 구조 클래스
      (.head/.dep-tabs/.fbar/.dep-card/.dep-table …) 아래로만 건다.
      매칭/합치기/선발행 dialog(#match-popup, #marge-popup, #deposit-popup,
      #merge-confirm-popup) 내부에는 어떤 규칙도 닿지 않게 한다.
      (dialog 내부 스킨은 전역 renewal-skin.css가 담당 — 현상 유지)

   ⚠️ 확정 결정 #4: 입금 목록 날짜 그룹핑 금지 — 평탄 리스트 유지.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 콘텐츠 폭 (프로토타입 .content 대응) ─── */
.rn-dep .dep-content {
  width: 100%;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

/* ─── 헤드 (프로토타입 .head/.hsub) ─── */
.rn-dep .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 6px 0 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.rn-dep .head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  line-height: 1.3;
  color: var(--rn-text);
}
.rn-dep .hsub {
  font-size: 14px;
  font-weight: 500;
  color: var(--rn-text-sub);
  margin-top: 6px;
}
.rn-dep .hsub b {
  color: var(--rn-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rn-dep .headacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 헤드 버튼 — .head 아래로만 스코프 (dialog 내 .btn 절대 미접촉) */
.rn-dep .head .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  border: none;
  font-family: inherit;
  line-height: 1.5; /* 2026-09-02 R5: 1.4(40px) → 기준 42px 통일 (.rn .btn 과 동일값) */
}
.rn-dep .head .btn._main { background: var(--rn-brand); color: #fff; }
.rn-dep .head .btn._main:hover { background: var(--rn-brand-hover); color: #fff; }
.rn-dep .head .btn._grey { background: var(--rn-grey); color: var(--rn-grey-text); }
.rn-dep .head .btn._grey:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }

/* ─── 탭 (프로토타입 .tabs — 기존 filter 버튼 체계를 재도색) ───
   page.js 가 .button-group button.active 를 조회하므로
   컨테이너의 button-group 클래스와 button 요소·active 클래스는 유지 */
.rn-dep .dep-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--rn-input-border);
  margin-bottom: 14px;
}
.rn-dep .dep-tabs button {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--rn-text-faint);
  padding: 8px 2px 10px;
  position: relative;
  cursor: pointer;
}
.rn-dep .dep-tabs button:hover {
  background: transparent;
  color: var(--rn-text);
}
.rn-dep .dep-tabs button.active { color: var(--rn-text); }
/* 활성 밑줄은 ::before 로 그린다.
   style.css 의 알림 배지(.has-alert::after "!")가 같은 ::after 를 쓰기 때문에,
   배지가 붙는 탭(공동 매칭 확인 등)에서 둘이 충돌해 밑줄이 배지 자리(위쪽)로 올라갔다. */
.rn-dep .dep-tabs button.active::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  background: var(--rn-text);
  border-radius: 2px;
}
/* 알림 배지(.has-alert ::after "!")는 style.css 전역 규칙 그대로 사용 —
   탭 버튼이 position:relative 라 배지 위치도 유지된다 */

/* ─── 직원 필터 (employeeFilter 컴포넌트) — 2026-09-02 M10
   이 페이지만 재도색이 빠져 style.css:195~204 레거시판(#d9d9d9 보더·radius4·fs16·
   순검정 그림자·#c9c9c9 스크롤바)으로 렌더되고 있었다.
   기준(/contracts) contracts.css:134~149 규격 그대로 이식 — 구조·셀렉터 불변, 톤만. */
.rn-dep .employee-filter-container { gap: 8px; padding-bottom: 6px; margin-bottom: 4px; cursor: default; }
.rn-dep .employee-filter-container > div {
  min-width: 0; border: none; border-radius: 8px; background: var(--rn-grey);
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
}
.rn-dep .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; }
.rn-dep .dropdown-summary::-webkit-details-marker { display: none; }
.rn-dep .dropdown-options {
  border-radius: 10px; border: 1px solid var(--rn-border);
  box-shadow: var(--rn-shadow-pop); font-weight: 600; padding: 10px 12px;
  min-width: 168px;
}
.rn-dep .dropdown-options::-webkit-scrollbar-thumb { background: var(--rn-border-strong); }
.rn-dep .dropdown-option { gap: 7px; font-size: 12.5px; }
.rn-dep .dropdown-option label { white-space: nowrap; }
.rn-dep .dropdown-option:not(:last-child) { margin-bottom: 8px; }
.rn-dep .dropdown-option input { accent-color: var(--rn-brand); }

/* ─── 필터/검색 바 (프로토타입 .fbar/.srch) ─── */
.rn-dep .fbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rn-dep .fbar .srch {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rn-grey);
  border-radius: 10px;
  padding: 4px 6px 4px 15px;
}
.rn-dep .fbar .srch input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--rn-text);
  padding: 5px 0;
}
.rn-dep .fbar .srch input:focus { border: none; outline: none; }
.rn-dep .fbar .srch input::placeholder { color: var(--rn-text-faint); }
.rn-dep .fbar .srch button {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  color: var(--rn-text-dim);
}
.rn-dep .fbar .srch button:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
.rn-dep .fbar .srch button .material-symbols-outlined { font-size: 18px; }

/* ─── 목록 카드 (프로토타입 .card) ─── */
.rn-dep .dep-card {
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(34, 30, 28, .04);
  padding: 6px 8px;
  min-width: 0;
}
.rn-dep .dep-tablewrap { overflow-x: auto; }

/* ─── 테이블 ───
   이 표가 리뉴얼 공통 표의 기준이다 — 골격은 renewal.css 로 옮겼고(2026-08-06),
   여기에는 이 화면 고유 규칙만 남긴다. */
.rn-dep table.dep-table { border-collapse: collapse; }
.rn-dep table.dep-table tbody tr { border-radius: 10px; }

/* 입금자명(4번째 표시열)은 행 제목 톤 */
.rn-dep table.dep-table tbody td.dep-name { font-weight: 750; letter-spacing: -.015em; }

/* 금액 셀 — 내용(₩1,234,567)은 JS 파싱 대상이라 CSS로만 강조 */
.rn-dep table.dep-table tbody td.dep-amt {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-align: right;
}
.rn-dep table.dep-table thead th.dep-amt-h { text-align: right; }

/* ─── 상태 표기 (프로토타입 .st — 색 점 + 텍스트) ─── */
.rn-dep .dep-table .st {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
}
.rn-dep .dep-table .st::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.rn-dep .dep-table .st._ok { color: var(--rn-st-done); }
.rn-dep .dep-table .st._wt { color: var(--rn-st-wait); }
.rn-dep .dep-table .st._hold { color: var(--rn-st-hold); }
/* 주소는 운영에서 셀에 전문이 보이던 정보다. 260px 고정 말줄임은 대부분의 도로명주소를
   잘라 먹었다 → 셀 폭까지 쓰도록 넓히고, 잘릴 때는 title 툴팁으로 전체를 볼 수 있게 한다.
   (2026-08-07 재검토에서 정보 축소로 판정) */
.rn-dep .dep-table .st-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
  cursor: help;
}

/* ─── 행 액션 버튼 (프로토타입 .mbtn 톤) —
   renderer 마크업(.btn/_sizeS/_blackLine…)은 그대로 두고 재도색만 ─── */
.rn-dep .dep-table td button.btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rn-input-border);
  background: var(--rn-card-bg);
  border-radius: 10px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 750;
  font-family: inherit;
  color: var(--rn-grey-text);
  cursor: pointer;
  white-space: nowrap;
}
.rn-dep .dep-table td button.btn:hover {
  border-color: var(--rn-border-hover);
  background: var(--rn-card-bg);
  color: var(--rn-text);
}
/* 주 액션(매칭/연결) — 브랜드 톤 (프로토타입 .mbtn._w) */
.rn-dep .dep-table td button.match-btn {
  border-color: var(--rn-brand-border);
  color: var(--rn-brand);
  background: var(--rn-brand-faint);
}
.rn-dep .dep-table td button.match-btn:hover {
  background: var(--rn-brand-soft);
  color: var(--rn-brand);
  border-color: var(--rn-brand-border);
}
/* 삭제·합치기 해제(_redLine) — 위험 톤 유지 */
.rn-dep .dep-table td button._redLine {
  border-color: var(--rn-danger-border);
  color: var(--rn-st-unmatched);
  background: var(--rn-danger-faint);
}
.rn-dep .dep-table td button._redLine:hover {
  background: var(--rn-st-unmatched);
  color: #fff;
  border-color: var(--rn-st-unmatched);
}
.rn-dep .dep-table td button.btn + button.btn { margin-left: 6px; }

/* 매칭일자 캘린더 아이콘 (matched 필터에서만 렌더) */
.rn-dep .dep-table .calendar-icon { cursor: pointer; margin-left: 4px; }

/* 빈 상태 */
.rn-dep .dep-table td.no-data {
  padding: 46px 14px;
  text-align: center;
  color: var(--rn-text-dim);
  font-size: 13px;
}

/* ─── 페이지네이션 (프로토타입 .pgn/.pg — renderer 버튼 재도색) ─── */
.rn-dep .dep-card .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--rn-border-soft);
  margin-top: 2px;
}
.rn-dep .dep-card .pagination:empty { display: none; }
.rn-dep .dep-card .pagination button {
  appearance: none;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--rn-grey-text);
  cursor: pointer;
  padding: 0 7px;   /* 기준(/contracts) 0 7px 통일 (2026-09-02 3차 Y5) */
}
.rn-dep .dep-card .pagination button:hover { background: var(--rn-grey); color: var(--rn-grey-text); }
.rn-dep .dep-card .pagination button.active {
  background: var(--rn-brand);
  color: #fff;
}