/* ==========================================================================
   MODULE: pages/intl — 외국어 사이트 (/cn/ · /en/)
   마크업: intl/*.php, template-parts/intl/*.php, header-intl.php, footer-intl.php
   글: inc/data/intl-{언어}.php   로드: inc/intl.php (외국어 페이지에서만)

   새 디자인 체계를 만들지 않는다. 한국어 홈의 CSS(hero / timeline / messages / onsite /
   services)를 함께 로드하고, 여기에는 외국어 사이트에만 있는 것과 덮어써야 하는 것만 둔다.

   목차
     1)  글꼴·줄바꿈 — 중문
     2)  헤더 — 현재 메뉴 (언어 전환은 components/lang-switch.css)
     3)  공통 틀 — 안쪽 폭, 섹션 여백, "더 보기" 링크
     4)  위챗 QR (히어로·문의·팝업 공용)
     5)  홈 2-1 히어로
     6)  홈 2-2 검색 목업
     7)  홈 2-3 여섯 가지 역할
     8)  홈 2-4 방한 동행
     9)  홈 2-5 한국 메신저 목업
     10) 홈 2-6 왜 이 사람인가
     11) 홈 2-7 요금
     12) 문의 블록 (홈 2-8 · 서브 페이지 맨 아래) — 중문 QR 중심 / 영문 이메일·위챗 2단
     13) 플로팅 위챗 버튼 · QR 팝업
     14) 서브 페이지 공통 — 페이지 머리, 블록 배경
     15) 서비스 안내 — 역할 상세 · 바이어 발굴 두 단계 · 진행 방식
     16) 회사소개 — 소개 · 이력/언어/위치 · 원칙
     17) 모션 줄이기

   섹션 배경은 번갈아 깐다. 같은 색이 붙으면 경계가 사라진다.
     홈:      사진(어둠) → 흰 → 회색 → 사진(어둠) → 흰 → 회색 → 흰 → 먹
     서비스:  먹 → 흰 → 회색 → 흰 → 회색 → 먹
     회사소개: 흰 → 회색 → 흰 → 먹
   ========================================================================== */


/* ==========================================================================
   1) 글꼴·줄바꿈 — 중문
   ========================================================================== */

/* 중문 페이지는 외부 웹폰트를 받지 않는다(중국 본토에서 막힘 — inc/intl.php 참고).
   Pretendard 에는 간체 글리프가 없어서, 첫 글꼴로 두면 한국 한자와 겹치는 글자만
   한국식 자형으로 그려지고 나머지는 다른 글꼴로 빠져 한 문장 안에서 서체가 갈린다.
   그래서 중문 글꼴을 맨 앞에 둔다. 애플 기기는 PingFang SC, 윈도는 Microsoft YaHei.
   변수는 body 에 다시 선언해야 body 자신의 font-family(typography.css)에도 걸린다. */
.wzs-intl--cn {
	--wzs-font-base: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
	--wzs-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 한국어 섬(검색 결과·메신저 목업·언어 전환의 "한국어")은 한국어 글꼴로 그린다.
   Pretendard 는 받지 않았으므로 시스템 한국어 글꼴을 쓴다. */
.wzs-intl--cn [lang|="ko"] {
	font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* 중요: typography.css 가 body 전체에 word-break: keep-all 을 건다(한국어 어절 줄바꿈).
   중국어는 띄어쓰기가 없어서 keep-all 이면 문장 하나가 통째로 끊기지 않는 한 덩어리가 되고,
   좁은 화면에서 가로로 삐져나간다. 중국어 요소에서만 되돌린다.
   :lang(zh) 로 거는 이유: lang="ko" 인 목업 안은 여기에 안 걸려 한국어 줄바꿈이 그대로 산다.
   명시도 (0,2,0) — 컴포넌트들의 keep-all(대부분 0,1,0)을 이긴다. 낮추지 말 것. */
.wzs-intl--cn :lang(zh) {
	word-break: normal;
	line-break: strict;
}

/* 제목의 음수 자간(-0.01em)은 한글에 맞춘 값이라 한자에서는 글자가 붙어 보인다 */
.wzs-intl--cn :lang(zh):is(h1, h2, h3, h4) {
	letter-spacing: 0;
}


/* ==========================================================================
   2) 헤더 — 현재 메뉴
   헤더 자체(고정·숨김·좁은 화면 2줄)는 layout/header.css 가 그린다.
   ========================================================================== */

.wzs-intl-header .wzs-nav-list a[aria-current="page"] {
	color: var(--wzs-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* 언어 선택 버튼(국기 · 펼침 목록)은 한국어 헤더에도 나와서 components/lang-switch.css 에 있다. */

.wzs-intl-header .wzs-nav-list a:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

/* 좁은 화면에서 언어 선택 버튼은 로고 줄 오른쪽으로 올라간다(layout/header.css) — 메뉴 줄은 가운데 정렬 그대로. */


/* ==========================================================================
   3) 공통 틀
   ========================================================================== */

.wzs-intl-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
}

.wzs-intl-inner--narrow {
	max-width: 760px;
}

.wzs-intl-roles,
.wzs-intl-why,
.wzs-intl-pricing,
.wzs-intl-contact,
.wzs-intl-block {
	padding: var(--wzs-space-7) var(--wzs-space-4);
}

/* 텍스트 링크 "더 보기" — 한국어 홈의 .wzs-newsline-more 와 같은 모양 */
.wzs-intl-more {
	margin-top: var(--wzs-space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-1);
	font-weight: 700;
	color: var(--wzs-blue);
	text-decoration: none;
	transition: gap var(--wzs-duration-fast) var(--wzs-ease);
}

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

.wzs-intl-more:focus-visible,
.wzs-intl-inline-link:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

/* 본문 안 링크(서비스 안내 "请看下方…") */
.wzs-intl-inline-link {
	color: var(--wzs-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 서브 페이지에서 #process 같은 앵커로 이동할 때 고정 헤더에 제목이 가리지 않게 */
.wzs-intl-sub [id] {
	scroll-margin-top: calc(var(--wzs-header-h, 73px) + var(--wzs-space-3));
}


/* ==========================================================================
   4) 위챗 QR — 히어로(md) · 문의(lg) · 팝업(sm)
   크기는 --wzs-qr-size 하나로 정한다. 흰 판 위에 올리는 이유: QR 은 밝은 여백(quiet zone)이
   있어야 인식되는데, 어두운 섹션에 그대로 놓으면 가장자리 대비가 무너진다.
   ========================================================================== */

.wzs-qr {
	--wzs-qr-size: 200px;

	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wzs-space-2);
}

.wzs-qr--sm {
	--wzs-qr-size: 160px;
}

.wzs-qr--lg {
	--wzs-qr-size: 260px;
}

.wzs-qr-img,
.wzs-qr-placeholder {
	width: var(--wzs-qr-size);
	height: var(--wzs-qr-size);
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-white);
}

.wzs-qr-img {
	padding: 10px;
	object-fit: contain;
}

/* 파일(assets/img/contact/wechat-qr.png)이 들어오기 전의 자리 표시.
   QR 무늬를 흉내내지 않는다 — 찍어 볼 수 있을 것처럼 보이면 고장으로 여긴다. */
.wzs-qr-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #c3c8d2;
	color: var(--wzs-ink-muted);
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
}

/* QR 아래 위챗 아이디 한 줄. 같은 폰 화면의 QR 은 카메라로 찍을 수 없어서, 아이디로 검색하는
   길을 하나 더 열어 둔다(template-parts/intl/wechat-qr.php). 라벨은 작게, 아이디는 굵게 —
   찾는 쪽은 아이디다. 영문·숫자라 .wzs-nums 와 같은 결로 자간을 조금 벌린다. */
.wzs-qr-id {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: var(--wzs-fs-sm);
}

.wzs-qr-id-label {
	color: var(--wzs-ink-muted);
}

.wzs-qr-id-value {
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wzs-ink);
	/* 길게 눌러 복사할 수 있게 — 아이디만 선택되면 충분하다 */
	user-select: all;
}

.wzs-qr-hint {
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-soft);
	text-align: center;
}

/* 폰에서는 같은 화면의 QR 을 카메라로 찍을 수 없다 — 길게 눌러 저장하라는 문구로 바꾼다.
   화면 폭이 아니라 입력 방식(hover/pointer)으로 가르는 이유: 가로로 넓은 태블릿도 손가락이고,
   좁게 줄인 데스크톱 창은 여전히 휴대폰으로 찍을 수 있다. */
.wzs-qr-hint-hold {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.wzs-qr-hint-scan {
		display: none;
	}

	.wzs-qr-hint-hold {
		display: inline;
	}
}


/* ==========================================================================
   5) 홈 2-1 히어로
   배경·제목 크기·사진 덮개는 pages/hero.css 의 .wzs-hero-hook 그대로.
   한국어 히어로는 가운데 한 줄 정렬이지만, 여기는 오른쪽에 QR 이 붙어 2단이다.
   ========================================================================== */

/* hero.css 의 .wzs-hero-hook-inner(0,1,0 · 세로 flex 가운데 정렬)를 두 겹 선택자로 덮는다 */
.wzs-intl-hero .wzs-hero-hook-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wzs-space-7);
	text-align: left;
}

.wzs-intl-hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wzs-space-4);
	min-width: 0;
}

/* cta.css 의 기본 위 여백(48px)이 부모 gap(24px)과 더해져 버튼이 설명과 너무 멀어진다 */
.wzs-intl-hero .wzs-cta-row {
	margin-top: var(--wzs-space-3);
}

/* 히어로는 어두운 사진 위라 QR 아래 글자도 밝게 뒤집는다(아이디 줄 포함) */
.wzs-intl-hero .wzs-qr-hint,
.wzs-intl-hero .wzs-qr-id-label {
	color: rgba(255, 255, 255, 0.72);
}

.wzs-intl-hero .wzs-qr-id-value {
	color: var(--wzs-white);
}

.wzs-intl-hero-qr {
	padding: var(--wzs-space-4);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wzs-radius-lg);
	background: rgba(16, 24, 40, 0.35);
}

/* 좁아지면 한국어 히어로처럼 가운데로 쌓고, QR 은 버튼 아래로 */
@media (max-width: 860px) {
	.wzs-intl-hero .wzs-hero-hook-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: var(--wzs-space-6);
		text-align: center;
	}

	.wzs-intl-hero-text {
		align-items: center;
	}

	.wzs-intl-hero .wzs-cta-row {
		justify-content: center;
	}
}


/* ==========================================================================
   6) 홈 2-2 검색 목업 — 창·검색창·결과 모양은 pages/timeline.css
   ========================================================================== */

/* 결과 줄의 "광고" 표시. 광고 딱지가 붙은 결과도 결국 대행 광고일 뿐이라는 게 목업의 한 조각이다. */
.wzs-search-ad {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid var(--wzs-border);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wzs-ink-soft);
}

/* 목업 바로 아래 결론 한 줄 — 가장 세게 */
.wzs-intl-stop {
	margin: 0;
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	line-height: var(--wzs-lh-tight);
	color: var(--wzs-ink);
}

/* 이어지는 세 줄(이유) — 결론보다 한 단계 약하게 */
ul.wzs-intl-lines {
	margin: var(--wzs-space-4) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-1);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}


/* ==========================================================================
   7) 홈 2-3 여섯 가지 역할
   ========================================================================== */

.wzs-intl-roles {
	background: var(--wzs-bg-alt);
}

.wzs-intl-roles .wzs-intl-inner {
	text-align: center;
}

/* 3×2. auto-fit 을 쓰지 않는 이유: 폭에 따라 4+2, 5+1 로 갈리면 01~06 순서가 줄마다 끊겨 읽힌다 */
ol.wzs-intl-role-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wzs-space-4);
	text-align: left;
}

.wzs-intl-role {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-5);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-white);
}

.wzs-intl-role-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wzs-space-2);
}

/* 번호는 순서를 알리는 표시일 뿐이라 조용하게 */
.wzs-intl-role-num {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wzs-ink-muted);
}

/* 아이콘은 배지 없이 선만 — 요금표에서 "배지 달린 아이콘이 반복돼 지루하다"는 지적을 받은 뒤의 규칙 */
.wzs-intl-role-icon {
	display: inline-flex;
	color: var(--wzs-blue);
}

.wzs-intl-role-icon svg {
	width: 28px;
	height: 28px;
	stroke-width: 1.6;
}

.wzs-intl-role-title {
	font-size: var(--wzs-fs-lg);
	color: var(--wzs-ink);
}

.wzs-intl-role-desc {
	margin: 0;
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

/* 6번(성사 후 관리) — 이 서비스의 핵심. 여섯 칸 중 이 칸만 어둡다. 두 칸 이상 어둡게 하지 말 것. */
.wzs-intl-role--featured {
	border-color: var(--wzs-ink);
	background: var(--wzs-ink);
}

.wzs-intl-role--featured .wzs-intl-role-title,
.wzs-intl-role--featured .wzs-intl-role-icon {
	color: var(--wzs-white);
}

.wzs-intl-role--featured .wzs-intl-role-desc {
	color: rgba(255, 255, 255, 0.8);
}

.wzs-intl-role--featured .wzs-intl-role-num {
	color: rgba(255, 255, 255, 0.6);
}

.wzs-intl-roles-close {
	margin: var(--wzs-space-6) 0 0;
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	color: var(--wzs-ink);
}

@media (max-width: 900px) {
	ol.wzs-intl-role-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	ol.wzs-intl-role-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wzs-space-3);
	}

	.wzs-intl-role {
		padding: var(--wzs-space-4);
	}
}


/* ==========================================================================
   8) 홈 2-4 방한 동행 — 어두운 배경·세 칸은 pages/onsite.css
   ========================================================================== */

/* onsite.css 는 세 칸 위에 탑승권이 있어서 위 여백(64px)을 갖는다. 여기엔 탑승권이 없어
   섹션 머리의 아래 여백(64px)과 더해져 128px 이 벌어진다. */
.wzs-intl-visit .wzs-onsite-cards {
	margin-top: 0;
}

/* "김해공항 근처" 두 줄. onsite.css 의 맺음 문장(굵게·크게)을 덮어, 앞 문장은 사실 한 줄로 약하게,
   뒷 문장("落地就到")만 세운다. */
.wzs-intl-visit .wzs-intl-visit-near {
	font-size: var(--wzs-fs-lg);
	font-weight: 400;
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.8);
}

.wzs-intl-visit .wzs-intl-visit-near strong {
	font-size: var(--wzs-fs-xl);
	font-weight: 700;
	color: var(--wzs-white);
}


/* ==========================================================================
   9) 홈 2-5 한국 메신저 목업 (.wzs-chat--kakao)
   화면 뼈대는 pages/messages.css. 상표 없이 노란 상단 바 + 하늘색 대화 배경 + 흰 말풍선.
   ========================================================================== */

.wzs-chat--kakao {
	max-width: 400px;
	margin: 0 auto;
}

.wzs-chat--kakao .wzs-chat-bar {
	justify-content: space-between;
	padding: var(--wzs-space-3);
	background: #fee500;
	color: var(--wzs-ink);
}

.wzs-chat--kakao .wzs-chat-who {
	flex: none;
	font-size: var(--wzs-fs-base);
}

/* 안 읽은 개수 — 크게(지시서 2-5). 흰 글씨 대비 4.5:1 을 넘기는 빨강(messages.css 와 같은 값). */
.wzs-kakao-unread {
	min-width: 44px;
	padding: 2px 12px;
	border-radius: 999px;
	background: #cf2c31;
	color: var(--wzs-white);
	font-size: var(--wzs-fs-xl);
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
}

.wzs-chat--kakao .wzs-chat-body {
	gap: var(--wzs-space-4);
	padding: var(--wzs-space-4) var(--wzs-space-3);
	background: #b2c7d9;
}

/* 보낸 사람 한 명 = 한 덩어리. 부모(.wzs-chat-body)가 flex-start 라 폭을 다시 채운다. */
.wzs-kakao-thread {
	align-self: stretch;
	display: flex;
	gap: var(--wzs-space-2);
}

.wzs-kakao-avatar {
	flex: none;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: var(--wzs-white);
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
}

.wzs-kakao-stack {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.wzs-kakao-name {
	font-size: 12px;
	color: var(--wzs-ink-soft);
}

.wzs-kakao-line {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	max-width: 100%;
}

/* messages.css 의 .wzs-msg(0,1,0)는 배경이 없다 — 흰 말풍선을 준다 */
.wzs-chat--kakao .wzs-msg {
	max-width: 250px;
	background: var(--wzs-white);
}

.wzs-kakao-time {
	flex: none;
	font-size: 10px;
	color: rgba(16, 24, 40, 0.6);
	white-space: nowrap;
}

/* messages.css 는 720px 아래에서 세 장을 욱여넣으려고 바·글자를 한 단계씩 줄인다.
   여기는 한 장뿐이라 줄일 이유가 없어 원래 크기로 되돌린다(같은 명시도 + 뒤에 로드). */
@media (max-width: 720px) {
	.wzs-chat--kakao .wzs-chat-screen {
		border-radius: 18px;
	}

	.wzs-chat--kakao .wzs-chat-bar {
		gap: var(--wzs-space-2);
		padding: var(--wzs-space-3);
	}

	.wzs-chat--kakao .wzs-chat-who {
		font-size: var(--wzs-fs-base);
	}

	.wzs-chat--kakao .wzs-chat-body {
		gap: var(--wzs-space-4);
		padding: var(--wzs-space-4) var(--wzs-space-3);
	}

	.wzs-chat--kakao .wzs-msg {
		padding: 10px 14px;
		font-size: var(--wzs-fs-sm);
	}
}


/* ==========================================================================
   10) 홈 2-6 왜 이 사람인가
   ========================================================================== */

.wzs-intl-why {
	background: var(--wzs-bg-alt);
}

.wzs-intl-why .wzs-intl-inner {
	text-align: center;
}

.wzs-intl-why-body {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-4);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-intl-why-body p {
	margin: 0;
}

/* 마지막 세 줄이 핵심 — 선으로 한 번 끊고, 결론 줄만 크게 */
.wzs-intl-why-body .wzs-intl-why-close {
	margin-top: var(--wzs-space-3);
	padding-top: var(--wzs-space-5);
	border-top: 1px solid var(--wzs-border);
	color: var(--wzs-ink);
}

.wzs-intl-why-close strong {
	display: inline-block;
	margin-top: var(--wzs-space-2);
	font-size: var(--wzs-fs-xl);
	line-height: var(--wzs-lh-tight);
}


/* ==========================================================================
   11) 홈 2-7 요금
   ========================================================================== */

.wzs-intl-pricing {
	background: var(--wzs-white);
}

.wzs-intl-pricing .wzs-intl-inner {
	text-align: center;
}

.wzs-intl-price-card {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--wzs-space-5);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-white);
	box-shadow: var(--wzs-shadow-md);
	text-align: left;
}

.wzs-intl-price-name {
	margin-bottom: var(--wzs-space-2);
	font-size: var(--wzs-fs-xl);
}

.wzs-intl-price-list {
	margin: 0;
}

.wzs-intl-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wzs-space-3);
	padding: 14px 0;
	border-bottom: 1px solid var(--wzs-border);
}

.wzs-intl-price-row:last-child {
	border-bottom: 0;
}

.wzs-intl-price-row dt {
	font-weight: 600;
	color: var(--wzs-ink);
}

/* 원화가 주, 환산액이 종 — 크기로 갈라 둔다. 환산액이 원화만큼 크면 "위안으로 받는다"로 읽힌다. */
.wzs-intl-price-row dd {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.wzs-intl-price-krw {
	font-size: var(--wzs-fs-xl);
	font-weight: 800;
	color: var(--wzs-ink);
	white-space: nowrap;
}

.wzs-intl-price-unit {
	margin-right: 4px;
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	color: var(--wzs-ink-muted);
}

.wzs-intl-price-ref {
	font-size: 12px;
	color: var(--wzs-ink-muted);
	white-space: nowrap;
}

.wzs-intl-price-note {
	margin: var(--wzs-space-3) 0 0;
	font-size: 12px;
	color: var(--wzs-ink-muted);
}

/* 좁은 폰: 영문 "per hour KRW 30,000" 은 한 덩어리가 약 200px 라, 320px 폰의 카드 안쪽
   폭(약 208px)에서 항목 이름과 한 줄에 서지 못하고 카드 밖으로 21px 넘쳤다.
   줄을 바꿔도 되게 두고(항목 이름 위 · 금액 아래 오른쪽), 카드 안 여백도 한 단계 줄인다. */
@media (max-width: 400px) {
	.wzs-intl-price-card {
		padding: var(--wzs-space-4);
	}

	.wzs-intl-price-row {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.wzs-intl-price-row dd {
		margin-left: auto;
	}
}

.wzs-intl-price-other {
	margin: var(--wzs-space-5) 0 0;
	color: var(--wzs-ink-soft);
	line-height: var(--wzs-lh-article);
}


/* ==========================================================================
   12) 문의 블록 — 위챗 QR 이 주인공
   다크 섹션이라 components/pill.css · cta.css 의 "다크 섹션 목록"에도 올려 두었다.
   ========================================================================== */

.wzs-intl-contact {
	background: var(--wzs-ink);
	color: var(--wzs-white);
	text-align: center;
}

.wzs-intl-contact .wzs-section-head {
	margin-bottom: var(--wzs-space-6);
}

.wzs-intl-contact .wzs-section-head h2 {
	color: var(--wzs-white);
}

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

.wzs-intl-contact .wzs-qr-hint,
.wzs-intl-contact .wzs-qr-id-label {
	color: rgba(255, 255, 255, 0.72);
}

.wzs-intl-contact .wzs-qr-id-value {
	color: var(--wzs-white);
}

.wzs-intl-contact-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wzs-space-6);
}

.wzs-intl-contact-list {
	width: min(100%, 400px);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
}

.wzs-intl-contact-row {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	align-items: baseline;
	gap: var(--wzs-space-3);
	padding-bottom: var(--wzs-space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
}

.wzs-intl-contact-row:last-child {
	border-bottom: 0;
}

.wzs-intl-contact-row dt {
	font-size: var(--wzs-fs-sm);
	color: rgba(255, 255, 255, 0.62);
}

.wzs-intl-contact-row dd {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	font-weight: 600;
	color: var(--wzs-white);
	overflow-wrap: anywhere;
}

.wzs-intl-contact-row a {
	color: var(--wzs-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 4px;
}

.wzs-intl-contact-row a:hover {
	text-decoration-color: var(--wzs-white);
}

.wzs-intl-contact-row a:focus-visible {
	outline: 2px solid var(--wzs-amber);
	outline-offset: 3px;
}

.wzs-intl-contact-note {
	display: block;
	font-size: var(--wzs-fs-sm);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.62);
}

/* 좁은 화면: 라벨을 값 위로 올린다. 옆에 두면 값 칸이 220px 남짓이라
   "每天 08:00–24:00（韩国时间）"이 괄호 중간에서 끊겼다. */
@media (max-width: 480px) {
	.wzs-intl-contact-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}


/* --- 영문: 이메일 · 위챗을 같은 무게로 나란히 (home.contact.layout = 'equal') ---
   중문은 QR 이 주인공이지만 영어권은 이메일을 더 쓴다(지시서 5장). 두 칸의 판·크기를 똑같이 두고
   이메일을 왼쪽에 둔다. 위 .wzs-intl-contact-body(세로 가운데 flex)를 같은 명시도로 뒤에서 덮는다. */
.wzs-intl-contact-body--equal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--wzs-space-4);
	max-width: 820px;
	margin: 0 auto;
}

.wzs-intl-channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wzs-space-4);
	padding: var(--wzs-space-5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wzs-radius-lg);
	background: rgba(255, 255, 255, 0.04);
}

.wzs-intl-channel-label {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

/* 이메일 주소가 QR 과 맞먹는 크기여야 "같은 무게"가 된다 */
.wzs-intl-channel-mail {
	font-size: clamp(1.375rem, 2.8vw, var(--wzs-fs-2xl));
	font-weight: 700;
	color: var(--wzs-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 6px;
	overflow-wrap: anywhere;
}

.wzs-intl-channel-mail:hover {
	text-decoration-color: var(--wzs-white);
}

.wzs-intl-channel-mail:focus-visible {
	outline: 2px solid var(--wzs-amber);
	outline-offset: 4px;
}

.wzs-intl-channel .wzs-intl-contact-list {
	width: 100%;
}

@media (max-width: 720px) {
	.wzs-intl-contact-body--equal {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
   13) 플로팅 위챗 버튼 · QR 팝업
   버튼 줄 자체(위치·숨김)는 layout/footer.css 의 .wzs-floating-contact.
   동작: assets/js/modules/wechat-popover.js
   ========================================================================== */

.wzs-wechat-pop {
	position: relative;
}

/* footer.css 의 동그란 버튼 규칙은 <a> 에만 걸려 있어, <button> 인 위챗에 같은 모양을 준다.
   글자색이 흰색이 아니라 잉크인 이유: 위챗 초록(#07c160) 위 흰 글씨는 2.4:1 로 읽기 기준에 못 미친다.
   잉크는 7.4:1 이다. */
.wzs-floating-contact .wzs-fc-wechat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #07c160;
	color: var(--wzs-ink);
	box-shadow: var(--wzs-shadow-lg);
	transition: transform var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-floating-contact .wzs-fc-wechat:hover {
	transform: scale(1.08);
}

.wzs-fc-wechat svg {
	width: 19px;
	height: 19px;
}

.wzs-fc-label {
	margin-top: 1px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.1;
}

.wzs-floating-contact .wzs-fc-wechat:focus-visible,
.wzs-intl-floating a:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

/* 팝업은 버튼 왼쪽에 뜬다. display 를 여기서 주지 말 것 — hidden 속성이 무력해진다. */
.wzs-wechat-panel {
	position: absolute;
	right: calc(100% + var(--wzs-space-3));
	bottom: 0;
	padding: var(--wzs-space-5) var(--wzs-space-4) var(--wzs-space-3);
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-white);
	box-shadow: var(--wzs-shadow-lg);
	color: var(--wzs-ink);
}

.wzs-wechat-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--wzs-ink-muted);
	font-size: 20px;
	line-height: 1;
}

.wzs-wechat-close:hover {
	background: var(--wzs-bg-alt);
	color: var(--wzs-ink);
}

.wzs-wechat-close:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 1px;
}


/* ==========================================================================
   14) 서브 페이지 공통 — 페이지 머리, 블록 배경
   ========================================================================== */

.wzs-intl-pagehead {
	padding: var(--wzs-space-7) var(--wzs-space-4) var(--wzs-space-6);
	background: linear-gradient(160deg, var(--wzs-ink) 0%, var(--wzs-ink-soft) 100%);
	color: var(--wzs-white);
}

.wzs-intl-pagehead h1 {
	font-size: clamp(1.75rem, 4.6vw, var(--wzs-fs-3xl));
	color: var(--wzs-white);
}

.wzs-intl-pagehead p {
	margin-top: var(--wzs-space-3);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.78);
}

.wzs-intl-block {
	background: var(--wzs-white);
}

.wzs-intl-block--alt {
	background: var(--wzs-bg-alt);
}

.wzs-intl-block .wzs-section-head {
	margin-bottom: var(--wzs-space-6);
}

/* services.css 의 FAQ 위 여백은 제목과 붙은 탭 안 배치를 전제로 한 값이다 */
.wzs-intl-block .wzs-faq {
	margin-top: 0;
}


/* ==========================================================================
   15) 서비스 안내
   ========================================================================== */

/* --- 3-1 역할 상세: 왼쪽 제목, 오른쪽 풀이 --- */
ol.wzs-intl-role-details {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.wzs-intl-role-detail {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: var(--wzs-space-6);
	padding: var(--wzs-space-6) 0;
	border-bottom: 1px solid var(--wzs-border);
}

.wzs-intl-role-detail:first-child {
	padding-top: 0;
}

.wzs-intl-role-detail-head {
	align-self: start;
	display: flex;
	align-items: center;
	gap: var(--wzs-space-3);
}

.wzs-intl-role-detail-title {
	font-size: var(--wzs-fs-xl);
	color: var(--wzs-ink);
}

.wzs-intl-role-detail-body {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-intl-role-detail-body p {
	margin: 0;
}

.wzs-intl-role-detail-body .wzs-intl-more {
	margin-top: var(--wzs-space-2);
}

/* 6번 — 홈과 같은 뜻으로 어둡게. 마지막 줄이라 아래 선 대신 판으로 닫는다. */
.wzs-intl-role-detail--featured {
	margin-top: var(--wzs-space-6);
	padding: var(--wzs-space-6);
	border-bottom: 0;
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-ink);
}

.wzs-intl-role-detail--featured .wzs-intl-role-detail-title,
.wzs-intl-role-detail--featured .wzs-intl-role-icon {
	color: var(--wzs-white);
}

.wzs-intl-role-detail--featured .wzs-intl-role-num {
	color: rgba(255, 255, 255, 0.6);
}

.wzs-intl-role-detail--featured .wzs-intl-role-detail-body {
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 760px) {
	.wzs-intl-role-detail {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wzs-space-3);
		padding: var(--wzs-space-5) 0;
	}

	.wzs-intl-role-detail--featured {
		padding: var(--wzs-space-4);
	}
}

/* --- 3-2 바이어 발굴 두 단계 — 이 페이지에서 가장 세게 --- */
ol.wzs-intl-stages {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wzs-space-4);
}

.wzs-intl-stage {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-5);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-lg);
	background: var(--wzs-white);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-intl-stage p {
	margin: 0;
}

.wzs-intl-stage-label {
	align-self: flex-start;
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--wzs-blue-soft);
	color: var(--wzs-blue);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
}

.wzs-intl-stage-title {
	margin-bottom: var(--wzs-space-1);
	font-size: var(--wzs-fs-xl);
	color: var(--wzs-ink);
}

/* "가능성이 없으면 여기서 끝냅니다" — 무조건 된다는 업체와 갈리는 한 줄(지시서 3-2).
   앰버는 화면당 한두 번만 쓰는 규칙(variables.css)이라 이 페이지에서 앰버 판은 이것 하나다. */
.wzs-intl-stage .wzs-intl-stage-stop {
	margin-top: var(--wzs-space-3);
	padding: 12px 16px;
	border-left: 4px solid var(--wzs-amber);
	border-radius: 0 var(--wzs-radius-sm) var(--wzs-radius-sm) 0;
	background: var(--wzs-amber-soft);
	color: var(--wzs-ink);
	font-weight: 700;
}

@media (max-width: 760px) {
	ol.wzs-intl-stages {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 3-3 진행 방식 4단계 --- */
ol.wzs-intl-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wzs-space-4);
}

.wzs-intl-step {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
	padding-top: var(--wzs-space-3);
	border-top: 2px solid var(--wzs-ink);
}

/* 2단계(판단)가 이 흐름의 요점이라 윗선만 파랑으로 가른다.
   nth-child 로 거는 이유: 단계 순서는 지시서가 고정한 것이라 데이터에 표시를 따로 두지 않았다.
   단계를 더하거나 순서를 바꾸면 이 줄을 같이 볼 것. */
.wzs-intl-step:nth-child(2) {
	border-top-color: var(--wzs-blue);
}

.wzs-intl-step-num {
	font-size: var(--wzs-fs-2xl);
	font-weight: 800;
	line-height: 1;
	color: var(--wzs-ink);
}

.wzs-intl-step-text {
	font-weight: 600;
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

@media (max-width: 860px) {
	ol.wzs-intl-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--wzs-space-5);
	}
}

@media (max-width: 480px) {
	ol.wzs-intl-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
   16) 회사소개
   ========================================================================== */

/* --- 소개 + 사진 --- */
.wzs-intl-about-hero {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-white);
}

.wzs-intl-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	align-items: start;
	gap: var(--wzs-space-7);
}

.wzs-intl-about-text h1 {
	margin-top: var(--wzs-space-2);
	font-size: clamp(1.75rem, 4.6vw, var(--wzs-fs-3xl));
}

.wzs-intl-about-prose {
	margin-top: var(--wzs-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-intl-about-prose p {
	margin: 0;
}

.wzs-intl-about-origin {
	margin-top: var(--wzs-space-5);
	padding-top: var(--wzs-space-3);
	border-top: 1px solid var(--wzs-border);
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}

.wzs-intl-about-photo {
	margin: 0;
}

/* 비율을 강제로 자르지 않는다 — 원본 구도(얼굴 위치)를 모르는 채 object-fit 으로 자르면
   얼굴이 잘릴 수 있다. */
.wzs-intl-about-photo img {
	width: 100%;
	border-radius: var(--wzs-radius-lg);
}

.wzs-intl-about-photo figcaption {
	margin-top: var(--wzs-space-2);
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
	text-align: center;
}

@media (max-width: 860px) {
	.wzs-intl-about-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wzs-space-6);
	}

	.wzs-intl-about-photo {
		max-width: 340px;
		margin: 0 auto;
	}
}

/* --- 이력 / 언어 / 위치 --- */
.wzs-intl-facts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--wzs-space-7);
}

.wzs-intl-facts-title {
	margin-bottom: var(--wzs-space-3);
	font-size: var(--wzs-fs-lg);
	color: var(--wzs-ink);
}

.wzs-intl-side-facts .wzs-intl-facts-title:not(:first-child) {
	margin-top: var(--wzs-space-6);
}

ol.wzs-intl-history-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
}

.wzs-intl-history-item {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	column-gap: var(--wzs-space-3);
	row-gap: 2px;
	padding: var(--wzs-space-4);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-white);
}

.wzs-intl-history-period {
	grid-row: span 2;
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	color: var(--wzs-ink-muted);
}

.wzs-intl-history-company {
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-intl-history-role {
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

/* 중문 회사명 확인 전 표시 — 눈에 띄어야 검수 때 빠지지 않는다. 확인되면 데이터에서 지운다. */
.wzs-intl-todo {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 4px;
	background: #fdecec;
	color: #b42318;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	vertical-align: middle;
}

ul.wzs-intl-lang-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wzs-space-2);
}

.wzs-intl-lang-list li {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	font-weight: 600;
	color: var(--wzs-ink);
}

.wzs-intl-lang-level {
	font-size: 12px;
	font-weight: 500;
	color: var(--wzs-ink-muted);
}

.wzs-intl-location {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	font-weight: 600;
	color: var(--wzs-ink);
}

.wzs-intl-location-icon {
	display: inline-flex;
	flex: none;
	color: var(--wzs-blue);
}

.wzs-intl-location-icon svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 860px) {
	.wzs-intl-facts-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wzs-space-6);
	}
}

@media (max-width: 480px) {
	.wzs-intl-history-item {
		grid-template-columns: minmax(0, 1fr);
	}

	.wzs-intl-history-period {
		grid-row: auto;
	}
}

/* --- 원칙 (두 개 또는 세 개) ---
   auto-fit 으로 두는 이유: 세 번째 원칙은 등록번호·주소가 채워질 때만 나와서 개수가 바뀐다.
   고정 3열이면 두 개일 때 오른쪽 한 칸이 빈다. */
.wzs-intl-principles-sec .wzs-intl-inner {
	text-align: center;
}

ol.wzs-intl-principles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wzs-space-4);
	text-align: left;
}

.wzs-intl-principle {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
	padding: var(--wzs-space-5);
	border-top: 3px solid var(--wzs-ink);
	background: var(--wzs-bg);
}

.wzs-intl-principle-title {
	font-size: var(--wzs-fs-lg);
	color: var(--wzs-ink);
}

.wzs-intl-principle-desc {
	margin: 0;
	font-size: var(--wzs-fs-sm);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

.wzs-intl-business {
	margin: var(--wzs-space-2) 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--wzs-fs-sm);
}

.wzs-intl-business div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wzs-space-2);
}

.wzs-intl-business dt {
	color: var(--wzs-ink-muted);
}

.wzs-intl-business dd {
	margin: 0;
	font-weight: 600;
	color: var(--wzs-ink);
}


/* ==========================================================================
   17) 모션 줄이기
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wzs-intl-more,
	.wzs-floating-contact .wzs-fc-wechat {
		transition: none;
	}

	.wzs-floating-contact .wzs-fc-wechat:hover {
		transform: none;
	}
}