/* 채용 현황 화면 (public/js/32_채용현황.js) — style.css 를 안 키우려고 따로 둔다.
   주간업무.css·연차.css·수주.css 와 같은 규칙: 이 화면 전용 이름만 여기 둔다.
   미디어쿼리는 반드시 @media screen — A4 본문폭이 CSS 픽셀로 643px 이라
   범위를 열어두면 인쇄할 때 모바일 규칙이 발동한다. */

.hb-crumb{font-size:12px;color:var(--gray);margin-bottom:2px}
.hb-crumb a{color:var(--green);font-weight:600;cursor:pointer}
.hb-chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray)}

/* ── 단계·전형 상태 배지 — 글자는 서버가 준 것이고 색만 여기서 준다 ── */
.hb-badge,.hb-st{display:inline-block;padding:2px 9px;border-radius:9px;font-size:11.5px;
  font-weight:700;white-space:nowrap;vertical-align:middle}
.hb-open{background:var(--green-l);color:var(--green)}
.hb-done{background:#e8eefc;color:#1d4ed8}
.hb-cancel{background:#fdecea;color:#b3261e}
.hb-new{background:#eef2f7;color:#5a6b80}
.hb-pass{background:var(--green-l);color:var(--green)}
.hb-fail{background:#fdecea;color:#b3261e}
.hb-hired{background:#e8eefc;color:#1d4ed8}
.hb-noshow{background:#fdf5e3;color:#8a6100}

/* ── 공고 링크 ──
   이 화면을 두는 이유의 절반이 이것이다 — 지인에게 그대로 보낼 수 있어야 한다. */
.hb-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px}
.hb-link{color:var(--green);font-weight:700;text-decoration:underline;font-size:13px}
.hb-linkhint{font-size:12px;color:var(--gray);margin-left:auto}

/* ── 공고 이미지 ── */
.hb-full{color:var(--green);font-weight:600;font-size:12.5px;cursor:pointer}
.hb-full-img{text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:12px}
.hb-full-img img{display:block;width:100%;max-width:600px;margin:0 auto;cursor:zoom-in;
  border-radius:4px}

/* ── 공고 내용 ── */
.hb-secs{display:flex;flex-direction:column;gap:16px}
.hb-sec h3{font-size:13px;font-weight:800;margin-bottom:5px}
/* 적어 낸 줄바꿈을 그대로 지킨다 — 「- 」로 층을 나눠 쓰는 글이라 다시 흘리면 무너진다 */
.hb-sec p{font-size:13.5px;line-height:1.8;white-space:pre-wrap}
.hb-contact{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--gray)}

/* ── 파일 ── */
.hb-files{display:flex;flex-wrap:wrap;gap:8px}
.hb-file{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);
  border-radius:7px;font-size:12.5px;background:#fff;cursor:pointer}
.hb-file:hover{border-color:var(--green)}
.hb-nofile{font-size:12.5px}

/* ── 지원자 표 ── */
.hb-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.hb-table th,.hb-table td{border-bottom:1px solid var(--line);padding:8px 9px;text-align:left}
.hb-table th{background:#fafafa;font-size:12px;color:var(--gray);white-space:nowrap}
.hb-table tbody tr{cursor:pointer}
.hb-table tbody tr:hover{background:var(--green-l)}
.hb-table tbody tr.on{background:var(--green-l)}
.hb-table tbody tr.hb-appdet,.hb-table tbody tr.hb-appdet:hover{background:#fbfcfb;cursor:default}
.hb-table .center{text-align:center;white-space:nowrap}
.hb-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-g{margin-left:6px;font-size:11px;color:var(--gray)}
.hb-appbox{padding:12px 4px 6px}
.hb-kvs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px;margin-bottom:12px}
.hb-kv{display:flex;flex-direction:column;gap:1px;font-size:12.5px;min-width:0}
.hb-kv span{font-size:11px;color:var(--gray)}
.hb-kv b{font-weight:600;word-break:break-all}

@media screen and (max-width:1100px){ .hb-kvs{grid-template-columns:repeat(3,1fr)} }
@media screen and (max-width:820px){ .hb-kvs{grid-template-columns:repeat(2,1fr)} }
@media screen and (max-width:560px){
  .hb-kvs{grid-template-columns:1fr}
  .hb-linkhint{margin-left:0}
  .hb-full-img{padding:0;border:0}
}

/* ══════════════ 지원자 현황이 첫 화면이다 ══════════════
   이 화면을 여는 사람이 묻는 것은 「지금 누가 어디까지 왔나」다 — 공고는 그 표를 거른다. */
.hb-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.hb-stf{margin-bottom:14px}
.hb-chip{padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#374151}
.hb-chip.sm{padding:4px 11px;font-size:12px}
.hb-chip:hover{border-color:var(--green)}
/* 고른 칩은 **테두리를 안쪽으로 두 겹** — 색으로만 가르면 상태 칩(초록·빨강)과 섞인다 */
.hb-chip.on{outline:2px solid var(--green);outline-offset:-2px;font-weight:800}
.hb-chip.hb-pass{background:var(--green-l);color:var(--green);border-color:transparent}
.hb-chip.hb-fail{background:#fdecea;color:#b3261e;border-color:transparent}
.hb-chip.hb-hired{background:#e8eefc;color:#1d4ed8;border-color:transparent}
.hb-chip.hb-noshow{background:#fdf5e3;color:#8a6100;border-color:transparent}
.hb-chip.hb-new{background:#eef2f7;color:#5a6b80;border-color:transparent}
/* ── 공고 한 덩어리 ──
   **머리는 언제나 보이고 표만 접힌다** — 접어 두어도 그 공고가 있다는 것과 몇 명이
   걸려 있는지는 알아야 한다(그래야 접을 결심을 한다). */
.hb-pcard{padding:0;overflow:hidden}
.hb-phead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;
  cursor:pointer;user-select:none}
.hb-phead:hover{background:#fafbfa}
.hb-phead b{font-size:14.5px}
.hb-fold{color:var(--gray);font-size:11px;width:12px}
.hb-pmeta{font-size:12.5px;color:var(--gray)}
/* 「진행 2 · 종료 3」 — 숨긴 사람이 있다는 것을 여기서 말한다 */
.hb-pcnt{margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.hb-phead .btn{flex:0 0 auto}
.hb-pempty{padding:22px 18px}
/* 표는 카드 안쪽 끝까지 — 머리와 표 사이에 선 하나로 갈린다 */
.hb-pcard .table-scroll{border-top:1px solid var(--line)}
/* 숨긴 사람이 몇인지 머리에서 말한다 — 안 그러면 「왜 4명인데 2명만 보이지」가 된다 */
.hb-hid{color:var(--amber)}

@media screen and (max-width:560px){
  .hb-phead{gap:7px;padding:11px 13px}
  .hb-pcnt{margin-left:0;width:100%;order:9}
}
/* 못 불러왔을 때 까닭을 적는 자리 — 「불러오는 중」이 남으면 영영 안 끝나는 것처럼 보인다 */
.hb-err{display:inline-block;margin:6px 0 10px;font-size:12.5px;color:var(--red)}

/* ══════════════ 이번 주 면접일정 · 서류평가 ══════════════
   면접관이 이 화면을 여는 첫 이유가 면접일정이라 맨 위에 선다. */
.hb-week .hb-ivlist{display:flex;flex-direction:column;gap:7px}
.hb-ivrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}
.hb-ivday{font-weight:800;font-variant-numeric:tabular-nums;min-width:56px}
.hb-ivtime{font-variant-numeric:tabular-nums;color:var(--gray);min-width:96px}
.hb-ivround{font-size:12px;font-weight:700}
.hb-ivpost{font-size:12px;color:var(--gray)}
.hb-ivroom{margin-left:auto;font-size:12px;color:var(--gray)}
/* 날짜를 아직 못 잡은 면접 — 「잡히는 중인 면접이 있다」도 알아야 하는 값이다 */
.hb-ivwait{margin-top:9px;font-size:12.5px;color:var(--gray);display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}

/* 면접 단계 — 안내 · 조율중 · 확정 · 미응시 */
.hb-iv{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11.5px;font-weight:700;
  white-space:nowrap;margin-right:4px}
.hb-ivann{background:#eef2f7;color:#5a6b80}
.hb-ivadj{background:#fdf5e3;color:#8a6100}
.hb-ivfix{background:var(--green-l);color:var(--green)}
.hb-ivno{background:#fdecea;color:#b3261e}
.hb-ivcell{white-space:nowrap}

/* 서류평가 — 체크 하나. **의견이지 결정이 아니다** */
.hb-revchk{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--gray);
  cursor:pointer;margin-right:5px}
.hb-rev{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11.5px;font-weight:700;
  background:#eef2f7;color:#5a6b80;white-space:nowrap;cursor:help}
.hb-rev.bad{background:#fdecea;color:#b3261e}

@media screen and (max-width:560px){
  .hb-ivrow{gap:6px;font-size:12.5px}
  .hb-ivroom{margin-left:0}
}

/* ══════════════ 서류 합격 · 불합격 ══════════════
   **세부 창 우측 하단에서 누른다** — 표에서 바로 누르게 두면 스치듯 눌러 남의 서류가 탈락한다. */
.hb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.hb-verdict{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}
.hb-vdone{font-size:12.5px;color:var(--gray)}
.hb-verdict .btn.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.hb-vfail.on{background:#b3261e;border-color:#b3261e}

/* ══════════════ 면접평가표 — A4 한 장 ══════════════
   **치수는 mm·pt 로 쓴다** — px 은 모니터·배율에 따라 종이에서 달라진다(증명서와 같은 규칙).
   면접장에 종이로 들고 들어가는 서식이라 **두 장이 되면 뒷장을 잃는다.** */
.ev-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ev-bar b{font-size:15px}
.ev-bar .muted{margin-right:auto;font-size:12px}
/* 화면에서는 종이처럼 보이게 테두리를 두르고, 인쇄에서는 그 테두리를 걷는다 */
/* **A4 서식은 줄이지 않고 제 칸 안에서 가로로 민다** — 좁은 화면에서 폭에 맞춰 줄이면
   본문 8.5pt 가 못 읽을 크기가 되고, 그냥 두면 화면 밖으로 삐져나온다(실제로 그랬다).
   본문(body)이 통째로 밀리지 않게 이 칸이 스스로 민다. 인쇄에서는 그 칸을 푼다. */
.ev-stage{overflow-x:auto}
.ev-sheet{box-sizing:border-box;width:186mm;margin:0 auto;padding:8mm;background:#fff;color:#000;
  font-size:9pt;line-height:1.45;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ev-title{text-align:center;font-size:17pt;font-weight:800;letter-spacing:5pt;margin:0 0 3mm}
/* 머리 줄 — **한 줄로 선다.** 60mm 에 「1차면접 · 2026-09-02」과 결과를 다 넣으면 접힌다 */
.ev-top{width:100mm;margin-left:auto;margin-bottom:2mm;border-collapse:collapse;table-layout:fixed}
.ev-top th,.ev-top td{border:0.3mm solid #000;padding:1mm 2mm;font-size:8.5pt;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-top th{width:22mm;background:#f0f0f0;text-align:center;font-weight:700}
.ev-top td:last-child{width:32mm;text-align:center}
.ev-round{border:0 !important;text-align:right;padding-right:3mm !important;font-size:9pt}
.ev-sec{font-size:10.5pt;font-weight:800;margin:2.5mm 0 1.2mm}
.ev-hint{font-size:8pt;font-weight:400;color:#555;margin-left:3mm}
.ev-tbl{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
.ev-tbl th,.ev-tbl td{border:0.3mm solid #000;padding:1mm 2mm;font-size:8.5pt;
  vertical-align:middle;word-break:break-all}
.ev-tbl th{background:#f0f0f0;text-align:center;font-weight:700;width:24mm}
.ev-tbl .ev-k{width:16mm}
.ev-blank{background:#fff}
.ev-duty{white-space:pre-wrap;height:20mm;vertical-align:top}
/* 항목별 평가 — **한 벌을 세로로.** 좌우 두 벌로 접었더니 면접요소가 33mm 라
   면접장에서 안 읽혔다. 이 표가 이 서식의 본체다 — 자리는 인적사항에서 벌었다.
   평가항목 34 · 면접요소 나머지 · 배율 14 · 평가점수 28 */
.ev-eval th{width:auto}
.ev-eval .ev-c1{width:34mm}
.ev-eval .ev-w{width:14mm}
.ev-eval .ev-w2{width:28mm}
.ev-eval .ev-c{text-align:center}

/* 인적사항·담당업무는 **세 칸씩 세 줄** — 이름표 20 · 값 46/32/32 = 170mm */
.ev-info th{width:20mm}
.ev-info td{width:46mm}
.ev-info td:nth-child(4),.ev-info td:nth-child(6){width:32mm}
.ev-pts{font-size:8pt;line-height:1.35}
.ev-grp td{background:#fafafa;text-align:center;font-weight:700}
.ev-sum td{background:#f0f0f0;text-align:center;font-weight:700}
.ev-op{height:42mm;vertical-align:top}
.ev-op-sm{height:20mm}
/* 결과표의 의견 칸은 **적힌 글이 그대로 실린다** — 줄바꿈을 지킨다(공문 본문과 같은 규칙) */
.ev-duty-sm{height:10mm}

/* 결과표의 항목별 평가 — **한 단.** 두 단으로 접으면 평가항목이 줄바꿈되고, 무엇보다
   **면접관이 여럿이면 점수 열이 사람 수만큼 옆으로 늘어나야 하는데** 늘릴 자리가 없다.
   평가항목 36 · 배율 16 · 점수 22×사람수 · 면접요소가 나머지 */
.ev-res th{width:auto}
.ev-res .ev-r1{width:36mm}
.ev-res .ev-r2{width:16mm}
.ev-res .ev-r3{width:22mm}
.ev-res .ev-sum td:first-child{text-align:center}
/* 점수 열의 면접관 이름 — 열 이름 아래 작게 */
.ev-who{display:block;font-weight:400;font-size:7.5pt;color:#333}
/* 의견 칸 — **표로 둔다**(적어 넣는 자리다). 적힌 글은 줄바꿈을 그대로 지킨다 */
.ev-op-xs{height:14mm}

/* 의견은 표에 담지 않는다 — 읽는 글이라 테두리가 할 일이 없다.
   **적어 낸 줄바꿈은 그대로 지킨다**(공문 본문과 같은 규칙) */
.ev-txt{white-space:pre-wrap;font-size:8.5pt;line-height:1.5;vertical-align:top}

/* 인쇄 — **A4 한 장.** 용지 여백은 style.css 의 @page 가 담당하므로 여기서 다시 쓰지
   않는다(이 파일은 늘 실려 있어, 여기에 두면 결재 문서·증명서의 여백까지 바뀐다).
   화면용 테두리·패딩만 걷어낸다 — 둘 다 두면 여백이 두 번 먹는다. */
@media print {
  .ev-stage{overflow:visible}
  .ev-sheet{width:auto;max-width:none;margin:0;padding:0;border:none;box-shadow:none}
  /* 표가 쪽 사이에서 갈라지지 않게 — 한 장 안에 들어가는 서식이다 */
  .ev-tbl{break-inside:avoid;page-break-inside:avoid}
  .ev-title,.ev-sec{break-after:avoid;page-break-after:avoid}
}

/* 값이 없는 칸 — **칸은 그대로 두고 「-」로 비운다.** 빼면 격자에서 뒤 항목이 앞으로
   당겨져 사람마다 자리가 달라지고, 두 사람을 나란히 놓고 볼 수가 없다 */
.hb-none{color:var(--line);font-weight:400}

/* 서류평가 의견 — **누가 무엇을 왜 그렇게 보았는지**가 합격·불합격 숫자보다 실제로 쓰인다 */
.hb-revs{display:flex;flex-direction:column;gap:5px;margin:10px 0 12px;
  padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:#fafbfa}
.hb-rev{display:flex;align-items:baseline;gap:8px;font-size:12.5px;min-width:0}
.hb-rev-who{flex:0 0 auto;font-weight:600}
.hb-rev-v{flex:0 0 auto;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700}
.hb-rev-v.ok{background:#e6f4ea;color:#166534}
.hb-rev-v.no{background:#fdeaea;color:#b3261e}
.hb-rev-note{flex:1;min-width:0;color:#444;word-break:break-all}

.hb-verdict{display:flex;flex-direction:column;gap:7px;align-items:stretch;
  margin-left:auto;min-width:min(340px,100%)}
.hb-vbtns{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hb-note{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);
  border-radius:6px;font-size:12.5px;line-height:1.5;resize:vertical;font-family:inherit}
.hb-note:focus{outline:none;border-color:var(--green)}