/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [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;} .visual-area {position:relative; min-width:1200px;} /* 1200px 컨테이너 좌측 끝에 기둥 배치 */ /* z-index 는 상단 fixed 헤더(.lnb.fixed z-index:1000) 아래로 */ /* top:-1px 은 헤더 .lnb 하단 1px 테두리에 기둥 상단 테두리를 겹쳐 한 줄로 보이게 하는 값이다. 그 테두리를 없앤 테마는 자기 CSS 에서 top:0 과 sidebar_menu min-height:430px 로 덮는다. */ .visual-area .allways_sidebar {position:absolute; z-index:10; left:50%; top:-1px; margin-left:-600px; width:152px;} /* 탑 사이드바 메뉴 */ /* 높이 431(top:-1 포함 바닥 y=430) = 메인비주얼 바닥과 정확히 일치 */ /* 하단 border 제거: 기둥 바로 아래 섹션의 상단 border 와 겹쳐 2겹으로 보이던 문제… */ /* 접힘 상태 431px 고정 → 기둥 바닥이 항상 메인비주얼/탭 바닥 라인(430)과 정확히 일치 */ .visual-area .allways_sidebar .sidebar_menu {width:150px; height:auto; min-height:431px; display:flex; flex-direction:column; background:#fff; border:1px solid #e4e4e4 !important; border-bottom:0 !important;} /* ul.menu 는 height:100% 가 아니라 flex:1 로 채운다 — 부모 높이가… */ .visual-area .allways_sidebar .sidebar_menu ul.menu {flex:1 1 auto; margin:0; padding:3px 0 0; list-style:none; display:flex; flex-direction:column; box-sizing:border-box;} /* 펼침 상태: 기둥이 바닥선을 넘어 아래로 성장 → 하단 테두리를 되살려 패널처럼 닫는다 */ .visual-area .allways_sidebar.expanded .sidebar_menu {border-bottom:1px solid #e4e4e4 !important;} .visual-area .allways_sidebar .sidebar_menu li.depth1 {position:relative; flex:0 0 auto; margin:0;} .visual-area .allways_sidebar .sidebar_menu li.depth1:hover, .visual-area .allways_sidebar .sidebar_menu li.depth1.on {background:#303853;} /* 대메뉴 글자 잘림(...) 제거 — 운영자가 카테고리명 길이를 직접 조절 */ /* 행 높이 27px(28→27로 약간 축소) — 15개=405px 로 431px 기둥에 토글용… */ /* 1depth 카테고리명: 폭 넘는 긴 이름은 … 말줄임(번역 시 길어지는 라벨 대비) */ /* width 고정 금지: Fomantic 이 html{box-sizing:border-box}+*{inherit}… */ .visual-area .allways_sidebar .sidebar_menu li.depth1 a.menu_title {position:relative; display:block; width:auto; box-sizing:border-box; height:27px; padding:0 8px 0 25px; line-height:27px; font-size:0.875rem; color:#333; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .visual-area .allways_sidebar .sidebar_menu li.depth1:hover a.menu_title, .visual-area .allways_sidebar .sidebar_menu li.depth1.on a.menu_title {color:#fff;} .visual-area .allways_sidebar .sidebar_menu li.depth1 a.menu_title i.good_icon_sp {position:absolute; left:8px; top:-1px; color:#faa828;} /* 15번째 이후(초과) 대분류: 접힘=높이 0, 펼침=27px 로 스르륵 자란다 */ .visual-area .allways_sidebar .sidebar_menu li.depth1.depth1-extra > a.menu_title {height:0; opacity:0; transition:height 0.28s ease, opacity 0.18s ease;} .visual-area .allways_sidebar.expanded .sidebar_menu li.depth1.depth1-extra > a.menu_title {height:27px; opacity:1;} /* 메뉴 레이어(.depth2) — li 안에서 음수 top 으로 항상 기둥 상단에 정렬 */ /* 폭 고정(820) 대신 내용맞춤(fit-content): 서브카테고리 컬럼 수(1단·2단·3단…)에 따라… */ .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 {display:none; position:absolute; z-index:20; left:146px; top:-4px; width:fit-content; max-width:960px; height:431px; padding:0; border:1px solid #303853; background:#fff;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2:after {content:""; display:block; clear:both;} /* flex: 서브카테고리 단(좌) + 배너(우)를 좌우로 배치 */ .visual-area .allways_sidebar .sidebar_menu li.depth1:hover .depth2, .visual-area .allways_sidebar .sidebar_menu li.depth1.on .depth2 {display:flex; align-items:flex-start;} /* 하단 펼침/접기 토글(v/^) — 15개 초과 시에만 렌더 ── */ /* 토글은 15개(27px×15=405px) 아래 남는 높이(약 22px)를 flex 로 흡수 → 기둥 431px… */ .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle {flex:1 1 auto; display:flex; margin:0; border-top:1px solid #ededed;} /* min-height:20px — 펼침 상태에선 항목이 기둥을 꽉 채워 flex 여유가 0이라 바가… */ .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle a.menu_toggle {flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:20px; color:#9a9a9a; background:#fafafa; text-decoration:none; cursor:pointer;} .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle a.menu_toggle .chev {width:12px; height:12px;} .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle a.menu_toggle:hover {color:#fff; background:#303853;} .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle a.menu_toggle .chev {display:block;} /* 접힘=아래(v) 표시, 펼침=위(^) 표시 */ .visual-area .allways_sidebar .sidebar_menu li.depth1-toggle a.menu_toggle .chev-up {display:none;} .visual-area .allways_sidebar.expanded .sidebar_menu li.depth1-toggle a.menu_toggle .chev-down {display:none;} .visual-area .allways_sidebar.expanded .sidebar_menu li.depth1-toggle a.menu_toggle .chev-up {display:block;} /* 서브카테고리 영역(.sub_depth) — 평면 children 을 169px 컬럼으로 자동 흐름 */ .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth { overflow: hidden; flex: 0 0 auto; width: auto; max-width: 740px; height: 100%; padding: 0; display: flex; align-items: stretch; box-sizing: border-box; /* ← border 추가로 인한 폭 계산 오차 방지 */ } .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth:after {content:""; display:block; clear:both;} /* column-fill:auto — 한 단(409px)을 세로로 다 채운 뒤 오른쪽 다음 단으로… */ .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth ul {height:100%; margin:0; padding:3px 0; list-style:none; column-width:180px; column-gap:0; column-fill:auto; column-rule:1px dotted #eaeaea;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth li {position:relative; padding-left:0; border-top:0; break-inside:avoid;} /* 항목높이 28px 고정 = line-height 20px + 상하패딩 4px×2(8px) */ .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth li a {display:block; padding:4px 30px; font-size:0.875rem; line-height:20px; color:#6d6d6d; font-weight:400; text-decoration:none;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth li a.favorite {position:relative; font-weight:600; color:#555; letter-spacing:-0.02em;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth li a.favorite i {position:absolute; left:13px; color:#faa828; font-size:0.875rem;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .sub_depth li a:hover {background:none; color:var(--point-color);} /* 대분류 배너(.sub_depth_banner) — 레이어 우측 */ .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 .sub_depth_banner {overflow:hidden; flex:0 0 200px; width:200px; height:429px; margin-left:auto;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 .sub_depth_banner ul {margin:0; padding:0;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 .sub_depth_banner ul li {margin:0; padding:0; list-style:none;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 .sub_depth_banner ul li a {display:block; margin:0; padding:0; background:transparent; border:0; opacity:1; transition:all 0.3s ease-out;} .visual-area .allways_sidebar .sidebar_menu li.depth1 .depth2 .sub_depth_banner ul li a:hover {opacity:0.8;} .visual-area .allways_sidebar .banner_image {width:100% !important;} /* has-sidebar 일 때 하단 탭을 사이드바 폭(150px)만큼 축소(기둥 밑으로 안 깔리게) */ .visual-area.has-sidebar .main-visual .pager {margin-left:-450px; width:810px;} /* 첫 탭 왼쪽 테두리 제거: 탭 시작점(x=150)이 사이드바 오른쪽 테두리와 딱 겹쳐 2겹으로 보이던 문제 해결 */ .visual-area.has-sidebar .main-visual .pager a:first-child {flex:1 1 810px; border-left:0;} .visual-area.has-sidebar .main-visual .prev {margin-left:-440px;} /* 모바일/좁은 화면: 기둥 숨기고 탭 원복(공유 스킨 안전장치) */ @media (max-width: 1023px) { /* .visual-area .allways_sidebar {display:none;}… */ } /* main-visual */ .main-visual {position:relative; z-index:0; height:430px; margin:0; padding-bottom:0;overflow:hidden; } .main-visual ul {height:430px; margin:0; padding:0; font-size:0; list-style:none; } .main-visual ul li {position:relative; display:block; width:100%; height:430px !important; margin:0; padding:0; text-align:center; background-color:#fff !important;} .main-visual ul li a, .main-visual ul li .banner-nolink {display:block; width:1200px; height:430px; margin:0 auto;} .main-visual ul li a img, .main-visual ul li .banner-nolink img { display:block; position:relative; pointer-events:none; /* 이미지가 a 박스(1200px) 밖으로 넘쳐도 클릭을 먹지 않게 → 좌우 빈영역 클릭 방지, 클릭은 뒤의 a로… */ left: 50%; -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); } /* slider thumbs */ .main-visual .pager { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow:hidden; position:absolute; z-index:1000; left:50%; bottom:0; width:960px; height:38px; margin-left:-600px; padding-bottom:0; font-size: 0px; transition:0; -webkit-transition:0; } .main-visual .pager a { position:relative; -webkit-box-flex:1 1 960px; -ms-flex:1 1 960px; flex:1 1 960px; text-align: center; height:38px; margin:0 0 -1px -1px !important; padding:9px 0; font-size:0.9375rem; color: #333; border:1px solid #e4e4e4; border-bottom:0; background:#fff; border-radius:0; opacity:1; outline:none; /* 배너 탭 라벨: 탭 폭 넘는 긴 글자는 … 말줄임(번역 시 길어지는 라벨 대비) */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:6px; padding-right:6px; } .main-visual .pager a:first-child {flex:1 1 983px; margin-left:0 !important;} .main-visual .pager a span {padding-top:5px;} .main-visual .pager a.swiper-pagination-bullet-active {z-index:2; margin:0; color:#fff; border-color:#333; background:#333;} .main-visual .pager a.swiper-pagination-bullet-active img { border:0; } .main-visual .prev {opacity:0; left:50%; right:auto; margin-left:-590px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 0 center; background-size:23px auto; text-indent:-9999px; outline:none;} .main-visual .next {opacity:0; left:auto; right:50%; margin-right:-350px;background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 0 center; background-size:23px auto; text-indent:-9999px; outline:none;} .main-visual:hover .prev, .main-visual:hover .next {opacity:1.0;} /* 우측 정보영역(인기검색어·인기카테고리)을 둘 다 끈 경우 — 위젯 설정 keyword_use /… */ .visual-area.no-keyword-area .main-visual .pager {margin-left:-600px; width:1200px;} .visual-area.no-keyword-area .main-visual .next {margin-right:-590px;} /* 좌측 카테고리 기둥(150px)까지 함께 쓰면 그만큼만 뺀 1050px — has-sidebar… */ .visual-area.has-sidebar.no-keyword-area .main-visual .pager {margin-left:-450px; width:1050px;} /* 첫 탭의 flex-basis 를 나머지 탭과 같게 맞춰 폭을 균등 분배한다 */ .visual-area.no-keyword-area .main-visual .pager a:first-child {flex:1 1 960px;} .keyword-area {position:absolute; top:-1px; right:50%; z-index:1; margin-right:-600px; width:240px; height:430px;} /* keyword-rank */ .keyword-area .keyword-rank {width:100%; height:181px; padding:15px; color:#fff; background:rgba(0,0,0,0.7);} .keyword-area .keyword-rank h3 {margin:0 0 2px; padding:0; font-size:0.875rem; font-weight:500; color:#fff;} .keyword-area .keyword-rank ul { display: -webkit-box; display: -ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height:140px; margin:0; padding:5px 0; } .keyword-area .keyword-rank ul li { -webkit-box-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; justify-content:space-between; width:50%; padding:0 5px 0 0; font-size:0.875rem; font-weight:400; list-style:none; } .keyword-area .keyword-rank ul li:nth-child(5)~* {padding:0 0 0 5px;} .keyword-area .keyword-rank ul li span.num {float:left; position:relative; display:block; width:16px; margin:2px 5px 0 0; padding:2px 0; font-size:0.7692rem; line-height:0.7692rem; color:#000; font-family:tahoma, sans-serif; text-align:center; vertical-align:top; background:rgba(255,255,255,0.6); border-radius:0;} .keyword-area .keyword-rank ul li a { overflow:hidden; display:block; height:25px; padding:3px 0; color:#fff; font-size:0.8125rem; font-weight:400; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:1; white-space:nowrap; -webkit-box-orient: vertical; } .keyword-area .keyword-rank ul li:hover span.num {background:rgba(255,255,255,1.0);} .keyword-area .keyword-rank ul li:hover span.keyword {color:#fff;} /* category-rank */ .keyword-area .category-rank {overflow:hidden; width:100%; height:250px; padding:15px; background:#fff;} .keyword-area .category-rank h3 {margin:0 0 12px; padding:0; font-size:1rem; font-weight:400; color:#333;} .keyword-area .category-rank ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:0; padding:0; list-style:none; } .keyword-area .category-rank ul li { -webkit-box-flex:1 2 auto; -ms-flex:1 2 auto; flex:1 2 auto; min-width:0; /* 플렉스 아이템 기본 min-width:auto(min-content) 해제 → 라벨 span… */ justify-content:space-between; margin:0 0 12px; padding:0; text-align:center; } .keyword-area .category-rank ul li a, .keyword-area .category-rank ul li .banner-nolink { text-decoration:none; display:block; min-width:0; } .keyword-area .category-rank ul li a img, .keyword-area .category-rank ul li .banner-nolink img {border:1px solid #eaeaea; max-width:100%; height:auto;} .keyword-area .category-rank ul li a:hover img {border-color:#333;} /* 인기카테고리 라벨: 칸 폭 넘는 긴 이름은 … 말줄임 */ .keyword-area .category-rank ul li span { display:block; width:0; min-width:100%; box-sizing:border-box; padding-top:0; font-size:0.8125rem; font-weight:500; color: #727272; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 앞뒤 버튼 모양 (위젯 설정 앞뒤 버튼 모양 = value9) 비우면 CSS 폴백 = 지금 디자인 그대로 */ .visual-area .prev, .visual-area .next {border-radius:var(--arrow-radius, 100%);} .horizontal-design-banner {} .horizontal-design-banner a, .horizontal-design-banner .banner-nolink {float:left; display:block;} .horizontal-design-banner a:first-child, .horizontal-design-banner .banner-nolink:first-child {position:relative; z-index:1; margin-right:-1px; border-right:1px solid #eaeaea;} .horizontal-design-banner a img, .horizontal-design-banner .banner-nolink img {display:block; width:600px;} /* 배너 모서리 (위젯 설정 배너 모서리 라운드) — 폴백 0 = 지금 디자인 */ .horizontal-design-banner a, .horizontal-design-banner .banner-nolink {border-radius:var(--mvab-radius, 0); overflow:hidden;} .tile-design-banner {} .tile-design-banner ul {margin:0; padding:0; font-size:0;} .tile-design-banner ul li {position:relative; display:inline-block; margin:0; padding:0; font-size:1rem; vertical-align:top; list-style:none;} .tile-design-banner ul li a:after { opacity:0.0; position:absolute; top:0; left:0; z-index:1; content:""; display:block; width:240px; height:480px; border:1px solid rgba(0,0,0,0.2); -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } .tile-design-banner ul li:first-child a:after {width:480px; height:480px;} .tile-design-banner ul li:nth-child(5) a:after {width:480px; height:240px;} .tile-design-banner ul li:nth-child(6) a:after {width:720px; height:240px;} .tile-design-banner ul li:hover a:after {opacity:1.0;} .tile-design-banner ul li img {display:block; width:240px; height:480px;} .tile-design-banner ul li:first-child img {width:480px; height:480px;} .tile-design-banner ul li:nth-child(5) img {width:480px; height:240px;} .tile-design-banner ul li:nth-child(6) img {width:720px; height:240px;} /* 배너 모서리 라운드 (위젯 설정) — 폴백 0 = 지금 그대로(각진 모서리) */ .tile-design-banner ul li a img, .tile-design-banner ul li a, .tile-design-banner ul li .banner-nolink img, .tile-design-banner ul li .banner-nolink {border-radius:var(--tb-radius, 0); overflow:hidden;} /* 위젯 공용 — 상품 슬라이드 초기화 전 레이아웃 */ .normal-slide .swiper-container:not(.swiper-container-initialized) .swiper-wrapper { margin-left: 0 !important; /* 정본 ul.grid 의 -2rem 거터 제거(= .normal-slide.on 과 동일) */ } .normal-slide .swiper-container:not(.swiper-container-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) .swiper-wrapper > li.item:last-child { margin-right: 0 !important; } .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;} /* 위젯 공용 — 상품이 없을 때 위젯이 납작해지지 않게 자리를 지킨다 */ /* 카드 한 줄 높이. 기본 테마 실측(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);} .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;} .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… */ .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;} .hot-category { } .hot-category .main-title {display:flex; padding:0 0 30px 0;} .hot-category .main-title.title-left {justify-content:flex-start;} .hot-category .main-title.title-right {justify-content:flex-end;} .hot-category .main-title.title-center {justify-content:center;} .hot-category .main-title.title-left .title-group {text-align:left;} .hot-category .main-title.title-right .title-group {text-align:right;} .hot-category .main-title.title-center .title-group {text-align:center;} .hot-category .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(2.1428rem * var(--w-title-scale, 1))); font-weight:bold; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .hot-category .main-title h3 span {color:#ea0000; font-weight:bold;} .hot-category .main-title h3:after {content:''; display:block; width:30px; height:2px; margin:20px auto; background:#000;} .hot-category .main-title.title-left h3:after {justify-content:flex-start; margin:20px auto 20px 0;} .hot-category .main-title.title-right h3:after {justify-content:flex-end; margin:20px 0 20px auto;} .hot-category .main-title.title-center h3:after {justify-content:center;} .hot-category .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .hot-category .flow-slider-design-banner {position:relative; width:100%; min-height:200px; overflow:hidden;} .hot-category .flow-slider-design-banner:after {content:''; display:block; clear:both;} /* 클래스명 오타 수정: contents 요소는 실제로 flow-slider-design-banner-content… */ .hot-category .flow-slider-design-banner-contents {position:absolute; top:0; left:0;} .hot-category .flow-slider-design-banner ul {padding:0 0; margin:0;} .hot-category .flow-slider-design-banner li {position:relative; float:left; list-style:none; width:240px; height:200px; text-align:center; display:block;} .hot-category .flow-slider-design-banner li .box {position:relative; overflow:hidden; width:200px; height:200px; margin:0 auto; border-radius:var(--fsb-radius, 200px);} .hot-category .flow-slider-design-banner li .box img {width:100%;} .hot-category .flow-slider-design-banner ul li .hover.layer {position:absolute; top:0; left:0; width:200px; height:200px; padding:10px; background:rgba(50,192,182,0.7) !important; color:#fff; border-radius:var(--fsb-radius, 200px); opacity:0.0;} .hot-category .flow-slider-design-banner ul li .hover.layer span {display:table-cell; vertical-align:middle; width:180px; height:180px; font-size:14px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.5); text-align:center; } .hot-category .flow-slider-design-banner ul li:hover .hover.layer {opacity:1.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… */ .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; } } /* 메인비주얼과 동일 원리: 각 배너는 100% 폭 슬롯(.fluid-banner-slot)에 담는다 */ .fluid-design-banner {} .fluid-banner-slot {overflow:hidden;} .fluid-design-banner a, .fluid-design-banner .banner-nolink {position:relative; display:block; width:1200px; margin:0 auto;} .fluid-design-banner a img, .fluid-design-banner .banner-nolink img { display:block; position:relative; pointer-events:none; /* 이미지가 a 박스(1200px) 밖으로 넘쳐도 좌우 빈영역 클릭 방지 */ left: 50%; -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); } /* 배너 모서리 (위젯 설정 배너 모서리 라운드) — 폴백 0 = 지금 디자인 */ .fluid-design-banner .fluid-banner-slot {border-radius:var(--fb-radius, 0);} @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; /* 스크롤바 자체에 마우스 올리면 더 진하게 */ }