/* 회원가입/로그인/이메일 인증 화면 공용 스타일.
   legal.css(헤더/푸터 크롬)와 함께 쓰고, 카드 폼 부분은 index.html의
   모달 스타일(#ez-modal-css)과 같은 색/치수 값을 공유한다. */

/* display:flex 등을 지정한 클래스(.auth-consent 등)에 hidden 속성만
   주면, 클래스 선택자의 display 값이 브라우저 기본 [hidden] 규칙보다
   우선 적용돼 실제로는 안 숨겨진다 - 그래서 !important로 항상 이긴다. */
[hidden] { display: none !important; }

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 65px - 78px); /* legal-header + legal-footer 대략 높이 제외 */
  padding: 56px 24px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 34px 30px 30px;
  border-radius: 18px;
  background: #0D1424;
  border: 1px solid rgba(120, 150, 220, .2);
  box-shadow: 0 40px 90px -30px rgba(4, 8, 18, .9);
}

.auth-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: #5E6D89;
}
.auth-title {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #F4F7FC;
}
.auth-desc {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #93A3C2;
}

.auth-field { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.auth-field label { font-size: 13px; font-weight: 600; color: #B7C6E4; }
.auth-req { color: #E14C5C; }
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(20, 31, 54, .72);
  border: 1px solid rgba(120, 150, 220, .24);
  color: #EAF1FF;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.auth-field input::placeholder { color: #5E6D89; }
.auth-field input:focus { border-color: rgba(59, 130, 246, .65); background: rgba(24, 40, 74, .8); }
.auth-field-hint { font-size: 12px; color: #5E6D89; }

.auth-consent {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #93A3C2;
  cursor: pointer;
}
.auth-consent input { margin-top: 3px; flex: 0 0 auto; width: 15px; height: 15px; accent-color: #3B82F6; }
.auth-consent-link { margin-left: 4px; font-size: 12px; font-weight: 600; color: #7FA6EE; text-decoration: underline; text-underline-offset: 2px; }
.auth-consent-link:hover { color: #9EC0FA; }

.auth-submit {
  margin-top: 24px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 11px;
  border: none;
  background: #3B82F6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(59, 130, 246, .75);
  transition: background-color .15s ease;
}
.auth-submit:hover { background: #2E74E8; color: #fff; }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.auth-submit:disabled:hover { background: #3B82F6; }

.auth-submit-secondary {
  margin-top: 12px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 11px;
  border: 1px solid rgba(120, 150, 220, .28);
  background: transparent;
  color: #C9D6EE;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.auth-submit-secondary:hover { border-color: rgba(59, 130, 246, .6); color: #EAF1FF; }
.auth-submit-secondary:disabled { opacity: .55; cursor: not-allowed; }

.auth-error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(225, 76, 92, .1);
  border: 1px solid rgba(225, 76, 92, .35);
  color: #E9959E;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
}
.auth-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .24);
  color: #B7C6E4;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
}

.auth-footer-links {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(120, 150, 220, .14);
  text-align: center;
  font-size: 13px;
  color: #8494B2;
}
.auth-footer-links a { font-weight: 700; }

.auth-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 24px;
}
.auth-icon-wrap.is-success { background: rgba(59, 130, 246, .12); }
.auth-icon-wrap.is-error { background: rgba(225, 76, 92, .12); }
.auth-state-center { text-align: center; }