/* 홈 전용 — 2-H 몰입 (2026-10-07 · docs/PLAN-NEXT-STAGES-2026-10-07.md 5절 [4])
 * index.html(과 구운 49장)만 부른다. 캐릭터 반응 부품 = css/char-talk.css · js/char-talk.js, 마우스 반응 = js/pointer-fx.js,
 * 넘기기 단서 = js/swipe-hint.js, 소식 = js/news-teaser.js. 2-A 원칙(줄인 움직임 · lite · JS 없음 = 최종 상태 · 흔들림 0 · 첫 큰 그림 불변).
 * !important 0 — 특이도와 불러오는 차례(main.css 뒤)로 덮는다. */

/* 캐릭터 단추 겹층 · 말풍선의 기준 상자 — 자리만 잡는다(배치 영향 0). 히어로 그림 상자를 기준으로 두어야
   커서 패럴랙스(translate)가 그림과 겹층을 함께 옮긴다. */
.wz-hero__media,
.wz-ending-cta__characters {
	position: relative;
}

/* ── C-04 · C-23 1440 아래 손으로 미는 대사 띠 ─────────────────────────────────
   1440 아래에서는 막대를 통째로 숨겼다 → 휴대폰 · 노트북 방문자는 캐릭터 말 30줄을 한 줄도 못 봤다.
   1440 아래는 히어로 바로 아래 한 줄로: 자동으로 흐르지 않고 손으로 민다(scroll-snap) · 양끝 페이드 = '더 있다' 단서 ·
   처음 한 번 24px 밀어 보여 주기 = js/swipe-hint.js. 막대는 히어로 안 absolute 그대로 두고 히어로 밑으로 내려(top:100%)
   그만큼 히어로 아래 여백을 CSS 로 처음부터 잡는다 — 히어로 높이 · 첫 그림 크기는 그대로, 흔들림 0.
   복제본(data-marquee-clone)은 숨기고 rAF 엔진은 index.html 의 wide() 가 켜지 않는다(L-44).
   JS 가 없어도 같은 꼴이다(원본 30줄이 HTML 에 있고 가로 스크롤은 브라우저 몫). */
@media (max-width: 1439px) {
	.wz-hero {
		margin-bottom: 64px;
		overflow: visible;
	}
	.wz-hero .wz-marquee-bar {
		display: block;
		top: 100%;
		bottom: auto;
		height: 64px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
	}
	html[dir="rtl"] .wz-hero .wz-marquee-bar {
		-webkit-mask-image: linear-gradient(to left, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to left, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100%);
	}
	.wz-hero .wz-marquee-bar::-webkit-scrollbar {
		display: none;
	}
	.wz-hero .wz-marquee-bar::after {
		content: none;
	}
	html.js:not(.lite) .wz-hero .wz-marquee-bar__toggle {
		display: none;
	}
	.wz-hero .wz-marquee-bar__track {
		gap: 16px;
		padding-inline: 16px 56px;
		transform: none;
		will-change: auto;
	}
	.wz-hero .wz-marquee-bar__track > * {
		scroll-snap-align: start;
		scroll-margin-inline-start: 16px;
	}
	.wz-hero .wz-marquee-bar [data-marquee-clone] {
		display: none;
	}
}

/* ── C-06 눈이 나를 본다 ───────────────────────────────────────────────────────
   PC: js/pointer-fx.js 가 커서를 따라 눈동자를 옮기는 동안(data-eyes-follow) 정해진 길(pupilMove)은 쉰다.
   휴대폰: 섹션이 화면을 지나가는 동안 위 → 아래로 따라본다 — CSS 스크롤 타임라인, JS 0.
   타임라인은 섹션 자신에 선언한다(.wz-app-promo 는 overflow:hidden 이라 안쪽 요소에 view() 를 직접 걸면 그 섹션을 스크롤러로 잡아 조용히 멈춘다).
   줄인 움직임 · lite 는 지금처럼 정지(main.css 2-A 블록). 미지원 브라우저는 종전 그대로. */
#app-promo[data-eyes-follow] .wz-eye__pupil {
	animation: none;
}
@keyframes wz-eye-follow-scroll {
	from {
		transform: translate(-50%, -85%);
	}
	to {
		transform: translate(-50%, -15%);
	}
}
@supports (animation-timeline: view()) {
	@media (hover: none), (pointer: coarse) {
		@media (prefers-reduced-motion: no-preference) {
			:where(html:not(.lite)) #app-promo {
				view-timeline: --wz-promo block;
			}
			:where(html:not(.lite)) #app-promo .wz-eye__pupil {
				animation: wz-eye-follow-scroll linear both;
				animation-timeline: --wz-promo;
				animation-range: cover 10% cover 90%;
			}
		}
	}
}

/* ── C-17 요금 묶음 그림 기울기(PC) — 기울기는 js/pointer-fx.js 가 rotate 로, 원근만 여기서 ── */
@media (hover: hover) and (pointer: fine) {
	#premium .wz-pricing__image {
		perspective: 900px;
	}
}

/* ── C-09 와그작 소식 3장 ─────────────────────────────────────────────────────
   카드는 js/news-teaser.js 가 채운다(구운 쪽은 사본 기준으로 이미 적혀 있다). 자리 높이를 미리 잡아 채워져도 흔들림 0.
   휴대폰은 한 줄 가로 밀기(쪽 길이 절약) + 넘기기 단서(swipe-hint). 색은 도움말 소식과 같은 토큰. */
.wz-news {
	padding: 56px 0 24px;
	background: var(--bg-white, #fff);
}
.wz-news__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.wz-news__title {
	margin: 0;
	font-family: var(--wz-font-display, "Varela Round", "Nunito", sans-serif);
	font-size: 28px;
	font-weight: 800;
	color: var(--text-primary, #2d2a3e);
}
.wz-news__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	color: var(--wz-purple-dark, #7e4fa6);
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}
.wz-news__all:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wz-news__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	min-height: 156px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wz-news__item {
	min-width: 0;
}
.wz-news__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	min-height: 156px;
	padding: 20px 22px;
	border: 1.5px solid rgba(45, 42, 62, 0.1);
	border-radius: 24px;
	background: var(--wz-bg-cream, #fffbf5);
	color: var(--wz-text-primary, #2d2a3e);
	text-decoration: none;
	transition:
		translate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s,
		border-color 0.2s;
}
.wz-news__card:focus-visible {
	outline: 3px solid var(--wz-purple, #9e63cf);
	outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
	.wz-news__card:hover {
		translate: 0 -4px;
		box-shadow: 0 10px 15px rgba(45, 42, 62, 0.1);
		border-color: var(--wz-purple-lighter, #d2b1e7);
	}
}
@media (prefers-reduced-motion: no-preference) {
	:where(html:not(.lite)) .wz-news__card:active {
		scale: 0.98;
	}
}
.wz-news__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
}
.wz-news__tag {
	padding: 2px 12px;
	border-radius: 9999px;
	background: var(--wz-sky-lightest, #def3fa);
	color: var(--wz-sky-darker, #3e6875);
}
.wz-news__tag[data-news-color="mint"] {
	background: var(--wz-mint-lightest, #aeeada);
	color: var(--wz-mint-darker, #207961);
}
.wz-news__date {
	color: var(--wz-text-secondary, #6b6880);
}
.wz-news__new {
	padding: 2px 8px;
	border-radius: 9999px;
	background: var(--wz-coral, #ff665e);
	color: #fff;
	letter-spacing: 0.04em;
}
.wz-news__card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wz-news__go {
	margin-top: auto;
	align-self: flex-end;
	color: var(--wz-purple-dark, #7e4fa6);
	font-weight: 800;
	line-height: 1;
}
html[dir="rtl"] .wz-news__go {
	transform: scaleX(-1);
}
@media (max-width: 768px) {
	.wz-news {
		padding: 40px 0 16px;
	}
	.wz-news__title {
		font-size: 24px;
	}
	.wz-news__list {
		display: flex;
		gap: 12px;
		min-height: 148px;
		/* 화면 가장자리까지 밀어 넣기 — 컨테이너 안쪽 여백(24px · 좁은 폭 16px)에 기대지 않고 화면 폭으로 계산한다
		   (종전 -24px 는 16px 폭에서 8px 가로 넘침을 만들었다 · 2026-10-08 실측) */
		margin-inline: calc(50% - 50vw);
		padding: 4px calc(50vw - 50%) 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc(50vw - 50%);
		scrollbar-width: none;
	}
	.wz-news__list::-webkit-scrollbar {
		display: none;
	}
	.wz-news__item {
		flex: 0 0 min(78%, 300px);
		scroll-snap-align: start;
	}
	.wz-news__card {
		min-height: 140px;
		padding: 18px;
	}
}

/* ── C-25 넓은 화면(1440 이상) — 본문 폭 1280 · 그림을 clamp() 로 키운다(그림 원래 크기를 넘지 않게) ── */
@media (min-width: 1440px) {
	:root {
		--container-max: 1280px;
	}
	.wz-hero__container {
		max-width: 1280px;
	}
	.wz-hero__image {
		max-width: clamp(571px, 40vw, 663px);
	}
	.wz-zigzag__item {
		gap: clamp(80px, 6vw, 112px);
	}
	.wz-zigzag__content {
		max-width: 560px;
	}
	.wz-zigzag__media img {
		max-width: clamp(480px, 34vw, 560px);
	}
	.wz-app-promo__mockup,
	.wz-app-promo__mockup-image {
		max-width: 1280px;
	}
	.wz-ending-cta__characters {
		max-width: clamp(500px, 40vw, 640px);
	}
	.wz-ending-cta__characters-image {
		max-width: clamp(700px, 50vw, 860px);
	}
}

/* == 2-I (2026-10-07) D1 첫 화면 — 추천안(스테이징만 · docs/PROPOSAL-MESSAGES-2026-10-07.md) ==
   '맛있게 배우다'(hero.tagline)를 큰 제목 위 작은 머리띠 글씨로 낮춘다 — 큰 글씨는 h1 하나만.
   단추 아래 한 줄(.wz-hero__proof)은 이미 51개 언어에 있는 열쇠 넷을 잇는다(apply-2i-messages.py). */
/* 오너 확인 2026-10-08 '맛있게 배우다 폰트 디자인 확인 수정' — 히어로 머리띠 · 제목의 글꼴 목록이 'Varela Round', Nunito 뿐이라
   한글 · 일본어 · 중국어는 기기 기본 글꼴(윈도 맑은 고딕 등)로 그려졌다(Varela Round 는 불러오지도 않는다 · 2026-10-08 실측).
   라틴은 지금처럼 Nunito, 한국어는 브랜드 토큰의 둥근 디스플레이 글꼴(나눔스퀘어라운드 굵게)을 히어로 글자 17자만 담은
   6KB 파일(WZ Round KO · OFL 1.1, 예약 이름을 피해 이름을 바꿈 · css/fonts/wz-round-ko-hero.LICENSE.txt),
   다른 언어는 그 언어의 디스플레이 글꼴(i18n-fonts.css --font-display, 예: 일본어 M PLUS Rounded 1c). */
@font-face {
	font-family: "WZ Round KO";
	src: url("/css/fonts/wz-round-ko-hero.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}
.wz-hero .wz-hero__tagline,
.wz-hero .wz-hero__title {
	font-family: "Nunito", var(--font-display, sans-serif), sans-serif;
}
html[lang="ko"] .wz-hero .wz-hero__tagline,
html[lang="ko"] .wz-hero .wz-hero__title {
	font-family: "Nunito", "WZ Round KO", "Pretendard", sans-serif;
}
.wz-hero .wz-hero__tagline {
	/* 오너 2026-10-08 '맛있게 배우다 굵게 이전 사이즈로' — 크기 · 위 여백은 main.css 그대로(48 · 42 · 32 · 28px),
	   굵기 800 · 글꼴만 위 규칙(한국어 브랜드 둥근 글꼴). 알약 · 점 장식은 걷었다. */
	font-weight: 800;
}
.wz-hero__proof {
	margin: 14px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4458;
}
.wz-hero__proof-sep {
	color: #8a8496;
}
@media (max-width: 767px) {
	.wz-hero__proof {
		margin-top: 10px;
		font-size: 13px;
	}
}