/* ============================================================
   STIZ List (list.html) 전용 스타일 — TASK-302 리디자인
   기반: dev/cli-briefs/03-phase3-consumer-core.md TASK-302
   ⚠️ 하드코딩 색상 금지 — CSS 변수(var(--*)) + 디자인시스템 토큰 사용
   ⚠️ 리스킨 전용: 기존 동적 카테고리/필터/정렬 로직은 js/list.js 그대로 유지
   ============================================================ */

/* ─── 제목 영역 (eyebrow + 타이틀 + 결과 카운트) ──────────── */
/* 좌: eyebrow+타이틀, 우: 상품 개수. 좁은 화면에선 줄바꿈(flex-wrap) */
.list-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.list-title { font-size:36px; font-weight:var(--fw-black); letter-spacing:var(--ls-tight); margin:8px 0 0; }
.list-count { font-size:13px; color:var(--text-muted); margin:0; }

/* ─── Chip 필터 (동적 카테고리 탭이 렌더되는 가로 스크롤 행) ── */
/* JS가 이 안에 stiz-chip 버튼들을 채운다. 좁은 화면에선 가로 스크롤 */
.list-chips { display:flex; gap:8px; margin:20px 0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
/* 스크롤바 숨김 — 칩이 화면을 넘어가도 스크롤바 없이 깔끔하게 */
.hide-scroll::-webkit-scrollbar { display:none; }
.hide-scroll { scrollbar-width:none; }

/* ─── 툴바 (타입 칩 CUSTOM/STORE + 정렬 셀렉트를 한 줄에) ──── */
/* 브리프 기본 마크업엔 없지만, 기존 CUSTOM/STORE 타입 필터 기능을 보존하기 위해 추가 */
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.list-type-chips { display:flex; gap:8px; }

/* ─── 정렬 셀렉트 ────────────────────────────────────────── */
/* 옵션 value(popular/newest/price_asc/price_desc/name)는 서버와 맞춰 그대로 유지 — 스타일만 교체 */
.list-sort { display:flex; justify-content:flex-end; }
.list-sort select { padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius-card); font-size:14px; font-family:var(--font-sans); background:var(--surface); cursor:pointer; min-height:44px; }
.list-sort select:focus { outline:none; border-color:var(--stiz-black); box-shadow:0 0 0 3px rgba(17,17,17,.08); }

/* ─── 상품 그리드 (공통) ─────────────────────────────────── */
/* ⚠️ 중복정의 주의: css/pages/home.css에도 동일 .product-grid 규칙 존재.
   list.html은 home.css를 로드하지 않으므로 여기에 "동일 값"으로 재정의(값 일치 유지) */
.product-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
@media (max-width:960px) { .product-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px) { .product-grid { grid-template-columns:repeat(2, 1fr); gap:16px; } }

/* ─── 빈 상태 (조건에 맞는 상품이 없을 때) ───────────────── */
.list-empty { text-align:center; padding:80px 20px; }
.list-empty .material-symbols-outlined { font-size:64px; color:var(--text-muted); }
.list-empty p { font-size:16px; color:var(--text-secondary); margin:16px 0 24px; }