/* 크루 모집 소개(/welcome, 기능지침 11.39) — 30초 소개 영상은 파일이 아니라 이 CSS 의 애니메이션이다.
   크기는 무대 폭(cqw)을 따라 커지고 줄어 영상처럼 보인다. 색 토큰은 첫 화면(.home-landing)의 것을 물려받는다. */

.wv { container: wv / inline-size; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: var(--sq-cream); color: var(--sq-ink); border: 2.5px solid var(--sq-ink); box-shadow: 6px 6px 0 var(--sq-ink);
  --u: 1cqw; user-select: none; -webkit-user-select: none; font-family: Pretendard, system-ui, sans-serif; word-break: keep-all }
/* 좁은 화면은 4:5 — 두 칸을 위아래로 쌓는다. 같은 무대를 녹화하면 SNS 피드 비율이 된다. */
@media (max-width: 639px) { .wv { aspect-ratio: 4 / 5; --u: 1.9cqw } }
.wv:fullscreen { border-radius: 0; border: 0; box-shadow: none; aspect-ratio: auto; width: 100vw; height: 100vh }

/* 떠나는 장면은 바로 감춘다 — .on 이 빠지는 순간 애니메이션이 풀려 다 그려진 모습이 비친다. */
.wv-s { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 5) calc(var(--u) * 6) }
.wv-s.on { opacity: 1; visibility: visible; transition: opacity .35s }
.wv-s.wv-center { grid-template-columns: 1fr; justify-items: center; text-align: center }
@media (max-width: 639px) {
  .wv-s { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: calc(var(--u) * 5) calc(var(--u) * 4); gap: calc(var(--u) * 2) }
  .wv-s > .wv-demo { align-self: center }
  .wv-s.wv-center { grid-template-rows: 1fr; align-items: center }
}

/* 애니메이션 — 요소마다 시작 시각(--d) · 사라지는 시각(--o)을 장면 기준으로 적는다. 되감기는 --off 만큼 앞당긴다. */
.wv-s.on .wv-in { animation: wv-in .55s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) - var(--off, 0s)) both }
.wv-s.on .wv-pop { animation: wv-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) - var(--off, 0s)) both }
.wv-s.on .wv-drop { animation: wv-drop .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) - var(--off, 0s)) both }
.wv-s.on .wv-io { animation: wv-in .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) - var(--off, 0s)) both,
  wv-away .45s ease-in calc(var(--o, 9s) - var(--off, 0s)) forwards }
.wv-s.on .wv-pio { animation: wv-pop .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) - var(--off, 0s)) both,
  wv-away .45s ease-in calc(var(--o, 9s) - var(--off, 0s)) forwards }
.wv-s.on .wv-gone { animation: wv-fade .3s ease-in calc(var(--o, 9s) - var(--off, 0s)) forwards }
.wv.paused *, .wv.paused *::after { animation-play-state: paused !important }
@keyframes wv-in { from { opacity: 0; transform: translateY(calc(var(--u) * 2)) } to { opacity: 1; transform: none } }
@keyframes wv-pop { from { opacity: 0; transform: scale(.4) rotate(var(--r, 0deg)) } to { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)) } }
@keyframes wv-drop { from { opacity: 0; transform: translateY(calc(var(--u) * -4)) } to { opacity: 1; transform: none } }
@keyframes wv-away { to { opacity: 0; transform: translate(var(--ax, 0), var(--ay, 0)) scale(.2) rotate(30deg) } }
@keyframes wv-fade { to { opacity: 0 } }

/* 글자 */
.wv-tag { display: inline-block; font-size: calc(var(--u) * 1.5); font-weight: 900; padding: calc(var(--u) * .45) calc(var(--u) * 1.2);
  border: 2px solid var(--sq-ink); border-radius: 999px; background: var(--sq-pink) }
.wv-tag.mint { background: var(--sq-mint) }
.wv-tag.lav { background: var(--sq-lav) }
.wv-premium { display: inline-block; margin-left: calc(var(--u) * .6); font-size: calc(var(--u) * 1.3); font-weight: 900; color: #fff;
  background: var(--sq-ink); border-radius: 999px; padding: calc(var(--u) * .45) calc(var(--u) * 1.1) }
.wv-h { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 4); line-height: 1.22; font-weight: 900; letter-spacing: -.02em }
.wv-p { margin-top: calc(var(--u) * 1.3); font-size: calc(var(--u) * 1.75); line-height: 1.55; color: #555; font-weight: 600 }
.wv-mark { background: linear-gradient(transparent 58%, var(--sq-pink) 58%, var(--sq-pink) 90%, transparent 90%) }
.wv-big { font-size: calc(var(--u) * 5.4); line-height: 1.2; font-weight: 900; letter-spacing: -.03em }
@media (max-width: 639px) { .wv-h { font-size: calc(var(--u) * 3.6) } .wv-big { font-size: calc(var(--u) * 4.6) } }

/* 공통 카드(스티커) */
.wv-card { background: #fff; border: 2px solid var(--sq-ink); border-radius: calc(var(--u) * 1.6); box-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--sq-ink) }
.wv-demo { position: relative; width: 100%; display: flex; justify-content: center }
.wv-swap { position: relative; display: inline-grid }
.wv-swap > * { grid-area: 1 / 1; justify-self: end }
.wv-accent { color: var(--accent) }
.wv-avatar { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; border: 2px solid var(--sq-ink); background: var(--sq-mint);
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 1.8); font-weight: 900 }
.wv-avatar.sm { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); font-size: calc(var(--u) * .95); border-width: 1.5px }

/* ① 시작 — 흩어진 할 일 */
.wv-chip { position: absolute; left: var(--x); top: var(--y); font-size: calc(var(--u) * 1.7); font-weight: 800; white-space: nowrap;
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4); border: 2px solid var(--sq-ink); border-radius: calc(var(--u) * 1); background: #fff;
  box-shadow: calc(var(--u) * .35) calc(var(--u) * .35) 0 var(--sq-ink); transform: rotate(var(--r, 0deg)) }
.wv-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 4) }
.wv-logo { height: calc(var(--u) * 9); width: auto }
@media (max-width: 639px) { .wv-chip { font-size: calc(var(--u) * 1.9) } }

/* ② 크루 홈 — 팔로우 */
.wv-crew { width: min(100%, calc(var(--u) * 40)); overflow: hidden }
.wv-crew-cover { height: calc(var(--u) * 8); background: linear-gradient(120deg, #2b2470, var(--primary) 50%, var(--sq-pink)); border-bottom: 2px solid var(--sq-ink) }
.wv-crew-body { padding: 0 calc(var(--u) * 2) calc(var(--u) * 1.8) }
.wv-crew-top { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(var(--u) * -3) }
.wv-follow { font-size: calc(var(--u) * 1.4); font-weight: 900; padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border-radius: 999px;
  border: 2px solid var(--sq-ink); background: var(--primary); color: #fff; white-space: nowrap }
.wv-follow.on { background: #fff; color: var(--sq-ink) }
.wv-crew-name { display: block; margin-top: calc(var(--u) * .8); font-size: calc(var(--u) * 2.2); font-weight: 900 }
.wv-crew-one { display: block; font-size: calc(var(--u) * 1.35); color: #666; font-weight: 600 }
.wv-crew-stats { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.4); color: #555; font-weight: 700 }
.wv-crew-stats b { color: var(--sq-ink); font-variant-numeric: tabular-nums }
.wv-crew-tabs { display: flex; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.2); border-bottom: 1.5px solid #e5e5e5; font-size: calc(var(--u) * 1.3); font-weight: 800; color: #888 }
.wv-crew-tabs span { padding-bottom: calc(var(--u) * .5) }
.wv-crew-tabs .on { color: var(--sq-ink); border-bottom: 2.5px solid var(--sq-ink) }
.wv-members { display: flex; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.2) }
.wv-members span { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: 50%; border: 2px solid var(--sq-ink) }
.wv-toast { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -4); display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .9) calc(var(--u) * 1.3);
  font-size: calc(var(--u) * 1.4); font-weight: 800 }
.wv-toast i { color: var(--accent); font-size: calc(var(--u) * 1.8) }
.wv-toast small { display: block; font-size: calc(var(--u) * 1.15); color: #666; font-weight: 600 }

/* ③ 스토리 — 9:16 전체 화면 */
.wv-phone { position: relative; width: calc(var(--u) * 19); aspect-ratio: 9 / 16; overflow: hidden; border-radius: calc(var(--u) * 2);
  background: radial-gradient(60% 45% at 30% 35%, #f9a8d4, transparent 70%), radial-gradient(55% 50% at 75% 70%, #a5b4fc, transparent 70%), linear-gradient(160deg, #3b2f7a, #1e1b4b) }
.wv-story-bars { position: absolute; left: 6%; right: 6%; top: 3%; display: flex; gap: 4% }
.wv-story-bars span { position: relative; flex: 1; height: calc(var(--u) * .35); border-radius: 9px; background: rgba(255, 255, 255, .4); overflow: hidden }
.wv-story-run::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0) }
.wv-s.on .wv-story-run::after { animation: wv-run 3.4s linear calc(var(--d) - var(--off, 0s)) both }
@keyframes wv-run { to { transform: scaleX(1) } }
.wv-story-h { position: absolute; left: 6%; top: 7%; display: flex; align-items: center; gap: calc(var(--u) * .6); color: #fff; font-size: calc(var(--u) * 1.1); font-weight: 800 }
.wv-story-h small { opacity: .7; font-weight: 600 }
.wv-sticker { position: absolute; left: 10%; top: 26%; font-size: calc(var(--u) * 1.7); font-weight: 900; background: #fff; color: var(--sq-ink);
  border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * 1) }
.wv-count { position: absolute; left: 12%; right: 12%; top: 50%; text-align: center; background: rgba(255, 255, 255, .95); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1) }
.wv-count small { display: block; font-size: calc(var(--u) * 1.05); font-weight: 800; color: #666 }
.wv-count b { display: block; font-size: calc(var(--u) * 3.6); font-weight: 900; color: var(--primary); line-height: 1.1 }
.wv-emoji { position: absolute; right: 10%; bottom: 10%; font-size: calc(var(--u) * 4) }

/* ④ 홍보 · 판매 — 좌석이 차오른다 */
.wv-hall { width: min(100%, calc(var(--u) * 40)); padding: calc(var(--u) * 2) }
.wv-stage-bar { text-align: center; font-size: calc(var(--u) * 1.3); font-weight: 900; color: #fff; background: var(--sq-ink);
  border-radius: calc(var(--u) * .6); padding: calc(var(--u) * .5) 0; margin-bottom: calc(var(--u) * 1.6) }
.wv-seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--u) * .7) }
.wv-seat { aspect-ratio: 1; border-radius: calc(var(--u) * .5); border: 2px solid #cfcfcf; background: #fff }
.wv-s.on .wv-seat.sold { animation: wv-sold .3s ease-out calc(var(--d) - var(--off, 0s)) both }
@keyframes wv-sold { 0% { background: #fff; border-color: #cfcfcf; transform: scale(1) } 60% { transform: scale(1.25) }
  100% { background: var(--sq-pink); border-color: var(--sq-ink); transform: scale(1) } }
.wv-hall-f { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.5); font-weight: 800 }
.wv-mini-link { position: absolute; left: calc(var(--u) * -2); top: calc(var(--u) * -3); width: calc(var(--u) * 17); overflow: hidden }
.wv-poster { aspect-ratio: 2 / 1; background: linear-gradient(135deg, #2b2470, var(--primary) 55%, var(--sq-pink)); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--u) * 1) }
.wv-poster b { font-size: calc(var(--u) * 1.8); font-weight: 900; line-height: 1.1 }
.wv-poster span { font-size: calc(var(--u) * 1); opacity: .85 }
.wv-link-t { padding: calc(var(--u) * .6) calc(var(--u) * .9); font-size: calc(var(--u) * 1.05); line-height: 1.4 }
.wv-link-t b { display: block; font-size: calc(var(--u) * 1.2) }
.wv-link-t span { color: #777 }
@media (max-width: 639px) { .wv-mini-link { left: calc(var(--u) * -1); top: calc(var(--u) * 3); width: calc(var(--u) * 15) } }

.wv-badge { display: inline-block; font-size: calc(var(--u) * 1.3); font-weight: 900; padding: calc(var(--u) * .35) calc(var(--u) * 1);
  border-radius: 999px; border: 2px solid var(--sq-ink); white-space: nowrap }
.wv-badge.hot { background: var(--accent); color: #fff }
.wv-badge.ok { background: var(--sq-mint-soft); color: #0f766e; border-color: #0f766e }
.wv-badge.wait { background: #fef3c7; color: #b45309; border-color: #b45309 }
.wv-badge.card { background: #e0e7ff; color: #3730a3; border-color: #3730a3 }

/* 숫자가 올라간다 — @property 를 모르는 브라우저는 끝 숫자로 건너뛴다. */
@property --wv-n { syntax: '<integer>'; inherits: false; initial-value: 0 }
.wv-num { --wv-n: var(--to); counter-reset: wv var(--wv-n) }
.wv-num::after { content: counter(wv) }
.wv-s.on .wv-num { animation: wv-count var(--t, 2s) cubic-bezier(.3, .6, .4, 1) calc(var(--d, 0s) - var(--off, 0s)) both }
@keyframes wv-count { from { --wv-n: 0 } to { --wv-n: var(--to) } }

/* ⑤ 입금 — 알림이 오고 줄이 확정으로 바뀐다 */
.wv-pay { width: min(100%, calc(var(--u) * 44)); display: flex; flex-direction: column; gap: calc(var(--u) * 1.2) }
.wv-noti { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.5); font-weight: 700 }
.wv-noti i { font-size: calc(var(--u) * 2); color: var(--primary) }
.wv-noti small { display: block; font-size: calc(var(--u) * 1.15); color: #777; font-weight: 600 }
.wv-rows { padding: calc(var(--u) * .4) calc(var(--u) * 1.6) }
.wv-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.15) 0; font-size: calc(var(--u) * 1.55); font-weight: 700 }
.wv-row + .wv-row { border-top: 1.5px dashed #ddd }
.wv-row small { color: #777; font-weight: 600; margin-left: calc(var(--u) * .6) }

/* ⑥ 크루 스튜디오 — 메뉴가 차례로 켜지고 현황이 오른다 */
.wv-studio { width: min(100%, calc(var(--u) * 46)); display: grid; grid-template-columns: 34% 1fr; overflow: hidden }
.wv-side-menu { background: #f6f5f3; border-right: 1.5px solid #e5e5e5; padding: calc(var(--u) * 1.4) calc(var(--u) * 1); display: flex; flex-direction: column; gap: calc(var(--u) * .3) }
.wv-side-menu b { font-size: calc(var(--u) * 1.25); font-weight: 900; margin-bottom: calc(var(--u) * .6); padding-left: calc(var(--u) * .6) }
.wv-mi { display: flex; align-items: center; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 1.2); font-weight: 800; color: #555; border-radius: calc(var(--u) * .6); padding: calc(var(--u) * .5) calc(var(--u) * .6) }
.wv-mi i { width: calc(var(--u) * 1.4); text-align: center; color: #888 }
.wv-s.on .wv-mi { animation: wv-hl .7s ease calc(var(--d) - var(--off, 0s)) both }
@keyframes wv-hl { 0%, 100% { background: transparent; color: #555 } 25%, 70% { background: var(--primary-50); color: var(--primary-700) } }
.wv-studio-main { padding: calc(var(--u) * 1.4) }
.wv-studio-h { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 1.5); font-weight: 900; margin-bottom: calc(var(--u) * 1) }
.wv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .8) }
.wv-kpi { border: 1.5px solid #e5e5e5; border-radius: calc(var(--u) * .9); padding: calc(var(--u) * .8) }
.wv-kpi small { display: block; font-size: calc(var(--u) * 1.05); color: #777; font-weight: 700 }
.wv-kpi b { font-size: calc(var(--u) * 2.4); font-weight: 900; font-variant-numeric: tabular-nums }
.wv-bars { display: flex; align-items: flex-end; gap: calc(var(--u) * .9); height: calc(var(--u) * 9); margin-top: calc(var(--u) * 1.4); border-bottom: 2px solid var(--sq-ink) }
.wv-bar { flex: 1; height: var(--h); border-radius: calc(var(--u) * .4) calc(var(--u) * .4) 0 0; background: var(--primary); transform-origin: bottom }
.wv-bar.hi { background: var(--accent) }
.wv-s.on .wv-bar { animation: wv-grow .6s cubic-bezier(.2, .8, .2, 1) calc(var(--d) - var(--off, 0s)) both }
@keyframes wv-grow { from { transform: scaleY(0) } to { transform: none } }
.wv-invite { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -5.5); display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.3); font-size: calc(var(--u) * 1.4); font-weight: 900; flex-wrap: wrap }
.wv-invite small { width: 100%; font-size: calc(var(--u) * 1.1); color: #666; font-weight: 600; padding-left: calc(var(--u) * 6.4) }
.wv-faces { display: inline-flex }
.wv-faces i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); border-radius: 50%; border: 2px solid var(--sq-ink); margin-left: calc(var(--u) * -.8) }
.wv-faces i:first-child { margin-left: 0 }
@media (max-width: 639px) { .wv-invite { right: 0 } }

/* ⑦ 마무리 */
.wv-outro { background: var(--primary); color: #fff }
.wv-outro .wv-tag { color: var(--sq-ink) }
.wv-terms { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.6); font-weight: 700; opacity: .85 }
.wv-url { margin-top: calc(var(--u) * 2.4); display: inline-flex; align-items: center; gap: calc(var(--u) * .8); font-size: calc(var(--u) * 2); font-weight: 900;
  background: #fff; color: var(--sq-ink); border: 2.5px solid var(--sq-ink); border-radius: 999px; padding: calc(var(--u) * .9) calc(var(--u) * 2.4);
  box-shadow: calc(var(--u) * .45) calc(var(--u) * .45) 0 var(--sq-ink) }
.wv-dot { position: absolute; left: var(--x); top: var(--y); width: calc(var(--u) * var(--s)); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--sq-ink); background: var(--c) }

/* 재생 막(처음 · 끝) */
.wv-cover { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(22, 22, 22, .28); cursor: pointer; border: 0; padding: 0 }
.wv-cover[hidden] { display: none }
.wv-cover span { display: inline-flex; align-items: center; gap: .5rem; font-size: clamp(14px, calc(var(--u) * 2), 22px); font-weight: 900; color: var(--sq-ink);
  background: #fff; border: 2.5px solid var(--sq-ink); border-radius: 999px; padding: .8em 1.5em; box-shadow: 4px 4px 0 var(--sq-ink) }

/* 재생 막대 — 무대 밖이라 영상으로 녹화할 때 찍히지 않는다. */
.wv-ctrl { display: flex; align-items: center; gap: .6rem; margin-top: 1rem }
.wv-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--sq-ink); background: #fff; color: var(--sq-ink);
  display: inline-flex; align-items: center; justify-content: center }
.wv-btn:hover { background: var(--sq-cream) }
.wv-track { position: relative; flex: 1; height: 10px; border-radius: 999px; background: #e7e5e4; cursor: pointer; touch-action: none }
.wv-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--primary) }
.wv-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff }
.wv-time { font-size: 12px; font-weight: 800; color: #555; font-variant-numeric: tabular-nums; flex-shrink: 0 }
.wv-chaps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem }
.wv-chap { font-size: 12px; font-weight: 800; padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid #d6d3d1; background: #fff; color: #555 }
.wv-chap.on { background: var(--primary-50); border-color: #CEC9F4; color: var(--primary-700) }

/* 아래 소개 칸 */
.wl-card { border: 2.5px solid var(--sq-ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--sq-ink) }
.wl-step { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2.5px solid var(--sq-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 900 }
.wl-premium { font-size: 11px; font-weight: 900; color: #fff; background: var(--sq-ink); border-radius: 999px; padding: .2rem .6rem }
.wl-promo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .85rem 1.1rem; border: 2.5px solid var(--sq-ink); border-radius: 14px;
  background: var(--sq-pink-soft); box-shadow: 4px 4px 0 var(--sq-ink); font-size: 15px }
.wl-promo-tag { font-size: 12px; font-weight: 900; color: #fff; background: var(--accent); border-radius: 999px; padding: .2rem .65rem }
.wl-promo b { font-weight: 900 }
.wl-promo-terms { font-size: 12px; font-weight: 700; color: #6b6b6b }

@media (prefers-reduced-motion: reduce) { .wv-s.on { transition: none } }