/* =============================================================
   member.css — C4 로그인·회원가입 / C18 비밀번호 재설정 페이지 전용
   시안: Figma TheKKOT-yhlee · 로그인 32:2337 / 회원가입 32:2468 /
        비밀번호 재설정 32:2513 (모바일 393. 데스크탑 시안 없음 —
        다른 화면과 같은 관례: 셸 헤더·푸터 + 중앙 폭 제한 컬럼)
   토큰·버튼(.kb-btn*)·구분 밴드(.t-division)는 customer-common.css.

   모바일·태블릿(<1100)은 시안의 「뒤로가기 head」가 셸 헤더를 대신하고
   푸터도 없다. 데스크탑(≥1100)은 셸 헤더·푸터를 그대로 쓴다.
   ============================================================= */

:root {
  --mb-error: #e5484d;
  --mb-frame-max: 480px;
  --mb-bottombar-height: 88px;
}

@media (max-width: 1099px) {
  .mb-body .kb-header {
    display: none;
  }

  .mb-body .kb-footer {
    display: none;
  }
}

/* ---------------------------------------------------------------
   모바일 뒤로가기 head (시안 head · 높이 50)
   --------------------------------------------------------------- */
.mb-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background: var(--kb-white);
}

.mb-back {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--kb-gray-800);
  background: currentColor;
  -webkit-mask: url("../img/member/icon-arrow-left.svg") center / contain no-repeat;
  mask: url("../img/member/icon-arrow-left.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------------
   본문 컬럼 — 모바일 풀폭 / 태블릿·데스크탑 중앙 480
   (t-division 은 컬럼 안에서만 풀블리드 — 모바일에선 화면 전체 폭)
   --------------------------------------------------------------- */
.mb-main {
  width: 100%;
  max-width: var(--mb-frame-max);
  margin: 0 auto;
}

/* 페이지 타이틀 (시안 page-list-title · pt/pb 30) */
.mb-page-head {
  padding: 30px 16px;
}

.mb-page-title {
  color: var(--kb-gray-900);
  font-size: 1.375rem;
  font-weight: 700;
}

.mb-page-sub {
  margin-top: 12px;
  color: var(--kb-gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}

.mb-section {
  padding: 24px 16px;
}

/* 폼 안 소제목 (C20 회원정보 수정 — 기본 정보 / 로그인 정보 / 계정) */
.mb-section-title {
  color: var(--kb-gray-900);
  font-size: 1.125rem;
  font-weight: 600;
}

/* 읽기 전용 표시값 (C20 이메일 등 — 입력처럼 보이지 않게 텍스트로) */
.mb-static {
  color: var(--kb-gray-800);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 작은 고스트 버튼 (C20 변경하기·요청하기 — 마이페이지 my-btn-small 과 동일 조형) */
.mb-btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--kb-gray-300);
  border-radius: var(--kb-radius);
  background: var(--kb-gray-50);
  color: var(--kb-gray-600);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   폼 필드 (시안 Input · 높이 48 · 라운드 8 · 라벨 14 Bold)
   --------------------------------------------------------------- */
.mb-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mb-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mb-label {
  color: var(--kb-gray-900);
  font-size: 0.875rem;
  font-weight: 700;
}

.mb-input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--kb-gray-300);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
  color: var(--kb-gray-900);
  font: inherit;
  font-size: 0.875rem;
}

.mb-input::placeholder {
  color: var(--kb-gray-400);
}

.mb-input:focus {
  outline: none;
  border-color: var(--kb-main);
}

/* 셀렉트 — 시안 ico-select(18px) 를 오른쪽에 얹는다. 값이 비어 있으면
   (required + novalidate 폼의 :invalid) 플레이스홀더 색으로 보여준다 */
select.mb-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background: url("../img/member/icon-select.svg") right 12px center / 18px 18px no-repeat;
}

select.mb-input:required:invalid {
  color: var(--kb-gray-400);
}

select.mb-input option {
  color: var(--kb-gray-900);
}

.mb-field-hint {
  color: var(--kb-gray-500);
  font-size: 0.75rem;
}

.mb-field-error {
  color: var(--mb-error);
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------
   약관 동의 (시안 Check 16px · 라운드 4)
   --------------------------------------------------------------- */
.mb-consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mb-check-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
}

.mb-check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  border: 1px solid var(--kb-gray-400);
  border-radius: 4px;
  background: var(--kb-white);
  cursor: pointer;
}

.mb-check:checked {
  border-color: var(--kb-main);
  background: var(--kb-main);
}

.mb-check:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--kb-white);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.mb-check-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mb-check-label {
  color: var(--kb-gray-800);
  font-size: 0.875rem;
  font-weight: 600;
}

.mb-check-caption {
  color: var(--kb-gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---------------------------------------------------------------
   안내·오류 배너 (기존 form-alert 대체 — 시안엔 없어 토큰으로만 구성)
   --------------------------------------------------------------- */
.mb-alert {
  margin: 0 16px;
  padding: 12px 14px;
  border-radius: var(--kb-radius);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.mb-alert + .mb-alert {
  margin-top: 8px;
}

.mb-alert.notice {
  background: var(--kb-main-50);
  color: var(--kb-gray-800);
}

.mb-alert.error {
  background: #fdecec;
  color: #b3261e;
}

/* 폼 섹션 안 배너는 섹션 패딩이 좌우 여백을 대신한다 */
.mb-form .mb-alert {
  margin: 0;
}

/* 본문 바로 아래 배너 — 구분 밴드와 간격 (C20 확인 안내·완료) */
.mb-main > .mb-alert {
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   하단 버튼 바 (시안 bottomBtn — 모바일 고정 · 데스크탑은 본문 흐름)
   주 동작 1개만 둔다 (시안의 2버튼은 컴포넌트 상태 표기 — 확인요청 반영)
   --------------------------------------------------------------- */
.mb-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px 16px 16px;
  background: var(--kb-white);
  box-shadow: 0 -2px 2.5px rgba(0, 0, 0, 0.05);
}

.mb-bottombar .kb-btn {
  flex: 1;
}

/* 고정 바가 본문 끝을 가리지 않게 */
body:has(.mb-bottombar) {
  padding-bottom: var(--mb-bottombar-height);
}

.mb-submit {
  width: 100%;
}

/* ---------------------------------------------------------------
   로그인 (32:2337) — 일러스트 + ID/PW + 로그인 + 재설정 링크,
   회원가입 아웃라인 버튼은 화면 하단으로 밀어 둔다 (시안 y668)
   --------------------------------------------------------------- */
.mb-login-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px);
  padding: 0 16px 40px;
}

.mb-illust {
  width: 161px;
  height: auto;
  margin: 59px auto 0;
}

.mb-login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 33px;
}

.mb-login-form .mb-submit {
  margin-top: 22px;   /* 입력 그룹과 30px 간격 (필드 gap 8 포함) */
}

.mb-reset-link {
  align-self: flex-start;
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--kb-gray-300);
  color: var(--kb-gray-600);
  font-size: 0.75rem;
}

.mb-signup-cta {
  margin-top: auto;
  padding-top: 48px;
}

.mb-login-main .mb-alert {
  margin: 16px 0 0;
}

/* ---------------------------------------------------------------
   재설정 완료·만료·오류 상태 (C18 링크 랜딩 — 시안 없음 · 타이틀 관례)
   --------------------------------------------------------------- */
.mb-state-actions {
  padding: 24px 16px;
}

/* ---------------------------------------------------------------
   데스크탑 (≥1100) — 셸 헤더·푸터 + 중앙 컬럼, 고정 바 해제
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  .mb-head {
    display: none;
  }

  .mb-main {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  .mb-page-head {
    padding-top: 50px;
  }

  .mb-bottombar {
    position: static;
    padding: 24px 16px 0;
    box-shadow: none;
  }

  body:has(.mb-bottombar) {
    padding-bottom: 0;
  }

  .mb-login-main {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .mb-illust {
    margin-top: 20px;
  }

  /* 데스크탑은 세로 여백을 흐름대로 — 회원가입 버튼을 바닥에 밀지 않는다 */
  .mb-signup-cta {
    margin-top: 0;
    padding-top: 40px;
  }
}