/* BASIC css start */ /* 피시위즈 모바일 상품목록 — CSS 탭 (shopbrand.css) 2026-08-04 : HTML 안에 넣었던 style 을 그대로 옮겼다. 내용 변경 없음. 여러 화면이 함께 쓸 규칙(상품 카드 등)은 다음 단계에서 공통 css-js 로 옮긴다. */ /* ===== ver1 원본 shopbrand.css 그대로 (4.0 세트는 CSS 탭이 공용이라 여기 넣는다) ===== */ /* ============================================================ 피시위즈 모바일 리뉴얼 — 상품 목록 CSS v2.0 (2026-07) KREAM풍 미니멀 ============================================================ */ /* 분류 상단 타이틀 이미지 */ .brand .brandTitle img {width:100%; vertical-align:top;} /* 분류 베스트 (가로 스크롤 캐러셀) */ .brand .cateBestWrap {padding:14px 0 6px; background:#fff; border-bottom:1px solid #F5F5F5;} .brand .cateBestTitle {font-size:15px; font-weight:800; color:#222; padding:0 12px 10px;} .brand .cateBestTitle em {font-style:normal; color:#222;} .brand .cateBest ul {display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 12px; scrollbar-width:none;} .brand .cateBest ul::-webkit-scrollbar {display:none;} .brand .cateBest ul:after {content:none;} .brand .cateBest li {flex:0 0 33%; width:auto !important; float:none !important; margin-bottom:8px;} .brand .cateBest li:nth-child(odd) {clear:none !important;} .brand .cateBest li a {margin:0 8px 0 0;} .brand .cateBest .listName {font-size:11px; -webkit-line-clamp:2;} .brand .cateBest .listPrice {font-size:12px;} .brand .cateBest .paging-num {display:none;} /* 하위 분류 선택 */ .brand .list_group {padding:12px 12px 0; display:flex; gap:8px;} .brand .list_group select {flex:1; height:38px; border:1px solid #E5E5E5; border-radius:10px; padding:0 10px; font-size:13px; color:#222; background:#fff;} /* 정렬 · 뷰 전환 바 */ /* [카드 v3] 이 부분은 header.1.css 「카드 v3」 으로 오겼습니다 (2026-08-10). 여기에 다시 적지 않습니다 — 카드를 고칠 땐 header.1.css 한 곳만 고칩니다. */ /* 상품 목록 여백 */ .brand .list_shopping1x {padding:10px 4px 0;} /* 상품 없음 */ .brand .none-data {text-align:center; padding:60px 0; color:#AAA; font-size:13px;} .brand .none-data .none-ico {font-size:40px; margin-bottom:10px;} /* ===== 피시위즈 v2 적용 (2026-08-04) — PC 상품목록에서 정한 규칙을 그대로 옮긴다 ===== 카드 뼈대는 기본 모양(figure/figcaption/listName…)을 유지하고 겉모습만 바꾼다. 가상태그는 원본과 한 글자도 다르지 않다. */ #contents .brand{overflow-x:hidden;max-width:100%;} /* 분류 상단 타이틀 */ #contents .brandTitle:empty{display:none;} #contents .brandTitle img{width:100%;display:block;} /* 브레드크럼 */ #contents .page_location{padding:10px 15px 0;} #contents .page_location ol{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;} #contents .page_location li{font-size:11.5px;color:#8A8F96;} #contents .page_location li + li:before{content:'›';margin-right:4px;color:#C4C8CC;} #contents .page_location li a{color:#8A8F96;} #contents .page_location li:last-child a{color:#14181d;font-weight:700;} /* 분류 베스트 */ #contents .cateBestWrap{padding:14px 0 4px;border-bottom:8px solid #F4F5F6;} #contents .cateBestTitle{margin:0 15px 10px;font-size:15px;font-weight:800;color:#14181d;letter-spacing:-.3px;} #contents .cateBestTitle em{font-style:normal;color:#14181d;} #contents .cateBest{padding:0 15px;} #contents .cateBest .paging-num{padding:8px 0 0;text-align:center;font-size:12px;color:#8A8F96;} #contents .cateBest .paging-num a{padding:0 8px;color:#14181d;} /* 분류 칩 줄 (2026-08-04) — 옛 셀렉트 두 칸 대체. 가로로 넘겨 보고 현재 분류는 검정 채움. 스크롤 막대는 감춘다(모바일에서 막대가 보이면 지저분하다). */ #contents .fw-chips{display:flex;gap:7px;padding:12px 15px 11px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;} #contents .fw-chips::-webkit-scrollbar{display:none;height:0;} #contents .fw-chips:empty{display:none;} #contents .fw-chip{flex:none;display:flex;align-items:center;gap:5px;white-space:nowrap; border:1px solid #DFE3E8;border-radius:999px;padding:7px 14px; font-size:12.5px;color:#41474E;background:#fff;text-decoration:none;} #contents .fw-chip .cnt{font-size:10.5px;color:#B3B9C0;} #contents .fw-chip.sel{border:1.5px solid #14181D;background:#14181D;color:#fff;font-weight:600;} #contents .fw-chip.sel .cnt{color:#9AA0A8;} /* 아랫줄 = 3차. 윗줄(2차)보다 한 급 작고 연하게 해서 단계가 눈에 구분되게 한다 */ #contents .fw-chips.sub{padding:0 15px 11px;} #contents .fw-chip.sm{padding:5px 11px;font-size:11.5px;color:#5B6167; border-color:#EDEEF0;background:#F7F8F9;} #contents .fw-chip.sm .cnt{font-size:10px;} /* 정렬 · 필터 · 뷰 전환 — 한 줄에 셋이 들어가므로 자리를 못박아 둔다 (2026-08-04). 왼쪽 필터(고정) | 가운데 정렬(남는 폭 전부 · 가로 스크롤) | 오른쪽 보기(고정). 가운데만 늘었다 줄었다 하고 양 끝은 안 움직인다. */ /* [카드 v3] 이 부분은 header.1.css 「카드 v3」 으로 오겼습니다 (2026-08-10). 여기에 다시 적지 않습니다 — 카드를 고칠 땐 header.1.css 한 곳만 고칩니다. */ /* ===== 검색 필터 (상세파인더) — 하단 시트 · v2 4a ===================== 메이크샵이 만들어 주는 것은 체크박스 input+label 뿐이라, 바깥은 우리가 다 그린다. */ /* ===== 버튼 줄 (필터 · 정렬 · 보기) — 2026-08-04 다시 짬 ================== 앞서 세 번 고쳐도 필터만 높았다. 원인은 필터가