/* ==========================================================================
   MODULE: pages/hero
   front-page.php 전용 스타일. 섹션별로 구분해 둠.
   ========================================================================== */

/* .wzs-section-head 공통 여백은 components/section-head.css로 옮김(항상 로드되는 컴포넌트) */

/* --- hook: 다크 톤(와주소무역/로지스 섹션과 동일 계열)으로 첫인상과 하단을 통일 --- */
.wzs-hero-hook {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	background: linear-gradient(160deg, var(--wzs-ink) 0%, var(--wzs-ink-soft) 100%);
}

/* 사진(hero-night-loading)이 있을 때만 배경으로 깔린다 — inc/photos.php 가 파일 존재를
   확인해 --wzs-hero-photo 를 넘겨줄 때만 이 클래스가 붙는다. 흰 텍스트 가독성을 위해
   어두운 레이어를 사진 위에 덮는다. */
.wzs-hero-hook--photo {
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.82) 0%, rgba(16, 24, 40, 0.45) 55%, rgba(16, 24, 40, 0.82) 100%),
		var(--wzs-hero-photo);
	background-size: cover;
	background-position: center;
}

.wzs-hero-hook-inner {
	max-width: var(--wzs-container);
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wzs-space-4);
}

.wzs-hero-hook-title {
	font-size: clamp(2rem, 5vw, var(--wzs-fs-4xl));
	max-width: 780px;
	color: var(--wzs-white);
}

/* 밝은 배경용 앰버 강조(.wzs-hl)는 언더라인 방식이라 다크 배경에서는 톤을 바꿔줌 */
.wzs-hero-hook-title .wzs-hl {
	background: none;
	color: var(--wzs-amber);
	padding: 0;
}

.wzs-hero-hook-sub {
	max-width: 560px;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
}

/* --- sell: "판매는 대표님이" 메시지 섹션 (히어로 바로 아래) ---
   사진이 없으면 단색 다크, 있으면 사진 위에 어두운 레이어를 덮고 텍스트를 얹는다. */
/* 위아래 여백만 다른 섹션(96px)보다 좁게 잡는다.
   글이 8문단이라 96px 여백까지 더하면 828px 이 되어 화면(818px 기준)을 10px 넘겼고,
   낮은 창에서는 맺음 문장이 잘렸다. 여백을 줄여도 보이는 건 달라지지 않는다 —
   이 섹션은 min-height 로 어차피 화면 하나 높이를 채우고 내용은 세로 가운데 정렬이라,
   여백은 "넘칠 때만" 높이에 더해지기 때문이다. 그래서 문단 사이 간격(gap)은 그대로 뒀다.
   문단을 더 붙이면 다시 넘치므로, 그때는 이 값이 아니라 글을 줄일 것. */
.wzs-sell {
	padding: var(--wzs-space-6) var(--wzs-space-4);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

/* 아래쪽을 다시 어둡게 닫는 이유: 예전에는 0.92 → 0.66 으로 "아래로 갈수록 밝아지는"
   그라데이션이라 섹션 끝이 사진이 훤히 보이는 밝은 띠로 끝났다. 바로 다음 섹션(reality)도
   같은 계열 다크라, 밝은 띠 → 어두운 면으로 이어지면서 섹션 경계가 아니라 사진 이음매처럼
   보였다. 가운데만 열어 사진을 보여 주고 위아래는 닫는다(히어로와 같은 방식). */
.wzs-sell--photo {
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.92) 0%, rgba(16, 24, 40, 0.62) 50%, rgba(16, 24, 40, 0.9) 100%),
		var(--wzs-sell-photo);
	background-size: cover;
	background-position: center;
}

.wzs-sell-inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-4);
}

/* 섹션 대표 문장 — 히어로에서 내려온 카피라 본문보다 확실히 크게 세운다 */
.wzs-sell-title {
	margin: 0 0 var(--wzs-space-2);
	color: var(--wzs-white);
	font-size: clamp(1.6rem, 3.4vw, var(--wzs-fs-3xl));
	line-height: 1.35;
}

.wzs-sell-inner p {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.82);
}

/* 실제로 자주 듣는 질문을 인용하는 줄 — 본문과 톤을 구분한다 */
.wzs-sell-quote {
	font-weight: 700;
	color: var(--wzs-amber) !important;
}

/* 마무리 두 줄이 이 섹션의 결론이라 가장 크고 밝게 */
.wzs-sell-close {
	font-size: var(--wzs-fs-xl) !important;
	font-weight: 700;
	color: var(--wzs-white) !important;
}

/* --- trust --- */
.wzs-hero-trust {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	max-width: var(--wzs-container);
	margin: 0 auto;
}

/* 카드 4장. auto-fit 이 아니라 고정 4열인 이유: auto-fit 은 마지막 줄에 한 장만
   남으면 그 장이 통째로 늘어나 다른 장과 폭이 달라진다.
   중간 폭(태블릿)에서는 2×2 로 접는다 — 4열을 유지하면 한 장 폭이 200px 밑으로
   내려가 제목이 세 줄로 접힌다. */
.wzs-hero-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wzs-space-4);
}

@media (max-width: 1080px) {
	.wzs-hero-trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 업무보고서 예시 미리보기(.wzs-report-preview)는 components/report-preview.css 로 분리됨 —
   추후 실제 구독자 업무보고서 발송 기능에서도 같은 컴포넌트를 재사용할 예정이라 별도 모듈로 관리 */

/* --- pricing --- */
.wzs-hero-pricing {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	background: var(--wzs-bg-alt);
}

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

.wzs-hero-pricing-cta {
	margin-top: var(--wzs-space-6);
	justify-content: center;
}

/* --- 요금 목록 아래 마무리 문구 --- */
.wzs-pricing-closing {
	max-width: 820px;
	margin: var(--wzs-space-6) auto 0;
	text-align: center;
}

.wzs-pricing-closing p {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: var(--wzs-ink-soft);
}

/* "한번 와주소" — 브랜드명 유래(경상도 사투리 '한번 도와주소')를 살린 줄이라 강조한다 */
.wzs-pricing-closing-call {
	margin-top: var(--wzs-space-3) !important;
	font-size: var(--wzs-fs-xl) !important;
	font-weight: 700;
	color: var(--wzs-ink) !important;
}

/* --- 홈 마지막 문의 섹션 --- */
.wzs-home-contact {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

.wzs-home-contact--photo {
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.88) 0%, rgba(16, 24, 40, 0.55) 100%),
		var(--wzs-contact-photo);
	background-size: cover;
	background-position: center;
}

.wzs-home-contact-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.wzs-home-contact-inner h2 {
	color: var(--wzs-white);
}

.wzs-home-contact-inner > p {
	margin-top: var(--wzs-space-4);
	color: rgba(255, 255, 255, 0.78);
	line-height: var(--wzs-lh-article);
}

/* 선택자를 두 클래스로 감싼 이유: base/reset.css 의 `ul[class]`(특정성 0,1,1)가
   클래스 하나짜리 선택자(0,1,0)를 이겨서 margin이 0으로 눌렸다. 제목·설명·연락처·버튼이
   전부 붙어 보이던 원인. 여백을 고칠 때 이 선택자를 낮추지 말 것. */
.wzs-home-contact .wzs-home-contact-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wzs-space-4);
	margin: var(--wzs-space-6) 0;
	padding: 0;
	list-style: none;
}

.wzs-home-contact-list li {
	display: flex;
	align-items: center;
	gap: var(--wzs-space-2);
	color: rgba(255, 255, 255, 0.9);
}

.wzs-home-contact-list a {
	color: var(--wzs-white);
	font-weight: 600;
}

/* 아이콘 배지는 카드 안이 아니라 한 줄 안에 놓이므로 아래 여백을 없앤다 */
.wzs-home-contact-list .wzs-icon-badge {
	margin-bottom: 0;
}

/* 버튼 정렬은 components/cta.css 의 .wzs-cta-row--center/--start 가 쥔다.
   여기 있던 `.wzs-home-contact .wzs-cta-row { justify-content: center }` 는 명시도(0,2,0)가
   수정자(0,1,0)를 이겨서, 마크업에서 정렬을 바꿔도 먹지 않았다. 정렬을 바꾸려면
   template-parts/components/cta-pair.php 의 align 인자를 쓸 것. */

/* ==========================================================================
   MODULE: pages/hero — reality ("진짜 문제는 인터넷에 없습니다")
   마크업: template-parts/hero/reality.php

   "판매는 대표님이"(.wzs-sell)와 같은 계열의 다크 사진 섹션이다. 여백·글자 크기를
   일부러 .wzs-sell 과 같은 값으로 맞췄다 — 두 섹션이 이어서 나오므로 하나라도 다르면
   단이 어긋나 보인다. 한쪽을 고치면 다른 쪽도 같이 볼 것.
   ========================================================================== */

/* 앞 섹션(.wzs-sell)도 같은 계열 다크라 그냥 이어 붙이면 어디서 끊기는지 안 보인다.
   경계를 세 겹으로 표시한다 — 위 여백을 늘리고, 가는 선을 긋고, 제목 위에 눈썹(pill)을
   올린다. 셋 중 하나만으로는 약했다(선만 그으면 사진 이음매로 보이고, 여백만 늘리면
   그냥 빈 공간으로 읽힌다). 다음에 다크 섹션을 이어 붙일 때도 같은 방식을 쓸 것. */
.wzs-reality {
	padding: var(--wzs-space-7) var(--wzs-space-4) var(--wzs-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

.wzs-reality--photo {
	background-image:
		linear-gradient(180deg, rgba(16, 24, 40, 0.9) 0%, rgba(16, 24, 40, 0.72) 55%, rgba(16, 24, 40, 0.92) 100%),
		var(--wzs-reality-photo);
	background-size: cover;
	background-position: center;
}

.wzs-reality-inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-4);
}

/* 다크 배경 위 눈썹. components/pill.css 의 --amber(흰 바탕 + 주황 글씨)를 그대로 쓰되,
   .wzs-section-head 밖이라 큰 크기가 자동으로 안 붙어 여기서 직접 키운다. */
.wzs-reality-eyebrow {
	align-self: flex-start;
	margin-bottom: var(--wzs-space-3);
}

.wzs-reality-title {
	margin: 0 0 var(--wzs-space-2);
	color: var(--wzs-white);
	font-size: clamp(1.6rem, 3.4vw, var(--wzs-fs-3xl));
	line-height: 1.35;
}

.wzs-reality-inner p {
	margin: 0;
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.82);
}

/* "그런데 어떤 일은 아무도 겪어본 적이 없습니다." — 앞 단락에서 이야기가 꺾이는 지점 */
.wzs-reality-turn {
	margin-top: var(--wzs-space-2) !important;
	color: var(--wzs-white) !important;
	font-weight: 700;
}

/* --- 세 사건(코로나 봉쇄 · 수에즈 · 호르무즈) ---
   나열이 아니라 각각 한 덩어리로 떨어져 읽혀야 해서 왼쪽에 선을 세우고 사이를 벌린다.

   선택자를 두 겹(.wzs-reality .wzs-reality-events)으로 쓴 이유: base/reset.css 의
   `ul[class]`(특정성 0,1,1)가 클래스 하나(0,1,0)를 이겨 padding/margin 이 0으로 눌린다.
   이 프로젝트에서 같은 함정으로 목록이 두 번 깨졌다 — 특정성을 낮추지 말 것. */
.wzs-reality .wzs-reality-events {
	margin: var(--wzs-space-2) 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
}

.wzs-reality .wzs-reality-events li {
	margin: 0;
	padding: var(--wzs-space-2) 0 var(--wzs-space-2) var(--wzs-space-4);
	border-left: 2px solid rgba(255, 255, 255, 0.28);
	font-size: var(--wzs-fs-lg);
	line-height: var(--wzs-lh-article);
	color: rgba(255, 255, 255, 0.82);
}

/* 지금 진행 중인 사건만 앰버로 — 과거 두 건과 시제가 다르다는 걸 색으로 구분 */
.wzs-reality .wzs-reality-events li.is-now {
	border-left-color: var(--wzs-amber);
	color: var(--wzs-white);
	font-weight: 700;
}

/* 이 섹션에서 가장 세게 읽혀야 하는 두 문장 */
.wzs-reality-emphasis {
	margin: var(--wzs-space-2) 0 !important;
	color: var(--wzs-white) !important;
	font-size: clamp(1.15rem, 2.2vw, var(--wzs-fs-xl)) !important;
	font-weight: 700;
	line-height: 1.5;
}

/* 직접 겪은 이야기 — 앞뒤 설명과 구분되게 살짝 들여 놓는다 */
.wzs-reality-field {
	margin: var(--wzs-space-2) 0;
	padding: var(--wzs-space-4);
	border-radius: var(--wzs-radius-md);
	background: rgba(255, 255, 255, 0.07);
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-3);
}

@media (max-width: 640px) {
	.wzs-reality-field {
		padding: var(--wzs-space-3);
	}
}

/* ==========================================================================
   MODULE: pages/hero — answers ("대표님은 이런 경험을 하게 됩니다")
   마크업: template-parts/hero/answers.php, 데이터: inc/data/answers.php

   앞이 자가진단(다크), 뒤가 요금표(--wzs-bg-alt)라 이 섹션은 흰 바탕으로 둔다.
   셋 다 밝게 두면 자가진단 → 해소 → 가격의 단락 구분이 사라진다.
   ========================================================================== */

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

.wzs-answers-inner {
	max-width: 820px;
	margin: 0 auto;
}

/* 리드 문장 안의 好 — 아래 목록의 주인공과 같은 색이라 미리 눈에 익힌다 */
.wzs-answers-lead-mark {
	color: var(--wzs-amber-ink);
	font-weight: 700;
	font-size: 1.15em;
}

.wzs-answers-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
}

/* --- 목록 전체가 칸을 공유한다 (subgrid) ---
   줄마다 따로 grid 를 만들면 각 줄의 칸 너비가 그 줄 내용대로 정해져서, 부연 문구
   길이가 다른 만큼 好 가 줄마다 좌우로 흔들린다(실측: 好 시작점이 6가지로 갈렸다).
   목록에서 칸을 한 번 정의하고 각 줄이 subgrid 로 그 칸을 물려받으면 모든 줄의
   Q·질문·好·부연이 같은 세로선에 선다.

   칸 구성: [Q 아이콘 auto] [질문 1fr] [好 auto] [부연 auto]
   subgrid 미지원 브라우저는 바로 위 fallback 선언이 적용돼 줄 단위로만 정렬된다
   (칸이 줄마다 조금씩 어긋날 뿐 레이아웃은 깨지지 않는다). */
.wzs-answers-list {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	row-gap: var(--wzs-space-2);
}

.wzs-answer {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr auto auto; /* fallback — 아래 subgrid 를 못 읽는 브라우저용 */
	grid-template-columns: subgrid;
	align-items: start;
	column-gap: var(--wzs-space-3);
	padding: var(--wzs-space-3) var(--wzs-space-4);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-white);
}

/* 떠오르기·선택 표시·포커스 링은 components/card.css 의 .wzs-card 가 이미 갖고 있다.
   여기서는 이 섹션에서만 필요한 것 — 테두리 색과 好 반응 — 만 얹는다.
   card.css 와 같은 속성을 다시 쓰면 어느 쪽이 이길지 파일 로드 순서에 달리게 되므로
   (components → pages 순) 중복 선언하지 말 것. */
.wzs-answer:hover {
	border-color: var(--wzs-blue-soft);
}

/* 好는 이 섹션의 주인공이라 카드가 반응할 때 같이 커진다 */
.wzs-answer .wzs-answer-mark {
	transition: transform var(--wzs-duration-fast) var(--wzs-ease);
	transform-origin: left center;
}

.wzs-answer:hover .wzs-answer-mark,
.wzs-answer.is-selected .wzs-answer-mark {
	transform: scale(1.12);
}

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

	.wzs-answer:hover .wzs-answer-mark,
	.wzs-answer.is-selected .wzs-answer-mark {
		transform: none;
	}
}

/* align-items 가 center 가 아니라 start 인 이유: 질문이 두 줄이 되면 Q 아이콘이
   가운데로 내려가 첫 줄과 어긋나 보인다. */
.wzs-answer-icon {
	width: 26px;
	height: 26px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wzs-ink);
	color: var(--wzs-white);
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	line-height: 1;
}

.wzs-answer-q {
	min-width: 0;
	font-size: var(--wzs-fs-base);
	line-height: 1.6;
	color: var(--wzs-ink-soft);
}

.wzs-answer-q strong {
	color: var(--wzs-ink);
	font-weight: 700;
}

/* 넓은 화면에서는 好와 부연이 각각 제 칸을 차지해야 세로선이 맞으므로, 감싸는 span 을
   레이아웃에서 지운다(display:contents). 좁은 화면에서는 다시 flex 로 되살려
   둘을 한 줄에 묶는다 — 아래 미디어쿼리 참고. */
.wzs-answer-a {
	display: contents;
}

.wzs-answer-mark {
	color: var(--wzs-amber-ink);
	font-size: var(--wzs-fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.wzs-answer-note {
	align-self: center;
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
	white-space: nowrap;
}

/* 좁은 화면: 답을 질문 아래 줄로 내린다.
   Q 아이콘 칸은 비우고 2번 칸에 놓아 질문과 왼쪽 선이 맞는다.
   이때 .wzs-answer-a 를 flex 로 되돌려 好와 부연이 한 줄에 붙어 있게 한다
   (지시서 요구사항 — 질문이 두 줄로 접혀도 둘은 갈라지지 않는다). */
@media (max-width: 560px) {
	.wzs-answers-list {
		grid-template-columns: 1fr;
	}

	.wzs-answer {
		grid-template-columns: auto 1fr;
		row-gap: var(--wzs-space-1);
	}

	.wzs-answer-a {
		display: flex;
		grid-column: 2;
		align-items: baseline;
		gap: var(--wzs-space-2);
	}

	.wzs-answer-mark {
		font-size: var(--wzs-fs-xl);
	}
}


/* --- 맨 아래 "인기글 보기": 포스팅/자료실을 섞지 않고 2열로 각각 --- */
.wzs-hero-popular {
	padding: var(--wzs-space-8) var(--wzs-space-4);
	max-width: var(--wzs-container);
	margin: 0 auto;
}

.wzs-hero-popular-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wzs-space-5);
}

.wzs-hero-popular-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--wzs-space-3);
}

.wzs-hero-popular-head .wzs-widget-title {
	margin-bottom: 0;
}

.wzs-hero-popular-more {
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	color: var(--wzs-blue);
	flex: none;
}

@media (max-width: 900px) {
	.wzs-hero-trust-grid,
	.wzs-hero-popular-grid {
		grid-template-columns: 1fr;
	}
}

/* --- 사진 배경 시차(패럴랙스) ---
   사진 레이어만 뷰포트에 고정하면 스크롤할 때 글자와 사진이 다른 속도로 움직여 깊이가 생긴다.
   background-attachment 목록 순서는 background-image 와 같다: (어두운 그라데이션, 사진).
   그라데이션은 섹션과 같이 움직여야 위아래 페이드가 섹션에 맞으므로 scroll 로 둔다.

   데스크톱 + 마우스 환경으로 한정한 이유: iOS 사파리는 fixed 배경을 제대로 못 그리고,
   저사양 기기에서는 스크롤이 끊긴다. 제외된 환경은 그냥 평범한 배경으로 보인다. */
@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wzs-hero-hook--photo,
	.wzs-sell--photo,
	.wzs-home-contact--photo {
		background-attachment: scroll, fixed;
	}
}

/* ==========================================================================
   MODULE: pages/hero — channels ("와주소 더 알아보기")
   마크업: template-parts/hero/channels.php, 데이터: inc/data/company.php

   인기글 뒤 · 문의 CTA 앞의 완충 구간이다. 바로 아래 문의 버튼보다 무거워 보이면
   시선이 갈라지므로, 카드가 아니라 테두리만 있는 가벼운 링크 버튼으로 둔다.
   ========================================================================== */

.wzs-channels {
	padding: var(--wzs-space-7) var(--wzs-space-4);
	background: var(--wzs-bg);
	text-align: center;
}

.wzs-channels-inner {
	max-width: 640px;
	margin: 0 auto;
}

.wzs-channels-title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, var(--wzs-fs-2xl));
	line-height: 1.35;
}

.wzs-channels-desc {
	margin: var(--wzs-space-4) 0 0;
	color: var(--wzs-ink-soft);
	line-height: var(--wzs-lh-article);
}

.wzs-channel-list {
	margin-top: var(--wzs-space-6);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wzs-space-3);
}

.wzs-channel {
	display: inline-flex;
	align-items: center;
	gap: var(--wzs-space-2);
	padding: 12px 22px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink);
	font-size: var(--wzs-fs-base);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--wzs-duration-fast) var(--wzs-ease),
		border-color var(--wzs-duration-fast) var(--wzs-ease),
		box-shadow var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-channel:hover {
	transform: translateY(-2px);
	box-shadow: var(--wzs-shadow-md);
	border-color: transparent;
}

.wzs-channel:active {
	transform: translateY(0);
}

.wzs-channel:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 3px;
}

/* --- 로고 ---
   평소에는 잉크색 단색으로 두고(주변 버튼들과 톤을 맞추려고), 마우스를 올렸을 때만
   각 사의 브랜드 색으로 살아난다. 형태는 원본 그대로다 — 변형 금지
   (assets/icons/brand/README.md 참고).

   두 로고는 원본 여백이 서로 다르다: 네이버 N 은 24x24 뷰박스를 꽉 채우고,
   스레드는 위아래에 여백이 있다. 같은 크기로 넣으면 네이버가 눈에 띄게 커 보여서
   네이버 쪽만 조금 줄여 시각적 크기를 맞춘다. 로고를 추가하면 여기서 같이 볼 것. */
.wzs-channel-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--wzs-ink-soft);
	transition: color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-channel-icon svg {
	width: 100%;
	height: 100%;
}

.wzs-channel--naver-blog .wzs-channel-icon svg {
	width: 84%;
	height: 84%;
}

.wzs-channel--naver-blog:hover .wzs-channel-icon {
	color: #03c75a; /* 네이버 브랜드 그린 */
}

.wzs-channel--threads:hover .wzs-channel-icon {
	color: var(--wzs-ink); /* 스레드 로고는 단색(검정)이 원본 */
}

.wzs-channel-out {
	color: var(--wzs-ink-muted);
	font-size: var(--wzs-fs-sm);
}

@media (prefers-reduced-motion: reduce) {
	.wzs-channel {
		transition: border-color var(--wzs-duration-fast) linear,
			color var(--wzs-duration-fast) linear;
	}

	.wzs-channel:hover,
	.wzs-channel:active {
		transform: none;
	}
}

/* --- 앵커/해시 이동 시 섹션이 헤더에 가려지지 않도록 ---
   아래로 이동하면 헤더는 스스로 숨으므로(assets/js/modules/header-scroll.js) 0 이면 충분하고,
   히어로만 예외다: 로드 직후에는 헤더가 떠 있어 그 높이만큼 아래에서 시작하므로, 그 값을 그대로
   비워 줘야 "홈"으로 되돌아왔을 때 로드 직후와 같은 화면이 된다.
   이 값과 아래 min-height 에서 빼는 값은 항상 짝으로 움직여야 한다 —
   어긋나면 이전 섹션이 그 차이만큼 남아 두 섹션이 같이 보인다. */
.wzs-hero-page > section {
	scroll-margin-top: 0;
}

.wzs-hero-page > .wzs-hero-hook {
	scroll-margin-top: var(--wzs-header-h, 73px);
}

/* --- 한 화면에 한 섹션 + 경계에 붙는 스크롤 ---
   히어로가 487px 밖에 안 돼서 900px 화면에 다음 섹션이 293px 딸려 올라왔다.
   첫 화면에 두 섹션이 겹쳐 보여 어느 쪽도 제 몫을 못 하던 문제.

   각 섹션에 "화면 하나" 만큼의 최소 높이를 주고, 내용은 세로 가운데로 모은다.
   내용이 한 화면보다 긴 섹션(요금·자가진단)은 min-height 가 무시되고 원래대로 늘어난다.

   스냅은 proximity 다 — 경계 근처에서 손을 떼면 딱 붙고, 멀면 그냥 둔다.
   mandatory 로 두면 "모든 스크롤 위치가 어떤 스냅 지점에 붙어야 한다"는 규칙 때문에
   스냅 지점이 아닌 곳을 계속 거부한다. 실제로 푸터까지 내리면 653px 위로 되밀렸고,
   긴 섹션 중간을 가리키는 스크롤(보고서 예시로 이동 등)도 옆 섹션으로 끌려갔다.
   푸터에 end 스냅을 줘서 mandatory 를 살려보려 했지만 브라우저가 마지막 섹션 쪽을
   계속 골라 해결되지 않았다 — proximity 로 내리지 말 것.

   단위는 svh(작은 뷰포트 높이). 모바일 브라우저에서 주소창이 접힐 때 100vh 로는
   섹션이 화면보다 커져 다음 섹션이 살짝 보이는 현상이 생긴다.

   화면이 낮을 때(노트북 가로 모드, 세로 짧은 창)는 여백만 늘어나 답답하고, 스냅까지
   걸리면 읽는 도중 튀므로 통째로 끈다. 모션을 줄이도록 설정한 사용자에게도 끈다. */
@media (min-height: 640px) and (prefers-reduced-motion: no-preference) {
	/* 스크롤 컨테이너는 <html> 이라 스냅 선언도 여기 있어야 한다.
	   :has() 로 홈에서만 켜서 글/서비스안내 페이지 스크롤은 건드리지 않는다. */
	html:has(.wzs-hero-page) {
		scroll-snap-type: y proximity;
	}

	.wzs-hero-page > section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		min-height: 100svh;
		scroll-snap-align: start;
		/* 섹션 안에서 스냅이 다시 걸려 읽는 중에 튀지 않게 */
		scroll-snap-stop: normal;
	}

	/*
	 * width:100% 가 반드시 있어야 한다.
	 * 섹션 안 래퍼들은 대부분 `max-width: N; margin-inline: auto` 로 가운데 정렬인데,
	 * 부모가 flex 가 되는 순간 auto 마진이 stretch 를 막아 폭이 "내용 크기"로 쪼그라든다.
	 * 실제로 업무보고서 예시가 640px → 250px, 체크리스트가 625px → 464px 로 줄었다.
	 * width:100% 를 주면 max-width 안에서 예전(블록 레이아웃)과 똑같이 늘어난다.
	 * min-width:0 은 flex 자식 기본값(min-width:auto) 때문에 긴 표·코드가 밖으로
	 * 삐져나오는 걸 막는다.
	 */
	.wzs-hero-page > section > * {
		width: 100%;
		min-width: 0;
	}


	/* 히어로는 헤더 아래에서 시작하므로 그 높이만큼 낮아야 화면에 정확히 한 번 들어간다.
	   --wzs-header-h 는 assets/js/modules/header-scroll.js 가 실측해 넣는 값이고 헤더가
	   숨어도 변하지 않는다. 73px 은 JS 가 뜨기 전 한 프레임용 기본값(데스크톱 실측치).
	   위 scroll-margin-top 과 같은 값이라 스냅 위치는 스크롤 0(=로드 직후)이 된다. */
	.wzs-hero-page > .wzs-hero-hook {
		min-height: calc(100vh - var(--wzs-header-h, 73px));
		min-height: calc(100svh - var(--wzs-header-h, 73px));
	}
}

/* --- 요금 섹션 "자세히 보기" 링크 (template-parts/hero/pricing.php) ---
   홈 요금표는 금액만 보여 주고 포함 범위 전부는 서비스안내에 있다. 그 사이를 잇는 링크라
   버튼이 아니라 텍스트 링크다 — 바로 아래 문의 버튼보다 무거우면 안 된다. */
.wzs-pricing-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-pricing-more:hover {
	gap: var(--wzs-space-2);
}

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

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