/* =================================================================
   Volunteer Apply Page CSS - 봉사신청 페이지 전용 스타일
   ================================================================= */

/* 봉사신청 페이지 컨테이너 */
.apply-container {
  max-width: var(--size-content-max);
  margin: var(--space-32) auto;
}


/* =================================================================
   NOTE: 공통 컴포넌트는 components.css에서 로드됩니다
   - privacy-section, form-table, form-input 등
   - phone-container, address-container 등
   - btn-search, vms-btn, radio-group 등
   ================================================================= */

/* =================================================================
   선택된 봉사활동/프로그램 정보 표시
   ================================================================= */

/* 봉사명 첫 번째 행 스타일 */
#volunteer-info-row th, #program-info-row th {
  background: var(--color-primary-bg) !important;
}

.volunteer-item {
  border: 0.0625rem solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.volunteer-item:hover {
  background-color: var(--color-primary-bg);
}

.volunteer-item:last-child {
  margin-bottom: 0;
}

.volunteer-item .checkbox-container {
  display: flex;
  align-items: center;
}

.volunteer-item .content {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* 봉사신청 페이지에서만 클릭 가능한 커서 */
#volunteerList .volunteer-item .content {
  cursor: pointer;
}

/* 인원수 입력 컨테이너 */
.participant-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.participant-input {
  width: 5rem;
  text-align: center;
}

.participant-unit {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
}

/* =================================================================
   에러/성공 메시지
   ================================================================= */

.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 0.0625rem solid #f5c6cb;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 0.0625rem solid #c3e6cb;
}

#message {
  height: var(--space-10);
}

/* =================================================================
   CAPTCHA 스타일
   ================================================================= */

.captcha-container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.captcha-display {
  display: inline-block;
  width: 7rem;
  background: var(--color-neutral-300);
  border: 0.125rem solid var(--color-neutral-800);
  text-align: center;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.3em;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-normal);
}

.captcha-display:hover {
  background: var(--color-neutral-350);
}

.captcha-input {
  width: 100%;
  max-width: 10rem;
  text-align: center;
}

.captcha-input.valid {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

.captcha-input.invalid {
  border-color: var(--color-caution);
  background-color: var(--color-caution-light);
}

.captcha-feedback {
  font-size: var(--text-base);
  margin-left: var(--space-2);
}

.captcha-feedback.valid {
  color: var(--color-success);
}

.captcha-feedback.invalid {
  color: var(--color-caution);
}