/* 당근과 찹쌀떡 - 인증 페이지 스타일 */

/* 인증 메인 레이아웃 */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: calc(100vh - 160px); /* 헤더와 푸터 높이 제외 */
}

.auth-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  max-width: 1000px;
  width: 100%;
}

/* 인증 카드 */
.auth-card {
  background: var(--card-bg);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-3xl);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.auth-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: var(--spacing-md);
}

.auth-header p {
  font-size: var(--font-size-lg);
  color: var(--text-light);
}

/* 폼 스타일 */
.auth-form {
  margin-bottom: var(--spacing-2xl);
}

.form-group {
  margin-bottom: var(--spacing-xl);
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  background: var(--card-bg);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input::placeholder {
  color: #adb5bd;
}

.form-help {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-light);
  margin-top: var(--spacing-xs);
}

/* 폼 옵션 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.forgot-password {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* 체크박스와 라디오 버튼 */
.checkbox-label,
.radio-label {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--text-color);
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  padding-left: 28px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* input 숨기기 */
.checkbox-label input,
.radio-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

/* 커스텀 체크박스/라디오 버튼 */
.checkbox-label::before,
.radio-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  background: white;
  transition: var(--transition-base);
}

/* 라디오 버튼은 둥글게 */
.radio-label::before {
  border-radius: 50%;
}

/* 체크박스는 약간 둥글게 */
.checkbox-label::before {
  border-radius: var(--border-radius-sm);
}

/* 체크된 상태 */
.checkbox-label input:checked ~ ::before,
.radio-label input:checked ~ ::before,
.checkbox-label:has(input:checked)::before,
.radio-label:has(input:checked)::before {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* 체크 표시 (✓) */
.checkbox-label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0;
  transition: var(--transition-base);
}

.checkbox-label:has(input:checked)::after {
  opacity: 1;
}

/* 라디오 버튼 내부 점 */
.radio-label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transition: var(--transition-base);
}

.radio-label:has(input:checked)::after {
  opacity: 1;
}

/* hover 효과 */
.checkbox-label:hover::before,
.radio-label:hover::before {
  border-color: var(--primary-color);
}

/* 링크 스타일 */
.checkbox-label a,
.radio-label a {
  color: var(--primary-color);
  text-decoration: none;
}

.checkbox-label a:hover,
.radio-label a:hover {
  text-decoration: underline;
}

.radio-group {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 버튼 스타일 */
.btn-full {
  width: 100%;
  padding: var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* 소셜 로그인 섹션 */
.social-login-section {
  margin-bottom: var(--spacing-xl);
}

/* 네이버 로그인 버튼 */
.btn-naver {
  background: #03C75A;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  transition: var(--transition-base);
}

.btn-naver:hover {
  background: #02b350;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 199, 90, 0.3);
}

.naver-icon {
  width: 20px;
  height: 20px;
}

/* 구분선 */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--spacing-xl) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.divider span {
  padding: 0 var(--spacing-md);
}

/* 소셜 로그인 */
.auth-divider {
  position: relative;
  text-align: center;
  margin: var(--spacing-2xl) 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-color);
}

.auth-divider span {
  background: var(--card-bg);
  padding: 0 var(--spacing-lg);
  color: var(--text-light);
  font-size: var(--font-size-sm);
}

.social-login {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  font-weight: 500;
}

.btn-social:hover {
  background: var(--bg-color);
}

.btn-naver {
  border-color: #03c75a;
  color: #03c75a;
}

.btn-naver:hover {
  background: #03c75a;
  color: white;
}

.btn-kakao {
  border-color: #fee500;
  color: #3c1e1e;
}

.btn-kakao:hover {
  background: #fee500;
  color: #3c1e1e;
}

.btn-google {
  border-color: #ea4335;
  color: #ea4335;
}

.btn-google:hover {
  background: #ea4335;
  color: white;
}

.social-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--font-size-sm);
}

.btn-naver .social-icon {
  background: #03c75a;
  color: white;
}

.btn-kakao .social-icon {
  background: #fee500;
  color: #3c1e1e;
}

.btn-google .social-icon {
  background: #ea4335;
  color: white;
}

/* 인증 푸터 */
.auth-footer {
  text-align: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.auth-footer p {
  color: var(--text-light);
  font-size: var(--font-size-sm);
}

.auth-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.auth-link:hover {
  text-decoration: underline;
}

/* 인증 정보 사이드바 */
.auth-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.auth-info h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-lg);
}

.auth-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-info ul li {
  padding: var(--spacing-sm) 0;
  color: var(--text-color);
  font-size: var(--font-size-sm);
}

.info-card {
  background: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-light);
}

.info-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-md);
}

.info-card p {
  color: var(--text-light);
  line-height: 1.6;
  font-size: var(--font-size-sm);
}

.info-card ul {
  margin-top: var(--spacing-md);
}

.info-card ul li {
  color: var(--text-light);
  padding: var(--spacing-xs) 0;
}

/* 가입 단계 */
.info-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.step-content h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-xs);
}

.step-content p {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: 1.5;
}

/* 간단한 푸터 */
.auth-footer-simple {
  background: var(--text-color);
  color: var(--text-white);
  padding: var(--spacing-xl) 0;
}

.auth-footer-simple .footer-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.auth-footer-simple p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  margin: 0;
}

.footer-links {
  display: flex;
  gap: var(--spacing-lg);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-base);
}

.footer-links a:hover {
  color: var(--text-white);
}

/* 반응형 디자인 */
@media (max-width: 992px) {
  .auth-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    max-width: 500px;
  }
  
  .auth-main {
    padding: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  .auth-main {
    padding: var(--spacing-lg);
  }
  
  .auth-card {
    padding: var(--spacing-2xl);
  }
  
  .auth-header h1 {
    font-size: var(--font-size-2xl);
  }
  
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .radio-group {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .auth-footer-simple .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .auth-main {
    padding: var(--spacing-md);
  }
  
  .auth-card {
    padding: var(--spacing-xl);
  }
  
  .info-steps {
    gap: var(--spacing-md);
  }
  
  .step {
    flex-direction: column;
    text-align: center;
  }
}

/* 회원가입 페이지 전용 스타일 */
.register-hidden-label {
  display: none;
}

/* 페이지별 헤더 색상 */
.login-page .auth-header h1 {
  color: var(--primary-color);
}

.register-page .auth-header h1 {
  color: var(--accent-color);
}