/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [data-arrow="off"] .prev, [data-arrow="off"] .next {display:none !important;} [data-arrow="hover"] .prev, [data-arrow="hover"] .next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .prev, [data-arrow="hover"]:hover .next {opacity:1; pointer-events:auto;} [data-arrow-bg="on"] .prev, [data-arrow-bg="on"] .next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} [data-arrow-bg="off"] .prev, [data-arrow-bg="off"] .next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} /* 위젯 공용 — 위젯 제목(모바일) 크기 */ .ui.container.widget-title h3 {font-size:var(--w-title-size, calc(1.25rem * var(--w-title-scale, 1)));} .ui.container.widget-title p {font-size:calc(0.875rem * var(--w-title-scale, 1));} /* 앞뒤 버튼 모양 (위젯 설정 앞뒤 버튼 모양 = value9) 비우면 CSS 폴백 = 지금 디자인 그대로 */ .mobile-slide-banner .prev, .mobile-slide-banner .next {border-radius:var(--arrow-radius, 100%); text-align:center;} .normal-slide .swiper-button-next i, .normal-slide .swiper-button-prev i {font-size:1.125rem;} /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 처음 보여줄 배너가 랜덤이면 점 페이저를 CSS order 로 원래 순서에 놓는다. 테마가 flex 가 아니어도 order 가 먹게 한다 */ .mobile-slide-banner .normal-slide[data-start-offset]:not([data-start-offset="0"]) .swiper-pagination-bullets { display: flex; justify-content: center; flex-wrap: wrap; } /* 카테고리 아이콘 위젯 — 가로 스크롤 아이콘 목록 (모바일 메인 핫 카테고리 스타일) */ .category-icons { } .category-icons-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .category-icons-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .category-icons-scroll { cursor: grab; } .category-icons-scroll.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .category-icons-list { display: flex; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 10px 13px; list-style: none; } .category-icon-item { flex: 0 0 auto; /* 뷰포트 폭 비례(vw)로 커지되 상·하한(clamp) */ width: clamp(84px, calc(22 * var(--vw, 1vw)), 132px); text-align: center; } .category-icon-item a, .category-icon-item .banner-nolink { display: block; text-decoration: none; color: inherit; } .category-icon-thumb { display: block; width: 100%; aspect-ratio: 1; /* 정사각 */ height: auto; margin: 0 auto 7px; overflow: hidden; background: #f4f4f4; } .category-icons-scroll.round .category-icon-thumb { border-radius: 50%; } .category-icons-scroll.square .category-icon-thumb { border-radius: 12px; } .category-icon-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .category-icon-name { display: block; font-size: 13px; line-height: 1.3; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 상황별 AI 선물 추천 위젯 */ .occasion-finder { } /* 카드 박스 해제 — border·패딩 없이 일반 섹션처럼(좌우 13px 은 다른 위젯과 정렬 유지용) */ .occasion-finder .ogf-card { margin: 0 13px; padding: 0; /* background: #fff; */ } /* 타이틀 — .widget-title 규칙은 테마 mobile/common.css 에만 있어 PC 에서는 크기… */ .occasion-finder .widget-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.25rem * var(--w-title-scale, 1))); font-weight:600; color:#333;} .occasion-finder .widget-title p {margin:0; padding:3px 0 0 0; font-size:calc(0.875rem * var(--w-title-scale, 1)); color:#555;} /* 헤더 */ .occasion-finder .ogf-head { margin-bottom: 14px; } /* 타이틀 */ .occasion-finder .ogf-badge { display: inline-flex; align-items: center; gap: 4px; color: #333; font-size: 1.25rem; font-weight: 600; } .occasion-finder .ogf-badge i { font-size: 1.25rem; color: var(--point-color, #2464eb); } .occasion-finder .ogf-lead { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #222; letter-spacing: -0.01em; } .occasion-finder .ogf-lead b { color: var(--point-color, #2464eb); font-weight: 700; } /* 상황 칩 그리드 (2열) — 플랫 */ .occasion-finder .ogf-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .occasion-finder .ogf-chip { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px; border: 1px solid #e5e5e5; border-radius:var(--ogf-chip-radius, 8px); background: #fff; color: #333; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; } .occasion-finder .ogf-chip:active { background: #f6f6f6; } .occasion-finder .ogf-chip:hover { border-color: var(--point-color, #2464eb); } .occasion-finder .ogf-emoji { flex: 0 0 auto; font-size: 18px; line-height: 1; } .occasion-finder .ogf-label { flex: 1 1 auto; min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 상담 CTA (전폭) — 플랫 다크 */ .occasion-finder .ogf-ask { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 9px; padding: 12px 14px; border: 1px solid #222; border-radius:var(--ogf-ask-radius, 8px); background: #222; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; } .occasion-finder .ogf-ask i { font-size: 17px; } .occasion-finder .ogf-ask .ogf-arrow { margin-left: auto; font-size: 18px; } .occasion-finder .ogf-ask:active { background: #000; } /* 모바일 탭 상품목록 위젯 — 탭 네비/패널만 스타일 */ .mobile-tab-product { margin: 0 0 34px; } .mobile-tab-product .mtp-wrap { position: relative; } /* 가로스크롤 탭 네비 */ .mobile-tab-product .mtp-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #eee; margin: 0 0 16px; scrollbar-width: none; } .mobile-tab-product .mtp-tab-nav::-webkit-scrollbar { display: none; } .mobile-tab-product .mtp-tab-nav { cursor: grab; } .mobile-tab-product .mtp-tab-nav.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .mobile-tab-product .mtp-tab-nav-inner { display: inline-flex; gap: 7px; padding: 0 13px; white-space: nowrap; min-width: 100%; box-sizing: border-box; } .mobile-tab-product .mtp-tab { flex: 0 0 auto; max-width: 9em; /* 긴 탭 라벨(번역 시)은 … 말줄임 — 한 탭이 스크롤바를 독점하지 않게 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: none; padding: 11px 6px; font-size: 0.9375rem; line-height: 1.2; color: #999; font-weight: 500; position: relative; cursor: pointer; transition: color .15s; } .mobile-tab-product .mtp-tab.active { color: #111; font-weight: 700; } .mobile-tab-product .mtp-tab.active::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: #111; border-radius: 2px; } .mobile-tab-product .icon-mask { position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; margin-right: 4px; font-weight: 600; background-color: #999; -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .mobile-tab-product .mtp-tab.active .icon-mask { background-color: #111 !important; } /* 탭 패널 — active 만 표시 */ .mobile-tab-product .mtp-panel { display: none; } .mobile-tab-product .mtp-panel.active { display: block; animation: mtp-panel-fade 0.25s ease; /* 탭 전환(클릭·스와이프) 시 부드러운 피드백 */ } @keyframes mtp-panel-fade { from { opacity: 0.35; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mobile-tab-product .mtp-panel.active { animation: none; } } /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자르므로 여기에도 같은 값을 준다. */ .zw-mobile_tab_product ul.grid > li.item .thumbnail {overflow:hidden; border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-mobile_tab_product ul.grid > li.item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 위젯설정 > 테마변수 > 직각 */ /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 위젯 공용 — 상품이 없을 때 위젯이 납작해지지 않게 자리를 지킨다 */ /* 카드 한 줄 높이. 기본 테마 실측(PC 298px · 모바일 257px)에서 조금 낮춰 최소값으로 쓴다. */ :root {--zw-empty-slot-h:300px;} @media (max-width:768px) {:root {--zw-empty-slot-h:260px;}} /* 상품이 하나도 없어 목록을 아예 안 그릴 때 스킨이 대신 넣는 빈 상자 */ .zw-empty-slot {min-height:var(--zw-empty-slot-h);} /* 목록 상자는 그렸는데 안이 빈 경우. 탭 하나만 0건이거나 비동기로 채우기 전이다. */ /* :empty 는 태그 사이 줄바꿈까지 내용으로 세어 안 맞는다. 자식 요소 유무로 본다. */ [id^="widget-"] .product.list ul.grid:not(:has(> *)), [id^="widget-"] .product.list .swiper-wrapper:not(:has(> *)), [id^="widget-"] .mosaic-grid:not(:has(> *)), [id^="widget-"] ul.bp-items:not(:has(> *)) {min-height:var(--zw-empty-slot-h);} /* 모바일 상품 슬라이드 — 센터 확대 peek (Swiper v11) 가운데 카드만 scale(1)·선명… */ .choice-center.swiper { position: relative; /* 활성 카드 그림자가 위아래로 잘리지 않게 여백 확보(overflow:hidden 경계) */ padding: 6px 0 20px; overflow: hidden; } /* 공통 슬라이드 박스 */ .choice-center .swiper-slide { height: auto; box-sizing: border-box; } /* center · coverflow: 카드 폭 고정 — slidesPerView:auto 라 CSS 폭이 있어야… */ /* 폭은 위젯 상자 기준이다. 화면폭 기준으로 잡으면 박스 디자인의 좌우 여백을 줘도 카드 크기와 위치가 그대로라 여백이 안 먹은 것처럼 보인다. */ .choice-center.mode-center .swiper-slide, .choice-center.mode-coverflow .swiper-slide { width: min(74%, 300px); } /* center: 비활성 축소·흐림 → 활성만 확대·선명(스케일은 CSS 담당) */ .choice-center.mode-center .swiper-slide { transform: scale(0.84); opacity: 0.45; filter: saturate(0.85); transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease; } .choice-center.mode-center .swiper-slide-active { transform: scale(1); opacity: 1; filter: none; } .choice-center.mode-center .swiper-slide-active .thumbnail { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); } .choice-center.mode-center .swiper-slide-active .item.gs-style3 .thumbnail { box-shadow: none !important; } /* coverflow: 3D 변형은 Swiper 가 담당(transform 건드리지 않음) */ .choice-center.mode-coverflow .swiper-slide { opacity: 0.8; transition: opacity 0.35s ease; } .choice-center.mode-coverflow .swiper-slide-active { opacity: 1; } .choice-center.mode-coverflow .swiper-slide-active .thumbnail { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); } /* 루프 순간이동(loopFix) 중에는 강조 전환을 끈다 — 위젯 JS 가 그 한 프레임만… */ .choice-center.choice-nofx .swiper-slide {transition: none;} /* plain: 일반 나열 — 스케일/흐림 없음, 폭은 Swiper(slidesPerView)가 결정 */ .choice-center.mode-plain .swiper-slide { opacity: 1; filter: none; } /* 화살표 */ .choice-center .choice-prev, .choice-center .choice-next { position: absolute; top: 42%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius:var(--arrow-radius, 50%); background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: #333; z-index: 6; cursor: pointer; } .choice-center .choice-prev { left: 8px; } .choice-center .choice-next { right: 8px; } .choice-center .choice-prev.hide, .choice-center .choice-next.hide { display: none; } .choice-center .swiper-button-disabled { opacity: 0.35; pointer-events: none; } /* 페이지네이션(도트) — 슬라이더 아래 중앙 */ .choice-center .choice-pagination { position: static; width: 100%; margin-top: 12px; /* Swiper 가 넣는 left/transform 정렬을 무력화하고 일반 도트를 확실히 가운데로 */ left: auto !important; transform: none !important; text-align: center; } .choice-center .choice-pagination .swiper-pagination-bullet { display: inline-block; float: none; } .choice-center .swiper-pagination-bullet { width: 6px; height: 6px; background: #d4d4d4; opacity: 1; transition: width 0.25s ease, background 0.25s ease; } .choice-center .swiper-pagination-bullet-active { width: 16px; border-radius: 3px; background: var(--point-color,#000); /* 타이틀 강조색과 통일 */ } /* 뱃지 */ .choice-center .badge { position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 0.6875rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; color: #fff; } .choice-center .badge-discount { background: #e02020; } .choice-center .badge-new { background: #2563eb; } /* 전체보기 카드(마지막 슬라이드) */ .choice-center .slide-more-item { height: auto; } .choice-center .slide-more-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; aspect-ratio: 1; background: #f7f7f7; border-radius:var(--more-card-radius, 12px); text-decoration: none; color: #666; font-size: 0.8125rem; } .choice-center .slide-more-card i { font-size: 1.25rem; } /* 이미지 로딩 스켈레톤 */ .choice-center .thumbnail { background: #f0f0f0; } .choice-center .thumbnail::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 50%, #f0f0f0 75%); background-size: 200% 100%; animation: choice-skeleton 1.4s ease-in-out infinite; } .choice-center .thumbnail.is-loaded::before { display: none; } @keyframes choice-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .choice-center .thumbnail::before { animation: none; } .choice-center.mode-center .swiper-slide { transition: none; } } /* Swiper 미로드 폴백: 가로 스크롤 flex (페이지 안전) */ .choice-center.choice-no-swiper { overflow-x: auto; } .choice-center.choice-no-swiper .swiper-wrapper { display: flex; gap: 12px; padding: 0 13px; } .choice-center.choice-no-swiper .swiper-slide { transform: none; opacity: 1; filter: none; flex: 0 0 auto; } [data-arrow="off"] .choice-prev, [data-arrow="off"] .choice-next {display:none !important;} [data-arrow="hover"] .choice-prev, [data-arrow="hover"] .choice-next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .choice-prev, [data-arrow="hover"]:hover .choice-next {opacity:1; pointer-events:auto;} [data-arrow-bg="off"] .choice-prev, [data-arrow-bg="off"] .choice-next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} [data-arrow-bg="on"] .choice-prev, [data-arrow-bg="on"] .choice-next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 특가(기간한정 단일가) — 공통 상품카드와 같은 구성 */ /* .choice-center .price-area li.price {display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 6px;} .choice-center .price-area li.price .special-sale-badge { display:inline-block; padding:1px 6px; border-radius:999px; background:var(--point-color); color:#fff; font-size:0.688rem; font-weight:700; font-style:normal; line-height:1.4; } .choice-center .price-area li.price .deal-origin, .choice-center .price-area li.price .deal-origin .money, .choice-center .price-area li.price .deal-origin .prefix, .choice-center .price-area li.price .deal-origin .suffix { font-size:0.75rem; font-weight:400; color:#bdbdbd; } .choice-center .price-area li.price .deal-origin {text-decoration:line-through;} .choice-center .price-area li.deal-remain { margin-top:3px; font-size:0.75rem; color:#e20000; font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; } .choice-center .price-area li.deal-remain .ended {color:#999; font-weight:400;} */ /* 상품 썸네일 모서리 (위젯 설정). 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자른다. */ .zw-mobile_slider_product .item .thumbnail {overflow:hidden; border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-mobile_slider_product .item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 모바일 인기 랭킹 위젯 — 큰 순위 숫자 + 세로 리스트 (자체 완결) */ .rank-list-widget { padding: 0 13px; display: flex; flex-direction: column; gap: 14px; } .rank-row { display: flex; align-items: center; gap: 12px; } /* 순위 숫자 — 크고 존재감 있게 */ .rank-row .rank-badge { flex: 0 0 auto; width: 26px; text-align: center; font-size: 1.5rem; font-weight: 800; font-style: italic; line-height: 1; color: #c7ccd1; /* 4위 이하 회색 */ font-family: 'Pretendard', system-ui, sans-serif; } /* TOP 3 강조 */ .rank-row.rank-top-1 .rank-badge { color: #ff4d4f; } .rank-row.rank-top-2 .rank-badge { color: #ff922b; } .rank-row.rank-top-3 .rank-badge { color: #3ec4ba; } /* 썸네일 — 정사각 */ .rank-row .rank-thumb { flex: 0 0 auto; width: clamp(72px, calc(20 * var(--vw, 1vw)), 150px); aspect-ratio: 1; height: auto; border-radius:var(--mrp-thumb-radius, 12px); overflow: hidden; background: #f5f5f5; display: block; position: relative; } .rank-row .rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rank-row .rank-thumb .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #c4c4c4; font-size: 1.25rem; } /* 본문 */ .rank-row .rank-body { flex: 1 1 auto; min-width: 0; } .rank-row .rank-seller { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; color: #8a9099; text-decoration: none; margin-bottom: 2px; } .rank-row .rank-seller i { font-size: 0.8125rem; } .rank-row .rank-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; line-height: 1.35; color: #222; text-decoration: none; } .rank-row .rank-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .rank-row .price-area { margin: 0; padding: 0; list-style: none; } .rank-row .rank-price { font-size: 0.95rem; font-weight: 700; color: #111; } /* 위시 버튼 */ .rank-row .btn-wishlist { flex: 0 0 auto; font-size: 1.25rem; color: #c4c4c4; text-decoration: none; line-height: 1; } .rank-row .btn-wishlist .icon-active { color: #ff4d6d; } /* 전체보기 */ .rank-more { text-align: center; margin-top: 16px; padding: 0 13px; } .rank-more a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #666; text-decoration: none; padding: 8px 18px; border: 1px solid #e5e7eb; border-radius:var(--mrp-more-radius, 999px); } /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 특가 — 순위줄은 위시버튼과 한 줄이라 배지·특가금액·정가만 .rank-row .rank-price {display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 5px;} .rank-row .rank-price .special-sale-badge { display:inline-block; padding:1px 6px; border-radius:999px; background:var(--point-color); color:#fff; font-size:0.688rem; font-weight:700; font-style:normal; line-height:1.4; } .rank-row .rank-price .deal-origin, .rank-row .rank-price .deal-origin .money, .rank-row .rank-price .deal-origin .prefix, .rank-row .rank-price .deal-origin .suffix { font-size:0.75rem; font-weight:400; color:#bdbdbd; } .rank-row .rank-price .deal-origin {text-decoration:line-through;} */ /* ===== 상품카드 특가 표기 (공통 import_product_items) ===== /* 할인 상품일 때만 .price를 inline-flex로 — 배지(왼쪽) + 가격 스택(오른쪽) 배치. inline-flex라 부모의 text-align(왼쪽/가운데/오른쪽)은 그대로 따르면서, 내부만 가로배치된다. */ .rank-list-widget .rank-row .rank-bottom li.price:has(.special-sale-badge) { display: inline-flex; align-items: center; gap: 8px; } .rank-list-widget .rank-row .rank-bottom li.price .special-sale-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-right: 0; /* gap으로 간격 처리하니 기존 margin 제거 */ padding: 5px 5px; border-radius: 5px; background: var(--point-special-sale-color); color: #fff; font-size: 1rem; /* 0.75rem → 더 크게 */ font-weight: 700; font-style: normal; line-height: 1; } /* 정가+할인가를 세로로 쌓는 묶음 */ .rank-list-widget .rank-row .rank-bottom li.price .special-sale-values { display: flex; flex-direction: column; gap: 0; } .rank-list-widget .rank-row .rank-bottom li.price .deal-origin { margin-left: 0; /* gap으로 대체하니 기존 margin 제거 */ font-size: 0.8125em; font-weight: 400; color: #9f9f9f; line-height:1; text-decoration: line-through; } .rank-list-widget .rank-row .rank-bottom li.price .deal-origin .money, .rank-list-widget .rank-row .rank-bottom li.price .deal-origin .prefix, .rank-list-widget .rank-row .rank-bottom li.price .deal-origin .suffix { font-size: 0.8125rem; font-weight: inherit; color: inherit; } .rank-list-widget .rank-row .rank-bottom li.price .special-sale-price { font-weight: 700; } /* 남은시간(할인기간)은 그대로 별도 li — 기존처럼 그 아래 줄에 자연스럽게 위치 */ .rank-list-widget .rank-row .rank-bottom li.deal-remain { margin-top: 4px; margin-bottom:0; font-size: 0.8125rem; color: var(--point-special-sale-color); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .rank-list-widget .rank-row .rank-bottom li.deal-remain:before {content:''; display:block; clear:both;} .rank-list-widget .rank-row .rank-bottom li.deal-remain .ended { color: #999; font-weight: 400; } /* 모바일 매거진 모자이크 위젯 — 대표 1개(2×2) + 비대칭 소형 그리드 (자체 완결) */ .mosaic-grid { margin: 0 13px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; /* 행 높이는 소형 셀의 aspect-ratio(=열 폭)로 결정 */ grid-auto-flow: dense; /* 대표 카드 주변 빈칸을 소형이 채움 */ gap: 6px; } /* 대표 카드: 6개마다 하나씩 2×2 로 크게 (첫 상품 포함) */ .mosaic-grid .mosaic-item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; /* 대표는 2×2 행을 채워서 크기 결정 → 자체 aspect-ratio 해제(순환 사이징 방지) */ } .mosaic-item { position: relative; display: block; aspect-ratio: 1; /* 소형 셀 = 정사각(높이=열 폭) → 이 높이가 grid 행 높이를 정함 */ overflow: hidden; border-radius:var(--mmp-tile-radius, 12px); background: #f2f3f5; text-decoration: none; } .mosaic-thumb { position: absolute; inset: 0; } .mosaic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .mosaic-item:active .mosaic-thumb img { transform: scale(1.04); } .mosaic-thumb .no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #c4c4c4; font-size: 1.5rem; } /* 이미지 위 오버레이(하단 그라데이션 + 상품명·가격) */ .mosaic-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 9px; background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 60%, transparent 100%); color: #fff; display: flex; flex-direction: column; gap: 2px; } .mosaic-overlay .mosaic-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.75rem; line-height: 1.3; opacity: 0.95; } .mosaic-overlay .mosaic-price { font-size: 0.875rem; font-weight: 700; line-height: 1.2; } /* 대표 카드는 글자 조금 크게 */ .mosaic-grid .mosaic-item:nth-child(6n + 1) .mosaic-overlay { padding: 26px 12px 12px; } .mosaic-grid .mosaic-item:nth-child(6n + 1) .mosaic-name { -webkit-line-clamp: 2; font-size: 0.875rem; } .mosaic-grid .mosaic-item:nth-child(6n + 1) .mosaic-price { font-size: 1.0625rem; } /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ /* 특가 — 어두운 오버레이 위라 배지는 포인트컬러, 금액은 흰 글자 그대로 */ .mosaic-overlay .mosaic-price .special-sale-badge { display:inline-block; margin-right:4px; padding:2px 5px; border-radius:6px; background:var(--point-special-sale-color); color:#fff; font-size:0.8125em; font-weight:700; font-style:normal; line-height:1.5; vertical-align:middle; } .mosaic-overlay .mosaic-price .special-sale-price {font-size:inherit; font-weight:inherit; color:inherit;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자르므로 여기에도 같은 값을 준다. */ .zw-mobile_basic_product ul.grid > li.item .thumbnail {overflow:hidden; border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-mobile_basic_product ul.grid > li.item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 위젯설정 > 테마변수 > 직각 */ /* 타이틀 — 값은 테마 common.css 의 .widget-title 과 동일하다(무회귀) */ @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; }