/* 파티 띠 — 캐릭터 38(PC) · 18(휴대폰)이 무리 지어 어울리는 푸터 위 장면 (2026-10-12 B2 · 오너 요구 7 · 정정 "서로 조화롭게 어우러진 모습" · 계획 D1 · D7 · D8 · T6 5절)
   쓰는 곳 = 캐릭터 쪽 모험 구역 맨 아래 · 홈 마지막 구역 맨 아래(옛 가족 다섯 얼굴 줄 · 가족 축제 그림 자리).
   마크업 = scripts/site-upgrade/apply-party-band.py(정본 = scripts/site-upgrade/party-band.json · 판 번호 CSS_V) · 누름 · 파도 = js/party-band.js.
   - 무대 둘: PC(1800:640 · 38명) · 휴대폰(780:760 · 18명 — 무리 넷을 통째로). 안 보이는 무대는 display:none 이라 그림을 받지 않고(늦게 불러오기) Tab · 화면 읽기에서도 빠진다.
   - 층 = 배경 → (뒤에서 앞으로) 캐릭터 · 같이 쥔 소품. 자리 = % (무대 비) · 그림은 뒤집지 않는다 — 오른쪽→왼쪽 언어에서도 같은 장면(무리 안 짝 방향이 그림에 박혀 있다).
   - Shadows remain fixed; character-motion.js owns one visible actor at a time and the user pause control. */
.wz-party{position:relative;width:min(100vw,1440px);margin:8px calc((100% - min(100vw,1440px)) / 2) 0;direction:ltr}
.wz-party__stage{position:relative;width:100%;aspect-ratio:1800/640;overflow:visible}
.wz-party__stage--phone{display:none;aspect-ratio:780/760}
.wz-party__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 3%,#000 97%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to right,transparent 0,#000 3%,#000 97%,transparent 100%);mask-composite:intersect}
.wz-party__prop{position:absolute;height:auto;pointer-events:none;user-select:none}
/* 단추는 누름을 받지 않는다(pointer-events:none) — 무대가 받고 js 가 그 자리에 실제로 칠해진 캐릭터를 고른다(그림 상자의 투명한 곳이
   이웃을 가리지 않게) · 키보드(Tab · Enter · Space) · 화면 읽기는 단추 그대로 · 손가락 모양은 캐릭터 위에서만(무대 data-hit) */
.wz-party__stage{-webkit-tap-highlight-color:transparent}
.wz-party__stage[data-hit]{cursor:pointer}
.wz-party__char{position:absolute;display:block;margin:0;padding:0;border:0;background:none;pointer-events:none;line-height:0;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%}
.wz-party__char img{position:relative;z-index:1;display:block;width:100%;height:auto;transform-origin:50% 100%;pointer-events:none;user-select:none}
.wz-party__char::before{content:'';position:absolute;z-index:0;left:22%;right:22%;bottom:-2.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(45,42,62,.26),rgba(45,42,62,0))}
.wz-party__char[data-lift]::before{left:32%;right:32%;bottom:-9%;height:5%;opacity:.8}
.wz-party__char[data-noshadow]::before{content:none}
.wz-party__char:focus-visible{outline:3px solid var(--wz-purple,#9e63cf);outline-offset:2px;border-radius:12px}
.wz-party .ct-bubble--party{z-index:200;max-width:min(240px,calc(100vw - 32px))}
.wz-party .ct-bubble--party,.wz-party .ct-bubble--party[data-open]{pointer-events:none}
.wz-party__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:600px){
  .wz-party__stage--pc{display:none}
  .wz-party__stage--phone{display:block}
}
/* 홈 마지막 구역 — 위 단추 · 서비스 칸과 띄우고, 아래 보라 곡선이 풀밭 끝을 덮는다 */
.wz-ending-cta .wz-party{margin-top:24px;margin-bottom:-26px}
/* 캐릭터 쪽 모험 구역 — 아래 구름 띠 앞에서 끝난다 */
.wz-adventure .wz-party{margin-top:16px}
/* Character-page celebration: use the existing upper clearing, keeping stage geometry
   and motion visibility unchanged. All accents sit behind actors and ignore input. */
.wz-party__title{position:absolute;z-index:8;left:50%;top:18%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap;pointer-events:none;user-select:none}
.wz-party__title img{display:block;width:clamp(100px,13vw,180px);height:auto;filter:drop-shadow(0 3px 2px rgba(97,61,100,.12))}
.wz-party__lettering{position:relative;display:block;color:#8850aa;font:italic 700 clamp(32px,4.5vw,62px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.05em;transform:rotate(-8deg);text-shadow:0 2px 0 #fff5e6,0 4px 0 #e3c7ed}
.wz-party__lettering::after{content:'';position:absolute;left:8%;right:-8%;bottom:-9%;height:13%;border-bottom:3px solid #e9a65f;border-radius:50%;transform:rotate(-5deg)}
.wz-party__decor{position:absolute;inset:0;z-index:7;pointer-events:none;user-select:none}
.wz-party__accent{position:absolute;display:block;width:clamp(12px,2vw,27px);aspect-ratio:1;background:#f7d46e;clip-path:polygon(50% 0,61% 35%,98% 39%,70% 61%,80% 98%,50% 76%,20% 98%,30% 61%,2% 39%,39% 35%);transform:rotate(-12deg)}
.wz-party__accent--1{left:31%;top:24%;background:#f7d46e}
.wz-party__accent--2{left:63%;top:28%;width:clamp(9px,1.4vw,20px);background:#c8a4df;transform:rotate(18deg)}
.wz-party__accent--3{left:29%;top:47%;width:clamp(14px,2.4vw,30px);background:transparent;clip-path:none;border:3px solid #e6a8b1;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(25deg)}
.wz-party__accent--4{left:61%;top:54%;width:clamp(10px,1.3vw,18px);background:#f8dc8d;transform:rotate(17deg)}
.wz-party__accent--5{left:92%;top:53%;width:7px;height:18px;aspect-ratio:auto;border-radius:4px;background:#b39bd7;clip-path:none;transform:rotate(30deg);box-shadow:19px 14px 0 -1px #e9b777,-15px 24px 0 -1px #8ec5b7}
.wz-party__accent--6{left:5%;top:57%;width:7px;height:15px;aspect-ratio:auto;border-radius:4px;background:#e5a8b6;clip-path:none;transform:rotate(-25deg);box-shadow:17px -18px 0 -1px #b39bd7}
@media (max-width:600px){
  .wz-party__title{left:42%;top:21%;gap:10px}
  .wz-party__title img{width:clamp(82px,24vw,130px)}
  .wz-party__lettering{font-size:clamp(30px,8.5vw,46px)}
  .wz-party__accent--1{left:10%;top:25%;width:16px}
  .wz-party__accent--2{left:57%;top:18%;width:11px}
  .wz-party__accent--3{left:13%;top:62%;width:21px;border-width:2px}
  .wz-party__accent--4{left:82%;top:64%;width:16px}
  .wz-party__accent--5{left:86%;top:59%;width:5px;height:11px}
  .wz-party__accent--6{left:15%;top:55%;width:5px;height:11px}
}
@media (prefers-reduced-motion:reduce){.wz-party__char,.wz-party__char img{animation:none;transition:none}}

/* A real user pause applies to automatic laps and pointer-triggered poses. */
.wz-party > button.wz-motion-toggle.wz-party__motion-toggle{position:absolute;top:8px;right:12px;z-index:201;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #e0dce8;border-radius:50%;background:#fff;color:#4a4458;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.wz-party__motion-toggle:focus-visible{outline:3px solid var(--wz-purple,#9e63cf);outline-offset:2px}
.wz-party__motion-toggle .wz-motion-toggle__icon{position:relative;display:block;width:12px;height:12px}
.wz-party__motion-toggle .wz-motion-toggle__icon::before,.wz-party__motion-toggle .wz-motion-toggle__icon::after{content:"";position:absolute;top:0;width:4px;height:12px;border-radius:1px;background:currentColor}
.wz-party__motion-toggle .wz-motion-toggle__icon::before{left:1px}
.wz-party__motion-toggle .wz-motion-toggle__icon::after{right:1px}
.wz-party__motion-toggle[aria-pressed="true"] .wz-motion-toggle__icon::before{left:2px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.wz-party__motion-toggle[aria-pressed="true"] .wz-motion-toggle__icon::after{display:none}
html.lite .wz-party > button.wz-party__motion-toggle{display:none}
@media (prefers-reduced-motion:reduce){.wz-party > button.wz-motion-toggle.wz-party__motion-toggle{display:none}}