@charset "utf-8";
/* ==========================================================================
   v2 전역 기본 스킨  (/css/site_v2.css)   ★ 모든 쇼핑몰 공통

   2026-07-26 : rroys 전용이던 /data/rroys/css/site_v2.css 를 전 쇼핑몰 기본값으로
                승격시킨 파일. header.asp 에서 쇼핑몰 common.css 다음에 로드된다.

   로딩 순서 (header.asp)
      /css/commonTotal.css  →  /data/{shop}/css/common.css
      →  /css/site_v2.css            ← 이 파일 (전역 기본)
      →  /data/{shop}/css/site_v2.css  ← 있으면 뒤에 붙어 최종 승자 (쇼핑몰 개별 조정)

   ※ 색상은 전부 var(--sitecolor1) 기반이라 쇼핑몰마다 자기 브랜드컬러로 나온다.
      (#FF0051 은 --sitecolor1 이 없을 때만 쓰이는 폴백값)

   ※ 헤더 높이/패딩 고정값(.logoSearch padding, .logoSearchHeight, .allCateWrap top)은
      쇼핑몰마다 디자인관리 템플릿이 달라 전역에 넣지 않는다.
      rroys 처럼 조정이 필요한 몰은 /data/{shop}/css/site_v2.css 에 개별로 넣을 것.

   2026-07-25  탑메뉴 밑 네비게이션 바(브레드크럼)
                - 회색 배경 제거
                - 왼쪽 정렬 → 오른쪽 정렬
                (상품상세·이벤트·게시판·마이페이지 등 .location 을 쓰는 전 서브페이지 공통)
   ========================================================================== */

/* 탑메뉴(헤더)와 네비게이션 바 사이 구분선 제거
   원인 : 헤더 마크업 안 인라인 <style> 의 .logoSearchWrap { border-bottom:1px solid #efefef }
   (인라인 style 태그 규칙이라 !important 로 덮는다) */
#headers.logoSearchWrap,
.logoSearchWrap,
.logoSearchWrap.fixed,
.logoSearchWrap.on {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.location {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-top: 0 !important;		/* ★ 네비게이션 "윗" 라인 (실제 원인) */
	border-bottom: 0 !important;	/* 네비게이션 아래 라인 */
	border: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ※ 2026-07-26 전역 승격 시 제외한 규칙 (여기에 넣으면 안 되는 이유)

     .logoSearchWrap .logoSearch          { padding: 14px 0 12px }
     .logoSearchWrap.scroll .logoSearch   { padding: 10px 0 }
     .logoSearchHeight                    { height: 73px }
     .logoSearchHeight.scroll             { height: 67px }
     .allCateWrap                         { top: 73px }
     .logoSearchWrap.scroll .allCateWrap  { top: 67px }

   이 값들은 rroys 헤더(디자인관리 서브상단부분 인라인 style 이 padding 38/32 ·
   .logoSearchHeight 117px 인 템플릿)를 실측해서 뽑은 수치다.
   헤더 템플릿은 쇼핑몰마다 다르다 — 예: demo3 는 padding 이 10px 이고
   .logoSearchHeight 요소 자체가 없다. 고정 px 를 전역에 박으면 로고가 잘리거나
   고정헤더 자리확보 높이가 어긋나 빈 칸/겹침이 생긴다.
   → 헤더 여백 조정이 필요한 쇼핑몰은 /data/{shop}/css/site_v2.css 에 개별로 넣는다.
   ========================================================================== */

/* 네비게이션 바 아래 여백 제거 (기존 margin-bottom:50px) */
.location {
	margin-bottom: 0 !important;
	padding: 0 !important;
}

/* 브레드크럼 내용 오른쪽 정렬 (가운데 정렬된 1300px 박스 안에서 오른쪽 끝으로) */
.location .locationBox {
	text-align: right !important;
	line-height: 34px;
}

/* 오른쪽 정렬 시 자연스럽도록 요소 정렬 보정 */
.location .locationBox > * {
	vertical-align: middle;
}
.location .locationBox .home,
.location .locationBox a {
	color: #8B9199;
}
.location .locationBox a:hover { color: #17181C; }

/* ==========================================================================
   셀렉트박스 공통 스킨 (jQuery UI selectmenu)  — 사이트 전역
   ※ 상품상세의 옵션 셀렉트는 content_v2.css 가 뒤에 로드돼 더 크게(52px) 덮어씀
   ========================================================================== */
.ui-selectmenu-button.ui-button {
	position: relative;
	box-sizing: border-box;
	height: 40px;
	padding: 0 38px 0 14px !important;
	border: 1px solid var(--rr-line-strong, #D3D7DE) !important;
	border-radius: 8px !important;
	background: #fff !important;
	background-color: #fff !important;
	box-shadow: none !important;
	outline: 0 !important;
	transition: border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.ui-selectmenu-button.ui-button:hover { border-color: #B4B9C0 !important; }
.ui-selectmenu-button.ui-selectmenu-button-open {
	border-color: var(--sitecolor1, #FF0051) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sitecolor1, #FF0051) 12%, transparent) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.ui-selectmenu-button.ui-button .ui-selectmenu-text {
	margin: 0 !important;
	line-height: 38px !important;
	color: #17181C;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 화살표를 CSS 로 그림(이미지/폰트 아이콘 요청 없음) */
.ui-selectmenu-button.ui-button .ui-selectmenu-icon.ui-icon {
	position: absolute !important;
	top: 50% !important;
	right: 14px !important;
	left: auto !important;
	width: 8px !important;
	height: 8px !important;
	margin: -6px 0 0 !important;
	background: none !important;
	border: solid #8B9199;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	text-indent: -9999px;
	overflow: hidden;
	transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1);
}
.ui-selectmenu-button-open .ui-selectmenu-icon.ui-icon {
	margin-top: -2px !important;
	transform: rotate(-135deg);
	border-color: var(--sitecolor1, #FF0051);
}

/* 드롭다운 목록 (body 로 append 되므로 전역 선택자) */
.ui-selectmenu-menu .ui-menu {
	border: 1px solid var(--sitecolor1, #FF0051) !important;
	border-top: 0 !important;
	border-radius: 0 0 8px 8px !important;
	background: #fff !important;
	box-shadow: 0 6px 20px rgba(23,24,28,.10) !important;
	padding: 6px !important;
	max-height: 320px !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item { border: 0 !important; background: transparent !important; }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper {
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 13.5px;
	line-height: 1.35;
	color: #4B5158 !important;
	background: transparent !important;
	transition: background-color .2s, color .2s;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper:hover {
	background: #F7F8FA !important;
	color: #17181C !important;
	font-weight: 600;
}

/* 네비게이션 바의 카테고리 셀렉트 : 조금 더 컴팩트하게 */
.location .locationBox .ui-selectmenu-button.ui-button {
	height: 34px;
	min-width: 150px;
	margin-left: 8px;
	vertical-align: middle;
	text-align: left;
	font-size: 13px;
	border-radius: 999px !important;
	padding: 0 34px 0 14px !important;
}
.location .locationBox .ui-selectmenu-button.ui-button .ui-selectmenu-text { line-height: 32px !important; font-size: 13px; }
.location .locationBox .ui-selectmenu-button.ui-selectmenu-button-open {
	border-bottom-left-radius: 999px !important;
	border-bottom-right-radius: 999px !important;
}
.location .locationBox select { margin-left: 8px; }

/* ==========================================================================
   상품 목록(카테고리/검색 등)   2026-07-25
   ① 카테고리 버튼 라운딩 + 음영
   ② 상세검색/접기 아래 검은 라인 제거
   ③ "4줄/8줄" 셀렉트 수직정렬 보정
   ④ 상품카드 hover(상단 라인 + 이미지 제자리 확대) / 카드 하단 여백 정리
   ⑤ 리스트 하단 ~ 카피라이트 여백 축소
   ========================================================================== */

/* ── ① 카테고리 버튼 : 알약형 + 부드러운 음영 ── */
#subcatedepth1 .ssCont .sBox > a,
.smartSearch .ssCont .sBox > a {
	border-radius: 999px !important;
	box-shadow: 0 1px 2px rgba(23,24,28,.05), 0 2px 8px rgba(23,24,28,.05) !important;
	transition: border-color .2s cubic-bezier(.4,0,.2,1), color .2s, background-color .2s,
	            transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
}
/* 비활성 : 진한 회색선(#999) → 연한 라인 */
#subcatedepth1 .ssCont .sBox > a:not(.on),
.smartSearch .ssCont .sBox > a:not(.on) {
	border: 1px solid #E7E9ED !important;
	background-color: #fff !important;
	color: #4B5158 !important;
}
#subcatedepth1 .ssCont .sBox > a:not(.on):hover,
.smartSearch .ssCont .sBox > a:not(.on):hover {
	border-color: var(--sitecolor1, #FF0051) !important;
	color: var(--sitecolor1, #FF0051) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(23,24,28,.10) !important;
}
/* 활성 : 브랜드컬러는 유지하고, 과했던 컬러 글로우 대신 자연스러운 음영으로 */
#subcatedepth1 .ssCont .sBox > a.on,
.smartSearch .ssCont .sBox > a.on {
	box-shadow: 0 1px 2px rgba(23,24,28,.06), 0 2px 6px rgba(23,24,28,.08) !important;
}

/* ── 상세검색 / 접기 : 카테고리 알약과 구분되는 텍스트형 토글 + 카테고리와 간격 ── */
.smartSearch .inWrap .btn_dtlSC,
.smartSearch .btn_dtlSC {
	height: auto !important;
	min-height: 0 !important;
	padding: 0 2px 3px !important;
	margin-top: 18px !important;			/* 카테고리와 여백 */
	border: 0 !important;
	border-bottom: 1px solid #D3D7DE !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #8B9199 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	transition: color .2s, border-color .2s !important;
}
.smartSearch .inWrap .btn_dtlSC:hover,
.smartSearch .btn_dtlSC:hover {
	color: var(--sitecolor1, #FF0051) !important;
	border-bottom-color: var(--sitecolor1, #FF0051) !important;
}

/* ── 상세검색 패널 ── */
#subSearchForm {
	box-sizing: border-box;
	margin-top: 14px !important;
	padding: 16px 20px !important;
	background: #F7F8FA !important;
	border: 1px solid #E7E9ED !important;
	border-radius: 12px !important;
}
#subSearchForm .ssCont { width: auto !important; box-sizing: border-box; }
#subSearchForm .ssTitle { height: auto !important; }
#subSearchForm .ssTitle span {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4B5158 !important;
}
#subSearchForm input[type="text"],
#subSearchForm input#sprice,
#subSearchForm input#eprice,
#subSearchForm input#sword {
	height: 42px !important;
	padding: 0 14px !important;
	box-sizing: border-box !important;
	border: 1px solid #D3D7DE !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-size: 13.5px !important;
	color: #17181C !important;
	transition: border-color .2s, box-shadow .2s !important;
}
#subSearchForm input[type="text"]:focus,
#subSearchForm input#sprice:focus,
#subSearchForm input#eprice:focus,
#subSearchForm input#sword:focus {
	outline: 0 !important;
	border-color: var(--sitecolor1, #FF0051) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sitecolor1, #FF0051) 12%, transparent) !important;
}
/* 가격 입력칸이 550px 로 늘어나 있어 범위 입력처럼 보이지 않던 것 정리 */
#subSearchForm input#sprice,
#subSearchForm input#eprice { width: 190px !important; max-width: 46% !important; text-align: right !important; }
#subSearchForm .tilde { padding: 0 10px !important; color: #B4B9C0 !important; line-height: 42px !important; }
#subSearchForm input#sword { width: 280px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
#subSearchForm .btn_kwdSC {
	width: 46px !important;
	height: 42px !important;
	border: 1px solid var(--sitecolor1, #FF0051) !important;
	border-left: 0 !important;
	border-radius: 0 8px 8px 0 !important;
	background: var(--sitecolor1, #FF0051) !important;
	color: #fff !important;
	cursor: pointer;
	vertical-align: top !important;
	transition: filter .2s !important;
}
#subSearchForm .btn_kwdSC:hover { filter: brightness(1.06) !important; }

/* ── ② 상세검색·접기 밑 검은(회색 #999) 라인 제거 ── */
.smartSearch .inWrap,
.smartSearch.Search .inWrap {
	border-bottom: 0 !important;
	border: 0 !important;
}

/* ── ③ 정렬바 : 줄수 셀렉트 수직 중앙 정렬 (기존 9px 아래로 처짐)
       + 박스 안쪽 위아래 여백 축소 (14px → 8px, 높이 98 → 86) ── */
.view_type_box {
	align-items: center !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
.view_type_box .total_cont { padding-top: 0 !important; padding-bottom: 0 !important; }
.view_type_box .ui-selectmenu-button.ui-button,
.view_type_box #viewCount-button {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-self: center !important;
	height: 38px !important;
	vertical-align: middle !important;
}
.view_type_box .ui-selectmenu-button.ui-button .ui-selectmenu-text { line-height: 36px !important; }
.view_type_box .view_type,
.view_type_box .total_cont { align-self: center !important; }

/* ── ④ 상품 카드 ── */
/* (a) hover 시 카드 윗쪽 라인
      카드는 원래 hover 하면 .con 에 4면 모두 1px 브랜드컬러 테두리가 생긴다.
      (상단 1px 도 이미지 위로 정상 노출됨 — 실측 확인)
      → 별도의 두꺼운 상단 바를 얹지 않고, 상·하·좌·우 1px 로 균일하게 보이도록
        추가 장식은 두지 않는다. (이전에 넣었던 3px ::after / ::before 바는 제거) */
.gallery_list ul > li::after { content: none !important; }
.gallery_list ul > li .con::before { content: none !important; }
/* 이미지 확대 중에도 상단 테두리가 가려지지 않게 이미지의 합성 레이어 승격을 막는다 */
.gallery_list ul > li .con { position: relative; z-index: 0; }

/* (b) 이미지 : 사선으로 빠지던 문제 수정 → 제자리에서 확대
      원인 = hover transform 이 중앙정렬용 translate(-50%,-50%) 를 덮어써서
             이미지가 우하단으로 밀려나갔다. 두 값을 같이 지정해 고정한다. */
.gallery_list .cutImgBox { overflow: hidden !important; }
.gallery_list .cutImgBox img {
	transform: translate(-50%, -50%) !important;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1) !important;
	will-change: auto !important;	/* 합성 레이어 승격이 상단 라인을 가리므로 해제 */
}
.gallery_list ul > li:hover .cutImgBox img {
	transform: translate(-50%, -50%) scale(1.08) !important;
}

/* (c) 카드 안쪽 하단 빈 여백 정리 (내용 없는 색상칩·별점·상단설명 영역이 높이를 차지)
      ※ .txt 는 디자인관리 인라인 style 의 `.gallery_list ul li .txt`(!important) 가 있어
        클래스를 한 번 더 써서 우선순위를 올린다.
      ※ 빈 영역이 공백 텍스트노드를 갖고 있어 :empty 가 안 먹으므로 :not(:has(*)) 사용 */
.gallery_list ul li .txt.txt { padding-bottom: 12px !important; }
.gallery_list .color_area:not(:has(*)),
.gallery_list .star_wrap:not(:has(*)),
.gallery_list .top_desc_wrap:not(:has(*)) { display: none !important; }

/* ── ⑤ 리스트 하단 ~ 카피라이트 여백 (기존 paging 70+20 / sub_contents 100 = 190px) ── */
.paging_box {
	margin-bottom: 0 !important;
	padding-bottom: 6px !important;
}
.sub_contents { margin-bottom: 40px !important; }