section.section_wrapper {width:720px;}
.viewport-container {
  position: relative;
  width: 720px;
  #height: calc(100vh - var(--banner-height, 60px));
  height: 1140px;
  overflow: hidden;
  cursor: default;
}

/* 배경 레이어: images/visual/new.png (모바일 해상도 매칭) */
.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 1140px;
  background-image: url('../images/visual/new.jpg');
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.bg-layer.prev {
  background-image: url('../images/visual/old.jpg');
}

.scratch-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 1140px;
  z-index: 2;
  transition: opacity 1s ease-in-out;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 중앙 타이틀: 상단으로부터 정확히 10% 비율 위치에 배치 */
/* 모바일 레이아웃에 최적화된 타이틀 위치 */
.title-image-container {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  width: 85%;
  max-width: 480px;
}
.title-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.people-container {
  position: absolute;
  bottom:30px;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  width: max-content;
  transform-origin: bottom center; /* 축소되어도 발이 뜬 상태가 되지 않도록 아래 기준 정렬 */
  transform: translate3d(calc(-100% - 50vw), 0, 0) scale(1); /* 그룹 전체를 원래 크기의 60%로 스케일 조정 */
  will-change: transform;
  transition: transform 8s linear;
}
/* 인물 이미지 크기를 PC 오리지널 고유 스케일(100% 원본)로 복구 */
.people-container img {
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
/* PC 버전 원래의 조밀하고 자연스러운 겹침 간격 적용 (-32px) */
.people-container img:not(:first-child) {
  margin-left: -32px;
}

.people-container.walk-in {
  transition: transform 8s linear;
  transform: translate3d(-50%, 0, 0) scale(1); /* 진입 시에도 60% 스케일 유지 */
}

.people-container.walk-out {
  transition: transform 8s linear;
  transform: translate3d(50vw, 0, 0) scale(1); /* 퇴장 시에도 60% 스케일 유지 */
}

.firework-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.firework {
  position: absolute;
  opacity: 0;
  transform: scale(0);
  width: 13vw; /* 기본 폭죽 크기 하향 조정 */
  height: auto;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s linear;
}
.firework.explode {
  opacity: 1;
  transform: scale(1);
}
.firework.fade-away {
  opacity: 0;
  transform: scale(0.85);
  transition: transform 0.8s ease-in, opacity 0.8s ease-in;
}

/* 레퍼런스 이미지 비례에 완벽히 맞춘 폭죽 포지션 및 개별 크기 최적화 */
.fire-yellow {
  top: -5%;
  right: 15%;
  width: 22vw; /* 최상단 우측의 크고 상징적인 노란 폭죽 */
}
.fire-blue { top: 32%; left: 4%; width: 13vw; }
.fire-pink { top: 39%; right: 21%; width: 13vw; }
.fire-yellow-small { top: 41%; left: 27%; width: 8vw; }
.fire-yellow-small.explode { opacity: 1; transform: scale(1); }
.fire-yellow-small.fade-away { opacity: 0; transform: scale(0.85); }

.fire-pink-left { top: 50%; left: 16%; width: 11vw; }
.fire-blue-right { top: 33%; right: 3%; width: 11vw; }

.balloon-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* 미세 흔들림 효과 애니메이션 정의 */
@keyframes sway-1 { 0% { transform: translateX(-8px) rotate(-5deg); } 50% { transform: translateX(8px) rotate(5deg); } 100% { transform: translateX(-8px) rotate(-5deg); } }
@keyframes sway-2 { 0% { transform: translateX(-10px) rotate(-8deg); } 50% { transform: translateX(10px) rotate(8deg); } 100% { transform: translateX(-10px) rotate(-8deg); } }
@keyframes sway-3 { 0% { transform: translateX(-6px) rotate(-4deg); } 50% { transform: translateX(6px) rotate(4deg); } 100% { transform: translateX(-6px) rotate(-4deg); } }
@keyframes sway-4 { 0% { transform: translateX(-8px) rotate(-6deg); } 50% { transform: translateX(8px) rotate(6deg); } 100% { transform: translateX(-8px) rotate(-6deg); } }
@keyframes sway-5 { 0% { transform: translateX(-7px) rotate(-5deg); } 50% { transform: translateX(7px) rotate(5deg); } 100% { transform: translateX(-7px) rotate(-5deg); } }
@keyframes sway-6 { 0% { transform: translateX(-9px) rotate(-7deg); } 50% { transform: translateX(9px) rotate(7deg); } 100% { transform: translateX(-9px) rotate(-7deg); } }
@keyframes sway-7 { 0% { transform: translateX(-7px) rotate(-5deg); } 50% { transform: translateX(7px) rotate(5deg); } 100% { transform: translateX(-7px) rotate(-10deg); } }
@keyframes sway-8 { 0% { transform: translateX(-8px) rotate(-6deg); } 50% { transform: translateX(8px) rotate(6deg); } 100% { transform: translateX(-8px) rotate(-6deg); } }

.balloon-item-wrapper {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  width: 7vw; /* 모바일용 작고 귀여운 미니 풍선 크기로 하향 조정 */
  height: auto;
}
.balloon-item-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.sub-content-section {
  width: 100%;
  background-color: #0c0c0c;
}