html, body {
  height: 100%;
  margin: 0;
  background: #f5f5ef;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;          /* 작은 구간 기본 */
  display: grid;
  place-items: end center;
  padding: 16px;
}

/* 문구 */
.ui-fixed {
  position: fixed;
  top: 12px;
  right: 12px;
  width: min(32vw, 320px);
  display: none;
  z-index: 20;
}
/* '숲으로 가는 길'은 픽셀 고정 */
#titleTopRight { width: 320px !important; max-width: none !important; }

/* 🔹 숲(동적) */
.forest {
  position: absolute;
  inset: 0;
  display: none;
  align-items: end;
  justify-content: center;
  gap: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.forest-auto { display: flex; }              /* DOM 상 항상 존재 */
.forest-auto .tree {
  display: none;                              /* JS가 .show를 붙여서 보여줌 */
  height: clamp(180px, 66vh, 660px);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  margin: 0 -60px;                            /* 촘촘(-60px) */
}
.forest-auto .tree.show {
  display: block;
  animation: grow .28s ease-out both;         /* 부드럽게 나타남 */
}
@keyframes grow {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* 🔹 벌목 */
.clearcut {
  position: absolute;
  inset: 0;
  display: none;
  align-items: end;
  justify-content: center;
  gap: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.stump {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: end center;
  margin: 0 -60px;                             /* 촘촘(-60px) */
}
.stump-img {
  height: clamp(190px, 58vh, 650px);           /* 10그루 안정 입력 */
  object-fit: contain;
  display: block;
}
/* 말풍선(3배) – 현재 위치 유지 */
.bubble {
  position: absolute;
  bottom: calc(100% - 300px);
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  height: clamp(240px, 72vh, 780px);
  display: none;
  pointer-events: none;
  z-index: 10;
}

/* 🔻 표시 조건 */
@media (min-width:485px) and (max-width:1023.98px) {
  /* 작은 구간: 동적 숲만 보이고 타이틀 표시 */
  .forest-auto { display: flex; }
  #titleTopRight { display: block; }
}
@media (min-width:1024px) {
  /* 큰 구간: 벌목만 보이고 CTA 표시, 말풍선 컷 방지 */
  .clearcut-1024 { display: flex; }
  #ctaTopRight { display: block; }
  .scene { overflow: visible; }
}

/* 특정 말풍선(1,3,7,9번)만 조금 더 높게 띄우기 */
.stump:nth-child(1) .bubble,
.stump:nth-child(3) .bubble,
.stump:nth-child(7) .bubble,
.stump:nth-child(9) .bubble {
  bottom: calc(100% -800px) !important; /* 기존보다 약 40px 위로 */
}

/* -------------------------
   🌈 반응형 배경 그라데이션
   ------------------------- */

/* 기본: 투명 scene */
.scene {
  background: transparent !important;
}

/* 🌿 숲 모드(485~1023px): 하늘색 그라데이션 */
@media (min-width:485px) and (max-width:1023.98px) {
  body {
    background: linear-gradient(
      to bottom,
      #CFE9F5 0%,
      #DFF3FB 40%,
      #F8FCFF 100%
    );
    transition: background 0.8s ease;
  }
}

/* 🌲 벌목/말풍선 모드(1024px 이상): 더 어두운 쿨그레이 그라데이션 */
@media (min-width:1024px) {
  body {
    background: linear-gradient(
      to bottom,
      #BEBEBE 0%,   /* 위쪽 - 어두운 콘크리트 회색 */
      #D0D0D0 40%,  /* 중간 - 부드러운 회색 */
      #E5E5E5 100%  /* 아래 - 밝은 잿빛 */
    );
    transition: background 0.8s ease;
  }
}