/* WOOOLY 季節背景：body のクラス、または data-season に対応 */
:root {
  --season-base: #fff7f6;
  --season-soft: #f8dce4;
  --season-accent: #efa9bb;
  --season-deep: #c86f87;
}

body.spring, body.spring-bg, body.season-spring, body[data-season="spring"] {
  --season-base: #fff5f7;
  --season-soft: #f9dce6;
  --season-accent: #efabc0;
  --season-deep: #c96c89;
}
body.summer, body.summer-bg, body.season-summer, body[data-season="summer"] {
  --season-base: #f1fcfb;
  --season-soft: #ccefeb;
  --season-accent: #83d4ce;
  --season-deep: #399f9c;
}
body.autumn, body.autumn-bg, body.season-autumn, body[data-season="autumn"] {
  --season-base: #fff8ee;
  --season-soft: #f6dfbe;
  --season-accent: #dda868;
  --season-deep: #a96b38;
}
body.winter, body.winter-bg, body.season-winter, body[data-season="winter"] {
  --season-base: #f4f9ff;
  --season-soft: #dbeaf7;
  --season-accent: #a7cbe7;
  --season-deep: #608fb7;
}

body.spring, body.spring-bg, body.season-spring, body[data-season="spring"],
body.summer, body.summer-bg, body.season-summer, body[data-season="summer"],
body.autumn, body.autumn-bg, body.season-autumn, body[data-season="autumn"],
body.winter, body.winter-bg, body.season-winter, body[data-season="winter"] {
  background-color: var(--season-base);
  background-image:
    radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--season-accent) 28%, transparent) 0 72px, transparent 73px),
    radial-gradient(circle at 86% 11%, color-mix(in srgb, var(--season-soft) 58%, transparent) 0 105px, transparent 106px),
    radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--season-accent) 18%, transparent) 0 145px, transparent 146px),
    linear-gradient(145deg, var(--season-base), color-mix(in srgb, var(--season-soft) 42%, white));
  background-attachment: fixed;
}

/* color-mix 非対応ブラウザ向けの基本背景 */
@supports not (color: color-mix(in srgb, white, black)) {
  body.spring, body.spring-bg, body.season-spring, body[data-season="spring"] { background: #fff5f7; }
  body.summer, body.summer-bg, body.season-summer, body[data-season="summer"] { background: #f1fcfb; }
  body.autumn, body.autumn-bg, body.season-autumn, body[data-season="autumn"] { background: #fff8ee; }
  body.winter, body.winter-bg, body.season-winter, body[data-season="winter"] { background: #f4f9ff; }
}

/* 夏：淡い三角形 */
body.summer::before, body.summer-bg::before, body.season-summer::before, body[data-season="summer"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(30deg, transparent 38%, rgba(70,183,177,.20) 39% 61%, transparent 62%),
    linear-gradient(150deg, transparent 38%, rgba(255,255,255,.38) 39% 61%, transparent 62%);
  background-size: 150px 130px;
}

/* 秋：淡い四角形 */
body.autumn::before, body.autumn-bg::before, body.season-autumn::before, body[data-season="autumn"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .33;
  background-image:
    linear-gradient(45deg, rgba(205,135,64,.17) 25%, transparent 25% 75%, rgba(205,135,64,.17) 75%),
    linear-gradient(45deg, rgba(255,255,255,.4) 25%, transparent 25% 75%, rgba(255,255,255,.4) 75%);
  background-position: 0 0, 64px 64px;
  background-size: 128px 128px;
}

/* 冬：雪のようなドット */
body.winter::before, body.winter-bg::before, body.season-winter::before, body[data-season="winter"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(134,181,216,.30) 0 2px, transparent 3px);
  background-position: 0 0, 42px 56px;
  background-size: 92px 92px, 76px 76px;
}

/* 季節色を共通パーツへ反映 */
body[class*="season-"] .page-title,
body[class$="-bg"] .page-title,
body[data-season] .page-title { color: var(--season-deep); }

body[class*="season-"] .filter-button.is-active,
body[class*="season-"] .filter-btn.active,
body[class$="-bg"] .filter-button.is-active,
body[class$="-bg"] .filter-btn.active,
body[data-season] .filter-button.is-active,
body[data-season] .filter-btn.active {
  color: #fff;
  background: var(--season-deep);
  border-color: var(--season-deep);
}

@media (max-width: 767px) {
  body.spring, body.spring-bg, body.season-spring, body[data-season="spring"],
  body.summer, body.summer-bg, body.season-summer, body[data-season="summer"],
  body.autumn, body.autumn-bg, body.season-autumn, body[data-season="autumn"],
  body.winter, body.winter-bg, body.season-winter, body[data-season="winter"] {
    background-attachment: scroll;
    background-size: auto, auto, auto, cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}