@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   매칭 플로우 팝업 스킨 (토스 리뉴얼)
   대상: #match-popup·#deposit-popup·#marge-popup·#merge-confirm-popup 등
        dialog.df-popup / .merge-popup-overlay 공통
   ⚠️ 원칙: 마크업·JS 무변경 — CSS 오버라이드만. 선발행/매칭 로직 보존.
   로드: depositDetails.html · contracts.html · taxRequests.html (style.css 뒤)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 다이얼로그 셸 ─── */
dialog.df-popup,
dialog.merge-popup-overlay {
  border: 1px solid var(--rn-border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(34, 30, 28, .28);
  color: var(--rn-text);
}
dialog.df-popup::backdrop,
dialog.merge-popup-overlay::backdrop {
  background-color: rgba(34, 30, 28, .45);
  backdrop-filter: blur(2px);
}
dialog.df-popup .popupTitle {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
dialog.df-popup .popup-close-button,
dialog.df-popup .merge-popup-close-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--rn-text-dim);
  background: var(--rn-bg);
  font-size: 18px;
  transition: background .15s ease, color .15s ease;
}
dialog.df-popup .popup-close-button:hover,
dialog.df-popup .merge-popup-close-btn:hover { background: var(--rn-grey); color: var(--rn-grey-text); }

/* ─── 라디오 세그먼트 (입금 유형·계산서 유형) ─── */
dialog.df-popup .toBtnBox .dfBtn input[type="radio"] + span {
  background: var(--rn-card-bg);
  color: var(--rn-grey-text);
  border: 1.5px solid var(--rn-border-faint);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
dialog.df-popup .toBtnBox .dfBtn input[type="radio"] + span:hover { background: var(--rn-bg); }
dialog.df-popup .toBtnBox .dfBtn input[type="radio"]:checked + span {
  background: var(--rn-brand-faint);
  border-color: var(--rn-brand);
  color: var(--rn-brand);
}

/* 선발행 그룹 캡슐 — 일반 유형과 시각적으로 구분 (신청/매칭 구분 실수 방지) */
dialog.df-popup .pre-issue-group {
  border: 1px solid var(--rn-brand-border) !important;
  background: #FDFAF9;
  border-radius: 10px !important;
}

/* ─── 팝업 내 테이블 (계약 후보·입금 목록) ─── */
dialog.df-popup table thead th {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--rn-text-dim);
  background: #FBFAF8;
  border-bottom: 1px solid var(--rn-border);
  padding: 9px 10px;
}
dialog.df-popup table tbody td {
  font-size: 12.5px;
  padding: 9px 10px;
  border-bottom: 1px solid #F5F3F0;
}
dialog.df-popup table tbody tr:hover td { background: var(--rn-bg); }
dialog.df-popup .contract-table-responsive,
dialog.df-popup .deposit-marge-table {
  border: 1px solid var(--rn-border);
  border-radius: 12px;
}

/* ─── 폼 (세금/현금영수증 정보 입력) ─── */
dialog.df-popup .popupForm label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rn-text-sub);
}
dialog.df-popup .popupForm li input,
dialog.df-popup .tax-info-box {
  border: 1px solid var(--rn-input-border);
  border-radius: 10px;
  font-size: 13.5px;
}
dialog.df-popup .popupForm li input:focus,
dialog.df-popup .tax-info-box:focus { border-color: var(--rn-brand); outline: none; }
dialog.df-popup .tax-info-box.disabled,
dialog.df-popup .tax-info-box:disabled { background: var(--rn-grey); color: var(--rn-text-dim); }

/* ─── 발행 옵션 (개별/일괄) ─── */
dialog.df-popup .option-title { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
dialog.df-popup .merge-issue-btn { border-radius: 10px; }

/* 분할 발행 진행 표기 */
dialog.df-popup #single-merge-count { color: var(--rn-brand); font-size: 12.5px; }
dialog.df-popup #single-merge-current { color: var(--rn-text-dim); font-size: 12px; }

/* ─── 팝업 내 페이지네이션 ─── */
dialog.df-popup .contract-table-pagination button,
dialog.df-popup #deposit-marge-pagination button {
  min-width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 12px;
  background: transparent;
  color: var(--rn-text-sub);
}
dialog.df-popup .contract-table-pagination button:hover,
dialog.df-popup #deposit-marge-pagination button:hover { background: var(--rn-grey); color: var(--rn-text); }
dialog.df-popup .contract-table-pagination button.active,
dialog.df-popup #deposit-marge-pagination button.active { background: var(--rn-brand); color: #fff; }

/* ─── 직원 필터 (팝업 내부) ─── */
dialog.df-popup .employee-filter-container h3 { font-size: 12px; font-weight: 750; color: var(--rn-text-dim); }
dialog.df-popup .selected-employees .selected-employee {
  background: var(--rn-brand-soft);
  color: var(--rn-brand);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

/* ─── 검색 입력 (팝업 상단) ─── */
dialog.df-popup .search-input {
  border: 1px solid var(--rn-input-border);
  border-radius: 10px;
}
dialog.df-popup .search-input:focus { border-color: var(--rn-brand); }

/* ─── [다음]/[완료] 버튼 하단 클리핑 보정 (2026-08-25) ───
   .df-popup .popup-content 은 overflow-y:auto 라 내용이 꽉 차면 스크롤 컨테이너의
   패딩 모서리에서 그대로 잘린다. 버튼 그림자·보더 몇 px 가 하단에서 클리핑되던 것을
   내용 아래 여유 공간으로 해소 — 내용이 넘치지 않을 때는 시각 변화 없음(flex 하단 정렬 유지) */
dialog.df-popup .popup-content { padding-bottom: 8px; }