.friendary-seasonal-effect {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.friendary-snowfall {
  z-index: 2147483646;
}

html.friendary-winter-night,
html.friendary-winter-night body {
  background:
    radial-gradient(circle at top, #475569 0%, transparent 45%),
    linear-gradient(180deg, #172554 0%, #312e81 55%, #1e1b4b 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 600ms ease;
}

html.friendary-winter-night body,
html.friendary-winter-night body > main,
html.friendary-winter-night body > section,
html.friendary-winter-night body > div.mobile-wrap {
  min-height: 100vh;
  min-height: 100dvh;
}

/*
 * 모바일 폭의 본문에서 배경 그라데이션이 다시 시작되면 바깥 화면과 색이
 * 갈라진다. 겨울 배경은 body에서 한 번만 그리고 모든 페이지 루트는 이를
 * 그대로 비치게 한다.
 */
html.friendary-winter-night .mobile-wrap,
html.friendary-winter-night body > main,
html.friendary-winter-night body > section,
html.friendary-winter-night body > div.mobile-wrap,
html.friendary-winter-night .mobile-wrap > main,
html.friendary-winter-night .mobile-wrap > section,
html.friendary-winter-night .mobile-wrap > .album-page,
html.friendary-winter-night .mobile-wrap > .my-home-page,
html.friendary-winter-night main,
html.friendary-winter-night .finding-friend-page,
html.friendary-winter-night .board-page,
html.friendary-winter-night .concern-page,
html.friendary-winter-night .ripley-board-page {
  background: transparent;
  background-color: transparent;
}

html.friendary-winter-night .album-page {
  background: transparent;
  transition: background 600ms ease;
}

html.friendary-winter-night .my-home-page {
  background: transparent;
  transition: background 600ms ease;
}

html.friendary-winter-night .my-home-page .my-home-header h1,
html.friendary-winter-night .my-home-page .my-home-header > p,
html.friendary-winter-night .my-home-page .my-home-header > a {
  color: #f8fafc;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.65);
}