@charset "UTF-8";
/* ============================================================================
   메인(index.jsp) 전용 스타일 — version 2 (2026-10-01)
   index.jsp 안에 있던 섹션별 <style> 4개를 값 변경 없이 옮김.
   불러오기: index.jsp <link href="/css/user/pages/main.css?v=N">
   ⚠ 이 파일을 수정하면 index.jsp 의 ?v= 숫자와 위 version 을 함께 올릴 것(브라우저 캐시 갱신).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   섹션 제목 공통 (BEST · INSTAGRAM · BLOG)
   --------------------------------------------------------------------------- */
/* MORE 글꼴 = Elza Text(2026-10-01, 종전 Verdana 상속). 사이트가 이미 쓰는 Typekit 웹폰트라 추가 로딩 없음.
   크기·색·자간은 style.css 의 .main-sect.sect-board .n_title a 그대로. */
/* 제목 ~ 목록 간격: 화면 폭에 비례(375px 에서 14px → 1280px 이상 22px). BEST·INSTAGRAM·BLOG 목록의 margin-top 이 이 값을 쓴다. */
.main-sect.sect-board{--main-title-gap:clamp(14px, 10.7px + 0.884vw, 22px);}
/* ⚠ style.css 는 1000px 이하에서 .layout 에 gap:30px(600px 이하 25px)을 준다. 이 값이 위 간격에 더해져
   좁은 화면에서 제목~목록이 오히려 44~48px 로 벌어졌다 → 세 섹션은 .layout 의 gap 을 없애고 위 값 하나만 쓴다(2026-10-01). */
.main-sect.sect-board.sect-best .layout,
.main-sect.sect-board.sect-instagram .layout,
.main-sect.sect-board.sect-blog .layout{gap:0;}
/* 영역 사이 간격(슬라이드 ~ BEST ~ INSTAGRAM ~ BLOG ~ PRODUCT 윗선): 화면 폭에 정비례(4.6875vw) — 1280px 이상 60px, 768px 에서 36px, 512px 이하 24px.
   "슬라이드 ~ BEST" 간격도 이 값을 쓴다(.sect-best 의 padding-top).
   (2026-10-01 처음에는 최소 60px 로 완만하게 줄였는데, 모바일에서 화면에 비해 넓어 보여 정비례로 바꿈.
    종전 고정값: BEST~INSTAGRAM 64px, INSTAGRAM~BLOG 72px, 600px 이하 40px / 48px) */
.main-sect.sect-board{--main-sect-gap:clamp(24px, 4.6875vw, 60px);}
.main-sect.sect-board .n_title a{font-family:"elza-text","Pretendard",sans-serif;}
/* 제목의 한글(.ko, 예: "이달의")만 자간을 좁힌다 — 제목 자간 2px 은 영문 세리프용이라 한글에는 벌어져 보인다. 영문은 2px 그대로. */
.main-sect.sect-board .n_title h2 .ko{letter-spacing:0;}
/* MORE 와 화살표 간격 10px — PC 는 style.css 가 이미 10px, 모바일(768px 이하)은 6px 로 줄어들어 여기서 10px 로 맞춘다. */
@media screen and (max-width:768px){
	.main-sect.sect-board .n_title a{gap:10px;}
}

/* ---------------------------------------------------------------------------
   이달의 BEST
   --------------------------------------------------------------------------- */
/* 이달의 BEST 섹션 한정 — 공용 css 미변경.
   ⛔ 선택자는 .main-sect.sect-board.sect-best 로 시작(인스타 섹션과 같은 이유 — 공용 .main-sect.sect-board 규칙이 특이도 3).
   카드 기본 모양은 style.css 의 .bdProduct-li 그대로이고, 여기서는 배치만 바꾼다:
   상품목록은 한 줄 4→3→2→1개로 줄어드는데 4개뿐이라 3개 구간에서 1개가 떨어진다 → 한 줄 4개, 768px 이하만 2×2 로 고정.
   테두리는 상품목록처럼 겹쳐(-1px) 한 줄로 보이게 한다. nth-of-type 테두리 규칙은 특이도로 덮는다. */
/* 위 슬라이드 ~ 이달의 BEST 간격 = 아래 영역 사이 간격과 같은 값(--main-sect-gap: 1280px 이상 60px → 768px 36px → 512px 이하 24px).
   (2026-10-01 통일. 종전에는 따로 clamp(40px, 7.8125vw, 100px) 를 써서 아래 영역들보다 넓었다. 그 전에는 64px / 768px 이하 40px 고정) */
.main-sect.sect-board.sect-best{padding:var(--main-sect-gap) 0 0;}
.main-sect.sect-board.sect-best .layout{flex-flow:column nowrap;align-items:stretch;}
.main-sect.sect-board.sect-best .n_title{flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:10px;}
/* 제목 앞 아이콘 크기·아이콘~글자 간격은 제목 글자 크기에 비례(em)한다(2026-10-01) — 제목이 23px(1280px 이상) → 19px(375px)로 줄면
   아이콘도 28px → 약 23px, 간격도 10px → 약 8px 로 같이 줄어든다. (1.2174em = 28/23, .435em = 10/23) */
.main-sect.sect-board.sect-best .n_title h2{display:flex;align-items:center;gap:.435em;}
.main-sect.sect-board.sect-best .best-logo{width:1.2174em;height:1.2174em;display:inline-block;flex-shrink:0;}
.main-sect.sect-board.sect-best .best-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--main-title-gap);padding:1px 0 0 1px;width:100%;}
.main-sect.sect-board.sect-best .best-list .bdProduct-li{width:auto;margin:-1px 0 0 -1px;border:1px solid #dfdfdf;padding-bottom:24px;}
.main-sect.sect-board.sect-best .best-list .bdProduct-li:hover{border-color:#474747;z-index:2;}
/* 링크를 세로 flex 로 — 상품명 줄 수가 달라도 가격이 카드 아래쪽에 나란히 선다(.bdProduct-tit 의 margin-bottom:auto). */
.main-sect.sect-board.sect-best .best-list .bdProduct-link{display:flex;flex-direction:column;width:100%;height:100%;}
/* 순위 = 리본 이미지(2026-10-01, 종전 #7e2727 배경 + 흰 숫자). 이미지: /images/user/main/SVG/ranking_0{1~4}.svg (가로 136.52 : 세로 178.33) */
/* 위는 여백 없이 카드 윗선에 붙이고(리본이 매달린 모양), 왼쪽만 8px(모바일 6px) 띄운다. 너비만 정하고 높이는 이미지 비율대로(32px → 약 42px). */
.main-sect.sect-board.sect-best .best-rank{position:absolute;left:8px;top:0;z-index:2;display:block;width:32px;}
.main-sect.sect-board.sect-best .best-rank img{display:block;width:100%;height:auto;}
/* PC 는 상품 태그(.bdProduct-tags, left:26px)가 리본과 겹친다 → 이 섹션만 리본 오른쪽으로 민다. 모바일은 태그가 오른쪽이라 그대로. */
@media screen and (min-width:769px){
	.main-sect.sect-board.sect-best .best-list .bdProduct-tags{left:48px;}
}
@media screen and (max-width:768px){
	.main-sect.sect-board.sect-best .best-rank{left:6px;top:0;width:28px;}
	.main-sect.sect-board.sect-best .best-list{grid-template-columns:repeat(2,minmax(0,1fr));}
	.main-sect.sect-board.sect-best .best-list .bdProduct-img{padding:16px;}
	.main-sect.sect-board.sect-best .best-list .bdProduct-tit{padding:0 12px;}
}

/* ---------------------------------------------------------------------------
   INSTAGRAM
   --------------------------------------------------------------------------- */
/* 인스타그램 섹션 한정 스타일 — 공용 css 미변경.
   ⛔ 선택자는 반드시 .main-sect.sect-board.sect-instagram 로 시작할 것(특이도 4).
      공용에 `.main-sect.sect-board .layout{display:flex;row}` `.main-sect.sect-board .n_title{column}`
      (특이도 3)이 있어, `.sect-instagram .layout`(특이도 2)처럼 짧게 쓰면 져서
      제목이 왼쪽 세로로 서고 그리드가 오른쪽으로 밀린다(2026-08-27 실측으로 두 번 잡음). */
.main-sect.sect-board.sect-instagram{padding:var(--main-sect-gap) 0;}
/* 공용 .layout 은 row flex — 이 섹션만 세로로 쌓아 제목 아래에 그리드가 오게 한다.
   .layout 자체가 max-width:1000px + margin:0 auto 라 콘텐츠는 화면 가운데에 선다. */
.main-sect.sect-board.sect-instagram .layout{flex-flow:column nowrap;align-items:stretch;}
/* 제목 행: 로고+INSTAGRAM 왼쪽, MORE 오른쪽 — 한 줄 */
.main-sect.sect-board.sect-instagram .n_title{flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:10px;}
.main-sect.sect-board.sect-instagram .n_title h2{display:flex;align-items:center;gap:.435em;}
.main-sect.sect-board.sect-instagram .insta-logo{width:1.2174em;height:1.2174em;display:inline-block;flex-shrink:0;transform:translateY(-1px);}
/* 4열 × 2줄 = 8개(2026-10-01, 종전 3열 × 2줄 = 6개). 개수는 MainViewController 의 visibleList(8) 과 짝이다. */
/* 썸네일 사이 간격은 화면 폭 비례: 15px(1280px 이상) → 10px(375px). 종전 모든 폭에서 15px 고정. */
.main-sect.sect-board.sect-instagram .insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px, 7.93px + 0.5525vw, 15px);margin-top:var(--main-title-gap);width:100%;}
/* 썸네일 비율 3:4.7 세로형(2026-10-01, 종전 310:414). 원본 비율이 제각각이어도 object-fit:cover 로 채운다 */
.main-sect.sect-board.sect-instagram .insta-item{position:relative;display:block;overflow:hidden;border-radius:8px;aspect-ratio:3/4.7;}
.main-sect.sect-board.sect-instagram .insta-item img{width:100%;height:100%;object-fit:cover;display:block;}
/* 호버 = 어두운 막(검정 20%) + 가운데 흰 인스타그램 아이콘(채움, 75%)(2026-10-01, 종전 확대 scale 1.05 는 제거).
   사진은 움직이지 않고 위에 얹기만 한다. 마우스가 있는 기기에서만(터치 기기는 눌렀을 때 막이 남는 것을 막는다).
   키보드로 이동했을 때(focus-visible)도 같은 표시를 한다. */
.main-sect.sect-board.sect-instagram .insta-item::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;
	background:rgba(0,0,0,.2) url(/images/user/main/main_icon_insta_white.svg) center / 36px 36px no-repeat;opacity:0;transition:opacity .2s;pointer-events:none;}
.main-sect.sect-board.sect-instagram .insta-item:focus-visible::after{opacity:1;}
@media (hover:hover){
	.main-sect.sect-board.sect-instagram .insta-item:hover::after{opacity:1;}
}
/* 768px 이하는 2열 × 4줄(종전 1024px 이하 2열 — 4열이 된 뒤로는 769~1024px 에서도 칸이 충분히 넓다) */
@media screen and (max-width:768px){ .main-sect.sect-board.sect-instagram .insta-grid{grid-template-columns:repeat(2,1fr);} }
@media screen and (max-width:600px){
	/* 모바일도 2열(2026-08-27 요청). 세로형 썸네일이라 1열이면 카드가 화면을 다 삼킨다 */
	.main-sect.sect-board.sect-instagram .insta-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------------------------------------------------------------------------
   BLOG
   --------------------------------------------------------------------------- */
/* 네이버블로그 섹션 한정 스타일 — 공용 css 미변경.
   ⛔ 선택자는 반드시 .main-sect.sect-board.sect-blog 로 시작할 것(특이도 4).
      공용 `.main-sect.sect-board .layout{flex;row}`(특이도 3)가 있어 짧게 쓰면 진다
      (인스타 섹션에서 2026-08-27 실측으로 두 번 잡은 함정). */
.main-sect.sect-board.sect-blog{padding:0 0 var(--main-sect-gap);}
.main-sect.sect-board.sect-blog .layout{flex-flow:column nowrap;align-items:stretch;}
.main-sect.sect-board.sect-blog .n_title{flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:10px;}
.main-sect.sect-board.sect-blog .n_title h2{display:flex;align-items:center;gap:.435em;}
.main-sect.sect-board.sect-blog .blog-logo{width:1.2174em;height:1.2174em;display:inline-block;flex-shrink:0;transform:translateY(-1px);}
.main-sect.sect-board.sect-blog .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--main-title-gap);width:100%;}
/* 호버 = 테두리가 왼쪽 위에서 오른쪽 아래로 진하게 채워진다(2026-10-01, 종전 떠오름+그림자 제거). 진한 색은 #bbb — 평소 테두리 #eee 와 살짝만 차이 나는 정도(요청).
   테두리 자체는 투명으로 두고 배경 3겹으로 그린다:
     ① 안쪽 흰 바탕(padding-box)  ② 진한 테두리(border-box, 왼쪽 위 모서리에서 가로·세로 0% → 100% 로 자람)  ③ 평소 연한 테두리 #eee(border-box)
   마우스를 떼면 같은 속도로 오른쪽 아래에서 왼쪽 위로 걷힌다. */
.main-sect.sect-board.sect-blog .blog-item{display:flex;flex-direction:column;overflow:hidden;border-radius:8px;
	border:1px solid transparent;
	background:linear-gradient(#fff,#fff) padding-box,
		linear-gradient(#bbb,#bbb) left top / 0% 0% no-repeat border-box,
		linear-gradient(#eee,#eee) border-box;
	transition:background-size .35s ease;}
.main-sect.sect-board.sect-blog .blog-item:hover{background-size:auto, 100% 100%, auto;}
.main-sect.sect-board.sect-blog .blog-thumb{aspect-ratio:4/3;overflow:hidden;background:#f5f5f5;}
.main-sect.sect-board.sect-blog .blog-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.main-sect.sect-board.sect-blog .blog-thumb-empty{display:flex;align-items:center;justify-content:center;color:#c8c8c8;font-weight:800;letter-spacing:2px;}
.main-sect.sect-board.sect-blog .blog-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.main-sect.sect-board.sect-blog .blog-title{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.main-sect.sect-board.sect-blog .blog-summary{font-size:13px;color:#888;line-height:1.5;margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.main-sect.sect-board.sect-blog .blog-date{font-size:12px;color:#aaa;}
/* 3열 유지 구간을 INSTAGRAM 의 4열 구간과 맞춘다(2026-10-01): 769px 이상 3열, 768px 이하 2열, 600px 이하 1열. 종전에는 1024px 이하부터 2열이었다. */
@media screen and (max-width:768px){ .main-sect.sect-board.sect-blog .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media screen and (max-width:600px){
	/* 모바일 1열 — 텍스트가 있는 카드라 2열이면 제목이 안 읽힌다(인스타 썸네일과 다른 판단) */
	.main-sect.sect-board.sect-blog .blog-grid{grid-template-columns:1fr;gap:12px;}
}

/* ---------------------------------------------------------------------------
   EVENT (내용 없음)
   --------------------------------------------------------------------------- */
/* index.jsp 의 EVENT 섹션은 내용이 주석 처리돼 빈 껍데기만 남아 있는데, style.css 의 여백(PC 150px, 모바일 55px)은
   그대로 먹어 BLOG 와 PRODUCT 사이가 그만큼 더 벌어져 있었다 → 여백을 없앤다(2026-10-01).
   이제 BLOG ~ PRODUCT 윗선 간격 = BLOG 아래 여백(--main-sect-gap) 하나뿐이다.
   ⚠ EVENT 내용을 다시 살리면 이 규칙을 지우거나 여백을 다시 줄 것. */
.main-sect.sect-board.sect-event{margin:0;}

/* ---------------------------------------------------------------------------
   하단 PRODUCT 카테고리 아이콘
   --------------------------------------------------------------------------- */
/* 영역 안쪽 위·아래 여백: 화면 폭에 비례 — 위 45px → 25px, 아래 60px → 40px (1280px 이상 → 375px). 좌우 여백은 style.css 그대로.
   (2026-10-01. 처음에는 769px 이상만 45px / 60px 로 고정하고 768px 이하는 style.css 의 25px / 40px 로 한 번에 바뀌었다.
    그 전 style.css: 1501px 이상 50px / 70px, 1500px 이하 40px / 60px, 768px 이하 25px / 40px) */
.main-sect.sect-product{padding-top:clamp(25px, 16.71px + 2.21vw, 45px);padding-bottom:clamp(40px, 31.71px + 2.21vw, 60px);}
/* gap = 제목(PRODUCT) ~ 카테고리 목록 간격: 화면 폭에 비례(375px 에서 17px → 1280px 이상 30px).
   종전에는 769px 이상 30px 고정 / 768px 이하 17px 로 한 번에 뚝 떨어져, 화면을 줄여도 중간에는 줄어들지 않았다. */
.main-sect.sect-product{gap:clamp(17px, 11.6px + 1.436vw, 30px);}

/* ALL VIEW 링크(2026-10-01): 글자 #9E9C9C, 밑줄 #747474, 글자~밑줄 간격 3px.
   종전(style.css)은 글자 #747474 / 밑줄 #CCCCCC / 간격 4px. 자간 0(종전 1.5px). 글꼴 Elza Text 400, 12px(768px 이하 11px)은 style.css 그대로.
   호버 시 글자·밑줄 모두 #000 이 되는 것도 style.css 그대로. */
.main-sect.sect-product .product_title a{color:#9e9c9c;text-decoration-color:#747474;text-underline-offset:3px;letter-spacing:0;font-size:clamp(11px, 10.59px + 0.11vw, 12px);}
/* PRODUCT 제목: 화면 폭 비례 20px(1280px 이상) → 17px(375px). 종전 20px, 768px 이하 18px 로 한 번에 바뀜. ALL VIEW 도 12px → 11px 로 비례. */
.main-sect.sect-product .product_title h2{font-size:clamp(17px, 15.76px + 0.331vw, 20px);}
.main-sect.sect-product .product_title a:hover{color:#000;text-decoration-color:#000;}

/* 아이콘 아래 카테고리 이름(2026-10-01): Elza Text 14px #000 자간 0.5px.
   종전(style.css)은 14px·자간 0.4px 이고 1400px 이하에서 12px·0.2px 로 줄었다.
   크기는 화면 폭 비례: 14px(1280px 이상) → 12px(375px). */
.main-sect.sect-product .product_list_cate div .title{font-family:"elza-text",sans-serif;font-size:clamp(12px, 11.17px + 0.221vw, 14px);line-height:1.2143;letter-spacing:.5px;color:#000;}

/* 공용 규칙은 .icon img{width:100%} — 정사각 SVG 용이라 가로폭이 다른 PNG 는 늘어나거나 찌그러진다.
   상품목록 탭처럼 높이 고정 + object-fit:contain 으로 그린다. */
.main-sect.sect-product .product_list_cate div .icon{display:flex;align-items:flex-end;justify-content:center;width:100%;height:clamp(34px, 30.69px + 0.884vw, 42px);}
.main-sect.sect-product .product_list_cate div .icon img{width:auto;max-width:100%;height:100%;object-fit:contain;}
/* 카테고리 배치(2026-10-01): 가운데 정렬 + 카테고리 사이 간격을 좁힘.
   종전(style.css)은 1201px 이상에서 영역 전체 폭에 양끝 맞춤(space-between) + 칸 최소폭 6~7% 라, 화면이 넓을수록 사이가 벌어졌다.
   → 1201px 이상: 칸 폭 = 내용 폭, 사이 간격은 최대 65px(좁은 화면에서는 줄어듦), 한 줄 가운데.
   → 1200px 이하(여러 줄로 접히는 구간): 줄마다 가운데 정렬. 601px ~ 1200px 은 아래에서 한 줄 6개로 고정한다. */
.main-sect.sect-product .product_list_cate{justify-content:center;}
@media screen and (min-width:1201px){
	/* 사이 간격 65px(요청). 12개가 한 줄에 다 들어가는 넓은 화면(약 1755px 이상)에서 65px 이고,
	   그보다 좁으면 한 줄에 들어가도록 화면 폭에 맞춰 줄어든다(최소 20px).
	   계산: (화면 폭 − 영역 좌우 여백 − 이름·아이콘 폭 합계 약 805px − 여유 30px) ÷ 사이 11곳.
	   ⚠ 카테고리 수나 이름 길이가 크게 바뀌면 아래 920px / 1040px 을 다시 맞출 것. */
	.main-sect.sect-product .product_list_cate{gap:0 clamp(20px, calc((100vw - 920px) / 11), 65px);}
	.main-sect.sect-product .product_list_cate div{min-width:0;}
	.main-sect.sect-product .product_list_cate div .title{white-space:nowrap;}
}
@media screen and (min-width:1501px){
	/* 1501px 이상은 영역 좌우 여백이 100px 로 커지므로 계산식의 빼는 값도 커진다 */
	.main-sect.sect-product .product_list_cate{gap:0 clamp(20px, calc((100vw - 1040px) / 11), 65px);}
}
/* 여러 줄로 접히는 구간(601px ~ 1200px)은 한 줄에 6개씩 두 줄(6 + 6)로 고정(2026-10-01).
   종전(style.css)은 칸 폭이 %라 폭에 따라 7 + 5, 5 + 5 + 2 처럼 줄마다 개수가 달랐다.
   칸 폭 = (목록 폭 − 사이 간격 5곳) ÷ 6. 사이 간격은 style.css 값 그대로(1200px 이하 20px, 1000px 이하 10px).
   600px 이하는 style.css 대로 한 줄 3개(370px 이하 2개). */
@media screen and (min-width:1001px) and (max-width:1200px){
	.main-sect.sect-product .product_list_cate div{flex:0 0 calc((100% - 100px) / 6);}
}
@media screen and (min-width:601px) and (max-width:1000px){
	.main-sect.sect-product .product_list_cate div{flex:0 0 calc((100% - 50px) / 6);}
}
/* 호버 = 아이콘 선이 검정으로(2026-10-01). 아이콘은 투명 바탕 + 진회색(#444 계열) 선 그림 이미지(PNG·SVG)라 색을 직접 못 바꾼다
   → filter:brightness(0) 으로 투명하지 않은 부분을 전부 검정으로 만든다.
   ⚠ 바탕이 투명하지 않은 이미지를 관리자에서 등록하면 호버 때 네모 전체가 검게 된다. */
.main-sect.sect-product .product_list_cate div .icon img{transition:filter .2s;}
/* 호버 때 선을 살짝만 굵게: 검정으로 만든 그림 둘레에 아주 얇은 번짐(0.4px)을 준다 — 선이 부드럽게 도톰해진다.
   (제자리에 겹쳐 그리거나 옆으로 밀어 겹치면 가장자리가 계단처럼 거칠어지거나 너무 굵어져서 쓰지 않는다.) */
.main-sect.sect-product .product_list_cate div a:hover .icon img{filter:brightness(0) drop-shadow(0 0 .4px rgba(0,0,0,.85));}
/* 이름 호버 = 상품목록(PRODUCT 페이지) 상단 카테고리 탭의 "선택됨" 표시와 같은 모양(2026-10-01):
   진회색 #474747 알약 배경 + 흰 글자, 둥글기 15px, 0.3초 전환 (style.css 의 .product-cate.active .product-cate-name).
   ⚠ 배경은 글자 상자에 여백을 주지 않고 ::before 로 글자보다 위아래 5px·좌우 8px 크게 그린다 — 칸 폭·간격 계산이 달라지지 않게 하기 위해서다
      (배경은 옆 간격 쪽으로 8px 씩 삐져나와 그려진다. 간격이 최소 20px 라 옆 이름과 닿지 않는다).
   자간은 탭처럼 넓히지 않는다(넓히면 호버 때 옆 카테고리가 밀린다). */
.main-sect.sect-product .product_list_cate div .title{position:relative;z-index:0;transition:color .3s;}
.main-sect.sect-product .product_list_cate div .title::before{content:"";position:absolute;left:-8px;right:-8px;top:-5px;bottom:-5px;z-index:-1;
	border-radius:15px;background:#474747;opacity:0;transition:opacity .3s;}
.main-sect.sect-product .product_list_cate div a:hover .title{color:#fff;}
.main-sect.sect-product .product_list_cate div a:hover .title::before{opacity:1;}
/* 아이콘 크기(위 .icon 의 height)와 아이콘 ~ 이름 간격은 화면 폭 비례 — 아이콘 42px → 34px, 간격 12px → 9px (1280px 이상 → 375px).
   종전에는 768px 을 경계로 42px/36px, 12px/9px 두 단계였다. */
.main-sect.sect-product .product_list_cate div a{gap:clamp(9px, 7.76px + 0.331vw, 12px);}