/*
 * TODO: 메인개편 오픈 후 통합 삭제 필요
 * V2 공통 셸 CSS — V1 화면(이벤트·이퀄·디스커버 등)에서도 V2 서브헤더(Cart)와 하단 탭바를 쓰기 위한 파일.
 *
 * 배경: V2 하단 탭바·서브헤더 스타일은 main_new.css에만 있고, 그 파일은 V2 메인(MainV2Page)에서만 불러온다.
 * 그런데 전역 Dockbar.svelte와 Header.svelte는 이미 퍼블 V2 마크업(gnb blur_gnb, header.sub_header)을 쓰고
 * 있어서 V1 화면에서는 마크업만 바뀌고 스타일은 옛것으로 남았다.
 *
 * - V1 CSS(ui_common.css 등)는 건드리지 않는다. 이 파일이 V1 CSS 뒤에 불려와 덮는다.
 * - 서브헤더 블록은 main_new.css에서 Cart 규칙만 발췌했고, GNB 블록은 같은 구간을 그대로 복사한 것이다. 한쪽을 고치면 다른 쪽도 맞춘다.
 * - 롤백: src/routes/+layout.svelte의 이 파일 link 한 줄을 지우면 이전 화면으로 돌아간다.
 */

/*
 * 퍼블 서브헤더(72723567·ea4da6ae) 중 Cart(텍스트 + 개수)만 가져왔다.
 * 뒤로가기·검색·공유·홈·닫기·이퀄 아이콘과 헤더 자간·버튼 간격 규칙은
 * V1 화면 헤더가 바뀌지 않도록 일부러 뺐다 — main_new.css에는 있고 V2 메인에서만 적용된다.
 * 타이틀 폭은 Cart와 함께 가져온다(아래).
 */
.wrap header.sub_header .button.cart {
	display: flex;
	width: auto;
	height: auto;
	margin: 0;
	background: none !important;
	font-weight: 500;
	font-size: 13px;
	line-height: 40px;
	white-space: nowrap;
	color: var(--txt-color);
	gap: 5px;
	align-items: center;
	text-indent: 0;
}
/*
 * 퍼블은 .side_area에 gap: 15px을 주고 버튼 좌우 여백을 지웠다. V1은 버튼마다 margin-left: 8px이라
 * 위 규칙의 margin: 0만으로는 앞 버튼(검색 등)에 Cart가 붙는다 — 퍼블과 같은 15px을 Cart 앞에만 준다.
 * (.side_area gap을 통째로 옮기면 V1 헤더의 다른 아이콘 간격까지 바뀌어서 Cart 쪽에서만 맞춘다.)
 */
.wrap header.sub_header .side_area .button + .button.cart {
	margin-left: 15px;
}
.wrap header.sub_header .button.cart .count {
	position: static;
	min-width: 18px;
	padding: 0 6px;
	font-size: 10px;
	color: var(--txt-color-white);
	z-index: 1;
}
/*
 * 퍼블 타이틀 폭. Cart가 텍스트라 오른쪽 영역이 넓어져서, V1 폭(calc(100% - 160px))이면 가운데 정렬된
 * 타이틀(position: absolute)이 검색 버튼을 덮어 클릭이 타이틀로 간다(QA 공통 209 — 이벤트·이퀄 검색 무반응).
 */
.wrap header.sub_header .title {
	width: calc(100% - 210px);
}

/*
 * 하단 GNB(내비게이션 바) 리뉴얼 스타일("260805 GNB 전체 수정", 퍼블 guide/layout.html).
 * 전역 Dockbar.svelte와 V2 메인의 MainNewTooltip.svelte가 같은 gnb blur_gnb 마크업을 쓴다.
 * 이 규칙은 .gnb.blur_gnb에만 매칭된다.
 */
.gnb.blur_gnb {
	height: 56px;
	border: none !important;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(80px);
	backdrop-filter: blur(80px);
}
.gnb.blur_gnb ul {
	padding-top: 9px;
}
.gnb.blur_gnb ul li {
	position: relative;
}
/*
 * 주의: ch.eqlstore.com의 기존 nav.gnb ul li a.btn_home 등(ui_common.css
 * 609~660줄, 구버전 GNB용)이 이미 있는데, CSS 명시도가 아래 .gnb.blur_gnb
 * ul a 보다 더 높다(요소 선택자 개수가 더 많음: nav+ul+li+a 4개 vs ul+a 2개).
 * 그래서 구버전 png 배경 아이콘이 새 svg 아이콘 위에 같이 그려져 깨져 보였다.
 * .btn_home 등 클래스 3개 조합으로 명시도를 올려 구버전 규칙을 확실히 덮는다.
 */
.gnb.blur_gnb ul a:before {
	opacity: 0.5;
}
.gnb.blur_gnb .btn_home,
.gnb.blur_gnb .btn_category,
.gnb.blur_gnb .btn_discover,
.gnb.blur_gnb .btn_equal,
.gnb.blur_gnb .btn_my {
	width: 44px !important;
	background-image: none !important;
	background-color: transparent !important;
	background-size: auto !important;
}
.gnb.blur_gnb ul a {
	position: relative;
	width: 44px;
	height: 38px;
	padding-top: 30px;
	background: none;
	text-indent: 0;
	font-weight: 400;
	font-size: 8px;
	line-height: 8px;
	letter-spacing: -0.24px;
	color: rgba(0, 0, 0, 0.5);
}
.gnb.blur_gnb ul a:before,
.gnb.blur_gnb ul a:after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	top: 0;
	left: 50%;
	margin-left: -13px;
}
.gnb.blur_gnb .btn_home:before {
	background: url(../image/icon/ico_home_26.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_category:before {
	background: url(../image/icon/ico_category_26.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_discover:before {
	background: url(../image/icon/ico_discover_26.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_equal:before {
	background: url(../image/icon/ico_equal_26.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_my:before {
	background: url(../image/icon/ico_my_26.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_home:after {
	background: url(../image/icon/ico_home_26_on.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_category:after {
	background: url(../image/icon/ico_category_26_on.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_discover:after {
	background: url(../image/icon/ico_discover_26_on.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_equal:after {
	background: url(../image/icon/ico_equal_26_on.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb .btn_my:after {
	background: url(../image/icon/ico_my_26_on.svg) 0 0/100% no-repeat;
}
.gnb.blur_gnb ul a:after {
	opacity: 0;
}
/* 2026-10-29 퍼블(ab228ee) "MO GNB active 수정" 반영 — 활성 탭 텍스트를 굵게(700)·--txt-color(검정)로. */
.gnb.blur_gnb ul a.is_active {
	font-weight: 700;
	color: var(--txt-color);
}
.gnb.blur_gnb ul a.is_active:before {
	opacity: 0;
}
.gnb.blur_gnb ul a.is_active:after {
	opacity: 1;
}
.gnb .gnb_desc {
	position: absolute;
	left: 50%;
	bottom: 100%;
	margin-bottom: 4px;
	padding: 5px 8px;
	background: var(--bg-color-point);
	transform: translate(-50%, 0);
	font-weight: 400;
	font-size: 11px;
	line-height: 14px;
	color: var(--txt-color-white);
	white-space: nowrap;
}
.gnb .gnb_desc:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin-left: -3px;
	border: 1px solid var(--bg-color-point);
	border-width: 4px 3px;
	border-color: var(--bg-color-point) transparent transparent transparent;
}