/* ==========================================================================
   MODULE: pages/onsite — 출장와주소 (홈 4번 섹션)
   마크업: template-parts/hero/onsite.php

   구조
     .wzs-onsite         섹션. 사진 배경은 --photo 가 붙었을 때만.
       .wzs-section-head 배지 + 제목 + 연결 문장
       .wzs-onsite-cards 아이콘 카드 3장
       .wzs-onsite-close 핵심 한 줄 ("15년차 노련한 비즈니스맨이…")
       .wzs-onsite-price 금액 한 줄
       .wzs-onsite-more  서비스안내 출장와주소 블록으로 가는 링크

   앞뒤 섹션(검색 목업 / 요금)이 모두 밝은 바탕이라 여기만 어둡게 둔다 —
   새 상품이라 존재 자체를 알려야 하고, 색이 바뀌면 스크롤 중에 걸린다.
   여백·타이포는 기존 섹션 규칙을 그대로 따른다(--wzs-space-*, --wzs-fs-*).
   ========================================================================== */

.wzs-onsite {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

/* 사진은 낮게 깔고 글자가 읽히도록 어둡게 덮는다. 위아래를 더 진하게 잡은 이유:
   가운데(카드 줄)는 흰 카드가 놓여 사진이 어차피 가려지고, 글자는 위아래에 있다. */
.wzs-onsite--photo {
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.93) 0%, rgba(16, 24, 40, 0.82) 50%, rgba(16, 24, 40, 0.93) 100%),
		var(--wzs-onsite-photo);
	background-size: cover;
	background-position: center;
}

.wzs-onsite-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
	text-align: center;
}

/* 다크 배경이라 섹션 헤드의 기본 색(어두운 잉크)을 뒤집는다.
   components/section-head.css 를 고치면 밝은 섹션까지 같이 바뀌므로 여기서만 덮는다. */
.wzs-onsite .wzs-section-head h2 {
	color: var(--wzs-white);
}

.wzs-onsite .wzs-section-head p {
	color: rgba(255, 255, 255, 0.78);
}

/* 연결 문장의 뒷부분만 세운다 — 앞 섹션에서 이 섹션으로 넘어가는 지점이다 */
.wzs-onsite .wzs-section-head p strong {
	font-weight: 700;
	color: var(--wzs-white);
}

/* ==========================================================================
   탑승권 목업 (.wzs-onsite-pass)
   앞 두 섹션이 화면 목업(위챗·카톡 / 검색)이라 여기서는 화면이 아닌 "사물"을 그린다.
   같은 목업이되 결이 달라야 세 섹션이 연달아 스크린샷처럼 보이지 않는다.

   구조
     .wzs-pass-main  왼쪽 본권 — 노선·도시·탑승자
     .wzs-pass-stub  오른쪽 반쪽 — 점선으로 잘리는 부분

   두 조각을 점선으로 가르고, 그 위아래에 반원을 파서 실제로 뜯는 표를 흉내낸다.
   반원은 배경색을 그대로 덮는 원이 아니라 radial-gradient 로 뚫는다 —
   섹션 배경이 사진이라 단색 원을 얹으면 그 자리만 색이 달라 티가 난다.
   ========================================================================== */
.wzs-onsite-pass {
	margin: var(--wzs-space-7) auto 0;
	max-width: 460px;
	display: flex;
	align-items: stretch;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wzs-white);
	color: var(--wzs-ink);
	box-shadow: var(--wzs-shadow-lg);
	text-align: left;
}

.wzs-pass-main {
	flex: 1;
	min-width: 0;
	padding: var(--wzs-space-4);
}

.wzs-pass-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--wzs-ink-muted);
}

/* 출발지 — 비행기 — 도착지. 가운데 선이 양쪽으로 늘어나 노선처럼 보인다. */
.wzs-pass-route {
	margin-top: var(--wzs-space-2);
	display: flex;
	align-items: center;
	gap: var(--wzs-space-3);
}

.wzs-pass-code {
	font-size: var(--wzs-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wzs-pass-plane {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wzs-blue);
	/* 점선 활주로. 아이콘 양옆으로만 그어지도록 배경으로 깐다. */
	background-image: linear-gradient(90deg, var(--wzs-border) 50%, transparent 50%);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	background-position: 0 50%;
}

.wzs-pass-plane svg {
	width: 20px;
	height: 20px;
	/* 선 위에 아이콘만 떠 보이도록 아이콘 뒤만 흰색으로 덮는다 */
	background: var(--wzs-white);
	padding: 0 6px;
	box-sizing: content-box;
}

.wzs-pass-cities {
	margin-top: 2px;
	display: flex;
	justify-content: space-between;
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}

.wzs-pass-fields {
	margin-top: var(--wzs-space-3);
	padding-top: var(--wzs-space-3);
	border-top: 1px solid var(--wzs-border);
	display: flex;
	gap: var(--wzs-space-5);
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
}

/* 라벨은 값 위에 작게. b 를 쓰는 이유는 굵기가 아니라 줄바꿈 지점을 만들기 위함이다. */
.wzs-pass-fields b {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wzs-ink-muted);
}

/* 뜯는 반쪽. 왼쪽 경계의 점선과 위아래 반원이 "여기서 잘린다"를 만든다. */
.wzs-pass-stub {
	position: relative;
	flex: none;
	width: 104px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wzs-space-1);
	padding: var(--wzs-space-4) var(--wzs-space-2);
	background: var(--wzs-bg);
	border-left: 1px dashed var(--wzs-border);
	text-align: center;
}

/* 위아래에서 반원을 파낸다 — 경계선 위에 정확히 걸치게 둔다 */
.wzs-pass-stub::before,
.wzs-pass-stub::after {
	content: '';
	position: absolute;
	left: -9px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--wzs-ink);
}

.wzs-pass-stub::before {
	top: -9px;
}

.wzs-pass-stub::after {
	bottom: -9px;
}

.wzs-pass-stub-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--wzs-ink-soft);
	word-break: keep-all;
}

.wzs-pass-stub-seat {
	font-size: var(--wzs-fs-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* 좁은 화면에서는 반쪽을 떼고 본권만 남긴다 — 460px 를 둘로 나누면
   양쪽 다 읽기 어려운 폭이 된다. */
@media (max-width: 480px) {
	.wzs-pass-stub {
		display: none;
	}
}

/* --- 세 칸 (카드가 아니다) ---
   다크 배경 위에 세로 구분선으로만 나눈다. 흰 상자를 쓰지 않는 이유:
   위 탑승권과 아래 요금 카드까지 흰 상자가 아홉 개 연달아 나와 눈이 지쳤다.
   상자를 걷어내면 이 섹션의 흰 물체는 탑승권 하나뿐이라 그게 주인공이 된다.

   grid 로 두는 이유: flex 로 하면 부연 문구 길이가 달라 칸 폭이 제각각이 된다.
   minmax(0,1fr) 의 0 이 중요하다 — auto 면 긴 문구가 칸을 밀어 넓힌다.

   gap 을 0 으로 두고 칸 안쪽 여백으로만 벌리는 이유:
   구분선은 칸의 왼쪽 테두리라 gap 이 있으면 선이 빈칸의 한쪽 끝에 붙는다.
   실제로 글에서 선까지가 한쪽은 24px, 반대쪽은 48px 로 어긋나 있었다.
   gap 0 + 좌우 같은 padding 이면 선이 정확히 가운데 온다. */
.wzs-onsite-cards {
	margin-top: var(--wzs-space-7);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.wzs-onsite-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wzs-space-3);
	padding: 0 var(--wzs-space-5);
	text-align: center;
}

/* 칸 사이의 얇은 세로선. 첫 칸 왼쪽에는 긋지 않는다 — 바깥 테두리처럼 보인다. */
.wzs-onsite-card + .wzs-onsite-card {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* 아이콘은 파스텔 사각형 배지를 벗기고 선만 남긴다.
   배지를 쓰면 요금 카드의 아이콘 배지와 똑같이 생겨서, 색만 다른 같은 물건이 된다.
   크기를 키운 건 배경이 없어진 만큼 존재감을 선으로 대신하기 위함이다. */
.wzs-onsite-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wzs-white);
	opacity: 0.9;
}

.wzs-onsite-icon svg {
	width: 34px;
	height: 34px;
	stroke-width: 1.5;
}

.wzs-onsite-card-title {
	margin-top: var(--wzs-space-2);
	font-size: var(--wzs-fs-lg);
	font-weight: 700;
	color: var(--wzs-white);
}

.wzs-onsite-card-desc {
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.72);
	word-break: keep-all;
}

/* --- 맺음 두 줄 ---
   아랫줄("…비즈니스맨이 직접 나갑니다")이 이 상품의 핵심이다.
   윗줄은 그 말을 받쳐 주는 문장이라 한 단계 작고 연하게 두고 줄을 나눈다 —
   둘을 같은 굵기로 두면 아랫줄이 서지 않는다. */
.wzs-onsite-close {
	margin: var(--wzs-space-7) 0 0;
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	line-height: var(--wzs-lh-tight);
	letter-spacing: -0.01em;
	word-break: keep-all;
}

/* 이력 세 줄. 결론 한 줄과 굵기·크기로 갈라 둔다 —
   같은 무게로 두면 어디가 결론인지 안 보인다.
   줄 간격을 본문 기준(lh-article)으로 두는 이유: 세 줄이 이어지는 덩어리라
   제목용 좁은 줄 간격(lh-tight)을 물려받으면 답답해 보인다. */
.wzs-onsite-close span {
	display: block;
	margin-bottom: var(--wzs-space-4);
	font-size: var(--wzs-fs-base);
	font-weight: 400;
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.78);
}

/* 금액은 핵심 문장보다 작게. 여기서 크게 키우면 이 섹션이 요금표처럼 읽히고,
   바로 다음에 오는 진짜 요금 섹션과 역할이 겹친다.
   맺음 문장과 8px 만 띄웠더니 한 덩어리로 붙어 보여 한 단계 벌렸다. */
.wzs-onsite-price {
	margin: var(--wzs-space-3) 0 0;
	font-size: var(--wzs-fs-base);
	color: rgba(255, 255, 255, 0.72);
}

.wzs-onsite-more {
	margin-top: var(--wzs-space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-weight: 700;
	color: var(--wzs-amber);
	text-decoration: none;
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-onsite-more:hover {
	gap: var(--wzs-space-2);
}

.wzs-onsite-more:focus-visible {
	outline: 2px solid var(--wzs-amber);
	outline-offset: 3px;
}

/* --- 좁은 화면: 세로로 쌓는다 ---
   3열을 그대로 두면 칸 하나가 100px 대로 눌려 제목이 두 줄로 꺾인다.
   쌓으면 세로선 대신 가로선으로 나눠야 구분이 보인다. */
@media (max-width: 720px) {
	.wzs-onsite-cards {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* 아이콘을 왼쪽에 두고 가로로 눕혀 스크롤 길이를 줄인다 —
	   아래로 요금 카드 다섯 장이 이어지는 구간이라 여기서 아껴야 한다. */
	.wzs-onsite-card {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--wzs-space-3);
		/* 위아래 같은 여백 — 가로선이 칸 사이 정중앙에 오게 한다 */
		padding: var(--wzs-space-5) 0;
		text-align: left;
	}

	.wzs-onsite-card:first-child {
		padding-top: 0;
	}

	.wzs-onsite-card:last-child {
		padding-bottom: 0;
	}

	.wzs-onsite-card + .wzs-onsite-card {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}

	.wzs-onsite-icon {
		flex: none;
	}

	.wzs-onsite-icon svg {
		width: 26px;
		height: 26px;
	}

	.wzs-onsite-card-title {
		flex: 1;
		min-width: 0;
		margin-top: 0;
	}

	/* 부연은 아이콘 아래 칸을 비우고 한 줄을 통째로 쓴다 */
	.wzs-onsite-card-desc {
		flex-basis: 100%;
	}

	.wzs-onsite-close {
		font-size: var(--wzs-fs-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-onsite-more {
		transition: none;
	}
}