/* =================================================================
   Donate Page CSS - 후원 페이지 전용 스타일
   ================================================================= */

/* 후원 페이지 컨테이너 */
.donate-container {
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: var(--space-32) var(--space-5) var(--space-12);
  text-align: center;
}

/* =================================================================
   히어로 섹션
   ================================================================= */

.donate-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.donate-hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =================================================================
   후원 카드 그리드
   ================================================================= */

.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-20);
}

.support-card {
  background: var(--color-white);
  border: 0.1875rem solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--height-news-card);
}

.support-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  transform: translateY(-0.125rem);
}

.support-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
}

.support-card-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0;
}

.support-card-icon {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
}

.support-card-content {
  flex: 1;
  list-style: disc;
  padding-left: var(--space-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-snug);
  text-align: left;
}

.benefit-list, .usage-list {
  list-style: disc;
  padding-left: var(--space-10);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
}

/* =================================================================
   문의 섹션
   ================================================================= */

.contact-section {
  background: var(--color-primary-bg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-20);
}

.contact-info {
  font-size: var(--text-3xl);
  font-weight: var(--font-regular);
  letter-spacing: -0.02em;
  margin: 0;
}



/* =================================================================
   후원신청 폼 스타일
   ================================================================= */

/* NOTE: privacy-section 스타일은 components.css에서 로드됩니다 */

/* =================================================================
   신청자 정보 폼
   ================================================================= */

.form-section {
  margin-bottom: var(--space-20);
}

/* =================================================================
   후원자 목록 세션
   ================================================================= */




/* NOTE: form-table, form-input, 입력 컨테이너 등은 components.css에서 로드됩니다 */

/* =================================================================
   반응형 디자인
   ================================================================= */

@media (max-width: 768px) {
  /* 폼 테이블 */
  .form-input, .form-input-full, .form-textarea {
    width: 100%;
    max-width: 20rem;
  }
  
  .phone-container, .email-container, .address-container, .birthday-container {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .birthday-input {
    width: 4rem !important;
  }
  
  .email-select, .phone-select {
    width: 8rem;
  }

  /* 페이지 레이아웃 */
  .donate-container {
    padding: var(--space-16) var(--space-3) var(--space-12);
  }

  .support-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .support-card {
    min-height: auto;
    padding: var(--space-5);
  }

  .support-card-icon {
    width: 5rem;
    height: 5rem;
  }

  .benefit-list li, .usage-list li {
    font-size: var(--text-base);
  }

  .contact-info {
    font-size: var(--text-lg);
  }

  .cta-button {
    padding: var(--space-3) var(--space-6);
    min-width: 10rem;
    min-height: 3rem;
  }

}

@media (max-width: 480px) {
  .support-card-content {
    font-size: var(--text-sm);
    padding-left: var(--space-4);
  }

}