/* ==========================================================================
   OSBC main-design2 — main.css (index 전용)
   Hero(C+H) / Products(A 카테고리 컬럼형) / Services(A 변형 틴트 카드)
   Clients(E) / Stats(D) / Insights(B) / CTA(F는 common)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — 패턴 C+H. 라이트 틴트 풀폭 밴드 + 4슬라이드 페이드
   -------------------------------------------------------------------------- */
.hero {
	--hero-tint: #EAF6FC;
	position: relative;
	background-color: var(--hero-tint);
	transition: background-color 0.8s ease;
	overflow: hidden;
}

/* 허용된 유일한 그라디언트: 틴트 → 화이트 미묘한 하단 페이드 */
.hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
	pointer-events: none;
}

/* 슬라이드별 배경 틴트 미세 변주 (블루 틴트 계열 내) */
.hero--s1 {
	--hero-tint: #EAF6FC;
}

.hero--s2 {
	--hero-tint: #E2F1FA;
}

.hero--s3 {
	--hero-tint: #EBF5F9;
}

.hero--s4 {
	--hero-tint: #EFF7FC;
}

.hero-inner {
	position: relative;
	height: 600px;
	z-index: 1;
}

.hero-slides {
	position: relative;
	height: 100%;
}

.hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 72px;
	padding-bottom: 36px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s ease, visibility 0.55s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero-copy {
	flex: 1;
	min-width: 0;
}

.hero-copy .eyebrow {
	margin-bottom: 18px;
}

.hero-title {
	font-size: 48px; /* 54 → 48 (2026-06-10 사용자 조정) */
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-ink);
}

.hero-desc {
	margin-top: 22px;
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--c-text-sub);
	max-width: 560px;
}

.hero-copy .btn {
	margin-top: 34px;
}

/* 우측 비주얼 슬롯 (패턴 H 규칙) */
.hero-visual {
	flex-shrink: 0;
	width: 520px;
	height: 380px;
}

.hero-visual .img-slot {
	width: 100%;
	height: 100%;
}

.hero-visual-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* 좌하단 컨트롤: 도트 4 + 카운터 + 자동재생 토글 */
.hero-controls {
	position: absolute;
	left: var(--pad-x);
	bottom: 44px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hero-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: rgba(17, 20, 24, 0.18);
	transition: width 0.25s ease, background-color 0.25s ease;
}

.hero-dot.is-active {
	width: 26px;
	background: var(--c-primary-deep);
}

.hero-counter {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-sub);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.hero-counter-current {
	color: var(--c-ink);
}

.hero-autoplay {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(17, 20, 24, 0.18);
	border-radius: var(--radius-pill);
	color: var(--c-text-sub);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-autoplay:hover {
	border-color: var(--c-primary-deep);
	color: var(--c-primary-deep);
}

.hero-autoplay .icon-play {
	display: none;
}

.hero-autoplay.is-paused .icon-pause {
	display: none;
}

.hero-autoplay.is-paused .icon-play {
	display: block;
}

/* --------------------------------------------------------------------------
   Products 공통 — 섹션 패딩·헤딩 (아래 그리드형·컬럼형 양 버전이 공유)
   -------------------------------------------------------------------------- */
.section-products {
	padding: 88px 0 96px;
}

.section-products .section-head {
	margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   Products [컬럼형 변주] — _variant-products-columns.html 전용 보존분 (삭제 금지)
   index.html은 사용하지 않음 → 아래 [현행 · 압축 6카드 그리드형] 블록 참조
   -------------------------------------------------------------------------- */
.products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.product-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 2px solid var(--c-primary);
	padding-top: 16px;
}

.product-col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 26px;
	margin-bottom: 2px;
}

.product-cat {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--c-primary-deep);
}

/* 분류 협의 중 컬럼 — 보더·라벨·카드 톤 mute */
.product-col.is-pending {
	border-top-color: var(--c-border);
}

.product-col.is-pending .product-cat {
	color: var(--c-text-mute);
}

.product-card {
	display: block;
	padding: 20px 22px 18px;
}

.product-card-cat {
	display: block;
	font-size: 12px;
	color: var(--c-text-mute);
	margin-bottom: 4px;
	line-height: 1.5;
}

.product-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.35;
}

.product-desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text-sub);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-primary-deep);
}

.product-link .arrow {
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.product-card:hover .product-link .arrow {
	transform: translateX(4px);
}

.product-card.is-pending {
	background: #FAFBFC;
	border-color: var(--c-border-soft);
}

.product-card.is-pending:hover {
	border-color: var(--c-primary);
}

.product-card.is-pending .product-name {
	color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Products [현행 · 압축 6카드 그리드형 / 이미지 배경 카드] — index.html 사용
   1차 시안(main-design)의 다크 이미지 카드 이식: Clarity 3종 배경 이미지 +
   FossID·Snyk·RL 차콜 단색(var(--c-footer) — 1차 네이비 #14192a 금지).
   3열×2행, 카드 높이 188px 고정 — 헤딩 포함 1080 한 화면 수납.
   호버는 배경 이미지 1.03 미세 줌 + 보더 컬러 전환만 — 리프트·그림자 금지.
   -------------------------------------------------------------------------- */
.products-grid-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.product-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 230px; /* C안 다이어트(2026-06-10 사용자 확정): 280 → 230, 다크 면적 축소 */
	padding: 20px 24px 18px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-footer); /* 단색 카드 기본 = 푸터 차콜 */
}

/* 호버 보더 — 오버레이 방식 (이미지 줌과 분리, 박스 크기 불변) */
.product-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	pointer-events: none;
	transition: border-color 0.3s ease;
}

.product-tile:hover::after {
	border-color: var(--c-primary);
}

/* 배경 이미지 레이어 (Clarity 3종) — 이미지 자체에 좌측 음영 포함 */
.product-tile-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}

.product-tile:hover .product-tile-bg {
	transform: scale(1.03);
}

/* C안: 상단 카테고리 라벨 가독용 미세 수직 스크림 (이미지 카드 전용) */
.product-tile-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 20, 24, 0.32) 0%, rgba(17, 20, 24, 0) 38%);
}

/* 사용자 직접수정-1 색상 매칭본 (2026-06-10): Clarity 딥블루 / AIR 틸 / SC 시안 */
.product-tile-bg--binary { background-image: url("../img/bg-clarity-binary2.png"); }
.product-tile-bg--air { background-image: url("../img/bg-clarity-air2.png"); }
.product-tile-bg--sc { background-image: url("../img/bg-clarity-sc2.png"); }

/* 이미지 카드 좌→우 미세 다크 스크림 — 좌측 텍스트 가독 보강 */
.product-tile--img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(17, 20, 24, 0.38) 0%, rgba(17, 20, 24, 0.1) 65%, rgba(17, 20, 24, 0) 100%);
	pointer-events: none;
}

/* 콘텐츠 레이어 — 배경·스크림 위 */
.product-tile-head,
.product-tile-name,
.product-tile-desc,
.product-tile-link {
	position: relative;
	z-index: 2;
}

/* C안: 카테고리 라벨 상단 고정 + 본문(제품명·설명·링크) 하단 — 빈 면이 라벨과 본문 사이로 */
.product-tile-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
	margin-top: 0;
	margin-bottom: auto;
}

.product-tile-cat {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}

/* 협의 중 칩 — 다크 카드 위 흰 아웃라인 pill (clarity-supply-chain 히어로 칩 문법) */
.product-tile-head .chip-pending {
	padding: 2px 10px;
	font-size: 11.5px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: rgba(255, 255, 255, 0.85);
}

.product-tile-name {
	font-size: 21px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.3;
}

.product-tile-desc {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	min-height: 42px; /* 2줄 기준 행 높이 통일 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-tile-link {
	display: inline-block;
	padding-top: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #FFFFFF;
}

.product-tile-link .arrow {
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.product-tile:hover .product-tile-link .arrow {
	transform: translateX(4px);
}

/* 협의 중 2종(Snyk·ReversingLabs) — 동일 차콜 계열에서 명도 미세 차등 + 텍스트 톤 다운 */
.product-tile.is-pending {
	background: #232A32; /* var(--c-footer) #1A2128의 명도 +α 변주 */
}

.product-tile.is-pending .product-tile-name {
	color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   Services — 패턴 A 변형. 틴트 카드 3장 (지니언스 About 카드 스타일)
   -------------------------------------------------------------------------- */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.service-card {
	display: block;
	padding: 36px 34px 32px;
}

.service-no {
	display: inline-flex;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--c-tint-2);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--c-primary-deep);
}

.service-title {
	margin-top: 20px;
	font-size: 24px;
	font-weight: 700;
}

.service-divider {
	height: 1px;
	background: var(--c-tint-2);
	margin: 20px 0;
	border: 0;
}

.service-desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-text-sub);
	min-height: 76px;
}

.service-link {
	display: inline-block;
	margin-top: 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--c-primary-deep);
}

.service-link .arrow {
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.service-card:hover .service-link .arrow {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Clients — 패턴 E. bg-alt 밴드 + 센터 인트로 + 로고 필 6×3
   -------------------------------------------------------------------------- */
.section-clients {
	background: var(--c-bg-alt);
}

.clients-intro {
	text-align: center;
	margin-bottom: 48px;
}

/* 인벤토리 Section 4 eyebrow(OUR CLIENTS) — 센터 인트로(패턴 E)에 맞춰 가운데 정렬 */
.clients-intro .eyebrow {
	text-align: center;
	margin-bottom: 14px;
}

.clients-title {
	font-size: 30px;
	font-weight: 800;
}

.clients-lead {
	margin-top: 12px;
	font-size: 16px;
	color: var(--c-text-sub);
}

.clients-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.client-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	background: var(--c-bg);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--c-text-mute);
}


/* 로고 마퀴 — 2줄 양방향 무한 슬라이드 (2026-06-10 사용자 요청: 그리드 → 슬라이더) */
.clients-marquee {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* 좌우 가장자리 페이드 (기능성 마스크) */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.marquee-row {
	overflow: hidden;
}

.marquee-track {
	display: flex;
	width: max-content;
	animation: marquee-left 42s linear infinite;
}

.marquee-row--reverse .marquee-track {
	animation-name: marquee-right;
}

.marquee-row:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-track .client-pill {
	flex: 0 0 auto;
	width: 196px;
	margin-right: 16px; /* gap 대신 margin — translateX(-50%) 루프가 정확히 1사이클이 되도록 */
}

@keyframes marquee-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes marquee-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

.clients-action {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Stats — 패턴 D. 화이트, 타이포만 (박스 없음). 센터 인트로 허용 영역
   -------------------------------------------------------------------------- */
.stats-grid {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin-top: 72px;
	padding: 0 20px;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.stat-unit {
	font-size: 24px;
	font-weight: 700;
	margin-left: 2px;
}

.stat-label {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-primary-deep);
}

/* --------------------------------------------------------------------------
   Insights — 패턴 B. 좌 타이틀+버튼 / 우 리스트 (지니언스 새로운 소식)
   -------------------------------------------------------------------------- */
.section-insights {
	background: var(--c-bg-alt);
}

.insights-layout {
	display: flex;
	gap: 80px;
}

.insights-head {
	width: 360px;
	flex-shrink: 0;
}

.insights-head .eyebrow {
	margin-bottom: 14px;
}

.insights-head .section-lead {
	margin-top: 14px;
}

.insights-head .btn {
	margin-top: 32px;
}

.insights-list {
	flex: 1;
	border-top: 1px solid var(--c-border);
}

.insight-item {
	display: block;
	padding: 28px 8px;
	border-bottom: 1px solid var(--c-border);
}

.insight-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.4;
	transition: color 0.15s ease;
}

.insight-item:hover .insight-title {
	color: var(--c-primary-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.insight-summary {
	margin-top: 8px;
	font-size: 15px;
	color: var(--c-text-sub);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.insight-date {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--c-text-mute);
}