/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [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;} /* 카드 메인 비주얼 배너 (card_main_visual_banner) 위젯이 인라인 style 로 넘기는… */ .card-main-visual {width:100%;} .card-main-visual .cmv-slider {position:relative;} .card-main-visual .swiper-container {position:relative; overflow:hidden;} /* 카드 — 화면 폭과 무관하게 고정 */ .card-main-visual .cmv-list {margin:0; padding:0; list-style:none;} .card-main-visual .cmv-list > li.swiper-slide { width:min(var(--cmv-w, 390px), 78vw); margin:0; padding:0; background:transparent; } .card-main-visual .cmv-list > li.swiper-slide a, .card-main-visual .cmv-list > li.swiper-slide .banner-nolink {display:block;} .card-main-visual .cmv-list > li.swiper-slide img { display:block; width:100%; height:min(var(--cmv-h, 530px), 106vw); object-fit:cover; border-radius:var(--cmv-radius, 16px); border:0; } /* 초기화 전 정렬 — Swiper 가 잡기 전에도 최종 모습과 같게 깔아둔다(멀티 비주얼과 같은 정신) */ .card-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .cmv-list {display:flex; gap:var(--cmv-gap, 21px);} .card-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .cmv-list > li.swiper-slide:first-child { /* 선복제(--cmv-pre)가 앞에 깔린 만큼 왼쪽으로 더 당긴다 → 첫 진짜 카드가 정확히 화면 중앙 */ margin-left:calc(50% - min(var(--cmv-w, 390px), 78vw) / 2 - var(--cmv-pre, 0) * (min(var(--cmv-w, 390px), 78vw) + var(--cmv-gap, 21px))); } /* 선복제 카드 — 초기화 전에만 존재(위젯 JS 가 제거) */ .card-main-visual .cmv-list > li.cmv-preclone .link {display:block;} /* 가운데 강조 양옆을 줄인다(가운데를 키우지 않는다) */ .card-main-visual .cmv-slider:not([data-scale="0"]) .cmv-list > li.swiper-slide { transform:scale(var(--cmv-scale, 0.9)); transform-origin:center center; } /* 크기 전환(transition)은 초기화 완료(is-ready) 후에만 건다 */ .card-main-visual .cmv-slider.is-ready:not([data-scale="0"]) .cmv-list > li.swiper-slide { transition:transform var(--cmv-speed, 500ms) ease; } .card-main-visual .cmv-slider:not([data-scale="0"]) .cmv-list > li.swiper-slide-active, .card-main-visual .cmv-slider:not([data-scale="0"]) .cmv-list > li.swiper-slide-duplicate-active { transform:scale(1); z-index:50; } /* 초기화 전 가운데 강조 — 첫 진짜 카드(선복제 다음)가 곧 active 가 될 카드다 */ .card-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .cmv-list > li.cmv-preclone + li.swiper-slide:not(.cmv-preclone), .card-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .cmv-list > li.swiper-slide:first-child:not(.cmv-preclone) { transform:scale(1); } /* 루프 순간이동(loopFix) 중에는 크기 전환을 끈다 — 위젯 JS 가 그 한 프레임만 .cmv-nofx 를… */ .card-main-visual .cmv-slider.is-ready.cmv-nofx .cmv-list > li.swiper-slide {transition:none;} /* 하단 조작부 화살표 = 비주얼 배너 정본 셰브론(흰 원 뺀 형태), 숫자 = 상품 페이징 위젯과 같은 표기. */ .card-main-visual .cmv-controls {display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px;} .card-main-visual .cmv-controls.is-single {display:none;} .card-main-visual .cmv-prev, .card-main-visual .cmv-next { width:26px; height:26px; padding:0; border:0; border-radius:var(--arrow-radius, 0); background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:9px 18px; cursor:pointer; opacity:0.8; outline:none; transition:opacity .15s; } .card-main-visual .cmv-prev:hover, .card-main-visual .cmv-next:hover {opacity:1;} .card-main-visual .cmv-prev {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .card-main-visual .cmv-next {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .card-main-visual .cmv-count {display:inline-flex; align-items:baseline; gap:4px; font-size:0.9375rem; color:#999;} .card-main-visual .cmv-count .cmv-cur {font-size:1.0625rem; font-weight:700; color:#222;} .card-main-visual .cmv-count .cmv-num-sep {font-style:normal; color:#ccc;} /* 하단 표시 표시 안 함 — 숫자만 감추고 화살표는 남긴다(화살표는 별도 옵션 소관) */ .card-main-visual .cmv-controls[data-foot="off"] .cmv-count {display:none;} [data-arrow="off"] .cmv-prev, [data-arrow="off"] .cmv-next {display:none !important;} [data-arrow="hover"] .cmv-prev, [data-arrow="hover"] .cmv-next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .cmv-prev, [data-arrow="hover"]:hover .cmv-next {opacity:1; pointer-events:auto;} [data-arrow-bg="off"] .cmv-prev, [data-arrow-bg="off"] .cmv-next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} [data-arrow-bg="on"] .cmv-prev, [data-arrow-bg="on"] .cmv-next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} /* 아이콘 배너 (icon_banner) 원형 배너 이미지 + 배너 제목이 알약 모양 안에 */ .icon-banner {position:relative; width:100%;} /* 타이틀/간략설명 타이포는 스페셜 배너(.special-design-banner .main-title)와 동일 */ .icon-banner .main-title {display:flex; margin-bottom:1rem;} .icon-banner .main-title.title-left {justify-content:flex-start;} .icon-banner .main-title.title-right {justify-content:flex-end;} .icon-banner .main-title.title-center {justify-content:center;} .icon-banner .main-title.title-left .title-group {text-align:left;} .icon-banner .main-title.title-right .title-group {text-align:right;} .icon-banner .main-title.title-center .title-group {text-align:center;} .icon-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-banner .main-title h3 span {color:var(--point-color);} .icon-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 알약 목록 ── */ .icon-banner .ib-list { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ib-row-gap, 10px) var(--ib-gap, 10px); box-sizing:border-box; max-width:var(--ib-body, 1200px); margin:0 auto; } .icon-banner .ib-list.align-left {justify-content:flex-start;} /* 알약 한 칸 — 흰 배경 + 완전 라운드 */ .icon-banner .ib-item { display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; padding:5px 16px 5px 5px; border:1px solid #ececec; border-radius:var(--ib-radius, 999px); background:#fff; text-decoration:none; color:#333; white-space:nowrap; transition:border-color .15s, box-shadow .15s; } .icon-banner .ib-item:hover {border-color:var(--point-color); box-shadow:0 2px 6px rgba(0,0,0,0.06);} /* 원형 아이콘 — 이미지가 정사각이 아니어도 원으로 잘리게 cover */ .icon-banner .ib-icon { flex:0 0 auto; display:block; overflow:hidden; border-radius:50%; width:var(--ib-icon, 34px); height:var(--ib-icon, 34px); background:#f4f5f7; } .icon-banner .ib-icon img {display:block; width:100%; height:100%; object-fit:cover; border:0;} .icon-banner .ib-label {font-size:0.875rem; line-height:1.2;} /* 위젯 공용 — 상품 슬라이드 초기화 전 레이아웃 */ .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);} /* 일반 배너 (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-list {} .tab-product-list .main-title {display:flex;} .tab-product-list .main-title.title-left {justify-content:flex-start;} .tab-product-list .main-title.title-right {justify-content:flex-end;} .tab-product-list .main-title.title-center {justify-content:center;} .tab-product-list .main-title.title-left .title-group {text-align:left;} .tab-product-list .main-title.title-right .title-group {text-align:right;} .tab-product-list .main-title.title-center .title-group {text-align:center;} .tab-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;} .tab-product-list .main-title h3 span {color:var(--point-color);} .tab-product-list .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 탭 메뉴 양끝 정렬 고정 */ .tab-product-list .tp-tabs { display:flex; justify-content:flex-start; align-items:stretch; /* 여백도 Fomantic 원본값이다(실측 margin:16px 0 10px) */ margin:16px 0 10px; padding:0; border-bottom:1px solid #d4d4d5; background:none; font-size:1rem; } .tab-product-list .tp-tab { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:0.92857143em 0.7em; border-left:1px solid transparent; border-right:1px solid transparent; border-top:2px solid transparent; border-bottom:none; background:none; color:rgba(0, 0, 0, 0.87); font-weight:400; line-height:1; text-align:center; text-decoration:none; overflow:hidden; cursor:pointer; user-select:none; /* Fomantic 은 활성 탭만 둥글다 — 기본 폴백을 그렇게 맞춘다(비활성은 0) */ border-radius:var(--tp-tab-radius, 0); transition:background .1s ease, color .1s ease; } .tab-product-list .tp-tab:hover {color:rgba(0, 0, 0, 0.8);} .tab-product-list .tp-tab.active { background:#fff; color:rgba(0, 0, 0, 0.95); font-weight:700; border-top-width:1px; border-color:#d4d4d5; margin-bottom:-1px; border-radius:var(--tp-tab-radius, 0.28571429rem 0.28571429rem 0 0); } /* 탭 내용 — Fomantic .ui.tab 의 표시/숨김만 옮긴다(테두리 없는 원본 그대로) */ .tab-product-list .tp-pane {display:none;} .tab-product-list .tp-pane.active {display:block;} /* 탭 안 슬라이딩(value3=slide) 슬라이더 상품목록(slider_product) 위젯과 동일한 공용… */ .tab-product-list .normal-slide {position:relative;} .tab-product-list .normal-slide:after {content:''; display:block; clear:both; height:1px;} /* 초기화 전 레이아웃(FOUC) 규칙은 _shared/assets/css/slide_preinit.css 로… */ .tab-product-list .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);} .tab-product-list .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);} .tab-product-list .prev:hover, .tab-product-list .next:hover {background-color:rgba(255,255,255,1.0);} .tab-product-list .normal-slide .hide {display:none;} /* 페이징(점)을 슬라이드 아래에 in-flow 로 배치 */ .tab-product-list .normal-slide .pager.swiper-pagination {position:static; margin-top:20px; text-align:center;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-tab_product ul.grid > li.item .thumbnail a.link… */ /* 탭 라벨 — 말줄임은 반드시 이 span 이 한다 */ .tab-product-list .tp-tab .tp-tab-label {min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .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;} /* 셀렉터는 반드시 위젯 훅(.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; /* 스크롤바 자체에 마우스 올리면 더 진하게 */ }