.auth-wrap {
  max-width: 480px;        /* 440px 폼 + 좌우 패딩 20px */
  margin: 80px auto 80px;
  padding: 0 20px;
}
.auth-wrap.wide { max-width: 560px; }

/* 로그인 제목: 46px / bold / 자간 -0.02em */
.auth-title {
  text-align: center;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 61px;     /* 피그마: 제목→탭 61px */
  color: #000;
}

/* 탭: 두 버튼 40px 간격으로 분리, 각각 58px 높이 */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 57px;     /* 피그마: 탭→첫 필드 57px */
}
.auth-tabs button {
  padding: 20px 16px;
  line-height: 1;          /* 20+18+20 = 58px 정확히 맞춤 */
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: #fff;
  color: var(--color-navy);
}
.auth-tabs button.is-active {
  background: var(--color-navy);
  color: #fff;
}

/* 필드 간격: 27px */
.auth-field { margin-bottom: 27px; }
.auth-field label {
  display: block;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #000;
  margin-bottom: 16px;     /* 피그마: 라벨→인풋 16px */
}
.auth-field label .hint {
  float: right;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  cursor: pointer;
}

/* 인풋: 58px 높이, placeholder 18px/#999 */
.auth-field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 19px 16px;
  line-height: 1;          /* 1+19+18+19+1 = 58px (border 포함) */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 18px;
  letter-spacing: -0.02em;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.auth-field input::placeholder {
  color: #999;
  font-weight: 400;
}
.auth-field input:focus { border-color: var(--color-navy); }

/* 아이콘 인풋: 피그마 기준 아이콘 영역 52px */
.auth-field .input-icon input { padding-left: 52px !important; padding-right: 52px !important; }

.pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

/* 체크박스: 27×27px / 텍스트 15px / #333 */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 25px 0 40px;     /* 피그마: 인풋→체크박스 25px, 체크박스→버튼 40px */
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #333;
  cursor: pointer;
}
.auth-remember input[type="checkbox"] {
  width: 27px;
  height: 27px;
  margin: 0;
  accent-color: var(--color-navy);
  flex-shrink: 0;
  cursor: pointer;
}

/* 로그인 버튼: 70px 높이 / 24px medium */
.auth-submit {
  width: 100%;
  padding: 23px 16px;
  line-height: 1;          /* 23+24+23 = 70px */
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 27px;     /* 피그마: 버튼→divider 27px */
}
.auth-submit:hover { background: var(--color-navy-hover); }

/* divider: 18px / #999 */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #999;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 31px;        /* 피그마: divider→회원가입 31px */
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* 회원가입 버튼: 70px 높이 / 24px medium / #333 */
.auth-secondary {
  display: block;
  width: 100%;
  padding: 23px 16px;
  line-height: 1;
  background: #cfd4dc;
  color: #333;
  border-radius: var(--radius-md);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}
.auth-secondary:hover { background: #bfc5ce; }

/* 회원가입 폼용 */
.auth-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.auth-row input { flex: 1; }
.auth-row button {
  padding: 0 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.hidden { display: none !important; }

/* 비밀번호 찾기 등 안내 텍스트 / 하단 링크 */
.auth-desc {
  font-size: 16px;
  color: var(--color-text-mute);
  line-height: 1.7;
  margin-bottom: 32px;
  text-align: center;
}
.auth-links {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
}
.auth-links a { color: var(--color-navy); }

/* [아이케이텍] 회원가입 추가 요소 */
.auth-wrap .req{ color:var(--color-red); }
.auth-msg{ display:block; font-size:12px; margin-top:6px; color:var(--color-text-mute); }
.auth-msg.err{ color:var(--color-red); }
.auth-msg.ok{ color:#1b7a34; }

/* 이메일 도메인 셀렉트 */
.email-split-row { flex-wrap: wrap; }
.email-split-row input[id$="_local"] { flex: 1 1 100px; min-width: 80px; }
.email-split-row input[id$="_domain"] { flex: 1 1 120px; min-width: 100px; }
.email-at { display: flex; align-items: center; padding: 0 4px; font-size: 16px; color: var(--color-text-mute); flex-shrink: 0; }
.email-split-row select {
  flex: 1 1 130px;
  height: 58px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 10px;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .auth-wrap { margin: 40px auto; }
  .auth-title { font-size: 32px; margin-bottom: 36px; }
  .auth-tabs { gap: 16px; margin-bottom: 36px; }
  .email-split-row input[id$="_local"],
  .email-split-row input[id$="_domain"],
  .email-split-row select,
  .email-split-row button { flex-basis: 100%; min-width: 0; }
  .email-at { display: none; }
  .auth-row button { white-space: nowrap; min-width: 80px; padding-top: 14px; padding-bottom: 14px; }
}

/* [아이케이텍] 회원가입 약관 (원페이지) */
.auth-terms__box{
  width:100%; min-height:130px; max-height:180px; overflow-y:auto;
  border:1px solid var(--color-border); border-radius:8px; padding:12px 14px;
  font-size:13px; line-height:1.6; color:var(--color-text-mute); background:var(--color-bg-soft);
  resize:vertical; white-space:pre-wrap;
}
.auth-agree{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--color-text); }
.auth-agree input{ width:16px; height:16px; }
