/**************************************************
 * 0. 기본 스택 구조 잡기 (눈을 뒤로 보내기)
 **************************************************/
body#main.main {
  position: relative;
  z-index: 0;
}

/* body 바로 아래 자식들은 항상 눈보다 위에 오도록 */
body#main.main > * {
  position: relative;
  z-index: 1;
}

/**************************************************
 * 1. 겨울 메인 배경 (산 + 아래로 fade-out)
 **************************************************/
body#main.main {
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 300px,
      rgba(255,255,255,0.92) 520px,
      rgba(255,255,255,1) 700px
    ),
    url('/images/background/1765325528_winter_bg.svg')
      no-repeat center top / contain;
  background-color: #ffffff;
}

/**************************************************
 * 2. 기존 템플릿 오른쪽 페이드 / 잔상 죽이기
 **************************************************/
#main::after {
  background: none !important;
  box-shadow: none !important;
}

/**************************************************
 * 3. 눈 내림 효과 (상단에서만, 오브젝트 뒤)
 **************************************************/
body#main.main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 340px;            /* 눈 나오는 높이 */
  pointer-events: none;
  z-index: 0;               /* ✅ 항상 뒤로 */
  opacity: 0.9;

  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0, rgba(255,255,255,0.95) 4px, transparent 6px),
    radial-gradient(circle, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) 2.4px, transparent 4px),
    radial-gradient(circle, rgba(255,255,255,0.65) 0, rgba(255,255,255,0.65) 1.8px, transparent 3.5px);

  background-size:
    260px 260px,
    190px 190px,
    130px 130px;

  background-position:
    0 0,
    80px -60px,
    -60px 40px;

  animation: winterSnowMove 18s linear infinite;
}

@keyframes winterSnowMove {
  0% {
    transform: translateY(-40px);
    background-position:
      0 0,
      80px -60px,
      -60px 40px;
  }
  100% {
    transform: translateY(140px);
    background-position:
      0 260px,
      80px 220px,
      -60px 280px;
  }
}

/**************************************************
 * 4. Happy Holidays 텍스트 (CSS로만 생성)
 **************************************************/
body#main.main::after {
  content: "❄ Happy Holidays! ❄" !important;
  position: absolute;
  top: 26px;                     /* 너무 위에 붙지 않게 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 3;

  text-shadow:
    0 0 8px rgba(0,0,0,0.35),
    0 0 16px rgba(255,255,255,0.6);

  animation: holidayGlow 2.4s ease-in-out infinite;
}

@keyframes holidayGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(0,0,0,0.35),
      0 0 16px rgba(255,255,255,0.6);
  }
  50% {
    text-shadow:
      0 0 10px rgba(0,0,0,0.4),
      0 0 24px rgba(255,255,255,1),
      0 0 36px rgba(135,206,250,0.9);
  }
}

/**************************************************
 * 5. 모바일 / 태블릿에서는 겨울 테마 전체 OFF
 **************************************************/
@media (max-width: 768px) {

  /* Happy Holidays 숨김 */
  body#main.main::after {
    content: none !important;
    animation: none !important;
  }

  /* 배경/눈 모두 기본으로 */
  body#main.main {
    background: #ffffff !important;
  }

  body#main.main::before {
    content: none !important;
    background: none !important;
    animation: none !important;
  }
}