/* ==========================================================================
   로그인 / 회원가입 전용 스타일
   레거시(frontend/php_website/html/{login,register,style.css} +
          frontend/php_website/html/m/{login,register,style.css})의
   색상·레이아웃·컴포넌트 룩앤필을 그대로 계승하되, 데스크톱/모바일로 나뉘어
   있던 두 벌의 CSS를 미디어쿼리 기반 하나의 반응형 스타일로 병합한 것.
   home.php의 파란 디자인시스템(--ink 등)은 강제하지 않는다 — 폰트만 상위
   style.css에서 자연 상속(Pretendard).
   브레이크포인트: 720px(태블릿), 960px(데스크톱 — 레거시 PC 레이아웃 재현)
   ========================================================================== */

:root {
  --auth-blue: #224597;
  --auth-blue-soft: rgba(34, 69, 151, 0.08);
  --auth-red: #ff5454;
  --auth-red-soft: rgba(255, 84, 84, 0.08);
  --auth-green: #229755;
  --auth-border: #b1b1b1;
  --auth-input-bg: #eeeeee;
  --auth-ink: #3d3d3d;
}

/* 레거시는 마케팅 페이지(연한 블루톤 --bg)와 달리 로그인/회원가입은 순백색 배경 */
body { background: #fff; }

.auth-content { padding: 40px 20px 80px; box-sizing: border-box; }

/* ── 공통 커스텀 체크박스 (레거시 check.png / check_on.png 그대로 사용) ── */
.customChkBox { display: inline-flex; align-items: center; }
.customChkBox > input[type="checkbox"] { display: none; }
.customChkBox > label {
  position: relative;
  height: 22px;
  line-height: 22px;
  padding-left: 30px;
  margin: 0;
  cursor: pointer;
}
.customChkBox > label::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  background: url("/images/check.png") no-repeat center / contain;
}
.customChkBox > input[type="checkbox"]:checked + label::before {
  background-image: url("/images/check_on.png");
}

.alertText { font-size: 18px; line-height: 1.4; padding: 15px; margin: 0 0 16px; border-radius: 5px; word-break: keep-all; text-align: center; }
.alertText.blue { color: var(--auth-blue); border: 1px solid var(--auth-blue); background: var(--auth-blue-soft); }
.alertText.red { color: var(--auth-red); border: 1px solid var(--auth-red); background: var(--auth-red-soft); }

.form-text { display: block; margin-top: 5px; font-size: 14px; }
.form-text.text-danger { color: var(--auth-red); }
.form-text.text-success { color: var(--auth-blue); }

/* ==========================================================================
   로그인
   ========================================================================== */
.loginArea { width: 100%; max-width: 400px; margin: 0 auto; }

.inputCover { margin-bottom: 0; }
.inputCover > label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.inputCover input {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--auth-input-bg); border: 1px solid var(--auth-border);
  height: 44px; padding: 0 14px; font-size: 16px; color: #000; border-radius: 5px;
}
.inputCover input::placeholder { color: #9a9a9a; }
.inputCover .passwordToggle { position: relative; }
.inputCover .passwordToggle input { padding-right: 42px; }
.inputCover .passwordToggle > button {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer; line-height: 0;
}
.inputCover .passwordToggle > button img { width: 20px; height: 20px; }

.loginOption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 0 0; }
.loginOption > .saveArea > label { font-size: 14px; }
.loginOption > .findArea { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.loginOption > .findArea > li { font-size: 14px; position: relative; padding: 0 10px; list-style: none; }
.loginOption > .findArea > li:first-child { padding-left: 0; }
.loginOption > .findArea > li:last-child { padding-right: 0; }
.loginOption > .findArea > li:not(:first-child)::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: #707070;
}
.loginOption > .findArea > li > a { color: var(--auth-ink); text-decoration: none; }
.loginOption > .findArea > li > a:hover { color: var(--auth-blue); }

.btnArea { padding-top: 24px; }
.btnArea > button {
  display: block; width: 100%; height: 46px; border-radius: 6px;
  border: 1px solid #636363; background: #fff; font-size: 18px; font-weight: 800; cursor: pointer;
}
.btnArea > *:not(:first-child) { margin-top: 10px; }
.btnArea > button:first-child { color: #fff; background: var(--auth-blue); border-color: var(--auth-blue); }
.btnArea > button:first-child:hover { background: #1b3676; }
.btnArea div.mt-3 { color: #ff0000; font-weight: 500; font-size: 18px; text-align: center; margin-top: 16px; }

#resetPasswordResult { font-size: 13px; text-align: center; margin-top: 8px; }

/* 이메일/비밀번호 찾기 모달 내부 요소 (main.js의 .modal-overlay 경량모달 사용) */
.email-auth-wrapper { display: flex; align-items: center; margin-bottom: 5px; }
.email-auth-wrapper input { flex: 1; }
.timer { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--auth-blue); }
.found-email { margin: 24px 0 5px; font-size: 24px; font-weight: 500; text-align: center; color: var(--auth-ink); }
#resetPasswordConfirmBtn { background-color: var(--auth-blue); color: #fff; }
.emailResultMessage,
.resetResultMessage { font-size: 19px; font-weight: 600; text-align: center; color: var(--auth-ink); }

/* ==========================================================================
   회원가입
   ========================================================================== */
.progressArea { font-size: 0; text-align: center; margin-bottom: 24px; }
.progressArea > div {
  display: inline-block; font-size: 14px; font-weight: 700; width: 84px; height: 84px;
  line-height: 84px; border-radius: 100%; box-sizing: border-box; border: 1px solid #9aa6b5; background: #fff;
}
.progressArea > div:not(:first-child) { margin-left: 12px; }
.progressArea > div.on { color: #fff; background: #2b3b86; border-color: #2b3b86; box-shadow: 4px 4px 12px rgba(0,0,0,0.16); }

.registerArea { width: 100%; max-width: 900px; margin: 0 auto; padding-top: 20px; }

#terms-step .allCheck { background: #fff; border: 1px solid #9aa6b5; border-radius: 6px; text-align: center; padding: 18px 12px; }
#terms-step .allCheck label { font-size: 16px; font-weight: 700; }
#terms-step .termsArea { margin-top: 26px; }
#terms-step .termsArea > label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 0.5em; }
#terms-step .termsArea > textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #c7d4e5; background: #fff;
  padding: 14px; font-size: 13px; line-height: 1.55; border-radius: 6px; resize: vertical;
  font-family: inherit;
}
#terms-step .termsArea > .customChkBox { display: flex; justify-content: flex-end; margin-top: 10px; }
#terms-step .termsArea > .customChkBox label { font-size: 15px; font-weight: 700; }

.registerBtn { text-align: right; }
.registerBtn > button {
  width: 100%; max-width: 220px; height: 52px; background: var(--auth-green); border-radius: 6px;
  color: #fff; font-size: 16px; font-weight: 800; border: 0; margin-top: 30px; cursor: pointer;
}
.registerBtn > button:hover { background: #1c7c46; }

#info-step { border-top: 1px solid #5a5a5a; padding: 24px 0 30px; }
/* 레거시 모바일도 고정값이 아닌 3%(컨테이너 너비 기준) 상단여백을 씀 — 뷰포트가
   960px 데스크톱 전환 직전까지 넓어질수록 자연스럽게 커져서, 고정 10px일 때
   959px 근처에서 "회원정보"가 이전 섹션에 붙어 보이던 문제를 없앤다 */
#info-step h4 { font-size: 16px; font-weight: 700; padding: 3% 0 16px; }

#info-step .formArea { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 16px; }
#info-step .formArea > label { font-size: 14px; font-weight: 400; margin: 0; }
/* 레거시 실측: #info-step은 font-size 150% 컨텍스트라 .form-text(성공/실패 메시지)가
   16px로 렌더됨 — 공용 .form-text 기본값(14px)보다 이 화면에서만 더 크게 */
#info-step .form-text { font-size: 16px; }
#info-step .formArea input,
#info-step .formArea select {
  height: 42px; background: #fff; box-sizing: border-box; border: 1px solid var(--auth-border);
  border-radius: 5px; padding: 0 12px; font-size: 14px; width: 100%; font-family: inherit;
}
#info-step .formArea > button {
  align-self: flex-start; border: 0; color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 5px; background: var(--auth-ink); padding: 0 16px; height: 42px; cursor: pointer;
  white-space: nowrap;
}
#info-step .formArea > button:disabled { background-color: #b1b1b1 !important; color: #fff !important; cursor: not-allowed; }

#info-step .bnBox { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; width: 100%; }
#info-step .bnBox > input { flex: 1 1 0; min-width: 70px; }
/* 성공/실패 메시지(.form-text)가 뷰포트 폭에 따라 입력칸 옆(같은 줄)과 아래(다음 줄)를
   오가며 위치가 튀던 문제 — flex-basis:100%로 항상 새 줄에 고정. margin-top도
   bnBox의 row-gap만 남기고 제거해 입력칸에 더 가깝게 붙임(레거시도 음수 margin으로
   바짝 붙여씀) */
#info-step .bnBox > .form-text { flex-basis: 100%; margin-top: 0; }

/* 사업자번호/휴대폰번호: label 아래로 입력칸(bnBox)과 버튼이 각각 별도 줄로 떨어져
   3줄이 되던 것을, 폭이 충분하면 bnBox와 버튼이 한 줄에 나란히 놓이도록 개선.
   flex-wrap이 있어 좁은 화면에서는 자동으로 다시 아래 줄로 떨어지므로 별도
   브레이크포인트 없이 전 구간(960px 데스크톱 그리드 전환 전까지)에 적용 가능 */
#info-step .formArea:has(> .bnBox) { flex-direction: row; flex-wrap: wrap; align-items: center; }
#info-step .formArea:has(> .bnBox) > label { flex: 0 0 100%; }
#info-step .formArea:has(> .bnBox) > .bnBox { flex: 1 1 240px; width: auto; }
#info-step .formArea:has(> .bnBox) > button { flex: 0 0 auto; }

#info-step .passwordToggle { position: relative; width: 100%; }
#info-step .passwordToggle > input { width: 100%; padding-right: 42px; }
#info-step .passwordToggle > button {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer; line-height: 0;
}
#info-step .passwordToggle > button img { width: 20px; height: 20px; }

#complete-step { text-align: center; padding: 40px 0; }
/* register_complete.png 원본이 151x168 — 레거시는 확대 없이 원본 그대로 노출, 60%/220px 확대 스케일 제거 */
#complete-step > img { display: block; margin: 0 auto 25px; max-width: 151px; width: 100%; }
#complete-step .completeName { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
#complete-step .completeText { font-size: 18px; font-weight: 400; margin: 0 0 16px; }
#complete-step .registerBtn { text-align: center; margin-top: 15px; }
#complete-step .registerBtn > button { margin-top: 0; }

.wrapper { display: flex; flex-direction: column; width: 100%; }
.wrapper input { width: 100%; }
.wrapper small { margin-top: 5px; color: var(--auth-red); display: block; }

.email-wrapper { display: flex; align-items: center; gap: 8px; width: 100%; }
.email-wrapper input { flex: 1 1 auto; min-width: 0; }
/* 레거시 실측: 이메일/휴대폰 인증확인 버튼은 .formArea > button 직계가 아니라
   .email-wrapper 안에 있어 별도 규칙이 필요하지만, 실제 크기는 중복확인/인증요청
   버튼(#info-step .formArea > button)과 동일해야 함 — font-size를 맞춘다 */
.email-wrapper button {
  height: 42px; border: 0; color: #fff; font-size: 14px; font-weight: 600; border-radius: 5px;
  background: var(--auth-ink); padding: 0 14px; box-sizing: border-box; white-space: nowrap; cursor: pointer;
}

.email-message-wrapper,
.password-message-wrapper,
.select-message-wrapper,
.message-wrapper { margin-top: 4px; color: var(--auth-red); display: block; font-size: 12px; }
#phoneAuthMessage.text-success,
.email-message-wrapper.text-success,
.password-message-wrapper.text-success { color: var(--auth-blue); }

.select-wrapper { position: relative; display: block; width: 100%; }
.select-wrapper select { width: 100%; box-sizing: border-box; }

/* ==========================================================================
   태블릿 이상 (720px~) — 폭·여백 확장
   ========================================================================== */
@media (min-width: 720px) {
  .auth-content { padding: 60px 20px 100px; }
  .progressArea > div { width: 100px; height: 100px; line-height: 100px; font-size: 16px; }
  .registerBtn > button { max-width: 260px; }
}

/* ==========================================================================
   데스크톱 (960px~) — 레거시 PC 레이아웃(라벨-필드 좌우 배치) 재현
   ========================================================================== */
@media (min-width: 960px) {
  .progressArea > div { width: 130px; height: 130px; line-height: 130px; font-size: 18px; }
  .progressArea > div:not(:first-child) { margin-left: 20px; }

  /* 레거시 데스크톱(vw 환산) 그대로: 라벨 22px·인풋 18px·버튼 높이70px/27px */
  .inputCover > label { font-size: 22px; }
  .inputCover input { font-size: 18px; height: 45px; }
  .loginOption > .saveArea > label { font-size: 18px; }
  .loginOption > .findArea > li { font-size: 18px; }
  .btnArea > button { height: 70px; border-radius: 10px; font-size: 27px; }

  #terms-step .allCheck label { font-size: 20px; }
  #terms-step .termsArea > label { font-size: 21px; }
  #terms-step .termsArea > textarea { font-size: 18px; }
  #terms-step .termsArea > .customChkBox label { font-size: 20px; }

  .registerBtn > button { font-size: 22px; }

  #info-step { padding: 30px 0 40px 0; }
  /* 위쪽 여백(55px)은 레거시 실측대로 유지해 이전 섹션과의 구분감을 살리고,
     아래쪽 여백은 사용자 요청으로 축소 — 제목이 바로 아래 첫 필드에 더 붙어 보이도록 */
  #info-step h4 { font-size: 21px; padding: 55px 0 16px; }
  #info-step .formArea > label { font-size: 18px; }
  #info-step .formArea input,
  #info-step .formArea select { font-size: 18px; }
  #info-step .formArea > button { font-size: 17px; }
  #info-step .email-wrapper button { font-size: 17px; }

  /* 라벨 | 입력필드 | (선택)버튼 3열 그리드 — 메시지류는 입력필드 칸으로 정렬 */
  #info-step .formArea {
    display: grid;
    grid-template-columns: 150px minmax(0, 380px) auto;
    column-gap: 16px;
    row-gap: 6px;
    align-items: center;
    margin-top: 18px;
  }
  #info-step .formArea > label {
    grid-column: 1;
    align-self: start;
    padding-top: 10px;
  }
  #info-step .formArea > .wrapper,
  #info-step .formArea > .email-wrapper,
  #info-step .formArea > .select-wrapper,
  #info-step .formArea > .passwordToggle {
    grid-column: 2 / span 2;
  }
  #info-step .formArea > .bnBox { grid-column: 2; }
  #info-step .formArea > button { grid-column: 3; }
  #info-step .formArea > .email-message-wrapper,
  #info-step .formArea > .password-message-wrapper {
    grid-column: 2 / span 2;
    margin-top: -2px;
  }

  /* 레거시 실측(vw 환산, 1920px 기준): width 410px/height 100px/font 30px/radius 10px —
     이전 값(280/60/22)은 레거시와 대조 없이 임의로 잡혀있던 값이었음 */
  .registerBtn > button { max-width: 410px; height: 100px; font-size: 30px; border-radius: 10px; }
}

/* 아이디/비밀번호 찾기 모달 프레임(.modal-overlay/.modal-box/.modal-head/.modal-close 등)은
   2026-09-07부터 style.css의 사이트 공통 규칙으로 승격됨 — 여기서 더 이상 재정의하지 않는다.
   (레거시 확인 결과 mypage/subscribe 등도 로그인과 동일한 plain .modal-dialog를 쓰므로
   전 페이지 공통이 맞음. footer 약관 모달처럼 센터정렬이 필요하면 .modal-centered 사용.) */