/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 공통 토큰 + 컴포넌트 (A안 확정)
   근거: docs/design/README-design-renewal.md 2절 (토큰) · 5절 (폴리시)
   제품 화면이므로 라이트 고정 (다크 미지원 — 의도된 선택)
   ═══════════════════════════════════════════════════════════════ */

@import url("renewal-tokens.css?v=20260902d");



.rn * { box-sizing: border-box; }
.rn {
  margin: 0; padding: 0;
  background: var(--rn-bg);
  color: var(--rn-text);
  font-size: 13.5px;
  line-height: 1.5;
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* 포커스 링 통일 (폴리시 A-7) — 인주색 2px + offset 2px
   텍스트 입력은 자체 보더 하이라이트가 있으므로 링 제외(이중 테두리 방지) */
.rn :is(button, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--rn-brand);
  outline-offset: 2px;
  /* 2026-09-02 민수님 지적: border-radius:4px 강제가 라운드 컨트롤을 포커스 때 각지게 만듦 — 요소 자체 radius 를 따르게 제거 */
}
.rn .authfield input:focus-visible { outline: none; }

/* 모션 최소화 존중 (폴리시 A-4) */
@media (prefers-reduced-motion: reduce) {
  .rn *, .rn *::before, .rn *::after { animation: none !important; transition: none !important; }
}

/* ─── 공통 버튼 ─── */
.rn .btn {
  display: inline-flex; align-items: center; justify-content: 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 에 따라 높이가 42/40/37px 로 갈라졌다 — 기준(계약건 42px)으로 고정
     (2026-09-02 재검수 R5) */
  line-height: 1.5;
}
.rn .btn._main { background: var(--rn-brand); color: #fff; }
.rn .btn._main:hover { background: var(--rn-brand-hover); }
.rn .btn._grey { background: var(--rn-grey); color: var(--rn-grey-text); }
.rn .btn._grey:hover { background: var(--rn-grey-hover); }

/* 네이티브 select 열림 목록 — 브라우저가 그리는 option 은 지금까지 무스타일이라 흰 사각·시스템
   폰트 그대로 노출됐다(2026-09-02 M5, 직원관리 '관리' 드롭박스 지적). 스타일 가능 범위(색·폰트·
   여백)만 토큰화한다. 완전 커스텀 목록은 브라우저 한계로 불가 — DESIGN-AUDIT-CHECKLIST.md M5 */
.rn select option {
  font-family: inherit;
  font-size: 13px;
  color: var(--rn-text);
  background: var(--rn-card-bg);
  padding: 6px 10px;
}
.rn select option:checked { color: var(--rn-brand); font-weight: 700; }

/* ═══ 팝업(dialog) 내부 공통 리셋 — 2026-09-02 5차 F1·F2·4Y-3 (체크리스트 M7)
   공통 표 블록은 페이지 4표만 커버해 팝업 표(매칭·분할·공동중개 등)에 style.css 레거시
   (외곽 #d9d9d9·td::after 세로선·#ddd)가 그대로 새어 나왔다. dialog 는 .rn main 밖에
   붙는 경우도 있어 dialog 자체를 스코프로 잡는다(renewal.css 는 리뉴얼 페이지에만 로드). ═══ */
dialog table { border: none; background: none; }
dialog table thead { background: none; }
dialog table thead th {
  background: none; border: none; border-bottom: 1px solid var(--rn-border-soft);
  font-size: 11.5px; font-weight: 750; letter-spacing: .02em; color: var(--rn-text-dim);
}
dialog table tbody td { border: none; border-bottom: 1px solid var(--rn-border-soft); }
dialog table td::after, dialog table td::before { content: none !important; }
/* 팝업 내부 직원 필터 드롭다운 — 페이지판(R4)과 동일 토큰 (style.css:195-204 제압) */
dialog .employee-filter-container > div {
  border: none; border-radius: 8px; background: var(--rn-grey);
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
}
dialog .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; cursor: pointer; }
dialog .dropdown-summary::-webkit-details-marker { display: none; }
dialog .dropdown-options {
  border-radius: 10px; border: 1px solid var(--rn-border); background: var(--rn-card-bg);
  box-shadow: var(--rn-shadow-pop); font-weight: 600; padding: 10px 12px; min-width: 168px;
}
dialog .dropdown-options::-webkit-scrollbar-thumb { background: var(--rn-border-strong); }
dialog .dropdown-option input, dialog input[type="checkbox"], dialog input[type="radio"] { accent-color: var(--rn-brand); }
/* ratio-table — style.css:621 (.ratio-info-fields .ratio-table th/td, 0,2,2)가 위 일반 규칙을
   이기므로 같은 급 이상으로 재지정 (2026-09-02 5차 F1 보강) */
dialog .ratio-info-fields .ratio-table th,
dialog .ratio-info-fields .ratio-table td { border: none; border-bottom: 1px solid var(--rn-border-soft); }
/* 팝업 내부 레거시 .btn 순검정 그림자 차단 (4Y-3) */
dialog .btn, dialog .btn:hover { box-shadow: none; }
/* 공용 dialog select 열림 목록 (5Y-6 일부) */
dialog select option { font-family: inherit; font-size: 13px; color: var(--rn-text); background: var(--rn-card-bg); }
dialog select option:checked { color: var(--rn-brand); font-weight: 700; }

/* ═══ select 열림 목록 라운드 (2026-09-02 민수님 지적 — 각진 네이티브 팝업)
   Chrome 커스터마이즈 셀렉트(appearance:base-select + ::picker)로 팝업을 토큰 규격
   (라운드 10·토큰 보더·pop 그림자)으로. 미지원 브라우저는 @supports 가드로 기존 네이티브 폴백. ═══ */
@supports selector(::picker(select)) {
  /* 페이지별 appearance:none(셰브론 폴백)이 옵트인을 덮어 픽커가 안 켜지던 회귀 — important 로 승격 (2026-09-02) */
  /* 2026-09-03 민수님 지적: base-select 는 네이티브 위젯이 아니라 일반 박스로 그려져 고정 높이 안에서 글자가 위로 붙었다
     (계좌 등록 팝업 은행명/계좌 유형, 직원관리 등 전 페이지). display 는 그대로 두고 블록 정렬만 가운데로. */
  .rn select, dialog select { appearance: base-select !important; align-content: center; }
  .rn select::picker-icon, dialog select::picker-icon { display: none; } /* 자체 셰브론 유지 — 이중 화살표 방지 */
  .rn select::picker(select), dialog select::picker(select) {
    appearance: base-select;
    border: 1px solid var(--rn-border);
    border-radius: 10px;
    background: var(--rn-card-bg);
    box-shadow: var(--rn-shadow-pop);
    padding: 5px;
    margin-top: 4px;
  }
  .rn select option, dialog select option { border-radius: 7px; padding: 8px 12px; }
  .rn select option:hover, dialog select option:hover { background: var(--rn-bg); }
}

/* ═══════════════════════════════════════════════════════════════
   비로그인(auth) 화면 — 로그인 · 회원가입 · 계정찾기 · 세션만료
   ═══════════════════════════════════════════════════════════════ */

.rn .authbg {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px 24px;
}
/* 배경 이미지 변형(._img) — 로그인·회원가입만. 계정찾기·세션만료는 무지 배경 유지 (2026-08-12)
   따뜻한 종이톤(--rn-bg 계열) 오버레이를 진하게 깔아 이미지가 은은하게만 비치도록 한다.
   하단은 푸터 가독성을 위해 배경색으로 수렴. */
.rn .authbg._img {
  background:
    linear-gradient(180deg, rgba(248, 247, 245, .86) 0%, rgba(248, 247, 245, .93) 70%, #F8F7F5 100%),
    url("../img/renewal/auth-bg.jpg") center / cover no-repeat;
}
.rn .authcard {
  width: 100%; max-width: 392px;
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(34, 30, 28, .08);
  padding: 36px 32px 28px;
}
.rn .authcard._wide { max-width: 620px; }
.rn .authlogo {
  font-size: 26px; font-weight: 800; color: var(--rn-brand);
  letter-spacing: -.03em; text-align: center;
}
.rn .authlogo a { color: inherit; text-decoration: none; }
.rn .authlogo em {
  font-style: normal; font-size: 10px; font-weight: 750;
  color: var(--rn-text-faint); letter-spacing: .1em;
  margin-left: 5px; vertical-align: 8px;
}
.rn .authsub {
  text-align: center; font-size: 12.5px; color: var(--rn-text-dim);
  margin: 7px 0 26px;
}
.rn .authfield { margin-bottom: 11px; position: relative; }
/* 필수 입력 표시 — 운영은 라벨에 `.required::after { content:" *" }` 로 별표를 붙였는데,
   리뉴얼이 라벨을 없애고 placeholder 만 남기면서 필수 여부를 알 수 없게 됐다.
   라벨을 되살리지 않고 입력칸 우측 상단에 같은 신호만 복원한다. (2026-08-07) */
@supports selector(div:has(input)) {
  .rn .authfield:has(> input[required])::after,
  .rn .authfield:has(> select[required])::after {
    content: "*";
    position: absolute; top: 9px; right: 11px;
    font-size: 12px; font-weight: 800; line-height: 1;
    color: var(--rn-st-unmatched); pointer-events: none;
  }
  /* 우측에 버튼이 붙는 필드(중복확인·인증)는 별표가 겹치므로 제외 */
  .rn .inline2 .authfield:has(> input[required])::after { display: none; }
}
.rn .authfield input {
  width: 100%;
  /* control.css:2 input{height:40px} 가 control 로드 페이지(/signup)만 40px 로 눌렀다 —
     /login 자연 높이(약 46px)와 동일해지도록 명시 (2026-09-02 3차 S-3) */
  height: auto;
  border: 1px solid var(--rn-input-border);
  border-radius: 10px;
  padding: 13px 15px;
  font: inherit; font-size: 13.5px; color: var(--rn-text);
  background: var(--rn-card-bg);
  outline: none;
  transition: border-color .15s ease;
}
.rn .authfield input:focus { border-color: var(--rn-brand); }
.rn .authfield input::placeholder { color: var(--rn-text-faint); }
/* 회원가입 역할 select — input 규칙이 input 태그만 잡아 select 는 control.css 40px·8/12 패딩
   하이브리드 + 네이티브 화살표로 렌더됐다. input 과 동일 규격 + 직원관리 표 select 규격의
   셰브론(appearance:none + SVG)으로 통일 (2026-09-02 M10, M5 열림·닫힘 전 상태) */
.rn .authfield select {
  width: 100%; height: auto;
  border: 1px solid var(--rn-input-border);
  border-radius: 10px;
  padding: 13px 34px 13px 15px;
  font: inherit; font-size: 13.5px; color: var(--rn-text);
  outline: none; cursor: pointer;
  transition: border-color .15s ease;
  appearance: none; -webkit-appearance: none;
  background-color: var(--rn-card-bg);
  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 12px center; background-size: 14px;
}
.rn .authfield select:focus { border-color: var(--rn-brand); }
.rn .authbtn {
  width: 100%; border: none; border-radius: 10px; padding: 14px;
  font: inherit; font-size: 14px; font-weight: 750;
  background: var(--rn-brand); color: #fff;
  cursor: pointer; margin-top: 8px;
  transition: background .15s ease;
}
.rn .authbtn:hover { background: var(--rn-brand-hover); }
.rn .authbtn._sub { background: var(--rn-grey); color: var(--rn-grey-text); }
.rn .authbtn._sub:hover { background: var(--rn-grey-hover); }
.rn .authlinks {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; font-size: 12.5px; color: var(--rn-text-dim);
}
.rn .authlinks a { color: inherit; text-decoration: none; cursor: pointer; }
.rn .authlinks a:hover { color: var(--rn-brand); }
.rn .authlinks i { font-style: normal; color: var(--rn-border-strong); }
.rn .authnote {
  display: flex; gap: 9px;
  background: var(--rn-bg); border-radius: 12px;
  padding: 12px 14px; margin-top: 20px;
  font-size: 11.5px; color: var(--rn-text-dim); line-height: 1.55;
}
.rn .authnote b { color: var(--rn-grey-text); }

/* 가입 단계 표시 */
.rn .authsteps { display: flex; gap: 6px; margin-bottom: 22px; }
.rn .authsteps div {
  flex: 1; text-align: center; font-size: 11.5px; font-weight: 750;
  color: var(--rn-text-faint);
  border-bottom: 2.5px solid var(--rn-border-soft);
  padding-bottom: 8px; cursor: pointer;
}
.rn .authsteps div.on { color: var(--rn-brand); border-color: var(--rn-brand); }
.rn .authsteps div.done { color: var(--rn-st-done); border-color: #C9E0CE; }

/* 2단 인라인 필드 */
.rn .inline2 { display: flex; gap: 8px; }
.rn .inline2 .authfield { flex: 1; margin-bottom: 0; }

/* 보조 확인 버튼 (인증코드 발송 등) */
.rn .vbtn {
  border: 1px solid var(--rn-brand-border); background: var(--rn-brand-faint); color: var(--rn-brand);
  border-radius: 10px; padding: 0 16px;
  font: inherit; font-size: 12.5px; font-weight: 750;
  cursor: pointer; white-space: nowrap;
}
.rn .vbtn:disabled { opacity: .45; pointer-events: none; }

/* 파일 첨부 박스 */
.rn .filebox {
  border: 1.5px dashed var(--rn-border-strong); border-radius: 12px; padding: 16px;
  text-align: center; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--rn-text-sub);
}
.rn .filebox:hover { border-color: var(--rn-brand); background: var(--rn-brand-faint); }
.rn .filebox._has { border-style: solid; border-color: #C9E0CE; color: var(--rn-st-done); }

/* 역할 세그먼트 */
.rn .roleseg { display: flex; gap: 6px; }
.rn .roleseg span {
  flex: 1; text-align: center; border: 1.5px solid var(--rn-border-faint); border-radius: 10px;
  padding: 11px 4px; font-size: 12.5px; font-weight: 700;
  color: var(--rn-grey-text); cursor: pointer; background: var(--rn-card-bg); user-select: none;
}
.rn .roleseg span.on { border-color: var(--rn-brand); background: var(--rn-brand-faint); color: var(--rn-brand); }

/* 필드 라벨 */
.rn .flabel { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); }
.rn .flabel i { font-style: normal; color: var(--rn-brand); }

/* 요금 카드 */
.rn .lppcard { background: var(--rn-card-bg); border: 1.5px solid var(--rn-border); border-radius: 16px; padding: 26px 26px 24px; }
.rn .lppcard._on { border-color: var(--rn-brand); box-shadow: 0 8px 26px rgba(129,43,39,.10); }
.rn .lppcard .tag { font-size: 11px; font-weight: 800; color: var(--rn-brand); letter-spacing: .05em; }
.rn .lppcard .amt { display: block; font-size: 30px; font-weight: 800; margin: 9px 0 3px; font-variant-numeric: tabular-nums; }
.rn .lppcard .amt s { text-decoration: none; font-size: 14px; font-weight: 700; }
.rn .lppcard .per { font-size: 12px; color: var(--rn-text-dim); }
.rn .lppcard ul { margin: 12px 0 0; padding: 0; }
.rn .lppcard li { list-style: none; font-size: 12.5px; color: var(--rn-grey-text); padding: 6px 0; display: flex; gap: 8px; }

/* 인라인 필드 에러 문구 */
.rn .ferr { font-size: 11.5px; color: var(--rn-st-unmatched); margin: 4px 2px 0; }
.rn .fok { font-size: 11.5px; color: var(--rn-st-done); margin: 4px 2px 0; }

/* auth 화면 하단 슬림 푸터 */
.rn .authfoot {
  margin-top: 28px; text-align: center;
  font-size: 11px; color: var(--rn-text-faint); line-height: 1.7;
}
.rn .authfoot a { color: inherit; text-decoration: none; }
.rn .authfoot a:hover { color: var(--rn-text-dim); }

/* ═══════════════════════════════════════════════════════════════
   공통 표 (2026-08-06)
   기준: 입금 내역(.rn-dep .dep-table). 페이지마다 th/td 여백·글자 크기·
   구분선 색이 제각각이라 화면을 넘나들 때 표가 다른 컴포넌트처럼 보였다.
   여기서 골격(카드·여백·타이포·구분선·hover)을 정하고, 페이지 CSS 는
   컬럼 폭·정렬·상태색 같은 그 화면 고유 규칙만 남긴다.
   ⚠️ 페이지 CSS 가 나중에 로드되므로, 여기 값과 겹치는 선언은 페이지에서 지워야 적용된다.
   ═══════════════════════════════════════════════════════════════ */

/* 표를 감싸는 카드 */
.rn-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;
  min-width: 0;
}

.rn-dep table.dep-table,
.rn-con .con-card table,
.rn-receipts #contractsTable,
.rn-emp #subAccountsTable {
  width: 100%;
  border: none;
  background: none;
  font-size: 13px;
  /* 레거시 bare table 선언(box-shadow 등)이 공통 블록 틈새로 새던 것을 구조적으로 차단 —
     subAccountPage-styles.css:73 table{box-shadow} 사고의 일반화 방어 (2026-09-02 3차 S-2) */
  box-shadow: none;
  border-radius: 0;
}

.rn-dep table.dep-table thead,
.rn-con .con-card thead,
.rn-receipts #contractsTable thead,
.rn-emp #subAccountsTable thead {
  background: transparent;
  color: var(--rn-text-dim);
}

.rn-dep table.dep-table thead th,
.rn-con .con-card thead th,
.rn-receipts #contractsTable thead th,
.rn-emp #subAccountsTable thead th {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .02em;
  color: var(--rn-text-dim);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rn-border-soft);
  padding: 12px 14px 8px;
  white-space: nowrap;
  text-transform: none;   /* 레거시 th 변형 누출 방어 (2026-09-02 3차 S-2) */
}

.rn-dep table.dep-table tbody,
.rn-con .con-card tbody,
.rn-receipts #contractsTable tbody,
.rn-emp #subAccountsTable tbody { background: transparent; color: var(--rn-text); }

.rn-dep table.dep-table tbody td,
.rn-con .con-card tbody td,
.rn-receipts #contractsTable tbody td,
.rn-emp #subAccountsTable tbody td {
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--rn-border-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;   /* 숫자 열 자릿수 흔들림 방지 */
  letter-spacing: normal;               /* 레거시 td 자간·변형 누출 방어 (2026-09-02 3차 S-2) */
  text-transform: none;
}

/* 마지막 행은 카드 테두리와 이중선이 되므로 구분선을 지운다 */
.rn-dep table.dep-table tbody tr:last-child td,
.rn-con .con-card tbody tr:last-child td,
.rn-receipts #contractsTable tbody tr:last-child td,
.rn-emp #subAccountsTable tbody tr:last-child td { border-bottom: none; }

/* style.css 가 셀마다 그리는 회색 세로 막대 제거 — 리뉴얼 표는 가로선만 쓴다 */
.rn-dep table.dep-table tbody td::after,
.rn-con .con-card tbody td::after,
.rn-receipts #contractsTable tbody td::after,
.rn-emp #subAccountsTable tbody td::after { content: none; display: none; }

.rn-dep table.dep-table tbody tr:hover td,
.rn-con .con-card tbody tr:hover td,
.rn-receipts #contractsTable tbody tr:hover td,
.rn-emp #subAccountsTable tbody tr:hover td { background: var(--rn-bg); }

/* 번호 열은 어느 표에서나 좁고 흐리게 */
.rn-dep table.dep-table .numCell,
.rn-con .con-card .numCell,
.rn-receipts #contractsTable .numCell,
.rn-emp #subAccountsTable .numCell { width: 56px; color: var(--rn-text-dim); }

/* ─── 라이트 모달 (안내 팝업) ─── */
.rn .rmodal-overlay {
  position: fixed; inset: 0;
  background: rgba(34, 30, 28, .4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.rn .rmodal-card {
  width: min(400px, 92vw);
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 54px rgba(34, 30, 28, .24);
}
.rn .rmodal-title { font-size: 16px; font-weight: 800; margin: 0 0 10px; }
.rn .rmodal-desc {
  font-size: 13.5px; line-height: 1.6; color: var(--rn-grey-text);
  white-space: pre-line; margin: 0;
}
.rn .rmodal-actions {
  margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   대시보드 (2026-08-05 이식)
   프로토타입 #page-dashboard 구조 대응 — main.html 전용(.rn-dash)
   결정 #9: 처리필요 피드(.feed)와 본문 3열(.cols)은 같은 grid 트랙 공유
   ═══════════════════════════════════════════════════════════════ */

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

/* ─ 헤드 ─ */
.rn-dash .head { display: flex; align-items: flex-start; justify-content: space-between; margin: 6px 0 12px; gap: 12px; flex-wrap: wrap; }
.rn-dash .head h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.3; color: var(--rn-text); }
.rn-dash .hsub { font-size: 14px; font-weight: 500; color: var(--rn-text-sub); margin-top: 6px; }
.rn-dash .hsub b { color: var(--rn-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.rn-dash .headacts { display: flex; gap: 8px; align-items: center; }
.rn-dash .hbadge {
  font-style: normal; background: var(--rn-brand-soft); color: var(--rn-brand);
  border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px;
  margin-left: 2px; font-variant-numeric: tabular-nums; line-height: 1.5;
}

/* ─ 담당자 필터 — 기존 employeeFilter 컴포넌트를 pill 톤으로 (결정 #7: grab 커서 금지) ─ */
.rn-dash .employee-filter-container { gap: 8px; padding-bottom: 6px; margin-bottom: 4px; cursor: default; }
.rn-dash .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-dash .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; }
.rn-dash .dropdown-summary::-webkit-details-marker { display: none; }
.rn-dash .dropdown-options {
  border-radius: 10px; border: 1px solid var(--rn-border);
  box-shadow: 0 14px 34px rgba(34, 30, 28, .16); font-weight: 600; padding: 10px 12px;
  min-width: 168px; /* fixed 재배치 시 칩 폭(inline width)보다 좁아지지 않게 */
}
.rn-dash .dropdown-option { gap: 7px; font-size: 12.5px; }
.rn-dash .dropdown-option label { white-space: nowrap; }
.rn-dash .dropdown-option:not(:last-child) { margin-bottom: 8px; }
.rn-dash .dropdown-option input { accent-color: var(--rn-brand); }
.rn-dash .selected-employees { margin: 8px 0 14px; gap: 6px; }
.rn-dash .selected-employee { background: var(--rn-brand-soft); border-radius: 8px; padding: 4px 8px; }
.rn-dash .selected-employee .employee-name { color: var(--rn-brand); font-size: 11.5px; font-weight: 750; }
.rn-dash .selected-employee .remove-employee { color: var(--rn-brand); font-size: 12px; }
.rn-dash .selected-employee .remove-employee:hover { color: var(--rn-brand-hover); }

/* ─ 처리 필요 피드 (대표 전용 — 결정 #5) ─ */
.rn-dash .feedlab { display: flex; align-items: center; gap: 7px; margin: 2px 0 7px; }
.rn-dash .feedlab .chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px;
  padding: 2px 8px; background: var(--rn-brand-soft); color: var(--rn-brand);
}
.rn-dash .feednote { font-size: 11px; color: var(--rn-text-dim); }
.rn-dash .feed { margin-bottom: 14px; }
.rn-dash .feed,
.rn-dash .cols { display: grid; grid-template-columns: 1fr 0.95fr 1.15fr; gap: 14px; align-items: stretch; }
.rn-dash .feed > *,
.rn-dash .cols > * { min-width: 0; }
.rn-dash .fcard {
  display: flex; align-items: center; gap: 10px; background: var(--rn-card-bg);
  border: 1px solid var(--rn-border); border-radius: 12px; padding: 10px 14px;
  cursor: pointer; transition: transform .12s ease;
}
.rn-dash .fcard:hover { transform: translateY(-1px); }
.rn-dash .fico {
  width: 34px; height: 34px; border-radius: 12px; background: var(--rn-st-wait-soft);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.rn-dash .ftx { flex: 1; min-width: 0; }
.rn-dash .ftx b { display: block; font-size: 13px; font-weight: 750; }
.rn-dash .ftx > span { font-size: 11px; color: var(--rn-text-dim); }
.rn-dash .fact { font-size: 12px; font-weight: 750; color: var(--rn-brand); white-space: nowrap; }

/* ─ 카드 공통 ─ */
.rn-dash .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: 16px 18px; min-width: 0;
}
.rn-dash .ctitle { font-size: 13px; font-weight: 750; color: var(--rn-text-dim); margin-bottom: 8px; }

/* ─ 목표 · 실적 카드 (1단 스택 — 결정 #2) ─ */
.rn-dash .gcols { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 10px; }
.rn-dash .gblk { border: 1px solid var(--rn-border-faint); border-radius: 10px; padding: 9px 12px; min-width: 0; }
.rn-dash .gt { font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim); display: flex; align-items: center; gap: 5px; }
.rn-dash .gdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.rn-dash .gvv {
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  margin-top: 3px; letter-spacing: -.02em; white-space: nowrap;
}
.rn-dash .ggoal {
  display: flex; align-items: center; gap: 4px; font-size: 11.5px;
  color: var(--rn-text-dim); margin-top: 7px; white-space: nowrap;
}
/* JS(adjustInputWidth/border 토글)가 inline width·border를 만지므로 !important로 형태 고정 */
.rn-dash .gin {
  flex: 0 0 auto; width: 112px; max-width: 150px; min-width: 0;
  border: 1px solid var(--rn-input-border) !important; border-radius: 6px; padding: 3px 7px;
  font: inherit; font-size: 12px; font-weight: 700; text-align: right;
  color: var(--rn-text); background: var(--rn-card-bg); outline: none;
}
.rn-dash .gin:focus { border-color: var(--rn-brand) !important; }
.rn-dash .gbar { height: 7px; border-radius: 4px; background: var(--rn-border-soft); overflow: hidden; margin-top: 8px; }
.rn-dash .gbar i { display: block; height: 100%; width: 0%; border-radius: 4px; transition: width .3s ease; }
.rn-dash .gpct2 { font-size: 12px; font-weight: 800; margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }

/* ─ 캘린더 카드 (HtmlCalendar 마크업 위에 톤만 입힘) ─ */
.rn-dash .calcard { padding: 12px 14px; display: flex; flex-direction: column; }
.rn-dash .calendarBox { width: 100%; }
.rn-dash .calendarBox .calenderHead { margin-bottom: 6px; }
.rn-dash .calendarBox .calenderHead .calenderTit { font-size: 14.5px; color: var(--rn-text); font-weight: 750; }
.rn-dash .calendarBox .calenderHead .dfIcon { font-size: 20px; color: var(--rn-text-dim); border-radius: 6px; }
.rn-dash .calendarBox .calenderHead .dfIcon:hover { background: var(--rn-border-soft); color: var(--rn-grey-text); }
.rn-dash .calendarBox table.calendarTable { border: none; font-size: 11.5px; background: none; }
/* style.css:16·20 table thead/tbody 레거시 색(#72777A·#222) 누출 — 토큰 명시 (2026-09-02 3차 Y2) */
.rn-dash .calendarBox .calendarTable thead { background: none; color: var(--rn-text-faint); }
.rn-dash .calendarBox .calendarTable thead td {
  color: var(--rn-text-faint); font-weight: 750; font-size: 10.5px; padding: 2px 0; border: none;
}
.rn-dash .calendarBox .calendarTable tbody { background: none; color: var(--rn-text); }   /* 2026-09-02 3차 Y2 */
.rn-dash .calendarBox .calendarTable tbody td { padding: 2px 0; border-bottom: none; }
.rn-dash .calendarBox .calendarTable tbody tr:last-child td { border-bottom: none; }
.rn-dash .calendarBox .calendarTable tbody td > span {
  width: 27px; height: 27px; line-height: 27px; border-radius: 8px;
  font-weight: 600; font-size: 11.5px;
}
.rn-dash .calendarBox .calendarTable tbody td > span:hover { background: var(--rn-border-soft); }
.rn-dash .calendarBox .calendarTable .currentMonthDay > span.current {
  color: var(--rn-brand); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--rn-brand);
}
.rn-dash .calendarBox .calendarTable .currentMonthDay > span.on { background: var(--rn-brand); color: #fff; font-weight: 800; box-shadow: none; }
.rn-dash .calendarBox .calendarTable .prevMonthDay > span,
.rn-dash .calendarBox .calendarTable .nextMonthDay > span { color: var(--rn-border-hover); }

/* 할 일 칩 — 캘린더 점 색과 1:1 (결정 #6): 계약서 var(--rn-st-matched) · 인도 var(--rn-st-done) · 만기 var(--rn-text-dim) */
.rn-dash .tchips { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.rn-dash .tchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650;
  color: var(--rn-grey-text); border: 1px solid var(--rn-input-border); border-radius: 6px;
  padding: 3px 9px; cursor: pointer; user-select: none; white-space: nowrap; background: var(--rn-card-bg);
}
.rn-dash .tchip:hover { background: var(--rn-bg); }
.rn-dash .tchip.active { background: var(--rn-border-soft); font-weight: 750; }
.rn-dash .tchip b { font-variant-numeric: tabular-nums; font-weight: 750; }
.rn-dash .tchip .tdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.rn-dash .tchip .tdot._ct { background: var(--rn-st-matched); }
.rn-dash .tchip .tdot._mv { background: var(--rn-st-done); }
.rn-dash .tchip .tdot._ex { background: var(--rn-text-dim); }

/* ─ 일정 리스트 카드 ─ */
.rn-dash .listcard { padding: 10px 10px 8px; display: flex; flex-direction: column; }
.rn-dash .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: 4px 8px 8px;
}
.rn-dash .lsec em { font-style: normal; color: var(--rn-brand); margin-left: 3px; font-variant-numeric: tabular-nums; }
/* 섹션 제목 — 대응 규칙이 없어 상속 폰트로 렌더되던 것을 정의한다 (2026-08-07) */
.rn-dash .ltit { font-size: 12.5px; font-weight: 750; color: var(--rn-text); white-space: nowrap; }
/* 일정 행의 임차·임대 구분 라벨 — 운영 표의 컬럼 헤더가 담당하던 역할 */
.rn-dash .lmain .lpart {
  font-style: normal; font-size: 10.5px; font-weight: 750;
  color: var(--rn-text-dim); background: var(--rn-grey);
  border-radius: 3px; padding: 1px 4px; margin-right: 2px;
}
.rn-dash .expchk {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 650; color: var(--rn-text-dim); cursor: pointer; white-space: nowrap;
}
.rn-dash .expchk input { accent-color: var(--rn-brand); margin: 0; }
.rn-dash .lrows { flex: 1; min-height: 0; }
.rn-dash .lrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.rn-dash .lrow:hover { background: var(--rn-bg); }
.rn-dash .lico {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 800; flex-shrink: 0;
}
.rn-dash .lico._ct { background: var(--rn-st-matched-soft); color: var(--rn-st-matched); }
.rn-dash .lico._mv { background: var(--rn-st-done-soft); color: var(--rn-st-done); }
.rn-dash .lico._ex { background: var(--rn-grey); color: var(--rn-text-dim); }
.rn-dash .lico._n { background: var(--rn-grey); color: var(--rn-text-dim); }
.rn-dash .lmain { flex: 1; min-width: 0; }
/* 주소·서브라인 말줄임 → 줄바꿈 복원 (2026-08-10 밀도 복원 — 운영 표는 접혀서 전부 보였음) */
.rn-dash .lmain b {
  display: block; font-size: 13.5px; font-weight: 750; letter-spacing: -.015em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.rn-dash .lmain > span {
  font-size: 11.5px; color: var(--rn-text-dim); display: block;
  line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere;
}
/* 순번 — 운영 표의 번호 컬럼 복원 (2026-08-10) */
.rn-dash .lnum {
  min-width: 18px; text-align: right; font-size: 11px; font-weight: 700;
  color: var(--rn-text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums;
}
/* 전화 아이콘 — style.css의 22px(.status-icon)을 서브라인 11.5px에 맞게 축소 (2026-08-10) */
.rn-dash .lmain .status-icon { max-width: 12px; vertical-align: -2px; }
.rn-dash .chev { color: var(--rn-border-hover); font-size: 15px; font-weight: 700; flex-shrink: 0; }

/* 일정 서브라인의 기존 dfTag를 토큰 색으로 재도색 */
.rn-dash .lmain .dfTag {
  display: inline-flex; height: auto; padding: 1px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; vertical-align: 1px;
}
.rn-dash .lmain .dfTag._blue { color: var(--rn-st-matched); background: var(--rn-st-matched-soft); }
.rn-dash .lmain .dfTag._green { color: var(--rn-st-done); background: var(--rn-st-done-soft); }
.rn-dash .lmain .dfTag._red { color: var(--rn-st-unmatched); background: #F9ECEA; border: none; }

/* 로딩 · 빈 상태 */
.rn-dash .dash-loading,
.rn-dash .dash-empty { padding: 34px 10px; text-align: center; font-size: 12.5px; color: var(--rn-text-dim); }

/* 페이지네이션 (main.page.js가 button을 동적 생성) */
.rn-dash .rn-pgn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px 4px; border-top: 1px solid var(--rn-border-soft); margin-top: 4px;
}
.rn-dash .rn-pgn:empty { display: none; }
.rn-dash .rn-pgn 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-dash .rn-pgn button:hover { background: var(--rn-border-soft); }
.rn-dash .rn-pgn button[disabled] { background: var(--rn-brand); color: #fff; cursor: default; }

/* 좁은 화면: 3열 -> 1열 */
@media screen and (max-width: 1279px) {
  .rn-dash .feed,
  .rn-dash .cols { grid-template-columns: 1fr; }
}