/* ============================================================
 * NB_3300 — 상품(공모) 상세
 * ============================================================ */

.detail-content {
  background: var(--color-bg);
  padding-bottom: calc(var(--size-actionbar) + var(--safe-bottom)); /* action-bar 높이 보정 */
}

/* 히어로 이미지 캐러셀 */
.detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  overflow: hidden;
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__track {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* 드래그 축 제한 (TASK-102 ①) — 터치는 가로 팬만, 좌우 오버스크롤 바깥 전파 금지 */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.detail-hero__track::-webkit-scrollbar { display: none; }
.detail-hero__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}
/* 네이티브 이미지 드래그·선택 차단 — 고스트 이미지가 상하·영역 밖으로 끌려나가는 QA 증상의 주원인 (TASK-102 ①) */
.detail-hero__slide img {
  -webkit-user-drag: none;
  user-select: none;
}
.detail-hero__btn {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-scrim);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
}
.detail-hero__btn--back { position: absolute; top: var(--space-2); left: var(--space-2); }
.detail-hero__actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-2);
}
.detail-hero__dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.detail-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-scrim-muted);
}
.detail-hero__dot--active { width: 18px; background: var(--color-bg-scrim); }

/* 섹션 공통 */
.detail-section { padding: var(--space-5) var(--space-page); }
.detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.detail-section__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
}
.detail-section > .detail-section__title { margin-bottom: var(--space-3); }
.detail-text { font-size: var(--font-size-base); color: var(--color-fg-muted); line-height: var(--line-height-normal); }

/* 상품 헤더 */
/* TASK-079 ②: 상세는 태그 전면 나열 — nowrap이면 태그 3개부터 마감 뱃지가 셸 밖으로 밀려 잘린다(390px 실측) */
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-bottom: var(--space-2-5); }
.detail-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);
}
.detail-desc { font-size: var(--font-size-base); color: var(--color-fg-muted); line-height: var(--line-height-normal); margin-bottom: var(--space-4); }
.detail-price-row { display: flex; align-items: baseline; gap: var(--space-2); }
.detail-price__original { font-size: var(--font-size-sm); color: var(--color-fg-faint); text-decoration: line-through; line-height: var(--line-height-snug); }
.detail-price__discount { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-fg-brand-strong); line-height: var(--line-height-normal); }
.detail-price__sale { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-fg); letter-spacing: -0.2px; line-height: 1.35; }

/* 공모 진행 현황 */
.progress-bar--thick { height: 10px; }
.detail-stats { display: flex; padding-top: var(--space-3-5); }
.detail-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-0-5); }
.detail-stat__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-tight); }
.detail-stat__value--brand { color: var(--color-fg-brand-strong); }
.detail-stat__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-fg-subtle); line-height: var(--line-height-tight); }
/* 상세 리워드 티저 (TASK-061 #7-1): 중복 '잔여 N개' 자리에 '지금 참여 시 리워드' 배너 */
.detail-reward-teaser {
  margin-top: var(--space-4);
  padding: var(--space-2-5) var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
  background: var(--color-bg-brand);
  border-radius: var(--radius-md);
}
.detail-reward-teaser strong { color: var(--color-fg-brand-strong); font-weight: var(--font-weight-semibold); }
.detail-reward-teaser__muted { color: var(--color-fg-subtle); }

/* 농부 프로필 카드 */
.farmer-card { display: flex; align-items: center; gap: var(--space-3); }
.farmer-card__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.farmer-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.farmer-card__name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-normal); }
.farmer-card__region {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
}

/* Campaign index — D-026 mobile two-column product grid */
.campaign-index { padding-bottom: var(--size-bottomnav); }
/* 헤더는 대형 배너 표준(shared/_page_header, home.css .page-header)으로 통합 — TASK-092.
   구 .campaign-index__header(sticky·eyebrow·2xl 타이틀)가 표준의 원형이었고, eyebrow는
   "문구 없음 — 탭 이름만" 방침으로 폐기 (T92-D01). */
.campaign-index__content {
  /* 헤더-본문 간격 = 래퍼 padding-top 단일 소유 (TASK-099 — 구 0px) */
  padding: var(--space-content-top) var(--space-page) var(--space-6);
  /* sticky 헤더 아래로 스크롤되는 본문의 자기 배경 명시 — 전역 캔버스에 기대지 않는다 (TASK-092) */
  background: var(--color-bg);
}
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-3);
}
.product-card--compact { min-width: 0; }
.product-card--compact .product-card__image-wrap { height: auto; aspect-ratio: 1 / 1; }
.product-card--compact .product-card__badges {
  top: var(--space-2);
  right: var(--space-2);
  left: var(--space-2);
  gap: var(--space-1);
}
.product-card--compact .product-card__heart { right: var(--space-0-5); bottom: var(--space-0-5); }
.product-card--compact .product-card__info { padding-top: var(--space-2); }
.product-card--compact .product-card__farm,
.product-card--compact .product-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card--compact .product-card__price-row { flex-wrap: wrap; gap: var(--space-1); }
.product-card--compact .product-card__price-sale { font-size: var(--font-size-base); }
.campaign-empty {
  /* 상단 간격은 래퍼(.campaign-index__content) 소유 — 자체 top 제거, 하단만 유지 (TASK-099) */
  padding: 0 var(--space-4) var(--space-8);
  text-align: center;
  color: var(--color-fg-subtle);
}
.campaign-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-brand);
}
.campaign-empty h2 { margin: 0 0 var(--space-2); color: var(--color-fg); font-size: var(--font-size-lg); }
.campaign-empty p { margin: 0; font-size: var(--font-size-sm); }
/* 하단 액션 바 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--layout-mobile-width));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-page) calc(var(--space-3) + var(--safe-bottom));
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
}
.action-bar__heart {
  /* 터치 타깃 44px (TASK-086 H3) — 구 24px(SVG 크기 그대로). 아이콘은 중앙 고정 */
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
}
.action-bar__btn {
  flex: 1;
  min-width: 0;
  height: 52px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}
.action-bar__btn--outline {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-fg);
}
.action-bar__btn--primary {
  background: var(--color-bg-brand-solid);
  border: none;
  color: var(--color-fg-on-brand);
}

/* 찜 토글 (TASK-029 ⑧) — button_to 폼 래퍼가 flex 배치에 끼어들지 않게 자식만 배치 참여 */
.save-toggle {
  display: contents;
}

/* 찜 활성색 통일 (TASK-044 ③) — 찜된(saved) 하트는 전 페이지 빨강.
   SVG fill=currentColor라 color만 지정하면 채워진 하트가 빨강이 된다. 미찜 상태의
   외곽선 색(카드=흰색·detail-hero=본문색·action-bar=본문색)은 대비 위해 각 규칙 유지.
   찜 목록(wishlist-card__heart)은 이미 빨강 — 규칙 불필요.
   home.css(.product-card__heart) 보다 뒤에 로드되고 specificity(0,2,0)로 이겨 전역 적용. */
.product-card__heart.is-saved,
.detail-hero__btn.is-saved,
.action-bar__heart.is-saved {
  color: var(--color-red-500);
}

/* ============================================================
 * 수량 시트(overlays.css 소유) 재정의 — TASK-058
 * overlays.css가 campaign.css보다 후행 로드라 동일 특정도 규칙은 짐.
 * 소유 밖(overlays.css) 미편집 원칙 하에 상위 셀렉터(.sheet-overlay …, 0,2,0)로
 * overlays .qty-sheet__*(0,1,0)를 로드 순서 무관하게 이겨 재정의한다.
 * ============================================================ */
/* #7-3: 수량 시트 썸네일에 실제 상품 이미지 — thumb는 border-radius만 있고 overflow 미지정이라 img 모서리 clip 위해 overflow 추가 */
.sheet-overlay .qty-sheet__thumb { overflow: hidden; }
.sheet-overlay .qty-sheet__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* #7-4: 구매하기 버튼 서비스 톤(주황). :disabled 불투명도는 overlays 규칙(.qty-sheet__cta:disabled) 유지. */
.sheet-overlay .qty-sheet__cta { background: var(--color-bg-brand-solid); color: var(--color-fg-on-brand); }

/* ============================================================
 * 상품 행 (가로형 리스트 카드) — shared/_product_row + styleguide 공유
 * 원위치 search.css(NB_3200) → 검색 제거로 이전 존치 (TASK-040)
 * ============================================================ */
.result-list { display: flex; flex-direction: column; }
.product-row {
  display: flex;
  gap: var(--space-3-5);
  padding: var(--space-3-5) var(--space-page);
  text-decoration: none;
  color: inherit;
}
.product-row + .product-row { border-top: var(--border-width) solid var(--color-border); }
.product-row__thumb {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  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);
}
.product-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.product-row__farm {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}
.product-row__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
}
/* TASK-079 ②: chip 복수 렌더 — gap 없으면 chip끼리 붙는다 (단일 chip 시절엔 드러나지 않던 누락).
   1줄 고정 방어는 .product-card__tag-row(home.css)와 동일 규칙 — "카드형은 항상 1줄"(DEV-051 §2)이
   두 파셜에 같이 적용돼야 한다. row는 폭이 넓어 잘 안 드러날 뿐, 계약은 동일. */
.product-row__tag-row { display: flex; flex-wrap: nowrap; gap: var(--space-1); padding-top: var(--space-1); overflow: hidden; }
.product-row__tag-row .chip { min-width: 0; overflow: hidden; }
.product-row__meta {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0 var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-tight);
}
.product-row__price-row { display: flex; align-items: baseline; gap: var(--space-1-5); padding-top: var(--space-1-5); }
.product-row__price-original { font-size: var(--font-size-sm); color: var(--color-fg-faint); text-decoration: line-through; line-height: var(--line-height-snug); }
.product-row__price-sale { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-normal); }