/* Inter Tight from Google Fonts; license: fonts/inter-tight/LICENSE.txt. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/images/landing/fonts/artwork-inter-tight-medium-9d28cbd04735.woff2")
    format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: url(/images/landing/fonts/artwork-pretendard-medium-958aa5278ef9.woff2)
    format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url(/images/landing/fonts/artwork-pretendard-semi-bold-8643eb75fdc5.woff2)
    format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: url(/images/landing/fonts/artwork-pretendard-extra-bold-de890b2738cc.woff2)
    format("woff2");
}
@font-face {
  font-family: "Ryker";
  font-weight: 700;
  font-display: swap;
  src: url(/images/landing/asset-d9673d4fb09a.otf) format("opentype");
}

/* Layout: 1920px 아트보드(Untitled-1.svg) 좌표를 --u(=화면폭/1920) 단위로 그대로 옮김. 900px 미만은 세로 재배치 */
:root {
  /* The iframe height is the parent hero height, already scaled to the viewport. */
  --u: min(calc(100vw / 1920), calc(100vh / 1777));
  --pill: #f1f1f1;
  --ink: #141414;
  --f-kr:
    "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  overflow: hidden;
  background: transparent;
}
body {
  margin: 0;
  font-family: var(--f-kr);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  word-break: keep-all;
}
svg,
img {
  display: block;
}
.artwork-decoration {
  display: block;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
  /* Backgrounds avoid intermittent img paint loss in Chrome SVG foreignObject. */
  transform: translateZ(0);
}
@media (min-width: 900px) {
  .artwork-decoration-laptop {
    background-image: url("/images/landing/asset-40fe59f31b37.webp");
  }
  .artwork-decoration-receipt {
    background-image: url("/images/landing/asset-de96b6a86446.webp");
  }
  .artwork-decoration-ticket {
    background-image: url("/images/landing/asset-2576e842608c.webp");
  }
}
.stage {
  position: relative;
  margin: 0 auto;
}
.hero {
  position: relative;
  z-index: 2;
  background: transparent;
}
.hero .stage {
  height: calc(1777 * var(--u));
}
@media (max-width: 899px) {
  :root {
    --u: 1px;
  }
  .hero .stage {
    display: block;
    height: 100vh;
    padding: 0;
    text-align: center;
  }
}
/* planned 롤링: 2.6초 유지 → 위로 빠지며 사라지고 다음 단어가 아래에서 올라옴 */
.v2pill {
  fill: var(--pill-bg, #dcfbf1);
  transition: fill 0.45s ease;
}
.v2roll text {
  fill: var(--pill-ink, #0b9c7b);
  transition: fill 0.45s ease;
}
.v2roll {
  transition:
    transform 0.24s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.2s ease;
}
.v2roll.out {
  opacity: 0;
  transform: translateY(-34px);
}
.v2roll.pre {
  opacity: 0;
  transform: translateY(34px);
  transition: none;
}
.v2roll.in {
  transition:
    transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    opacity 0.24s ease;
}
.v2-desk {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(1731.24 * var(--u));
  overflow: visible;
  pointer-events: none;
}
.v2-m-head,
.v2-m-strip {
  display: none;
}
@media (max-width: 899px) {
  .v2-desk {
    display: none;
  }
  .v2-m-head {
    position: absolute;
    top: 88px;
    left: 16px;
    display: block;
    width: calc(100% - 32px);
    max-width: none;
    height: auto;
    margin: 0;
  }
  .v2-m-strip {
    --sh: 264px;
    position: absolute;
    top: 370px;
    left: 0;
    display: block;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    pointer-events: none;
    scrollbar-width: none;
  }
  .v2-m-strip::-webkit-scrollbar {
    display: none;
  }
  .v2-m-strip svg {
    display: block;
    width: auto;
    max-width: none;
    height: var(--sh);
    aspect-ratio: 1920 / 850;
  }
}

/* vooy 로고 비트: 단어가 바뀔 때마다 v→o→o→y 순서로 통통 튀고 착지하며 살짝 눌림 */
.vlogo {
  pointer-events: none;
}
.vl {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.vlogo.beat .vl {
  animation: vooy-hop 0.78s cubic-bezier(0.3, 0.7, 0.4, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes vooy-hop {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  14% {
    transform: translateY(0) scale(1.08, 0.9);
  }
  38% {
    transform: translateY(-16px) scale(0.94, 1.08);
  }
  60% {
    transform: translateY(0) scale(1.1, 0.86);
  }
  76% {
    transform: translateY(0) scale(0.97, 1.04);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vlogo.beat .vl {
    animation: none;
  }
}

/* ── 젤리 모션 공통 ──
   jelly-in   : 등장 (0에서 커지며 가로·세로가 번갈아 출렁이다 자리 잡음)
   jelly-rise : 카드 안 글자·행 등장 (아래에서 올라오며 살짝 출렁)
   jelly-float: 대기 (바닥에서 눌렸다 → 늘어나며 떠오름 → 공중에서 출렁 → 내려앉으며 다시 눌림) */
/* 연속 함수(사인·감쇠 스프링)를 촘촘히 샘플링한 키프레임 — linear로 재생해 구간마다 멈칫하는 느낌 없이 부드럽게 */
@keyframes jelly-in {
  0% {
    opacity: 0;
    transform: scale(0.01, 0.01);
  }
  3.33% {
    opacity: 0.233;
    transform: scale(0.221, 0.197);
  }
  6.67% {
    opacity: 0.467;
    transform: scale(0.481, 0.401);
  }
  10% {
    opacity: 0.7;
    transform: scale(0.73, 0.599);
  }
  13.33% {
    opacity: 0.933;
    transform: scale(0.93, 0.782);
  }
  16.67% {
    opacity: 1;
    transform: scale(1.068, 0.942);
  }
  20% {
    opacity: 1;
    transform: scale(1.145, 1.07);
  }
  23.33% {
    opacity: 1;
    transform: scale(1.174, 1.16);
  }
  26.67% {
    opacity: 1;
    transform: scale(1.171, 1.208);
  }
  30% {
    opacity: 1;
    transform: scale(1.15, 1.218);
  }
  33.33% {
    opacity: 1;
    transform: scale(1.121, 1.198);
  }
  36.67% {
    opacity: 1;
    transform: scale(1.091, 1.16);
  }
  40% {
    opacity: 1;
    transform: scale(1.062, 1.113);
  }
  43.33% {
    opacity: 1;
    transform: scale(1.037, 1.066);
  }
  46.67% {
    opacity: 1;
    transform: scale(1.017, 1.025);
  }
  50% {
    opacity: 1;
    transform: scale(1.001, 0.994);
  }
  53.33% {
    opacity: 1;
    transform: scale(0.99, 0.973);
  }
  56.67% {
    opacity: 1;
    transform: scale(0.983, 0.962);
  }
  60% {
    opacity: 1;
    transform: scale(0.98, 0.959);
  }
  63.33% {
    opacity: 1;
    transform: scale(0.979, 0.962);
  }
  66.67% {
    opacity: 1;
    transform: scale(0.98, 0.969);
  }
  70% {
    opacity: 1;
    transform: scale(0.982, 0.978);
  }
  73.33% {
    opacity: 1;
    transform: scale(0.986, 0.987);
  }
  76.67% {
    opacity: 1;
    transform: scale(0.989, 0.995);
  }
  80% {
    opacity: 1;
    transform: scale(0.993, 1.001);
  }
  83.33% {
    opacity: 1;
    transform: scale(0.997, 1.004);
  }
  86.67% {
    opacity: 1;
    transform: scale(1, 1.006);
  }
  90% {
    opacity: 1;
    transform: scale(1.002, 1.007);
  }
  93.33% {
    opacity: 1;
    transform: scale(1.004, 1.006);
  }
  96.67% {
    opacity: 1;
    transform: scale(1.005, 1.005);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes jelly-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(1, 1);
  }
  4.17% {
    opacity: 0.208;
    transform: translateY(13.25px) scale(1.016, 0.984);
  }
  8.33% {
    opacity: 0.417;
    transform: translateY(8.58px) scale(1.022, 0.978);
  }
  12.5% {
    opacity: 0.625;
    transform: translateY(4.59px) scale(1.021, 0.979);
  }
  16.67% {
    opacity: 0.833;
    transform: translateY(1.56px) scale(1.016, 0.984);
  }
  20.83% {
    opacity: 1;
    transform: translateY(-0.49px) scale(1.008, 0.992);
  }
  25% {
    opacity: 1;
    transform: translateY(-1.67px) scale(1.002, 0.998);
  }
  29.17% {
    opacity: 1;
    transform: translateY(-2.16px) scale(0.997, 1.003);
  }
  33.33% {
    opacity: 1;
    transform: translateY(-2.17px) scale(0.994, 1.006);
  }
  37.5% {
    opacity: 1;
    transform: translateY(-1.88px) scale(0.994, 1.006);
  }
  41.67% {
    opacity: 1;
    transform: translateY(-1.45px) scale(0.995, 1.005);
  }
  45.83% {
    opacity: 1;
    transform: translateY(-1px) scale(0.997, 1.003);
  }
  50% {
    opacity: 1;
    transform: translateY(-0.59px) scale(0.999, 1.001);
  }
  54.17% {
    opacity: 1;
    transform: translateY(-0.26px) scale(1.001, 0.999);
  }
  58.33% {
    opacity: 1;
    transform: translateY(-0.02px) scale(1.001, 0.999);
  }
  62.5% {
    opacity: 1;
    transform: translateY(0.12px) scale(1.002, 0.998);
  }
  66.67% {
    opacity: 1;
    transform: translateY(0.19px) scale(1.001, 0.999);
  }
  70.83% {
    opacity: 1;
    transform: translateY(0.21px) scale(1.001, 0.999);
  }
  75% {
    opacity: 1;
    transform: translateY(0.19px) scale(1, 1);
  }
  79.17% {
    opacity: 1;
    transform: translateY(0.16px) scale(1, 1);
  }
  83.33% {
    opacity: 1;
    transform: translateY(0.11px) scale(1, 1);
  }
  87.5% {
    opacity: 1;
    transform: translateY(0.07px) scale(1, 1);
  }
  91.67% {
    opacity: 1;
    transform: translateY(0.04px) scale(1, 1);
  }
  95.83% {
    opacity: 1;
    transform: translateY(0.01px) scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1, 1);
  }
}
@keyframes jelly-float {
  0% {
    transform: translateY(-0px) rotate(0deg) scale(1.035, 0.965);
  }
  2.78% {
    transform: translateY(-0.12px) rotate(0.52deg) scale(1.039, 0.961);
  }
  5.56% {
    transform: translateY(-0.48px) rotate(1.03deg) scale(1.041, 0.959);
  }
  8.33% {
    transform: translateY(-1.07px) rotate(1.5deg) scale(1.041, 0.959);
  }
  11.11% {
    transform: translateY(-1.87px) rotate(1.93deg) scale(1.039, 0.961);
  }
  13.89% {
    transform: translateY(-2.86px) rotate(2.3deg) scale(1.034, 0.966);
  }
  16.67% {
    transform: translateY(-4px) rotate(2.6deg) scale(1.028, 0.972);
  }
  19.44% {
    transform: translateY(-5.26px) rotate(2.82deg) scale(1.02, 0.98);
  }
  22.22% {
    transform: translateY(-6.61px) rotate(2.95deg) scale(1.01, 0.99);
  }
  25% {
    transform: translateY(-8px) rotate(3deg) scale(1, 1);
  }
  27.78% {
    transform: translateY(-9.39px) rotate(2.95deg) scale(0.99, 1.01);
  }
  30.56% {
    transform: translateY(-10.74px) rotate(2.82deg) scale(0.98, 1.02);
  }
  33.33% {
    transform: translateY(-12px) rotate(2.6deg) scale(0.972, 1.028);
  }
  36.11% {
    transform: translateY(-13.14px) rotate(2.3deg) scale(0.966, 1.034);
  }
  38.89% {
    transform: translateY(-14.13px) rotate(1.93deg) scale(0.961, 1.039);
  }
  41.67% {
    transform: translateY(-14.93px) rotate(1.5deg) scale(0.959, 1.041);
  }
  44.44% {
    transform: translateY(-15.52px) rotate(1.03deg) scale(0.959, 1.041);
  }
  47.22% {
    transform: translateY(-15.88px) rotate(0.52deg) scale(0.961, 1.039);
  }
  50% {
    transform: translateY(-16px) rotate(0deg) scale(0.965, 1.035);
  }
  52.78% {
    transform: translateY(-15.88px) rotate(-0.52deg) scale(0.97, 1.03);
  }
  55.56% {
    transform: translateY(-15.52px) rotate(-1.03deg) scale(0.975, 1.025);
  }
  58.33% {
    transform: translateY(-14.93px) rotate(-1.5deg) scale(0.98, 1.02);
  }
  61.11% {
    transform: translateY(-14.13px) rotate(-1.93deg) scale(0.985, 1.015);
  }
  63.89% {
    transform: translateY(-13.14px) rotate(-2.3deg) scale(0.989, 1.011);
  }
  66.67% {
    transform: translateY(-12px) rotate(-2.6deg) scale(0.993, 1.007);
  }
  69.44% {
    transform: translateY(-10.74px) rotate(-2.82deg) scale(0.996, 1.004);
  }
  72.22% {
    transform: translateY(-9.39px) rotate(-2.95deg) scale(0.998, 1.002);
  }
  75% {
    transform: translateY(-8px) rotate(-3deg) scale(1, 1);
  }
  77.78% {
    transform: translateY(-6.61px) rotate(-2.95deg) scale(1.002, 0.998);
  }
  80.56% {
    transform: translateY(-5.26px) rotate(-2.82deg) scale(1.004, 0.996);
  }
  83.33% {
    transform: translateY(-4px) rotate(-2.6deg) scale(1.007, 0.993);
  }
  86.11% {
    transform: translateY(-2.86px) rotate(-2.3deg) scale(1.011, 0.989);
  }
  88.89% {
    transform: translateY(-1.87px) rotate(-1.93deg) scale(1.015, 0.985);
  }
  91.67% {
    transform: translateY(-1.07px) rotate(-1.5deg) scale(1.02, 0.98);
  }
  94.44% {
    transform: translateY(-0.48px) rotate(-1.03deg) scale(1.025, 0.975);
  }
  97.22% {
    transform: translateY(-0.12px) rotate(-0.52deg) scale(1.03, 0.97);
  }
  100% {
    transform: translateY(-0px) rotate(-0deg) scale(1.035, 0.965);
  }
}
@keyframes jelly-sway {
  0% {
    transform: translate(0px, -4px) rotate(0deg) scale(1.035, 0.965);
  }
  2.78% {
    transform: translate(1.56px, -4.21px) rotate(1.56deg) scale(1.033, 0.967);
  }
  5.56% {
    transform: translate(3.08px, -4.82px) rotate(3.08deg) scale(1.027, 0.973);
  }
  8.33% {
    transform: translate(4.5px, -5.75px) rotate(4.5deg) scale(1.018, 0.983);
  }
  11.11% {
    transform: translate(5.79px, -6.89px) rotate(5.79deg) scale(1.006, 0.994);
  }
  13.89% {
    transform: translate(6.89px, -8.11px) rotate(6.89deg) scale(0.994, 1.006);
  }
  16.67% {
    transform: translate(7.79px, -9.25px) rotate(7.79deg) scale(0.983, 1.018);
  }
  19.44% {
    transform: translate(8.46px, -10.18px) rotate(8.46deg) scale(0.973, 1.027);
  }
  22.22% {
    transform: translate(8.86px, -10.79px) rotate(8.86deg) scale(0.967, 1.033);
  }
  25% {
    transform: translate(9px, -11px) rotate(9deg) scale(0.965, 1.035);
  }
  27.78% {
    transform: translate(8.86px, -10.79px) rotate(8.86deg) scale(0.967, 1.033);
  }
  30.56% {
    transform: translate(8.46px, -10.18px) rotate(8.46deg) scale(0.973, 1.027);
  }
  33.33% {
    transform: translate(7.79px, -9.25px) rotate(7.79deg) scale(0.982, 1.018);
  }
  36.11% {
    transform: translate(6.89px, -8.11px) rotate(6.89deg) scale(0.994, 1.006);
  }
  38.89% {
    transform: translate(5.79px, -6.89px) rotate(5.79deg) scale(1.006, 0.994);
  }
  41.67% {
    transform: translate(4.5px, -5.75px) rotate(4.5deg) scale(1.018, 0.983);
  }
  44.44% {
    transform: translate(3.08px, -4.82px) rotate(3.08deg) scale(1.027, 0.973);
  }
  47.22% {
    transform: translate(1.56px, -4.21px) rotate(1.56deg) scale(1.033, 0.967);
  }
  50% {
    transform: translate(0px, -4px) rotate(0deg) scale(1.035, 0.965);
  }
  52.78% {
    transform: translate(-1.56px, -4.21px) rotate(-1.56deg) scale(1.033, 0.967);
  }
  55.56% {
    transform: translate(-3.08px, -4.82px) rotate(-3.08deg) scale(1.027, 0.973);
  }
  58.33% {
    transform: translate(-4.5px, -5.75px) rotate(-4.5deg) scale(1.018, 0.983);
  }
  61.11% {
    transform: translate(-5.79px, -6.89px) rotate(-5.79deg) scale(1.006, 0.994);
  }
  63.89% {
    transform: translate(-6.89px, -8.11px) rotate(-6.89deg) scale(0.994, 1.006);
  }
  66.67% {
    transform: translate(-7.79px, -9.25px) rotate(-7.79deg) scale(0.983, 1.018);
  }
  69.44% {
    transform: translate(-8.46px, -10.18px) rotate(-8.46deg) scale(0.973, 1.027);
  }
  72.22% {
    transform: translate(-8.86px, -10.79px) rotate(-8.86deg) scale(0.967, 1.033);
  }
  75% {
    transform: translate(-9px, -11px) rotate(-9deg) scale(0.965, 1.035);
  }
  77.78% {
    transform: translate(-8.86px, -10.79px) rotate(-8.86deg) scale(0.967, 1.033);
  }
  80.56% {
    transform: translate(-8.46px, -10.18px) rotate(-8.46deg) scale(0.973, 1.027);
  }
  83.33% {
    transform: translate(-7.79px, -9.25px) rotate(-7.79deg) scale(0.983, 1.018);
  }
  86.11% {
    transform: translate(-6.89px, -8.11px) rotate(-6.89deg) scale(0.994, 1.006);
  }
  88.89% {
    transform: translate(-5.79px, -6.89px) rotate(-5.79deg) scale(1.006, 0.994);
  }
  91.67% {
    transform: translate(-4.5px, -5.75px) rotate(-4.5deg) scale(1.018, 0.983);
  }
  94.44% {
    transform: translate(-3.08px, -4.82px) rotate(-3.08deg) scale(1.027, 0.973);
  }
  97.22% {
    transform: translate(-1.56px, -4.21px) rotate(-1.56deg) scale(1.033, 0.967);
  }
  100% {
    transform: translate(-0px, -4px) rotate(-0deg) scale(1.035, 0.965);
  }
}
@keyframes jelly-ride {
  0% {
    transform: translateX(0px) rotate(0deg) scale(1.03, 0.97);
  }
  2.78% {
    transform: translateX(0.87px) rotate(1.04deg) scale(1.028, 0.972);
  }
  5.56% {
    transform: translateX(1.71px) rotate(2.05deg) scale(1.023, 0.977);
  }
  8.33% {
    transform: translateX(2.5px) rotate(3deg) scale(1.015, 0.985);
  }
  11.11% {
    transform: translateX(3.21px) rotate(3.86deg) scale(1.005, 0.995);
  }
  13.89% {
    transform: translateX(3.83px) rotate(4.6deg) scale(0.995, 1.005);
  }
  16.67% {
    transform: translateX(4.33px) rotate(5.2deg) scale(0.985, 1.015);
  }
  19.44% {
    transform: translateX(4.7px) rotate(5.64deg) scale(0.977, 1.023);
  }
  22.22% {
    transform: translateX(4.92px) rotate(5.91deg) scale(0.972, 1.028);
  }
  25% {
    transform: translateX(5px) rotate(6deg) scale(0.97, 1.03);
  }
  27.78% {
    transform: translateX(4.92px) rotate(5.91deg) scale(0.972, 1.028);
  }
  30.56% {
    transform: translateX(4.7px) rotate(5.64deg) scale(0.977, 1.023);
  }
  33.33% {
    transform: translateX(4.33px) rotate(5.2deg) scale(0.985, 1.015);
  }
  36.11% {
    transform: translateX(3.83px) rotate(4.6deg) scale(0.995, 1.005);
  }
  38.89% {
    transform: translateX(3.21px) rotate(3.86deg) scale(1.005, 0.995);
  }
  41.67% {
    transform: translateX(2.5px) rotate(3deg) scale(1.015, 0.985);
  }
  44.44% {
    transform: translateX(1.71px) rotate(2.05deg) scale(1.023, 0.977);
  }
  47.22% {
    transform: translateX(0.87px) rotate(1.04deg) scale(1.028, 0.972);
  }
  50% {
    transform: translateX(0px) rotate(0deg) scale(1.03, 0.97);
  }
  52.78% {
    transform: translateX(-0.87px) rotate(-1.04deg) scale(1.028, 0.972);
  }
  55.56% {
    transform: translateX(-1.71px) rotate(-2.05deg) scale(1.023, 0.977);
  }
  58.33% {
    transform: translateX(-2.5px) rotate(-3deg) scale(1.015, 0.985);
  }
  61.11% {
    transform: translateX(-3.21px) rotate(-3.86deg) scale(1.005, 0.995);
  }
  63.89% {
    transform: translateX(-3.83px) rotate(-4.6deg) scale(0.995, 1.005);
  }
  66.67% {
    transform: translateX(-4.33px) rotate(-5.2deg) scale(0.985, 1.015);
  }
  69.44% {
    transform: translateX(-4.7px) rotate(-5.64deg) scale(0.977, 1.023);
  }
  72.22% {
    transform: translateX(-4.92px) rotate(-5.91deg) scale(0.972, 1.028);
  }
  75% {
    transform: translateX(-5px) rotate(-6deg) scale(0.97, 1.03);
  }
  77.78% {
    transform: translateX(-4.92px) rotate(-5.91deg) scale(0.972, 1.028);
  }
  80.56% {
    transform: translateX(-4.7px) rotate(-5.64deg) scale(0.977, 1.023);
  }
  83.33% {
    transform: translateX(-4.33px) rotate(-5.2deg) scale(0.985, 1.015);
  }
  86.11% {
    transform: translateX(-3.83px) rotate(-4.6deg) scale(0.995, 1.005);
  }
  88.89% {
    transform: translateX(-3.21px) rotate(-3.86deg) scale(1.005, 0.995);
  }
  91.67% {
    transform: translateX(-2.5px) rotate(-3deg) scale(1.015, 0.985);
  }
  94.44% {
    transform: translateX(-1.71px) rotate(-2.05deg) scale(1.023, 0.977);
  }
  97.22% {
    transform: translateX(-0.87px) rotate(-1.04deg) scale(1.028, 0.972);
  }
  100% {
    transform: translateX(-0px) rotate(-0deg) scale(1.03, 0.97);
  }
}

/* 시나리오 1: 말풍선 */
.w-bubble {
  transform-origin: 8% 100%;
  transform-box: fill-box;
}
.walk.anim .w-bubble {
  opacity: 0;
}
.walk.anim .w-bubble.on {
  animation: jelly-in 0.9s linear both;
}
/* 시나리오 2: 말풍선 · 보라색 카드(배경 → 제목 → 아바타 → 자전거 → 행 1·2·3) */
.s2-bub {
  transform-origin: 85% 100%;
  transform-box: fill-box;
}
.walk2.anim .s2-bub {
  opacity: 0;
}
.walk2.anim .s2-bub.on {
  animation: jelly-in 0.9s linear both;
}
.s2-card {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.walk2.anim .s2-card {
  opacity: 0;
}
.walk2.anim .s2-card.on {
  animation: jelly-in 1s linear both;
}
.s2-seq {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.walk2.anim .s2-seq {
  opacity: 0;
}
.walk2.anim .s2-card.on .s2-seq {
  animation: jelly-rise 0.75s linear both;
  animation-delay: var(--d);
}
.walk2.anim .s2-card.on .s2-seq.s2-seq-pop {
  animation-name: jelly-in;
  animation-duration: 0.9s;
}
/* 시나리오 3: 말풍선 → 별 → 음표 → 하트 → 민트 APT. 카드 */
.s3-seq {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.s3-bubble {
  transform-origin: 15% 100%;
}
.walk3.anim .s3-seq {
  opacity: 0;
}
.walk3.anim .s3-f.on .s3-seq {
  animation: jelly-in 0.9s linear both;
  animation-delay: var(--d);
}
/* 대기 모션: 바닥 쪽을 기준으로 눌렸다 늘어나는 젤리 */
.s2-pink,
.s2-bike,
.s3-heart,
.s3-star,
.s3-note {
  transform-origin: 50% 92%;
  transform-box: fill-box;
}
.walk2 .s2-pink {
  animation: jelly-float 2.4s linear infinite;
}
.walk2 .s2-bike {
  animation: jelly-ride 1.5s linear infinite;
}
.walk3 .s3-heart {
  animation: jelly-float 2.2s linear infinite;
  animation-delay: -0.6s;
}
.walk3 .s3-star {
  animation: jelly-sway 1.6s linear infinite;
}
.walk3 .s3-note {
  animation: jelly-sway 1.6s linear infinite reverse;
  animation-delay: -0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .s2-pink,
  .s2-bike,
  .s3-heart,
  .s3-star,
  .s3-note,
  .w-bubble,
  .s2-bub,
  .s2-card,
  .s2-seq,
  .s3-seq {
    opacity: 1 !important;
    animation: none !important;
  }
}
/* 노트북 한/A 키 표시등: 라임색으로 켜졌다 꺼졌다 */
.v3-caps-led {
  animation: v3-led 2.4s ease-in-out infinite;
}
@keyframes v3-led {
  0%,
  38% {
    opacity: 1;
  }
  50%,
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v3-caps-led {
    animation: none;
  }
}
html:not([lang="en"]) .en-only {
  display: none;
}

/* ── 새 시안(웹.svg) 장면 소스 ── */
.n5s0,
.n5s1,
.n5s3,
.n5s4,
.n5s5,
.n5s6,
.n5s7,
.n5s8,
.n5s9,
.n5s10,
.n5s11 {
  fill: none;
}
.n5s14 {
  fill: #ffdfda;
}
.n5s15 {
  font-size: 21.35px;
}
.n5s15,
.n5s16,
.n5s17,
.n5s18,
.n5s19,
.n5s21,
.n5s22,
.n5s23,
.n5s24,
.n5s26,
.n5s27 {
  font-weight: 700;
}
.n5s15,
.n5s16,
.n5s17,
.n5s29,
.n5s30,
.n5s27 {
  fill: #141414;
}
.n5s15,
.n5s17,
.n5s18,
.n5s19,
.n5s23,
.n5s24,
.n5s26,
.n5s27 {
  font-family: "Pretendard", sans-serif;
}
.n5s31,
.n5s32,
.n5s33,
.n5s34 {
  isolation: isolate;
}
.n5s31,
.n5s33,
.n5s35,
.n5s34 {
  opacity: 0.9;
}
.n5s16 {
  font-size: 27px;
}
.n5s16,
.n5s21,
.n5s22 {
  font-family: "Pretendard", sans-serif;
}
.n5s1,
.n5s3,
.n5s4,
.n5s5,
.n5s6,
.n5s7,
.n5s8,
.n5s9,
.n5s33,
.n5s34,
.n5s10,
.n5s11 {
  stroke-miterlimit: 10;
}
.n5s1,
.n5s10 {
  stroke: #01aa74;
}
.n5s37 {
  fill: #01e7b3;
}
.n5s38 {
  fill: #09cbea;
}
.n5s39 {
  fill: #60f7d5;
}
.n5s17 {
  font-size: 16.89px;
}
.n5s18 {
  letter-spacing: 0.03em;
}
.n5s18,
.n5s41 {
  font-size: 11px;
}
.n5s18,
.n5s43,
.n5s45,
.n5s33,
.n5s24,
.n5s46,
.n5s34 {
  fill: #fff;
}
.n5s3,
.n5s7,
.n5s8 {
  stroke: #fff;
}
.n5s41,
.n5s47,
.n5s48,
.n5s49,
.n5s50,
.n5s46 {
  font-family: "Pretendard", sans-serif;
}
.n5s47 {
  font-size: 12.26px;
}
.n5s48,
.n5s51 {
  font-size: 12.35px;
}
.n5s4,
.n5s5,
.n5s6,
.n5s11 {
  stroke: #fd6969;
}
.n5s4,
.n5s33,
.n5s34 {
  stroke-width: 2px;
}
.n5s19 {
  font-size: 15.9px;
}
.n5s45,
.n5s60 {
  font-weight: 500;
}
.n5s45,
.n5s60 {
  font-family: "Pretendard", sans-serif;
}
.n5s62 {
  fill: #c7f1f8;
}
.n5s63 {
  font-size: 7.6px;
}
.n5s51,
.n5s50,
.n5s64 {
  fill: #5a616f;
}
.n5s51,
.n5s30,
.n5s65 {
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
}
.n5s66 {
  fill: #eaf5f6;
}
.n5s21 {
  font-size: 17.89px;
}
.n5s22 {
  font-size: 16px;
}
.n5s67 {
  clip-path: url(#n5-clippath-17);
}
.n5s68 {
  clip-path: url(#n5-clippath-19);
}
.n5s70 {
  clip-path: url(#n5-clippath-16);
}
.n5s71 {
  clip-path: url(#n5-clippath-18);
}
.n5s73 {
  clip-path: url(#n5-clippath-15);
}
.n5s74 {
  clip-path: url(#n5-clippath-13);
}
.n5s75 {
  clip-path: url(#n5-clippath-14);
}
.n5s76 {
  clip-path: url(#n5-clippath-12);
}
.n5s77 {
  clip-path: url(#n5-clippath-20);
}
.n5s78 {
  clip-path: url(#n5-clippath-21);
}
.n5s5 {
  stroke-width: 4px;
}
.n5s80 {
  clip-path: url(#n5-clippath-3);
}
.n5s81 {
  clip-path: url(#n5-clippath-4);
}
.n5s83 {
  clip-path: url(#n5-clippath-7);
}
.n5s84 {
  clip-path: url(#n5-clippath-6);
}
.n5s86 {
  clip-path: url(#n5-clippath-8);
}
.n5s87 {
  clip-path: url(#n5-clippath-5);
}
.n5s88,
.n5s23 {
  fill: #f5f4f7;
}
.n5s6,
.n5s11 {
  stroke-width: 3px;
}
.n5s7 {
  stroke-width: 0.5px;
}
.n5s8 {
  stroke-width: 0.25px;
}
.n5s23 {
  font-size: 30.7px;
}
.n5s93,
.n5s26 {
  fill: #fd6969;
}
.n5s45 {
  font-size: 4.5px;
  letter-spacing: 0.04em;
}
.n5s50 {
  font-size: 10.53px;
  letter-spacing: -0.02em;
}
.n5s94 {
  fill: #016ffd;
}
.n5s95 {
  fill: #d8fdec;
}
.n5s9 {
  stroke: #000;
  stroke-width: 0.4px;
}
.n5s33 {
  stroke: #00ff63;
}
.n5s96 {
  fill: #5ae1f4;
}
.n5s35 {
  fill: #8255ff;
}
.n5s97 {
  fill: #01aa74;
}
.n5s30 {
  font-size: 17.79px;
}
.n5s98 {
  font-family: "Pretendard", sans-serif;
  font-size: 6.7px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.n5s26 {
  font-size: 9.82px;
}
.n5s34 {
  stroke: #8255ff;
}
.n5s27 {
  font-size: 15.44px;
}
.n5s10 {
  stroke-width: 0.75px;
}
.n5s65 {
  font-size: 10px;
}
.n5s11 {
  stroke-dasharray: 4 4;
}
.n5s60 {
  font-size: 10.57px;
}
.n5s100 {
  fill: #00ac74;
}
html[lang="en"] .ko-only {
  display: none;
}
.c-seq {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.c-bubble,
.c-bubw {
  transform-origin: 12% 100%;
  transform-box: fill-box;
}
.walk4.anim .c-seq,
.walk5.anim .c-seq,
.walk4.anim .c-bubw {
  opacity: 0;
}
.walk4.anim .c-f.on .c-seq,
.walk5.anim .c-f.on .c-seq {
  animation: jelly-in 0.9s linear both;
  animation-delay: var(--d);
}
.walk4.anim .c-bubw.on {
  animation: jelly-in 0.9s linear both;
}
.c-jf,
.c-js {
  transform-origin: 50% 92%;
  transform-box: fill-box;
}
.c-jf {
  animation: jelly-float 2.4s linear infinite;
}
.c-js {
  animation: jelly-sway 1.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .c-seq,
  .c-bubw,
  .c-bob,
  .c-jf,
  .c-js {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* 하트 아바타: 오른쪽에서 왼쪽으로 통통 점프하며 건너감 (JS) */
.walk3.anim .s3-heart {
  transform-origin: 0 0;
  transform-box: view-box;
  animation: none;
}

.v2s0 {
  fill: none;
}
.v2s3 {
  fill: #00e6b9;
}
.v2s10,
.v2s11,
.v2s12 {
  font-weight: 500;
}
.v2s10 {
  letter-spacing: -0.02em;
}
.v2s10,
.v2s11,
.v2s12 {
  font-family: "Ryker", "Pretendard", sans-serif;
  font-size: 82px;
}
.v2s11 {
  letter-spacing: -0.02em;
}
.v2s12 {
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── 지나가는 인물 장면을 별도 레이어로: 배경(노트북·탑승권 그림자 필터)을 매 프레임 다시 그리지 않아 버벅임 감소 ── */
.v2-walkl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(1731.24 * var(--u));
  pointer-events: none;
}
.v2-walkm {
  display: none;
}
.wl {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* Keep moving SVG artwork and transparent video on independent compositor layers. */
.wl > svg,
.wl > video {
  transform: translateZ(0);
  will-change: transform;
}
.wl > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wl > video {
  position: absolute;
  display: block;
  pointer-events: none;
  object-fit: fill;
  background: transparent;
}
.wl:not(.vid) > video {
  visibility: hidden;
}
.wl.vid .pfb {
  display: none;
}
@media (max-width: 899px) {
  .v2-walkl {
    display: none;
  }
  .v2-m-strip .v2-walkm {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(var(--sh) * 1920 / 850);
    height: var(--sh);
    pointer-events: none;
  }
}

/* 아바타 젤리: CSS 둥실 대신 JS 로 쫀득·말랑 점프 + 좌우 왔다갔다 */
.walk2 .s2-pink,
.walk3 .s3-star,
.walk3 .s3-note,
.c-jf,
.c-js {
  transform-origin: 0 0 !important;
  transform-box: view-box !important;
  animation: none !important;
}

@media (max-width: 599px) {
  .v2-m-strip {
    top: 440px;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .v2-m-strip {
    top: 600px;
  }
}

@media (min-width: 900px) {
  .hero .stage {
    width: calc(1920 * var(--u));
  }
}

.artwork-walk-viewport {
  position: absolute;
  inset: 50% 0 0;
  pointer-events: none;
}
.v2-walkm .artwork-walk-viewport {
  inset: 0;
}

.artwork-motion-paused *,
.artwork-motion-paused *::before,
.artwork-motion-paused *::after {
  animation-play-state: paused !important;
}

/* Mobile scene proportions from the approved artifact. */ @media (
    max-width: 599px
  ) {
  .v2-m-head {
    top: 91px;
    left: calc(16px + (100% - 32px) * 0.0263);
    width: calc((100% - 32px) * 0.9428);
  }
  .v2-m-strip {
    --sh: 95.23vw;
    top: 77.08vw;
  }
}

/* Longer English copy needs clearance above the moving speech bubbles. */
@media (max-width: 599px) {
  html[data-locale="en"] .v2-m-strip {
    top: calc(77.08vw + 100px);
  }
}