/**
 * peoplelove.org Component Styles v1
 *
 * Pencil 디자인 시스템에서 추출한 9개 컴포넌트의 CSS 구현.
 * tokens.css를 먼저 로드해야 작동함.
 *
 * 사용법: 클래스 prefix `ppl-` 사용
 *   <button class="ppl-btn ppl-btn--primary">후원하기</button>
 */

/* ════════════════════════════════════════════════
 * Component: Button
 * ════════════════════════════════════════════════ */
.ppl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ppl-space-2);
  padding: var(--ppl-space-3) var(--ppl-space-5);
  border-radius: var(--ppl-radius-md);
  font-family: var(--ppl-font-body);
  font-size: var(--ppl-text-base);
  font-weight: 600;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  min-height: 44px; /* WCAG AA touch target */
}
.ppl-btn:active { transform: translateY(1px); }

.ppl-btn--primary { background: var(--ppl-brand-primary); color: var(--ppl-text-on-primary); }
.ppl-btn--primary:hover { background: #C72E3B; }

.ppl-btn--secondary { background: var(--ppl-brand-trust); color: var(--ppl-text-on-primary); }
.ppl-btn--secondary:hover { background: #1B3540; }

.ppl-btn--outline {
  background: transparent;
  border: 2px solid var(--ppl-brand-trust);
  color: var(--ppl-brand-trust);
}
.ppl-btn--outline:hover { background: var(--ppl-brand-trust); color: var(--ppl-text-on-primary); }

.ppl-btn--ghost { background: transparent; color: var(--ppl-brand-primary); }
.ppl-btn--ghost:hover { background: var(--ppl-brand-soft); }

/* ════════════════════════════════════════════════
 * Component: Badge
 * ════════════════════════════════════════════════ */
.ppl-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ppl-space-2) var(--ppl-space-4);
  border-radius: var(--ppl-radius-full);
  font-family: var(--ppl-font-body);
  font-size: var(--ppl-text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ppl-text-on-primary);
}
.ppl-badge--primary { background: var(--ppl-brand-primary); }
.ppl-badge--warm    { background: var(--ppl-brand-warm); }
.ppl-badge--fresh   { background: var(--ppl-brand-fresh); }
.ppl-badge--trust   { background: var(--ppl-brand-trust); }
.ppl-badge--muted   { background: var(--ppl-text-muted); }

/* ════════════════════════════════════════════════
 * Component: Input
 * ════════════════════════════════════════════════ */
.ppl-input { display: flex; flex-direction: column; gap: var(--ppl-space-2); }
.ppl-input__label {
  font-family: var(--ppl-font-body);
  font-size: var(--ppl-text-sm);
  font-weight: 600;
  color: var(--ppl-text-primary);
}
.ppl-input__field {
  padding: var(--ppl-space-3) var(--ppl-space-4);
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-default);
  border-radius: var(--ppl-radius-md);
  font-family: var(--ppl-font-body);
  font-size: var(--ppl-text-base);
  color: var(--ppl-text-primary);
  min-height: 44px; /* WCAG AA touch */
}
.ppl-input__field:focus {
  outline: none;
  border-color: var(--ppl-brand-primary);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}
.ppl-input__field::placeholder { color: var(--ppl-text-muted); }

/* ════════════════════════════════════════════════
 * Component: StatCard
 * ════════════════════════════════════════════════ */
.ppl-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--ppl-space-3);
  padding: var(--ppl-space-6);
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-xl);
}
.ppl-stat-card__number {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-5xl);
  font-weight: 600;
  line-height: 1;
  color: var(--ppl-brand-primary);
}
.ppl-stat-card__unit {
  font-size: var(--ppl-text-base);
  font-weight: 600;
  color: var(--ppl-text-primary);
}
.ppl-stat-card__label {
  font-size: var(--ppl-text-sm);
  line-height: var(--ppl-leading-snug);
  color: var(--ppl-text-secondary);
}

/* ════════════════════════════════════════════════
 * Component: GalleryCard
 * ════════════════════════════════════════════════ */
.ppl-gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ppl-gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ppl-shadow-md);
}
.ppl-gallery-card__image {
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--ppl-brand-soft);
  object-fit: cover;
}
.ppl-gallery-card__body { padding: var(--ppl-space-5); }
.ppl-gallery-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ppl-space-2);
  margin-bottom: var(--ppl-space-3);
}
.ppl-gallery-card__date { font-size: var(--ppl-text-xs); color: var(--ppl-text-muted); }
.ppl-gallery-card__title {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-lg);
  font-weight: 600;
  line-height: var(--ppl-leading-snug);
  color: var(--ppl-text-primary);
}

/* ════════════════════════════════════════════════
 * Component: NewsCard
 * ════════════════════════════════════════════════ */
.ppl-news-card {
  display: flex;
  align-items: center;
  gap: var(--ppl-space-5);
  padding: var(--ppl-space-5);
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-lg);
}
.ppl-news-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ppl-space-1);
  padding: var(--ppl-space-2) var(--ppl-space-3);
  background: var(--ppl-bg-section);
  border-radius: var(--ppl-radius-md);
}
.ppl-news-card__day {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--ppl-brand-primary);
}
.ppl-news-card__month {
  font-size: var(--ppl-text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ppl-text-secondary);
}
.ppl-news-card__title {
  font-size: var(--ppl-text-lg);
  font-weight: 600;
  line-height: var(--ppl-leading-snug);
  color: var(--ppl-text-primary);
}

/* ════════════════════════════════════════════════
 * Component: FacilityCard
 * ════════════════════════════════════════════════ */
.ppl-facility-card {
  display: flex;
  flex-direction: column;
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-xl);
  overflow: hidden;
}
.ppl-facility-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ppl-brand-warm);
}
.ppl-facility-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ppl-space-4);
  padding: var(--ppl-space-6);
}
.ppl-facility-card__title {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-2xl);
  font-weight: 600;
  line-height: var(--ppl-leading-snug);
}
.ppl-facility-card__desc {
  font-size: var(--ppl-text-base);
  line-height: var(--ppl-leading-normal);
  color: var(--ppl-text-secondary);
}
.ppl-facility-card__location {
  font-size: var(--ppl-text-sm);
  color: var(--ppl-text-muted);
}

/* ════════════════════════════════════════════════
 * Component: SectionHeader
 * ════════════════════════════════════════════════ */
.ppl-section-header { display: flex; flex-direction: column; gap: var(--ppl-space-3); }
.ppl-section-header__eyebrow {
  font-size: var(--ppl-text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ppl-brand-primary);
}
.ppl-section-header__title {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-4xl);
  font-weight: 600;
  line-height: var(--ppl-leading-snug);
}
.ppl-section-header__subtitle {
  font-size: var(--ppl-text-lg);
  line-height: var(--ppl-leading-normal);
  color: var(--ppl-text-secondary);
}

/* ════════════════════════════════════════════════
 * Component: CTABanner
 * ════════════════════════════════════════════════ */
.ppl-cta-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ppl-space-6);
  padding: var(--ppl-space-12);
  background: var(--ppl-brand-trust);
  border-radius: var(--ppl-radius-2xl);
  text-align: center;
}
.ppl-cta-banner__eyebrow {
  font-size: var(--ppl-text-sm);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ppl-brand-warm);
}
.ppl-cta-banner__title {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-5xl);
  font-weight: 600;
  line-height: var(--ppl-leading-snug);
  color: var(--ppl-text-on-primary);
  white-space: pre-line;
}
.ppl-cta-banner__subtitle {
  font-size: var(--ppl-text-lg);
  line-height: var(--ppl-leading-normal);
  color: var(--ppl-text-on-primary);
  opacity: 0.9;
}
.ppl-cta-banner__buttons { display: flex; gap: var(--ppl-space-4); align-items: center; }

/* ════════════════════════════════════════════════
 * Component: Footer
 * ════════════════════════════════════════════════ */
.ppl-footer {
  display: flex;
  flex-direction: column;
  gap: var(--ppl-space-8);
  padding: var(--ppl-space-12) var(--ppl-space-12) var(--ppl-space-8);
  background: var(--ppl-brand-trust);
  color: var(--ppl-text-on-primary);
}
.ppl-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--ppl-space-10);
}
.ppl-footer__org {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-2xl);
  font-weight: 600;
}
.ppl-footer__tagline {
  font-size: var(--ppl-text-sm);
  line-height: var(--ppl-leading-relaxed);
  opacity: 0.7;
  white-space: pre-line;
}
.ppl-footer__col-heading {
  font-size: var(--ppl-text-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ppl-brand-warm);
  margin-bottom: var(--ppl-space-3);
}
.ppl-footer__link {
  display: block;
  font-size: var(--ppl-text-sm);
  line-height: 1.7;
  color: var(--ppl-text-on-primary);
  opacity: 0.85;
}
.ppl-footer__link:hover { opacity: 1; text-decoration: underline; }
.ppl-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--ppl-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--ppl-text-xs);
}

/* Mobile Footer Adjustments */
@media (max-width: 768px) {
  .ppl-footer__top {
    grid-template-columns: 1fr;
    gap: var(--ppl-space-7);
  }
  .ppl-footer__bottom {
    flex-direction: column;
    gap: var(--ppl-space-4);
    align-items: start;
  }
}