/* ==========================================================
   login.css — 로그인/회원가입 페이지 전용 스타일
   Precision Cycling Design System 적용
   ========================================================== */

/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg, #F7F7F8);
  color: var(--color-text-primary, #1A1A1F);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;    /* 모바일 더블탭 줌 방지 */
}

/* ===== 상단 오렌지 액센트 라인 ===== */
.top-accent {
  height: 3px;
  background: var(--gradient-accent, linear-gradient(90deg, #D55E00, #E8450A));
  flex-shrink: 0;
}

/* ===== 메인 래퍼 ===== */
.auth-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10, 40px) var(--space-5, 20px);
}

/* ===== 로고 — FitLink 이미지 ===== */
.logo {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: 28px;
}

.logo-img {
  height: 36px;
  width: auto;
  display: inline-block;
}

.logo:hover {
  opacity: 0.85;
}

.logo:hover {
  color: var(--color-primary-hover, #CC3C08);
}

/* ===== 인증 카드 ===== */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface, #FFFFFF);
  border-radius: 0;                              /* 직선 처리 */
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06));
  padding: var(--space-8, 32px);
  position: relative;
  overflow: hidden;
}

/* 카드 상단 오렌지 액센트 라인 */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent, linear-gradient(90deg, #D55E00, #E8450A));
}

/* ===== 탭 네비게이션 ===== */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
}

.auth-tab {
  flex: 1;
  padding: var(--space-3, 12px) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary, #6B6B76);
  text-align: center;
  position: relative;
  transition: color var(--transition-fast, 0.12s ease);
  min-height: var(--touch-min, 44px);          /* 터치 타겟 최소 크기 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-tab:hover {
  color: var(--color-text-primary, #1A1A1F);
}

/* 활성 탭 — 하단 오렌지 바 */
.auth-tab.active {
  color: var(--color-text-primary, #1A1A1F);
}

.auth-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary, #D55E00);
  /* 직선 처리 — border-radius 제거 */
}

/* ===== 폼 영역 ===== */
.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

/* ===== 폼 그룹 ===== */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: var(--space-1, 4px);
  letter-spacing: 0.01em;
}

/* 필수 표시 */
.required {
  color: var(--color-primary, #D55E00);
}

/* ===== 입력 필드 ===== */
.form-group input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary, #1A1A1F);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E2E2E8);
  border-radius: 0;                              /* 직선 처리 */
  outline: none;
  transition: border-color var(--transition-fast, 0.12s ease),
              box-shadow var(--transition-fast, 0.12s ease);
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
}

.form-group input::placeholder {
  color: var(--color-text-tertiary, #9C9CA8);
}

/* 포커스 — 하단 보더 강조 */
.form-group input:focus {
  border-color: var(--color-primary, #D55E00);
  box-shadow: 0 2px 0 0 var(--color-primary, #D55E00); /* 하단 라인 강조 */
}

/* 유효성 검사 상태 */
.form-group input.valid {
  border-color: var(--color-green, #22A352);
}

.form-group input.invalid {
  border-color: var(--color-red, #DC3545);
}

/* ===== 비밀번호 래퍼 (눈 아이콘 포함) ===== */
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 44px;
}

.toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary, #6B6B76);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0;                              /* 직선 처리 */
  transition: color var(--transition-fast, 0.12s ease);
}

.toggle-pw:hover {
  color: var(--color-text-primary, #1A1A1F);
}

/* ===== 비밀번호 강도 표시 ===== */
.password-strength {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-1, 4px);
  opacity: 0;
  transition: opacity var(--transition-normal, 0.2s ease);
}

.password-strength.visible {
  opacity: 1;
}

.strength-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border-light, #EDEDF0);
  border-radius: 0;                              /* 직선 처리 */
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 0;                              /* 직선 처리 */
  transition: width var(--transition-slow, 0.3s ease),
              background var(--transition-slow, 0.3s ease);
}

.strength-text {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* 강도 단계별 색상 */
.password-strength[data-level="weak"] .strength-fill {
  width: 33%;
  background: var(--color-red, #DC3545);
}
.password-strength[data-level="weak"] .strength-text {
  color: var(--color-red, #DC3545);
}

.password-strength[data-level="medium"] .strength-fill {
  width: 66%;
  background: var(--color-yellow, #F59E0B);
}
.password-strength[data-level="medium"] .strength-text {
  color: var(--color-yellow, #F59E0B);
}

.password-strength[data-level="strong"] .strength-fill {
  width: 100%;
  background: var(--color-green, #22A352);
}
.password-strength[data-level="strong"] .strength-text {
  color: var(--color-green, #22A352);
}

/* ===== 필드 에러 메시지 ===== */
.field-error {
  display: block;
  font-size: 12px;
  color: var(--color-red, #DC3545);
  margin-top: var(--space-1, 4px);
  min-height: 16px;
}

/* ===== 폼 옵션 (비밀번호 찾기 링크) ===== */
.form-options {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2, 8px);
  margin-top: -8px;
}

.forgot-link {
  font-size: 13px;
  color: var(--color-text-secondary, #6B6B76);
  transition: color var(--transition-fast, 0.12s ease);
}

.forgot-link:hover {
  color: var(--color-primary, #D55E00);
}

/* ===== 전역 메시지 (에러/성공) ===== */
.auth-message {
  min-height: 0;
  overflow: hidden;
  transition: all var(--transition-normal, 0.2s ease);
}

.auth-message.show {
  padding: 10px 14px;
  border-radius: 0;                              /* 직선 처리 */
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--space-4, 16px);
}

.auth-message.error {
  background: var(--color-red-bg, #FEF2F2);
  color: #DC2626;
  border: 1px solid #FECACA;
  border-left: 3px solid var(--color-red, #DC3545); /* 좌측 액센트 */
}

.auth-message.success {
  background: var(--color-green-bg, #F0FDF4);
  color: #009E73;
  border: 1px solid #BBF7D0;
  border-left: 3px solid var(--color-green, #22A352); /* 좌측 액센트 */
}

/* ===== 프라이머리 버튼 (로그인/회원가입/재설정) ===== */
.btn-primary {
  width: 100%;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--color-primary, #D55E00);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;                              /* 직선 처리 */
  transition: background var(--transition-fast, 0.12s ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  cursor: pointer;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
  letter-spacing: var(--tracking-wide, 0.02em);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover, #CC3C08);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 로딩 스피너 — 원형 유지 */
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== 구분선 ===== */
.divider {
  display: flex;
  align-items: center;
  margin: var(--space-5, 20px) 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light, #EDEDF0);
}

.divider span {
  padding: 0 14px;
  font-size: 12px;
  color: var(--color-text-tertiary, #9C9CA8);
  white-space: nowrap;
}

/* ===== 소셜 로그인 버튼 그룹 ===== */
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 소셜 버튼 공통 */
.btn-social {
  width: 100%;
  padding: 10px var(--space-5, 20px);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;                              /* 직선 처리 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--transition-fast, 0.12s ease);
  cursor: pointer;
  border: 1px solid transparent;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
}

.btn-social:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Google 버튼 */
.btn-google {
  background: var(--color-surface, #FFFFFF);
  color: var(--color-text-primary, #1A1A1F);
  border-color: var(--color-border, #E2E2E8);
}

.btn-google:hover:not(:disabled) {
  background: var(--color-surface-hover, #F5F5F7);
  border-color: var(--color-border-strong, #C8C8D0);
}

/* 카카오 버튼 — 브랜드 가이드: #FEE500 배경, #191919 텍스트 */
.btn-kakao {
  background: #FEE500;
  color: #191919;
  border-color: #FEE500;
}

.btn-kakao:hover:not(:disabled) {
  background: #FADA0A;
  border-color: #FADA0A;
}

.btn-kakao svg {
  flex-shrink: 0;
}

/* 네이버 버튼 — 브랜드 가이드: #03C75A 배경, #FFFFFF 텍스트 */
.btn-naver {
  background: #03C75A;
  color: #FFFFFF;
  border-color: #03C75A;
}

.btn-naver:hover:not(:disabled) {
  background: #02B350;
  border-color: #02B350;
}

/* ===== 비밀번호 찾기 폼 전용 ===== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: 13px;
  color: var(--color-text-secondary, #6B6B76);
  margin-bottom: var(--space-5, 20px);
  transition: color var(--transition-fast, 0.12s ease);
  cursor: pointer;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
}

.back-link:hover {
  color: var(--color-primary, #D55E00);
}

.reset-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin-bottom: var(--space-2, 8px);
}

.reset-desc {
  font-size: 13px;
  color: var(--color-text-secondary, #6B6B76);
  line-height: 1.5;
  margin-bottom: var(--space-6, 24px);
}

/* ===== 하단 저작권 ===== */
.auth-footer {
  margin-top: var(--space-6, 24px);
  font-size: 12px;
  color: var(--color-text-tertiary, #9C9CA8);
  text-align: center;
}

/* ===== 반응형 (768px 이하) ===== */
@media (max-width: 768px) {
  .auth-wrapper {
    padding: var(--space-6, 24px) var(--space-4, 16px);
    justify-content: flex-start;
    padding-top: var(--space-10, 40px);
  }

  .auth-card {
    padding: var(--space-6, 24px) var(--space-5, 20px);
  }

  .logo {
    font-size: 24px;
    margin-bottom: var(--space-5, 20px);
  }
}

/* ===== 모바일 (480px 이하) ===== */
@media (max-width: 480px) {
  .auth-wrapper {
    padding: var(--space-5, 20px) var(--space-3, 12px);
    padding-top: var(--space-8, 32px);
  }

  .auth-card {
    padding: var(--space-5, 20px) var(--space-4, 16px);
    max-width: 100%;
  }

  .form-group input {
    font-size: 16px;              /* iOS 줌 방지 */
  }
}

/* ===== 초소형 화면 (360px 이하) ===== */
@media (max-width: 360px) {
  .auth-card {
    padding: var(--space-5, 20px) var(--space-4, 16px);
  }

  .btn-google span {
    font-size: 13px;
  }
}