/* ============================================================
 * NB_3200 — 검색 화면
 * ============================================================ */

/* Search Header (뒤로가기 + 검색 인풋) */
.search-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-2) 0 var(--space-1);
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.search-header__back {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
}
.search-input__icon { flex-shrink: 0; color: var(--color-fg-subtle); }
.search-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
  outline: none;
}
.search-input__field::placeholder { color: var(--color-fg-subtle); }
.search-input__field::-webkit-search-cancel-button { display: none; }
.search-input__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-subtle);
}

/* Tabs (공모 상품 / 농가 / 팜 스토리) */
.search-tabs {
  display: flex;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
.search-tabs__tab {
  flex: 1;
  height: 48px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-normal);
  position: relative;
}
.search-tabs__tab--active { color: var(--color-fg); }
.search-tabs__tab--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-fg);
}

/* Content */
.search-content { background: var(--color-bg); padding-bottom: calc(var(--size-bottomnav) + var(--safe-bottom)); }

/* 결과 헤더 */
.result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3-5) var(--space-page) var(--space-2);
}
.result-meta__text { font-size: var(--font-size-sm); color: var(--color-fg-subtle); line-height: var(--line-height-snug); }
.result-meta__count { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-fg-brand); }
.result-meta__filter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 30px;
  padding: 0 var(--space-2-5);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
}

/* 정렬 칩 */
.sort-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-page) var(--space-2-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sort-row::-webkit-scrollbar { display: none; }
.sort-chip {
  flex-shrink: 0;
  height: 30px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
  white-space: nowrap;
}
.sort-chip--active { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse); }

/* 결과 리스트 (가로형 카드) */
.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: 3px;
  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);
}
.product-row__tag-row { display: flex; padding-top: var(--space-1); }
.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); }

/* 검색어 섹션 공통 헤더 */
.keyword-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-page) var(--space-3);
}
.keyword-section__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-normal); }
.keyword-section__action {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
}

/* 최근 검색어 칩 */
.keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-page) var(--space-1);
}
.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-2-5) 0 var(--space-3-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
}
.keyword-chip__remove {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--color-fg-subtle);
}

/* 인기 검색어 순위 */
.rank-list { display: flex; flex-direction: column; }
.rank-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-page);
}
.rank-item__rank {
  width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-brand);
  line-height: var(--line-height-normal);
}
.rank-item__term { flex: 1; min-width: 0; font-size: var(--font-size-base); color: var(--color-fg); line-height: var(--line-height-normal); }
.rank-item__trend {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-tight);
}
.rank-item__trend--up   { color: var(--color-fg-critical); }
.rank-item__trend--down { color: var(--color-fg-info); }

/* 추천 농가 */
.reco-farm-row {
  display: flex;
  gap: var(--space-2-5);
  padding: 0 var(--space-page) var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reco-farm-row::-webkit-scrollbar { display: none; }
.reco-farm { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.reco-farm__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.reco-farm__name  { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-fg); line-height: var(--line-height-tight); }
.reco-farm__count { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-fg-subtle); line-height: var(--line-height-tight); }