@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 영수증 처리 내역 (taxRequests.html 전용)
   근거: docs/design/prototype-toss-interactive-2026-07-28.html #page-receipts
   공통 토큰·.btn 은 renewal.css(:root --rn-*) 사용. 이 파일은 .rn-receipts 스코프만.
   taxrequest.js 가 참조하는 id/class 는 건드리지 않고 시각만 입힌다.
   ═══════════════════════════════════════════════════════════════ */

/* ─ 레이아웃 (.rn 의 margin 리셋이 .main-box 여백을 덮으므로 재선언 — rn-dash 와 동일 규칙) ─ */
.rn.rn-receipts { min-height: calc(100vh - 60px); padding: 24px 0 60px; margin-left: 260px; margin-top: 60px; }
.navbar-container.close + .rn.rn-receipts { margin-left: 68px; }
@media screen and (max-width: 1760px) {
  .rn.rn-receipts { margin-left: 220px; }
}
.rn-receipts .rcp-content { width: 100%; margin: 0 auto; padding: 0 28px; }

/* ─ 헤드 ─ */
.rn-receipts .head { display: flex; align-items: flex-start; justify-content: space-between; margin: 6px 0 16px; gap: 12px; flex-wrap: wrap; }
.rn-receipts .backlink { font-size: 12px; font-weight: 750; color: var(--rn-text-dim); cursor: pointer; width: fit-content; }
.rn-receipts .backlink:hover { color: var(--rn-brand); }
.rn-receipts .head h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 4px 0 0; line-height: 1.3; color: var(--rn-text); }
.rn-receipts .hsub { font-size: 14px; font-weight: 500; color: var(--rn-text-sub); margin-top: 6px; }
.rn-receipts .hsub b { color: var(--rn-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.rn-receipts .headacts { display: flex; gap: 8px; align-items: center; }

/* ─ 세금종류 탭 (#type-filter-button — JS 가 button 에 .active 토글) ─ */
.rn-receipts .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--rn-input-border); margin-bottom: 14px; flex-wrap: wrap; }
.rn-receipts .tabs button {
  border: none; background: none; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--rn-text-faint);
  padding: 8px 2px 10px; position: relative; cursor: pointer; white-space: nowrap;
}
.rn-receipts .tabs button:hover { color: var(--rn-text-sub); }
.rn-receipts .tabs button.active { color: var(--rn-text); }
/* 밑줄은 ::before — ::after 는 style.css 의 알림 배지(.has-alert)가 쓴다.
   같은 의사요소를 두면 배지가 붙는 순간 밑줄이 배지 자리(위쪽)로 올라간다. (입금 내역과 동일 처리) */
.rn-receipts .tabs button.active::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2.5px; background: var(--rn-text); border-radius: 2px;
}

/* ─ 필터 바 ─ */
.rn-receipts .fbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rn-receipts .fgroup { display: inline-flex; align-items: center; gap: 7px; }
.rn-receipts .flab { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); white-space: nowrap; }

/* 세그먼트 (조회모드 · 발급상태 — JS 가 .active 토글, id 유지) */
.rn-receipts .seg { display: inline-flex; background: var(--rn-grey); border-radius: 10px; padding: 4px; gap: 2px; }
.rn-receipts .seg button,
.rn-receipts .seg .toggle-btn {
  border: none; background: none; font-family: inherit; transform: none; box-shadow: none;
  padding: 7px 18px; border-radius: 6px; font-size: 12.5px; font-weight: 700;   /* seg 패딩 기준(/contracts 7×18) 통일 (2026-09-02 3차 Y3) */
  color: var(--rn-text-dim); cursor: pointer; white-space: nowrap; transition: none;
}
.rn-receipts .seg button:hover { color: var(--rn-grey-text); }
.rn-receipts .seg button.active,
.rn-receipts .seg .toggle-btn.active {
  background: var(--rn-card-bg); color: var(--rn-brand); box-shadow: 0 1px 4px rgba(34, 30, 28, .08); transform: none;
}

/* 기간 조회 (JS: display flex/none) · 월별 조회 (JS: display contents/none) */
.rn-receipts #custom-date-container { align-items: center; gap: 10px; }
.rn-receipts .control-box { display: flex; align-items: center; gap: 6px; }
.rn-receipts .dlab { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); white-space: nowrap; margin: 0; }
.rn-receipts .fbar input[type="date"],
.rn-receipts .fbar input[type="text"]:not(.search-input),
.rn-receipts .fbar .date-picker {
  border: 1px solid var(--rn-input-border); border-radius: 8px; background: var(--rn-card-bg);
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--rn-text);
  padding: 7px 10px; width: 128px; outline: none;
}
.rn-receipts .fbar input:focus { border-color: var(--rn-brand); }
.rn-receipts .fbar input::placeholder { color: var(--rn-text-faint); font-weight: 500; }

/* 초기화 */
.rn-receipts .resetpill {
  border: none; background: var(--rn-grey); font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text); cursor: pointer; white-space: nowrap;
}
.rn-receipts .resetpill:hover { background: var(--rn-grey-hover); }

/* 검색 */
.rn-receipts .srchwrap {
  flex: 1; min-width: 200px; max-width: 360px; margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  background: var(--rn-grey); border-radius: 10px; padding: 4px 4px 4px 14px;
}
.rn-receipts .srchwrap input.search-input {
  /* control.css: input.search-input{min-width:360px !important} 상쇄 */
  min-width: 0 !important;
  flex: 1; border: none; background: none; outline: none;
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--rn-text); padding: 6px 0;
}
.rn-receipts .srchwrap .search-input::placeholder { color: var(--rn-text-dim); font-weight: 500; }
.rn-receipts .srchwrap .search-button {
  border: none; background: none; cursor: pointer; border-radius: 8px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--rn-text-dim); flex-shrink: 0; padding: 0;
}
.rn-receipts .srchwrap .search-button:hover { background: var(--rn-card-bg); color: var(--rn-brand); }
.rn-receipts .srchwrap .search-button .material-symbols-outlined { font-size: 18px; }

/* ─ 팀(직원) 필터 — taxrequest.js 가 details/summary 드롭다운을 동적 생성 (rn-dash 와 동일 클래스) ─ */
.rn-receipts .employee-filter-container { gap: 8px; padding-bottom: 6px; margin-bottom: 4px; cursor: default; align-items: center; flex-wrap: wrap; }
.rn-receipts .employee-filter-container h3 { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); margin: 0 2px 0 0; white-space: nowrap; }
/* 정적 '전체 선택' 체크박스는 기존 디자인에서도 숨김(style.css:193) — 노출 회귀 금지, 명시 유지 */
.rn-receipts .employee-filter-container > .employee-checkbox { display: none; }
.rn-receipts .employee-filter-container > div.employee-dropdown,
.rn-receipts .employee-filter-container .employee-dropdown {
  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-receipts .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; cursor: pointer; }
.rn-receipts .dropdown-summary::-webkit-details-marker { display: none; }
.rn-receipts .dropdown-options {
  border-radius: 10px; border: 1px solid var(--rn-border); background: var(--rn-card-bg);
  box-shadow: 0 14px 34px rgba(34, 30, 28, .16); font-weight: 600; padding: 10px 12px;
  min-width: 168px;
}
.rn-receipts .dropdown-option { gap: 7px; font-size: 12.5px; display: flex; align-items: center; }
.rn-receipts .dropdown-option label { white-space: nowrap; }
.rn-receipts .dropdown-option:not(:last-child) { margin-bottom: 8px; }
.rn-receipts .dropdown-option input { accent-color: var(--rn-brand); }
.rn-receipts .selected-employees { margin: 8px 0 14px; gap: 6px; display: flex; flex-wrap: wrap; }
.rn-receipts .selected-employees:empty { margin: 0 0 8px; }
.rn-receipts .selected-employee { background: var(--rn-brand-soft); border-radius: 8px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; }
.rn-receipts .selected-employee .employee-name { color: var(--rn-brand); font-size: 11.5px; font-weight: 750; }
.rn-receipts .selected-employee .remove-employee { color: var(--rn-brand); font-size: 12px; cursor: pointer; }
.rn-receipts .selected-employee .remove-employee:hover { color: var(--rn-brand-hover); }

/* ─ 테이블 카드 ─ */
.rn-receipts .tablecard {
  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 4px; min-width: 0;
  overflow-x: auto;
}
/* 골격은 renewal.css 공통 표가 담당 — 여기에는 이 화면 고유 규칙만 둔다 */
/* 정렬 가능한 헤더만 pointer (결정 #7: 클릭 요소만 pointer) */
.rn-receipts #contractsTable th[data-sort] { cursor: pointer; }
.rn-receipts #contractsTable th[data-sort]:hover { color: var(--rn-grey-text); }
.rn-receipts #contractsTable .arrow { margin-left: 4px; font-size: .8em; color: var(--rn-brand); }
.rn-receipts #contractsTable tbody td { font-weight: 600; }
.rn-receipts #contractsTable tbody tr { cursor: pointer; }   /* 행 클릭 = 상세 */
/* 번호 열은 본문만 흐리게 — thead 까지 걸리면 헤더 굵기가 다른 표와 어긋난다 */
.rn-receipts #contractsTable tbody .numCell { color: var(--rn-text-faint); font-weight: 650; }
.rn-receipts #contractsTable .addressCell { font-weight: 750; letter-spacing: -.015em; }

/* ─ 행 내부 버튼 (taxrequest.js 가 렌더 — 클래스/onclick 은 JS 소유, 시각만 교체) ─
   발급상태: button._mainLine → 상태 점 + 텍스트 (프로토타입 .st)
   · disabled(승인완료) = 초록 점 텍스트 · enabled(승인대기중) = 인주색 점, 클릭 가능 */
.rn-receipts #contractsTable tbody button._mainLine {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; background: none; font-family: inherit; height: auto; min-width: 0;
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rn-receipts #contractsTable tbody button._mainLine::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
/* 승인완료 = 클릭 불가 → 테두리 없는 상태 텍스트로 남긴다 */
.rn-receipts #contractsTable tbody button._mainLine[disabled] {
  color: var(--rn-st-done); cursor: default; opacity: 1; background: none; border-color: transparent;
}
/* 승인대기중 = 눌러야 하는 버튼. 행 전체가 pointer 라 커서만으로는 구분이 안 되므로
   같은 표의 다른 액션 버튼(삭제·조회하기 = _blackLine)과 동일한 생김새(흰 배경 + 테두리)로
   맞춰 "누를 것"임을 명시하고, hover 는 채움으로 확실히 반응시킨다. */
.rn-receipts #contractsTable tbody button._mainLine:not([disabled]) {
  color: var(--rn-brand); background: var(--rn-card-bg); cursor: pointer;
  border-color: var(--rn-brand); padding: 5px 10px;
  box-shadow: 0 1px 1px rgba(129, 43, 39, .07);
}
.rn-receipts #contractsTable tbody button._mainLine:not([disabled]):hover {
  background: var(--rn-brand); border-color: var(--rn-brand); color: #fff;
  box-shadow: 0 1px 3px rgba(129, 43, 39, .22);
}
.rn-receipts #contractsTable tbody button._mainLine:not([disabled]):active {
  box-shadow: none;
}
.rn-receipts #contractsTable tbody button._mainLine:not([disabled]):focus-visible {
  outline: 2px solid var(--rn-brand); outline-offset: 2px;
}

/* 조회하기 · 삭제 · 취소 · 공동 작업: button._blackLine → 고스트 버튼 (프로토타입 .mbtn) */
.rn-receipts #contractsTable tbody button._blackLine {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rn-input-border); background: var(--rn-card-bg); font-family: inherit;
  border-radius: 8px; padding: 5px 10px; height: auto; min-width: 0;
  font-size: 11.5px; font-weight: 700; color: var(--rn-grey-text); cursor: pointer;
  white-space: nowrap; margin: 1px 2px;
}
.rn-receipts #contractsTable tbody button._blackLine:hover { border-color: var(--rn-border-hover); color: var(--rn-text); }

/* ─ 페이지네이션 (taxrequest.js 가 .pagination-button 동적 생성) ─ */
.rn-receipts .pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px 6px; margin-top: 0; border-top: 1px solid var(--rn-border-soft);
}
.rn-receipts .pagination:empty { display: none; border-top: none; padding: 0; }
.rn-receipts .pagination button.pagination-button {
  min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: var(--rn-grey-text); cursor: pointer; padding: 0 7px; font-family: inherit;   /* 기준(/contracts) 0 7px 통일 (2026-09-02 3차 Y5) */
}
.rn-receipts .pagination button.pagination-button:hover { background: var(--rn-border-soft); color: var(--rn-grey-text); }
.rn-receipts .pagination button.pagination-button.active { background: var(--rn-brand); color: #fff; }
.rn-receipts .pagination button.pagination-button.active:hover { background: var(--rn-brand); color: #fff; }

/* ─ 팝업 라이트 폴리시 (내부 구조·버튼 로직은 popups/control.css 그대로 — 겉모양만) ─ */
.rn-receipts #match-popup { border: none; border-radius: 16px; box-shadow: 0 24px 60px rgba(34, 30, 28, .22); }
.rn-receipts #collabDialog { box-shadow: 0 24px 60px rgba(34, 30, 28, .22); }