@charset "UTF-8";
/* ============================================================
   themes/erp/style/category.css
   상품 목록 페이지 전용
   ------------------------------------------------------------
   빵가루 / 분류머리 / 왼쪽 분류트리 / 소분류 칩 / 도구줄 / 빈 상태

   로드: additionalCss 에 'category.css'
   의존: base.css(토큰) · layout.css(헤더) · card.css(카드) · pager.css
   ============================================================ */

/* 1. 빵가루  섹션 전체 삭제 */

/* ============================================================
   2. 분류 머리
   위쪽 5px 띠가 카테고리 색 → body.cat-N 에서 내려온다
   ============================================================ */
/* 위쪽 색띠 없음.
   대분류 네비의 활성 밑줄(2px)이 이 페이지의 색 신호다.
   여기 5px 를 두면 그게 묻혀서 어느 분류인지 안 보인다 */
.cat-head{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.cat-head .wrap{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-block:16px 14px;
}

/* 빵가루 + 제목 + 코드를 한 줄에.
   baseline 정렬이라 크기가 달라도 밑선이 맞는다 */
.cat-title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 9px;
}
.cat-head h1{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:25px;
  line-height:1.3;
  letter-spacing:-.025em;
}
/* 분류코드 배지 — 채운다.
   이 영역에서 카테고리 색을 지닌 유일한 요소 */
.cat-head .code{
  padding:2px 8px;
  background:var(--band);
  color:#fff;
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
}
.cat-head .desc{
  margin:8px 0 0;
  max-width:52ch;
  font-size:13.5px;
  font-weight:300;
  line-height:1.75;
  color:var(--ink-soft);
}

/* 오른쪽 품목 수 */
.cat-head .count{
  padding-bottom:5px;
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--ink-faint);
  white-space:nowrap;
}
.cat-head .count b{
  font-size:19px;
  font-weight:500;
  color:var(--ink);
}


/* ============================================================
   3. 본문 2단 배치
   왼쪽 분류트리 + 오른쪽 상품
   ============================================================ */
.cat-layout{
  display:grid;
  /* 176px: 212 에서 좁힘. 모바일은 980px 이하에서 1fr 로 바뀌므로 영향 없음 */
  grid-template-columns:176px minmax(0,1fr);
  gap:28px;                    /* 38 → 28 */
  padding-block:20px 60px;     /* 32/72 → 20/60 */
  align-items:start;
}


/* ============================================================
   4. 왼쪽 분류 트리 (LNB)
   대분류 전체 + 현재 대분류의 중분류만 펼침
   ※ 3단(소분류)은 여기 안 넣는다. 세로로 너무 길어져 스캔이 안 됨.
     소분류는 오른쪽 칩이 담당.
   ============================================================ */
.lnb{
  position:sticky;
  top:16px;              /* 스크롤해도 분류가 따라옴 */
}
.lnb h2{
  margin:0 0 8px;
  padding-bottom:7px;
  border-bottom:1px solid var(--ink);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.tree,
.tree ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* 대분류 */
.tree > li{ border-bottom:1px solid var(--line-soft); }
.tree > li > a{
  display:block;
  padding:8px 2px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
}
.tree > li > a:hover{ color:var(--ink); }
.tree > li.on > a{ color:var(--ink); font-weight:500; }

/* 펼쳐진 대분류의 중분류
   왼쪽 세로선이 카테고리 색 */
.tree ul{
  margin-left:1px;
  padding:2px 0 10px 11px;
  border-left:2px solid var(--band);
}
/* 중분류 — 폭이 좁아 긴 이름은 두세 줄로 접힌다.
   글자와 줄간격을 줄여 세로 길이를 억제 */
.tree ul a{
  display:block;
  padding:4px 0 4px 9px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-soft);
}
.tree ul a:hover{ color:var(--band-dk); }
.tree ul li.on > a{ color:var(--band-dk); font-weight:500; }


/* ============================================================
   5. 소분류 칩
   라벨 스티커 모양 — 책등 라벨 모티프를 이어받음
   ============================================================ */
.subs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px;
}
.subs a{
  display:inline-block;
  padding:7px 13px;
  font-size:13px;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1px;         /* 스티커라서 거의 각지게 */
}
.subs a:hover{
  border-color:var(--band);
  color:var(--ink);
}
.subs a[aria-current]{
  background:var(--band);
  border-color:var(--band);
  color:#fff;
  font-weight:500;
}


/* ============================================================
   8. 반응형
   980 : 트리가 위로 올라가 2열 가로 배치
   640 : 1열
   ============================================================ */
@media (max-width:980px){
  .cat-layout{
    grid-template-columns:1fr;
    gap:26px;
  }
  .lnb{ position:static; }        /* 위로 올라오면 sticky 불필요 */
  .tree{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 20px;
  }
  /* 가로 배치일 땐 중분류를 접어둔다 (너무 길어짐) */
  .tree > li:not(.on) ul{ display:none; }
}

@media (max-width:640px){
  .cat-head h1{ font-size:21px; }
  .cat-head .wrap{ padding-block:14px 12px; }
  .tree{ grid-template-columns:1fr; }
  .cat-layout{ padding-block:22px 48px; }
  .empty{ padding:56px 16px; }
}