/* =============================================================
   programs.css — C2-2 프로그램(패키지) 목록(/programs) 페이지 전용
   공통 컴포넌트(헤더·푸터·페이지 타이틀·FAB)는 customer-common.css 참조.
   시안: Figma TheKKOT-yhlee · node 23:1609(모바일 391)
   ============================================================= */

/* 리스트 (시안 리스트 박스 · pt24 pb30) */
.pg-list {
  padding-top: 24px;
  padding-bottom: 30px;
}

.pg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 모바일 — 카드 사이 1px 구분선 (시안 Line 8) */
.pg-grid > li + li {
  border-top: 1px solid var(--kb-gray-200);
  padding-top: 16px;
}

.pg-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 시안 360×288 — 비율 규격은 미확정(O-52)이라 시안 값을 상수처럼 쓴다 */
.pg-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--kb-gray-100);
}

.pg-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-card-name {
  color: var(--kb-gray-800);
  font-size: 1rem;
  font-weight: 700;
}

.pg-card-tagline {
  color: var(--kb-gray-700);
  font-size: 0.8125rem;
  font-weight: 500;
}

.pg-card-meta {
  color: var(--kb-gray-500);
  font-size: 0.75rem;
  font-weight: 500;
}

.pg-empty {
  color: var(--kb-gray-500);
  font-size: 0.875rem;
  padding: 24px 0;
}

/* ---------------------------------------------------------------
   반응형 — 태블릿 2열 · 데스크탑 3열 (C1·C2 카드 그리드 패턴 · 구분선 없음)
   --------------------------------------------------------------- */
@media (min-width: 560px) {
  .pg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }

  .pg-grid > li + li {
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 1100px) {
  .pg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 24px;
  }

  .pg-list {
    padding-bottom: 60px;
  }
}