/*
 * 찜 목록 (TASK-029 ⑧ — my/saved_campaigns#index)
 * 시각 정합 참고 = Figma 183:2171 (NB_3400_wishlist).
 * 스코프: 이 파일의 클래스는 app-shell.wishlist 하위에서만 쓰인다 — 공용 CSS(home/campaign.css 등) 무변경.
 */

.app-shell.wishlist {
  background: var(--color-bg);
  padding-bottom: var(--size-bottomnav);
}

/* ── 헤더는 대형 배너 표준(shared/_page_header — home.css .page-header)으로 통합 — TASK-092.
   타이틀 = 탭 이름 "찜"·뒤로가기는 진입 경로별(탭 직진입 없음, 마이 경유 ?from=my 있음 —
   TASK-121, DEV-062 §3 예외), 찜 개수는 .page-header__meta로 넘긴다. ── */

.wishlist-content {
  /* 헤더-본문 간격 = 래퍼 padding-top 단일 소유 (TASK-099 — 구 space-2 8px) */
  padding: var(--space-content-top) var(--space-page) var(--space-6);
  /* sticky 헤더 아래로 스크롤되는 본문의 자기 배경 명시 — 전역 캔버스에 기대지 않는다 (TASK-092) */
  background: var(--color-bg);
}

/* ── 그리드 ── */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* ── 카드 (product-card와 별개 — 마감 뱃지·달성률 칩 조합이 공용 카드와 다름) ── */
.wishlist-card { position: relative; }

.wishlist-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.wishlist-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wishlist-card__image-wrap .badge {
  position: absolute;
  top: var(--space-2-5);
  left: var(--space-2-5);
}
.wishlist-card__heart {
  /* 터치 타깃 44px (TASK-086 H3) — 확대분만큼 inset을 당겨 아이콘(28px) 중심 유지 */
  position: absolute;
  top: var(--space-0-5);
  right: var(--space-0-5);
  z-index: 1;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-red-500);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.wishlist-card__info {
  padding: var(--space-2-5) var(--space-0-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.wishlist-card__farm {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wishlist-card__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wishlist-card__link { color: inherit; text-decoration: none; }
.wishlist-card__link::after { content: ""; position: absolute; inset: 0; }
.wishlist-card__price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-brand-strong);
}

/* ── 빈 상태 ── */
.wishlist-empty {
  /* 상단 간격은 래퍼(.wishlist-content) 소유 — 자체 top 제거, 하단만 유지 (TASK-099) */
  padding: 0 var(--space-4) var(--space-8);
  text-align: center;
  color: var(--color-fg-subtle);
}
.wishlist-empty__icon {
  display: flex;
  width: calc(var(--space-8) * 2);
  height: calc(var(--space-8) * 2);
  margin: 0 auto var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-fg-subtle);
}
.wishlist-empty h2 { margin: 0 0 var(--space-2); color: var(--color-fg); font-size: var(--font-size-lg); }
.wishlist-empty p { margin: 0 0 var(--space-5); font-size: var(--font-size-sm); }
.wishlist-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-control);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}