/**
 * peoplelove.org — 사이트 전체 통합 CSS
 * tokens.css와 components.css 다음에 로드.
 * Bootstrap 5와 디자인 토큰 브릿지.
 */

/* ────────────────────────────────────────────────
 * Body — 디자인 토큰 적용
 * ──────────────────────────────────────────────── */
body {
  font-family: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ppl-text-primary);
  background: var(--ppl-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ppl-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ────────────────────────────────────────────────
 * Top Nav 통합
 * ──────────────────────────────────────────────── */
.ppl-topnav { z-index: 1030; }
.ppl-topnav .nav-link {
  font-size: var(--ppl-text-base);
  font-weight: 500;
  padding: 0.5rem 0;
}
.ppl-topnav .nav-link:hover { color: var(--ppl-brand-primary); }

/* ────────────────────────────────────────────────
 * Section 패턴
 * ──────────────────────────────────────────────── */
.ppl-section {
  padding-top: var(--ppl-space-10);
  padding-bottom: var(--ppl-space-10);
}
.ppl-section--hero { padding: var(--ppl-space-12) 0; background: var(--ppl-brand-soft); }
.ppl-section--mute { background: var(--ppl-bg-section); }
.ppl-section--primary { background: var(--ppl-brand-primary); color: var(--ppl-text-on-primary); }
.ppl-section--trust { background: var(--ppl-brand-trust); color: var(--ppl-text-on-primary); }

/* ────────────────────────────────────────────────
 * Section Header
 * ──────────────────────────────────────────────── */
.ppl-eyebrow {
  display: inline-block;
  font-size: var(--ppl-text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ppl-brand-primary);
  margin-bottom: var(--ppl-space-3);
}
.ppl-section-title {
  font-family: var(--ppl-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ppl-text-primary);
}
.ppl-section-subtitle {
  font-size: var(--ppl-text-lg);
  line-height: var(--ppl-leading-normal);
  color: var(--ppl-text-secondary);
}

/* ────────────────────────────────────────────────
 * Hero (메인)
 * ──────────────────────────────────────────────── */
.ppl-hero__title {
  font-family: var(--ppl-font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ppl-text-primary);
}
.ppl-hero__subtitle {
  font-size: var(--ppl-text-xl);
  line-height: 1.6;
  color: var(--ppl-text-secondary);
}
.ppl-hero__image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--ppl-brand-warm);
  border-radius: var(--ppl-radius-2xl);
  object-fit: cover;
}
.ppl-hero__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ppl-text-on-primary);
  font-size: 4rem;
  opacity: 0.4;
}

/* ────────────────────────────────────────────────
 * 임팩트 수치
 * ──────────────────────────────────────────────── */
.ppl-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--ppl-space-2);
  padding: var(--ppl-space-6);
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-xl);
  height: 100%;
  text-align: left;
}
.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);
  margin-top: var(--ppl-space-1);
}
.ppl-stat-card__label {
  font-size: var(--ppl-text-sm);
  line-height: 1.4;
  color: var(--ppl-text-secondary);
  margin-top: var(--ppl-space-2);
}
.ppl-stat-card__sub {
  font-size: var(--ppl-text-xs);
  color: var(--ppl-text-muted);
}

/* ────────────────────────────────────────────────
 * 사업영역 카드
 * ──────────────────────────────────────────────── */
.ppl-biz-card {
  display: flex;
  flex-direction: column;
  gap: var(--ppl-space-4);
  padding: var(--ppl-space-7);
  background: var(--ppl-bg-card);
  border: 1px solid var(--ppl-border-light);
  border-radius: var(--ppl-radius-xl);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ppl-biz-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ppl-shadow-lg);
}
.ppl-biz-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ppl-radius-lg);
  font-size: 28px;
  color: var(--ppl-text-on-primary);
}
.ppl-biz-card__icon--warm    { background: var(--ppl-brand-warm); }
.ppl-biz-card__icon--primary { background: var(--ppl-brand-primary); }
.ppl-biz-card__icon--fresh   { background: var(--ppl-brand-fresh); }
.ppl-biz-card__icon--trust   { background: var(--ppl-brand-trust); }
.ppl-biz-card__title {
  font-family: var(--ppl-font-heading);
  font-size: var(--ppl-text-2xl);
  font-weight: 600;
  line-height: 1.3;
}
.ppl-biz-card__desc {
  font-size: var(--ppl-text-base);
  line-height: 1.6;
  color: var(--ppl-text-secondary);
  flex-grow: 1;
}
.ppl-biz-card__link {
  font-size: var(--ppl-text-sm);
  font-weight: 600;
  color: var(--ppl-brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ppl-biz-card__link:hover { gap: 8px; transition: gap 0.15s ease; }

/* ────────────────────────────────────────────────
 * 시설 카드 (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;
  height: 100%;
}
.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);
  flex-grow: 1;
}

/* ────────────────────────────────────────────────
 * 모바일 반응
 * ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ppl-section { padding-top: var(--ppl-space-7); padding-bottom: var(--ppl-space-7); }
  .ppl-section--hero { padding: var(--ppl-space-8) 0; }
  .ppl-hero__title { font-size: 2.25rem; }
  .ppl-hero__subtitle { font-size: var(--ppl-text-base); }
  .ppl-stat-card { padding: var(--ppl-space-5); }
  .ppl-stat-card__number { font-size: var(--ppl-text-4xl); }
  .ppl-biz-card { padding: var(--ppl-space-5); }
}

/* ────────────────────────────────────────────────
 * Bootstrap 보강 — Button 토큰 매핑
 * ──────────────────────────────────────────────── */
.btn-primary, .ppl-btn--primary {
  background: var(--ppl-brand-primary);
  border-color: var(--ppl-brand-primary);
}
.btn-primary:hover, .ppl-btn--primary:hover {
  background: #C72E3B;
  border-color: #C72E3B;
}

/* 접근성 — focus visible */
*:focus-visible {
  outline: 3px solid var(--ppl-brand-primary);
  outline-offset: 2px;
}