@charset "utf-8"; /* 모바일 전체 카테고리 레이어 — 3단 전용 (대분류 > 중분류 > 소분류) 2단 정본(common.css 의… */ /* 중분류 묶음 */ .cat-sub-list-3depth .cat-grp { display: block; padding: 0; border-bottom: 1px solid #f2f2f2; } .cat-sub-list-3depth .cat-grp:last-child { border-bottom: 0; } .cat-sub-list-3depth .cat-grp-head { display: flex; align-items: center; gap: 6px; padding: 13px 14px 9px; font-size: 0.9375rem; font-weight: 700; color: #222; } .cat-sub-list-3depth .cat-grp-icon { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; border-radius: 4px; } .cat-sub-list-3depth .cat-grp-name { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cat-sub-list-3depth .cat-grp-head > i { flex: 0 0 auto; font-size: 1.125rem; color: #c4c4c4; } .cat-sub-list-3depth .cat-grp-name .ri-star-fill { padding-left: 4px; font-size: 0.8125rem; color: #faa828; } /* 소분류 칩 — 두 줄까지 자연스럽게 흐르게 */ .cat-sub-list-3depth .cat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 13px; /* 중분류 머리의 구분선(정본 li a border-bottom 상속) 밑에 칩이 딱 붙지 않게 위 여백 */ } .cat-sub-list-3depth .cat-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 7px 11px; font-size: 0.8125rem; font-weight: 500; color: #555; background: #f6f6f6; border-radius: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cat-sub-list-3depth .cat-chip:active { background: #ececec; color: #111; } .cat-sub-list-3depth .cat-chip-icon { flex: 0 0 auto; width: 14px; height: 14px; object-fit: contain; border-radius: 3px; } .cat-sub-list-3depth .cat-chip .ri-star-fill { font-size: 0.75rem; color: #faa828; } /* 전체 ○○ 줄은 2단 정본 스타일을 그대로 쓰되, 3단에서는 묶음과 구분되게 아래 경계를 준다 */ .cat-sub-list-3depth .cat-sub-all { border-bottom: 1px solid #eee; } /* 카테고리 상품 광고 — 전체 ○○ 밑, PC 처럼 이미지 타일 나열(한 줄 3개, 넘치면 다음 줄) */ .cat-sub-list-3depth .cat-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; border-bottom: 1px solid #f2f2f2; } .cat-sub-list-3depth .cat-ads .cat-ad { display: block; min-width: 0; padding: 0; border-bottom: 0; } /* 노출 개수 상한(data-ad-show) 밖으로 밀린 광고 — JS 가 hidden 을 건다 */ .cat-sub-list-3depth .cat-ads .cat-ad[hidden] { display: none; } .cat-sub-list-3depth .cat-ads .cat-ad-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #eee; border-radius: 6px; } /* 3차가 없는 중분류 — 머리(a)의 상속 border-bottom 과 li.cat-grp 의… */ .cat-sub-list-3depth .cat-grp-head:last-child { border-bottom: 0; }