/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [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;} /* 메인 비주얼 배너 #2 (main_visual_banner2) 가운데 배너를 크게, 좌우 배너를 살짝… */ .main-visual2-area {position:relative; width:100%;} .main-visual2-area .main-title {display:flex; margin-bottom:30px;} .main-visual2-area .main-title.title-left {justify-content:flex-start;} .main-visual2-area .main-title.title-right {justify-content:flex-end;} .main-visual2-area .main-title.title-center {justify-content:center;} .main-visual2-area .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;} .main-visual2 {position:relative; width:100%;} /* 좌우 배너는 컨테이너 밖으로 넘치는 부분만 잘린다(기본 overflow:hidden 유지) */ .main-visual2 .swiper-container {width:100%;} .main-visual2 ul.swiper-wrapper {height:auto; margin:0; padding:0; font-size:0; list-style:none;} /* slidesPerView:auto 라 슬라이드 폭은 CSS 가 정한다 */ .main-visual2 ul.swiper-wrapper > li.swiper-slide { position:relative; display:block; box-sizing:border-box; margin:0; padding:0; width:var(--mv2-w, 1200px); max-width:calc(100% - 120px); height:var(--mv2-h, auto); text-align:center; background-color:#fff; /* 라운드 지정 시 이미지 모서리까지 확실히 깎이도록 슬라이드에서 잘라낸다 */ border-radius:var(--mv2-radius, 0); overflow:hidden; } .main-visual2 ul.swiper-wrapper > li.swiper-slide a, .main-visual2 ul.swiper-wrapper > li.swiper-slide .banner-nolink {display:block; width:100%; height:100%;} /* 높이 지정 시 잘라 채우고(object-fit:cover), 미지정이면 원본 비율 그대로 */ .main-visual2 ul.swiper-wrapper > li.swiper-slide img {display:block; width:100%; height:100%; object-fit:cover; border:0; border-radius:var(--mv2-radius, 0);} /* 초기화 전(중앙정렬 transform 이 아직 없음)엔 첫 배너가 왼쪽에 붙어 한 프레임 튄다 → 미리… */ .main-visual2 .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper { justify-content:center; display:flex; } .main-visual2 .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.swiper-slide:not(:first-child) {display:none;} /* 좌우 배너 흐리게(value4=사용) */ .main-visual2.dim-side ul.swiper-wrapper > li.swiper-slide {opacity:0.4; transition:opacity 0.35s;} .main-visual2.dim-side ul.swiper-wrapper > li.swiper-slide.swiper-slide-active {opacity:1;} /* 루프 순간이동(loopFix) 중에는 흐리기 전환을 끈다 — 위젯 JS 가 그 한 프레임만 .mv2-nofx… */ .main-visual2.dim-side.mv2-nofx ul.swiper-wrapper > li.swiper-slide {transition:none;} /* 앞뒤 버튼 — 정본 패턴(.normal-slide .prev/.next)과 동일 톤 */ .main-visual2 .prev, .main-visual2 .next { position:absolute; z-index:5; top:50%; margin-top:-28px; width:56px; height:56px; border-radius:var(--arrow-radius, 100%); background-color:rgba(255,255,255,0.9); background-repeat:no-repeat; background-size:11px 22px; box-shadow:1px 2px 2px rgba(0,0,0,0.2); text-indent:-9999px; outline:none; cursor:pointer; } .main-visual2 .prev {left:50%; right:auto; margin-left:calc(var(--mv2-w, 1200px) * -0.5 - 28px); background-position:21px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .main-visual2 .next {left:50%; right:auto; margin-left:calc(var(--mv2-w, 1200px) * 0.5 - 28px); background-position:24px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .main-visual2 .prev:hover, .main-visual2 .next:hover {background-color:rgba(255,255,255,1);} /* 하단 페이지 표시(점) ── */ .main-visual2 .pager {position:absolute; z-index:5; left:0; right:0; bottom:16px; width:100%; text-align:center; line-height:0;} .main-visual2 .pager .swiper-pagination-bullet {width:8px; height:8px; margin:0 4px; opacity:1; background:rgba(0,0,0,0.2);} .main-visual2 .pager .swiper-pagination-bullet-active {width:20px; border-radius:4px; background:rgba(0,0,0,0.6);} /* 아이콘 배너 (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;} /* 소개 사이드 상품목록 (intro_side_product) 위젯이 인라인 style 로 넘기는 변수… */ .intro-side-product {} /* 타이틀 — 다른 상품목록 위젯과 같은 규칙 */ .intro-side-product .main-title {display:flex;} .intro-side-product .main-title.title-left {justify-content:flex-start;} .intro-side-product .main-title.title-right {justify-content:flex-end;} .intro-side-product .main-title.title-center {justify-content:center;} .intro-side-product .main-title.title-left .title-group {text-align:left;} .intro-side-product .main-title.title-right .title-group {text-align:right;} .intro-side-product .main-title.title-center .title-group {text-align:center;} .intro-side-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;} .intro-side-product .main-title h3 span {color:var(--point-color, #32c0b6);} .intro-side-product .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 좌우 배치 ── 왼쪽은 고정폭, 오른쪽이 남는 폭을 전부 쓴다 */ .intro-side-product .isp-wrap {display:flex; align-items:stretch; gap:30px; margin-top:20px;} .intro-side-product .isp-wrap[data-side="right"] {flex-direction:row-reverse;} .intro-side-product .isp-aside { flex:0 0 var(--isp-side, 200px); width:var(--isp-side, 200px); min-width:0; display:flex; flex-direction:column; } /* 소개 제목 — 굵고 크게 */ .intro-side-product .isp-name {display:block; font-size:1.25rem; font-weight:700; line-height:1.35; color:var(--point-color, #32c0b6); word-break:keep-all;} .intro-side-product .isp-name a {color:inherit; text-decoration:none;} .intro-side-product .isp-name a:hover {text-decoration:underline;} .intro-side-product .isp-desc {margin:12px 0 0; font-size:0.9375rem; line-height:1.6; color:#666; word-break:keep-all; white-space:pre-line;} /* 인기키워드 — 아래쪽에 붙인다(소개글과 상품 격자 높이가 달라도 바닥 정렬) */ .intro-side-product .isp-keys {margin-top:auto; padding-top:28px;} .intro-side-product .isp-keys-title {display:block; margin-bottom:10px; font-size:0.875rem; font-weight:700; color:#333;} .intro-side-product .isp-key { display:block; margin-top:6px; padding:7px 12px; border:1px solid #e5e7eb; border-radius:var(--isp-key-radius, 999px); font-size:0.875rem; color:#555; text-decoration:none; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .15s, color .15s; } .intro-side-product .isp-key:hover {border-color:var(--point-color, #32c0b6); color:var(--point-color, #32c0b6);} .intro-side-product .isp-goods {flex:1 1 auto; min-width:0;} .intro-side-product .isp-goods .product.list.thumb {margin:0;} /* 첫 줄 위 여백 상쇄 — 테마 상품카드는 줄 간격을 li.item 의 margin-top(전 테마… */ /* ※ 선택자에 .product.list.thumb 를 반드시 끼운다 — 테마의… */ .intro-side-product .isp-goods .product.list.thumb ul.grid {margin-top:calc(-1 * var(--isp-row-gap, 20px));} /* 상품 썸네일 모서리 (위젯 설정) 공용 상품카드 파셜을 여러 위젯이 공유한다 */ /* 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자르므로 여기에도 같은 값을 준다. */ .zw-intro_side_product ul.grid > li.item .thumbnail {overflow:hidden; border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-intro_side_product ul.grid > li.item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 위젯설정 > 테마변수 > 직각 */ /* 전체 박스 모서리 (위젯 설정) 외곽선·배경은 관리자 박스디자인 이 인라인으로 넣는다 */ .intro-side-product.isp-boxed {border-radius:var(--isp-box-radius, 0); overflow:hidden;} /* 모바일 — 위아래로 쌓고 상품은 2열 ── */ @media (max-width:767px) { .intro-side-product .isp-wrap, .intro-side-product .isp-wrap[data-side="right"] {display:block;} .intro-side-product .isp-aside {width:100%; flex:none; margin-bottom:18px;} .intro-side-product .isp-keys {margin-top:14px; padding-top:0;} /* 좁은 화면에선 키워드를 가로로 흘려 담는다(세로로 길어지는 것 방지) */ .intro-side-product .isp-keys {display:flex; flex-wrap:wrap; gap:6px; align-items:center;} .intro-side-product .isp-keys-title {width:100%; margin-bottom:4px;} .intro-side-product .isp-key {display:inline-block; margin-top:0;} .intro-side-product .isp-goods .product.list.thumb ul.grid > li.item {width:50%;} } /* 위젯 공용 — 상품이 없을 때 위젯이 납작해지지 않게 자리를 지킨다 */ /* 카드 한 줄 높이. 기본 테마 실측(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; } } /* 분할 레이아웃 위젯 — 가로 칸 분할 컨테이너 */ /* 위젯 자체는 본문 폭에 맞춘다 — 다른 위젯(.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)); } /* 배너 상품목록 (banner_product) 카드 = 배너 한 장(머리) + 그 아래 상품 몇 개(가로 웹진형… */ /* 타이틀 — 다른 위젯과 동일 규칙 */ .banner-product .main-title {display:flex;} .banner-product .main-title.title-left {justify-content:flex-start;} .banner-product .main-title.title-right {justify-content:flex-end;} .banner-product .main-title.title-center {justify-content:center;} .banner-product .main-title.title-left .title-group {text-align:left;} .banner-product .main-title.title-right .title-group {text-align:right;} .banner-product .main-title.title-center .title-group {text-align:center;} .banner-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;} .banner-product .main-title h3 span {color:var(--point-color);} .banner-product .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 알약형 탭 (페이지 탭 상품목록과 같은 패턴) ── */ .banner-product .bp-tabs {display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0 0;} .banner-product .bp-tab { display:inline-block; padding:8px 18px; border:1px solid #e5e5e5; border-radius:var(--bp-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; } .banner-product .bp-tab:hover {border-color:#bbb; color:#222;} .banner-product .bp-tab.active {background:#222; border-color:#222; color:#fff; font-weight:600;} /* 카드 그리드 ── */ .banner-product .bp-cards {display:grid; grid-template-columns:repeat(var(--bp-cols, 3), 1fr); gap:24px 20px; margin-top:20px;} .banner-product .bp-card {border:1px solid #ececec; border-radius:var(--bp-card-radius, 10px); overflow:hidden; background:#fff;} .banner-product .bp-card.is-hidden {display:none;} /* 카드 머리 — 배너 통이미지 + 하단 문구 */ .banner-product .bp-head {position:relative; display:block; width:100%; padding-top:var(--bp-ratio, 75%); overflow:hidden; background:#f2f4f7; text-decoration:none;} .banner-product .bp-head .bp-img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border:0;} /* 글자가 밝은 이미지 위에서도 읽히도록 아래쪽만 어둡게 깐다 */ .banner-product .bp-head:after {content:''; position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55));} .banner-product .bp-head-text {position:absolute; z-index:1; left:20px; right:20px; bottom:16px; display:block;} .banner-product .bp-head-title {display:block; font-size:1.125rem; font-weight:700; color:#fff; line-height:1.35; text-shadow:0 1px 3px rgba(0,0,0,0.3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .banner-product .bp-head-desc {display:block; margin-top:4px; font-size:0.875rem; color:rgba(255,255,255,0.9); line-height:1.4; text-shadow:0 1px 3px rgba(0,0,0,0.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* 카드 안 상품 행(가로 웹진형) ── */ .banner-product .bp-items {margin:0; padding:5px 16px 5px; list-style:none;} .banner-product .bp-item {position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid #f2f2f2;} .banner-product .bp-item:last-child {border-bottom:0;} .banner-product .bp-thumb {flex:0 0 auto; display:block; width:74px; height:74px; border:1px solid #f0f0f0; border-radius:var(--bp-thumb-radius, 6px); overflow:hidden; background:#fafafa;} .banner-product .bp-thumb img {width:100%; height:100%; object-fit:cover; border:0;} .banner-product .bp-noimg {display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#d1d1d1; font-size:1.25rem;} .banner-product .bp-info {flex:1 1 auto; min-width:0;} .banner-product .bp-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:0.875rem; line-height:1.4; color:#111; text-decoration:none; font-weight:500; } /* 상품명 호버에 밑줄을 넣지 않는다 — 정본 상품카드(.product.list … a.name)도 밑줄이 없다 */ .banner-product .bp-name:hover {text-decoration:none;} /* 부가세 포함 표시 — 금액 옆 작은 회색 꼬리표(과세상품일 때만 렌더된다) */ .banner-product .bp-vat {font-size:0.8125rem; color:#888;} .banner-product .bp-price {margin-top:6px; font-size:0; line-height:1.2; font-size:0.875rem;} .banner-product .bp-rate {display:inline-block; margin-right:6px; font-size:1rem; font-weight:700; font-style:normal; color:#ff3d5a;} .banner-product .bp-moq {padding-left:5px; font-size:0.8125rem; color:#777;} .banner-product .bp-amount {display:inline-block; font-size:0.9375rem; font-weight:700; color:var(--text-total-price-color,#000);} /* 수량 안내 — 판촉물은 낱개로 안 판다 */ .banner-product .bp-qty {margin-top:3px; font-size:0.8125rem; color:#555; line-height:1.3; font-weight:400;} .banner-product .bp-qty b {font-weight:600; color:#555;} .banner-product .bp-wish {flex:0 0 auto; padding:2px; margin-top:-2px; color:#c9c9c9; font-size:1.2rem; line-height:1; text-decoration:none;} .banner-product .bp-wish:hover {color:#ff3d5a;} /* 초기 렌더에서 2페이지 이후 카드가 잠깐 보였다 접히는 튐(FOUC) 방지 */ .banner-product .bp-wrap:not(.bp-ready)[data-per-page="2"] .bp-card:nth-child(n+3), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="3"] .bp-card:nth-child(n+4), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="4"] .bp-card:nth-child(n+5), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="6"] .bp-card:nth-child(n+7), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="8"] .bp-card:nth-child(n+9), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="9"] .bp-card:nth-child(n+10), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="12"] .bp-card:nth-child(n+13), .banner-product .bp-wrap:not(.bp-ready)[data-per-page="16"] .bp-card:nth-child(n+17) {display:none;} /* 하단 페이지 번호 — 정본 화살표에서 흰 원만 라운드 사각으로 ── */ .banner-product .bp-paging {display:flex; align-items:center; justify-content:center; gap:16px; margin-top:30px;} .banner-product .bp-paging.is-single {display:none;} .banner-product .bp-prev, .banner-product .bp-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; } .banner-product .bp-prev:hover, .banner-product .bp-next:hover {border-color:#999;} .banner-product .bp-prev[disabled], .banner-product .bp-next[disabled] {opacity:0.35; cursor:default; border-color:#e0e0e0;} .banner-product .bp-prev {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .banner-product .bp-next {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .banner-product .bp-count {display:inline-flex; align-items:baseline; gap:4px; font-size:0.9375rem; color:#999;} .banner-product .bp-count .bp-cur {font-size:1.0625rem; font-weight:700; color:#222;} .banner-product .bp-count .bp-sep {font-style:normal; color:#ccc;} [data-arrow="off"] .bp-prev, [data-arrow="off"] .bp-next {display:none !important;} [data-arrow="hover"] .bp-prev, [data-arrow="hover"] .bp-next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .bp-prev, [data-arrow="hover"]:hover .bp-next {opacity:1; pointer-events:auto;} [data-arrow-bg="off"] .bp-prev, [data-arrow-bg="off"] .bp-next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} [data-arrow-bg="on"] .bp-prev, [data-arrow-bg="on"] .bp-next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} /* 특가(기간한정 단일가) — .bp-price 는 font-size:0 이라 조각마다 크기를 직접 준다 */ .banner-product .bp-price .special-sale-badge { display:inline-block; margin-right:6px; padding:1px 6px; border-radius:999px; background:var(--point-color); color:#fff; font-size:0.75rem; font-weight:700; font-style:normal; line-height:1.4; vertical-align:middle; } .banner-product .bp-price .deal-origin, .banner-product .bp-price .deal-origin .money, .banner-product .bp-price .deal-origin .prefix, .banner-product .bp-price .deal-origin .suffix { font-size:0.8125rem; font-weight:400; color:#bdbdbd; } .banner-product .bp-price .deal-origin {margin-left:5px; text-decoration:line-through;} /* 위젯 공용 — 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);} .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;} .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;} /* 위젯 공용 — 상품 슬라이드 초기화 전 레이아웃 */ .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… */ .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%; 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;} /* 인기키워드 (popular_keyword) 탭처럼 보이지 않는 탭 */ /* 타이틀/간략설명 타이포는 스페셜 배너(.special-design-banner .main-title)와 동일 */ .popular-keyword .main-title {display:flex; margin-bottom:1rem;} .popular-keyword .main-title.title-left {justify-content:flex-start;} .popular-keyword .main-title.title-right {justify-content:flex-end;} .popular-keyword .main-title.title-center {justify-content:center;} .popular-keyword .main-title.title-left .title-group {text-align:left;} .popular-keyword .main-title.title-right .title-group {text-align:right;} .popular-keyword .main-title.title-center .title-group {text-align:center;} .popular-keyword .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;} .popular-keyword .main-title h3 span {color:var(--point-color);} .popular-keyword .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 키워드 줄 ── */ /* 탭 느낌을 없애려고 개별 탭 테두리 대신 줄 전체를 하나의 박스로 감싼다 */ .popular-keyword .pk-keys {display:flex; align-items:stretch; justify-content:space-between; gap:4px; padding:10px 12px; border:1px solid #d9d9d9; border-radius:var(--pk-keys-radius, 8px); background:#fff;} /* flex:0 1 auto = 평소엔 글자 길이만큼만 차지하고(참조 시안처럼 자연스럽게 퍼짐), 줄이 넘칠 때만… */ .popular-keyword .pk-key { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:7px; box-sizing:border-box; padding:6px 8px; color:#333; text-decoration:none; cursor:pointer; } .popular-keyword .pk-key .pk-num {flex:0 0 auto; width:22px; height:22px; line-height:20px; box-sizing:border-box; border:1px solid #e2e2e2; border-radius:var(--pk-num-radius, 3px); background:#fff; color:#aaa; font-size:0.75rem; text-align:center;} /* 키워드가 길면 … 로 자른다 */ .popular-keyword .pk-key .pk-word {min-width:0; font-size:0.9375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .popular-keyword .pk-key:hover .pk-word {color:var(--point-color);} /* 선택된 키워드 — 번호칸과 글자만 포인트색 */ .popular-keyword .pk-key.active .pk-num {border-color:var(--point-color); color:var(--point-color);} .popular-keyword .pk-key.active .pk-word {color:var(--point-color); font-weight:700;} /* 상품 영역 ── */ .popular-keyword .pk-pane {display:none;} .popular-keyword .pk-pane.active {display:block;} .popular-keyword .pk-pane .product.list.thumb {margin-bottom:0;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자르므로 여기에도 같은 값을 준다. */ .zw-popular_keyword ul.grid > li.item .thumbnail { border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-popular_keyword ul.grid > li.item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 위젯설정 > 테마변수 > 직각 */ /* 셀렉터는 반드시 위젯 훅(.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; /* 스크롤바 자체에 마우스 올리면 더 진하게 */ }