/* static/css/backdrop.css — 전 페이지 공통 배경 (단 하나의 코드가 모든 페이지에 로드된다)
 *
 * base.html이 partials/backdrop.html 하나를 include하고 이 파일 하나를 링크한다. 페이지가
 * 늘어나도 배경 코드는 여기서만 바뀐다.
 *
 * 재료는 여전히 종이와 잉크다. 다만 잉크는 고정된 무늬가 아니라 아주 느리게 소용돌이치며
 * 흐른다(auroraCanvas.js) — 뷰포트에 고정돼 콘텐츠가 그 위를 스크롤해 지나간다. 원형
 * 글로우(radial glow)·떠다니는 색 덩어리·격자·사선 무늬는 두지 않는다.
 *  1) 종이 농도  — 위가 짙고 아래로 갈수록 옅어지는 세로 방향 한 겹. 헤더·히어로가 앉는
 *                 위쪽에 무게를 주고, 캔버스가 실패해도 이 층만으로 배경이 완성된다.
 *  2) 잉크 흐름  — WebGL 캔버스 한 장. 브랜드 잉크색(--accent 계열) 두세 톤이 도메인
 *                 워핑한 fbm으로 번지듯 흐른다. prefers-reduced-motion·모바일·WebGL
 *                 미지원이면 그리지 않고 1)만 남는다(auroraCanvas.js 자체 판단).
 *  3) 종이 결    — feTurbulence 한 겹(3.5%). 캔버스보다 나중에 그려져 흐르는 잉크 위에도
 *                 결이 그대로 얹힌다. data URI라 요청이 늘지 않는다.
 * 사이트 전체에서 움직이는 시각 요소는 이 캔버스 하나뿐이다(화면에 하나로 제한). */

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper-mid);
  background-image:
    linear-gradient(180deg,
      rgba(31, 63, 107, 0.055) 0%,
      rgba(31, 63, 107, 0.022) 26%,
      rgba(31, 63, 107, 0) 52%),
    linear-gradient(180deg,
      var(--paper-top) 0%,
      var(--paper-mid) 46%,
      var(--paper-bottom) 100%);
}

.site-backdrop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 종이 결 — multiply로 얹어야 밝은 면에서는 거의 안 보이고 짙은 면에서만 결이 드러난다.
   150×150 타일을 반복해 화면 크기와 무관하게 밀도가 일정하다. ::after는 항상 형제·자식
   보다 나중에 그려지므로 캔버스 위에 자연스럽게 겹친다. */
.site-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='0.1'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* 저사양·저해상도 화면에서는 결 타일 반복이 얼룩으로 보일 수 있어 밀도를 낮춘다. */
@media (max-width: 639px) {
  .site-backdrop::after { opacity: 0.22; }
}