/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [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;} /* 멀티 메인 비주얼 배너 (multi_main_visual_banner) 여러 장이 한 화면에 흐르는 가로… */ .multi-main-visual {position:relative; width:100%;} .multi-main-visual .mmv-slider { position:relative; width:100%; /* Swiper 의 slideSize 공식과 같은 식 — 초기화 전 폭 선점·중앙정렬 여백이 이 하나를 공유한다 */ --mmv-slide-w:calc((var(--mmv-base, 100%) - (var(--mmv-gap, 20px) * (var(--mmv-per, 3) - 1))) / var(--mmv-per, 3)); } .multi-main-visual .swiper-container {width:100%;} .multi-main-visual ul.swiper-wrapper {height:auto; margin:0; padding:0; font-size:0; list-style:none;} .multi-main-visual ul.swiper-wrapper > li.swiper-slide {height:auto; margin:0; padding:0; background-color:#fff;} .multi-main-visual ul.swiper-wrapper > li.swiper-slide a, .multi-main-visual ul.swiper-wrapper > li.swiper-slide .banner-nolink {display:block;} .multi-main-visual ul.swiper-wrapper > li.swiper-slide img {display:block; width:100%; height:auto; border:0;} /* 비율 지정 시 로드 전에도 높이가 잡혀 화면이 안 밀린다(잘리지 않게 cover 대신 지정비율 그대로) */ .multi-main-visual .mmv-slider[style*="--mmv-ratio"] ul.swiper-wrapper > li.swiper-slide img {height:100%; aspect-ratio:var(--mmv-ratio); object-fit:cover;} /* 초기화 전 폭 선점 — swiper 최종폭과 같은 값을 미리 깔아 로딩 튐 제거(slider_product 와… */ .multi-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.swiper-slide { box-sizing:border-box; float:none; width:var(--mmv-slide-w); margin-right:var(--mmv-gap, 20px); } /* 중앙 정렬(data-align=center)일 때는 초기화 전에도 첫 배너를 화면 중앙에 놓는다 */ .multi-main-visual .mmv-slider[data-align="center"] .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.swiper-slide:first-child { /* 선복제(--mmv-pre)가 앞에 깔린 만큼 왼쪽으로 더 당긴다 → 첫 진짜 배너가 정확히 화면 중앙에 온다 */ margin-left:calc((100% - var(--mmv-slide-w)) / 2 - (var(--mmv-pre, 0) * (var(--mmv-slide-w) + var(--mmv-gap, 20px)))); } /* 하단 조작부 ── */ .multi-main-visual .mmv-controls {display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px;} /* 진행바 — Swiper progressbar 타입 */ .multi-main-visual .mmv-progress {position:relative; width:var(--mmv-bar, 800px); max-width:60vw; height:3px; background:#e3e3e3; overflow:hidden;} .multi-main-visual .mmv-progress .swiper-pagination-progressbar-fill {position:absolute; left:0; top:0; width:100%; height:100%; background:#222; transform-origin:left top;} .multi-main-visual .mmv-btns {display:flex; align-items:center; gap:10px;} .multi-main-visual .mmv-btns button { /* background 단축속성을 쓰면 안 된다 — 이 규칙(0,2,1)이 아래… */ width:26px; height:26px; padding:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:9px 18px; cursor:pointer; opacity:0.8; } .multi-main-visual .mmv-btns button:hover {opacity:1;} /* 이전/다음 — 정본 셰브론 SVG 에서 흰 원만 뺀 형태(띠 슬라이드 배너와 같은 처리) */ .multi-main-visual .mmv-prev {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .multi-main-visual .mmv-next {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .multi-main-visual .mmv-sep {width:1px; height:11px; background:#ccc;} /* 재생/일시정지 — 재생중이면 ❚❚, 멈추면 ▶ (CSS 만으로 모양 전환) */ .multi-main-visual .mmv-toggle {position:relative; margin-left:4px;} .multi-main-visual .mmv-toggle i {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block;} .multi-main-visual .mmv-toggle.is-playing i {width:9px; height:12px; border-left:3px solid #222; border-right:3px solid #222;} .multi-main-visual .mmv-toggle:not(.is-playing) i {width:0; height:0; border-left:11px solid #222; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:2px;} /* 배너 모서리 라운드 (위젯 설정 배너 모서리 라운드 = value5) 미지정이면 0 = 각진 모서리 */ .multi-main-visual ul.swiper-wrapper > li.swiper-slide, .multi-main-visual ul.swiper-wrapper > li.swiper-slide img {border-radius:var(--mmv-radius, 0);} .multi-main-visual ul.swiper-wrapper > li.swiper-slide {overflow:hidden;} /* 양옆(비활성) 배너 어둡게 (위젯 설정 양옆 배너 어둡게 = value4) 가운데… */ .multi-main-visual .mmv-slider:not([data-dim="0"]) ul.swiper-wrapper > li.swiper-slide {position:relative;} .multi-main-visual .mmv-slider:not([data-dim="0"]) ul.swiper-wrapper > li.swiper-slide:after { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0, 0, 0, var(--mmv-dim, 0.45)); border-radius:var(--mmv-radius, 0); transition:opacity .35s ease; pointer-events:none; } .multi-main-visual .mmv-slider:not([data-dim="0"]) ul.swiper-wrapper > li.swiper-slide-active:after {opacity:0;} /* 루프 순간이동(loopFix) 중에는 어둡기 전환을 끈다 — 위젯 JS 가 그 한 프레임만 .mmv-nofx… */ .multi-main-visual .mmv-slider.mmv-nofx ul.swiper-wrapper > li.swiper-slide:after {transition:none;} /* 노출개수 3 이상(data-dim-keep=3): 가운데 3개 = 이전·활성·다음 을 밝게 → 양끝 잘린 것만… */ .multi-main-visual .mmv-slider[data-dim-keep="3"]:not([data-dim="0"]) ul.swiper-wrapper > li.swiper-slide-prev:after, .multi-main-visual .mmv-slider[data-dim-keep="3"]:not([data-dim="0"]) ul.swiper-wrapper > li.swiper-slide-next:after {opacity:0;} /* 선복제 슬라이드 — 초기화 전에만 존재한다(위젯 JS 가 제거) */ .multi-main-visual ul.swiper-wrapper > li.mmv-preclone .link {display:block;} [data-arrow="off"] .mmv-prev, [data-arrow="off"] .mmv-next {display:none !important;} [data-arrow="hover"] .mmv-prev, [data-arrow="hover"] .mmv-next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .mmv-prev, [data-arrow="hover"]:hover .mmv-next {opacity:1; pointer-events:auto;} /* 앞뒤 버튼 모양 (위젯 설정 앞뒤 버튼 모양 = value9) 비우면 CSS 폴백 = 지금 디자인 그대로 */ .multi-main-visual .mmv-btns button {border-radius:var(--arrow-radius, 0);} [data-arrow-bg="off"] .mmv-prev, [data-arrow-bg="off"] .mmv-next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} [data-arrow-bg="on"] .mmv-prev, [data-arrow-bg="on"] .mmv-next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} /* 위젯 공용 — Swiper 안에서 위로 뜨는 호버 효과가 잘리는 것을 막는다 */ .wfx-lift .swiper-container { padding:var(--wfx-lift, 16px) var(--wfx-lift-x, var(--wfx-lift, 16px)); margin:calc(var(--wfx-lift, 16px) * -1) calc(var(--wfx-lift-x, var(--wfx-lift, 16px)) * -1); } /* 타일 아이콘 배너 (icon_tile_banner) 라운드 사각 타일 + 아이콘, 그 아래 배너 제목 */ .icon-tile-banner {position:relative; width:100%;} .icon-tile-banner .itb-inner { box-sizing:border-box; max-width:var(--itb-body, 1200px); margin:0 auto; --itb-slide-w:calc((100% - (var(--itb-gap, 20px) * (var(--itb-per, 9) - 1))) / var(--itb-per, 9)); } /* wfx-lift-x = 호버 그림자가 잘리지 않게 .swiper-container 에 주는 좌우… */ .icon-tile-banner .itb-slider {position:relative; --wfx-lift-x:min(16px, var(--itb-gap, 20px));} /* 타이틀/간략설명 타이포는 다른 배너 위젯(.icon-banner .main-title)과 동일 */ .icon-tile-banner .main-title {display:flex; margin-bottom:1rem;} .icon-tile-banner .main-title.title-left {justify-content:flex-start;} .icon-tile-banner .main-title.title-right {justify-content:flex-end;} .icon-tile-banner .main-title.title-center {justify-content:center;} .icon-tile-banner .main-title.title-left .title-group {text-align:left;} .icon-tile-banner .main-title.title-right .title-group {text-align:right;} .icon-tile-banner .main-title.title-center .title-group {text-align:center;} .icon-tile-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .icon-tile-banner .main-title h3 span {color:var(--point-color);} .icon-tile-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 한 칸 ── */ .icon-tile-banner ul.swiper-wrapper {margin:0; padding:0; list-style:none;} .icon-tile-banner li.itb-item {height:auto; margin:0; padding:0;} .icon-tile-banner li.itb-item > a, .icon-tile-banner li.itb-item > .banner-nolink {display:block; text-decoration:none; color:inherit;} /* 타일 — 정사각 */ .icon-tile-banner .itb-box { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; overflow:hidden; background-color:#f5f5f5; border-radius:var(--itb-radius, 24px); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* 아이콘 — 크기 미지정이면 타일의 절반(칸이 커져도 비율이 유지된다) */ .icon-tile-banner .itb-box img { display:block; width:var(--itb-icon, 50%); height:var(--itb-icon, 50%); object-fit:var(--itb-fit, contain); border:0; transition:transform .2s ease; } .icon-tile-banner .itb-label { display:block; margin-top:10px; text-align:center; font-size:0.875rem; line-height:1.35; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s ease; } /* 마우스오버 효과 (위젯 설정 마우스오버 효과 = value3) itb-fx-none 은 아무 규칙도 안 붙는다 */ .icon-tile-banner .itb-fx-lift li.itb-item > a:hover .itb-box { background-color:#fff; box-shadow:0 6px 18px rgba(0, 0, 0, 0.10); transform:translateY(-3px); } .icon-tile-banner .itb-fx-zoom li.itb-item > a:hover .itb-box img {transform:scale(1.14);} .icon-tile-banner .itb-fx-lift li.itb-item > a:hover .itb-label, .icon-tile-banner .itb-fx-zoom li.itb-item > a:hover .itb-label {color:#111;} /* 초기화 전 폭 선점 Swiper 최종폭과 같은 값을 미리 깔아 로딩 튐 제거 */ .icon-tile-banner .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.itb-item { box-sizing:border-box; flex:0 0 auto; width:var(--itb-slide-w); margin-right:var(--itb-gap, 20px); } .icon-tile-banner .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.itb-item:last-child {margin-right:0;} /* 배너가 한 줄 개수보다 적으면 가운데로 모은다(왼쪽에 몰려 허전해 보이지 않게) */ .icon-tile-banner .itb-slider.is-static .swiper-wrapper {justify-content:center;} /* 좌우 화살표 정본 화살표(.normal-slide .prev/.next, initialize.css)와 같은… */ .icon-tile-banner .itb-slider .prev, .icon-tile-banner .itb-slider .next { position:absolute; z-index:2; top:50%; transform:translateY(calc(-50% - 14px)); margin:0; padding:10px; width:40px; height:40px; border-radius:var(--arrow-radius, 100%); background-repeat:no-repeat; background-size:10px 20px; background-color:rgba(255, 255, 255, 0.9); box-shadow:1px 2px 2px rgba(0, 0, 0, 0.2); text-indent:-9999px; outline:none; cursor:pointer; } .icon-tile-banner .itb-slider .prev {left:-14px; background-position:14px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .icon-tile-banner .itb-slider .next {right:-14px; background-position:16px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .icon-tile-banner .itb-slider .prev:hover, .icon-tile-banner .itb-slider .next:hover {background-color:#fff;} /* 모션 최소화 선호 사용자 — 호버 효과 전환을 끈다 */ @media (prefers-reduced-motion: reduce) { .icon-tile-banner .itb-box, .icon-tile-banner .itb-box img, .icon-tile-banner .itb-label {transition:none;} } /* 뱃지: 슬라이드 영역이 잘리지 않게 윗 여백을 확보한다 */ .zw-icon_tile_banner .itb-slider.has-badge .itb-item {position:relative; padding-top:30px;} .zw-icon_tile_banner .itb-badge {position:absolute; top:0; left:50%; z-index:2; padding:3px 12px; border-radius:6px; background:var(--point-color); font-size:0.75rem; font-weight:800; color:#fff; white-space:nowrap; transform:translateX(-50%);} .zw-icon_tile_banner .itb-badge:after {content:''; position:absolute; left:50%; bottom:-5px; margin-left:-5px; border:5px solid transparent; border-bottom:0; border-top-color:var(--point-color);} /* 위젯 공용 — 상품 슬라이드 초기화 전 레이아웃 */ .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper { margin-left: 0 !important; /* 정본 ul.grid 의 -2rem 거터 제거(= .normal-slide.on 과 동일) */ } .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.item { flex-shrink: 0; padding-left: 0 !important; /* 정본 li 의 2rem 거터 제거(= .normal-slide.on 과 동일) */ width: calc((100% - (var(--slide-gap, 0px) * (var(--slide-spv, 4) - 1))) / var(--slide-spv, 4)) !important; /* !important 필수 — 정본 `.product.list.thumb ul.grid li.item… */ margin-right: var(--slide-gap, 0px) !important; } .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.item:last-child { margin-right: 0 !important; } .normal-slide {} .normal-slide:after {content: ''; display:block; clear:both; height:1px;} /* 초기화 전 레이아웃(FOUC) 규칙은 _shared/assets/css/slide_preinit.css 로… */ .normal-slide .main-title {display:flex;} .normal-slide .main-title.title-left {justify-content:flex-start;} .normal-slide .main-title.title-right {justify-content:flex-end;} .normal-slide .main-title.title-center {justify-content:center;} .normal-slide .main-title.title-left .title-group {text-align:left;} .normal-slide .main-title.title-right .title-group {text-align:right;} .normal-slide .main-title.title-center .title-group {text-align:center;} .normal-slide .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .normal-slide .main-title h3 span {color:var(--point-color);} .normal-slide .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .normal-slide .pager span.swiper-pagination-bullet-active {background:var(--point-color,#000);} .normal-slide .prev { position:absolute; z-index:1; top:50%; left:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:var(--arrow-radius, 100%); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 14px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .next { position:absolute; z-index:1; top:50%; right:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 16px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .prev:hover, .normal-slide .next:hover {background-color:rgba(255,255,255,1.0);} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-slider_product ul.grid > li.item .thumbnail a.link… */ /* 위젯 공용 — 상품이 없을 때 위젯이 납작해지지 않게 자리를 지킨다 */ /* 카드 한 줄 높이. 기본 테마 실측(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);} .slide-banner {} .slide-banner .main-title {display:flex; margin-bottom:40px; } .slide-banner .main-title.title-left {justify-content:flex-start;} .slide-banner .main-title.title-right {justify-content:flex-end;} .slide-banner .main-title.title-center {justify-content:center;} .slide-banner .main-title.title-left .title-group {text-align:left;} .slide-banner .main-title.title-right .title-group {text-align:right;} .slide-banner .main-title.title-center .title-group {text-align:center;} .slide-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(2.1428rem * var(--w-title-scale, 1))); font-weight:700; color:#333;} .slide-banner .main-title h3 span {color:var(--point-color);} .slide-banner .main-title h3:after {content:''; display:block; width:30px; height:2px; margin:20px auto; background:#000;} .slide-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .slide-banner .main-title {display:flex;} .slide-banner .normal-slide ul.swiper-wrapper {height:auto; margin:0; padding:0; font-size:0; list-style:none; } .slide-banner .normal-slide ul li.swiper-slide {position:relative; display:block; width:100%; height:auto !important; margin:0; padding:0; text-align:center; background-color:#fff !important;} /* 슬라이드 링크·이미지를 블록으로 — 인라인이면 baseline 아래에 여백이 생겨 이미지 밑에 흰 띠가… */ .slide-banner .normal-slide ul li.swiper-slide > a, .slide-banner .normal-slide ul li.swiper-slide > .banner-nolink {display:block; line-height:0;} .slide-banner .normal-slide ul li.swiper-slide img {display:block; width:100%; height:auto;} /* 하단 점(페이저) 위치 정본(.normal-slide .pager)은 position:absolute 라 두… */ .slide-banner .normal-slide .pager {position:static; margin-top:16px;} /* 배너 모서리 라운드 (위젯 설정 배너 모서리 라운드 = value3) sb-radius 는 위젯이… */ .slide-banner .normal-slide[data-round="view"] .swiper-container { border-radius:var(--sb-radius, 0); overflow:hidden; /* 사파리 일부 버전은 transform 이 걸린 자식(swiper-wrapper)을 border-radius 로… */ -webkit-mask-image:-webkit-radial-gradient(#fff, #000); } .slide-banner .normal-slide[data-round="slide"] ul li.swiper-slide {border-radius:var(--sb-radius, 0); overflow:hidden;} .slide-banner .normal-slide[data-round="slide"] ul li.swiper-slide img {border-radius:var(--sb-radius, 0);} /* 좌우 화살표 세로 위치 정본(.normal-slide .prev/.next, initialize.css)은… */ .slide-banner .normal-slide .prev, .slide-banner .normal-slide .next {top:50%; margin-top:0; transform:translateY(-50%);} /* 전체보기(+) 버튼 + 전체 배너 레이어 (value2=more) */ .slide-banner .normal-slide {position:relative;} .slide-banner .banner-more-btn {position:absolute; right:12px; bottom:12px; z-index:5; width:34px; height:34px; padding:0; border:0; border-radius:var(--more-btn-radius, 50%); background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:34px; text-align:center; cursor:pointer;} .slide-banner .banner-more-btn:hover {background:rgba(0,0,0,.75);} body.banner-more-open {overflow:hidden;} .banner-more-layer {display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.6);} .banner-more-layer.open {display:block;} .banner-more-layer .banner-more-inner {position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; max-height:85%; background:#fff; border-radius:16px 16px 0 0;} .banner-more-layer .banner-more-head {flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee;} .banner-more-layer .banner-more-title {font-size:15px; font-weight:700; color:#333;} .banner-more-layer .banner-more-close {padding:0; border:0; background:none; font-size:26px; line-height:1; color:#333; cursor:pointer;} .banner-more-layer .banner-more-list {flex:1 1 auto; margin:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); overflow-y:auto; list-style:none;} .banner-more-layer .banner-more-list li {margin-bottom:12px;} .banner-more-layer .banner-more-list li:last-child {margin-bottom:0;} .banner-more-layer .banner-more-list a, .banner-more-layer .banner-more-list .banner-nolink {display:block; text-decoration:none; color:inherit;} .banner-more-layer .banner-more-list img {width:100%; display:block; border-radius:8px;} .banner-more-layer .banner-more-caption {display:block; margin-top:5px; font-size:13px; color:#555;} /* 앞뒤 버튼 모양 (위젯 설정 앞뒤 버튼 모양 = value9) 비우면 CSS 폴백 = 지금 디자인 그대로 */ .slide-banner .normal-slide .prev, .slide-banner .normal-slide .next {border-radius:var(--arrow-radius, 100%);} /* 좁은 칸에서의 화살표 크기 분할 레이아웃(split_row) 칸에 넣으면 배너는 칸 폭까지 줄어드는데 화살표는… */ .zw-slider_banner .normal-slide .swiper-container { container-type: inline-size; container-name: sbslide; } @container sbslide (max-width: 560px) { .zw-slider_banner .normal-slide .prev, .zw-slider_banner .normal-slide .next { width:34px; height:34px; padding:8px; background-size:9px 18px; background-position:center; } } @container sbslide (max-width: 380px) { .zw-slider_banner .normal-slide .prev, .zw-slider_banner .normal-slide .next { width:28px; height:28px; padding:6px; background-size:8px 16px; background-position:center; } } /* 일반 배너 (normal_banner) 배너그룹 이미지를 CSS Grid 격자로 나열 */ /* 타이틀/간략설명 타이포는 스페셜 배너(.special-design-banner .main-title)와… */ .normal-banner .main-title {display:flex; margin-bottom:1rem;} .normal-banner .main-title.title-left {justify-content:flex-start;} .normal-banner .main-title.title-right {justify-content:flex-end;} .normal-banner .main-title.title-center {justify-content:center;} .normal-banner .main-title.title-left .title-group {text-align:left;} .normal-banner .main-title.title-right .title-group {text-align:right;} .normal-banner .main-title.title-center .title-group {text-align:center;} .normal-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .normal-banner .main-title h3 span {color:var(--point-color);} .normal-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 격자 ── */ .normal-banner .nb-grid { display:grid; grid-template-columns:repeat(var(--nb-cols, 4), 1fr); column-gap:var(--nb-col-gap, 20px); row-gap:var(--nb-row-gap, 20px); } /* 히어로 — 명시 배치 */ .normal-banner .nb-grid .nb-hero { grid-column:var(--nb-hero-col, 1) / span var(--nb-hero-cols, 1); grid-row:1 / span var(--nb-hero-rows, 2); } /* 한 칸 = 통이미지 ── */ .normal-banner .nb-item {display:block; text-decoration:none; border-radius:var(--nb-radius, 0); overflow:hidden;} .normal-banner .nb-item img {display:block; width:100%; height:auto; border:0; border-radius:var(--nb-radius, 0);} /* 비율을 지정하면 이미지 로드 전에도 칸 높이가 잡힌다 */ .normal-banner .nb-grid[style*="--nb-ratio"] .nb-item img {height:100%; aspect-ratio:var(--nb-ratio); object-fit:contain;} /* 히어로는 여러 줄을 차지하므로 칸 높이에 맞춰 늘어난다(비율 지정 여부와 무관). */ .normal-banner .nb-grid .nb-hero {display:block;} .normal-banner .nb-grid .nb-hero img {width:100%; height:100%; object-fit:contain; aspect-ratio:auto;} /* 분할 레이아웃 위젯 — 가로 칸 분할 컨테이너 */ /* 위젯 자체는 본문 폭에 맞춘다 — 다른 위젯(.container)과 좌우가 나란히 서야 한다 */ .widget-split-row { max-width: var(--container-width, 1200px); margin-left: auto; margin-right: auto; } .widget-split-row .split-row-inner { display: flex; flex-wrap: wrap; align-items: stretch; } /* 기본은 균등분할(flex:1) */ .widget-split-row .split-col { box-sizing: border-box; flex: 1 1 0; min-width: 0; } /* 칸 안에 들어간 자식 위젯은 칸 폭을 따라야 한다 */ .widget-split-row .split-col .container { width: 100%; } .widget-split-row .split-row-title h3 { margin: 0 0 10px; /* 크기 명시가 없어 브라우저 기본(h3=1.17em)을 타던 자리 */ font-size: var(--w-title-size, calc(1.17em * var(--w-title-scale, 1))); } .widget-split-row .split-row-title.title-center { text-align: center; } .widget-split-row .split-row-title.title-right { text-align: right; } /* 칸 안 위젯이 제목 없이 상품목록으로 시작하면 옆 칸보다 20px 내려가 시작한다 */ .widget-split-row .split-col .product.list.thumb:first-child { /* 음수 마진이 부모로 전파(margin collapsing)되면 위젯 박스 자체가 20px 위로 올라가 칸… */ display: flow-root; } .widget-split-row .split-col .product.list.thumb:first-child > ul.grid { margin-top: calc(-1 * var(--split-item-gap, 20px)); } .tab-product-side {} /* 타이틀 (다른 위젯과 동일 규칙) */ .tab-product-side .main-title {display:flex;} .tab-product-side .main-title.title-left {justify-content:flex-start;} .tab-product-side .main-title.title-right {justify-content:flex-end;} .tab-product-side .main-title.title-center {justify-content:center;} .tab-product-side .main-title.title-left .title-group {text-align:left;} .tab-product-side .main-title.title-right .title-group {text-align:right;} .tab-product-side .main-title.title-center .title-group {text-align:center;} .tab-product-side .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .tab-product-side .main-title h3 span {color:var(--point-color);} .tab-product-side .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 좌측 세로탭 + 우측 상품 레이아웃 ───────────────────────── */ .tab-product-side .side-tab-wrap { display:flex; align-items:stretch; /* flex-start → stretch: 왼쪽 메뉴가 오른쪽 높이만큼 항상 늘어남 */ margin-top:20px; border:1px solid #eee; border-top:1px solid #333; border-left:0; padding-right:30px; } .tab-product-side .side-tab-menu { flex:0 0 var(--tps-menu-w, 230px); width:var(--tps-menu-w, 230px); margin:0; border:1px solid #eee; border-top:0; border-bottom:0; border-radius:var(--tps-tab-radius, 2px); background:#fafafa; /* #fff → #fafafa: 탭 배경색과 동일하게 맞춤 */ display:block; font-family:Lato, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; } .tab-product-side .side-tab-menu > .tps-tab { position:relative; display:block; margin:0; padding:18px 22px; border:0; border-bottom:1px solid #eee; font-size:0.95rem; font-weight:500; color:#555; background:none; border-radius:0; cursor:pointer; transition:background .15s, color .15s; background-color:#fafafa; line-height:1; user-select:none; text-decoration:none; /* 세로 탭 라벨(카테고리/테마명): 폭(230px) 넘는 긴 이름은 … 말줄임(번역 시 길어지는 라벨 대비) */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tab-product-side .side-tab-menu > .tps-tab:last-child {border-bottom:0;} .tab-product-side .side-tab-menu > .tps-tab:hover {background:#f5f5f5; color:#333;} /* 활성 탭: 청록 배경 + 흰 글씨 + 우측 chevron (스크린샷 스타일) */ .tab-product-side .side-tab-menu > .tps-tab.active { background:var(--point-color); color: var(--text-on-white-point); border-color:var(--point-color); font-weight:600; position:relative; width: calc(100% + 17px); /* 메뉴 폭보다 20px 더 넓게 */ margin-right: -17px; /* 그만큼 오른쪽으로 밀어서 튀어나오게 */ z-index: 2; /* 상품 영역 위에 겹쳐 보이도록 */ clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-right: 40px; border-radius:0 !important; } .tab-product-side .side-tab-menu > .tps-tab.active::after { content:''; position:absolute; top:50%; right:20px; width:9px; height:9px; border:solid var(--text-on-white-point); border-width:3px 3px 0 0; transform:translateY(-50%) rotate(45deg); margin:0; background:none; } /* 우측 상품 영역 */ .tab-product-side .side-tab-content {flex:1 1 auto; min-width:0; margin-left:30px;} .tab-product-side .side-tab-content .tps-pane {border:0; padding:0; margin:0;} .tab-product-side .side-tab-content .product.list.thumb {margin-top:10px; margin-bottom:0;} .tab-product-side .icon-mask { position:relative; top:2px; display: inline-block; width: 16px; height: 16px; margin-right:7px; font-weight:600; background-color: #555; /* 원하는 색 자유롭게 지정 */ -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; } .tab-product-side .side-tab-menu > .tps-tab.active .icon-mask {background-color:var(--text-on-white-point);} /* 모바일: 세로탭을 상단 가로 스크롤 + 상품 2열로 폴백 ─────── */ @media (max-width:767px) { .tab-product-side .side-tab-wrap {display:block;} .tab-product-side .side-tab-menu { width:100%; flex:none; display:flex; flex-wrap:nowrap; overflow-x:auto; border:0; border-bottom:1px solid #ececec; margin-bottom:15px; } .tab-product-side .side-tab-menu > .tps-tab { flex:0 0 auto; border-bottom:0; padding:12px 16px; white-space:nowrap; } .tab-product-side .side-tab-menu > .tps-tab.active::after {display:none;} .tab-product-side .side-tab-content {margin-left:0;} .tab-product-side .side-tab-content .product.list.thumb.four ul.grid > li.item {width:50%;} } /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-tab_product_side ul.grid > li.item .thumbnail a.link… */ /* 전체 박스 모서리 (위젯 설정 전체 박스 모서리) 외곽선·배경은 관리자 박스디자인 이 인라인으로 넣는다 */ .tab-product-side.tps-boxed {border-radius:var(--tps-box-radius, 0); overflow:hidden;} /* 탭 내용 — Fomantic .ui.tab 의 표시/숨김만 옮긴다 */ .tab-product-side .tps-pane {display:none;} .tab-product-side .tps-pane.active {display:block;} /* 외형 옵션 (위젯 설정) 전부 값을 골랐을 때만 클래스가 붙어 동작한다 */ /* 상단 강조선 — 기본은 #333 진한 선 */ .tab-product-side.tps-top-light .side-tab-wrap {border-top-color:#eee;} .tab-product-side.tps-top-none .side-tab-wrap {border-top:0;} /* 활성 탭 강조 — 기본은 오른쪽 화살촉(clip-path + ::after 셰브론) */ .tab-product-side.tps-act-flat .side-tab-menu > .tps-tab.active, .tab-product-side.tps-act-bar .side-tab-menu > .tps-tab.active { clip-path:none; width:100%; margin-right:0; padding-right:22px; } .tab-product-side.tps-act-flat .side-tab-menu > .tps-tab.active::after, .tab-product-side.tps-act-bar .side-tab-menu > .tps-tab.active::after {display:none;} /* 왼쪽 막대 — 배경을 걷고 왼쪽에 포인트색 막대만 남긴다(가장 얌전한 형태) */ .tab-product-side.tps-act-bar .side-tab-menu > .tps-tab.active { background:#fff; color:#222; box-shadow:inset 3px 0 0 0 var(--point-color); } .tab-product-side.tps-act-bar .side-tab-menu > .tps-tab.active .icon-mask {background-color:#222;} /* 탭 간 구분선 없음 */ .tab-product-side.tps-nodiv .side-tab-menu > .tps-tab {border-bottom:0;} /* 바깥 테두리 없음 — 탭과 상품을 감싸던 상자를 걷어 여백만 남긴다 */ .tab-product-side.tps-noborder .side-tab-wrap {border:0; padding-right:0;} .tab-product-side.tps-noborder .side-tab-menu {border:0;} /* 페이지 탭 상품목록 (paged_tab_product) 알약형 탭(첫 탭 전체) + 여러 줄 상품 그리드 +… */ /* 타이틀 — 다른 위젯(스페셜 배너·인기키워드)과 같은 규칙 */ .paged-tab-product .main-title {display:flex;} .paged-tab-product .main-title.title-left {justify-content:flex-start;} .paged-tab-product .main-title.title-right {justify-content:flex-end;} .paged-tab-product .main-title.title-center {justify-content:center;} .paged-tab-product .main-title.title-left .title-group {text-align:left;} .paged-tab-product .main-title.title-right .title-group {text-align:right;} .paged-tab-product .main-title.title-center .title-group {text-align:center;} .paged-tab-product .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .paged-tab-product .main-title h3 span {color:var(--point-color);} .paged-tab-product .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 알약형 탭 Fomantic tabular(밑줄 탭)이 아니라 버튼처럼 보이는 알약 */ .paged-tab-product .ptp-tabs {display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0 0;} .paged-tab-product .ptp-tab { display:inline-block; padding:8px 18px; border:1px solid #e5e5e5; border-radius:var(--ptp-tab-radius, 999px); background:#fff; color:#555; font-size:0.9375rem; line-height:1.4; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s; /* 탭 라벨은 분류명이라 번역 시 길어질 수 있다 — 폭을 넘으면 … 로 줄인다 */ max-width:260px; overflow:hidden; text-overflow:ellipsis; } .paged-tab-product .ptp-tab:hover {border-color:#bbb; color:#222;} .paged-tab-product .ptp-tab.active {background:#222; border-color:#222; color:#fff; font-weight:600;} /* 탭 내용 ────────────────────────────────────────────────── */ .paged-tab-product .ptp-pane {display:none;} .paged-tab-product .ptp-pane.active {display:block;} .paged-tab-product .ptp-pane .product.list.thumb {margin-bottom:0;} /* 초기 렌더에서 2페이지 이후 상품이 잠깐 보였다 접히는 튐(FOUC) 방지 */ .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="2"] ul.grid > li.item:nth-child(n+3), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="3"] ul.grid > li.item:nth-child(n+4), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="4"] ul.grid > li.item:nth-child(n+5), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="5"] ul.grid > li.item:nth-child(n+6), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="6"] ul.grid > li.item:nth-child(n+7), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="8"] ul.grid > li.item:nth-child(n+9), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="9"] ul.grid > li.item:nth-child(n+10), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="10"] ul.grid > li.item:nth-child(n+11), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="12"] ul.grid > li.item:nth-child(n+13), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="15"] ul.grid > li.item:nth-child(n+16), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="16"] ul.grid > li.item:nth-child(n+17), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="18"] ul.grid > li.item:nth-child(n+19), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="20"] ul.grid > li.item:nth-child(n+21), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="24"] ul.grid > li.item:nth-child(n+25), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="25"] ul.grid > li.item:nth-child(n+26), .paged-tab-product .ptp-wrap:not(.ptp-ready)[data-per-page="30"] ul.grid > li.item:nth-child(n+31) {display:none;} /* 하단 페이지 번호 화살표는 정본 화살표(.normal-slide .prev/.next)와 같은 SVG·크기를… */ .paged-tab-product .ptp-paging {display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px;} .paged-tab-product .ptp-paging.is-single {display:none;} .paged-tab-product .ptp-prev, .paged-tab-product .ptp-next { width:46px; height:38px; padding:0; border:1px solid #e0e0e0; border-radius:var(--arrow-radius, 8px); background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:8px 16px; cursor:pointer; outline:none; transition:border-color .15s, opacity .15s; } .paged-tab-product .ptp-prev:hover, .paged-tab-product .ptp-next:hover {border-color:#999;} .paged-tab-product .ptp-prev[disabled], .paged-tab-product .ptp-next[disabled] {opacity:0.35; cursor:default; border-color:#e0e0e0;} .paged-tab-product .ptp-prev {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .paged-tab-product .ptp-next {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .paged-tab-product .ptp-count {display:inline-flex; align-items:baseline; gap:4px; font-size:0.9375rem; color:#999;} .paged-tab-product .ptp-count .ptp-cur {font-size:1.0625rem; font-weight:700; color:#222;} .paged-tab-product .ptp-count .ptp-sep {font-style:normal; color:#ccc;} [data-arrow="off"] .ptp-prev, [data-arrow="off"] .ptp-next {display:none !important;} [data-arrow="hover"] .ptp-prev, [data-arrow="hover"] .ptp-next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .ptp-prev, [data-arrow="hover"]:hover .ptp-next {opacity:1; pointer-events:auto;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-paged_tab_product ul.grid > li.item .thumbnail a.link… */ [data-arrow-bg="off"] .ptp-prev, [data-arrow-bg="off"] .ptp-next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} [data-arrow-bg="on"] .ptp-prev, [data-arrow-bg="on"] .ptp-next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} .special-design-banner {} .special-design-banner .main-title {display:flex; margin-bottom:1rem;} .special-design-banner .main-title.title-left {justify-content:flex-start;} .special-design-banner .main-title.title-right {justify-content:flex-end;} .special-design-banner .main-title.title-center {justify-content:center;} .special-design-banner .main-title.title-left .title-group {text-align:left;} .special-design-banner .main-title.title-right .title-group {text-align:right;} .special-design-banner .main-title.title-center .title-group {text-align:center;} .special-design-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .special-design-banner .main-title h3 span {color:var(--point-color);} .special-design-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .special-design-banner ul {margin:0 0 0 -8px; padding:0; font-size:0;} /* 잘라내는 상자는 li 다. 여기에 라운드가 없으면 호버 확대로 이미지가 상자 밖으로 나가는 순간 모서리가 직각으로 보인다. */ .special-design-banner ul li {position:relative; overflow:hidden; border-radius:var(--sb2-radius, 0); display:inline-block; margin:0 0 8px 8px; padding:0; font-size:1rem; vertical-align:bottom;} .special-design-banner ul li a img, .special-design-banner ul li .banner-nolink img { display:block; width:100%; height:auto; /* img 의 width·height 속성이 원본 높이로 고정되지 않게 폭에 맞춰 비율을 지킨다 */ opacity:1.0; transition: -webkit-transform .3s cubic-bezier(.25,.1,.25,1); transition: transform .3s cubic-bezier(.25,.1,.25,1); transition: transform .3s cubic-bezier(.25,.1,.25,1),-webkit-transform .3s cubic-bezier(.25,.1,.25,1); image-rendering: -webkit-optimize-contrast; } .special-design-banner ul li:hover a img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform:scale(1.05); } /* 배너 모서리 라운드 (위젯 설정) — 폴백 0 = 지금 그대로(각진 모서리) */ /* a 는 기본이 인라인이라 overflow 와 border-radius 가 먹지 않는다. 상자로 만들어야 자기 라운드로 자른다. */ .special-design-banner ul li a img, .special-design-banner ul li a, .special-design-banner ul li .banner-nolink img, .special-design-banner ul li .banner-nolink {border-radius:var(--sb2-radius, 0); overflow:hidden;} .special-design-banner ul li a, .special-design-banner ul li .banner-nolink {display:block;} .ui.divider.custom-divider {border-width:0;} .ui.divider.custom-divider:not(.vertical):not(.horizontal) {border-top:0;} .widget-divider.py-20 {padding-left:0 !important; padding-right:0 !important;} /* 셀렉터는 반드시 위젯 훅(.zw-basic_product) 아래에 둔다 */ .zw-basic_product .product-list {} .zw-basic_product .product-list .main-title {display:flex;} .zw-basic_product .product-list .main-title.title-left {justify-content:flex-start;} .zw-basic_product .product-list .main-title.title-right {justify-content:flex-end;} .zw-basic_product .product-list .main-title.title-center {justify-content:center;} .zw-basic_product .product-list .main-title.title-left .title-group {text-align:left;} .zw-basic_product .product-list .main-title.title-right .title-group {text-align:right;} .zw-basic_product .product-list .main-title.title-center .title-group {text-align:center;} .zw-basic_product .product-list .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .zw-basic_product .product-list .main-title h3 span {color:var(--point-color);} .zw-basic_product .product-list .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-basic_product ul.grid > li.item .thumbnail a.link… */ @charset "utf-8"; /* 전체 카테고리 레이어 — 3단 전용 (대분류 > 중분류 > 소분류) 2단 정본(common.css 의… */ /* 레이어 본체 — 크기·테두리는 정본(.category-layer)에서 상속받고, 내부 배치만 다시 잡는다 */ .category-all .category-layer-3depth { padding: 0; overflow: hidden; height: auto; min-height: 600px; max-height: calc(100vh - 180px); } /* 높이는 테마의 .category-layer 사본을 반드시 이겨야 한다 */ .category-all .c3-backdrop .category-layer.category-layer-3depth { height: auto; min-height: 600px; max-height: calc(100vh - 180px); } /* 독자(모달형) 레이어 — 대분류 15개 초과(JS 가 data-category-count 를 세어… */ .category-all .c3-backdrop { display: contents; } .category-all .c3-backdrop.c3-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, .6); overflow-y: auto; /* 백드롭이 스크롤 주체 */ -webkit-overflow-scrolling: touch; /* 레이어 위아래 최소 여백을 백드롭 padding 으로 갖는다(예전엔 레이어 margin 이었다) */ padding: 56px 0 60px; box-sizing: border-box; } /* flex + margin:auto 로 세로·가로 중앙 */ .category-all .c3-backdrop.c3-modal.open { display: flex; } body.c3-modal-open { overflow: hidden; } /* 모달 열림 동안 body 스크롤 잠금 */ /* 모달형 레이어 — 백드롭 안 중앙, 높이 제한 없음(내부 스크롤 없음, 디자인 동일) */ .category-all .c3-backdrop.c3-modal .category-layer-3depth { position: relative; top: auto !important; left: auto; transform: none; /* 드롭다운용 가운데 정렬(left:50% + translateX(-50%))을 쓰는 테마가 있다: 백드롭이 이미 가운데로 두므로 풀지 않으면 폭 절반만큼 왼쪽으로 밀린다 */ flex: 0 0 auto; /* 폭 1200px 고정 — 좁은 화면에서 flex 가 줄이지 않게 */ margin: auto; /* 화면이 더 크면 세로(가로) 중앙, 레이어가 더 크면 0 으로 풀려 위에서부터 */ height: auto; max-height: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: visible; /* 왼쪽 상단 밖 X 버튼이 잘리지 않게 */ } .category-all .c3-backdrop.c3-modal .category-layer-3depth .c3-nav { max-height: none; } /* 모달형 닫기 X — 레이어 왼쪽 상단 밖, 보더와 같은 색 배경 + 흰 X */ .category-all .category-layer-3depth .c3-close { display: none; } .category-all .category-layer-3depth.c3-standalone .c3-close { display: flex; align-items: center; justify-content: center; position: absolute; top: -40px; left: -2px; /* 레이어 테두리(2px) 바깥 라인에 맞춤 */ width: 40px; height: 40px; padding: 0; background: var(--point-color); color: #fff; border: 0; border-radius: 0; /* 라운드 없음(각짐) */ font-size: 24px; line-height: 1; cursor: pointer; } .category-all .category-layer-3depth.c3-standalone .c3-close:hover { filter: brightness(.92); } /* 좌측: 대분류 세로탭 */ .category-all .category-layer-3depth .c3-nav { width: 240px; min-height: 596px; /* 대분류가 적어도 좌측 배경이 레이어 바닥까지 (min-height 600 - 테두리 4px) */ max-height: calc(100vh - 184px); /* 레이어 max-height - 테두리 4px */ background: #fafafa; border-right: 1px solid #e8e8e8; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; /* 활성 탭의 margin-right:-1px 오버행이 가로 스크롤바를 만들지 않게 */ } .category-all .category-layer-3depth .c3-nav-link { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 38px; /* 앵커형·모달형 공통 한 칸 높이 */ font-size: 0.9375rem; font-weight: 500; /* 대분류 굵기 한 단계 낮춤(600 → 500) */ color: #444; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; } .category-all .category-layer-3depth .c3-nav-icon { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; border-radius: 4px; } .category-all .category-layer-3depth .c3-nav-name { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-nav-arrow { flex: 0 0 auto; font-size: 1.125rem; color: #bbb; } /* 앵커형(대분류 15개 이하) — 고정 px 을 버리고 세로를 균등 분배해 레이어 안을 정확히 채운다 */ .category-all .category-layer-3depth:not(.c3-standalone) .c3-nav { display: flex; flex-direction: column; } .category-all .category-layer-3depth:not(.c3-standalone) .c3-item { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 30px; max-height: 38px; } .category-all .category-layer-3depth:not(.c3-standalone) .c3-nav-link { height: auto; flex: 1 1 auto; } /* 활성 대분류 — 흰 배경으로 우측 패널과 이어 붙은 것처럼 보이게 하고 우측 경계선을 지운다 */ .category-all .category-layer-3depth .c3-item.active .c3-nav-link, .category-all .category-layer-3depth .c3-nav-link:hover { background: #fff; color: var(--point-color); font-weight: 600; /* 활성 대분류도 한 단계 낮춤(700 → 600) */ } .category-all .category-layer-3depth .c3-item.active .c3-nav-link { margin-right: -1px; border-right: 1px solid #fff; } .category-all .category-layer-3depth .c3-item.active .c3-nav-arrow { color: var(--point-color); } /* 우측: 중분류/소분류 패널 */ .category-all .category-layer-3depth .c3-panel { display: none; position: absolute; left: 240px; top: 0; right: 0; bottom: 0; padding: 18px 22px 24px; overflow-y: auto; background: #fff; box-sizing: border-box; } .category-all .category-layer-3depth .c3-item.active .c3-panel { display: block; } .category-all .category-layer-3depth .c3-panel-head { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #eee; } .category-all .category-layer-3depth .c3-panel-head a { display: inline-flex; align-items: center; font-size: 1.0625rem; font-weight: 500; color: #222; } /* 패널 제목도 500 으로 */ .category-all .category-layer-3depth .c3-panel-head a i { font-size: 1.25rem; color: #999; } .category-all .category-layer-3depth .c3-panel-head a:hover { color: var(--point-color); } .category-all .category-layer-3depth .c3-panel-head a:hover i { color: var(--point-color); } /* 카테고리 상품 광고 — 컬럼 그리드 위 큰 배너 타일 */ .category-all .category-layer-3depth .c3-ads { display: grid; grid-template-columns: repeat(5, 1fr); /* c3-cols 와 같은 5열·열간격 → 컬럼 폭에 자연 정렬 */ gap: 10px 18px; margin: 0 0 16px; } .category-all .category-layer-3depth .c3-ad { display: block; min-width: 0; } /* 노출 개수 상한(data-ad-show) 밖으로 밀린 광고 — JS 가 hidden 을 건다 */ .category-all .category-layer-3depth .c3-ad[hidden] { display: none; } .category-all .category-layer-3depth .c3-ad-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #eee; border-radius: 6px; } /* 중분류 = 컬럼 */ .category-all .category-layer-3depth .c3-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 18px; align-items: start; } .category-all .category-layer-3depth .c3-col { min-width: 0; padding: 0 0 14px; } .category-all .category-layer-3depth .c3-col-head { display: block; padding: 7px 8px; margin: 0 0 4px; font-size: 0.9375rem; font-weight: 600; /* 중분류 굵기 한 단계 낮춤(700 → 600) */ color: #222; background: #f6f6f6; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-col-head:hover { color: var(--point-color); background: #f0f0f0; } /* 소분류 */ .category-all .category-layer-3depth .c3-list { margin: 0; padding: 0; list-style: none; } .category-all .category-layer-3depth .c3-list li { margin: 0; padding: 0; } .category-all .category-layer-3depth .c3-list li a { display: block; padding: 4px 8px; font-size: 0.875rem; font-weight: 500; color: #666; line-height: 1.45; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-list li a:hover { color: #000; background: #f7f7f7; } .category-all .category-layer-3depth .c3-star { padding-left: 4px; font-size: 0.8125rem; color: #faa828; } .category-all .category-layer-3depth .c3-empty { margin: 20px 0 0; font-size: 0.875rem; color: #999; } /* 스크롤바 — 패널·좌측 탭 다 가늘게(레이어 전체 스크롤은 정본 그대로) */ .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar { width: 6px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-thumb, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-track, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar-track { background: transparent; } /* 좁은 화면 — 레이어 폭이 줄면 컬럼 수를 낮춘다(광고 타일도 같은 열수 유지) */ @media (max-width: 1280px) { .category-all .category-layer-3depth .c3-cols { grid-template-columns: repeat(4, 1fr); } .category-all .category-layer-3depth .c3-ads { grid-template-columns: repeat(4, 1fr); } } /* 카테고리 아이콘 — 단계마다 크기를 달리해 위계를 지킨다(대 22 / 중 18 / 소 15) */ .category-all .category-layer-3depth .c3-col-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 6px; object-fit: contain; border-radius: 3px; vertical-align: -4px; } .category-all .category-layer-3depth .c3-leaf-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 5px; object-fit: contain; border-radius: 3px; vertical-align: -3px; } /* 컬럼 머리는 아이콘이 붙으면 줄바꿈 없이 한 줄을 유지해야 해서 flex 로 전환 */ .category-all .category-layer-3depth .c3-col-head { display: flex; align-items: center; } /* 스크롤바 custom css */ .category-all .category-layer-3depth .c3-panel { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; /* Firefox: 평소엔 투명 */ } .category-all .category-layer-3depth .c3-panel:hover { scrollbar-color: #eee transparent; /* Firefox: 마우스 올리면 보임 */ } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar { width: 6px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-track { background: transparent; } /* 화살표 버튼 완전 제거 */ .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:single-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:start, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:end, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:start:decrement, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:end:increment, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:horizontal:start, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:horizontal:end { display: none !important; width: 0 !important; height: 0 !important; } .category-all .category-layer, .category-all .category-layer-3depth, .category-all .category-layer-3depth .c3-panel { scrollbar-width: thin; } .category-all .category-layer::-webkit-scrollbar-button, .category-all .category-layer-3depth::-webkit-scrollbar-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-thumb { background: transparent; /* 평소엔 투명 */ border-radius: 10px; } .category-all .category-layer-3depth .c3-panel:hover::-webkit-scrollbar-thumb { background: #ccc; /* 마우스 올리면 보임 */ } .category-all .category-layer-3depth .c3-panel:hover::-webkit-scrollbar-thumb:hover { background: #bbb; /* 스크롤바 자체에 마우스 올리면 더 진하게 */ }