@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   직원 관리 (sub-account-management.html 전용) — 토스 리뉴얼 이식
   근거: docs/design/prototype-toss-interactive-2026-07-28.html #page-employees
   renewal.css(공통 토큰 .rn / .btn) 위에 얹는 페이지 스코프(.rn-emp) 스킨.
   이 파일은 직원 관리 페이지에서만 로드된다.
   ⚠ JS(subAccount.js) 계약: #type-filter-button·#status-filter-button 은
     button 만 직계 자식으로 가져야 한다(:nth-child(2)=정상 버튼).
   ═══════════════════════════════════════════════════════════════ */

/* 2026-08-06: 이 페이지가 함께 로드하는 레거시 navibarStyles.css 가 body 에
   max-width:90% + flex(align-items:center) 를 걸어, .main-box 가 stretch 되지 못하고
   내용 폭(약 946px)으로 줄어들었다 — 큰 모니터에서 화면이 축소돼 보이던 원인.
   이 파일은 해당 페이지에서 가장 마지막에 로드되므로 여기서 되돌린다. */
body {
  max-width: none;
  display: block;
  padding: 0;
  margin: 0;
}

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

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

/* ─ 필터 바 (기존 직원유형/관리상태 버튼 그룹을 pill 톤으로) ─ */
.rn-emp .fbar { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 14px; flex-wrap: wrap; }
.rn-emp .fblock { display: flex; flex-direction: column; gap: 6px; }
.rn-emp .flab { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); padding-left: 2px; }
.rn-emp .fpills { display: flex; gap: 6px; flex-wrap: wrap; }
.rn-emp .fpill {
  display: inline-flex; align-items: center; gap: 5px; background: var(--rn-grey);
  border: none; border-radius: 8px; padding: 8px 14px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.rn-emp .fpill:hover { background: var(--rn-grey-hover); }
.rn-emp .fpill.active { background: var(--rn-brand-soft); color: var(--rn-brand); }

/* 검색 (prototype .srch 대응 — 기존 #search-input/#search-btn 유지) */
.rn-emp .srch {
  flex: 1; min-width: 200px; max-width: 320px; margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  background: var(--rn-grey); border-radius: 10px; padding: 4px 6px 4px 14px;
}
.rn-emp .srch input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--rn-text);
  padding: 6px 0;
}
.rn-emp .srch input::placeholder { color: var(--rn-text-faint); }
.rn-emp .srch button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: none; color: var(--rn-text-dim); cursor: pointer; flex-shrink: 0;
}
.rn-emp .srch button:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
.rn-emp .srch button .material-symbols-outlined { font-size: 18px; }

/* ─ 리스트 카드 ─ */
.rn-emp .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 2px; min-width: 0;
}
.rn-emp .lsec {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 750; color: var(--rn-text-dim); padding: 10px 14px 7px;
}
.rn-emp .lsec em { font-style: normal; color: var(--rn-brand); margin-left: 3px; font-variant-numeric: tabular-nums; }
.rn-emp .mbtn {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rn-input-border);
  background: var(--rn-card-bg); border-radius: 10px; padding: 6px 12px; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--rn-grey-text); cursor: pointer; white-space: nowrap;
}
.rn-emp .mbtn:hover { border-color: var(--rn-border-hover); }
/* subAccountPage-styles.css:40-55 의 .btn{box-shadow}(hover 시 증폭)가 헤드 버튼 4개에 남았다 —
   표 겉 그림자(:73)와 같은 파일의 잔존 누출 (2026-09-02 재검수 R3) */
.rn-emp .btn, .rn-emp .btn:hover { box-shadow: none; }

/* ─ 직원 테이블 (subAccount.js 가 tr 을 동적 생성 — 구조 불변, 톤만) ─ */
/* 골격은 renewal.css 공통 표가 담당 — 여기에는 이 화면 고유 규칙만 둔다.
   이 표는 좌측 정렬이 기본이다(style.css 전역 td center 정렬 해제 포함). */
/* subAccountPage-styles.css:73 의 table{box-shadow} 가 표 겉에 선처럼 남는다 —
   renewal.css 공통 블록은 border·background 만 리셋하므로 여기서 지운다 (2026-09-02, 계약건 표와 통일) */
.rn-emp #subAccountsTable { border-collapse: separate; border-spacing: 0; box-shadow: none; }
.rn-emp #subAccountsTable thead th { text-align: left; }
.rn-emp #subAccountsTable tbody td { text-align: left; font-weight: 600; }
.rn-emp #subAccountsTable tbody tr { cursor: pointer; }
/* 첫 열(이름) 강조 · 연락처/이메일은 보조 톤 */
.rn-emp #subAccountsTable tbody td:first-child { font-weight: 750; }
.rn-emp #subAccountsTable tbody td:nth-child(2),
.rn-emp #subAccountsTable tbody td:nth-child(3) { color: var(--rn-text-sub); font-variant-numeric: tabular-nums; }
/* 빈 상태 행 (colspan=6) */
.rn-emp #subAccountsTable tbody td[colspan] {
  text-align: center; padding: 34px 10px; color: var(--rn-text-dim); font-size: 12.5px; cursor: default;
}

/* 상태 드롭다운 (JS 생성 .dropdown-container select)
   2026-08-12 검수: appearance:none 상태에서 캐럿이 없어 드롭다운으로 안 보였다 —
   커스텀 셰브론(SVG)을 부여해 '눌러서 바꾸는 것' 신호를 복원 */
.rn-emp #subAccountsTable select {
  appearance: none; -webkit-appearance: none;
  height: 34px; padding: 0 30px 0 12px;
  border: 1px solid var(--rn-border-strong); border-radius: 9px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
  background-color: var(--rn-card-bg); cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23837D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.rn-emp #subAccountsTable select:hover { border-color: var(--rn-brand); color: var(--rn-text); }
.rn-emp #subAccountsTable select:focus { border-color: var(--rn-brand); outline: none; }

/* 행 내부 버튼 (JS 생성 ._sizeS._mainLine / ._mainBg — 클래스·onclick 불변, 톤만) */
.rn-emp #subAccountsTable button._sizeS { border-radius: 8px; font-weight: 700; font-family: inherit; }
.rn-emp #subAccountsTable button._sizeS._mainLine { background: var(--rn-brand-faint); border-color: var(--rn-brand-border); color: var(--rn-brand); }
.rn-emp #subAccountsTable button._sizeS._mainLine:hover { background: var(--rn-brand); color: #fff; border-color: var(--rn-brand); }
.rn-emp #subAccountsTable button._sizeS._mainBg { background: var(--rn-brand); }
.rn-emp #subAccountsTable button._sizeS._mainBg:hover { background: var(--rn-brand-hover); }

/* ─ 페이지네이션 (subAccount.js 가 .pagination-button 생성) ─ */
.rn-emp .emp-pgn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 10px 0; margin-bottom: 24px;
}
.rn-emp .emp-pgn:empty { display: none; }
.rn-emp .emp-pgn .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-emp .emp-pgn .pagination-button:hover { background: var(--rn-border-soft); }
.rn-emp .emp-pgn .pagination-button.active { background: var(--rn-brand); color: #fff; cursor: default; }

/* ─ 하단 배너 스택 ─
   2026-08-12: 공용 position:fixed가 표 마지막 행·페이지네이션을 덮어서
   이 페이지만 문서 흐름으로 되돌렸었다.
   2026-08-21: 나머지 4페이지(계약조회·정산·입금내역·내정보)와 동작을 통일 —
   공용 fixed 유지 + js/components/bottomBannerOffset.js가 배너 높이만큼
   body 하단 여백을 확보하는 방식으로 전환(별도 override 불필요). */

/* ─ 팝업 라이트 스킨 (dialog 는 main 밖이라 .rn-emp 스코프 불가 —
     이 파일 자체가 이 페이지에서만 로드되므로 파일 단위 스코프.
     구조·클래스·트리거는 기존 그대로, 라운드/타이틀 톤만.) ─ */
/* 팝업 셸은 renewal-skin.css 공통이 담당 — 여기에는 이 화면 고유 규칙만 둔다 */

/* ═══════════════════════════════════════════════════════════════
   레거시 오버레이 팝업 정비 (2026-08-12 검수)
   ① 하위 계정 추가(#accountPopup) — .account-popup 의 div 오버레이 시절
      display:none 이 dialog[open] 까지 덮어 팝업이 아예 안 떴다(기능 결함).
      카드형 다이얼로그로 재생 + 토스 톤. DOM/JS(showModal/close) 불변.
   ② 계정 수정(#accountInfoPopup) — 뜨긴 하나 거대 폭 + 하단 절대배치 버튼.
      카드 폭 제한 + 버튼 문서 흐름 복귀.
   ③ 조직도 관리(#departmentPopup) — 여는 트리거가 없는 데드 팝업
      (employeeTree 페이지로 대체) — 의도적으로 미조치.
   ═══════════════════════════════════════════════════════════════ */
#accountPopup[open] {
  display: flex; flex-direction: column;
  width: min(440px, 92vw); height: auto; min-width: 0; min-height: 0;
  max-height: 86vh !important; /* 인라인 max-height:400px 무력화 */
  inset: 0; top: 0; left: 0; transform: none; margin: auto;
  background: var(--rn-card-bg); padding: 26px 26px 22px;
  /* 셸 공통(renewal-skin)이 .account-popup 을 제외하므로 여기서 직접 부여 */
  border: 1px solid var(--rn-border); border-radius: 16px;
  box-shadow: 0 20px 54px rgba(34, 30, 28, .24);
}
#accountPopup::backdrop { background: rgba(34, 30, 28, .4); }
#accountPopup[open] { height: fit-content; justify-content: flex-start; }
#accountPopup .popup-content {
  width: auto !important; height: auto !important; min-height: 0 !important;
  background: var(--rn-card-bg); display: block !important;
}
#accountPopup .popupTitle { margin: 0 0 16px; }
#accountPopup .popup-form label {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim);
}
#accountPopup .popup-form input[type="email"],
#accountPopup .popup-form input[type="number"] {
  margin: 0; width: 100%; border-radius: 10px; padding: 11px 14px; height: auto;
  font-size: 13.5px; border: 1px solid var(--rn-input-border);
}
#accountPopup .popup-form input:focus { border-color: var(--rn-brand); outline: none; }
#accountPopup .btns { margin-top: 18px; }
#accountPopup .btns button { border-radius: 10px; font-weight: 700; }
#accountPopup .popup-form .close-btn {
  background: var(--rn-grey); color: var(--rn-grey-text);
  width: auto; margin: 0; padding: 0 18px;
}
#accountPopup .popup-form .close-btn:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
#accountPopup .popup-form button[type="submit"] { width: auto; margin: 0; padding: 0 22px; }
#accountPopup .popup-close { top: 22px; right: 22px; color: var(--rn-text-faint); }
#accountPopup .popup-close:hover { color: var(--rn-text); }

#accountInfoPopup[open] {
  /* flex+세로센터+overflow 조합은 위쪽이 잘린다 — block 스크롤 컨테이너로 */
  display: block;
  width: min(560px, 92vw); height: fit-content; min-width: 0; min-height: 0;
  max-height: 88vh;
  inset: 0; top: 0; left: 0; transform: none; margin: auto;
  background: var(--rn-card-bg); padding: 26px 26px 22px;
  border: 1px solid var(--rn-border); border-radius: 16px;
  box-shadow: 0 20px 54px rgba(34, 30, 28, .24);
  overflow-y: auto;
}
#accountInfoPopup::backdrop { background: rgba(34, 30, 28, .4); }
/* 내부 .popup-info-content 의 자체 카드 스타일(그림자·라운드) 중화 — 카드 안 카드 방지 */
#accountInfoPopup .popup-info-content {
  position: static; width: auto; max-width: none; padding: 0;
  border-radius: 0; box-shadow: none; max-height: none; overflow: visible;
}
#accountInfoPopup .btn-group { position: static; width: 100%; left: auto; bottom: auto; margin-top: 18px; }

/* ─ 내부 정렬 전면 재작업 (2026-08-12 텔레그램 지시: 정렬·디자인 전면) ─
   레거시가 라벨을 가운데 정렬·고정폭으로 흩뜨려놨다 — 라벨 좌상단 정렬로 통일 */
#accountInfoPopup .popupTitle { margin: 0 0 4px; text-align: left; }

/* 역할 라디오 — 타이틀 아래 칩 행 (disabled = 읽기 전용 표시) */
#accountInfoPopup .horizontal-group {
  display: flex; gap: 18px; justify-content: flex-start; align-items: center;
  margin: 12px 0 16px; padding: 0;
}
#accountInfoPopup .horizontal-group label {
  display: flex; align-items: center; gap: 7px; width: auto; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--rn-grey-text); text-align: left;
}
#accountInfoPopup .horizontal-group input[type="radio"] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--rn-brand);
}

/* 폼 그룹 — 라벨 위·입력 아래, 좌측 정렬 */
#accountInfoPopup .popup-form .form-group {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; margin: 0 0 13px;
}
#accountInfoPopup .popup-form .form-group > label {
  display: block; width: auto; margin: 0; text-align: left;
  font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim);
}
#accountInfoPopup .popup-form .form-group input[type="text"] {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--rn-input-border); border-radius: 10px;
  background: var(--rn-card-bg); font-size: 13.5px; color: var(--rn-text); font-family: inherit;
}
#accountInfoPopup .popup-form .form-group input[type="text"]:focus {
  border-color: var(--rn-brand); outline: none;
}
#accountInfoPopup .popup-form input.disabled { background: var(--rn-bg); color: var(--rn-text-dim); }
#accountInfoPopup .popup-form ::placeholder { color: var(--rn-text-faint); }

/* 매물 권한·카테고리 — 종이톤 카드로 묶어 체크 영역 구분 */
#accountInfoPopup #propertyPermissionGroup,
#accountInfoPopup #propertyCategoryGroup {
  background: var(--rn-bg); border-radius: 12px; padding: 12px 14px;
}
#accountInfoPopup #propertyPermissionGroup div label,
#accountInfoPopup #propertyCategoryGroup div label {
  font-size: 12.5px; font-weight: 600; color: var(--rn-grey-text); margin: 0; width: auto;
}
/* 체크박스 — control.css 커스텀(appearance:none + ::before 흰 박스)이 배경과 겹쳐
   이중 박스로 보였다(2026-08-12 텔레그램 지시) → 네이티브+브랜드 액센트로 단일화 */
#accountInfoPopup input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--rn-brand);
}
#accountInfoPopup input[type="checkbox"]::before,
#accountInfoPopup input[type="checkbox"]::after { content: none; display: none; }

/* 자격증 파일 행 */
#accountInfoPopup .certificate-group label {
  width: auto; margin: 0 8px 0 0; text-align: left;
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
}
#accountInfoPopup .certificate-group button { border-radius: 8px; font-weight: 700; font-family: inherit; }

/* 하단 버튼 — layout.css 의 absolute(bottom:0) 고정을 해제해 폼 맨 아래 자연 배치 */
#accountInfoPopup .sub-pop-buttons {
  position: static; bottom: auto; left: auto; width: 100%;
  background: none; padding: 16px 0 0;
  margin-top: 20px; border-top: 1px solid var(--rn-border-soft);
}
#accountInfoPopup .action-buttons-container button {
  border-radius: 10px; font-weight: 700; font-family: inherit;
}