/* 채용 화면 (HRrecruitment.md). 표·패널·단추는 app.css 공용 스타일을 쓰고, 달력·단계·결과 표시만 여기서 더한다. */

/* 패널 사이 여백 — 채용현황·평가표·정규직 전환처럼 패널이 여럿 쌓이는 화면 */
.rc-page > .panel, .rc-page > .rc-grid, .rc-page > .stats { margin-bottom: 18px; }   /* 다른 탭과 같은 18px */
.rc-page > :last-child { margin-bottom: 0; }
/* 채용 하위 메뉴 어느 화면이든 패널 사이 여백 (base.html 이 main 에 rc-main 을 붙인다) */
.rc-main > .panel, .rc-main > .rc-grid, .rc-main > .stats, .rc-main > form.panel { margin-bottom: 18px; }
/* 카드는 부서 현황(department-summary)과 같은 틀·마우스 오버를 쓴다. 칸 수만 6개 */
.department-summary.rc-stats { grid-template-columns: repeat(6, minmax(110px, 1fr)); width: 100%; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 18px; }   /* 바닥 여백은 패널의 것(16px) */
.rc-grid--4 h3 { margin: 12px 0 8px; }
.rc-grid > .panel { min-width: 0; }
.rc-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.rc-list small { color: var(--muted); }
/* 채용현황 `할 일`의 작은 표 (결정 63): 자기 칸 안에서만 그려지고, 긴 글은 말줄임표로 잘린다 */
/* 할 일 표: 내용대로 폭을 잡고(`.rc-scroll` 안) 칸보다 길면 가로로 밀어서 본다 — 글자를 자르지 않는다 (2026-09-18).
   이름 칸(지원자·면접자)은 좁게 두고 남는 폭은 채용진행·통보일 쪽으로 */
.rc-todo-table { width: 100%; table-layout: auto; font-size: 13px; }
.rc-todo-table th, .rc-todo-table td { white-space: nowrap; }   /* 크기는 빽빽한 표 규칙(app.css) */
.rc-todo-table th:first-child, .rc-todo-table td:first-child { width: 64px; }   /* 지원자 이름 */
.rc-todo-table--eval th:first-child, .rc-todo-table--eval td:first-child { width: 42%; }   /* 면접일시 m/d(요일) H:i */
.rc-scroll { overflow-x: auto; }
.rc-turnover th, .rc-turnover td { white-space: nowrap; }   /* 크기는 빽빽한 표 규칙(app.css) */
.rc-turnover__total td { font-weight: 700; background: #f5f8fb; }
.rc-turnover tr.rc-level-TOP td { font-weight: 700; background: #eef3f8; }
.rc-turnover tr.rc-level-UPPER td { font-weight: 600; background: #f7f9fb; }
.rc-turnover td.rc-depth-1 { padding-left: 26px; }
.rc-turnover td.rc-depth-2 { padding-left: 44px; }
.rc-turnover td.rc-depth-3 { padding-left: 62px; }
.rc-filter { font-size: 14px; }   /* 아래 여백은 패널 안 간격 규칙(18px) */
.rc-filter select { border: 1px solid #bdcad5; border-radius: 6px; padding: 7px 9px; font: inherit; background: #fff; }
.rc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; padding: 4px 18px 16px; }
.rc-facts > div span { display: block; color: var(--muted); font-size: 12px; }
.rc-facts > div strong { font-weight: 600; font-size: 14px; }
.rc-facts__wide { grid-column: 1 / -1; }
/* 입사 확정 (2026-09-23): 정보가 적어 폭은 면접 일정표와 같은 81.5%, 입사일·사번 칸은 240px */
.rc-confirm { width: 81.5%; }
.rc-confirm .form-grid .field.wide { grid-column: span 2; }
.rc-confirm .form-grid .field.wide input { width: 240px; }
.rc-confirm .form-grid .field.wide .inline-date-input { width: 280px; }   /* 입사일 칸(달력 단추 포함)도 같은 폭 — 안의 칸은 flex 로 늘어나므로 묶음 폭을 잡는다 */
/* 입사 확정의 확인 항목: 제목 열은 좁게·왼쪽, 값도 왼쪽 — 한 줄에 하나 (2026-09-23) */
.rc-confirm-facts th { width: 140px; text-align: left; }
.rc-confirm-facts td { text-align: left; }
.rc-confirm-facts .field-help { display: inline; }
.rc-facts--lg > div span { font-size: 14px; }
.rc-facts--lg > div strong { font-size: 14px; }
.rc-vacancies { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; font-weight: 600; }
.rc-memo { margin: 0; padding: 0 18px; white-space: pre-line; }
.rc-note { color: var(--muted); font-size: 13px; }
.rc-label { font-weight: 650; white-space: nowrap; }
.rc-warn { color: #bd2727; font-weight: 700; font-size: 12px; }
.rc-row--late td { background: #fff5f5; }

/* 결과·상태 표시(.rc-status)는 표 안의 상태 칸에만 쓴다. 모양·색은 app.css 의 배지 규칙 하나를 따른다 */
/* 일정 상세 지원자 표 (결정 69): 이름·연락처·통지일·결과를 좁혀 평균점수 열 자리를 낸다 */
.rc-sched-table th:nth-child(1) { width: 110px; }
.rc-sched-table th:nth-child(2) { width: 130px; }
.rc-sched-table th:nth-child(3) { width: 100px; }
.rc-sched-table th:nth-child(4) { width: 90px; }

/* 결과 처리 단추 줄 */
/* 패널 안 부품(rc-actions · rc-inline-form · rc-stepper · rc-memo · rc-revert · rc-grade-table · rc-score-summary)은 위아래 여백 0 — 이웃과의 간격은 app.css 의 패널 안 간격 규칙(18px)이 준다 (2026-09-18) */
.rc-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; padding: 0 18px; }
.rc-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0; }
.rc-action label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.rc-action input[type="text"], .rc-action select { border: 1px solid #bdcad5; border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; min-width: 160px; }
.rc-adjust .rc-action input[type="text"], .rc-adjust .rc-action select { min-width: 260px; }   /* 담당자 조정의 사유 칸은 넉넉하게 (결정 68) */
.rc-action input.rc-reason { width: 280px; padding: 8px 10px; }
/* 2차평가자 확인 (결정 76): 의견 칸은 읽기 칸과 같은 틀(.form-grid), 위와 간격, 반려 칸은 단추 줄 안 */
.rc-manager-confirm { margin-top: 18px; }
.rc-manager-confirm .form-actions input[type="text"] { width: 240px; border: 1px solid #bdcad5; border-radius: 6px; padding: 8px 10px; font: inherit; }
/* 지원자 표 바로 입력 */
.rc-applicants td { vertical-align: top; }
.rc-mini { display: flex; align-items: stretch; justify-content: center; gap: 4px; margin: 6px 0 0; }   /* 값 아래 줄에 따로. 칸과 단추는 붙이지 않고 4px 띄운다 (2026-09-23: 반쪽만 둥근 단추가 어색했다) */
.rc-mini input, .rc-mini select { border: 1px solid #bdcad5; padding: 4px 6px; font: inherit; font-size: 12px; background: #fff; border-radius: 6px; }
.rc-mini .rc-mini-date { width: 100px; }
.rc-mini .rc-mini-time { width: 110px; }
.rc-mini .rc-mini-reason { width: 150px; }
.rc-mini .button.small { padding: 3px 8px; font-size: 12px; }
.rc-applicants .rc-col-narrow { width: 72px; white-space: normal; word-break: keep-all; }   /* 면접관·면접평가표: 이름마다 한 줄, 미작성은 다음 줄 */
.rc-request-vacancies { justify-content: flex-start; }   /* 위아래 여백은 패널 안 간격 규칙(app.css) */
.rc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.rc-stack { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.rc-pair select[multiple], .rc-stack select[multiple] { width: 100%; }
@media (max-width: 760px) { .rc-pair { grid-template-columns: 1fr; } }
.inline-date-input { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.rc-new-applicant { display: flex; gap: 8px; margin-bottom: 6px; }
.rc-new-applicant input { border: 1px solid #bdcad5; border-radius: 6px; padding: 7px 9px; font: inherit; }
.hr-settings-form .field.rc-full { grid-column: 1 / -1; }
.rc-revert { padding: 0 18px; }
.rc-skip-reason { border: 1px solid #bdcad5; border-radius: 6px; padding: 6px 10px; font: inherit; width: 280px; }
select.rc-skip-reason { width: auto; max-width: 260px; }
.rc-inline { display: inline-flex; margin: 0; }
.rc-vacancy { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.rc-open-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 12px 18px 18px; }
.rc-open-choice { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rc-open-choice h3 { margin: 0; }
.rc-open-choice p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
.rc-open-choice form { margin: 0; }
.emp-doc-actions form { display: inline-flex; gap: 6px; align-items: center; }
.rc-revert summary { cursor: pointer; font-weight: 650; color: var(--muted); }
.rc-inline-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 0 18px; }
.rc-inline-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rc-select-filter { border: 1px solid #bdcad5; border-radius: 6px; padding: 6px 9px; font: inherit; width: 150px; }
.rc-inline-form input[type="text"], .rc-inline-form select { border: 1px solid #bdcad5; border-radius: 6px; padding: 7px 9px; font: inherit; background: #fff; }
.rc-inline-form input[type="file"] { font: inherit; }
.rc-pdf { padding: 0 18px 18px; }
.rc-pdf object { border: 1px solid var(--line); border-radius: 6px; }
/* 평가 내용 요약 표의 의견 칸: 길게 적어도 표가 화면 안에 머물고 칸 안에서 줄바꿈된다. 적을 때 넣은 줄바꿈(linebreaksbr)도 그대로 (2026-09-18 요청) */
.rc-eval-table td.text-left { text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; min-width: 200px; line-height: 1.5; }
/* 이력서 표의 올리기 칸 (결정 68) */
.rc-upload-cell { text-align: left; vertical-align: top; }
.rc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }   /* 파일 선택·올리기 한 줄 */
.rc-table-gap { margin-top: 18px; }   /* 면접 일정 표와 평가표 사이 */
.rc-action--center { align-items: center; }   /* 결과 처리의 상태 변경 폼: 단추와 가운데 맞춤 */
.rc-adjust .rc-actions { flex-direction: column; align-items: flex-start; gap: 12px; }   /* 담당자 조정: 조정마다 한 줄 */
.rc-upload input[type="file"] { max-width: 220px; font: inherit; font-size: 13px; }
/* 평가표 아래 의견·결과·추천 제목은 h2 크기로 (2026-09-17 수정 요청) */
.rc-eval-form .field > label { font-size: 17px; font-weight: 700; color: #1B1D29; margin-bottom: 8px; }
.rc-eval-form input[type="radio"] { width: 16px; height: 16px; margin: 0; }
.rc-radios { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; }
.rc-result { gap: 26px; }
.rc-result input.rc-months { width: 56px; border: 1px solid #bdcad5; border-radius: 6px; padding: 4px 6px; font: inherit; text-align: right; margin: 0 4px; }
.rc-score-summary { margin: 0; padding: 12px 18px; font-size: 16px; background: #eaf3fc; border: 1px solid #c6d9ec; border-radius: 8px; color: var(--blue-dark); }
.rc-score-summary strong { font-size: 24px; margin: 0 4px; }
.rc-score-summary .rc-note { color: var(--blue-dark); font-size: 14px; }
.rc-grade-table { padding: 0 18px; }
.rc-grade-table table.table-center { width: 100%; min-width: 420px; table-layout: fixed; margin-top: 6px; }   /* 등급 칸 너비 같게. 좁은 화면에서는 줄어들지 않고 패널 안에서 넘긴다 */
.rc-grade-table table.table-center th:first-child, .rc-grade-table table.table-center td:first-child { width: 72px; }
.rc-grade-table table.table-center th, .rc-grade-table table.table-center td { word-break: keep-all; }
.rc-item-desc { font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 2px; white-space: pre-line; }
/* 평가표 점수 표: 구분·항목을 좁혀 점수 칸이 멀지 않게 (결정 49) */
/* 표·총점 상자·참고표·의견칸·단추가 같은 너비 안에 들어간다 */
.rc-eval-form > .table-center, .rc-eval-form > .rc-score-summary, .rc-eval-form > .rc-grade-table, .rc-eval-form > .form-grid, .rc-eval-form > .form-actions { max-width: 940px; box-sizing: border-box; }
/* 점수 표(rc-score-table)에만 칸 너비를 준다. 참고표·읽기 표는 이 규칙을 받지 않는다 — 다른 표에 번지지 않게 이름표로 한정 (결정 54) */
.rc-score-table { width: 100%; table-layout: fixed; }
.rc-score-table th:first-child, .rc-score-table td:first-child { width: 90px; }
.rc-score-table th:nth-child(n+3), .rc-score-table td:nth-child(n+3) { width: 56px; padding-left: 8px; padding-right: 8px; }
.rc-score-table th:last-child, .rc-score-table td:last-child { width: 285px; }   /* 비고 (결정 53) */
.rc-score-table td:nth-child(2) { text-align: left; word-break: keep-all; }
.rc-item-note { width: 100%; box-sizing: border-box; border: 1px solid #bdcad5; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
/* 읽기 화면 (결정 67): 점수 표는 작성 화면과 같은 칸, 고른 칸에 ● · 의견·결과는 입력칸 모양의 읽기 상자 */
.rc-score-mark { display: inline-block; color: var(--blue-dark); font-size: 18px; line-height: 1; }
.rc-score-table--read td:last-child { font-size: 13px; word-break: keep-all; white-space: normal; }
.field .rc-read { min-height: 40px; box-sizing: border-box; border: 1px solid #dfe6ed; border-radius: 6px; padding: 9px 10px; background: #f8fafc; font-size: 14px; line-height: 1.5; }
.rc-eval-form > .panel-title { max-width: 940px; }
.rc-radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.rc-radios input[type="radio"] { width: 16px; height: 16px; margin: 0; }

/* 전환 평가 진행 단계 */
.rc-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 4px 18px 16px; counter-reset: step; }
.rc-steps li { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.rc-steps li strong { display: block; margin-bottom: 4px; }
.rc-steps li span { color: var(--muted); }
.rc-steps li.is-done { border-color: #bfe3cf; background: #f1faf4; }
.rc-steps li.is-now { border-color: #c6d9ec; background: #eaf3fc; }

/* 달력 (직접 그린다 — 결정 12) */
.rc-calendar-panel { padding: 0; }
/* 달력은 화면 폭의 3/4(840px), 날 칸 높이도 3/4(96→72px, 주 보기 360→270px). 칸 안 내용은 왼쪽 정렬 (결정 80) */
/* 달력 폭은 아래 --rc-cal-width 하나로 정한다 (2026-09-22: 처음 전체 폭 → 63% → 그 중간 81.5%). 제목·단추 줄(.page-heading)도 같은 폭이라 단추가 달력 오른쪽 끝에 맞는다. 날 칸 높이 72px 은 결정 80 그대로 */
.rc-calendar-page { --rc-cal-width: 81.5%; max-width: none; }
.rc-calendar-page > .page-heading { width: var(--rc-cal-width); }
/* 달력 크기 (2026-09-22 요청): 일·토 칸은 예전(1/7)의 1/3, 월~금은 3/4 → 표 전체는 예전의 63%. 패널이 표 폭에 맞게 줄고, 칸 비율은 colgroup 이 정한다 */
.rc-calendar-panel { width: var(--rc-cal-width); min-width: 420px; }
.rc-calendar { width: 100%; min-width: 400px; border-collapse: collapse; table-layout: fixed; }
.rc-calendar col.rc-col-weekend { width: 7.55%; }
.rc-calendar col.rc-col-weekday { width: 16.98%; }
.rc-calendar th { background: #f5f8fb; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line); text-align: center; }
.rc-calendar th.rc-sat { color: var(--blue-dark); }
.rc-calendar th.rc-sun { color: #bd2727; }
.rc-calendar td.rc-day { vertical-align: top; border: 1px solid #eef2f6; padding: 4px; height: 72px; text-align: left; }
.rc-calendar--week td.rc-day { height: 270px; }
.rc-day--out { background: #fafbfc; color: #a5b0bb; }
.rc-day--today .rc-day__num { background: var(--blue-dark); color: #fff; border-radius: 12px; }
.rc-day--over { background: #eaf3fc; outline: 2px dashed #7fa7cf; outline-offset: -2px; }
.rc-day__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rc-day__num { display: inline-block; min-width: 24px; text-align: center; font-size: 13px; font-weight: 650; padding: 2px 0; }
.rc-day__add { color: #a5b0bb; text-decoration: none; font-weight: 700; padding: 0 6px; }
.rc-day__add:hover { color: var(--blue-dark); }
.rc-event { display: block; margin: 2px 0; padding: 3px 6px; border-radius: 5px; background: #eaf3fc; color: var(--blue-dark); font-size: 12px; line-height: 1.35; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 3px solid var(--blue-dark); }
.rc-event:hover { background: #dbeaf8; }
.rc-event[draggable="true"] { cursor: grab; }
.rc-event.is-dragging { opacity: .5; }
/* 포인터로 끌기 (결정 75): 일정 위에서는 손가락 스크롤 대신 끌기, 끄는 동안 글자 선택 금지 */
.rc-calendar[data-can-drag="1"] .rc-event { touch-action: none; -webkit-user-drag: none; }
body.rc-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.rc-event__time { font-weight: 700; }
.rc-event__duty { display: block; color: var(--muted); }   /* 둘째 줄: 직무 (결정 66) */
.rc-move-time { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.rc-move-time__label { flex: 0 0 100%; font-size: 13px; color: var(--muted); }
.rc-move-time__sep { color: #b5c2cf; }
.rc-move-time input[type="time"] { border: 1px solid #bdcad5; border-radius: 6px; padding: 7px 9px; font: inherit; }
.rc-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; max-width: 420px; }
.rc-dialog::backdrop { background: rgba(25, 51, 75, .35); }
.rc-dialog label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0; }
.rc-dialog input[type="text"] { display: block; width: 100%; margin-top: 6px; border: 1px solid #bdcad5; border-radius: 6px; padding: 8px 9px; font: inherit; box-sizing: border-box; }
.rc-dialog .form-actions { margin: 0; padding: 0; justify-content: flex-end; }

@media (max-width: 960px) {
  .department-summary.rc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-grid, .rc-grid--4, .rc-facts, .rc-steps { grid-template-columns: 1fr; }
}

/* 전환 평가 진행 단계 (결정 51·52): 원 넷을 좁게 놓고, 원과 같은 색의 선이 원 가운데를 지난다.
   끝난 단계 = 파란 원 + 체크, 지금 = 두꺼운 테두리 원, 남은 단계 = 빈 원 */
.rc-stepper { list-style: none; margin: 0; padding: 0 18px; display: grid; grid-template-columns: repeat(4, 150px); }
.rc-stepper li { position: relative; text-align: center; padding: 0 4px; }
.rc-stepper li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 30px; height: 5px; background: var(--blue); z-index: 0; }
.rc-stepper__dot { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; width: 44px; height: 44px; margin: 10px auto 12px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-sizing: border-box; }
.rc-stepper li.is-done .rc-stepper__dot { background: var(--blue); }
/* 체크 표시: 글자(✓)를 원 한가운데 놓는다 (결정 58) */
.rc-stepper li.is-done .rc-stepper__dot::after { content: "✓"; color: #fff; font-size: 24px; font-weight: 800; line-height: 1; }
.rc-stepper li.is-now .rc-stepper__dot { border-width: 11px; }
.rc-stepper li strong { display: block; font-size: 16px; color: #1f2d3a; }
.rc-stepper li.is-now strong { color: var(--blue-dark); }
.rc-stepper__who { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.rc-stepper__who small { display: block; font-size: 12px; }
@media (max-width: 700px) { .rc-stepper { grid-template-columns: repeat(2, 1fr); row-gap: 14px; } .rc-stepper li + li::before { display: none; } }