/* 간편 가입 폼 — 이메일 인증 → 계정 정보를 <b>한 화면에서 이어 채우는</b> 단계 폼.

   사업주 축의 /signup 과 구직 축의 /jobs/signup·/jobs/signup/profile 이 <b>같은 한 벌</b>을 쓴다.
   원래 /signup 의 <style> 안에만 있었고, 구직자 가입을 같은 모양으로 만들면서 뽑아냈다 —
   화면마다 베껴 두면 반드시 한쪽만 고쳐지고, 두 가입 화면이 조금씩 다른 폼이 된다.
   (jobs-ui.css 를 뽑은 것과 같은 이유다.)

   ⚠️ 공용 auth-* · register-terms/reg-term-* 는 common.css 에 있다. 여기 있는 것은
      "그 위에 얹히는 단계 폼" 부분뿐이다.
   ⚠️ <head> 에서 tailwind.css <b>뒤에</b> 읽어야 한다. .hidden 을 눌러야 하는 규칙이 있다.
      반대로 common.css 는 헤더 프래그먼트가 <body> 에서 <b>이 파일보다 뒤에</b> 싣는다 —
      그래서 .auth-input 의 값을 이기려면 특정도를 한 단계 높여 적는다(.auth-input.signup-code).
   ⚠️ Tailwind 프리빌드본(CLAUDE.md §4-1)과 무관한 정적 파일이다. 여기 쓴 클래스는
      npm run build:css 없이 그대로 산다. */


/* ⚠️ 아직 열리지 않은 칸 숨김. common.css 의 .auth-field(s) 가 display:flex 라
   Tailwind 의 .hidden(display:none) 이 같은 특정도로 눌린다 — 그대로 두면
   인증번호·계정 정보가 처음부터 다 보인다.
   register.html 의 .tab-btn.hidden 과 같은 함정이라 같은 방식으로 명시한다. */
.auth-field.hidden,
.auth-fields.hidden { display: none; }

/* 입력칸 + 오른쪽 버튼 한 줄. 사업자 가입의 [인증] 버튼과 같은 배치다.
   좁은 화면에서는 버튼이 다음 줄로 내려가 폭을 꽉 채운다 — 브레이크포인트가 아니라
   "입력칸이 최소 폭 아래로 눌리면" 이 조건이다. 버튼 글자 길이가 언어마다 달라
   (ko "인증번호 받기" vs ru "Получить код") 화면 폭만으로는 기준을 잡을 수 없다. */
.signup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* grow 999 : 1 — 한 줄일 때 남는 공간은 사실상 입력칸이 다 가져가고,
   줄이 바뀌어 버튼만 남으면 그 줄에서 100% 로 늘어난다. */
.signup-row .auth-input {
  /* basis 를 최소폭과 같게 못 박는다. auto 로 두면 input 의 기본 폭(size=20, 약 180px)이
     basis 가 되어, 실제로는 들어가는 폭인데도 375px 에서 버튼이 미리 내려간다.
     11rem(176px) 은 "jiwonk427@gmail.com" 정도가 잘리지 않고 보이는 폭이다.
     이 아래로 눌릴 바에는 버튼을 다음 줄로 내려 입력칸에 한 줄을 통째로 준다 —
     입력칸이 좁아 주소가 잘리는 쪽이 버튼이 한 줄 차지하는 것보다 나쁘다. */
  flex: 999 1 11rem;
  min-width: 11rem;
}
.signup-inline-btn {
  flex: 1 0 auto;
  /* 짧은 라벨([확인])도 누를 만한 크기를 갖도록 하한을 둔다.
     옆 행의 [인증번호 받기](약 102px)와 형제처럼 보이는 폭이다. 이 값을 더 키우면
     320px 에서 인증번호 행이 두 줄로 갈라진다(아래 signup-code 의 최소 폭과 합이 넘는다). */
  min-width: 5.5rem;
  /* 한 줄일 때는 옆 입력칸 높이로 늘어난다(값을 박으면 .auth-input 이 바뀔 때 어긋난다).
     줄이 바뀌면 늘어날 형제가 없으므로 padding 이 높이를 만든다 — 두 경우가 비슷해지는 값. */
  align-self: stretch;
  padding: 12px 14px;
  background: #1d71fe;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.35px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.signup-inline-btn:hover { background: #0851cc; }
/* 페이지 <style> 가 tailwind.css 보다 뒤라, display 를 안 건드려도 .hidden 은 먹는다.
   그래도 이 버튼은 확인 후 사라지는 게 동작의 일부라 명시해 둔다. */
.signup-inline-btn.hidden { display: none; }

/* 소셜 버튼 줄의 배치·버튼 모양은 모두 common.css 에 있다(로그인 화면과 공용).
   마크업도 fragments/social-login.html 한 벌을 함께 쓴다. */

/* 확인이 끝난 이메일 — 고칠 수 없고 값만 보여 준다.
   색은 사업자 가입의 잠긴 필드(.auth-input.is-locked)와 같은 톤을 쓴다. */
.auth-input:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #364153;
  font-weight: 500;
  cursor: default;
}

/* 확인 뒤에 열리는 묶음. .auth-fields 의 세로 간격을 안쪽에서도 유지한다. */
.signup-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.signup-group.hidden { display: none; }

/* 확인 완료 표시 — 초록 대신 프라이머리 톤으로 통일한다. */
.auth-hint.signup-ok {
  color: #1d71fe;
  font-weight: 600;
}

/* 인증번호 입력 — 6자리라 자간을 넓혀 자릿수를 눈으로 세게 한다.
   ⚠️ .auth-input 과 함께 쓰는 선택자로 적는다. common.css 는 헤더 프래그먼트에서
      (즉 이 <style> 보다 뒤에) 로드되므로, 특정도가 같으면 .auth-input 의
      font-size·letter-spacing·font-weight 가 이겨 이 스타일이 통째로 죽는다. */
.auth-input.signup-code {
  letter-spacing: 10px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  /* letter-spacing 은 마지막 글자 뒤에도 붙는다 → 가운데 정렬이 그 10px 을 포함해
     계산되어 숫자가 5px 왼쪽으로 치우친다. 왼쪽 padding 을 그만큼 더 줘 되돌린다. */
  padding-left: 22px;
  /* 6자리가 한 줄에 다 보여야 한다. 이 폭 아래로 눌리면 버튼이 다음 줄로 내려간다
     — 러시아어 320px 에서 코드가 "4 8 1 9 0" 까지만 보이고 잘렸다.
     실측 필요 폭은 145px(글자 119 + padding 24 + border 2)이고, 폰트 로딩 차이를 감안해
     7px 여유만 둔다. 남는 폭은 옆 버튼(min-width)이 가져간다. */
  min-width: 9.5rem;
  flex-basis: 9.5rem;
  /* ⚠️ 높이를 이메일 칸과 맞춘다. .auth-input 은 font-size 16px + line-height 150%(=24px) 라
     글자만 20px 로 키우면 줄상자가 30px 이 되어 이 칸만 6px 더 높아진다.
     줄상자를 24px 로 고정하면 padding·border 가 같으므로 두 칸의 높이가 같아진다. */
  line-height: 24px;
}
.auth-input.signup-code::placeholder {
  letter-spacing: 4px;
  font-size: 15px;
  font-weight: 400;
}

.signup-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* .auth-hint 와 같은 값. 이메일 칸 아래 힌트와 인증번호 칸 아래 타이머가
     입력창에서 서로 다른 거리에 놓이면 두 줄의 리듬이 어긋나 보인다. */
  margin-top: 2px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: -0.3px;
}
.signup-timer .left { color: #dc2626; font-weight: 600; }
.signup-resend {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.signup-resend:hover { color: #1d71fe; }
.signup-resend:disabled { color: #d1d5db; cursor: default; }

/* 보조 안내 — 위 .auth-foot 의 구분선을 또 긋지 않는다(선이 둘이면 무겁다).
   들어가면 한 줄, 모자라면 링크가 통째로 다음 줄로 내려간다.
   flex-wrap 은 줄이 모자랄 때 아이템을 통째로 넘기므로, 링크 한가운데가
   "사업자 / 회원가입" 처럼 잘리는 일이 없다. 문장이 한 줄보다 길면(ru) 그때만 문장이 접힌다. */
.signup-foot-sub {
  align-self: stretch;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 6px;
  text-align: center;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  color: #9ca3af;
  letter-spacing: -0.35px;
}
.signup-foot-sub a {
  color: #6b7280;
  font-weight: 600;
  text-decoration: none;
  /* 링크는 통째로 움직인다 — 안에서 줄이 갈리면 어디까지가 링크인지 흐려진다. */
  white-space: nowrap;
}
.signup-foot-sub a:hover { color: #1d71fe; }

/* ── 폼 안의 구역 제목 ────────────────────────────────────────────────
   구직 가입은 한 화면에서 <b>계정</b>과 <b>기본 정보</b> 둘을 받는다. 칸만 이어 붙이면
   비밀번호 다음에 왜 갑자기 이름을 묻는지가 안 보인다. 선을 긋지 않고 제목만 둔다 —
   카드 안에 선이 늘면 약관 상자(.register-terms)와 경쟁한다. */
.signup-section {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.signup-section-h {
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #364153;
  letter-spacing: -0.4px;
}

/* ── 단계 표시 — 지금은 쓰는 화면이 없다 ──────────────────────────────
   구직 가입이 두 화면이던 때 쓰던 것이다. 기본 정보를 가입 폼 안으로 들이면서 한 화면이 됐다.
   ⚠️ 되살리려면 <b>왜 두 화면이어야 하는지</b>부터 적을 것. 쪼개면 소셜 가입이 뒷단계를
      건너뛸 길이 생기고, 그게 지원할 수 없는 계정을 만든 원인이었다. */
.signup-steps {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 언어마다 라벨 길이가 달라(ko "계정 만들기" vs ru "Создание аккаунта") 좁은 화면에서
     두 줄로 접힌다. 접힐 때 연결선만 덩그러니 남지 않도록 선은 그때 숨긴다. */
  flex-wrap: wrap;
}
.signup-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: -0.3px;
}
.signup-step i {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}
.signup-step.is-on { color: #1d71fe; }
.signup-step.is-on i { background: #1d71fe; }
/* 끝난 단계 — 숫자 대신 체크. 번호를 그대로 두면 지금 서 있는 단계와 구별이 안 된다. */
.signup-step.is-done { color: #6b7280; }
.signup-step.is-done i { background: #1d71fe; font-size: 11px; }
.signup-step.is-done i::before { content: "✓"; }
.signup-step.is-done i span { display: none; }
.signup-bar {
  flex: 1 1 24px;
  min-width: 16px;
  height: 1px;
  background: #e5e7eb;
}

/* ── 확인용 값 표시 — 소셜로 들어온 사람의 계정 주소 ───────────────────
   ②에서 "지금 어느 계정에 정보를 붙이는 중인지" 를 보여 준다. 고칠 수 없는 값이라
   입력칸이 아니라 판으로 그린다(signup-social.html 의 .social-account 와 같은 톤). */
.signup-readonly {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #364153;
  letter-spacing: -0.35px;
  min-width: 0;
}
.signup-readonly .em {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 성별 — 세 개짜리 선택. select 로 두면 '선택 안 함' 이 기본값인 것이 안 보인다 ──
   라디오를 칩으로 그린다. 값이 셋뿐이고 어느 것도 필수가 아니라, 펼쳐 두는 편이 짧다. */
.signup-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.signup-choice label {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  letter-spacing: -0.35px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.signup-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.signup-choice label:hover { border-color: #9ca3af; }
/* 선택 표시는 <b>label</b> 에 준다 — 테두리·배경이 label 에 있어서다.
   :has() 를 모르는 브라우저를 위해 JS 도 같은 클래스(.is-on)를 붙인다. 둘 중 하나만 있어도
   보이고, 둘 다 없어도 값은 정상 저장된다(선택이 눈에 안 보일 뿐이다). */
.signup-choice label:has(input:checked),
.signup-choice label.is-on {
  border-color: #1d71fe;
  background: #ebf1fd;
  color: #1d71fe;
  font-weight: 600;
}
/* 라디오를 숨겼으므로 키보드 포커스는 label 이 대신 보여 준다. */
.signup-choice label:has(input:focus-visible),
.signup-choice label.is-focus { outline: 2px solid #1d71fe; outline-offset: 2px; }
