@charset "utf-8";
/* search.css - 통합검색 결과 (pages/search/index.php)
   카드 자체는 components.css 의 .recommend-card 를 그대로 재사용한다(새 카드 컴포넌트를 만들지 않음).
   이 파일은 검색 폼 / 그룹 헤더 / 카드 그리드 배치만 담당한다.
*/

.search-page {
  padding: var(--space-10) 0 var(--space-20);
}

.search-page__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.search-page__form {
  display: flex;
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

.search-page__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.search-page__input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.search-page__submit {
  flex-shrink: 0;
  height: 52px;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-page__submit:hover {
  background-color: var(--brand-interaction);
}

.search-page__empty {
  padding: var(--space-20) 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.search-page__summary {
  margin-bottom: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.search-page__group {
  margin-bottom: var(--space-12);
}

.search-page__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.search-page__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.search-page__group-count {
  color: var(--brand-secondary);
}

.search-page__group-more {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.search-page__group-more:hover {
  color: var(--brand-secondary);
}

.search-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  list-style: none;
}