/* ==========================================================================
   공통 스타일 — 지원자 화면과 관리자 화면이 함께 쓴다
   --------------------------------------------------------------------------
   이 파일 순서
     1. 디자인 설정 (색 · 서체 · 글자 크기 · 높이 · 간격)  ← 대부분은 여기만 고치면 된다
     2. 바탕 (페이지 전체 글자·배경)
     3. 단추
     4. 입력칸 · 칸 이름 · 체크
     5. 상자 · 표시 딱지

   단위 규칙: rem · vw · vh 만 쓴다(화면 폭 구간 @media 의 기준값도 rem).
     예외는 하나뿐: 1px 선 — 선 굵기를 rem 으로 두면 화면 배율에 따라 선이 사라지거나 번진다
   1rem = 기준 글자 크기. 화면 폭에 따라 0.875rem~1rem(브라우저 기본 글자 크기의 87.5~100%) 사이에서 바뀐다(2번 html).

   ※ 관리자 화면도 이 파일을 쓴다. 여기서 바꾼 값은 관리자 화면에도 적용된다.
   ========================================================================== */


/* ==========================================================================
   1. 디자인 설정
   ========================================================================== */
/* 색
   --beige 페이지 바탕 · --paper 마우스를 올렸을 때 옅은 바탕, 표 머리 · --sand 공고 목록 줄 바탕 · --card 상자·입력칸 바탕
   --ink 기본 글자, 진한 선, 검정 단추 · --sub 보조 글자(안내·날짜) · --faint 더 옅은 글자
   --line 옅은 선(상자 테두리) · --line2 보통 선(입력칸 테두리·구분선)
   --pink 분홍 단추, 미리보기 띠 · --pink-deep 필수 *, 분홍 딱지 글자 · --pink-soft 안내 상자, 분홍 딱지 바탕
   --amber 주황(지원자 「면접」 딱지) · --green 초록 (관리자 화면) · --red 오류, 삭제 */
:root{
   --beige:#f3eedd;
   --paper:#d9e1e2;
   --sand:#ddd8c4;
   --card:#fffdf7;
   --ink:#111;
   --sub:#6b6b6b;
   --faint:#9b9689;
   --line:#e6e0cf;
   --line2:#d8d3c2;
   --pink:#ffc0da;
   --pink-deep:#c06a92;
   --pink-soft:#fdeff5;
   --amber:#d9a441;
   --red:#c0574f;
   --green:#5c8a63
}

/* 서체: --font 기본(홈페이지와 같은 english-grotesque + 오늘단조) · --font-body 본문(긴 글·공고 내용·답변, AG 최정호 스크린) */
:root{
   --font:"english-grotesque","OnulDanjo",sans-serif;
   --font-body:"agchoijeongho-screen",sans-serif
}

/* 글자 크기: 이 네 단계만 쓴다. 같은 크기 안의 구분은 굵기로 한다 — 제목 700, 칸 이름·단추·강조 600, 나머지 400.
   title: 페이지 제목(공고 제목·목록 제목·완료·처리방침)
   h2:    한 단계 아래 큰 제목(지원서 작성, 목록의 ✤ 소제목) · 관리자 페이지/창 제목
   body:  본문·입력값·선택지·표 내용 + 굵게 쓰는 묶음 소제목(✤ 채용 절차, ⯌ 기본 정보, 처리방침 1.~8., 관리자 창 ✤)
   small: 칸 이름·안내·오류·단추·표 제목·바닥글
   (예전의 h3 단계 1rem 은 본문 0.9375rem 과 눈으로 구분되지 않아 v0.9.14 에서 본문 단계로 합쳤다) */
:root{
   --fs-title:1.4rem;
   --fs-h2:1.1rem;
   --fs-body:0.9375rem;
   --fs-small:0.8125rem
}

/* 높이·모서리: --ctl 입력칸·단추·선택상자·토글의 공통 높이(특별한 이유가 없으면 모든 조작 요소가 이 높이.
   휴대폰 폭에서는 손가락으로 누르기 쉽도록 조금 키운다 — 바로 아래 @media) · --r 모서리 둥글기 */
:root{
   --ctl:1.75rem;
   --r:0.1875rem
}

/* 지원자 화면 배치: --page-w 내용 최대 폭(휴대폰 기준 폭 47.5rem 과 같게 둘 것 — @media) · --page-pad 내용 좌우 여백(휴대폰은 아래 @media)
   --sec-gap 묶음 소제목(✤·⯌) 사이 간격 = 1.5rem + 본문 한 줄(0.9375rem × 줄간 1.8). 머리–첫 제목은 0.75배(site.css) */
:root{
   --page-w:47.5rem;
   --page-pad:1.25rem;
   --sec-gap:calc(1.5rem + 0.9375rem * 1.8)
}

/* 서체 보정: 지금 서체(english-grotesque + 오늘단조)는 글자가 줄 상자 안에서 글자 크기의 약 0.1배만큼 위로 쏠려 있다.
   글자를 세로 가운데 두는 곳은 이 값만큼 글자를 내린다 — ① 상자 안 글자(단추·탭·선택 칸·지원하기·평가 단추·순서 배열·파일 줄): 상자 위 여백을 이 값의 2배로
   ② 로고 옆 글자(머리 「채용」·「← 뒤로」, 관리자 「채용 관리」)·파일 줄 글자: 글자를 이 값만큼 아래로 ③ 체크·라디오 옆 글: 체크 상자를 이 값만큼 위로.
   서체를 바꾸면 다시 잴 것(0 이면 보정 없음) */
:root{
   --nudge:0.1em
}

/* 휴대폰 폭에서 바뀌는 설정값 */
@media (max-width:47.5rem){
  :root{
     --ctl:2.25rem;
     --page-pad:1rem
  }
}


/* ==========================================================================
   2. 바탕
   ========================================================================== */
*{box-sizing:border-box}

/* 기준 글자 크기: 화면 폭에 따라 0.875rem~1rem 사이에서 부드럽게 바뀐다 */
html{font-size:clamp(0.875rem, 0.8rem + 0.25vw, 1rem)}

/* 휴대폰에서 두 번 톡톡(더블 탭) 확대를 막는다.
   두 손가락으로 벌려 확대하는 것은 막지 않는다(글자가 작아 확대가 필요한 사람을 위해) */
html{touch-action:manipulation}
html,body{margin:0}
body{background:var(--beige);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}

/* 본문 서체로 쓰고 싶은 곳에 붙이는 이름표 */
.body-text{font-family:var(--font-body)}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.01em}
button,input,select,textarea{font:inherit;color:inherit}
textarea{font-family:var(--font-body)}

/* 숨김 (프로그램이 붙였다 뗐다 한다) */
.hidden{display:none !important}


/* ==========================================================================
   3. 단추
   ========================================================================== */
/* 기본 단추: 검정 바탕 · 흰 글자. 서체는 늘 기본 서체(본문 서체 구역 안에 놓여도 — 예: 제출 완료 화면). 위 여백 = 서체 보정(1번 --nudge) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;box-sizing:border-box;height:var(--ctl);border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--font);font-size:var(--fs-small);line-height:1;border-radius:var(--r);padding:0 0.875rem;padding-top:calc(var(--nudge) * 2);cursor:pointer;font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{background:#333}

/* 테두리만 있는 단추 */
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--card)}

/* 분홍 단추 */
.btn.pink{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn.pink:hover{background:#ffb0cf}

/* 삭제 단추: 빨간 테두리 */
.btn.danger{background:transparent;color:var(--red);border-color:var(--red)}

/* 좁은 단추 */
.btn.small{padding-left:0.625rem;padding-right:0.625rem}

/* 누를 수 없는 단추 */
.btn:disabled{opacity:.45;cursor:not-allowed}


/* ==========================================================================
   4. 입력칸 · 칸 이름 · 체크
   ========================================================================== */
/* 칸 하나(칸 이름 + 입력칸 + 안내) */
label.field,div.field{display:block;margin:0 0 0.625rem}

/* 칸 이름 */
.field>span{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:0.1875rem}

/* 필수 표시 * — 굵게 하지 않는다(칸 이름 · 소제목 · 질문 어디에 붙어도 같음) */
.field>span em,h3 em,.qt em{color:var(--pink-deep);font-style:normal;font-weight:400;margin-left:0.125rem}

/* 입력칸 · 선택상자 · 긴 글 칸 — 글씨는 본문 서체(최정호) */
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=month],input[type=url],input[type=time],input[type=number],input[type=password],input[type=search],select,textarea{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);height:var(--ctl);padding:0 0.5rem;outline:none;font-size:var(--fs-body);font-family:var(--font-body);box-sizing:border-box}

/* 입력 중인 칸 */
input:focus,select:focus,textarea:focus{border-color:var(--ink)}

/* 날짜 · 년월 칸: 휴대폰(특히 아이폰 사파리)은 이 칸에 자체 최소 폭을 줘서 width:100% 를 무시하고
   상자 밖으로 나간다 → 최소 폭을 없애고 기본 모양을 끈다 */
input[type=date],input[type=month]{min-width:0;max-width:100%;display:block}

/* 아이폰 · 아이패드에만 적용 */
@supports (-webkit-touch-callout:none){
  input[type=date],input[type=month]{-webkit-appearance:none;appearance:none;line-height:var(--ctl)}
  input[type=date]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value{text-align:left;margin:0}
}

/* 두 · 세 칸 배치 안의 칸도 내용 폭 때문에 넘치지 않게 */
.grid2>*,.grid3>*{min-width:0}

/* 긴 글 칸 */
textarea{height:auto !important;padding:0.375rem 0.5rem !important;resize:vertical;min-height:5rem;line-height:1.6}

/* 칸 아래 안내 문구 */
.hint{font-size:var(--fs-small);color:var(--sub);margin-top:0.25rem;font-weight:400}

/* 체크 상자 + 글 한 줄 */
.chk{display:flex;gap:0.5rem;align-items:flex-start;cursor:pointer;font-size:var(--fs-small)}
.chk input{margin-top:0.15rem;accent-color:var(--ink);width:1rem;height:1rem;flex:none;position:relative;top:calc(var(--nudge) * -1)}


/* ==========================================================================
   5. 상자 · 표시 딱지
   ========================================================================== */
/* 흰 상자 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}

/* 둥근 표시 딱지(상태 등). 기본은 분홍 */
.badge{display:inline-block;font-size:var(--fs-small);font-weight:600;padding:0.0625rem 0.5rem;border-radius:1.25rem;background:var(--pink-soft);color:var(--pink-deep);white-space:nowrap}
.badge.gray{background:#ece7d6;color:var(--sub)}
.badge.dark{background:var(--ink);color:#fff}
.badge.red{background:#f6e0de;color:var(--red)}
.badge.green{background:#e3ede4;color:var(--green)}
.badge.amber{background:var(--amber);color:var(--ink)}

/* 테두리만 있는 딱지(지원자 「접수」). 테두리 대신 안쪽 그림자로 그려 다른 딱지와 크기가 같다 */
.badge.line{background:transparent;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line2)}

/* 오류 글자 */
.err{color:var(--red);font-size:var(--fs-small)}

/* 휴대폰 입력칸 글자를 따로 키우던 예외는 v0.9.20 에서 없앴다 — 아이폰의 입력칸 자동 확대는
   index.html 의 viewport 설정(아이폰에서만 최대 확대 1배)으로 막는다 */