/* 홈 '지금 가장 인기' — 점프 + 런 놀이형 두 무대 (고도화 4차 2026-10-08)
 * 계획 = docs/PLAN-R4-JUMP-RUN-PLAY-2026-10-08.md · 시안 = docs/design-2026-10-08/r4-jump-run-{pc,m}.webp
 * 움직임 = js/promo-play.js · 마크업 = scripts/site-upgrade/apply-r4-promo.py(원본 + 구운 49장)
 *
 * 상태
 *   기본(JS 없음 · 움직임 줄이기 · html.lite · 부품 초기화 전) = 완성된 그림 — 카드 넷이 펼친 꼴, 도안은 칠한 그림, 뿌리는 튀어나온 자리.
 *   [data-pp-live] = js/promo-play.js 가 초기화에 성공한 무대에만 단다(굽기 전 reset 이 걷는다).
 *     점프: 카드 [data-pos] = s(쌓임 · 나눠 주기 전) · 0(맨 앞) · 1 · -1 · 2(맨 뒤)
 *     런:  [data-pp-state] = line(선 그림) · colored(다 칠함) · wipe(남은 곳 쓸어 칠하기) · scan(휴대폰이 비춤) · alive(뿌리 뿅)
 * 무대 높이는 aspect-ratio 로 고정 — 상태가 바뀌어도 구역 높이가 그대로(흔들림 0). 안쪽은 전부 무대 기준 절대 자리.
 * 캐릭터 그림은 다시 칠하거나 늘이거나 필터를 걸지 않는다 — 움직임은 transform 이동 · 회전 · 투명도만(크기 그대로 · 레이아웃 흔들림 0).
 * 오른쪽→왼쪽 언어는 inset-inline-* 와 --pp-dir(-1)로 무대 배치 · 넘기는 방향 · 화살표가 거울처럼 뒤집힌다.
 */

.wz-pp {
	--pp-ink: #2d1a5c;
	--pp-dir: 1;
	position: relative;
	padding: 56px 16px 64px;
	background: linear-gradient(180deg, #f4ecfc 0%, #faf6fe 42%, #fff 100%);
	color: var(--wz-text-primary, #2d2a3e);
	overflow: hidden;
	overflow: clip;
}
[dir='rtl'] .wz-pp {
	--pp-dir: -1;
}
.wz-pp__inner {
	max-width: 1240px;
	margin: 0 auto;
}
.wz-pp__head {
	text-align: center;
	margin: 0 auto 28px;
}
.wz-pp__title {
	margin: 0 0 12px;
	font-family: var(--wz-font-display, 'Nunito', sans-serif);
	font-size: clamp(20px, 5.8vw, 46px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--pp-ink);
}
.wz-pp__brand {
	white-space: nowrap;
}
.wz-pp__title-dot {
	color: var(--wz-purple, #9e63cf);
	margin: 0 0.18em;
}
.wz-pp__subtitle {
	margin: 0 auto;
	max-width: 40em;
	font-size: clamp(15px, 3.9vw, 19px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--wz-text-secondary, #6b6880);
	word-break: keep-all;
}

.wz-pp__stages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	max-width: 640px;
	margin: 0 auto;
}
.wz-pp__stage {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ── 무대 공통 ─────────────────────────────────────────────────────────── */
.wz-pp__scene {
	--pp-ring: rgba(178, 132, 235, 0.42);
	--pp-shadow: rgba(76, 36, 140, 0.32);
	position: relative;
	aspect-ratio: 358 / 430;
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	box-shadow:
		0 0 0 6px var(--pp-ring),
		0 22px 44px -18px var(--pp-shadow),
		0 6px 14px -6px var(--pp-shadow);
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.wz-pp__scene img {
	-webkit-user-drag: none;
}

/* 무대 머리 — 앱 아이콘 + 이름(브랜드 · 번역 안 함) + 칩 둘(사전 열쇠) */
.pp-head {
	position: absolute;
	z-index: 6;
	top: 4.5%;
	inset-inline-start: 5%;
	inset-inline-end: 5%;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}
.pp-head__icon {
	flex: none;
	width: 42px;
	height: 42px;
	width: clamp(38px, 11cqw, 64px);
	height: clamp(38px, 11cqw, 64px);
	border-radius: 24%;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.9),
		0 8px 16px -6px rgba(30, 10, 70, 0.45);
}
.pp-head__text {
	min-width: 0;
}
.pp-head__name {
	margin: 0 0 6px;
	font-family: var(--wz-font-display, 'Nunito', sans-serif);
	font-size: 22px;
	font-size: clamp(19px, 6cqw, 32px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.pp-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.pp-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-size: clamp(11px, 2.5cqw, 14px);
	font-weight: 700;
	line-height: 1.25;
}

/* 무대 아래 스토어 단추 — 기존 .wz-btn-store 그대로(주소 · 추적 · PC 점프 모달), 겉모양만 시안의 짙은 보라 */
.wz-pp .wz-pp__store {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	flex-wrap: nowrap;
	margin: 0;
}
.wz-pp .wz-pp__store .wz-btn-store.wz-btn-store--dark {
	flex: 1 1 0;
	max-width: 214px;
	width: auto;
	height: 54px;
	padding: 8px 14px;
	justify-content: center;
	gap: 10px;
	background: #3b2466;
	color: #fff;
	-webkit-text-fill-color: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 0 #24133f;
	transition:
		transform 0.15s,
		box-shadow 0.15s,
		background 0.15s;
}
.wz-pp .wz-pp__store .wz-btn-store.wz-btn-store--dark:hover {
	background: #4a2e80;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #24133f;
}
.wz-pp .wz-pp__store .wz-btn-store.wz-btn-store--dark:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #24133f;
}
.wz-pp .wz-pp__store .wz-btn-store.wz-btn-store--dark:focus-visible {
	outline: 3px solid var(--wz-yellow, #ffb830);
	outline-offset: 3px;
}

/* 화면 읽기 프로그램에만 — 맨 앞 카드 이름 알림(js 가 만든다 · data-bake-drop) */
.pp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── 점프 무대 — 보라 우주 · 마법 책 · 기능 카드 넷 ─────────────────────── */
.pp-jump {
	background: #5a2fb0;
}
.pp-jump__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 11% 21%, #fff 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 86% 14%, #fff 0 1.6px, transparent 2.6px),
		radial-gradient(circle at 72% 33%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 24% 48%, rgba(255, 255, 255, 0.85) 0 1.1px, transparent 2px),
		radial-gradient(circle at 92% 58%, #fff 0 1.3px, transparent 2.3px),
		radial-gradient(circle at 7% 72%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 58% 9%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
		radial-gradient(circle at 40% 27%, rgba(255, 229, 160, 0.95) 0 1.6px, transparent 2.8px),
		radial-gradient(circle at 64% 70%, rgba(255, 229, 160, 0.9) 0 1.4px, transparent 2.6px),
		radial-gradient(120% 46% at 50% 112%, rgba(236, 218, 255, 0.55) 0, rgba(236, 218, 255, 0) 70%),
		radial-gradient(60% 40% at 50% 46%, rgba(255, 214, 250, 0.38) 0, rgba(255, 214, 250, 0) 70%),
		radial-gradient(130% 95% at 50% 32%, #b98af0 0%, #9259e0 34%, #6a36c2 68%, #4a238e 100%);
}
.pp-jump__world {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 47%;
	width: 86%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.pp-jump__world img {
	display: block;
	width: 100%;
	height: auto;
}
.pp-jump .pp-head__name {
	color: #fff;
	text-shadow: 0 2px 10px rgba(40, 10, 90, 0.45);
}
.pp-jump .pp-chip {
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.pp-jump .pp-chip:first-child {
	background: linear-gradient(135deg, #b47cf2, #8f52e0);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.55),
		0 3px 8px -3px rgba(30, 6, 80, 0.5);
}

/* 기능 카드 — 자리 · 회전만 바꾼다(크기 그대로). 기본 = 넷 다 보이게 펼친 꼴
   자리는 transform 하나로(무대 가운데 기준 이동) — 나눠 주기 · 넘기기가 레이아웃을 건드리지 않는다(흔들림 0).
   --pp-l · --pp-t = 카드 가운데가 놓일 무대 안 자리(%, 단위 없음). 이동량 = (자리 - 50) / 카드 폭(또는 높이) x 100% 로 바꾼다.
   --pp-cw = 카드 폭(무대 폭의 %) · --pp-ch = 카드 높이(무대 높이의 %) = 폭 x 무대 가로세로비 x 900/680. 무대 비율을 바꾸면 함께 고친다. */
.pp-jump {
	--pp-cw: 25;
	--pp-ch: 27.55;
}
.pp-jump__cards {
	position: absolute;
	inset: 0;
	z-index: 3;
}
.pp-card {
	--pp-l: 50;
	--pp-t: 50;
	--pp-r: 0deg;
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--pp-cw) * 1%);
	aspect-ratio: 680 / 900;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* % 여백은 카드가 아니라 무대 폭 기준이라 30px 가 되어 그림 칸이 반으로 줄었다(2026-10-08 실측 132px 카드 · 그림 72px) — 고정값으로 */
	padding: 7px 7px 9px;
	border-radius: 18px;
	border-radius: clamp(12px, 3.4cqw, 20px);
	background: linear-gradient(180deg, #fff 0%, var(--pp-tint, #f3ecff) 100%);
	box-shadow:
		inset 0 0 0 3px rgba(255, 255, 255, 0.9),
		0 16px 26px -12px rgba(30, 8, 80, 0.6),
		0 4px 8px -4px rgba(30, 8, 80, 0.35);
	transform: translate(-50%, -50%)
		translate(calc((var(--pp-l) - 50) / var(--pp-cw) * 100% * var(--pp-dir)), calc((var(--pp-t) - 50) / var(--pp-ch) * 100%))
		rotate(calc(var(--pp-r) * var(--pp-dir)));
	transition:
		transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1),
		box-shadow 0.3s;
	outline: none;
}
.pp-card__art {
	/* 기능 그림은 흰 여백이 넓다 — 둘레를 잘라 카드를 그림으로 채운다(늘이지 않고 같은 비율로 키움 · 캐릭터 결 그대로) */
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	overflow: hidden;
	border-radius: clamp(8px, 2.4cqw, 14px);
	background: #fff;
}
.pp-card__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	transform: scale(1.32);
	transform-origin: 50% 46%;
	pointer-events: none;
}
.pp-card__name {
	margin-top: 3%;
	font-family: var(--wz-font-display, 'Nunito', sans-serif);
	font-size: 13px;
	font-size: clamp(11px, 2.9cqw, 17px);
	font-weight: 800;
	line-height: 1.1;
	color: #5b2da6;
	text-align: center;
	white-space: nowrap;
}
.pp-card--lesson {
	--pp-tint: #ddf6ec;
}
.pp-card--arjam {
	--pp-tint: #dcefff;
}
.pp-card--brainup {
	--pp-tint: #fff2cc;
}
.pp-card--doodle {
	--pp-tint: #ffe1f1;
}

/* 펼친 꼴(휴대폰 — 아래쪽 한 줄 부채) */
.pp-card[data-pp-card='0'] {
	--pp-l: 14.5;
	--pp-t: 73;
	--pp-r: -9deg;
	z-index: 1;
}
.pp-card[data-pp-card='1'] {
	--pp-l: 38;
	--pp-t: 77;
	--pp-r: -3deg;
	z-index: 2;
}
.pp-card[data-pp-card='2'] {
	--pp-l: 62;
	--pp-t: 77;
	--pp-r: 3deg;
	z-index: 2;
}
.pp-card[data-pp-card='3'] {
	--pp-l: 85.5;
	--pp-t: 73;
	--pp-r: 9deg;
	z-index: 1;
}

/* 넘기기 단추 · 안내 — 놀이가 켜진 무대에서만 */
.pp-jump__ctl {
	display: none;
}
.pp-nav {
	position: absolute;
	z-index: 7;
	bottom: 4%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 14px -6px rgba(20, 4, 60, 0.6);
	transition:
		background 0.15s,
		transform 0.15s;
}
.pp-nav:hover {
	background: rgba(255, 255, 255, 0.3);
}
.pp-nav:active {
	transform: scale(0.94);
}
.pp-nav:focus-visible,
.pp-card:focus-visible {
	outline: 3px solid #ffd86b;
	outline-offset: 3px;
}
.pp-nav svg {
	width: 22px;
	height: 22px;
}
.pp-nav--prev {
	inset-inline-start: 4%;
}
.pp-nav--next {
	inset-inline-end: 4%;
}
[dir='rtl'] .pp-nav svg {
	transform: scaleX(-1);
}
.pp-jump__hint {
	position: absolute;
	z-index: 7;
	bottom: 4%;
	left: calc(4% + 52px);
	right: calc(4% + 52px);
	min-height: 44px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	font-size: clamp(11px, 2.6cqw, 15px);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 6px rgba(30, 6, 80, 0.6);
	pointer-events: none;
}
.pp-jump__hint svg {
	flex: none;
	width: 34px;
	height: 16px;
}

/* 놀이가 켜진 점프 무대 — 카드 부채(맨 앞이 아래 가운데 · 양옆이 기울어 뒤로 · 맨 뒤는 앞 카드 뒤에서 살짝) */
.pp-jump[data-pp-live] .pp-jump__ctl {
	display: block;
}
.pp-jump[data-pp-live] .pp-jump__cards {
	touch-action: pan-y;
}
.pp-jump[data-pp-live] .pp-card {
	cursor: pointer;
}
.pp-jump[data-pp-live] .pp-card[data-pos='s'] {
	--pp-l: 50;
	--pp-t: 68;
	--pp-r: 0deg;
}
.pp-jump[data-pp-live] .pp-card[data-pos='s'][data-pp-card='1'] {
	--pp-r: 3deg;
}
.pp-jump[data-pp-live] .pp-card[data-pos='s'][data-pp-card='2'] {
	--pp-r: -3deg;
}
.pp-jump[data-pp-live] .pp-card[data-pos='0'] {
	--pp-l: 50;
	--pp-t: 68;
	--pp-r: 0deg;
	z-index: 4;
	box-shadow:
		inset 0 0 0 3px #fff,
		0 0 0 3px rgba(255, 216, 107, 0.95),
		0 22px 34px -14px rgba(20, 4, 60, 0.75),
		0 6px 12px -4px rgba(20, 4, 60, 0.4);
}
.pp-jump[data-pp-live] .pp-card[data-pos='1'] {
	--pp-l: 75;
	--pp-t: 63;
	--pp-r: 12deg;
	z-index: 3;
}
.pp-jump[data-pp-live] .pp-card[data-pos='-1'] {
	--pp-l: 25;
	--pp-t: 63;
	--pp-r: -12deg;
	z-index: 3;
}
.pp-jump[data-pp-live] .pp-card[data-pos='2'] {
	--pp-l: 50;
	--pp-t: 57;
	--pp-r: 4deg;
	z-index: 1;
}
/* 화면에 처음 들어올 때 한 번 — 쌓인 카드를 차례로 나눠 준다 */
.pp-jump[data-pp-dealing] .pp-card[data-pp-card='1'] {
	transition-delay: 0.07s;
}
.pp-jump[data-pp-dealing] .pp-card[data-pp-card='2'] {
	transition-delay: 0.14s;
}
.pp-jump[data-pp-dealing] .pp-card[data-pp-card='3'] {
	transition-delay: 0.21s;
}

/* ── 런 무대 — 민트 · 공작 책상 · 색칠 도안 · 휴대폰 ──────────────────────── */
.wz-pp__stage--run .wz-pp__scene {
	--pp-ring: rgba(106, 214, 184, 0.45);
	--pp-shadow: rgba(26, 110, 88, 0.3);
}
.pp-run {
	background: #f3e3c8;
}
.pp-run__desk {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pp-run__desk img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}
.pp-run .pp-head__name {
	color: #11463a;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pp-run .pp-chip {
	color: #13604d;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: inset 0 0 0 1px rgba(54, 201, 161, 0.55);
}
.pp-run .pp-chip:first-child {
	color: #fff;
	background: linear-gradient(135deg, #47d6ae, #27b38d);
	box-shadow: 0 3px 8px -3px rgba(20, 100, 78, 0.55);
}

/* 색칠 도안 — 선 그림 위에 칠한 그림(픽셀까지 같은 자리). 놀이 중에는 canvas 가 문지른 곳만 칠한 그림으로 그린다 */
.pp-run__sheet {
	position: absolute;
	z-index: 2;
	inset-inline-start: 4%;
	top: 33%;
	width: 46%;
	aspect-ratio: 3 / 4;
	background: #fff;
	border-radius: 6px;
	transform: rotate(calc(-4deg * var(--pp-dir)));
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.04),
		0 14px 24px -12px rgba(90, 60, 20, 0.55),
		0 3px 6px -2px rgba(90, 60, 20, 0.3);
	overflow: hidden;
}
.pp-run__sheet > img,
.pp-run__paint {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.pp-run__glow {
	position: absolute;
	z-index: 3;
	inset-inline-start: 34%;
	top: 59%;
	width: 30%;
	height: 9%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(120, 255, 210, 0.7), rgba(120, 255, 210, 0));
	opacity: 0.8;
	pointer-events: none;
}
/* 튀어나온 뿌리(정식 그림) — 도안 위로 */
.pp-run__ppuri {
	position: absolute;
	z-index: 5;
	inset-inline-start: 24%;
	top: 22.5%;
	width: 50%;
	height: auto;
	pointer-events: none;
}
/* 휴대폰 틀(CSS) — 화면에는 도안을 비춘 모습(같은 그림을 잘라 보인다 · 다시 칠하지 않는다) */
.pp-run__phone {
	position: absolute;
	z-index: 4;
	inset-inline-start: 62%;
	top: 29%;
	width: 33%;
	aspect-ratio: 9 / 17.5;
	box-sizing: border-box;
	padding: 5% 4.5%;
	border-radius: 18%/9.5%;
	background: linear-gradient(145deg, #3c3f4d, #1d1f27);
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.14),
		0 18px 28px -12px rgba(40, 30, 10, 0.6),
		0 4px 8px -3px rgba(40, 30, 10, 0.35);
	transform: rotate(calc(8deg * var(--pp-dir)));
}
.pp-run__screen {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 12%/6.5%;
	background: #fdfcf8;
}
.pp-run__cam {
	position: absolute;
	left: -18%;
	top: 4%;
	width: 136%;
	height: auto;
	max-width: none;
}
.pp-run__corner {
	position: absolute;
	width: 18%;
	aspect-ratio: 1;
	border: 3px solid #36c9a1;
	border-radius: 4px;
}
.pp-run__corner--a {
	left: 9%;
	top: 8%;
	border-right: 0;
	border-bottom: 0;
}
.pp-run__corner--b {
	right: 9%;
	top: 8%;
	border-left: 0;
	border-bottom: 0;
}
.pp-run__corner--c {
	left: 9%;
	bottom: 8%;
	border-right: 0;
	border-top: 0;
}
.pp-run__corner--d {
	right: 9%;
	bottom: 8%;
	border-left: 0;
	border-top: 0;
}
.pp-run__beam {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 14%;
	background: linear-gradient(180deg, rgba(54, 201, 161, 0) 0%, rgba(54, 201, 161, 0.35) 70%, #36c9a1 96%, rgba(54, 201, 161, 0) 100%);
	opacity: 0;
	pointer-events: none;
}

/* 아래 막대 — 기본은 한 줄 글(색칠하면 살아나요), 놀이가 켜지면 단추 */
.pp-run__bar {
	position: absolute;
	z-index: 7;
	left: 4%;
	right: 4%;
	bottom: 4%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.pp-run__say,
.pp-run__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-size: clamp(14px, 3.6cqw, 18px);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}
.pp-run__say {
	color: #13604d;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		inset 0 0 0 2px rgba(54, 201, 161, 0.6),
		0 8px 18px -10px rgba(20, 90, 70, 0.6);
}
.pp-run__say svg,
.pp-run__go svg {
	flex: none;
	width: 22px;
	height: 22px;
}
.pp-run__go {
	display: none;
	border: 0;
	color: #fff;
	background: linear-gradient(135deg, #4ad8b0 0%, #26b08b 100%);
	box-shadow:
		0 4px 0 #1c8a6c,
		0 12px 20px -10px rgba(10, 80, 60, 0.7);
	cursor: pointer;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}
.pp-run__go:hover {
	transform: translateY(-2px);
	box-shadow:
		0 6px 0 #1c8a6c,
		0 14px 22px -10px rgba(10, 80, 60, 0.7);
}
.pp-run__go:active {
	transform: translateY(2px);
	box-shadow:
		0 2px 0 #1c8a6c,
		0 8px 14px -10px rgba(10, 80, 60, 0.7);
}
.pp-run__again {
	display: none;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #1f9c7a;
	background: #fff;
	box-shadow:
		inset 0 0 0 2px rgba(54, 201, 161, 0.65),
		0 8px 16px -8px rgba(20, 90, 70, 0.6);
	cursor: pointer;
}
.pp-run__again svg {
	width: 24px;
	height: 24px;
}
.pp-run__go:focus-visible,
.pp-run__again:focus-visible {
	outline: 3px solid #7b4fd0;
	outline-offset: 3px;
}

/* 놀이가 켜진 런 무대 */
.pp-run[data-pp-live] .pp-run__say {
	display: none;
}
.pp-run[data-pp-live] .pp-run__go {
	display: inline-flex;
}
.pp-run[data-pp-live] .pp-run__color,
.pp-run[data-pp-live] .pp-run__cam--color {
	opacity: 0;
}
.pp-run[data-pp-live] .pp-run__ppuri,
.pp-run[data-pp-live] .pp-run__glow {
	opacity: 0;
	visibility: hidden;
}
.pp-run[data-pp-live][data-pp-state='line'] .pp-run__sheet {
	touch-action: none;
	cursor: crosshair;
}
.pp-run[data-pp-live][data-pp-state='colored'] .pp-run__color,
.pp-run[data-pp-live][data-pp-state='colored'] .pp-run__cam--color,
.pp-run[data-pp-live][data-pp-state='scan'] .pp-run__color,
.pp-run[data-pp-live][data-pp-state='scan'] .pp-run__cam--color,
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__color,
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__cam--color {
	opacity: 1;
}
.pp-run[data-pp-live][data-pp-state='colored'] .pp-run__color,
.pp-run[data-pp-live][data-pp-state='colored'] .pp-run__cam--color {
	transition: opacity 0.5s ease-out;
}
/* 다 칠하면 단추가 한 번 손짓 */
.pp-run[data-pp-live][data-pp-state='colored'] .pp-run__go {
	animation: pp-nudge 0.9s ease-in-out 0.35s 1;
}
/* 남은 곳을 한 번에 쓸어 칠한다(시작 쪽 → 끝 쪽) */
.pp-run[data-pp-live][data-pp-state='wipe'] .pp-run__color,
.pp-run[data-pp-live][data-pp-state='wipe'] .pp-run__cam--color {
	opacity: 1;
	animation: pp-wipe 0.6s cubic-bezier(0.5, 0, 0.3, 1) both;
}
[dir='rtl'] .pp-run[data-pp-live][data-pp-state='wipe'] .pp-run__color,
[dir='rtl'] .pp-run[data-pp-live][data-pp-state='wipe'] .pp-run__cam--color {
	animation-name: pp-wipe-rtl;
}
.pp-run[data-pp-live][data-pp-state='wipe'] .pp-run__go,
.pp-run[data-pp-live][data-pp-state='scan'] .pp-run__go {
	cursor: default;
	opacity: 0.85;
}
/* 휴대폰이 도안을 비추는 선이 한 번 지나간다 */
.pp-run[data-pp-live][data-pp-state='scan'] .pp-run__beam {
	animation: pp-scan 0.75s ease-in-out 1 both;
}
/* 뿌리 뿅 — 위아래 이동 · 투명도만(크기 그대로) */
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__ppuri {
	opacity: 1;
	visibility: visible;
	animation: pp-pop 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1 both;
}
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__glow {
	opacity: 1;
	visibility: visible;
	animation: pp-glow 0.9s ease-out 1 both;
}
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__go {
	display: none;
}
.pp-run[data-pp-live][data-pp-state='alive'] .pp-run__again {
	display: grid;
}
/* 화면 밖에서 끝낸 경우 — 남은 움직임 없이 최종 모습 */
.pp-run[data-pp-live][data-pp-instant] .pp-run__ppuri,
.pp-run[data-pp-live][data-pp-instant] .pp-run__glow,
.pp-run[data-pp-live][data-pp-instant] .pp-run__color,
.pp-run[data-pp-live][data-pp-instant] .pp-run__cam--color {
	animation: none;
	transition: none;
}

/* 뿅 입자(js 가 만든다 · 끝나면 지운다 · data-bake-drop) */
.pp-run__sparks {
	position: absolute;
	z-index: 6;
	inset-inline-start: 49%;
	top: 45%;
	width: 0;
	height: 0;
	pointer-events: none;
}
.pp-spark {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pp-c, #ffb830);
	opacity: 0;
	animation: pp-burst 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) var(--pp-delay, 0s) 1 both;
}
.pp-spark--star {
	border-radius: 0;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	width: 16px;
	height: 16px;
	left: -8px;
	top: -8px;
}

@keyframes pp-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes pp-wipe-rtl {
	from {
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes pp-scan {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translateY(720%);
		opacity: 0;
	}
}
@keyframes pp-pop {
	0% {
		opacity: 0;
		transform: translateY(30%);
	}
	45% {
		opacity: 1;
	}
	62% {
		transform: translateY(-7%);
	}
	82% {
		transform: translateY(2%);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes pp-glow {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0.8;
	}
}
@keyframes pp-burst {
	0% {
		opacity: 0;
		transform: rotate(var(--pp-a, 0deg)) translateY(0);
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(var(--pp-a, 0deg)) translateY(calc(-1 * var(--pp-d, 70px)));
	}
}
@keyframes pp-nudge {
	0%,
	100% {
		transform: none;
	}
	30% {
		transform: translateY(-4px);
	}
	55% {
		transform: translateY(1px);
	}
	75% {
		transform: translateY(-2px);
	}
}

/* ── 태블릿(한 줄에 하나 · 넓은 무대) ─────────────────────────────────────── */
@media (min-width: 600px) {
	.wz-pp {
		padding: 72px 24px 80px;
	}
	.wz-pp__scene {
		aspect-ratio: 4 / 3.2;
	}
	.pp-jump__world {
		width: 76%;
		top: 46%;
	}
	.pp-jump {
		--pp-cw: 19;
		--pp-ch: 31.43;
	}
	.pp-card[data-pp-card='0'] {
		--pp-l: 13;
		--pp-t: 38;
		--pp-r: -8deg;
	}
	.pp-card[data-pp-card='1'] {
		--pp-l: 14;
		--pp-t: 72;
		--pp-r: 6deg;
	}
	.pp-card[data-pp-card='2'] {
		--pp-l: 87;
		--pp-t: 38;
		--pp-r: 8deg;
	}
	.pp-card[data-pp-card='3'] {
		--pp-l: 86;
		--pp-t: 72;
		--pp-r: -6deg;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='s'],
	.pp-jump[data-pp-live] .pp-card[data-pos='0'] {
		--pp-t: 69;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='1'] {
		--pp-l: 70;
		--pp-t: 63;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='-1'] {
		--pp-l: 30;
		--pp-t: 63;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='2'] {
		--pp-t: 56;
	}
	.pp-head {
		justify-content: center;
	}
	.pp-run__sheet {
		inset-inline-start: 11%;
		top: 32%;
		width: 32%;
	}
	.pp-run__glow {
		inset-inline-start: 34%;
		top: 57%;
		width: 20%;
	}
	.pp-run__ppuri {
		inset-inline-start: 26%;
		top: 17.5%;
		width: 36%;
	}
	.pp-run__sparks {
		inset-inline-start: 44%;
		top: 42%;
	}
	.pp-run__phone {
		inset-inline-start: 61%;
		top: 24%;
		width: 24%;
	}
}

/* ── PC(두 무대 나란히) ─────────────────────────────────────────────────── */
@media (min-width: 900px) {
	.wz-pp {
		padding: 88px 24px 96px;
	}
	.wz-pp__head {
		margin-bottom: 40px;
	}
	.wz-pp__stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(24px, 3vw, 40px);
		max-width: none;
	}
	.wz-pp__scene {
		aspect-ratio: 1 / 0.94;
		border-radius: 32px;
	}
	.pp-jump__world {
		width: 100%;
		top: 45%;
	}
	.pp-jump {
		--pp-cw: 22;
		--pp-ch: 30.98;
	}
	.pp-card[data-pp-card='0'] {
		--pp-l: 16;
		--pp-t: 37;
	}
	.pp-card[data-pp-card='1'] {
		--pp-l: 15;
		--pp-t: 71;
	}
	.pp-card[data-pp-card='2'] {
		--pp-l: 84;
		--pp-t: 37;
	}
	.pp-card[data-pp-card='3'] {
		--pp-l: 85;
		--pp-t: 71;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='s'],
	.pp-jump[data-pp-live] .pp-card[data-pos='0'] {
		--pp-t: 69;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='1'] {
		--pp-l: 74;
		--pp-t: 64;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='-1'] {
		--pp-l: 26;
		--pp-t: 64;
	}
	.pp-jump[data-pp-live] .pp-card[data-pos='2'] {
		--pp-t: 57;
	}
	.pp-run__sheet {
		inset-inline-start: 6%;
		top: 33%;
		width: 38%;
	}
	.pp-run__glow {
		inset-inline-start: 31%;
		top: 57%;
		width: 26%;
	}
	.pp-run__ppuri {
		inset-inline-start: 22%;
		top: 15.5%;
		width: 44%;
	}
	.pp-run__sparks {
		inset-inline-start: 44%;
		top: 44%;
	}
	.pp-run__phone {
		inset-inline-start: 60%;
		top: 25%;
		width: 30%;
	}
	.pp-nav {
		width: 48px;
		height: 48px;
	}
	.pp-jump__hint {
		left: calc(4% + 56px);
		right: calc(4% + 56px);
		min-height: 48px;
	}
}