/* ============================================================
 * 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__btn {
  width: 40px;
  height: 40px;
  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: 5px;
}
.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); }

/* 상품 헤더 */
.detail-badges { display: flex; 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); 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); }
.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); }

/* 정보 행 (상품 정보 / 배송 안내) */
.detail-info-list { display: flex; flex-direction: column; }
.detail-info-row { display: flex; gap: var(--space-3); padding: var(--space-1-5) 0; align-items: flex-start; }
.detail-info-row__icon { flex-shrink: 0; display: flex; color: var(--color-fg-muted); }
.detail-info-row__text { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--color-fg-muted); line-height: var(--line-height-snug); }

/* 농부 프로필 카드 */
.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: 3px;
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
}
.farmer-card__tags { display: flex; gap: var(--space-1-5); }
.farmer-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: 6px;
  background: var(--color-bg-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
  line-height: var(--line-height-tight);
}
.farmer-card__follow {
  flex-shrink: 0;
  height: 32px;
  padding: 0 var(--space-3);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  line-height: var(--line-height-snug);
}

/* 하단 액션 바 */
.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 {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--color-fg);
}
.action-bar__btn {
  flex: 1;
  min-width: 0;
  height: 52px;
  border-radius: 10px;
  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);
}