/**
 * PC 새 틀 — 기업·채용 문의(/biz/) = 고르기 판 28판 「다 · V7」 · 2026-10-27 · 마크업 inc/pc-frame-biz.php · 펼침 · 그림 넘김 · 로고 흐름 · 숫자 올라감 js/pcf-biz.js
 * 운영자 「V7 문의로 합니다. 마우스 호버시 검은색 배경 바뀌도록 합니다.」(시안 claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa 28판 — 값은 시안 C:\tmp\pc-frame\hd2\biz\variants.cjs 「C」 그대로)
 *   → 같은 날 「Webflow Enterprise 이걸로 수정해봅니다」(넣었다가) → 「v7 이 낫네요. 롤백합니다」 + 로고 판 「촤라락 올라가면서 · 숫자도 · 로고는 색상 · 안보이는 부분은 그라데이션」(5절)
 *   → 「호버하면 검은배경 + 초록 버튼으로 바뀜 · 다른데 호버링하고 벗어나면 마지막 호버링 위치 유지」(마지막 판을 남겼다가)
 *   → 「처음에 '기업강의문의' 강조만 디폴트, 그 이후에는 호버링만 검은색. 벗어나면 모두 회색」(3절)
 *   → 29판(별도 아티팩트 7YzeyP37s5inPivWXJNv2L) 「좌측 '문의 창구' 라벨 제거 · 선택한 영역은 크게 펼쳐지면서 안에 내용」 → 「[가] 확정」 = Apple 「Photo Spotlight」(3절 — 값은 시안 C:\tmp\pc-frame\hd2\biz2\sx.css 「a」 그대로).
 * 정본 v4 13.4 「기업·채용 문의」 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만).
 * 정본과 다른 점(시안 카드에 적어 보이고 고름) = 판 사이 3 · 판 모서리 0 — .claude/rules/css.md 카드 예외 줄 · 로고 흐름 · 판 안 그림 넘김 = 움직임 예외 줄 · 위아래 흐림 = 그라디언트 예외 줄.
 */

/* 폰·태블릿(~1024) — 옛 화면 그대로(같은 HTML 에 둘 다 그린다) */
@media (max-width: 1024px) {
	body.pcf-on .pcfbz {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 화면(page-biz.php .bz-page)은 PC 폭에서 숨긴다(표식 body.pcfbz-on = 새 화면을 그린 요청만) ════ */
	body.pcf-on.pcfbz-on #page .bz-page {
		display: none;
	}

	body.pcf-on #page .pcfbz {
		width: var(--pcf-w);
		margin: 0 auto;
		padding-bottom: 88px;
		color: var(--gray-900);
		font-size: 15px;
		line-height: 1.55;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* 링크 초기화 — 부모 테마 a:hover 파랑이 새지 않게(챌린지 홈과 같은 막음) */
	body.pcf-on #page :where(.pcfbz) a,
	body.pcf-on #page :where(.pcfbz) a:hover,
	body.pcf-on #page :where(.pcfbz) a:focus,
	body.pcf-on #page :where(.pcfbz) a:active {
		color: inherit;
		text-decoration: none;
	}

	body.pcf-on #page .pcfbz :where(p, h1, h2, ul, li) {
		margin: 0;
		padding: 0;
	}

	body.pcf-on #page .pcfbz ul {
		list-style: none;
	}

	body.pcf-on #page .pcfbz svg {
		display: block;
		flex: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* ════ 2. 첫 줄 — 제목 40 + 한 줄 17 ════ */
	body.pcf-on #page .pcfbz .pcfbz-head {
		margin-top: 56px;
	}

	body.pcf-on #page .pcfbz .pcfbz-h1 {
		font-size: 40px;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.045em;
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfbz .pcfbz-lede {
		margin-top: 12px;
		font-size: 17px;
		line-height: 1.6;
		color: var(--gray-700);
	}

	/* ════ 3. 문의 창구 — 키 큰 판(V7 · 높이 421 · 사이 3 · 모서리 0) · 29판(2026-10-27 운영자 「[가] 확정」 — Apple 「Photo Spotlight」)
	   「문의 창구」 이름표는 화면에서 걷었다(화면 낭독기용 h2 만) — 판 넷이 칸 폭(1,260)을 다 쓴다.
	   펼친 판(li.is-x · 2.6배 = 1,440 에서 581) = 검정 + 초록 채운 단추 + 오른쪽 세로 그림(3초마다 다음 장 · js/pcf-biz.js 3절) · 좁은 판(223) = 회색 + 이름 + 단추만.
	   처음엔 첫 판(기업 강의)이 펼쳐져 있고(PHP 가 li.is-x · ul.has-x 를 붙여 둔다), 그 뒤로는 마우스를 올린(키보드로 간) 판이 펼쳐진다 · 판 밖으로 벗어나면 넷이 같은 폭 회색(ul.has-x 걷음 —
	   2026-10-27 운영자 「처음에 '기업강의문의' 강조만 디폴트, 그 이후에는 호버링만 검은색. 벗어나면 모두 회색」 그대로). js 가 못 돌면 첫 판이 펼쳐진 채.
	   판 색은 판마다 변수 여섯(--bz-bg · --bz-ink · --bz-sub · --bz-meta · 단추 --bz-btn · --bz-btn-ink)으로 — 상태가 바뀌면 변수만 바꾼다 ════ */
	body.pcf-on #page .pcfbz .pcfbz-row {
		margin-top: 48px;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels {
		--bz-text: 240px;
		display: flex;
		gap: 3px;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li {
		flex: 1 1 0;
		min-width: 0;
		transition: flex-grow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x {
		flex-grow: 2.6;
	}

	body.pcf-on #page .pcfbz .pcfbz-panel {
		--bz-bg: var(--gray-50);
		--bz-ink: var(--gray-900);
		--bz-sub: var(--gray-700);
		--bz-meta: var(--gray-500);
		--bz-btn: var(--surface-white);
		--bz-btn-ink: var(--gray-900);
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 421px;
		padding: 28px 24px 24px;
		overflow: hidden;
		background: var(--bz-bg);
		color: var(--bz-ink);
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x > .pcfbz-panel,
	body.pcf-on #page .pcfbz .pcfbz-panel:hover,
	body.pcf-on #page .pcfbz .pcfbz-panel:focus-visible {
		--bz-bg: var(--gray-900);
		--bz-ink: var(--surface-white);
		--bz-sub: rgba(255, 255, 255, 0.78);
		--bz-meta: var(--gray-400);
		--bz-btn: var(--brand-action);
		--bz-btn-ink: var(--surface-white);
	}

	/* 마우스가 있는 동안 그 판 단추는 한 단 짙게(채운 단추 호버 = --brand-hover) */
	body.pcf-on #page .pcfbz .pcfbz-panel:hover {
		--bz-btn: var(--brand-hover);
	}

	/* 마우스가 판에 있으면 그 판만 검정 — js 가 못 돌 때(첫 판이 펼쳐진 채) 두 판이 같이 검게 되지 않게 */
	body.pcf-on #page .pcfbz .pcfbz-panels:has(.pcfbz-panel:hover) > li > .pcfbz-panel:not(:hover) {
		--bz-bg: var(--gray-50);
		--bz-ink: var(--gray-900);
		--bz-sub: var(--gray-700);
		--bz-meta: var(--gray-500);
		--bz-btn: var(--surface-white);
		--bz-btn-ink: var(--gray-900);
	}

	body.pcf-on #page .pcfbz .pcfbz-panel:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	body.pcf-on #page .pcfbz .pcfbz-t {
		font-size: 26px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.03em;
	}

	body.pcf-on #page .pcfbz .pcfbz-d {
		max-width: var(--bz-text);
		margin-top: 112px;
		font-size: 15px;
		line-height: 1.6;
		color: var(--bz-sub);
		transition: opacity 0.3s ease 0.2s, color 0.2s ease;
	}

	/* 펼친 판 안내 글(inc/pc-frame-biz.php 2절 oppadu_pcfbz_more) — 펼친 판에서만 창구 설명(desc) 대신 · 이름과 단추 사이 가운데(자동 여백 둘이 남는 높이를 반씩) · 폭이 넓어진 뒤 0.2초 늦게 나타남 */
	body.pcf-on #page .pcfbz .pcfbz-x {
		display: none;
		max-width: var(--bz-text);
		margin-top: auto;
		font-size: 15px;
		line-height: 1.6;
		color: var(--bz-sub);
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x .pcfbz-x {
		display: block;
		animation: pcfbz-in 0.4s ease 0.2s both;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x .pcfbz-d:has(+ .pcfbz-x) {
		display: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-foot {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: auto;
	}

	body.pcf-on #page .pcfbz .pcfbz-meta {
		font-size: 13px;
		color: var(--bz-meta, var(--gray-500));
		transition: opacity 0.3s ease 0.2s, color 0.2s ease;
	}

	/* 판 안 단추 — 판 전체가 링크라 단추는 모양만(span) · 펼친 판만 초록 채움(주 행동 하나) · 나머지 흰 면 */
	body.pcf-on #page .pcfbz .pcfbz-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-sizing: border-box;
		height: 42px;
		padding: 0 20px;
		border-radius: 6px;
		background: var(--bz-btn);
		color: var(--bz-btn-ink);
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	/* 좁은 판 = 이름 + 단추만(설명 · 곁 글은 펼친 판에서) */
	body.pcf-on #page .pcfbz .pcfbz-panels.has-x > li:not(.is-x) .pcfbz-d,
	body.pcf-on #page .pcfbz .pcfbz-panels.has-x > li:not(.is-x) .pcfbz-meta {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.12s ease, visibility 0s linear 0.12s;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels.has-x > li:not(.is-x) .pcfbz-btn {
		padding: 0 16px;
	}

	/* 판 안 그림 칸 — 펼친 판 오른쪽(글 칸 240 + 사이 24 뒤 · 1,440 에서 269 × 369) · 판이 넓어지는 동안 폭이 따라 열리고 0.2초 늦게 나타난다 */
	body.pcf-on #page .pcfbz .pcfbz-m {
		position: absolute;
		top: 28px;
		right: 24px;
		bottom: 24px;
		left: calc(24px + var(--bz-text) + 24px);
		display: block;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-800);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.12s ease;
	}

	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x .pcfbz-m {
		opacity: 1;
		transition: opacity 0.4s ease 0.2s;
	}

	/* 한 장씩 겹쳐 두고 지금 장(.is-cur)만 보인다 — 바뀔 때 0.6초 겹쳐 흐려짐 */
	body.pcf-on #page .pcfbz .pcfbz-mi {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	body.pcf-on #page .pcfbz .pcfbz-mi.is-cur {
		opacity: 1;
	}

	/* 프로모션 = 흰 칸에 공식 로고 + 이름 */
	body.pcf-on #page .pcfbz .pcfbz-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 18px;
		background: var(--surface-white);
	}

	body.pcf-on #page .pcfbz .pcfbz-brand img {
		display: block;
		width: 84px;
		height: 84px;
		object-fit: contain;
	}

	body.pcf-on #page .pcfbz .pcfbz-brand b {
		font-size: 17px;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--gray-900);
	}

	/* 몇째 장인지 — 칸 아래 가운데 점(사진 · 흰 칸 어디서나 보이게 옅은 테) */
	body.pcf-on #page .pcfbz .pcfbz-dots {
		position: absolute;
		right: 0;
		bottom: 12px;
		left: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		gap: 6px;
	}

	body.pcf-on #page .pcfbz .pcfbz-dots i {
		display: block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.55);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
		transition: background-color 0.3s ease;
	}

	body.pcf-on #page .pcfbz .pcfbz-dots i.is-cur {
		background: var(--surface-white);
	}

	/* 흰 로고 칸 위에서는 짙은 점 */
	body.pcf-on #page .pcfbz .pcfbz-m--brand .pcfbz-dots i {
		background: var(--gray-200);
		box-shadow: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-m--brand .pcfbz-dots i.is-cur {
		background: var(--gray-900);
	}

	/* 기타 문의 = 그림 대신 받는 문의 넷(운영자 「현행 유지」) */
	body.pcf-on #page .pcfbz .pcfbz-m--list {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 0;
		background: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-lh {
		padding-bottom: 8px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--gray-400);
	}

	body.pcf-on #page .pcfbz .pcfbz-li {
		padding: 12px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		font-size: 17px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--surface-white);
	}

	/* 1,025 ~ 1,279 — 글 칸 200 · 펼친 판 2.8배(1,100 에서 그림 칸 231) · 좁은 판 단추는 화살표만(「채용 사이트 열기」가 판보다 길다) */
	@media (max-width: 1279px) {
		body.pcf-on #page .pcfbz .pcfbz-panels {
			--bz-text: 200px;
		}

		body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x {
			flex-grow: 2.8;
		}

		body.pcf-on #page .pcfbz .pcfbz-panels.has-x > li:not(.is-x) .pcfbz-btn {
			width: 42px;
			padding: 0;
		}

		body.pcf-on #page .pcfbz .pcfbz-panels.has-x > li:not(.is-x) .pcfbz-btn-t {
			display: none;
		}
	}

	/* ════ 4. 미팅 예약 한 줄 — 판 왼쪽 선에 맞춘다 ════ */
	body.pcf-on #page .pcfbz .pcfbz-minor {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 12px;
		margin-top: 24px;
		font-size: 14px;
		color: var(--gray-700);
	}

	body.pcf-on #page .pcfbz .pcfbz-minor b {
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on #page .pcfbz .pcfbz-minor a {
		color: var(--gray-900);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--gray-300);
		text-underline-offset: 3px;
	}

	body.pcf-on #page .pcfbz .pcfbz-minor a:hover {
		text-decoration-color: var(--gray-900);
	}

	/* ════ 5. 함께한 기업·기관 — 2026-10-27 운영자 「촤라락 올라가면서 여러 기업 인 것 처럼 · 숫자도 촤라락 · 화면에 보이는 로고는 색상 · 안보이는 부분은 그라데이션」
	   머리 한 줄의 숫자 셋 = 판이 처음 화면에 들어올 때 0 에서 제 값까지 올라간다(js/pcf-biz.js 2절 · 글자 크기 20 · 자리 폭을 미리 잡아 줄이 흔들리지 않게).
	   로고 = 색 그대로(그 전 9/20 ~ 흑백 0.72) · multiply 로 jpg 로고의 흰 바탕만 칸 색으로 지운다 · 칸 72 · 사이 8 · 8열(옛 화면 값).
	   보이는 창 = 4줄(312) · 그 안에서 로고 80(10줄) 두 벌이 위로 끝없이 흐른다(한 줄 2.5초 = --dur · 두 벌째가 첫 벌 자리에 오면 처음으로 — 이음매 없음) ·
	   위 56 · 아래 88 은 투명으로 흐려진다(마스크 — 투명도만이라 바탕 색과 상관없다) · 화면 밖이면 멈추고(js 가 .is-on) 마우스를 올리면 멈춘다 · 움직임 줄이기면 멈춘 첫 네 줄.
	   ⚠ 흐름 판(.pcfbz-flow)이 transform 으로 쌓임 맥락을 만들어도 칸 바탕(li)이 같은 판 안이라 multiply 가 그대로 먹는다(옛 마키는 칸 없이 띠 바탕 위라 흰 상자가 떴다) ════ */
	body.pcf-on #page .pcfbz .pcfbz-logos {
		margin-top: 96px;
	}

	body.pcf-on #page .pcfbz .pcfbz-logos-h {
		margin-bottom: 20px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--gray-700);
	}

	body.pcf-on #page .pcfbz .pcfbz-logos-h b {
		margin-left: 2px;
		color: var(--gray-900);
		font-size: 20px;
		font-weight: 700;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page .pcfbz .pcfbz-logos-h .pcfbz-dot {
		margin: 0 12px;
		color: var(--gray-300);
	}

	body.pcf-on #page .pcfbz .pcfbz-flow-vp {
		--t: 72px;
		--g: 8px;
		height: calc(4 * var(--t) + 3 * var(--g));
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 88px), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 88px), transparent 100%);
	}

	body.pcf-on #page .pcfbz .pcfbz-flow {
		animation: pcfbz-flow var(--dur, 25s) linear 0.6s infinite;
		animation-play-state: paused;
	}

	body.pcf-on #page .pcfbz .pcfbz-logos.is-on .pcfbz-flow {
		animation-play-state: running;
	}

	body.pcf-on #page .pcfbz .pcfbz-logos.is-on .pcfbz-flow-vp:hover .pcfbz-flow {
		animation-play-state: paused;
	}

	body.pcf-on #page .pcfbz .pcfbz-logo-grid {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--g);
		padding-bottom: var(--g);
	}

	body.pcf-on #page .pcfbz .pcfbz-logo-grid li {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		height: var(--t);
		padding: 0 12px;
		border-radius: 6px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfbz .pcfbz-logo-grid img {
		display: block;
		width: auto;
		height: var(--lh, 26px);
		max-width: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	/* ════ 6. 메일 한 줄 ════ */
	body.pcf-on #page .pcfbz .pcfbz-tail {
		margin-top: 56px;
		text-align: center;
		font-size: 14px;
		color: var(--gray-600);
	}

	body.pcf-on #page .pcfbz .pcfbz-tail a {
		color: var(--gray-900);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--gray-300);
		text-underline-offset: 3px;
	}
}

/* 로고 흐름 — 두 벌 가운데 한 벌 높이(= 50%)만큼 올라가면 처음 자리와 같다 */
@keyframes pcfbz-flow {
	to {
		transform: translateY(-50%);
	}
}

/* 펼친 판 안내 글이 나타날 때 한 번(흐림 → 또렷) */
@keyframes pcfbz-in {
	from {
		opacity: 0;
	}
}

/* 움직임 줄이기 — 판은 바로 펼쳐지고(넓어지는 움직임 없음) · 그림은 첫 장 그대로(넘김 · 점 없음) · 로고는 멈춘 첫 네 줄 */
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	body.pcf-on #page .pcfbz .pcfbz-panels > li,
	body.pcf-on #page .pcfbz .pcfbz-panel,
	body.pcf-on #page .pcfbz .pcfbz-d,
	body.pcf-on #page .pcfbz .pcfbz-meta,
	body.pcf-on #page .pcfbz .pcfbz-btn,
	body.pcf-on #page .pcfbz .pcfbz-m,
	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x .pcfbz-m,
	body.pcf-on #page .pcfbz .pcfbz-mi {
		transition: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-dots {
		display: none;
	}

	body.pcf-on #page .pcfbz .pcfbz-flow,
	body.pcf-on #page .pcfbz .pcfbz-panels > li.is-x .pcfbz-x {
		animation: none;
	}
}