/* ═══════════════════════════════════════════════════════════════
   PropVis 리뉴얼 전역 스킨 (Phase A)
   naviBar 프래그먼트를 통해 로그인 후 46개 페이지 전체에 로드된다.
   기존 CSS(reset/global/control/layout/style) 뒤에 로드되어 팔레트·
   타이포·사이드바·버튼·입력을 A안 토큰으로 덮는다.
   페이지 구조(레이아웃 치수)는 건드리지 않는다 — 구조 이식은 페이지별 진행.
   근거: docs/design/README-design-renewal.md 2절
   ═══════════════════════════════════════════════════════════════ */

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


/* ─── 전역 타이포·배경 ─── */
body {
  font-family: "Pretendard", "SUIT", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: var(--rn-bg);
  color: var(--rn-text);
}

/* ─── 상단 헤더 바 ─── */
.header {
  background: rgba(248, 247, 245, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rn-border-faint);
}
.header .main-color { color: var(--rn-brand); }

/* ─── 사이드바 ─── */
.side-menu {
  border-right: 1px solid var(--rn-border-faint);
  background: var(--rn-card-bg);
}
.side-menu .logo-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--rn-brand);
  letter-spacing: -.02em;
}
.side-menu .logo-beta {
  font-size: 9px;
  font-weight: 750;
  color: var(--rn-text-faint);
  letter-spacing: .1em;
  background: none;
  padding: 0;
}
.side-menu-list .menu-section {
  border-bottom: none;
  padding: 8px 0;
}
.side-menu-list .section-title {
  font-size: 10.5px;
  font-weight: 750;
  color: var(--rn-text-faint);
  letter-spacing: .08em;
  margin-bottom: 2px;
  padding: 0 10px;
}
.side-menu-list .menu-box {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--rn-grey-text);
  padding: 9px 10px;
  border-radius: 8px;
}
.side-menu-list .menu-box .material-symbols-outlined {
  font-size: 18px;
  margin-right: 9px;
  color: var(--rn-text-dim);
  transition: color .15s ease;
}
/* 구 그라데이션 hover 제거 → 은은한 배경 */
.side-menu-list .menu-box:hover {
  background: var(--rn-bg);
  color: var(--rn-text);
  font-weight: 650;
}
.side-menu-list .menu-box:hover .material-symbols-outlined { color: var(--rn-grey-text); }
.side-menu-list .menu-box.active {
  background: var(--rn-brand-soft);
  color: var(--rn-brand);
  font-weight: 750;
}
.side-menu-list .menu-box.active .material-symbols-outlined { color: var(--rn-brand); }
.side-menu-list .menu-box .badge {
  background: var(--rn-brand);
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 999px;
}
.side-menu .close-btn {
  background: var(--rn-card-bg);
  color: var(--rn-text-dim);
  border: 1px solid var(--rn-border);
  box-shadow: 0 1px 6px rgba(34, 30, 28, .08);
}

/* ─── 버튼 ─── */
button {
  border-radius: 10px;
  font-weight: 700;
}
button._sizeL, button._sizeM { font-size: 13.5px; }
button._sizeS { font-size: 12.5px; border-radius: 8px; }
/* 전역 진갈색 hover(#570400) 무력화 → 클래스별 hover 재정의 */
button:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
button._mainBg { background: var(--rn-brand); color: #fff; }
button._mainBg:hover { background: var(--rn-brand-hover); color: #fff; }
button._mainLine { background: var(--rn-brand-faint); color: var(--rn-brand); border: 1px solid var(--rn-brand-border); }
button._mainLine:hover { background: var(--rn-brand-soft); color: var(--rn-brand); }
button._grayBg { background: var(--rn-grey); color: var(--rn-text-dim); }
button._grayBg:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
button._blackLine { background: var(--rn-card-bg); color: var(--rn-grey-text); border: 1px solid var(--rn-border-strong); }
button._blackLine:hover { background: var(--rn-bg); color: var(--rn-text); }
button._redLine { background: var(--rn-danger-faint); color: var(--rn-st-unmatched); border: 1px solid var(--rn-danger-border); }
button._redLine:hover { background: var(--rn-st-unmatched); color: #fff; border-color: var(--rn-st-unmatched); }
button._sizeL.active { background: var(--rn-brand); color: #fff; border-color: var(--rn-brand); }
button._iconBtn:hover { background: inherit; color: inherit; }
button:disabled, button:disabled:hover { background: none; border: none; color: var(--rn-text-faint); }

/* 레거시 ID 버튼 편입 — style.css:587 의 #reset-btn 이 부트스트랩 파란색(#007BFF)으로
   정의돼 있어 ID 명시도로 위 위계를 전부 덮는다. 브랜드 중립(_grayBg) 톤으로 되돌린다.
   대상: 계약건 조회·영수증처리·협의서 등 '초기화' 버튼 (2026-08-06) */
button#reset-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--rn-grey); border: none; color: var(--rn-grey-text);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700;
}
button#reset-btn:hover { background: var(--rn-grey-hover); color: var(--rn-text); }
button#reset-btn .material-symbols-outlined { font-size: 16px; }

/* 하단 안내 배너의 CTA — style.css:2778 가 #7a0000(브랜드보다 어둡고 붉은 톤)을 쓴다.
   화면에서 가장 크게 보이는 버튼이라 인주색과 어긋나면 바로 눈에 띈다. */
.register-btn,
button#open-deposit-account-popup-btn {
  background: var(--rn-brand);
  border-radius: 8px;
  font-weight: 700;
}
.register-btn:hover,
button#open-deposit-account-popup-btn:hover {
  background: var(--rn-brand-hover);
  color: #fff;
  transform: none;           /* 살짝 떠오르는 효과 제거 — 리뉴얼은 평면 상호작용 */
  box-shadow: none;
}

/* 아이콘·텍스트 버튼의 순수 검정(#000) → 리뉴얼 본문색.
   레거시 버튼들이 color 를 지정하지 않아 브라우저 기본 검정으로 떨어지던 것을 맞춘다. */
button:not([class*="_main"]):not([class*="_red"]):not(.register-btn) .material-symbols-outlined { color: inherit; }
/* ⚠️ 여기에 ID 셀렉터를 두면 안 된다 (2026-09-01 R4).
   #allBtn·#monthly-mode-btn·#custom-mode-btn·#search-btn 을 나열했더니 ID 명시도(1,0,0)가
   페이지 CSS 의 클래스 상태 규칙(.rn-dep .dep-tabs button / .rn-con .seg button — (0,2,1))을 이겨
   입금내역 "전체" 탭이 비활성인데 활성색으로, 계약건·영수증 세그먼트 idle 색이 본문색으로 굳었다.
   리뉴얼 페이지는 전부 자체 색을 갖고 있고, 레거시 화면은 reset 의 color:inherit 로 body 색(=본문 토큰)을
   받으므로 제거해도 값이 달라지지 않는다. 클래스 상태 규칙만 남긴다. */
.pagination-button, .remove-employee, .search-tab { color: var(--rn-text); }

/* 채팅 위젯 비활성 탭 — chat-widget.css 의 #888(차가운 회색)을 리뉴얼 중립(따뜻한 회색)으로.
   활성 탭은 이미 브랜드색이라 그대로 둔다. 위젯이 전 페이지에 떠 있어 톤 차이가 계속 눈에 띈다. */
.cw-tab { color: var(--rn-text-dim); }
.cw-tab.cw-tab-active { color: var(--rn-brand); }

/* ─── 팝업(dialog) ───
   같은 공용 팝업(commonPopup·alertPopup·confirmPopup·certificatePopup 등)인데
   페이지마다 라운드가 달랐다 — 직원관리는 dialog.df-popup 전체에 16px 를 줬고,
   내정보는 특정 ID 만 나열해 공용 팝업이 레거시 4px 로 남아 있었다.
   여기서 공통 셸(라운드·보더·백드롭·타이틀)을 정하고, 페이지 CSS 는 그 화면 고유 규칙만 둔다.
   (2026-08-06) */
/* ⚠️ 일부 dialog 는 레거시 '전체화면 오버레이'(.account-popup·.department-popup·
   .popup-info-overlay — position:fixed + 화면 전체 + 반투명 검정 배경)를 그대로 쓰고
   display 토글로 열린다. 여기에 테두리·라운드를 주면 화면 가장자리에 선이 생기므로 제외한다.
   이들은 구조 자체를 리뉴얼할 때 함께 정리한다. */
dialog.df-popup:not(.account-popup):not(.department-popup):not(.popup-info-overlay) {
  border: 1px solid var(--rn-border);
  border-radius: 16px;
  box-shadow: 0 20px 54px rgba(34, 30, 28, .24);
}
dialog.df-popup::backdrop { background-color: rgba(34, 30, 28, .4); backdrop-filter: blur(1px); }
dialog.df-popup .popupTitle {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
}
/* 닫기 X — match-popup.css 에만 있던 규격을 공통으로. 이게 없으면 페이지 CSS 의 맨 `button{}` 규칙
   (직원관리 subAccountPage-styles.css:543 `button{background:#630000}`)이 X 에 새어 44px 검붉은 사각형이 됐다(G4 D11).
   명시도 (0,2,1) 로 페이지의 태그·단일 클래스 규칙을 이긴다. 위치는 style.css(우 32·상 28 absolute) 그대로. */
dialog.df-popup .popup-close-button {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; 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 { background: var(--rn-grey); color: var(--rn-grey-text); }

/* 공용 alert/confirm(popups.js — static/popups/membershipUpgradeRequest.html) 셸 고정 (2026-09-01)
   G1 §1 df-popup 규격: r16 · 제목 19/800 좌측 · 백드롭 토큰+blur · 버튼 flex-end(취소 → 확인).
   예전엔 마크업 인라인 style(제목 가운데·버튼 가운데/space-between·min-height 25vh·취소 #9c9ca9)이
   셸을 정했고, 페이지 CSS(.df-popup .btn-group absolute 등)와 섞여 화면마다 달랐다.
   ID 스코프(1,1,1)라 페이지의 클래스 규칙은 이 셸을 덮지 못한다. 마크업에는 인라인 style 을 두지 않는다. */
dialog.df-popup#alertPopup,
dialog.df-popup#confirmPopup {
  min-width: 0; width: min(440px, 92vw);
  min-height: 0;
  padding: 28px 28px 24px;
}
/* display 는 [open] 에만 — 닫힌 dialog 의 UA display:none 을 덮지 않는다(popups.js 도 open 시 flex 로 맞춘다) */
dialog.df-popup#alertPopup[open],
dialog.df-popup#confirmPopup[open] { display: flex; flex-direction: column; }
dialog.df-popup#alertPopup .popup-header,
dialog.df-popup#confirmPopup .popup-header { flex-shrink: 0; padding-right: 40px; }
dialog.df-popup#alertPopup .popupTitle,
dialog.df-popup#confirmPopup .popupTitle { text-align: left; margin: 0 0 12px; line-height: 1.35; }
dialog.df-popup#alertPopup .popup-close-button,
dialog.df-popup#confirmPopup .popup-close-button { right: 24px; top: 22px; }
dialog.df-popup#alertPopup .popup-content,
dialog.df-popup#confirmPopup .popup-content {
  flex: 1 1 auto; display: block; height: auto; overflow-y: auto;
  min-height: 44px;
}
dialog.df-popup#alertPopup .popup-content p,
dialog.df-popup#confirmPopup .popup-content p {
  margin: 0; text-align: left; font-size: 13.5px; font-weight: 500; line-height: 1.6;
  color: var(--rn-text-sub); white-space: pre-line; word-break: keep-all;
}
dialog.df-popup#alertPopup .btn-group,
dialog.df-popup#confirmPopup .btn-group {
  position: static; width: auto; left: auto; bottom: auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 22px; flex-shrink: 0;
}
dialog.df-popup#alertPopup .btn-group button,
dialog.df-popup#confirmPopup .btn-group button { min-width: 88px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700; }
dialog.df-popup#confirmPopup #cancelBtn { background: var(--rn-grey); color: var(--rn-grey-text); border: none; }
dialog.df-popup#confirmPopup #cancelBtn:hover { background: var(--rn-grey-hover); color: var(--rn-text); }

/* ─── 표 ─── */
/* style.css:23 이 셀마다 20px 짜리 회색 세로 막대(#d9d9d9)를 ::after 로 그린다.
   리뉴얼 표는 가로 구분선만으로 행을 나누는 설계라, 이 세로선이 남으면 칸이 조각나 보이고
   색도 리뉴얼 보더(var(--rn-border)·var(--rn-grey))보다 진해 표가 붕 떠 보인다.
   직원관리에서만 개별로 꺼두었던 것을 리뉴얼 표 전체에 적용한다. (2026-08-06) */
table:not(.calendarTable) tbody td:not(:last-child)::after { display: none; }

/* 마지막 행 아래 굵은 경계선(style.css:22, #d9d9d9)도 카드 테두리와 겹쳐 이중선으로 보인다 */
table tbody tr:last-child td { border-bottom-color: var(--rn-border-soft); }

/* ─── 직원 필터 드롭다운 스크롤바 — style.css:204 의 #c9c9c9 썸이 페이지판 열림 목록에
   그대로 남았다(팝업판은 renewal.css dialog 블록이 커버). 이 파일은 naviBar 가 body 에
   주입해 캐스케이드 최후순위라 동일 명시도로 이긴다 (2026-09-02 M10) ─── */
.dropdown-options::-webkit-scrollbar-thumb { background: var(--rn-border-strong); }

/* ─── 입력 컨트롤 ─── */
input, select, textarea {
  border: 1px solid var(--rn-input-border);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--rn-text);
  font-family: inherit;
}
input::placeholder, select::placeholder, textarea::placeholder { color: var(--rn-text-faint); }
/* 2026-09-07 민수님 신고: 체크박스·라디오까지 이 규칙을 타서 클릭 시 상자 둘레에 브랜드색 선이 남았다(전 페이지).
   체크박스·라디오는 제외 — 포커스여도 칸 색칠(체크 상태)만 보인다. 키보드 Tab 이동 시에만 아래 :focus-visible 링. */
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border: 1px solid var(--rn-brand); outline: none; }
input[type="checkbox"]:focus, input[type="radio"]:focus { border: none; outline: none; box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--rn-brand); outline-offset: 2px; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--rn-grey);
  border: 1px solid var(--rn-input-border);
  color: var(--rn-text-dim);
  border-radius: 10px;
}
/* ─── 키보드 포커스 링 (폴리시 A-7 의 전역 확장, 2026-09-01 R11) ───
   renewal.css 의 링은 `.rn` 스코프 안에서만 걸려 사이드바·헤더·공지·membership 처럼 `.rn` 밖에 있는
   요소는 브라우저 기본 링(검정 1px)이거나 아예 없었다. 여기서 스코프 없이 한 번 정의한다.
   `.rn` 안은 renewal.css 규칙(명시도 더 높음)이 그대로 이긴다 — 값이 같아 겹쳐도 무해.
   :focus-visible 이라 마우스 클릭에는 뜨지 않고 Tab 이동에만 뜬다. */
:is(button, select, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rn-brand);
  outline-offset: 2px;
}
/* 텍스트 입력 — 보더 하이라이트(위 input:focus)만으로는 옅어 브랜드 소프트 2px 링을 덧댄다.
   outline 이 아니라 box-shadow 라 페이지 CSS 의 `outline:none` 에 지워지지 않는다. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible, textarea:focus-visible { box-shadow: 0 0 0 2px var(--rn-brand-soft); }
/* 검색 알약(계약건 .srchbox · 입금 .srch · 영수증 .srchwrap · 정산 .adj-srch · 직원 .srch)은 input 자체가
   `border:none; outline:none` 이라 포커스 시 아무 변화가 없었다(G2 D-3). 컨테이너에 :focus-within 으로
   안쪽 1px 브랜드 선 + 바깥 2px 소프트 링을 그린다 — 위 텍스트 입력 링과 같은 모양. */
:is(.srchbox, .srch, .srchwrap, .adj-srch):focus-within {
  box-shadow: inset 0 0 0 1px var(--rn-brand), 0 0 0 2px var(--rn-brand-soft);
}
:is(.srchbox, .srch, .srchwrap, .adj-srch) input:focus-visible { box-shadow: none; }

.control-box label { font-size: 12.5px; font-weight: 700; color: var(--rn-text-sub); }
input[type="checkbox"]::before { border-radius: 4px; }
input[type="checkbox"], input[type="radio"] { border-radius: 0; }

.error-msg { font-size: 12px; color: var(--rn-st-unmatched); }

/* ─── 카드류 공통 (배경 흰 박스 → 보더+라운드 12px) ─── */
.dashboardBox, .otherCard, .todoBox, .calendarBox, .chartBox,
.whiteBox, .contentBox, .searchBox, .listBox, .tableBox {
  border-radius: 12px;
}

/* ─── 대시보드 구 그라데이션 정리 ─── */
.dashboardTodo .otherCard {
  background: var(--rn-brand);
  border-radius: 12px;
  font-size: 18px;
}
.dashboardTodo .otherCard .bg { opacity: .12; font-size: 72px; }
.todoList { border-radius: 10px; }
.todoList._gray.active, .todoList._gray:hover { background: var(--rn-grey-text); color: #fff; }
.todoList._blue.active, .todoList._blue:hover { background: var(--rn-st-matched); color: #fff; }
.todoList._green.active, .todoList._green:hover { background: var(--rn-st-done); color: #fff; }
.todoList._orange.active, .todoList._orange:hover { background: var(--rn-st-wait); color: #fff; }

/* ─── 하단 푸터 라이트화 (구 다크 푸터) ─── */
#footer {
  background: transparent !important;
  border-top: 1px solid var(--rn-border-faint);
}
#footer .footer_in h2,
#footer .footer_in dl dd,
#footer .footer_in dl dd b,
#footer .footer_in .foot_menu li a,
#footer .copyright {
  color: var(--rn-text-dim) !important;
}
#footer .footer_in h2 { color: var(--rn-text-faint) !important; }

/* ─── 직원 필터 칩 (전역 통일) ───
   레거시 style.css:379~391 이 인주색 알약 배경 + 흰 글씨였다. 리뉴얼은 연한 배경 +
   인주 글씨인데, 그 규칙을 **페이지 CSS 마다 따로** 정의해 두어 매칭 팝업(dialog)처럼
   페이지 스코프(.rn-con 등) 밖에서 뜨는 곳은 레거시 흰 글씨가 그대로 남아
   "이름이 안 보이는" 상태가 됐다(2026-08-07 발견).
   → 스코프 없이 여기서 한 번 정의한다. 페이지별 중복 정의는 같은 값이라 무해. */
.selected-employees { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-employee {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--rn-brand-soft);
  border-radius: 8px;
}
.selected-employee .employee-name {
  color: var(--rn-brand);
  font-size: 11.5px;
  font-weight: 750;
}
.selected-employee .remove-employee {
  color: var(--rn-brand);
  font-size: 12px;
  opacity: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.selected-employee .remove-employee:hover { color: var(--rn-brand-hover); background: none; opacity: 1; }

/* ─── 스크롤바 (은은하게) ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rn-border-strong); border-radius: 999px; border: 2px solid var(--rn-bg); }
::-webkit-scrollbar-track { background: transparent; }