/* auth-email.css — 이메일 계정 가입·로그인 UI (BTK-FE-AUTH-002 §4)
 *
 *  ⛔ 새 디자인 언어를 만들지 않는다. login.css 의 값을 그대로 따른다:
 *     흰 카드 · 반경 12px · 보라 #a259ff / #6a00f4 · 본문 #18162c · 보조 #6b6b7b · 테두리 #e3e3e3
 *  ⚠️ login.css 를 고치지 않는다 — 이 파일만 덧붙인다(기존 OAuth 화면 무영향).
 */

/* ⛔ 이 한 줄이 없으면 폼이 좁아진다.
   .modal 은 `align-items: center` 인 세로 flex 라 자식이 **내용 너비로 줄어든다.**
   .ae-step 에만 width:100% 를 줘도 소용없다 — 부모(#aeRoot)가 이미 좁기 때문이다.
   (2026-10-10 실측: #aeRoot 231px vs .modal-social-row 400px → 입력칸만 짧아 보였다) */
#aeRoot { width: 100%; }

/* ── 단계 전환 ─────────────────────────────────────────────────────────── */
/*  한 화면에 하나만 묻는다. 보이지 않는 단계는 DOM 에 두되 감춘다
    (뒤로가기로 값이 살아 있어야 하고, 매번 다시 그리면 포커스가 튄다). */
.ae-step { display: none; width: 100%; }
.ae-step.is-on { display: block; animation: aeFade .18s ease both; }
@keyframes aeFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── 구분선 "또는" ─────────────────────────────────────────────────────── */
.ae-or {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  color: #a7a7b4; font-size: 0.92rem; font-weight: 500;
}
.ae-or::before, .ae-or::after {
  content: ''; flex: 1; height: 1px; background: #ececf2;
}

/* ── 입력 ──────────────────────────────────────────────────────────────── */
.ae-field { width: 100%; margin-bottom: 12px; text-align: left; }
.ae-label {
  display: block; font-size: 0.86rem; font-weight: 600;
  color: #4a4a5a; margin-bottom: 6px;
}
.ae-input {
  width: 100%; box-sizing: border-box;
  padding: 0.86em 0.95em;
  font-size: 1.02rem; font-family: inherit; color: #18162c;
  background: #fff;
  border: 1px solid #e3e3e3; border-radius: 12px;
  transition: border-color .16s, box-shadow .16s;
}
.ae-input::placeholder { color: #b4b4c0; }
.ae-input:focus {
  outline: none;
  border-color: #a259ff;
  box-shadow: 0 0 0 3px rgba(162, 89, 255, 0.14);
}
.ae-input:disabled { background: #f7f7fa; color: #9a9aa8; }
.ae-input.is-error { border-color: #e5484d; }
.ae-input.is-error:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.14); }

/* 비밀번호 표시 토글 */
.ae-pw-wrap { position: relative; }
.ae-pw-wrap .ae-input { padding-right: 2.9em; }
.ae-pw-toggle {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  color: #9a9aa8; cursor: pointer; font-size: 0.95rem;
}
.ae-pw-toggle:hover { color: #6a00f4; background: #f6f2ff; }

/* ── 1차 버튼 ──────────────────────────────────────────────────────────── */
/*  🎨 1차 버튼 색 — **딥 인디고 #312e81** (오너 확정 2026-10-10, 후보 6종 실물 비교 후)
    ⛔ 되돌리지 말 것 — 이미 **세 번** 반려된 방향이 있다(전부 실물로 보고 판단한 결과다):
       · 보라 그라데이션(#a259ff→#6a00f4) → 페이지 배경과 **같은 색이라 묻혀서** 탁해 보인다
       · 잉크/검정(#18162c)              → 전체 느낌이 어색하다
       · 에메랄드(#0d9488)                → 인디고보다 못하다
    ✅ 인디고를 고른 이유: 보라와 같은 한색 계열이라 배경과 싸우지 않으면서,
       충분히 어둡고 푸른 쪽이라 흰 카드 위에서 또렷하게 분리된다.
       브랜드 보라는 "비밀번호를 잊으셨나요?" 보조 링크가 계속 들고 있다. */
.ae-btn {
  width: 100%;
  /* 📐 버튼 위 여백 — 근접성으로 "입력 그룹"과 "실행"을 가른다(오너 지적 2026-10-10).
     ⚠️ 24px 로는 부족했다. 입력칸 사이가 margin 12px + **라벨(높이+여백 ~23px)** 이라
        실측 35px 이고, 24px 를 주면 36px 가 되어 **차이가 보이지 않는다**(2026-10-10 실측).
        라벨이 없는 버튼 위에는 그만큼 더 줘야 같은 간격으로 읽히지 않는다.
     → 44px (총 56px) = 입력칸 사이(35px)의 1.6배. */
  margin-top: 44px;
  padding: 0.92em 0;
  font-size: 1.06rem; font-weight: 700; font-family: inherit;
  letter-spacing: -0.01em;
  color: #fff; background: #312e81;
  border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(49, 46, 129, 0.3);
  transition: background .16s, box-shadow .16s, opacity .16s, transform .12s;
}
.ae-btn:hover:not(:disabled) {
  background: #3b37a0;
  box-shadow: 0 6px 20px rgba(49, 46, 129, 0.4);
  transform: translateY(-1px);
}
.ae-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 9px rgba(49,46,129,.3); }
.ae-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ae-btn.is-busy { position: relative; color: transparent; }
.ae-btn.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: aeSpin .7s linear infinite;
}
@keyframes aeSpin { to { transform: rotate(360deg); } }

/* 보조(텍스트) 버튼 */
.ae-link-btn {
  background: none; border: 0; padding: 4px 2px;
  font: inherit; font-size: 0.95rem; color: #6a00f4; font-weight: 600;
  cursor: pointer; border-radius: 6px;
}
.ae-link-btn:hover:not(:disabled) { text-decoration: underline; }
.ae-link-btn:disabled { color: #b4b4c0; cursor: default; text-decoration: none; }

/* ── 오류 · 안내 ───────────────────────────────────────────────────────── */
/*  ⛔ alert() 를 쓰지 않는다(오너 지시 2026-09-06). 필드 아래 인라인으로 보여준다. */
.ae-msg {
  width: 100%; margin: 2px 0 10px;
  font-size: 0.89rem; line-height: 1.55; text-align: left;
  display: none;
}
.ae-msg.is-on { display: block; }
.ae-msg.is-error { color: #c62a2f; }
.ae-msg.is-info { color: #5a5a6b; }
.ae-msg.is-ok { color: #0a7d4a; }

/* ── 비밀번호 규칙 체크리스트 ──────────────────────────────────────────── */
.ae-rules {
  width: 100%; margin: 2px 0 12px; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px;
  text-align: left;
}
.ae-rules li {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: #9a9aa8; transition: color .16s;
}
.ae-rules li::before {
  content: '○'; font-size: 0.78rem; line-height: 1; color: #c9c9d4;
}
.ae-rules li.is-ok { color: #0a7d4a; }
.ae-rules li.is-ok::before { content: '●'; color: #10b36a; }
@media (max-width: 420px) { .ae-rules { grid-template-columns: 1fr; } }

/* ── 인증 코드 입력 ────────────────────────────────────────────────────── */
/*  ⚠️ 칸 6개로 쪼개지 않는다 — 붙여넣기·자동완성(one-time-code)·스크린리더에서
       문제가 잦다. 단일 input 에 자간을 넓혀 "코드 칸"처럼 보이게 한다. */
.ae-code {
  width: 100%; box-sizing: border-box;
  padding: 0.7em 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.85rem; font-weight: 700; letter-spacing: 0.42em;
  text-indent: 0.42em;           /* 자간 때문에 생기는 오른쪽 치우침 보정 */
  color: #18162c;
  background: #faf9ff;
  border: 1px solid #e6e0fb; border-radius: 14px;
}
.ae-code::placeholder { letter-spacing: 0.3em; font-size: 1.2rem; color: #c3bbe0; font-weight: 500; }
.ae-code:focus { outline: none; border-color: #a259ff; box-shadow: 0 0 0 3px rgba(162,89,255,.14); background: #fff; }
.ae-code.is-error { border-color: #e5484d; }

.ae-sent-to {
  width: 100%; margin: -6px 0 14px;
  font-size: 0.95rem; color: #6b6b7b; text-align: center; line-height: 1.6;
}
.ae-sent-to b { color: #18162c; font-weight: 700; word-break: break-all; }

.ae-resend-row {
  width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.92rem; color: #8a8a99;
}

/* ── 뒤로 ──────────────────────────────────────────────────────────────── */
.ae-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 6px 10px 6px 6px;
  background: none; border: 0; border-radius: 9px;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: #6b6b7b;
  cursor: pointer;
}
.ae-back:hover { background: #f4f4f8; color: #18162c; }

/* ── 약관 동의 ─────────────────────────────────────────────────────────── */
.ae-agree {
  width: 100%; margin: 4px 0 14px;
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.86rem; color: #6b6b7b; line-height: 1.6; text-align: left;
}
.ae-agree input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: #6a00f4; flex: 0 0 auto; }
.ae-agree a { color: #6a00f4; text-decoration: underline; text-underline-offset: 2px; }

/* ── 모달 안에서의 여백 보정 ───────────────────────────────────────────── */
/*  .modal 이 align-items:center 라 내부 폼이 가운데 정렬된다. 폼은 좌측 정렬이 맞다. */
.modal .ae-step { text-align: center; }
.modal .ae-form { width: 100%; }

@media (max-width: 900px) {
  .ae-code { font-size: 1.5rem; letter-spacing: 0.3em; text-indent: 0.3em; }
}