@charset "UTF-8";
/* ============================================================
   themes/erp/style/listing.css
   목록 화면 공통 — 도구줄 · 빈 상태
   ------------------------------------------------------------
   상품이 그리드로 나열되는 화면이면 어디든 쓴다.
   (카테고리 목록 / 검색 결과 / 나중에 태그·기획전 등)

   로드: additionalCss 에 'listing.css'
   의존: base.css (토큰)
   ------------------------------------------------------------
   ※ 원래 category.css 에 있던 것을 옮겨온 것.
     검색 결과가 같은 조각을 쓰는데, 그러자고 category.css 를
     통째로 불러오면 안 쓰는 트리·칩 CSS 까지 딸려온다.
   ============================================================ */


/* ============================================================
   1. 도구줄
   상품 그리드 바로 위. 총 개수 · 현재 페이지
   ------------------------------------------------------------
   아래 테두리가 곧 그리드의 위 선이 된다.
   → 그리드에 .is-attached 를 붙여 선이 겹치지 않게 할 것
   ============================================================ */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:11px;
  border-bottom:1px solid var(--ink);
}
.toolbar .lead{
  margin:0;
  font-size:13px;
  color:var(--ink-soft);
}
.toolbar .lead b{
  font-family:var(--f-mono);
  font-weight:500;
  color:var(--ink);
}
/* 검색어 등 강조할 말 */
.toolbar .lead em{
  font-style:normal;
  font-weight:500;
  color:var(--ink);
}


/* ============================================================
   2. 빈 상태
   상품 없음 / 검색 결과 없음 / 검색어 미입력
   ------------------------------------------------------------
   도구줄 바로 아래 붙으므로 위 테두리는 두지 않는다.
   ============================================================ */
.empty{
  padding:72px 20px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-top:0;
}
.empty p{
  margin:0 0 6px;
  font-size:15px;
  color:var(--ink-soft);
}
.empty p b{
  font-weight:500;
  color:var(--ink);
}
.empty span{
  font-size:13px;
  color:var(--ink-faint);
}

/* 도움말 목록 (검색이 안 될 때 뭘 해보면 되는지) */
.empty ul{
  display:inline-block;
  margin:20px 0 0;
  padding:16px 22px;
  text-align:left;
  list-style:none;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  font-size:13px;
  color:var(--ink-soft);
}
.empty li{
  position:relative;
  padding-left:13px;
  line-height:1.85;
}
.empty li::before{
  content:"·";
  position:absolute;
  left:2px;
  color:var(--shelf-dark);
}


/* ============================================================
   3. 반응형
   ============================================================ */
@media (max-width:640px){
  .empty{ padding:52px 16px; }
  .empty ul{ display:block; padding:14px 16px; }
}