/**
 * 비즈니스 문의 허브 (/biz/) — page-biz.php
 *
 * ⚠ 토큰 규칙 (자료실 .rs-page 와 같은 계약)
 *   이 페이지는 디자인 시스템 v3 값으로 그린다. 그런데 라이브 테마 :root 에는
 *   같은 이름의 토큰이 **다른 값**으로 존재한다 (--radius-lg 16px vs v3 8px,
 *   --gray-100 #f3f4f6(쿨) vs v3 #F0F0ED(웜), --space-xl 32px vs v3 40px).
 *   그래서 v3 값을 .bz-page 스코프 안에 --bz-* 로 새로 깐다.
 *   전역 :root 는 건드리지 않고, 이 파일 안에서는 --bz-* 외의 토큰을 쓰지 않는다.
 *
 * ⭐ 2026-09-16 2차 — 「AI 가 만든 것 같다」를 걷어냈다(운영자 지적).
 *   걷어낸 것: **연한 색 사각형에 든 선 아이콘 타일**(.bz-card-ico) · 카드의 테두리·그림자·
 *   둥근 상자 · 알약 배지. 셋 다 SaaS 템플릿 어디에나 있는 장식이라 화면이 남의 것처럼 보였다.
 *   대신 **규칙선(hairline) + 타이포그래피 + 여백**이 일한다(Pitch·Locomotive·SSENSE 수법).
 *   화면에서 채운 단추는 **딱 하나**(기업 강의)다. 나머지는 전부 글자 링크다.
 *
 * ⚠ .marquee-row / .marquee-track / .logo-item 은 테마 공용 렌더러
 *   (includes/onsite/data-credibility.php)가 내는 **고정 클래스명**이다.
 *   page-about.php 는 자기 인라인 CSS 로 같은 클래스를 그린다 — 여기서는 반드시
 *   .bz-page 아래로 스코프해 두 페이지가 서로를 덮지 않게 한다.
 */

/* 히어로 딥그린 면과 로고 마키가 화면 끝까지 닿아야 한다 → 전폭.
   ⚠ 스코프 없이 #page 를 풀면 다른 페이지까지 영향을 받는다. */
body.page-template-page-biz #page.grid-container {
	max-width: 100%;
}

/* ─────────────────────────────────────────────
   스코프 토큰 (v3 정본값 리터럴)
   ───────────────────────────────────────────── */
.bz-page {
	--bz-primary-600: #047E57;
	--bz-primary-700: #036546;
	--bz-primary-800: #024A33;   /* 히어로 면 */

	--bz-gray-50: #F7F7F5;
	--bz-gray-200: #E6E6E2;
	--bz-gray-400: #A8A8A2;
	--bz-gray-500: #8A8A85;
	--bz-gray-700: #45453F;
	--bz-gray-900: #1B1B18;

	--bz-surface: #FFFFFF;

	/* 딥그린 면 위의 글자 — 흰색 투명도로 단계를 만든다.
	   ⭐ 별도 색을 새로 정의하지 않는다(연한 색 스케일이 이미 9벌 난립해 있다). */
	--bz-on-dark: rgba(255, 255, 255, 0.78);
	--bz-on-dark-dim: rgba(255, 255, 255, 0.62);
	--bz-on-dark-line: rgba(255, 255, 255, 0.16);

	--bz-r-md: 6px;   /* 단추 — 버튼과 같은 곡률. pill 금지 */

	--bz-container: 1160px;
	--bz-gutter: 30px;

	--bz-fast: 150ms ease;
	--bz-font-en: "Inter", "Pretendard Variable", Pretendard, system-ui, sans-serif;

	background: var(--bz-surface);
	color: var(--bz-gray-700);
}

@media (max-width: 1024px) { .bz-page { --bz-gutter: 24px; } }
@media (max-width: 768px)  { .bz-page { --bz-gutter: 20px; } }
@media (max-width: 480px)  { .bz-page { --bz-gutter: 16px; } }
@media (prefers-reduced-motion: reduce) { .bz-page { --bz-fast: 0ms; } }

.bz-wrap {
	max-width: var(--bz-container);
	margin: 0 auto;
	padding-left: var(--bz-gutter);
	padding-right: var(--bz-gutter);
}

/* 스크린리더 전용 */
.bz-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ─────────────────────────────────────────────
   히어로 — 브랜드 딥그린 단색 면 + 지표 동거
   ⭐ 지표를 여기 둔 이유: 창구를 고르는 순간에 근거가 같은 화면에 있어야 한다.
   ⚠ 그라디언트가 아니라 단색이다 — 그라디언트 신규 도입은 금지돼 있다.
   ───────────────────────────────────────────── */
.bz-hero {
	background: var(--bz-primary-800);
	color: #FFFFFF;
}

.bz-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px 56px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.bz-hero-copy { min-width: 0; }

.bz-eyebrow {
	margin: 0;
	font-family: var(--bz-font-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bz-on-dark-dim);
	line-height: 1.3;
}

.bz-h1 {
	margin: 12px 0 0;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.2;
	color: #FFFFFF;
}

.bz-lede {
	margin: 14px 0 0;
	max-width: 32em;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bz-on-dark);
}

/* ── 지표 ── 구획은 1px hairline 으로만 나눈다(색 면·컬러바 금지) */
.bz-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	column-gap: 26px;
}

.bz-stat {
	min-width: 0;
	padding-left: 26px;
	border-left: 1px solid var(--bz-on-dark-line);
}

.bz-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.bz-stat-v {
	display: block;
	font-family: var(--bz-font-en);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #FFFFFF;
	white-space: nowrap;
	/* 세어 올라가는 동안 자릿수가 바뀌어도 폭이 흔들리지 않게 */
	font-variant-numeric: tabular-nums;
}

.bz-stat-u {
	font-size: 16px;
	font-weight: 600;
	color: var(--bz-on-dark-dim);
}

.bz-stat-l {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--bz-on-dark);
}

/* 900px 아래에서는 지표가 제목 밑으로 내려간다 — 옆에 두면 둘 다 눌린다 */
@media (max-width: 900px) {
	.bz-hero-inner {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-top: 44px;
		padding-bottom: 44px;
	}
	.bz-h1 { font-size: 32px; }
}

/* 좁아져도 지표는 **3열을 유지**한다 — 세로로 쌓으면 히어로만 한 화면을 먹는다 */
@media (max-width: 560px) {
	.bz-hero-inner { padding-top: 36px; padding-bottom: 36px; }
	.bz-h1 { font-size: 27px; }
	.bz-lede { font-size: 14px; }
	.bz-stats { column-gap: 14px; }
	.bz-stat { padding-left: 14px; }
	.bz-stat-v { font-size: 21px; }
	.bz-stat-u { font-size: 12px; }
	.bz-stat-l { font-size: 11.5px; margin-top: 4px; }
}

/* ─────────────────────────────────────────────
   로고 선반 — 히어로 바로 밑에 붙여 한 덩어리로 읽히게 한다
   ⭐ 로고를 상자에 담지 않는다. 흰 타일에 테두리를 두르면 로고마다 크기가 달라
      상자만 줄지어 보이고 상표는 안 읽힌다. 면 위에 그냥 얹는다.
   ───────────────────────────────────────────── */
/* ⚠️ 띠는 **흰 바탕**이어야 한다. 파트너 로고 중 .jpg 원본(Microsoft·KOTRA·NICE·
   딜리버리히어로·한화·국민은행 등)은 흰 배경이 이미지에 박혀 있어서, 연한 회색 띠에
   얹으면 로고마다 흰 상자가 떠오른다(실측). 아래 경계선이 카드 구획과 나눠 준다. */
.bz-logos {
	background: var(--bz-surface);
	border-bottom: 1px solid var(--bz-gray-200);
	padding-top: 30px;
	padding-bottom: 34px;
	overflow: hidden;
}

.bz-logos-label {
	max-width: var(--bz-container);
	margin: 0 auto 20px;
	padding: 0 var(--bz-gutter);
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bz-gray-500);
}

/* ── 파트너 마키 ──────────────────────────────
   마크업은 테마 공용 렌더러가 낸다(.marquee-row / .marquee-track / .logo-item).
   트랙에 목록이 **정확히 두 벌** 들어 있어서 -50% 만큼 밀면 이어 붙는다.
   --mq-dur 은 렌더러가 행마다 로고 수에 비례해 넣는다 — 없으면 90s.
   ⚠ 반드시 .bz-page 아래로 스코프한다(page-about.php 가 같은 클래스를 쓴다). */
.bz-page .bz-marquee { overflow: hidden; }

.bz-page .marquee-row {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
}

.bz-page .marquee-row:last-child { margin-bottom: 0; }

/* 양끝 페이드 — 로고가 화면 밖으로 사라지는 자리를 부드럽게 끊는다.
   ⚠ 끝 색을 `transparent` 로 두지 않는다. 일부 브라우저가 투명 **검정**으로 풀어
      띠 가장자리에 회색이 낀다. 바탕색을 알파 0 으로 적어야 한다. */
.bz-page .marquee-row::before,
.bz-page .marquee-row::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.bz-page .marquee-row::before {
	left: 0;
	background: linear-gradient(to right, var(--bz-surface), rgba(255, 255, 255, 0));
}

.bz-page .marquee-row::after {
	right: 0;
	background: linear-gradient(to left, var(--bz-surface), rgba(255, 255, 255, 0));
}

.bz-page .marquee-track {
	display: flex;
	width: max-content;
	align-items: center;
}

@keyframes bzScrollLeft  { 0% { transform: translateX(0);     } 100% { transform: translateX(-50%); } }
@keyframes bzScrollRight { 0% { transform: translateX(-50%);  } 100% { transform: translateX(0);    } }

.bz-page .marquee-left .marquee-track  { animation: bzScrollLeft  var(--mq-dur, 90s) linear infinite; }
.bz-page .marquee-right .marquee-track { animation: bzScrollRight var(--mq-dur, 90s) linear infinite; }
/* ⛔ hover 로 멈추지 않는다(2026-09-16 운영자 결정) — 속도는 늘 같다. */

/* 움직임을 줄이는 설정에서는 흐르지 않게 멈춘다 */
@media (prefers-reduced-motion: reduce) {
	.bz-page .marquee-left .marquee-track,
	.bz-page .marquee-right .marquee-track { animation: none; }
}

.bz-page .logo-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 26px;
}

.bz-page .logo-item img {
	height: 30px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

@media (max-width: 768px) {
	.bz-page .marquee-row::before,
	.bz-page .marquee-row::after { width: 60px; }
	.bz-page .logo-item { height: 38px; padding: 0 18px; }
	.bz-page .logo-item img { height: 25px; max-width: 120px; }
}

/* ─────────────────────────────────────────────
   구획
   ───────────────────────────────────────────── */
.bz-sec {
	padding-top: 56px;
	padding-bottom: 56px;
}

.bz-sec--tail { padding-top: 0; padding-bottom: 72px; }

@media (max-width: 768px) {
	.bz-sec { padding-top: 40px; padding-bottom: 40px; }
	.bz-sec--tail { padding-top: 0; padding-bottom: 56px; }
}

/* ─────────────────────────────────────────────
   문의 유형 — 카드가 아니라 **규칙선으로 나눈 항목**이다
   ⭐ 테두리·그림자·둥근 상자를 쓰지 않는다. 열 위에 그은 1px 선이 경계를 맡고,
      나머지는 글자 크기와 여백이 한다. 상자를 없애면 화면이 갑자기 조용해진다.
   ───────────────────────────────────────────── */
.bz-cards {
	display: grid;
	align-items: stretch;
}

/* ⭐ 두 줄의 열 간격을 **같은 값**으로 둔다. 다르면 위 줄 규칙선의 끝과
   아래 줄 규칙선의 끝이 9px 쯤 어긋나 눈에 걸린다(실측).
   같은 간격이면 2열 경계가 4열 경계 위에 정확히 얹힌다. */
.bz-cards--lead {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
}

.bz-cards--rest {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
}

@media (max-width: 1024px) {
	.bz-cards--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

@media (max-width: 680px) {
	.bz-cards--lead,
	.bz-cards--rest { grid-template-columns: minmax(0, 1fr); }
}

.bz-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 0 26px;
	border-top: 1px solid var(--bz-gray-200);
	color: inherit;
	text-decoration: none;
	transition: border-top-color var(--bz-fast);
}

.bz-card--big { padding: 24px 0 32px; }

/* hover 는 **선과 글자**로만 말한다 — 들어올리거나 그림자를 켜지 않는다 */
a.bz-card:hover { border-top-color: var(--bz-gray-900); }
a.bz-card:hover .bz-card-name { color: var(--bz-primary-700); }
a.bz-card:hover .bz-arrow { transform: translateX(3px); }

/* 포커스는 한 겹만. 상자가 없으므로 offset 을 넉넉히 줘야 글 덩어리로 읽힌다 */
a.bz-card:focus-visible {
	outline: 2px solid var(--bz-primary-600);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	a.bz-card:hover .bz-arrow { transform: none; }
}

.bz-card-name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.4;
	color: var(--bz-gray-900);
	transition: color var(--bz-fast);
}

.bz-card--big .bz-card-name {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.28;
}

.bz-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bz-gray-500);
}

.bz-card--big .bz-card-desc {
	margin-top: 12px;
	max-width: 28em;
	font-size: 14.5px;
	line-height: 1.7;
}

/* 발이 바닥에 붙으므로 설명 길이가 달라도 같은 줄의 마무리가 나란하다 */
.bz-card-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
}

.bz-card--big .bz-card-foot { padding-top: 26px; }

/* 「job.oppadu.com」·「초청 코드 필요」는 **알약이 아니라 글자**다.
   연한 색 면에 든 알약은 어느 템플릿에나 있는 장식이고, 여기서는 그저 덧붙이는 말이다. */
.bz-badge {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bz-gray-400);
	white-space: nowrap;
}

/* 행동이 먼저 읽히고 단서가 뒤따른다 — DOM 은 배지가 먼저지만 화면은 반대로 */
.bz-card-cta,
.bz-btn { order: -1; }

.bz-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bz-primary-700);
	white-space: nowrap;
}

.bz-card--big .bz-card-cta { font-size: 15px; }

.bz-arrow {
	display: inline-block;
	transition: transform 180ms ease;
}

/* 화면에서 채운 단추는 **하나뿐**이다(기업 강의). 둘 이상이면 서로 경쟁해 위계가 사라진다. */
.bz-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--bz-r-md);
	background: var(--bz-primary-700);
	color: #FFFFFF;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	transition: background-color var(--bz-fast);
}

a.bz-card:hover .bz-btn { background: var(--bz-primary-800); }

/* 준비 중 — 색 면을 깔지 않고 글자만 낮춘다.
   blanket opacity 는 대비를 통째로 깎아 AA 를 깬다. */
.bz-card--soon .bz-card-name,
.bz-card--soon .bz-card-desc,
.bz-card--soon .bz-card-cta { color: var(--bz-gray-500); }

/* ─────────────────────────────────────────────
   문의처 — 상자가 아니라 마지막 한 줄이다
   ───────────────────────────────────────────── */
.bz-contact {
	padding-top: 24px;
	border-top: 1px solid var(--bz-gray-200);
}

.bz-contact-t {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bz-gray-900);
}

.bz-contact-d {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bz-gray-500);
}

.bz-contact-d a {
	color: var(--bz-primary-700);
	font-weight: 600;
	text-decoration: none;
}

.bz-contact-d a:hover { text-decoration: underline; }