/* ==========================================================================
 * Component: Visual Style 10 — 밴드 + 형제네비 pill 오버레이 (세경하이테크 ESG 타입)
 *
 * 시각 규약 출처 = 프로그램 구현 `.prd-tabs__list` (products/single-style-01/single.css):
 *   트랙 radius 30px→pill / padding 5px / 항목 flex:1 · 중앙정렬 / weight 700 / letter-spacing -0.05em
 *   / 활성 = var(--primary) + 흰 글자 / 비활성 = 흰 글자(다크 트랙 위)
 * 레퍼런스 실측(1714px 뷰포트): 바 폭 ≈ 958px(≈56%) · 하단 오프셋 ≈ 34px · 라벨 ≈ 20px
 *
 * ⚠️ 선택자를 `#visual.sub-visual-style-10` 로 스코프한다 (베어 `#visual` 금지 — 다른 스타일과 충돌)
 * ⚠️ 애니메이션은 JS 가 붙이는 값(transform)에만 의존한다 — CSS 는 정적 상태가 기본(무JS 안전)
 * ========================================================================== */

/* ── 밴드 ────────────────────────────────────────────────────────────── */
#visual.sub-visual-style-10 {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #222;
}
#visual.sub-visual-style-10 .sv10-band {
	position: relative;
	width: 100%;
	height: var(--sv-h, 538px);
	/* 하한 — 설정값이 지나치게 작아 내용(제목+부제+pill 바)이 잘리는 것만 막는다. 평소엔 설정값 그대로 적용 */
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#visual.sub-visual-style-10 .sv10-picture,
#visual.sub-visual-style-10 .sv10-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
#visual.sub-visual-style-10 .sv10-scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, .5) 100%);
}

/* ── 텍스트 (전부 가운데 정렬) ─────────────────────────────────────── */
#visual.sub-visual-style-10 .sv10-txt-con {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
}
#visual.sub-visual-style-10 .sv10-txt-inner {
	box-sizing: border-box;
	/* pill 바가 하단에 얹히므로 그만큼 아래 여백을 확보한다 */
	padding-bottom: clamp(88px, 11vh, 136px);
}
#visual.sub-visual-style-10 .sv10-breadcrumb ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	color: #fff;                               /* 경로 전체 흰색 (2026-09-20 사용자 지시 — 조상/현재 구분 없음) */
}
#visual.sub-visual-style-10 .sv10-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#visual.sub-visual-style-10 .sv10-breadcrumb li + li::before {
	content: "\e93e";                                  /* xeicon xi-angle-right chevron */
	font-family: 'xeicon' !important;
	font-size: 0.72em;
	opacity: .62;
}
#visual.sub-visual-style-10 .sv10-breadcrumb a { color: inherit; text-decoration: none; }
#visual.sub-visual-style-10 .sv10-breadcrumb li[aria-current] { color: #fff; }

#visual.sub-visual-style-10 .sv10-tit {
	margin: 0 0 18px;
	font-size: clamp(17px, 1.25vw, 22px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--primary, #740003);            /* 대제목 = 브랜드 primary · 키커 역할 (2026-10-01) */
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
#visual.sub-visual-style-10 .sv10-sub-txt {
	margin: 0;
	font-size: var(--fs-7xl, 60px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: #fff;
}
/* 📝 부제목2 (2026-09-24) — 부제목1(대형 흰색)과 대비되는 소형 보조 문구.
   부제목1 규칙을 상속받으므로 여기서 크기·굵기·색을 명시적으로 되돌린다. */
#visual.sub-visual-style-10 .sv10-sub-txt-2 {
	margin: 20px 0 0;
	font-size: clamp(14px, 1.05vw, 20px);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, .72);
}

/* ── ③ 형제네비 pill 바 (밴드 하단 오버레이) ───────────────────────── */
#visual.sub-visual-style-10 .sv10-pill-bar {
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 3.4vh, 34px);
	transform: translateX(-50%);
	z-index: 3;
	width: min(960px, calc(100% - 40px));
	box-sizing: border-box;
	padding: 5px;
	border-radius: 999px;
	background-color: rgba(18, 20, 26, .44);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
}
#visual.sub-visual-style-10 .sv10-list {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
#visual.sub-visual-style-10 .sv10-list li {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
}
#visual.sub-visual-style-10 .sv10-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 15px;
	box-sizing: border-box;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(15px, 1.17vw, 20px);
	font-weight: 700;
	letter-spacing: -0.05em;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: color .25s ease;
}
#visual.sub-visual-style-10 .sv10-list li:hover a,
#visual.sub-visual-style-10 .sv10-list li.is-current a { color: #fff; }
/* 호버 중 비활성 라벨은 살짝 죽여 강조 (레퍼런스: hover=흰색 / 나머지=검정 대응) */
#visual.sub-visual-style-10 .sv10-pill-bar.is-hovering .sv10-list li a { color: rgba(255, 255, 255, .6); }
#visual.sub-visual-style-10 .sv10-pill-bar.is-hovering .sv10-list li:hover a { color: #fff; }

/* 인디케이터 — JS 가 width(set) + x(애니메이션)를 넣는다.
   무JS 기본값: PHP 가 내려준 `--sv10-n`(항목 수)·`--sv10-i`(현재 인덱스)로 균등폭 기준 칸을 계산한다.
   `no-current`(이 페이지가 자기 목록에서 제외된 경우)면 숨기고 **호버 추적으로만** 보여준다. */
#visual.sub-visual-style-10 .sv10-pill-ind {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 46px;
	width: calc(100% / var(--sv10-n, 3));
	border-radius: 999px;
	background-color: var(--primary, #740003);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transform: translateX(calc(var(--sv10-i, 0) * 100%));
	will-change: transform;
}
#visual.sub-visual-style-10 .sv10-pill-bar.no-current .sv10-pill-ind { opacity: 0; }

/* -------- 태블릿 ≤1023 -------- */
/* ⚠️ 높이 3단계 규약(style-01/02/05 와 동일): 데스크톱 var(--sv-h) · 태블릿 var(--sv-h-tab) · 모바일 var(--sv-h-mob).
      이 미디어쿼리가 없으면 **프론트에서 태블릿/모바일 설정값이 무시**된다(2026-09-20 사용자 신고).
      min-height 는 "설정값이 너무 작아 내용이 잘리는 것"을 막는 하한일 뿐 — 평소엔 설정값이 그대로 적용된다. */
@media (max-width: 1023px) {
	#visual.sub-visual-style-10 .sv10-band { height: var(--sv-h-tab, 420px); min-height: 300px; }
	#visual.sub-visual-style-10 .sv10-tit { font-size: 20px; }
	#visual.sub-visual-style-10 .sv10-sub-txt { font-size: 40px; }
	#visual.sub-visual-style-10 .sv10-sub-txt-2 { font-size: 18px; margin-top: 16px; }
	#visual.sub-visual-style-10 .sv10-txt-inner { padding-bottom: clamp(76px, 9vh, 104px); }
	#visual.sub-visual-style-10 .sv10-list li a { height: 44px; font-size: 15px; padding: 0 12px; }
	#visual.sub-visual-style-10 .sv10-pill-ind { height: 44px; }
	#visual.sub-visual-style-10 .sv10-pill-bar { width: calc(100% - 28px); }
}

/* -------- 모바일 ≤767: 밴드는 내용만큼 자란다 (고정 250px + 잘림 방지) -------- */
@media (max-width: 767px) {
	#visual.sub-visual-style-10 .sv10-band {
		height: auto;
		min-height: var(--sv-h-mob, 250px);
		padding: 56px 0 104px;
	}
	#visual.sub-visual-style-10 .sv10-txt-inner { padding-bottom: 0; }
	/* 좁고 낮은 밴드에서 글자가 넘쳐 잘리지 않도록 압축(부제는 2줄 클램프) */
	#visual.sub-visual-style-10 .sv10-breadcrumb ul { font-size: 11px; margin-bottom: 10px; gap: 6px; }
	#visual.sub-visual-style-10 .sv10-tit { font-size: 1rem; margin-bottom: 10px; line-height: 1.4; }
	#visual.sub-visual-style-10 .sv10-sub-txt {
		font-size: 2.3rem;
		line-height: 1.4;
	}
	#visual.sub-visual-style-10 .sv10-sub-txt-2 {
		font-size: 1.125rem;
		margin-top: 12px;
		line-height: 1.6;
		padding-top: 2rem;
	}
	#visual.sub-visual-style-10 .sv10-pill-bar { width: calc(100% - 20px); bottom: 14px; }
	#visual.sub-visual-style-10 .sv10-list {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	#visual.sub-visual-style-10 .sv10-list::-webkit-scrollbar { display: none; }
	#visual.sub-visual-style-10 .sv10-list li { flex: 1 0 auto; }
	#visual.sub-visual-style-10 .sv10-list li a { height: 40px; font-size: 13.5px; padding: 0 13px; }
	#visual.sub-visual-style-10 .sv10-pill-ind { height: 40px; }
}

/* -------- 모션 축소 — 전환 없음(정적 배치) -------- */
@media (prefers-reduced-motion: reduce) {
	#visual.sub-visual-style-10 .sv10-pill-ind { will-change: auto; }
	#visual.sub-visual-style-10 .sv10-list li a { transition: none; }
}