@charset "UTF-8";
/* ============================================================
PC 카테고리/큐레이션 목록 — 오아시스 카드 문법 (2026-09-03 신설)
v1.0.8
------------------------------------------------------------
스코프 = .product_list_wrap.oaz (PC goods_list.jsp 만 이 클래스를 붙인다)
+ @media (min-width:1024px) 이중 가드.
→ 모바일 JSP/CSS 무접촉. PC 검색결과(.product_list_wrap, oaz 없음)도 무접촉.
오아시스 문법:
· 섹션 제목 = 왼쪽 정렬 25~28px/700 + 제목 아래 전폭 1px 진회색 선
· 탭(칩) 줄은 아웃박스 없이 알약만
· 카드 = 아웃박스 없음. 사진만 8px 라운드 정사각.
사진 우하단 44px 흰 원형 담기 아이콘.
글은 사진 좌측선에 맞춰 맨바닥(생산자 · 별점/후기수 · 상품명 · 칩 · 가격)
· 배경 순백
마크업 무접촉(CSS만) 원칙:
담기(.pc_cart)는 의 첫 자식이라 위치가 사진 위가 아니다 →
li 를 position:relative 로 두고 .pc_cart 를 절대배치,
세로 오프셋은 margin-top:calc(100% - 54px) 로 잡는다.
(절대배치 요소의 % 마진 = 컨테이닝블록 폭 기준, li 패딩 0 + 썸네일이 정사각이라
100% = li 폭 = 사진 높이. 사진 하단에서 10px 띄운 44px 원이 정확히 나온다.)
재사용: metatop/rvstat/specrow/cpill/tpill = dure_card.css(.dcz) 전역.
카드 골격/그리드 = goods_list_card_v2.css → 여기서 오아시스 톤으로 덮어씀.
============================================================ */
@media screen and (min-width:1024px) {
/* ── 0) 바탕 순백 ─────────────────────────────────────────── */
.product_list_wrap.oaz{ background:#fff; }
.product_list_wrap.oaz .inner{ background:#fff; }
/* ── 1) 페이지 제목 : 왼쪽 + 전폭 1px 진회색 선 ─────────────── */
.product_list_wrap.oaz .cate_title{
font-size:28px; font-weight:700; line-height:1.3; letter-spacing:-.02em;
color:#1a1a1a; text-align:left;
margin:0; padding:6px 0 16px; border-bottom:1px solid #333;
}
/* 제목이 비어 있는 화면(큐레이션 등)에서 선만 남는 것 방지 */
.product_list_wrap.oaz .cate_title.cate_title_empty{ display:none; }
/* ── 2) 중분류 칩 : 아웃박스 제거, 알약만 ───────────────────── */
.product_list_wrap.oaz .cate_list_wrap{
border:0; border-radius:0; padding:0; background:none; margin-top:18px;
}
.product_list_wrap.oaz .cate_list_wrap .cate_list{ width:100%; }
.product_list_wrap.oaz .cate_list_wrap .cate_list .con{
margin:0 8px 8px 0; padding:0 17px; min-height:38px;
border:1px solid #dcdcdc; border-radius:999px;
font-size:15px; font-weight:600; color:#444; background:#fff;
}
.product_list_wrap.oaz .cate_list_wrap .cate_list .con:hover{
border-color:#3d6041; color:#3d6041; background:#f4f7f3;
}
.product_list_wrap.oaz .cate_list_wrap .cate_list .con.active{
background:#3d6041; border-color:#3d6041; color:#fff;
}
/* ── 3) 섹션 제목(베스트 · 전체 생활재) : 25px/700 + 전폭 1px 선 ── */
.product_list_wrap.oaz .oaz_shead{ margin:52px 0 0; }
.product_list_wrap.oaz .oaz_st{
display:flex; align-items:baseline; gap:12px;
margin:0; padding:0 0 14px; border-bottom:1px solid #333;
font-size:25px; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:#1a1a1a;
}
.product_list_wrap.oaz .oaz_st .oaz_sub{
font-size:15px; font-weight:500; color:#767676; letter-spacing:0;
}
/* ── 4) 4열 그리드 ──────────────────────────────────────────── */
/* [v1.0.4 2026-09-03] 맨 우측 열만 넓어지던 결함 수정.
원인 = 1fr = minmax(auto,1fr) 라 트랙 최소값이 "그 열에 들어온 카드의 min-content".
4번째 카드에 안 쪼개지는 긴 품명/규격칩이 들어오면 그 열만 밀려 넓어진다
(실측 257.4/257.4/257.4/307.8px → 마지막 열 썸네일만 50px 큼).
→ minmax(0,1fr) 로 최소값 바닥을 0 으로 내려 4열을 항상 같은 폭으로 고정. */
.product_list_wrap.oaz .product_type1,
.product_list_wrap.oaz .product_type1#id_goodsList{
display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr));
gap:38px 20px; margin-top:26px;
}
/* ── 5) 카드 : 아웃박스 없음 ────────────────────────────────── */
.product_list_wrap.oaz .product_type1 > li{
position:relative; display:block;
background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
padding:0; margin:0 !important; transition:none;
min-width:0; /* v1.0.4 그리드 아이템 min-content 바닥 해제(트랙 밀림 방지) */
}
.product_list_wrap.oaz .product_type1 > li:hover{ box-shadow:none; transform:none; }
.product_list_wrap.oaz .product_type1 > li > a{ display:block; text-decoration:none; }
/* 썸네일 : 8px 라운드 정사각(구조상 padding-bottom:100% = 정사각 보장) */
.product_list_wrap.oaz .product_type1 .img_wrap{
border:0; border-radius:8px; overflow:hidden; background:#f5f5f3;
}
.product_list_wrap.oaz .product_type1 .img_wrap img{ border-radius:0; }
/* 배지(할인%/증정/쿠폰/BEST) : 사진 좌상단, 라운드 클립 안쪽 */
.product_list_wrap.oaz .product_type1 .img_wrap .tag{ top:0; left:0; z-index:2; }
.product_list_wrap.oaz .product_type1 .img_wrap .tag .bg_best{
float:left; height:26px; line-height:26px; padding:0 10px;
background:#1d271e; color:#fff; font-size:13px; font-weight:800;
font-family:'Roboto','Pretendard',sans-serif; letter-spacing:.02em;
border-radius:0 0 10px 0;
}
/* 2026-09-03 v1.0.3 : 베스트 블록 카드는 사진 위 할인율 태그(.bg_y)를 숨긴다 — 순위 배지 옆에 %가 겹쳐 보인다는 검수.
메인 카테고리별 베스트(cat_best.css .cb-imw .cb-dc{display:none})와 같은 규칙. 할인율은 가격 줄(.dc)에만 노출.
※ 아래 목록(#id_goodsList)의 할인 배지는 기존 그대로 유지 — 베스트 블록(#id_oabestList)만 해당. */
.product_list_wrap.oaz #id_oabestList .img_wrap .tag .bg_y{ display:none; }
/* 글 박스 : 사진 좌측선에 맞춰 맨바닥(좌우 패딩 0) */
.product_list_wrap.oaz .product_type1 .txt_box{
padding:13px 0 0; margin:0; min-height:0; background:none;
}
.product_list_wrap.oaz .product_type1 .txt_box .metatop{ margin-bottom:4px; min-height:20px; }
.product_list_wrap.oaz .product_type1 .txt_box .title{
font-size:16px; font-weight:500; line-height:1.45; color:#1a1a1a;
letter-spacing:-.01em; margin:0 0 6px; max-height:47px;
}
.product_list_wrap.oaz .product_type1 .txt_box .specrow{ margin:0 0 8px; min-width:0; }
/* v1.0.4 : 안 쪼개지는 긴 품명이 트랙을 밀지 않게 카드 폭 안에서 줄바꿈 */
.product_list_wrap.oaz .product_type1 .txt_box .title,
.product_list_wrap.oaz .cmz_card .cmz_nm{ overflow-wrap:anywhere; word-break:break-word; }
.product_list_wrap.oaz .product_type1 dl.price{ margin:0; }
.product_list_wrap.oaz .product_type1 dd.won{ gap:6px; }
.product_list_wrap.oaz .product_type1 dd.won .now{ font-size:19px; }
.product_list_wrap.oaz .product_type1 dd.won .dc{ font-size:17px; }
.product_list_wrap.oaz .product_type1 dd.won .old{ font-size:14px; }
/* 판매 근거 한 줄(베스트 블록 전용) */
.product_list_wrap.oaz .product_type1 .oab_trend{
margin:7px 0 0; font-size:14px; font-weight:500; color:#767676; letter-spacing:-.01em;
}
.product_list_wrap.oaz .product_type1 .oab_trend b{ font-weight:700; color:#3d6041; }
/* ── 6) 담기 : 사진 우하단 44px 흰 원형 아이콘 ───────────────── */
.product_list_wrap.oaz .product_type1 .pc_cart{
position:absolute; top:0; right:10px; bottom:auto; left:auto;
margin:calc(100% - 54px) 0 0; padding:0;
display:block; width:44px; height:44px; min-height:0; box-sizing:border-box;
border:1px solid #e6e6e6; border-radius:50%;
background-color:#fff;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d271e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.6' cy='20' r='1.4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:22px 22px;
box-shadow:0 2px 8px rgba(20,25,20,.18);
font-size:0; line-height:0; color:transparent; text-indent:0; overflow:hidden;
z-index:3; transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.product_list_wrap.oaz .product_type1 .pc_cart:hover,
.product_list_wrap.oaz .product_type1 .pc_cart:active{
background-color:#eaf1e8; border-color:#3d6041;
box-shadow:0 4px 12px rgba(20,25,20,.22);
}
/* 예약/택배 분기도 같은 원형 */
.product_list_wrap.oaz .product_type1 .pc_cart.res,
.product_list_wrap.oaz .product_type1 .pc_cart.gift{ background-color:#fff; border-color:#e6e6e6; }
/* 공급중단·한정소진 : 원형 대신 사진 하단 안내 바(사유 유지) */
.product_list_wrap.oaz .product_type1 .pc_cart.soldout,
.product_list_wrap.oaz .product_type1 > li.soldout .pc_cart{
left:8px; right:8px; width:auto; height:auto; min-height:0;
margin-top:calc(100% - 48px); padding:9px 10px;
border:0; border-radius:8px; background-image:none; background-color:rgba(29,39,30,.74);
box-shadow:none; color:#fff; font-size:14px; font-weight:700; line-height:1.2;
text-align:center; white-space:nowrap; text-overflow:ellipsis; pointer-events:none;
}
/* ── 7) 목록 검색창·정렬 바 정돈(오아시스 톤) ────────────────── */
.product_list_wrap.oaz .search_row{ margin:18px 0 0; }
/* 돋보기 버튼(.btn_sch)은 position:absolute 인데 .search_wrap 이 static 이라 조상 .inner 에 붙는다
→ 섹션 제목을 앞에 넣으면 아이콘만 위로 튄다. 래퍼를 기준으로 고정. */
.product_list_wrap.oaz .search_row .search_wrap{ position:relative; }
.product_list_wrap.oaz .prod_option{ padding-top:18px; border-bottom:0; }
.product_list_wrap.oaz .prod_option .num{ font-size:15px; color:#767676; }
.product_list_wrap.oaz .prod_option .num .roboto{ font-size:16px; font-weight:800; color:#1a1a1a; }
/* ── 8) 구 베스트 레일(swiper) 은 새 베스트 블록으로 대체 ─────── */
.product_list_wrap.oaz .section_goodslist_best{ display:none !important; }
/* ── 9) 더보기 버튼 ─────────────────────────────────────────── */
.product_list_wrap.oaz .shop_btn_wrap{ margin-top:44px; }
/* ============================================================
9-b) [v1.0.5 2026-09-03] PC 검색 결과(goodsSearchListV3.do) 확산 — 팀장 확정.
wrapper = .product_list_wrap.oaz.srchz. 카드 문법은 카테고리 목록과 완전 동일
(li.dcz > a.pc_cart + a > .img_wrap + .txt_box)이라 위 5~6번 규칙이 그대로 먹는다.
여기서는 검색 화면 고유 요소(제목·좁혀보기·발견/0건 블록)의 간격만 오아시스 리듬으로 맞춘다.
⚠ 발견 영역(연관 검색어·오타 교정 안내 .srch-fb-note·좁혀보기 .srchf·정렬)은 톤 무접촉.
============================================================ */
/* 제목(검색어) 아래 = 좁혀보기 칩 줄. 목록의 중분류 칩과 같은 리듬(18px). */
.product_list_wrap.oaz.srchz .srchf{ padding:18px 0 0; }
/* 오타 교정·폴백 안내는 제목 바로 아래 붙인다(발견 맥락 유지, 톤은 기존 그대로) */
.product_list_wrap.oaz.srchz .srch-fb-note{ margin:18px 0 0; }
/* 건수·정렬 바 = 목록과 같은 여백 */
.product_list_wrap.oaz.srchz .prod_option{ padding-top:18px; }
/* 0건·발견 화면은 제목선 아래 충분히 띄운다(제목이 없으면 .cate_title_empty 로 선까지 숨김) */
.product_list_wrap.oaz.srchz .srchz0{ padding-top:56px; }
.product_list_wrap.oaz.srchz .srchz0.srchz0_disc{ padding-top:48px; }
/* ============================================================
10) 큐레이션 매거진(?cur=1, curationMagazineComm.jsp) 상품 카드 통일
— 상단 에디토리얼(히어로·본문·영상·탭·칩)은 무접촉, 카드만 오아시스 문법.
curation_mz.css(.cmz, PC/모바일 공용) 무수정 → 여기서 .oaz 스코프로만 덮어씀.
============================================================ */
.product_list_wrap.oaz .cmz_rail,
.product_list_wrap.oaz .cmz_pop .cmz_rail,
.product_list_wrap.oaz .cmz_grid{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px 20px;
padding:4px 4px 6px; overflow:visible;
}
.product_list_wrap.oaz .cmz_card{ min-width:0; }
.product_list_wrap.oaz .cmz_card{
position:relative; display:block;
background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.product_list_wrap.oaz .cmz_card:hover{ box-shadow:none; transform:none; }
.product_list_wrap.oaz .cmz_card .cmz_link{ display:block; }
.product_list_wrap.oaz .cmz_card .cmz_img{ border-radius:8px; overflow:hidden; background:#f5f5f3; }
.product_list_wrap.oaz .cmz_card .cmz_bd{ display:block; padding:13px 0 0; }
.product_list_wrap.oaz .cmz_card .cmz_nm{
font-size:16px; font-weight:500; line-height:1.45; color:#1a1a1a; letter-spacing:-.01em;
}
.product_list_wrap.oaz .cmz_card .specrow{ margin:6px 0 8px; }
.product_list_wrap.oaz .cmz_card .cmz_price{ margin:0; }
/* 담기 = 사진 우하단 44px 흰 원형(li 의 마지막 자식이라 절대배치 동일 규칙) */
.product_list_wrap.oaz .cmz_card .cmz_add{
position:absolute; top:0; right:10px; left:auto;
margin:calc(100% - 54px) 0 0; padding:0;
width:44px; height:44px; box-sizing:border-box;
display:flex; align-items:center; justify-content:center;
border:1px solid #e6e6e6; border-radius:50%; background:#fff;
box-shadow:0 2px 8px rgba(20,25,20,.18); font-size:0; color:#1d271e;
z-index:3; transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.product_list_wrap.oaz .cmz_card .cmz_add:hover,
.product_list_wrap.oaz .cmz_card .cmz_add:active{
background:#eaf1e8; border-color:#3d6041; color:#3d6041;
box-shadow:0 4px 12px rgba(20,25,20,.22);
}
.product_list_wrap.oaz .cmz_card .cmz_add svg{ width:22px; height:22px; }
/* ============================================================
11) [v1.0.6 2026-09-03] 바우처 목록(goodsListVC.do -> shop/prod/goods_list_voucher.jsp) 확산 — 팀장 지시.
------------------------------------------------------------
[주의] 이 화면은 위 .oaz 스코프를 쓰지 않는다(전용 .vcz). 이유 =
베스트 레일 슬라이드가 로 카드 자신에게
.product_type1 을 달고 있어, .oaz .product_type1 규칙(그리드·카드 리셋)이 레일까지 덮어써
스와이퍼가 깨진다. 그래서 상품 그리드(#id_goodsList)·제목·중분류 칩에만 한정한 독립 블록으로 둔다.
-> 베스트 레일·바우처 안내 이미지/접기(vc_infofold)·페이저(paging.js)·필터·정렬 전부 무접촉.
이 화면은 goods_list_card_v2.css 를 로드하지 않으므로(style_v2 3열 float 원본) 카드 규칙을 여기서 완결한다.
담기 버튼 클래스가 .pc_cart 가 아니라 .cart 인 점, 가격이 dt(조합원)+dd(float) 구조인 점만 다르다.
============================================================ */
.product_list_wrap.vcz{ background:#fff; }
/* 제목 : 왼쪽 + 전폭 1px 진회색 선 */
.product_list_wrap.vcz .cate_title{
font-size:28px; font-weight:700; line-height:1.3; letter-spacing:-.02em;
color:#1a1a1a; text-align:left; margin:0; padding:6px 0 16px; border-bottom:1px solid #333;
}
/* 중분류(플로팅 메뉴) : 컨테이너는 sticky(.move) 동작 유지, 링크만 알약 칩으로 */
.product_list_wrap.vcz .cate_list_wrap .cate_list .con{
margin:6px 8px 6px 0; padding:0 17px; min-height:38px;
display:inline-flex; align-items:center;
border:1px solid #dcdcdc; border-radius:999px;
font-size:15px; font-weight:600; color:#444; background:#fff; line-height:1.2;
}
.product_list_wrap.vcz .cate_list_wrap .cate_list .con:hover{ border-color:#3d6041; color:#3d6041; background:#f4f7f3; }
.product_list_wrap.vcz .cate_list_wrap .cate_list .con.active{ background:#3d6041; border-color:#3d6041; color:#fff; }
/* 건수·정렬 바 */
.product_list_wrap.vcz .prod_option .num{ font-size:15px; color:#767676; }
.product_list_wrap.vcz .prod_option .num .roboto{ font-size:16px; font-weight:800; color:#1a1a1a; }
/* -- 4열 그리드(3열 float -> grid). minmax(0,1fr) = 마지막 열 밀림 방지(v1.0.4 교훈) -- */
.product_list_wrap.vcz #id_goodsList{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:38px 20px; margin-top:26px;
}
.product_list_wrap.vcz #id_goodsList:after{ content:none; }
.product_list_wrap.vcz #id_goodsList > li{
float:none !important; width:auto !important; margin:0 !important; padding:0;
min-width:0; position:relative; display:block;
background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.product_list_wrap.vcz #id_goodsList > li:nth-child(3n + 1){ clear:none !important; }
.product_list_wrap.vcz #id_goodsList > li > a{ display:block; text-decoration:none; }
/* 썸네일 : 8px 라운드 정사각(padding-bottom:100% 구조 유지) */
.product_list_wrap.vcz #id_goodsList .img_wrap{ border:0; border-radius:8px; overflow:hidden; background:#f5f5f3; }
.product_list_wrap.vcz #id_goodsList .img_wrap img{ border-radius:0; }
.product_list_wrap.vcz #id_goodsList .img_wrap .tag{ top:0; left:0; z-index:2; }
.product_list_wrap.vcz #id_goodsList .img_wrap .tag_right{ top:0; right:0; z-index:2; }
/* 글 박스 : 사진 좌측선에 맞춰 맨바닥 */
.product_list_wrap.vcz #id_goodsList .txt_box{ padding:13px 0 0; margin:0; }
.product_list_wrap.vcz #id_goodsList .txt_box .metatop{ margin-bottom:4px; min-height:20px; }
.product_list_wrap.vcz #id_goodsList .txt_box .title{
font-size:16px; font-weight:500; line-height:1.45; color:#1a1a1a; letter-spacing:-.01em;
margin:0 0 6px; max-height:47px; overflow:hidden;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow-wrap:anywhere; word-break:break-word;
}
.product_list_wrap.vcz #id_goodsList .txt_box .specrow{ margin:0 0 8px; min-width:0; }
/* 가격 : dt(조합원) 숨김 + dd 한 줄(현재가 굵게 -> 원가 취소선) */
.product_list_wrap.vcz #id_goodsList dl.price{ margin:0; }
.product_list_wrap.vcz #id_goodsList dl.price:after{ content:none; }
.product_list_wrap.vcz #id_goodsList dl.price dt{ display:none !important; }
.product_list_wrap.vcz #id_goodsList dd.won{
float:none !important; width:auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px;
font-family:'Roboto','Pretendard',sans-serif; font-size:19px; font-weight:800; color:#1a1a1a;
}
.product_list_wrap.vcz #id_goodsList dd.won .roboto{ font-size:19px; font-weight:800; color:#1a1a1a; }
/* 원가(.sale)는 마크업상 현재가 앞이지만 오아시스 문법은 뒤 -> order 로만 뒤로 보낸다 */
.product_list_wrap.vcz #id_goodsList dd.won .sale{
order:2; font-size:14px; font-weight:600; color:#9aa09b; text-decoration:line-through; margin:0;
}
.product_list_wrap.vcz #id_goodsList .price-nonmem{ margin:6px 0 0; font-size:14px; color:#767676; }
/* -- 담기 : 사진 우하단 44px 흰 원형(.cart, 기존 스프라이트 아이콘 대체) -- */
.product_list_wrap.vcz #id_goodsList .cart{
position:absolute; top:0; right:10px; bottom:auto; left:auto;
margin:calc(100% - 54px) 0 0; padding:0;
display:block; width:44px; height:44px; box-sizing:border-box;
border:1px solid #e6e6e6; border-radius:50%;
background-color:#fff;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d271e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.6' cy='20' r='1.4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:22px 22px;
box-shadow:0 2px 8px rgba(20,25,20,.18);
text-indent:-9999px; font-size:0; overflow:hidden; z-index:3;
transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.product_list_wrap.vcz #id_goodsList .cart:hover,
.product_list_wrap.vcz #id_goodsList .cart:active{
background-color:#eaf1e8; border-color:#3d6041; box-shadow:0 4px 12px rgba(20,25,20,.22);
}
/* 페이저 여백만 오아시스 리듬으로(기능·마크업 무접촉) */
.product_list_wrap.vcz #id_listPage{ margin-top:52px; }
/* ============================================================
12) [v1.0.7 2026-09-03] 바우처 "베스트 생활재 안내" 레일도 아래 4열 그리드와 같은 오아시스 카드 문법으로 — 팀장 확정.
------------------------------------------------------------
레일 마크업 = > .item > (a > .img_wrap + .txt_box) + .box_cart
★ 스와이퍼 파손 방지 원칙(이 블록의 존재 이유):
· li(슬라이드)의 width / margin / display:flex / transform 은 절대 건드리지 않는다 — 폭·간격·개수·transform 은 swiper 가 계산해 인라인으로 넣는다.
여기서 지우는 것은 "카드 겉옷"(배경·테두리·라운드·그림자)뿐이다.
· .btn_prev/.btn_next(네비)와 .swiper-container/.swiper-wrapper 도 무접촉 — watchOverflow 판정·클릭 동작 그대로.
· 담기(.box_cart)는 새로 만들지 않고 기존 요소를 절대배치만 바꾼다. li 가 이미 position:relative 라
margin-top:calc(100% - 54px) 의 % 기준(=li 폭=정사각 사진 높이)이 그대로 성립한다.
============================================================ */
/* 섹션 제목 : 가운데 36px -> 왼쪽 25px + 전폭 1px 선(페이지 제목 규칙과 통일) */
.product_list_wrap.vcz .section_goodslist_best .st_header{ text-align:left; }
.product_list_wrap.vcz .section_goodslist_best .st_header .title{
margin:0; padding:0 0 4px; font-size:25px; font-weight:700; line-height:1.3;
letter-spacing:-.02em; color:#1a1a1a;
}
.product_list_wrap.vcz .section_goodslist_best .st_header p{
margin:0; padding:0 0 14px; border-bottom:1px solid #333;
font-size:15px; font-weight:500; color:#767676;
}
/* 카드 겉옷 제거(폭·간격·display 는 swiper 소관이라 무접촉) */
.product_list_wrap.vcz .section_goodslist_best .swiper-slide{
background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
}
.product_list_wrap.vcz .section_goodslist_best .swiper-slide .item{ display:block; }
/* 썸네일 : 8px 라운드 정사각 */
.product_list_wrap.vcz .section_goodslist_best .img_wrap{
border:0; border-radius:8px; overflow:hidden; background:#f5f5f3;
}
.product_list_wrap.vcz .section_goodslist_best .img_wrap img{ border-radius:0; }
.product_list_wrap.vcz .section_goodslist_best .img_wrap .tag{ top:0; left:0; z-index:2; }
/* .tag_top(추천/인기)는 PC 전용 스타일이 없어 흐름 블록으로 남아 사진 아래 15px 을 밀어냈다
(정사각이 깨지고 원형 담기 위치도 그만큼 떠 보임). 절대배치로 빼내고 딥그린 알약을 준다.
위치 = 좌측(우상단은 탄소중립포인트 배지 자리), 할인/증정 코너태그(.tag) 아래로 내려 겹침 회피. */
.product_list_wrap.vcz .section_goodslist_best .img_wrap .tag_top{
position:absolute; top:38px; left:8px; right:auto; z-index:2;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
height:0; line-height:0;
}
.product_list_wrap.vcz .section_goodslist_best .img_wrap .tag_top span,
.product_list_wrap.vcz .section_goodslist_best .img_wrap .tag_top .plag_left,
.product_list_wrap.vcz .section_goodslist_best .img_wrap .tag_top .plag_right{
position:static; top:auto; left:auto; right:auto;
display:inline-block; padding:4px 10px; border-radius:8px;
background:#3d6041; color:#fff; font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap;
}
/* 글 : 사진 좌측선에 맞춰 맨바닥 */
.product_list_wrap.vcz .section_goodslist_best .txt_box{ padding:13px 0 0; margin:0; }
.product_list_wrap.vcz .section_goodslist_best .txt_box .metatop{ margin-bottom:4px; min-height:20px; }
.product_list_wrap.vcz .section_goodslist_best .txt_box .title{
font-size:16px; font-weight:500; line-height:1.45; color:#1a1a1a; letter-spacing:-.01em;
margin:0 0 6px; max-height:47px; overflow:hidden;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow-wrap:anywhere; word-break:break-word;
}
.product_list_wrap.vcz .section_goodslist_best .txt_box .specrow{ margin:0 0 8px; min-width:0; }
/* 가격 : dt(조합원) 숨김 + 한 줄(현재가 굵게 -> 원가 취소선) */
.product_list_wrap.vcz .section_goodslist_best dl.price{ margin:0; }
.product_list_wrap.vcz .section_goodslist_best dl.price:after{ content:none; }
.product_list_wrap.vcz .section_goodslist_best dl.price dt{ display:none !important; }
.product_list_wrap.vcz .section_goodslist_best dd.won{
float:none !important; width:auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px;
font-family:'Roboto','Pretendard',sans-serif; font-size:19px; font-weight:800; color:#1a1a1a;
}
.product_list_wrap.vcz .section_goodslist_best dd.won .roboto{ font-size:19px; font-weight:800; color:#1a1a1a; }
.product_list_wrap.vcz .section_goodslist_best dd.won .sale{
order:2; font-size:14px; font-weight:600; color:#9aa09b; text-decoration:line-through; margin:0;
}
.product_list_wrap.vcz .section_goodslist_best .price-nonmem{ margin:6px 0 0; font-size:14px; color:#767676; }
/* 담기 : 사진 우하단 44px 흰 원형. 래퍼(.box_cart)는 자리만 잡고 클릭은 안쪽 a 만 받는다
(공급중단 카드는 a 가 아예 안 그려지므로 빈 원이 생기지 않는다). */
.product_list_wrap.vcz .section_goodslist_best .box_cart{
position:absolute; top:0; right:10px; left:auto; bottom:auto;
margin:calc(100% - 54px) 0 0; padding:0; width:44px; height:44px;
pointer-events:none; z-index:3;
}
.product_list_wrap.vcz .section_goodslist_best .box_cart a{
pointer-events:auto; display:block; width:44px; height:44px; box-sizing:border-box;
border:1px solid #e6e6e6; border-radius:50%;
background-color:#fff; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d271e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.6' cy='20' r='1.4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:22px 22px;
box-shadow:0 2px 8px rgba(20,25,20,.18);
font-size:0; line-height:0; color:transparent; text-indent:-9999px; overflow:hidden;
transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.product_list_wrap.vcz .section_goodslist_best .box_cart a:hover,
.product_list_wrap.vcz .section_goodslist_best .box_cart a:active{
background-color:#eaf1e8; border-color:#3d6041; box-shadow:0 4px 12px rgba(20,25,20,.22);
}
.product_list_wrap.vcz .section_goodslist_best .box_cart a .icon{ display:none; }
} /* @media min-width:1024px */