/* 검색 결과 0건 — 목업에 화면이 없어 신규 추가 (FP-SR-07 / FP-U-PR.md §3.3, 목업 정리 §9-10)
   퍼블리싱이 내려오면 이 파일을 걷어내고 목업 CSS 로 대체한다. */
.product-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 72px 20px 96px;
  text-align: center;
}

.product-empty > p:first-child {
  color: var(--color-text);
}

.product-empty > ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-gray);
}

.product-empty > ul > li::before {
  content: '· ';
}

.product-empty > .ui-btn {
  margin-top: 8px;
  width: fit-content;
  padding: 0 20px;
}

/* 대안 — 인기 검색어 칩 (FP-CM-05 재사용) */
.product-empty-keywords {
  display: flex;
  flex-direction: column;
  /* 좌측 정렬 — 가운데 정렬은 칩이 줄바꿈될 때 한 개짜리 줄이 가운데 떠서 간격이
     들쭉날쭉해 보인다(특히 인기검색어에 긴 상품명이 섞일 때). 헤딩·칩을 함께 왼쪽에 맞춰
     560px 블록(가운데 배치) 안에서 정돈된 칩 클라우드로 보이게 한다. */
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
  width: 100%;
  max-width: 560px;
  text-align: left;
}

.product-empty-keywords > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.product-empty-keywords > ul > li > a {
  display: inline-flex;
  align-items: center;
  /* 고정 height 는 상품명이 길어 2줄이 되면 텍스트가 테두리를 넘친다.
     min-height 로 1줄은 32px 를 유지하고 2줄이면 늘어나게 하며, 상하 패딩으로 감싼다. */
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  color: var(--color-text);
}

.product-empty-keywords > ul > li > a:hover {
  border-color: var(--color-action-blue, #597FD0);
  color: var(--color-action-blue, #597FD0);
}

@media (max-width: 768px) {
  .product-empty {
    padding: 48px 20px 64px;
  }
}

/*
 * 목록 0건 공통 빈 상태 (`ListEmptyState`) — 2026-08-24 · 2026-08-25 목업 정렬.
 *
 * 기준 목업은 **기획전 0건**이다 — `CH-U-EV-02-01-02.html` 의 `.exhibition_list > li.none`
 * (`page/event.css`): 세로 가운데 정렬 · 아이콘 40×40 · 간격 8px · 회색 16px/150% 문구.
 * 마이페이지 `바우처 사용내역`(`.voucher-history > ul.empty`)도 40×40 아이콘이라 값이 같다.
 *
 * 목업 CSS 는 화면 스코프 안에서만 정의돼 있어 다른 자리에서 쓸 수 없다 —
 * 같은 값을 스코프 없는 클래스로 옮긴다. 목업 원본은 건드리지 않는다.
 *
 * ⚠ 목업의 `min-height: 440px` 는 **화면 전체를 차지하는 목록**의 값이라 옮기지 않는다.
 *   이 클래스는 메인화면 섹션 안(인기상품·추천상품)에 놓이므로 상하 여백만 유지한다.
 */
/*
 * ⚠ `.list-error` 는 <b>같은 계열의 장식</b>이지 같은 상태가 아니다 (2026-08-25).
 *   메인화면 캡처의 `상품을 불러오지 못했습니다.` 는 0건이 아니라 <b>API 오류</b>라
 *   그 자리도 "문구 한 줄" 로 남아 있었다. 생김새(40×40 아이콘·간격·정렬)는 0건과 맞추고
 *   <b>클래스와 role 은 나눈다</b> — 0건은 `role="status"`, 오류는 `role="alert"` 다
 *   (`ProductGrid` 의 두 분기). 같은 클래스를 쓰면 0건을 세는 쪽이 오류를 0건으로 센다.
 */
.list-empty,
.list-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 20px;
  width: 100%;
  text-align: center;
}

/* 조회 결과 0건은 문의 목업의 `sub/inquiry/no_result.svg` 40×40 원본을 공통으로 쓴다. */
.list-empty-icon,
.list-error-icon {
  width: 40px;
  height: 40px;
}

.list-empty-text,
.list-error-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--color-text-gray);
}

/* 상품 그리드 안에 놓일 때 — 그리드 열을 가로질러야 문구가 첫 칸에 몰리지 않는다 */
.product-grid > .list-empty,
.product-grid > .list-error {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .list-empty,
  .list-error {
    padding: 40px 20px;
  }

  /* 목업 모바일 값 — `.exhibition_list li.none p` */
  .list-empty-text,
  .list-error-text {
    font-size: 14px;
    line-height: 20px;
  }
}

/*
 * 검색·필터 0건 화면에도 같은 아이콘을 얹는다 — 문구·대안은 그대로 두고
 * "텍스트만 덩그러니" 만 없앤다(§6.5). 크기는 위 `.list-empty-icon`(목업 원본 40×40)과 맞춘다.
 */
.product-empty > .list-empty-icon {
  width: 40px;
  height: 40px;
}