/* 키플그로우 보호자 홈페이지 — 앱과 같은 세계(Jua 글꼴, 앱 그린, 두꺼운 아래 테두리, 3D 장난감 캐릭터) */
@font-face {
  font-family: 'Jua';
  src: url('fonts/Jua-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --green: #4caf6d;
  --green-deep: #2e9d57;
  --green-edge: #1f7a41;
  --ink: #1e3226;
  --ink-soft: #2f5a3d;
  --outline: #1d5c35;
  --page: #f4fbf6; /* 앱 테마 primaryBackground(PROJECT_RULES §1) */
  --mint: #d7f8d8;
  --lilac: #efeef8;
  --lemon: #fbf6c8;
  --yellow: #ffd43b;
  --violet: #6329d1;
  --orange: #f6880a;
  --leaf: #189755;
  --green-ink: #23824a;   /* 작은 알약 바탕(흰 글자 4.8:1) */
  --green-ink-edge: #17603a;
}

* { box-sizing: border-box; }
html { background: var(--page); color: var(--ink); scrollbar-color: #4caf6d #e2f2e7; accent-color: #4caf6d; }
body { margin: 0; font-family: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
img { display: block; }
::selection { background: #bfeccb; color: var(--ink); }

/* ── 첫 화면: 시안(2688×1520) 비율의 무대 하나, 모든 자리는 무대 폭에 대한 % ── */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2688 / 1520;
  overflow: hidden;
  container-type: inline-size;
  background: var(--page);
}
.stage > * { position: absolute; }
.plate { margin: 0; }
.plate img { width: 100%; height: 100%; }

.r-room { inset: 0; }
.r-room img { object-fit: cover; }
.r-logo { left: 3.570%; top: 1.580%; width: 19.200%; height: 8.680%; }
.r-logo img { object-fit: contain; object-position: left center; }
.r-tv-screen { left: 45.090%; top: 9.610%; width: 39.430%; height: 38.420%; }
.r-tv-screen img { object-fit: cover; }
/* 솔·루나: 반쯤 앉은 스쿼트 렌더(그림자 포함). 높이는 시안 상자(솔 46.05%, 루나 44.74%)대로, 발은 구름 띠 위로.
   솔은 설명 글·버튼과 겹치지 않게 시안보다 4% 오른쪽, 루나 머리는 TV 아래쪽 30% 안에 */
.r-sol { left: 28.2%; top: 33.5%; width: 14.96%; height: 46%; }
.r-luna { left: 48.1%; top: 35.3%; width: 11.7%; height: 44.7%; }
.r-sol img, .r-luna img { transform-origin: 50% 100%; }
/* TV 장면이 바뀌면 둘이 폴짝(루나는 조금 늦게) */
.stage.hop .r-sol img { animation: hop 560ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.stage.hop .r-luna img { animation: hop 560ms cubic-bezier(0.3, 0.7, 0.4, 1) 90ms; }
@keyframes hop {
  0% { transform: none; }
  22% { transform: scaleY(0.95) scaleX(1.03); }
  55% { transform: translateY(-5%); }
  82% { transform: scaleY(0.97) scaleX(1.02); }
  100% { transform: none; }
}
.r-sol img, .r-luna img { object-fit: contain; object-position: center bottom; }
.r-phone { left: 87.800%; top: 37.760%; width: 6.030%; height: 15.130%; }
.r-phone img { object-fit: contain; object-position: center bottom; }
.r-clouds { left: 0; top: 77.630%; width: 100%; height: 22.370%; }
.r-clouds img { object-fit: cover; object-position: center bottom; }
.r-step-measure-icon { left: 16.220%; top: 86.320%; width: 4.910%; height: 10.000%; }
.r-step-improve-icon { left: 43.530%; top: 86.050%; width: 6.620%; height: 10.390%; }
.r-step-reward-icon { left: 68.820%; top: 86.050%; width: 6.920%; height: 10.390%; }
.r-step-measure-icon img, .r-step-improve-icon img, .r-step-reward-icon img { object-fit: contain; }

/* ── 글자·버튼 층(시안 상자 그대로, 크기는 무대 폭 기준 cqw: 시안 px ÷ 2688 × 100) ── */
.nav a {
  position: absolute;
  top: 3.29%;
  font-size: 1.18cqw;
  line-height: 1;
  color: #1a5236;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.35cqw 0;
  border-bottom: 0.14cqw solid transparent;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
.nav a:hover { border-bottom-color: var(--green); color: var(--green-edge); }
.nav a:focus-visible { outline: 0.18cqw solid var(--green); outline-offset: 0.3cqw; border-radius: 0.3cqw; }
.nav .n1 { left: 62.87%; }
.nav .n2 { left: 68.53%; }
.nav .n3 { left: 79.76%; }
.nav .n4 { left: 88.84%; }

.headline { margin: 0; font-weight: 400; line-height: 1; }
.headline span {
  position: absolute;
  white-space: nowrap;
  -webkit-text-stroke: 0.22em var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 var(--outline), 0 0.12em 0.14em rgba(20, 60, 35, 0.3);
  letter-spacing: -0.035em;
}
.headline span::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  z-index: -1;
  color: #fff;
  -webkit-text-stroke: 0.36em #fff;
  text-shadow: 0 0.1em 0.16em rgba(20, 60, 35, 0.25);
}
.headline span { isolation: isolate; }
.headline .l1 { left: 7.9%; top: 14.6%; font-size: 5.15cqw; color: #fff; }
.headline .l2 { left: 8.5%; top: 23.6%; font-size: 6.05cqw; color: var(--yellow); }
/* 반짝이: 흰 테두리 두른 노랑 알약 조각(시안 좌표 그대로, 그리는 건 CSS) */
.spark { width: 3%; height: 8.5%; }
.spark i {
  position: absolute;
  height: 0.63cqw;
  border: 0.24cqw solid #fff;
  border-radius: 99cqw;
  background: #ffc928;
  box-shadow: 0 0.12cqw 0.2cqw rgba(30, 80, 45, 0.16);
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  box-sizing: content-box;
}
.spark-l .d1 { left: 43.2%; top: 24%; width: 1.9cqw; --a: 49.8deg; }
.spark-l .d2 { left: 25.9%; top: 55%; width: 1.6cqw; }
.spark-l .d3 { left: 43.2%; top: 89.5%; width: 1.76cqw; --a: -43.7deg; }
.spark-r .d1 { left: 34.4%; top: 33%; width: 2.15cqw; height: 0.67cqw; --a: -40.9deg; }
.spark-r .d2 { left: 52.2%; top: 83%; width: 2.23cqw; height: 0.67cqw; }
.spark-l { left: 5.58%; top: 17.76%; }
.spark-r { left: 31.18%; top: 14.08%; width: 3.35%; height: 6.58%; }

.sub {
  left: 9.97%; top: 38.03%; width: 21%;
  margin: 0;
  font-size: 1.82cqw;
  line-height: 1.42;
  color: #1f4d33;
}

.pill-btn {
  left: 9.9%; top: 47.63%; width: 17.63%; height: 8.03%;
  display: flex; align-items: center; justify-content: center; gap: 0.7cqw;
  border-radius: 99cqw;
  background: var(--green-deep);
  box-shadow: 0 0.42cqw 0 var(--green-edge), 0 0.8cqw 1.2cqw rgba(31, 122, 65, 0.25);
  color: #fff;
  font-size: 2.1cqw;
  line-height: 1;
}
.pill-btn svg { width: 2.1cqw; height: 2.1cqw; }

.chip {
  display: flex; align-items: center; justify-content: center; gap: 0.6cqw;
  border-radius: 99cqw;
  background: #fff;
  box-shadow: 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.12);
  color: #2b3a33;
  line-height: 1;
}
.chip-pose { left: 45.83%; top: 13.16%; width: 9.38%; height: 5.92%; font-size: 1.55cqw; }
.chip-pose svg { width: 1.6cqw; height: 1.6cqw; color: var(--leaf); }
.chip-star { left: 74.18%; top: 11.97%; width: 8.78%; height: 6.32%; font-size: 2.3cqw; font-variant-numeric: tabular-nums; }
.chip-star svg { width: 2.4cqw; height: 2.4cqw; }

.phone-label {
  left: 87.87%; top: 21.71%; width: 10.19%; height: 5.26%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99cqw;
  background: #1b6fc6;
  border: 0.22cqw solid #fff;
  box-shadow: 0 0.25cqw 0.5cqw rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 1.26cqw;
  line-height: 1;
  white-space: nowrap;
}

.steps { margin: 0; padding: 0; list-style: none; }
.step {
  position: absolute;
  border-radius: 99cqw;
}
.step-measure { left: 12.65%; top: 85.92%; width: 21.95%; height: 11.58%; background: var(--mint); }
.step-improve { left: 39.88%; top: 85.39%; width: 21.21%; height: 12.5%; background: var(--lilac); }
.step-reward { left: 66.15%; top: 85.92%; width: 21.58%; height: 11.58%; background: var(--lemon); }
.step button {
  all: unset;
  position: absolute; inset: 0;
  border-radius: inherit;
  cursor: pointer;
}
.step button:focus-visible { outline: 0.22cqw solid var(--green-edge); outline-offset: 0.3cqw; }
/* 스티커 글씨: 바깥 색 테두리(::before) + 안쪽 흰 테두리 + 색 글자 */
.step .label {
  position: absolute;
  font-size: 3.15cqw;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  -webkit-text-stroke: 0.26em var(--tone);
  paint-order: stroke fill;
  pointer-events: none;
}
.step .label::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  z-index: -1;
  color: #fff;
  -webkit-text-stroke: 0.4em #fff;
}
.step-measure { --tone: var(--leaf); }
.step-improve { --tone: var(--violet); }
.step-reward { --tone: var(--orange); }
.step-measure .label { left: 47%; top: 24%; }
.step-improve .label { left: 51%; top: 25%; }
.step-reward .label { left: 47%; top: 24%; }
.step .label { isolation: isolate; }
.step .twinkle { position: absolute; color: #ffd02e; pointer-events: none; }
.step-improve .twinkle { color: #8b55f1; }
/* 점선 화살표: 점 셋 + 꺾쇠(CSS로) */
.arrow { width: 3.5%; height: 3.42%; color: #24a162; }
.arrow::before {
  content: ''; position: absolute; left: 8%; top: 41%; width: 10%; height: 19%; border-radius: 50%;
  background: currentColor; box-shadow: 1.2cqw 0 0 currentColor, 2.4cqw 0 0 currentColor;
}
.arrow::after {
  content: ''; position: absolute; right: 18%; top: 26%; width: 28%; height: 48%;
  border-top: 0.28cqw solid currentColor; border-right: 0.28cqw solid currentColor; border-radius: 0.1cqw;
  transform: rotate(45deg);
}
.arrow-1 { left: 35.34%; top: 89.74%; }
.arrow-2 { left: 62.05%; top: 89.74%; width: 3.42%; }

/* 무대 안 묶음 상자는 무대 전체를 덮고, 누를 수 있는 것만 반응한다 */
.nav, .headline, .steps { inset: 0; pointer-events: none; }
.nav a, .steps button { pointer-events: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phone-label { margin: 0; }
.pill-btn { margin: 0; cursor: default; }
.r-step-measure-icon, .r-step-improve-icon, .r-step-reward-icon { pointer-events: none; }
.r-step-measure-icon img, .r-step-improve-icon img, .r-step-reward-icon img { padding: 7%; }
.r-logo img { padding: 0; }
.phone-label::after {
  content: ''; position: absolute; left: 44%; bottom: -0.75cqw; width: 1cqw; height: 1cqw;
  background: #1b6fc6; border-right: 0.22cqw solid #fff; border-bottom: 0.22cqw solid #fff;
  transform: rotate(45deg);
}

/* ── 첫 화면 움직임: 측정 → 향상 → 보상 알약을 누르면(또는 저절로) TV 화면이 바뀐다 ── */
.r-tv-screen { overflow: hidden; border-radius: 0.2cqw; }
.r-tv-screen .scr {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(0.5cqw) saturate(1.2);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.r-tv-screen .scr.is-on { opacity: 1; transform: none; filter: none; }
.chip .ico { display: none; }
.stage:not([data-scene]) .ico-measure,
.stage[data-scene="measure"] .ico-measure,
.stage[data-scene="improve"] .ico-improve,
.stage[data-scene="reward"] .ico-reward { display: block; }
.stage[data-scene="improve"] .chip-pose svg { color: var(--violet); }
.stage[data-scene="reward"] .chip-pose svg { color: var(--orange); }
.chip.pop { animation: chip-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chip-pop { 0% { transform: scale(0.86); } 100% { transform: none; } }
.step { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease-out; }
.step:has(button[aria-pressed="true"]) { transform: translateY(-0.35cqw); box-shadow: 0 0.38cqw 0 var(--tone), 0 0.9cqw 1.4cqw rgba(30, 80, 45, 0.18); }
.step:has(button:hover) { transform: translateY(-0.2cqw); }
.step:has(button[aria-pressed="true"]:hover) { transform: translateY(-0.35cqw); }

/* ── 공통 ── */
:root {
  --cloud: #f8f9f3; /* 구름 띠 아래 색 */
  --wood: #6b3f17;
  --sea: #34c3d9;
  --pad-x: clamp(16px, 5vw, 64px);
  --sec-y: clamp(72px, 9vw, 136px);
  --body: clamp(1.02rem, 0.94rem + 0.32vw, 1.2rem);
}
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
.wrap { width: min(1180px, 100% - var(--pad-x) * 2); margin-inline: auto; }
main p, .foot p { font-size: var(--body); }
:focus-visible { outline: 3px solid var(--green-edge); outline-offset: 3px; }

.sec-title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--outline);
  text-wrap: balance;
}
.sec-lead { margin: 0; color: var(--ink-soft); line-height: 1.7; max-width: 34em; text-wrap: pretty; }

/* 스티커 제목(첫 화면 제목과 같은 재질: 흰 글자 + 진녹 테두리 + 바깥 흰 테두리) */
.sticker-title { margin: 0; font-weight: 400; line-height: 1.1; }
.sticker-title span {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.4rem);
  letter-spacing: -0.03em;
  color: #fff;
  -webkit-text-stroke: 0.2em var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 var(--outline);
}
.sticker-title span::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  z-index: -1;
  color: #fff;
  -webkit-text-stroke: 0.34em #fff;
  text-shadow: 0 0.1em 0.18em rgba(20, 60, 35, 0.25);
}

/* 작은 TV(앱 화면을 담는 틀) */
.tv-mini {
  position: relative;
  display: block;
  padding: clamp(5px, 0.6vw, 9px);
  border-radius: clamp(10px, 1.1vw, 16px);
  background: #1c2420;
  box-shadow: 0 0.9em 1.6em rgba(16, 52, 36, 0.22);
}
.tv-mini img { display: block; width: 100%; aspect-ratio: 1920 / 1058; object-fit: cover; border-radius: clamp(5px, 0.5vw, 8px); }
.tv-mini::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 26%; height: clamp(6px, 0.7vw, 10px);
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #1c2420;
}

/* ── 소개: 폰 하나, TV 하나 ── */
.intro { background: var(--cloud); padding-block: clamp(40px, 5vw, 72px) var(--sec-y); }
.intro-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; }
.setup {
  list-style: none; margin: clamp(40px, 6vw, 88px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.beat { position: relative; display: grid; gap: clamp(16px, 2vw, 26px); }
.beat-art { margin: 0; height: clamp(170px, 19vw, 260px); display: flex; align-items: flex-end; justify-content: center; }
.beat-phone .beat-art img { height: 92%; width: auto; filter: drop-shadow(0 0.8em 1em rgba(20, 60, 35, 0.18)); }
.beat-tv .beat-art { padding-bottom: clamp(8px, 1vw, 14px); }
.beat-tv .tv-mini { width: 100%; }
.beat-play .beat-art { gap: 0; }
.beat-play .kid { height: 100%; width: auto; filter: drop-shadow(0 0.8em 1em rgba(20, 60, 35, 0.16)); }
.beat-play .kid-luna { margin-left: -6%; height: 96%; }
/* 단계 사이 화살표(첫 화면 알약 사이 화살표와 같은 점·꺾쇠) */
.beat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(clamp(28px, 4vw, 64px) / -2);
  top: calc(clamp(170px, 19vw, 260px) / 2);
  width: 0.7em; height: 0.7em;
  background: linear-gradient(#24a162, #24a162) 0 0 / 100% 4px no-repeat, linear-gradient(#24a162, #24a162) 100% 0 / 4px 100% no-repeat;
  transform: translate(50%, -50%) rotate(45deg);
}
.beat h3 { margin: 0; display: flex; align-items: center; gap: 0.45em; font-weight: 400; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); line-height: 1.25; color: var(--ink); }
.beat .num {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: var(--green-ink);
  box-shadow: 0 0.16em 0 var(--green-ink-edge);
  color: #fff;
  font-size: 0.82em;
  line-height: 1;
}
.beat p { margin: 0.5em 0 0; color: var(--ink-soft); line-height: 1.65; text-wrap: pretty; }

/* ── 이렇게 놀아요: 앱 지도처럼 바다 위 섬을 따라 ── */
.map {
  position: relative;
  background: var(--sea) url('assets/plates/sea.webp') 0 0 / clamp(300px, 32vw, 460px) repeat;
  padding-block: clamp(96px, 11vw, 168px);
}
.map-shore {
  position: absolute; left: 0; right: 0;
  height: clamp(34px, 4vw, 60px);
  background: #f4dfae url('assets/plates/sand.webp') 0 0 / 260px repeat;
  filter: drop-shadow(0 6px 0 rgba(255, 255, 255, 0.9));
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 21px, #000 22px) 50% 100% / 64px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat;
          mask: radial-gradient(circle at 50% 100%, transparent 21px, #000 22px) 50% 100% / 64px 100% repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 22px) no-repeat;
  z-index: 1;
}
.map-shore-top { top: 0; }
.map-shore-bottom { bottom: 0; transform: scaleY(-1); }
.map-head { text-align: center; display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); }
.map-lead {
  margin: 0;
  max-width: 40em;
  padding: 0.75em 1.4em;
  border-radius: 1.6em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.5em 1.2em rgba(8, 70, 90, 0.16);
  color: var(--ink);
  line-height: 1.6;
  text-wrap: balance;
}

.leg {
  --tone: var(--leaf);
  --tone-ink: #1f7a41;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 110px);
}
.leg-improve { --tone: var(--violet); --tone-ink: var(--violet); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.leg-improve .leg-card { order: 2; }
.leg-reward { --tone: var(--orange); --tone-ink: #a85300; }
.leg-card {
  position: relative;
  padding: clamp(22px, 2.6vw, 36px);
  border: 3px solid var(--tone);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--tone), 0 1.2em 2em rgba(8, 70, 90, 0.22);
}
.step-word {
  display: inline-block;
  margin-right: 0.2em;
  padding: 0.18em 0.6em 0.14em;
  border-radius: 99px;
  background: var(--tone-ink);
  box-shadow: 0 0.12em 0 color-mix(in srgb, var(--tone-ink) 72%, #000);
  color: #fff;
  font-size: 0.62em;
  vertical-align: 0.28em;
  letter-spacing: 0;
}
.leg-card h3 { margin: 0 0 0.45em; font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.leg-card > p { margin: 0; color: var(--ink-soft); line-height: 1.7; text-wrap: pretty; }
.leg-tv { margin: clamp(18px, 2vw, 26px) auto clamp(8px, 1vw, 12px); max-width: 360px; }

.isles { position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 6 / 5; }
/* 섬 사이 점선 길(앱 지도 길처럼 S자로 휘어 내려간다) */
.isles::before, .isles::after {
  content: '';
  position: absolute;
  border: 0 dotted rgba(255, 255, 255, 0.95);
  z-index: 0;
}
.isles::before { left: 20%; right: 20%; top: 14%; height: 36%; border-width: 6px 6px 6px 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.isles::after { left: 20%; right: 20%; top: 50%; height: 34%; border-width: 0 0 6px 6px; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.isle {
  position: absolute;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  animation: bob 5.6s ease-in-out infinite;
}
.isle img { width: 100%; height: auto; filter: drop-shadow(0 0.7em 0.6em rgba(6, 60, 80, 0.28)); }
.isle span {
  margin-top: -9%;
  padding: 0.35em 0.9em 0.3em;
  border-radius: 99px;
  border: 2px solid var(--tone);
  box-shadow: 0 3px 0 var(--tone);
  background: #fff;
  color: var(--ink);
  font-size: clamp(0.82rem, 0.7rem + 0.35vw, 1.02rem);
  line-height: 1.2;
  white-space: nowrap;
}
.isle:nth-child(1) { z-index: 7; }
.isle:nth-child(2) { z-index: 6; }
.isle:nth-child(3) { z-index: 5; }
.isle:nth-child(4) { z-index: 4; }
.isle:nth-child(5) { z-index: 3; }
.isle:nth-child(6) { z-index: 2; }
.isle:nth-child(2) { animation-delay: -1.2s; }
.isle:nth-child(3) { animation-delay: -2.6s; }
.isle:nth-child(4) { animation-delay: -3.4s; }
.isle:nth-child(5) { animation-delay: -4.5s; }
.isle:nth-child(6) { animation-delay: -0.6s; }
.isle:nth-child(7) { animation-delay: -2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.isles-measure { aspect-ratio: 6 / 5.6; }
.isles-measure .i1 { left: 0; top: 0; width: 38%; }
.isles-measure .i2 { left: 58%; top: 3%; width: 38%; }
.isles-measure .i3 { left: 30%; top: 33%; width: 39%; }
.isles-measure .i4 { left: 1%; top: 65%; width: 37%; }
.isles-measure .i5 { left: 60%; top: 64%; width: 37%; }
.isles-measure::before { top: 13%; height: 37%; }
.isles-measure::after { top: 50%; height: 35%; }

.isles-improve { aspect-ratio: 6 / 5.2; }
.isles-improve .i1 { left: 0; top: 0; width: 33%; }
.isles-improve .i2 { left: 34%; top: 4%; width: 33%; }
.isles-improve .i3 { left: 67%; top: 0; width: 33%; }
.isles-improve .i4 { left: 15%; top: 34%; width: 33%; }
.isles-improve .i5 { left: 52%; top: 36%; width: 33%; }
.isles-improve .i6 { left: 4%; top: 68%; width: 33%; }
.isles-improve .i7 { left: 58%; top: 69%; width: 33%; }
.isles-improve::before { top: 12%; height: 38%; left: 16%; right: 16%; }
.isles-improve::after { top: 50%; height: 34%; left: 16%; right: 16%; }

.isles-reward { aspect-ratio: 6 / 4.6; }
.isles-reward::before, .isles-reward::after { display: none; }
.reward-cloud { position: absolute; left: 6%; top: 0; width: 80%; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 0.8em 0.7em rgba(6, 60, 80, 0.28)); }
.reward-gift { position: absolute; right: 6%; bottom: 2%; width: 24%; animation: bob 4.8s ease-in-out -1.5s infinite; filter: drop-shadow(0 0.7em 0.6em rgba(6, 60, 80, 0.3)); }

.leg-next {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(48px, 6vw, 88px);
}
.leg-next img { width: clamp(120px, 14vw, 190px); filter: saturate(0.75) drop-shadow(0 0.6em 0.6em rgba(6, 60, 80, 0.28)); opacity: 0.92; }
.leg-next p {
  margin: 0;
  max-width: 30em;
  padding: 0.85em 1.3em;
  border-radius: 1.4em;
  border: 2px dashed rgba(99, 41, 209, 0.45);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  line-height: 1.55;
}
.leg-next strong { display: block; font-weight: 400; color: var(--violet); font-size: 1.12em; }

/* ── 솔과 루나: 축하 무대 위 ── */
.duo { background: var(--page); padding-block: var(--sec-y); }
.duo-stage {
  position: relative;
  width: min(1320px, 100% - var(--pad-x) * 2);
  margin-inline: auto;
  aspect-ratio: 2400 / 1029;
  min-height: 420px;
  border: 4px solid #fff;
  border-radius: clamp(24px, 3vw, 44px);
  background: #cfe9ff url('assets/plates/stage-bg.webp') 50% 50% / cover no-repeat;
  box-shadow: 0 0 0 3px #b9dcff, 0 1.4em 2.6em rgba(60, 80, 140, 0.18);
  overflow: hidden;
}
.duo-stage .sticker-title { position: absolute; left: 0; right: 0; top: clamp(18px, 4%, 48px); text-align: center; z-index: 2; }
.duo-kid { position: absolute; margin: 0; bottom: 6%; height: 70%; z-index: 1; }
.duo-kid img { height: 100%; width: auto; filter: drop-shadow(0 1em 1em rgba(60, 40, 120, 0.22)); }
.duo-sol { right: 50.5%; }
.duo-luna { left: 51.5%; }
.bubble {
  position: absolute;
  top: 6%;
  width: max-content;
  max-width: clamp(170px, 17vw, 250px);
  padding: 0.75em 1em 0.8em;
  border: 3px solid var(--green);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0.6em 1.2em rgba(40, 60, 90, 0.18);
  color: var(--ink);
  font-size: clamp(0.95rem, 0.82rem + 0.42vw, 1.2rem);
  line-height: 1.45;
  text-wrap: balance;
}
.bubble b { display: block; width: max-content; margin: -1.6em 0 0.3em; padding: 0.15em 0.75em; border-radius: 99px; background: var(--green-ink); color: #fff; font-weight: 400; font-size: 0.85em; }
.bubble-sol { right: 92%; }
.bubble-luna { left: 92%; }
.bubble-luna b { background: var(--violet); }
.bubble-luna { border-color: #8b55f1; }
/* 꼬리: 테두리색 삼각형 위에 흰 삼각형(꼭짓점 셋) — 캐릭터 쪽을 가리킨다 */
.bubble::before, .bubble::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); }
.bubble-sol::before { right: -18px; width: 19px; height: 24px; background: var(--green); clip-path: polygon(0 0, 100% 62%, 0 100%); }
.bubble-sol::after { right: -12px; width: 14px; height: 17px; background: #fff; clip-path: polygon(0 0, 100% 62%, 0 100%); }
.bubble-luna::before { left: -18px; width: 19px; height: 24px; background: #8b55f1; clip-path: polygon(100% 0, 0 62%, 100% 100%); }
.bubble-luna::after { left: -12px; width: 14px; height: 17px; background: #fff; clip-path: polygon(100% 0, 0 62%, 100% 100%); }
.duo-copy { display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 28px); text-align: center; margin-top: clamp(28px, 3.4vw, 48px); }
.duo-lead { margin: 0; max-width: 34em; color: var(--ink-soft); line-height: 1.75; text-wrap: balance; }
.duo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.duo-points li {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1.05em 0.5em;
  border: 2px solid var(--green);
  box-shadow: 0 4px 0 var(--green);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
}
.duo-points li::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px #f1b500 inset; }

/* ── 보호자 안내: 나무 안내판 + 흰 판 ── */
.guide { background: var(--page); padding-block: 0 var(--sec-y); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.guide-sign { position: relative; margin: 0; }
.guide-sign img { width: 100%; height: auto; filter: drop-shadow(0 1em 1em rgba(70, 45, 20, 0.18)); }
.guide-sign h2 {
  position: absolute; left: 12%; right: 12%; top: 18%;
  margin: 0;
  text-align: center;
  font-weight: 400;
  font-size: clamp(1.7rem, 0.9rem + 2.4vw, 3.1rem);
  line-height: 1.1;
  color: var(--wood);
  text-shadow: 0 2px 0 rgba(255, 236, 200, 0.7);
}
.guide-board {
  padding: clamp(22px, 2.8vw, 40px);
  border: 3px solid var(--green);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--green), 0 1.2em 2em rgba(20, 60, 35, 0.1);
}
.guide-lead { margin: 0 0 clamp(16px, 2vw, 24px); color: var(--ink-soft); line-height: 1.6; }
.notes { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(20px, 3vw, 40px); }
.note dt { display: flex; align-items: center; gap: 0.55em; color: var(--ink); font-size: clamp(1.12rem, 1rem + 0.4vw, 1.35rem); line-height: 1.3; }
.note dt svg { flex: none; width: 1.9em; height: 1.9em; padding: 0.38em; border-radius: 50%; background: var(--mint); color: var(--green-edge); }
.note dd { margin: 0.5em 0 0; color: var(--ink-soft); font-size: var(--body); line-height: 1.65; text-wrap: pretty; }

/* ── 마무리: 첫 화면과 같은 구름 띠로 닫는다 ── */
.close { position: relative; background: var(--page); }
.close-sky {
  position: relative;
  display: grid; justify-items: center; gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(24px, 3vw, 40px) var(--pad-x) clamp(150px, 15vw, 230px);
  text-align: center;
  background: url('assets/plates/clouds.webp') 50% 100% / max(1400px, 100%) auto no-repeat;
}
.close-logo { width: clamp(170px, 18vw, 250px); height: auto; }
.close-sky > p:not(.pill-static) { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.pill-static {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin: 0;
  padding: 0.6em 1.5em 0.55em;
  border-radius: 99px;
  background: var(--green-ink);
  box-shadow: 0 0.22em 0 var(--green-ink-edge), 0 0.6em 1em rgba(31, 122, 65, 0.22);
  color: #fff;
  font-size: clamp(1.12rem, 0.95rem + 0.55vw, 1.5rem);
  line-height: 1;
}
.pill-static svg { width: 1.05em; height: 1.05em; }

.foot { background: var(--outline); color: #e9f7ee; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px 26px; }
.foot p { margin: 0; font-size: 0.98rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: #fff; text-decoration: none; text-underline-offset: 0.25em; font-size: 0.98rem; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.foot a:focus-visible { outline-color: var(--yellow); }

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .isle, .reward-cloud, .reward-gift { animation: none; }
  .r-tv-screen .scr, .step { transition: none; }
  .stage.hop .r-sol img, .stage.hop .r-luna img { animation: none; }
  .chip.pop { animation: none; }
}

/* ── 장면 묶음: 데스크톱은 무대 전체(위치·크기 그대로), 폰은 TV 쪽만 잘라 보인다 ── */
.scene { inset: 0; container-type: inline-size; }
.scene > * { position: absolute; }
.nav a { font-size: max(1.48cqw, 13px); } /* 시안 글자 높이(약 33px/2688)에 맞춤 */
.sub { font-size: max(1.82cqw, 15px); }

/* ── 화면 크기 대응 ── */
@media (max-width: 960px) {
  .intro-head { grid-template-columns: 1fr; }
  .setup { grid-template-columns: 1fr 1fr; }
  .beat-play { grid-column: 1 / -1; }
  .beat-tv::after { display: none; }
  .leg, .leg-improve { grid-template-columns: 1fr; }
  .leg-improve .leg-card { order: 0; }
  .leg-card { max-width: 640px; }
  .isles { max-width: 640px; width: 100%; justify-self: center; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-sign { width: min(420px, 100%); justify-self: center; }
  .bubble { max-width: 200px; }
}

@media (max-width: 760px) {
  /* 첫 화면: 글은 위로 빼서 읽히게, 장면은 아래에 */
  .stage { aspect-ratio: auto; display: flex; flex-direction: column; padding-top: 14px; }
  .stage > * { position: relative; }
  .r-logo { order: 1; left: auto; top: auto; width: 150px; height: auto; margin: 0 var(--pad-x); }
  .r-logo img { height: auto; }
  .nav { order: 2; inset: auto; display: flex; flex-wrap: wrap; gap: 0 18px; margin: 8px var(--pad-x) 0; }
  .nav a { position: static; font-size: 15px; padding: 12px 0; border-bottom-width: 2px; } /* 손가락으로 누르기 좋게 높이 약 40px */
  .headline { order: 3; inset: auto; margin: 20px var(--pad-x) 0; }
  .headline span { position: relative; display: block; left: auto; top: auto; width: max-content; }
  .headline .l1 { font-size: clamp(2.4rem, 12.4vw, 3.6rem); left: 0.08em; }
  .headline .l2 { font-size: clamp(2.8rem, 14.6vw, 4.2rem); margin-top: 0.06em; left: 0.06em; }
  .spark { display: none; }
  .sub { order: 4; left: auto; top: auto; width: auto; margin: 16px var(--pad-x) 0; font-size: 1.12rem; text-shadow: none; }
  .pill-btn { order: 5; left: auto; top: auto; width: auto; height: auto; align-self: flex-start; margin: 18px var(--pad-x) 0; padding: 14px 24px 13px; gap: 8px; font-size: 1.2rem; background: var(--green-ink); box-shadow: 0 5px 0 var(--green-ink-edge), 0 10px 16px rgba(31, 122, 65, 0.22); }
  .pill-btn svg { width: 1.1em; height: 1.1em; }
  .scene {
    order: 6;
    inset: auto;
    width: 160vw;
    margin: 22px 0 0 -36vw; /* 장면의 22.5%~85%만 보인다: 솔부터 TV 오른쪽 끝까지 */
    aspect-ratio: 2688 / 1520;
    -webkit-mask: linear-gradient(transparent, #000 14%);
            mask: linear-gradient(transparent, #000 14%);
  }
  .r-clouds, .arrow, .r-step-measure-icon, .r-step-improve-icon, .r-step-reward-icon { display: none; }
  .steps {
    order: 7;
    inset: auto;
    display: flex; gap: 8px;
    margin-top: -9vw;
    padding: 34px 12px 30px;
    background: url('assets/plates/clouds.webp') 50% 0 / auto 100% no-repeat, var(--cloud);
  }
  .step { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1; min-height: 54px; }
  .step:has(button[aria-pressed="true"]) { transform: translateY(-2px); box-shadow: 0 4px 0 var(--tone), 0 8px 14px rgba(30, 80, 45, 0.16); }
  .step .label { left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; }

  .intro { padding-top: 32px; }
  .setup { grid-template-columns: 1fr; }
  .beat::after { display: none; }
  .beat-art { height: 190px; }
  .isle span { font-size: 0.76rem; padding: 0.3em 0.7em 0.25em; }
  .leg-next { flex-direction: column; text-align: center; }

  .duo-stage { aspect-ratio: auto; min-height: 520px; background-position: 50% 30%; }
  .duo-stage .sticker-title span { font-size: clamp(1.8rem, 8.6vw, 2.6rem); }
  .duo-kid { bottom: 7%; height: 46%; }
  .duo-luna { height: 44%; }
  .bubble { top: auto; bottom: 104%; max-width: min(160px, calc(50vw - 40px)); font-size: 0.95rem; }
  .bubble-sol { right: 8%; }
  .bubble-luna { left: 6%; }
  .bubble::before, .bubble::after { top: 100%; transform: none; }
  .bubble-sol::before { right: 22%; width: 22px; height: 18px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
  .bubble-sol::after { right: calc(22% + 4px); top: calc(100% - 3px); width: 14px; height: 12px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
  .bubble-luna::before { left: 22%; width: 22px; height: 18px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
  .bubble-luna::after { left: calc(22% + 4px); top: calc(100% - 3px); width: 14px; height: 12px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
  .notes { grid-template-columns: 1fr; }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .foot nav { gap: 0 20px; }
  .foot a { display: inline-block; padding: 10px 0; }
}

/* ── 스티커 글씨 v2: 글자 자체엔 테두리를 긋지 않는다(긋으면 겹친 획 사이에 진한 이음매가 보이고 흰 글자가 가늘어졌다).
   뒤에 두 겹을 깐다: ::after = 진한 색 테두리, ::before = 그 바깥 흰 테두리 ── */
.headline span, .sticker-title span, .step .label { -webkit-text-stroke: 0; text-shadow: none; isolation: isolate; }
.headline span::after, .sticker-title span::after, .step .label::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.headline span::before, .sticker-title span::before, .step .label::before { z-index: -2; }
.headline span::after { color: var(--outline); -webkit-text-stroke: 0.22em var(--outline); text-shadow: 0 0.07em 0 var(--outline); }
.headline span::before { -webkit-text-stroke: 0.38em #fff; }
.sticker-title span::after { color: var(--outline); -webkit-text-stroke: 0.2em var(--outline); text-shadow: 0 0.07em 0 var(--outline); }
.sticker-title span::before { -webkit-text-stroke: 0.36em #fff; }
.step .label::after { color: var(--tone); -webkit-text-stroke: 0.26em var(--tone); }
.step .label::before { -webkit-text-stroke: 0.42em #fff; }

/* 알약 옆 장식(시안 좌표 그대로): 측정 = 초록 빗금·별빛, 향상 = 보라 별빛, 보상 = 양옆 노랑 빛살 */
.deco { inset: 0; pointer-events: none; }
.deco > * { position: absolute; transform: translate(-50%, -50%) rotate(var(--a, 0deg)); }
.deco .dash { height: 0.37cqw; border-radius: 99cqw; }
.deco .twk { width: var(--s); height: var(--s); }
.d-m1 { left: 31.1%; top: 88.82%; width: 0.97cqw; --a: -35deg; background: #8ad46b; }
.d-m2 { left: 31.47%; top: 90.99%; width: 0.89cqw; --a: 12deg; background: #8ad46b; }
.t-m1 { left: 29.99%; top: 93.42%; --s: 0.6cqw; fill: #36b37e; }
.t-i1 { left: 42.6%; top: 91.25%; --s: 0.82cqw; fill: #8b55f1; }
.t-i2 { left: 58.63%; top: 89.87%; --s: 1.12cqw; fill: #8b55f1; }
.t-i3 { left: 57.44%; top: 93.29%; --s: 0.67cqw; fill: #8b55f1; }
.d-r1, .d-r2, .d-r3, .d-r4, .d-r5, .d-r6 { width: 0.97cqw; background: #f8cf3f; }
.d-r1 { left: 69.42%; top: 89.8%; --a: 30deg; }
.d-r2 { left: 69.12%; top: 91.45%; }
.d-r3 { left: 69.42%; top: 93.03%; --a: -30deg; }
.d-r4 { left: 83.33%; top: 89.8%; --a: -30deg; }
.d-r5 { left: 83.71%; top: 91.45%; }
.d-r6 { left: 83.33%; top: 93.03%; --a: 30deg; }
/* 아주 좁은 폭에서도 글자가 너무 작아지지 않게 */
.step .label { font-size: max(3.15cqw, 15px); }
.chip-pose { font-size: max(1.55cqw, 11px); }
.chip-star { font-size: max(2.3cqw, 13px); }
.phone-label { font-size: max(1.26cqw, 11px); }
@media (max-width: 760px) { .deco { display: none; } .step .label { font-size: 1.5rem; } }