/* 상품목록(product/list.html) 브랜드 디자인 재구축(2026-08-06) — 홈페이지 WEEKLY BEST 카드 (best-items.css의 .bi-item/.bi-thumb/.bi-price/.bi-badge)와 동일한 시각 언어를 재사용하고, 그 위에 이 페이지 전용 레이아웃(그리드/섹션 헤더/카운트+정렬바)만 얹는다. 벤치마크 (ecudemo398355.cafe24.com/category/스킨케어/69/, EVERIN)는 카테고리 필터 pill·BEST 캐러셀· 4단 그리드·할인율+가격 표기 구조를 참고했고, 색/폰트/카드 톤은 SOYONE 자체 것을 그대로 쓴다. */ /* 상품검색(product/search.html) 카드 그리드 재구축(2026-08-06 추가) — 클래스명(.pl-thumb/.pl-info/ .bi-price/.bi-badge/.prdList.grid4)을 list.html과 동일하게 써서 이 파일을 그대로 재사용한다 (search_ListItem도 local_server.js 가격서브루프에서 product_ListItem과 동일 처리됨, 데이터 구조 동일 확인). 검색폼/검색옵션 레이어/검색조건 태그(searchdata.css)는 이번 범위 밖(스톡 유지). /* 상품상세(.xans-product-detail, G51)와 동일한 좌우 여백 — 게시판(2026-08-06 밤)에 이어 상품목록도 이 규칙이 없어 콘텐츠가 뷰포트 끝까지 붙어 보이던 것(실측 발견). */ .xans-product-menupackage, .pl-section, .xans-product-normalpaging, .xans-search-paging { width: 94%; max-width: var(--ml-max-width); margin: 0 auto; } .pl-title-area { text-align: center; padding: 40px 0 20px; } .pl-title-area h2 { font-size: 28px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ml-fg); } /* {$title_text_or_image}가 빈 카테고리(예: cate_no=24)는

만 남아 패딩(60px)이 텅 빈 공백으로 보이던 문제(2026-08-18 실측, "상단과 목록 사이 공백은 뭐야?" 지적) — 제목이 없으면 이 영역 자체를 접는다. */ .pl-title-area:has(h2:empty) { display: none; } .pl-section { padding: 30px 0; } .pl-section-head { margin-bottom: 24px; } .pl-section-head h3 { font-size: 20px; font-weight: 800; color: var(--ml-fg); } /* 그리드 — 스톡 ec-base-product.css의 `.prdList{font-size:0;line-height:0;min-width:756px; margin:-20px 0 0}`가 이 div에도 그대로 걸려 있어, line-height:0이 하위 텍스트에 상속되며 상품명/가격 줄이 높이 0으로 찌그러져 다음 요소와 겹쳐 보이던 버그(2026-08-06 실측 발견, getBoundingClientRect로 height:0 확인) — 전부 명시적으로 재정의해 상속을 끊는다. 🔴→✅ 2026-08-12 재정정: 아래 두 규칙 다 애초에 "특이도로 이긴다"는 이전 코멘트 자체가 계산 오류였다 — `.ec-base-product .prdList`(클래스 2개)와 `.prdList.grid4`(클래스 2개)는 특이도가 정확히 동일(0,2,0)하고, `.ec-base-product ul.grid4 > li`(엘리먼트 2+클래스 2)와 `ul.prdList.grid4 > li`(엘리먼트 2+클래스 2)도 동일(0,2,2)하다. 카페24 실제 라이브 번들 (`optimizer_user.php`)을 직접 떠보니 스톡 규칙이 우리 규칙보다 **파일 안에서 더 뒤쪽**에 위치해(오프셋 실측 확인) 동일 특이도 상황에서 소스 순서로 스톡이 이겨버린다 — 카드가 컬럼폭의 25%로 찌그러지고 배지 높이가 4px로 뭉개지는 게 라이브에서 실제로 계속 재현됐다 (2026-08-12, 사용자가 실측 스크린샷으로 재지적). G56과 동일한 근본원인(동일 특이도 + 소스 순서 통제 불가) — `!important`로 단조 강제한다. */ .prdList.grid4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 32px 20px !important; list-style: none; width: auto !important; min-width: 0 !important; margin: 0 !important; font-size: 16px !important; line-height: normal !important; } .prdList.grid4 > li, ul.prdList.grid4 > li { list-style: none; width: auto !important; margin: 0 !important; display: block !important; /* 🔴→✅(2026-08-18) 2열 폭이 242px/98.5px처럼 불균등하게 갈라지던 버그. `repeat(2,1fr)`의 fr 트랙은 기본적으로 `minmax(auto,1fr)`로 계산되는데, `auto` 최소값은 그리드 아이템의 min-content(내용물이 줄어들 수 있는 최소 너비)를 그대로 반영한다. `.pl-info .name`에 걸어둔 white-space:nowrap이 제목을 한 줄로 유지하려고 min-content를 "줄바꿈 없는 전체 글자폭"으로 부풀렸고(예: "GOLD ELEMENTS 인텐시브 클렌징 토너 듀오"), text-overflow:ellipsis는 화면에 보이는 모양만 잘라줄 뿐 이 min-content 계산엔 전혀 영향을 안 준다 — 그 결과 이 제목이 있는 열만 트랙이 넓어지고 반대 열이 좁아지는 실측 확인(실기기 380px 스크린샷). 그리드 아이템에 min-width:0을 명시해 min-content 전파를 끊는다(flex/grid의 고전적인 "min-width:auto" 함정, 표준 해법). */ min-width: 0 !important; } /* 카드 — .bi-item(best-items.css)과 동일한 톤, 슬라이드 트랙이 아니라 그리드라 폭 계산만 다름 */ .pl-link { display: block; color: inherit; text-decoration: none; } .pl-thumb { position: relative; border-radius: 12px; overflow: hidden; background: #f8f8f8; aspect-ratio: 1 / 1.1; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; } .pl-thumb img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .pl-link:hover .pl-thumb img { transform: scale(1.06); } .pl-thumb .bi-badge { position: absolute; top: 12px; left: 12px; } .pl-thumb .bi-badge.new { top: 12px; left: 12px; } .pl-thumb .bi-badge.best ~ .bi-badge.new { left: auto; top: 12px; right: 12px; } .pl-info { text-align: left; } .pl-info .name { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; color: #111; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 판매가/할인율 — 🔴→✅(2026-08-18) 위 코멘트의 "li 1~2개가 ul 하나에 들어간다"는 가정이 실측과 달랐다: 상품에 "요약설명"(simple_desc)이 등록돼 있으면 카페24가 `.pl-info` 안에 `