/* ==========================================================================
   program-detail-shared.css — guest/agency 프로그램 상세 공용 블록
   guest-program-detail.css·agency-program-detail.css 의 바이트 동일 복제 2블록
   (갤러리 placeholder, Included/Excluded 컬럼)을 중립 .pd-* 클래스로 추출.
   포털별 차이(그리드 컬럼 수·브레이크포인트, 갤러리 img hover/focus)는 각 포털 CSS 유지.
   ========================================================================== */

/* ─────────────── Included / Excluded 컬럼 ─────────────── */
.pd-cols__col {
  background: var(--color-gray-50);
  border-radius: 12px;
  padding: 24px;
}

.pd-cols__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text-primary);
}

/* Included 색상은 emerald-600 (#059669) — DESIGN.md success 토큰(#22C55E)과 톤이 달라 의도적으로 유지. 토큰 도입은 별도 디자인 결정 후 */
.pd-cols__col--included .pd-cols__title { color: #059669; }
.pd-cols__col--excluded .pd-cols__title { color: var(--color-danger-hover); }

.pd-cols__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-cols__list li {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-gray-700);
  padding-left: 22px;
  position: relative;
}

.pd-cols__col--included .pd-cols__list li::before {
  content: "✓";
  color: #059669;
  font-weight: 700;
  position: absolute;
  left: 0;
}

.pd-cols__col--excluded .pd-cols__list li::before {
  content: "×";
  color: var(--color-danger-hover);
  font-weight: 700;
  font-size: 1.1rem;
  position: absolute;
  left: 0;
  top: -2px;
}

/* ─────────────── 갤러리 아이템 + 자산 대기 placeholder ─────────────── */
.pd-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-gray-100);
}

/* 자산 대기용 placeholder — 디자이너 자산 도착 시 img 로 교체 */
.pd-gallery__item--placeholder {
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pd-gallery__item--placeholder::after {
  content: "";
  width: 36px;
  height: 36px;
  background-color: var(--color-gray-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 17l-5-5-4 4-3-3-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 17l-5-5-4 4-3-3-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.55;
}