/* BP-L22 — C의 ②·④·⑥ 및 ③ 영어 줄. 기존 wa-live 강조 / 첫 장면 / 숫자 / 함께 구역은 유지.
   wm-ready는 이 파일의 스크립트가 초기화를 마친 경우에만 부여한다. 실패하면 정적 본문을 보인다. */
.wa-live {
  --wm-fg: #F4F6FA; --wm-muted: #A3ACBD; --wm-dim: #A4AACD;
  --wm-line: rgba(244, 246, 250, .12); --wm-line-strong: rgba(244, 246, 250, .3);
  --wm-cyan: #7EE0FF; --wm-ease: cubic-bezier(.16, 1, .3, 1); --wm-ease-io: cubic-bezier(.65, 0, .35, 1);
}
.wm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wm-wrap { width: 100%; max-width: calc(1280px + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
/* 네모 마침표 — 첫 화면 'Universe.'의 하늘색 각진 마침표. 이 페이지에서는 영어 큰 제목 끝에만 */
.wm-dot { display: inline-block; width: .19em; height: .16em; margin-left: .05em; background: var(--wm-cyan); vertical-align: baseline; }

/* 가림막: 글은 이 안에서 아래 → 제자리로 또렷하게 들어온다(흐림 · 페이드 · 크기 튐 없음) */
.wm-mask { display: block; overflow: hidden; padding-block: .1em .16em; margin-block: -.1em -.16em; }
.wm-mask-in { display: block; transition: transform 1s var(--wm-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.wa-anim.wm-ready [data-wm-mask]:not(.is-in) .wm-mask-in { transform: translateY(125%); }
.wa-anim.wm-ready [data-wm-mask].is-out .wm-mask-in { transform: translateY(-125%); transition-delay: calc(var(--i, 0) * 40ms); }

/* 공통 구역 제목 — 지엠컴: 큰 굵은 영어 + 네모 마침표, 한국어는 작게 아래 */
.wm-head { padding: clamp(140px, 24svh, 260px) var(--pad) clamp(56px, 10svh, 112px); }
.wm-wrap > .wm-head { padding-inline: 0; }
.wm-head-center { text-align: center; }
.wm-big { font-size: clamp(44px, 8vw, 128px); line-height: 1; letter-spacing: -.045em; }
/* 약속 제목 아래 1px 세로선 — 위에서 아래로 그어지며 고정 화면으로 이어진다(shortt 선 그리기) */
.wm-head-line { display: block; width: 1px; height: clamp(48px, 9svh, 96px); margin: clamp(36px, 6svh, 64px) auto 0; background: var(--wm-line-strong); transform-origin: 50% 0; }
.wa-anim.wm-ready .wm-head-line { transition: transform 1.1s var(--wm-ease) .5s; }
.wa-anim.wm-ready .wm-head-line:not(.is-in) { transform: scaleY(0); }

/* ── ② 세 가지 약속 ── */
.wm-promises { --prt: clamp(28px, 7svh, 72px); --prb: clamp(64px, 12svh, 112px); --tsize: clamp(32px, 4.2vw, 64px); }
.wm-pr-list { display: grid; gap: clamp(96px, 14svh, 140px); padding: 0 var(--pad) clamp(40px, 6svh, 80px); max-width: calc(1280px + var(--pad) * 2); margin: 0 auto; }
.wm-pr { display: grid; gap: 28px; }
.wm-pr-title { font-size: var(--tsize); line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
/* 창: 1px 테두리 네 변이 차례로 그어지고(선 그리기), 안쪽 여백을 둔 화면 그림이 아래에서 들어온다 */
.wm-win { --in: clamp(8px, .9vw, 14px); position: relative; width: min(100%, 620px, calc(72svh * var(--cw) / var(--ch))); aspect-ratio: var(--cw) / var(--ch); }
.wm-win-in { position: absolute; inset: var(--in); overflow: hidden; }
.wm-win-img { position: absolute; inset: 0; overflow: hidden; background: #FFFFFF; transition: transform 1.05s var(--wm-ease-io); }
.wm-win img { position: absolute; max-width: none; height: auto; display: block;
  width: calc(var(--iw) / var(--cw) * 100%); left: calc(var(--x0) / var(--cw) * -100%); top: calc(var(--y0) / var(--ch) * -100%); }
.wm-edge { position: absolute; background: var(--wm-line-strong); pointer-events: none; }
.wm-edge-t { left: 0; top: 0; width: 100%; height: 1px; transform-origin: 0 50%; }
.wm-edge-r { right: 0; top: 0; width: 1px; height: 100%; transform-origin: 50% 0; }
.wm-edge-b { right: 0; bottom: 0; width: 100%; height: 1px; transform-origin: 100% 50%; }
.wm-edge-l { left: 0; bottom: 0; width: 1px; height: 100%; transform-origin: 50% 100%; }
.wa-anim.wm-ready .wm-edge { transition: transform .3s linear; }
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-edge-t, .wa-anim.wm-ready .wm-pr:not(.is-on) .wm-edge-b { transform: scaleX(0); }
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-edge-r, .wa-anim.wm-ready .wm-pr:not(.is-on) .wm-edge-l { transform: scaleY(0); transition-delay: 0s; }
.wa-anim.wm-ready .wm-pr.is-on .wm-edge-r { transition-delay: .28s; }
.wa-anim.wm-ready .wm-pr.is-on .wm-edge-b { transition-delay: .56s; }
.wa-anim.wm-ready .wm-pr.is-on .wm-edge-l { transition-delay: .84s; }
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-win-img { transform: translateY(101%); transition-duration: .6s; }
.wa-anim.wm-ready .wm-pr.is-on .wm-win-img { transition-delay: 1.14s; }
.wa-anim.wm-ready .wm-pr.is-past .wm-win-img { transform: translateY(-101%); }
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-mask-in { transform: translateY(125%); }
.wa-anim.wm-ready .wm-pr.is-past .wm-mask-in { transform: translateY(-125%); transition-delay: 0s; }

/* 약속 2 — 한글 타자(자모 단위) · 칸 높이는 보이지 않는 글로 미리 잡아 둔다 */
.wm-type-box { position: relative; display: block; }
.wm-type-ghost, .wm-type-live { white-space: pre-line; }
.wm-type-ghost { visibility: hidden; display: block; }
.wm-type-live { position: absolute; left: 0; top: 0; right: 0; }
.wm-type-live.is-typing::after { content: ""; display: inline-block; width: .06em; height: .92em; margin-left: .05em; background: currentColor; vertical-align: -.1em; animation: wm-caret 1s steps(1) infinite; }
@keyframes wm-caret { 50% { opacity: 0; } }
.wa-anim.wm-ready .wm-type { transition: opacity .3s ease; }
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-type { opacity: 0; }
.wm-pr-bar { display: none; }

.wa-pin.wm-ready .wm-pr-track { height: calc(100vh - var(--hh) + var(--n) * 80vh); height: calc(100svh - var(--hh) + var(--n) * 80svh); }
.wa-pin.wm-ready .wm-pr-pin { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; }
.wa-pin.wm-ready .wm-pr-list { position: relative; display: block; height: 100%; max-width: none; padding: 0; }
.wa-pin.wm-ready .wm-pr { position: absolute; inset: 0; max-width: calc(1280px + var(--pad) * 2); margin: 0 auto; padding: var(--prt) var(--pad) var(--prb);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.wa-pin.wm-ready .wm-pr:not(.is-on) { pointer-events: none; }
.wa-pin.wm-ready .wm-win { justify-self: center; width: min(100%, calc((100svh - var(--hh) - var(--prt) - var(--prb)) * var(--cw) / var(--ch))); }
.wa-pin.wm-ready .wm-pr-bar { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--prb) * .45); max-width: 1280px; margin: 0 auto; width: calc(100% - var(--pad) * 2); height: 1px; background: var(--wm-line); }
.wa-pin.wm-ready .wm-pr-bar i { position: absolute; inset: 0; background: var(--wm-fg); transform-origin: 0 50%; transform: scaleX(0); }

.wm-giving-en { margin-top: clamp(6px, 1.2svh, 14px); font-size: clamp(36px, 5.4vw, 86px); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.wm-giving-en .wm-mask { display: inline-block; }
.wm-giving-rule { width: min(100%, 880px); height: 1px; margin: clamp(40px, 7svh, 72px) auto 0; background: var(--wm-line-strong); transform-origin: 50% 50%; }
.wa-anim.wm-ready .wm-giving-rule { transition: transform 1.2s var(--wm-ease); }
.wa-anim.wm-ready .wm-giving-rule:not(.is-in) { transform: scaleX(0); }
/* ── ④ 누구나 — 왼쪽 고정 큰 목록 + 오른쪽 1px 칸이 가로로 흐름 ──
   기본(휴대폰 · 움직임 줄이기): 목록 없이 1px 줄로 위아래로 쌓음(시안 A 휴대폰과 같음) */
.wm-everyone { padding-bottom: clamp(100px, 16svh, 180px); overflow-x: clip; }
.wm-aud-names { display: none; }
.wm-aud-rail { border-bottom: 1px solid var(--wm-line); }
.wm-aud-cell { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: clamp(24px, 4svh, 36px) 0; border-top: 1px solid var(--wm-line); }
.wm-aud-cell h3 { font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; letter-spacing: -.02em; color: var(--wm-muted); }
.wm-aud-cell p { font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.35; letter-spacing: -.035em; }

.wa-pin.wm-ready .wm-everyone { padding-bottom: 0; }
.wa-pin.wm-ready .wm-aud { position: relative; }
.wa-pin.wm-ready .wm-aud-pin { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; display: flex; align-items: center; }
.wa-pin.wm-ready .wm-aud-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.wa-pin.wm-ready .wm-aud-names { display: block; font-size: clamp(36px, min(4.6vw, 7.2svh), 76px); font-weight: 800; line-height: 1.12; letter-spacing: -.05em; color: var(--wm-dim); }
.wa-pin.wm-ready .wm-aud-names li { transition: color .45s ease; white-space: nowrap; }
.wa-pin.wm-ready .wm-aud-names li.is-on { color: var(--wm-fg); }
.wa-pin.wm-ready .wm-aud-view { overflow: hidden; }
.wa-pin.wm-ready .wm-aud-rail { display: flex; width: max-content; border-top: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line); will-change: transform; }
.wa-pin.wm-ready .wm-aud-cell { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: clamp(240px, 21vw, 320px); height: clamp(280px, 46svh, 440px);
  padding: clamp(24px, 2.2vw, 32px); border-top: 0; border-left: 1px solid var(--wm-line); }
.wa-pin.wm-ready .wm-aud-cell:last-child { border-right: 1px solid var(--wm-line); }
.wa-pin.wm-ready .wm-aud-cell h3, .wa-pin.wm-ready .wm-aud-cell p { transition: color .45s ease; }
.wa-pin.wm-ready .wm-aud-cell p { font-size: clamp(24px, 2.3vw, 34px); color: var(--wm-dim); }
.wa-pin.wm-ready .wm-aud-cell h3 { color: var(--wm-dim); }
.wa-pin.wm-ready .wm-aud-cell.is-on p { color: var(--wm-fg); }
.wa-pin.wm-ready .wm-aud-cell.is-on h3 { color: var(--wm-muted); }

/* ── ⑥ 마지막 — 둥근 별 창 → (넓은 화면에서) 화면 가득 ── */
.wm-final { position: relative; padding: clamp(120px, 20svh, 220px) var(--pad) clamp(48px, 8svh, 96px); }
.wm-final-win { position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(76vh, 680px); min-height: min(76svh, 680px); border-radius: 24px; border: 1px solid rgba(244, 246, 250, .16); }
.wm-final-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.wm-final-in { position: relative; width: 100%; max-width: calc(1280px + var(--pad) * 2); margin: 0 auto; padding: clamp(48px, 8svh, 88px) clamp(20px, 4vw, var(--pad)); }
.wm-final-en { font-size: clamp(44px, 9.4vw, 152px); line-height: .96; letter-spacing: -.05em; }
.wm-final-row { margin-top: clamp(28px, 5svh, 52px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding-top: clamp(24px, 3.6svh, 36px); border-top: 1px solid var(--wm-line); }
.wm-final-ko { font-size: clamp(20px, 2vw, 30px); font-weight: 800; line-height: 1.35; letter-spacing: -.04em; }
.wm-final-line { display: none; }
.wa-pin.wm-ready .wm-final { padding: clamp(120px, 20svh, 220px) 0 0; }
.wa-pin.wm-ready .wm-final-win { min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); border: 0; border-radius: 0; }
.wa-pin.wm-ready .wm-final-line { display: block; position: absolute; left: 0; right: 0; bottom: 0; top: clamp(120px, 20svh, 220px); border: 1px solid rgba(244, 246, 250, .16); opacity: 0; pointer-events: none; }


/* 도경 확정 강조를 C 목록에 이어 받음. 왼쪽 기준 450ms / 1.1배. */
.wa-pin.wm-ready .wm-aud-names { line-height: 1.25; }
.wa-pin.wm-ready .wm-aud-names li { transform: scale(1); transform-origin: left center; transition: color 450ms ease, transform 450ms ease; }
.wa-pin.wm-ready .wm-aud-names li.is-on { color: var(--wm-fg); transform: scale(1.2); }
.wa-live .wm-giving-en, .wa-live .wm-final-en { color: var(--wm-fg); }
.wa-live .wm-question { margin-bottom: 6px; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.5; color: #8B94A8; }
/* 원형 화살표 버튼은 기존 wa-cta / wa-arrow-cta 규칙 그대로 사용. */
@media (max-width: 768px) {
  .wm-head { padding-top: 104px; padding-bottom: 48px; }
  .wm-big { font-size: clamp(40px, 12vw, 64px); }
  .wm-pr-title { font-size: clamp(28px, 8vw, 40px); }
  .wm-giving-en { font-size: clamp(34px, 11vw, 56px); }
  .wm-aud-cell { grid-template-columns: 1fr; }
  .wm-final { padding-top: 104px; }
  .wm-final-win { min-height: 520px; border-radius: 20px; }
  .wm-final-en { font-size: clamp(42px, 13.6vw, 72px); }
  .wm-final-row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-mask-in, .wm-win-img, .wm-edge, .wm-type, .wm-giving-rule, .wm-head-line, .wm-aud-names li, .wm-aud-cell p, .wm-aud-cell h3 { transition: none !important; }
  .wm-type-live::after { display: none !important; }
}

/* 도경: 별똥별 선두가 네모를 그리고, 재진입 시 다시 시작한다. */
.wm-win:has(.wm-meteor-border) > .wm-edge { display:none; }
.wm-meteor-border { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.wm-meteor-border path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.wm-meteor-outline { stroke:#91b4ff80; stroke-width:1; }
.wm-meteor-tail { stroke:#7ee0ff; stroke-width:2; stroke-dasharray:3 97; filter:drop-shadow(0 0 3px #7ee0ff); opacity:0; }
.wm-meteor-head { stroke:#f4fcff; stroke-width:3; stroke-dasharray:.18 99.82; filter:drop-shadow(0 0 4px #7ee0ff); opacity:0; }
.wa-anim.wm-ready .wm-meteor-outline { stroke-dasharray:100; stroke-dashoffset:100; }
.wa-anim.wm-ready .wm-pr.is-on .wm-meteor-outline { animation:wm-outline-draw 2.4s linear both; }
.wa-anim.wm-ready .wm-pr.is-on .wm-meteor-tail { animation:wm-tail-travel 2.4s linear both; }
.wa-anim.wm-ready .wm-pr.is-on .wm-meteor-head { animation:wm-head-travel 2.4s linear both; }
@keyframes wm-outline-draw { to { stroke-dashoffset:0; } }
@keyframes wm-tail-travel { 0% { stroke-dashoffset:3; opacity:0; } 3% { opacity:.8; } 94% { opacity:.8; } 100% { stroke-dashoffset:-97; opacity:0; } }
@keyframes wm-head-travel { 0% { stroke-dashoffset:0; opacity:0; } 1% { opacity:1; } 97% { opacity:1; } 100% { stroke-dashoffset:-100; opacity:0; } }
@media(prefers-reduced-motion:reduce) {
 .wm-meteor-border path { animation:none !important; }
 .wm-meteor-outline { stroke-dashoffset:0 !important; }
 .wm-meteor-tail,.wm-meteor-head { display:none; }
}

/* Keep the highlighted role visible inside the actual grid viewport. */
.wa-pin.wm-ready .wm-aud-grid, .wa-pin.wm-ready .wm-aud-view { min-width:0; width:100%; }
.wa-pin.wm-ready .wm-aud-cell.is-on h3 { color:#f4f6fa; }
.wa-pin.wm-ready .wm-aud-cell.is-on { background:linear-gradient(140deg,#a8e8ff0b,transparent 70%); }

/* 도경 10/13: 장면을 다 보여주되 긴 휠 이동은 줄인다. */
.wa-pin.wm-ready .wm-pr-track { height:calc(100svh - var(--hh) + var(--n) * 45svh); }
.wa-anim.wm-ready .wm-pr.is-on .wm-win-img { transition-duration:.85s; transition-delay:.45s; }
.wa-anim.wm-ready .wm-pr.is-on .wm-meteor-border path { animation-duration:1.5s; }

/* Magic UI Meteors adaptation — see vendor/LICENSE-magicui.txt. */
.wm-meteor-shower { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wm-falling-star { position:absolute; top:-24px; width:2px; height:2px; border-radius:50%; background:#e7faff; opacity:0; box-shadow:0 0 6px #a8e8ff; }
.wm-falling-star::after { content:""; position:absolute; left:1px; top:.5px; width:var(--tail); height:1px; background:linear-gradient(90deg,#a8e8ffb3,transparent); }
.wm-meteor-shower.is-running .wm-falling-star { animation:wm-shower-fall var(--duration) linear var(--delay) infinite; }
@keyframes wm-shower-fall {
  0% { transform:rotate(-55deg) translateX(0); opacity:0; }
  12%,65% { opacity:var(--brightness); }
  100% { transform:rotate(-55deg) translateX(var(--meteor-distance)); opacity:0; }
}
@media(prefers-reduced-motion:reduce) { .wm-meteor-shower { display:none; } }

/* 모바일 For Everyone: 큰 예시 카드를 직접 넘기는 구성. */
.wm-aud-art{display:none}
@media(max-width:768px){
 .wm-everyone{padding-bottom:56px}
 .wm-everyone .wm-head{padding-top:64px;padding-bottom:28px}
 .wm-everyone .wm-big{font-size:clamp(36px,10.8vw,54px)}
 .wm-everyone .wm-aud,.wm-everyone .wm-aud-pin{height:auto!important;min-height:0;position:relative;top:auto;overflow:visible}
 .wm-everyone .wm-aud-grid{display:block;padding:0}
 .wm-everyone .wm-aud-names{display:none}
 .wm-everyone .wm-aud-view{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:0 20px 18px;scrollbar-width:thin;scrollbar-color:#7ee0ff #ffffff14}
 .wm-everyone .wm-aud-rail{display:flex;width:auto;gap:16px;border:0;padding:0!important;will-change:auto}
 .wm-everyone .wm-aud-cell{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:0 0 86%;min-width:0;height:auto;padding:0;border:0;gap:0;scroll-snap-align:start;color:var(--wm-fg)}
 .wm-everyone .wm-aud-cell h3{font-size:28px;line-height:1.25;color:#A8E8FF;margin:0 0 8px}
 .wm-everyone .wm-aud-cell p{font-size:16px;line-height:1.5;color:var(--wm-muted);min-height:3em;margin:0 0 16px}
 .wm-everyone .wm-aud-art{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;aspect-ratio:4/5;padding:24px;background:#f4f6fa;color:#060d19;border-radius:3px}
 .wm-aud-art>span{font-size:13px;line-height:1.4;position:relative;z-index:1}
 .wm-aud-art>strong{font-size:clamp(28px,8vw,40px);line-height:1.15;letter-spacing:-.055em;margin-top:24px;position:relative;z-index:1}
 .wm-aud-art img{position:absolute;bottom:0;left:0;width:100%;height:52%;object-fit:cover}
 .wm-aud-art i{position:absolute;width:72%;aspect-ratio:1;right:-12%;bottom:-16%;border:1px solid currentColor;border-radius:50%;opacity:.3;transform:rotate(-25deg)}
 .wm-everyone .wm-aud-art-design,.wm-everyone .wm-aud-art-club{background:#A8E8FF}
 .wm-everyone .wm-aud-art-poster{background:#1b2638;color:#f4f6fa}
 .wm-aud-art-food strong{font-size:clamp(42px,12vw,60px);max-width:3em}
 .wm-aud-art-food i{border-radius:0;right:24px;bottom:24px;width:calc(100% - 48px);height:32%;transform:none;border-width:1px 0}
}

/* Supporting copy follows the title reveal. */
.wm-pr-desc{margin:24px 0 0;max-width:26em;font-size:19px;font-weight:400;line-height:1.6;color:#A9B3C7;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}
.wm-pr-desc-in{display:block;transform:none;transition:transform .8s var(--wm-ease) 1s}
.wa-anim.wm-ready .wm-pr:not(.is-on) .wm-pr-desc-in,
.wa-anim.wm-ready .wm-pr-type:not(.is-type-complete) .wm-pr-desc-in{transform:translateY(110%);transition-delay:0s}
@media(max-width:768px){.wm-pr-desc{font-size:16px}.wm-pr{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.wm-pr-desc-in{transform:none!important;transition:none!important}}
html.is-paused .wm-pr-desc-in{transform:none!important;transition:none!important}

.wm-pr-type .wm-pr-desc-in{transition-delay:.15s}