/* 관리자 화면. 단위는 rem·vw·vh(1px 선만 예외).
   글자 단계(v0.9.15) — 제목이 그 아래 내용보다 작아지지 않게:
     페이지·창 제목(공고, 공고 편집 …) = --fs-title·700
     묶음 제목(✤ 채용 절차, 설정의 파기 기록 …) = --fs-h2·700
     항목 이름(칸 이름, 질문 번호, 표 머리, 지원자 상세 왼쪽 칸) = --fs-body·600
     내용(입력값, 고르는 글, 표 칸) = --fs-body·400
     안내·보조(회색 설명, 단추, 탭) = --fs-small
   ※ 칸 이름 모양(.field>span)은 base.css 에서 지원자 화면과 함께 쓰므로, 관리자 화면 크기는 바로 아래 줄에서 따로 정한다 */
.field>span{font-size:var(--fs-body);font-weight:600}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.login form{width:min(21.25rem,100%);padding:1.75rem 1.5rem}
.login h1{display:flex;align-items:center;font-size:var(--fs-h2);margin-bottom:1rem}
.logo{height:1rem;width:auto;display:block}
.login .logo{height:1.25rem}
/* 로고 옆 「채용 관리」: 지원자 화면 머리 「채용」과 같은 회색. 판 번호(small)와 함께 서체 보정(--nudge)만큼 내린다 */
.login h1 span,.brand span{font-size:var(--fs-small);color:var(--sub);letter-spacing:0;margin-left:0.375rem}
.login h1 span,.brand span,.brand small{position:relative;top:var(--nudge)}

.bar{display:flex;align-items:center;gap:1.125rem;padding:0.5rem 1.5rem;border-bottom:1px solid var(--ink);background:var(--beige);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;font-weight:600;white-space:nowrap}
.brand small{font-weight:400;font-size:var(--fs-small);color:var(--faint);letter-spacing:0;margin-left:0.25rem}
.tabs{display:flex;gap:0.25rem;flex:1}
.tabs button{background:none;border:0;height:var(--ctl);padding:calc(var(--nudge) * 2) 0.75rem 0;border-radius:var(--r);cursor:pointer;font-weight:600;font-size:var(--fs-small);color:var(--sub)}
.tabs button.on{background:var(--ink);color:#fff}
.main{width:min(80rem,100%);margin:0 auto;padding:1.125rem 1.5rem}

.head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:0.625rem;flex-wrap:wrap}
.head h2{font-size:var(--fs-title)}
.head .tools{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.head select{width:auto;min-width:13.75rem}
/* 검색창은 표 바로 위 줄에 둔다 */
.tbar{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:0.375rem;flex-wrap:wrap}
.tbar input[type=search]{width:22rem}
.sortnote{font-size:var(--fs-small);color:var(--sub)}
.sortnote button{border:0;background:none;text-decoration:underline;cursor:pointer;color:var(--sub);padding:0;font-size:inherit}

table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}
table.list th{font-size:var(--fs-body);color:var(--ink);font-weight:600;text-align:center;padding:0.375rem 0.625rem;border-bottom:1px solid var(--line2);background:var(--paper);white-space:nowrap}
/* 표의 열 제목·칸은 가운데. 예외(왼쪽): 지원자의 체크 열(지원서·이력서·포트폴리오), 계정의 공고 권한, 설정 기록의 내용·세부 */
table.list th.pickh,table.list td.pickc,table.list th.left,table.list td.left{text-align:left}
table.list th .sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:0.25rem;align-items:center}
table.list th .sort:hover{color:var(--ink)}
table.list th .sort.on{color:var(--ink)}
table.list th .arr{font-size:inherit}
table.list td{padding:0.375rem 0.625rem;border-bottom:1px solid var(--line);vertical-align:middle;font-size:var(--fs-body);text-align:center}
table.list tr.click{cursor:pointer}
table.list tr.click:hover td{background:var(--paper)}
table.list td.num{font-variant-numeric:tabular-nums}
table.list td .acts{display:flex;gap:0.375rem;flex-wrap:nowrap;justify-content:center}
table.list .sub{font-size:var(--fs-small);color:var(--sub)}
table.list td select.st{width:auto;font-weight:600}
table.list td select.st.draft{color:var(--sub)}
table.list td select.st.open{color:var(--pink-deep)}
table.list td select.st.ended{color:var(--green)}
/* 파기 대상(보관 기간 지남) — 음영 */
table.list tr.overdue td{background:repeating-linear-gradient(-45deg,#ece5d0,#ece5d0 0.375rem,#e5dcc3 0.375rem,#e5dcc3 0.75rem);color:#555}
.emptyrow{text-align:center;color:var(--sub);padding:2.5rem!important}

.banner{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding:0.5rem 0.875rem;margin-bottom:0.625rem;border-radius:var(--r);background:#f6e0de;color:#7a2f29;font-size:var(--fs-small)}

.modal{position:fixed;inset:0;background:rgba(17,17,17,.45);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem;overflow:auto;z-index:20}
.mbox{width:min(47.5rem,100%);padding:1.125rem 1.25rem;position:relative}
.mbox h3 .sub{font-weight:400;font-size:var(--fs-small);color:var(--sub)}
.mbox h3{font-size:var(--fs-title);margin-bottom:0.75rem;padding-right:8rem}
/* 지원자 상세 맨 위: ▲ 위 | 접수번호 | 아래 ▼ (닫기 단추와 같은 줄, 왼쪽). 목록에 보이는 순서대로 앞·뒤 지원자 */
.anav{display:flex;align-items:center;gap:0.625rem;min-height:var(--ctl);margin:-0.25rem 0 0.75rem}
.anav span{font-size:var(--fs-small);color:var(--sub);white-space:nowrap}
/* 창 오른쪽 위 단추 묶음(저장·닫기) */
.mbox .mtools{position:absolute;top:0.875rem;right:1rem;display:flex;gap:0.375rem}
.mfoot{display:flex;justify-content:space-between;gap:0.5rem;margin-top:0.875rem;flex-wrap:wrap}
.mfoot>div{display:flex;gap:0.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 0.875rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 0.875rem}
.checks{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.875rem}
.radios{display:flex;gap:1rem;margin-bottom:0.375rem;flex-wrap:wrap;min-height:var(--ctl);align-items:center}
.radios label{display:flex;gap:0.375rem;align-items:center;cursor:pointer;font-size:var(--fs-small)}
.radios input{accent-color:var(--ink);margin:0;position:relative;top:calc(var(--nudge) * -1)} /* 브라우저 기본 위쪽 여백 때문에 동그라미가 글자보다 아래로 처졌다 */
.sec{font-size:var(--fs-h2);font-weight:700;margin:0.875rem 0 0.375rem}
/* 묶음 제목 옆 덧붙임 설명은 안내 크기 */
.sec .sub{font-size:var(--fs-small);color:var(--sub)}
/* 공고 편집 창 — 글자는 맨 위 「글자 단계」를 따른다:
   창 제목(--fs-title·700) / ✤ 묶음 제목(--fs-h2·700) / 칸 이름·질문 번호(--fs-body·600) / 입력값·고르는 글(--fs-body·400) / 안내(--fs-small·400·회색)
   간격: 묶음(✤) 사이 = 큰 간격(구분선 없음) / ✤ 아래 칸 사이 = 2rem / 칸 이름–입력칸–안내 = 붙여서.
   묶음 안의 작은 묶음(급여 조건)은 옅은 상자, 그 안의 칸 사이는 0.75rem */
#pf .field{margin-bottom:2rem}
/* ✤ 묶음 사이: 구분선은 없애고(투명) 선이 있던 자리 간격은 그대로 */
#pf .sec{margin:2.5rem 0 0.875rem;padding-top:1.25rem;border-top:1px solid transparent}
/* 체크 상자와 글을 세로 가운데로. 긴 설명은 상자 밖 아래 줄(.chkhint)로 뺀다 */
#pf .chk{align-items:center}
#pf .chk input{margin:0}
#pf .chkhint{margin:0.25rem 0 0 1.5rem}
#pf .hint{margin-top:0.25rem}
#pf>.hint{margin:-0.5rem 0 1rem}
#pf .checks{margin-bottom:2rem}
#pf .subgrp{padding:0.75rem 0.875rem 0.125rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
#pf .subgrp .field{margin-bottom:0.75rem}
/* 칸 이름 줄 오른쪽에 체크(급여 조건 — 공고에 보이기) */
#pf .field.lr{display:grid;grid-template-columns:1fr auto;align-items:end}
#pf .field.lr>.chk{margin-bottom:0.1875rem}
#pf .field.lr>.subgrp,#pf .field.lr>.hint{grid-column:1 / -1}
#pf .hm .note{flex:1;min-width:12rem}
#pf .hrow{margin-bottom:0.75rem}
#pf #addH{margin-bottom:0.75rem}
#pf .hm .wk{width:5rem}
#pf input.short{max-width:12rem}
#pf .qb{padding:0.875rem 0.875rem 0.125rem;margin-bottom:0.75rem}
#pf .qb .qbhead{margin-bottom:0.75rem}
#pf .qb .field{margin-bottom:0.875rem}
#pf .qreq{align-self:center;margin-top:1rem}
#pf #pErr{margin-top:1rem}
#pf #pErr:empty{display:none}
#pf .mfoot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line2)}
/* 급여 조건: 연봉 구간, 공고에 안 보이게 두면 흐리게 */
.range{display:flex;gap:0.5rem;align-items:center}
.range input{flex:1}
#pf .range{max-width:24rem} /* 한 줄을 다 쓰는 칸에서는 두 숫자 칸이 너무 길어지지 않게 */
.dim{opacity:.5}
/* 시·분 고르기(24시간제) */
.hm{display:flex;gap:0.375rem;align-items:center;flex-wrap:wrap}
.hm select{width:auto;min-width:3.75rem}

/* 질문지 만들기 */
.qb{padding:0.625rem 0.75rem 0.125rem;margin-bottom:0.5rem}
.qb .qbhead{display:flex;gap:0.375rem;align-items:center;margin-bottom:0.375rem}
.qb .qbhead .qno{flex:1;font-size:var(--fs-body);font-weight:600}
.qb textarea{min-height:5.5rem}

dl.info{display:grid;grid-template-columns:7rem 1fr;gap:0;margin:0 0 1rem;border-top:1px solid var(--line)}
dl.info dt,dl.info dd{margin:0;padding:0.3125rem 0.25rem;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
dl.info dt{font-weight:600}
dl.info dd.body-text{white-space:pre-wrap}
/* 지원자 상세의 질문 칸: 질문과 답변 사이 가로 점선 */
dl.info .qtl{padding-bottom:0.25rem;margin-bottom:0.375rem;border-bottom:1px dashed var(--line2);font-weight:600}
/* 답변은 본문 서체(최정호 스크린) — 질문(기본 서체·작은 회색 글씨)과 서체로도 구분 */
dl.info .qans{font-family:var(--font-body);line-height:1.7}
dl.info .qans.pre{white-space:pre-wrap}
dl.info .qans .sub{font-family:var(--font)}
.careers{list-style:none;padding:0;margin:0}
.careers li{padding:0.375rem 0;border-bottom:1px dashed var(--line2)}
.careers li:last-child{border-bottom:0}

.switch{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;margin-bottom:0.875rem}
.switch .t{font-weight:600}
.switch p{margin:0.25rem 0 0;font-size:var(--fs-small);color:var(--sub)}
.toggle{position:relative;width:calc(var(--ctl) * 1.8);height:var(--ctl);flex:none;margin-left:auto}
.toggle input{opacity:0;width:0;height:0}
.toggle span{position:absolute;inset:0;background:var(--line2);border-radius:1.25rem;cursor:pointer;transition:.15s}
.toggle span:before{content:"";position:absolute;width:calc(var(--ctl) - 0.375rem);height:calc(var(--ctl) - 0.375rem);left:0.1875rem;top:0.1875rem;background:#fff;border-radius:50%;transition:.15s}
.toggle input:checked+span{background:var(--ink)}
.toggle input:checked+span:before{transform:translateX(calc(var(--ctl) * 0.8))}

/* 선택 내려받기 */
.dlbar{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding:0.5rem 0.875rem;margin-bottom:0.625rem;font-size:var(--fs-small)}
.dlbar .dlnote{margin-top:0.125rem;color:var(--pink-deep)}
.dlbtns{display:flex;gap:0.5rem}
th.pickh .ph{display:inline-flex;gap:0.375rem;align-items:center}
th.pickh input,.pick input{accent-color:var(--ink);width:1rem;height:1rem;margin:0;position:relative;top:calc(var(--nudge) * -1)}
td.pickc{cursor:default}
.pick{display:inline-flex;gap:0.375rem;align-items:center;cursor:pointer;white-space:nowrap}
.pick.off{cursor:not-allowed;opacity:.55}
.frow{display:flex;gap:0.375rem;align-items:center;flex-wrap:wrap;margin-bottom:0.25rem}

@media (max-width:47.5rem){
  .bar{flex-wrap:wrap;padding:0.625rem 1rem;gap:0.5rem}
  .tabs{order:3;flex-basis:100%}
  .main{padding:1rem}
  .grid2,.grid3{grid-template-columns:1fr}
  dl.info{grid-template-columns:5.5rem 1fr}
  .head .tools,.head select,.tbar input[type=search]{width:100%;min-width:0}
  .dlbtns{width:100%}.dlbtns .btn{flex:1}
  /* 표는 모두 .slide: 좁은 화면에서도 한 건 한 줄 그대로 가로로 밀고, 앞 두 열은 틀고정(.fix1 은 첫 열만). 줄 배경(빗금·마우스 올림)은 위쪽 규칙이 이긴다 */
  .slidewrap{overflow-x:auto}
  table.list.slide{width:auto;min-width:100%;border-collapse:separate;border-spacing:0}
  table.list.slide td{white-space:nowrap}
  table.list.slide td.emptyrow{text-align:left}
  .slide tr>:nth-child(-n+2):not(.emptyrow){position:sticky;z-index:1}
  .slide td:nth-child(-n+2){background:var(--card)}
  .slide tr>:nth-child(1):not(.emptyrow){left:0;width:var(--col1);min-width:var(--col1)}
  .slide tr>:nth-child(2):not(.emptyrow){left:var(--col1);border-right:1px solid var(--line2)}
  .fix1 tr>:nth-child(1):not(.emptyrow){border-right:1px solid var(--line2)}
  .fix1 tr>:nth-child(2):not(.emptyrow){position:static;border-right:0}
  .apps{--col1:4.25rem}
  .apps tbody tr:last-child .gc .who{top:auto;bottom:calc(100% + 0.25rem)} /* 맨 아래 행 평가자 이름은 위로(감싸개에 잘리지 않게) */
  .posts{--col1:7rem;--col2:6rem}
  .usertb{--col1:10rem;--col2:5.5rem}
  .logtb{--col1:11rem;--col2:5.5rem}
  .purgetb{--col1:11rem}
  /* 고정 열은 폭을 정해 긴 값을 줄임표로(고정 영역이 화면을 다 먹지 않게). 일시는 길이가 일정해 줄지 않는다 */
  .posts tr>:nth-child(1):not(.emptyrow),.usertb tr>:nth-child(1):not(.emptyrow),.logtb tr>:nth-child(1):not(.emptyrow),.purgetb tr>:nth-child(1):not(.emptyrow){max-width:var(--col1)}
  .posts tr>:nth-child(2):not(.emptyrow),.usertb tr>:nth-child(2):not(.emptyrow),.logtb tr>:nth-child(2):not(.emptyrow){width:var(--col2);min-width:var(--col2);max-width:var(--col2)}
  .posts td:nth-child(-n+2),.usertb td:nth-child(-n+2),.logtb td:nth-child(-n+2),.purgetb td:nth-child(1){overflow:hidden;text-overflow:ellipsis}
  .posts td>.sub{display:inline;margin-left:0.25rem} /* 공고 표: 아래 줄(예전 제목·파기일)도 한 줄로 잇는다 */
  /* 계정 표: 긴 아이디만 줄이고 admin 표시는 남긴다 */
  .usertb td:nth-child(1) b{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  .usertb td:nth-child(1) b:has(+.badge){max-width:calc(100% - 4.5rem)}
}

/* 로그인한 사람 */
.bar .who{font-size:var(--fs-small);color:var(--sub);white-space:nowrap}
table.list td span.st{font-weight:600}
#accList.dim{opacity:.4;pointer-events:none}
table.list td span.st.draft{color:var(--sub)}
table.list td span.st.open{color:var(--pink-deep)}
table.list td span.st.ended{color:var(--green)}
.pwform{max-width:24rem}

/* 평가 — 강추 = 따봉 둘을 살짝 겹쳐 한 덩어리, 보류 = 따봉 90° 회전 */
.gi{display:inline-flex;align-items:center;line-height:1;font-style:normal}
.gi i{font-style:normal}
.g-strong i+i{margin-left:-0.62em}
.g-hold{transform:rotate(90deg)}
.gbar{display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;margin:0 0 0.875rem}
.gbar>.sub{font-size:var(--fs-small);margin-right:0.25rem}
.gbtn{display:inline-flex;align-items:center;gap:0.375rem;height:var(--ctl);padding:0 0.625rem;border:1px solid var(--line2);background:var(--card);border-radius:var(--r);cursor:pointer;font-size:var(--fs-small)}
/* 평가 단추 글자(강추·추천…)를 서체 보정만큼 내린다(따봉 그림은 제자리) */
.gbtn>span:not(.gi){position:relative;top:var(--nudge)}
.gbtn:hover{border-color:var(--ink)}
.gbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mbox .gbar:last-of-type{margin:1rem 0 0}
/* 목록의 평가 칸: 개수에 올리거나(누르면) 평가자 이름 */
.gcell{display:inline-flex;gap:0.625rem;white-space:nowrap}
.gc{position:relative;display:inline-flex;align-items:center;gap:0.1875rem;cursor:default;outline:none}
.gc b{font-weight:600}
.gc.zero{opacity:.35}
.gc.mine b{text-decoration:underline}
.gc .who{display:none;position:absolute;z-index:8;top:calc(100% + 0.25rem);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:var(--fs-small);font-weight:400;padding:0.25rem 0.5rem;border-radius:var(--r);white-space:nowrap}
.gc:hover .who,.gc:focus .who{display:block}
.tbar input[type=month]{width:auto}