/* bgdeco.css — (v4.9.8) 배경 장식(js/bgdeco.js). 화면 뒤에 고정된 그림 한 장 — 카드 · 시트보다 항상 아래(z-index -1, html 에 배경이 없어 body 색이 캔버스로 올라가므로 그 위에 그려진다).
   색 · 투명도 토큰: 어둡게 = :root, 밝게 = [data-theme="light"] (theme.css 와 같은 규칙). 투명도를 낮춰 두 테마의 바탕색이 그대로 읽히게 한다. */

:root {
  --bgd-pink: #ff7788;
  --bgd-blue: #2288dd;
  --bgd-tone: 0.16;     /* 바탕 그라데이션 톤 진하기(맨 아래 파랑은 1.25배) */
  --bgd-shape: 0.7;     /* 도형 · 낙서 선 */
}
:root[data-theme="light"] {
  --bgd-tone: 0.13;
  --bgd-shape: 0.75;
}

#bgdeco {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#bgdeco svg { display: block; width: 100%; height: 100%; }

#bgdeco .bgd-pink { stop-color: var(--bgd-pink); }
#bgdeco .bgd-blue { stop-color: var(--bgd-blue); }
#bgdeco linearGradient#bgd-tone .bgd-pink,
#bgdeco linearGradient#bgd-tone .bgd-blue { stop-opacity: var(--bgd-tone); }
#bgdeco linearGradient#bgd-tone .bgd-blue { stop-opacity: calc(var(--bgd-tone) * 1.25); }
#bgdeco .bgd-shape { opacity: var(--bgd-shape); }

/* 평소: 장식마다 방향 · 거리 · 주기가 달라 서로 어긋나게 느리게 떠다닌다(주기 9~16초) */
@keyframes bgd-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--dx), var(--dy)); }
}
#bgdeco .bgd-fl { animation: bgd-float var(--dur) ease-in-out var(--delay) infinite; }

@media (prefers-reduced-motion: reduce) {
  #bgdeco .bgd-fl { animation: none; }
}