석고빛 스튜디오

이 프로젝트에 Duchamp 모션 배경 "석고빛 스튜디오"(떠도는 옆빛)를 실시간 셰이더 배경으로 넣어 줘.

## 배경 정보
- 엔진: Shaders(shaders.com) — MIT, 상업적 사용 가능. 패키지 `shaders@4.0.2` (버전 고정)
- WebGPU 로 그린다. 글자·이미지·폰트 없음 — 위에 내 글자를 얹어 쓰는 배경
- 정지 포스터: https://duchamp.app/readymade/backgrounds/shader-plaster-studio.large.webp
- 같은 장면의 영상(9:16 MP4, 반복): https://pub-a4aa81cc9139413c99493d10e0d4398d.r2.dev/backgrounds/shader-plaster-studio/4bea7b823cd0b12742b9494e058309a446aecf43d86472bbcf87d27451609096.mp4

## 넣는 방법
1. `npm i shaders@4.0.2` (pnpm·yarn 이면 그 도구로). 버전을 올리지 않는다.
2. 아래 코드를 `PlasterStudioBackground.tsx` 컴포넌트로 만든다(기존 components 폴더 관례를 따른다). 효과 순서·속성 값은 그대로 둔다. Next.js(App Router)면 파일 맨 위에 "use client".
3. 배경으로 깐다: 감싸는 섹션을 `position: relative; overflow: hidden` 으로 두고, `<Shader>` 에 `style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 0 }}`, 내용은 그 위(zIndex 1)에 둔다. 따로 말하지 않았으면 첫 화면(히어로) 섹션에 깐다.
4. WebGPU 를 못 쓰는 브라우저: `<Shader onUnavailable={...}>` 에서 상태를 바꿔 포스터 이미지(https://duchamp.app/readymade/backgrounds/shader-plaster-studio.large.webp, object-fit: cover)로 대신 보여 준다. 처음 그려지기 전 빈 화면이 보이지 않게 같은 포스터를 CSS 배경으로 깔아 둔다.
5. `prefers-reduced-motion: reduce` 면 셰이더를 띄우지 말고 포스터만 보여 준다.

```tsx
import {
  Shader,
  FilmGrain,
  LightLeak,
  Paper,
  StudioBackground,
} from 'shaders/react'

export default function PlasterStudioBackground() {
  return (
    <Shader>
      <StudioBackground
        ambientIntensity={85}
        ambientSpeed={4}
        backColor="#d9d2c5"
        backIntensity={22}
        backSoftness={85}
        brightness={22}
        center={{
          x: 0.5,
          y: 0.78
        }}
        color="#e7e2d8"
        fillColor="#f1ebe0"
        fillIntensity={12}
        fillSoftness={75}
        keyColor="#fff6e8"
        keyIntensity={55}
        keySoftness={60}
        lightTarget={90}
        seed={11}
        vignette={25}
        wallCurvature={18} />
      <LightLeak
        colorFringe="#c4ae92"
        colorHot="#fffaf0"
        colorMid="#ead8bb"
        flicker={0.08}
        intensity={0.28}
        position={{
          x: 0.92,
          y: 0.3
        }}
        seed={2}
        speed={1.5}
        spread={0.6}
        streaks={0.35} />
      <Paper
        displacement={0.1}
        grainScale={1.2}
        roughness={0.35}
        seed={3} />
      <FilmGrain
        strength={0.12} />
    </Shader>
  )
}
```

## 지켜 줄 것
- 배경 위 글자는 대비를 확인한다(어두운 배경엔 밝은 글자). 필요하면 배경 쪽에 반투명 막을 한 겹 더하되 셰이더 값은 건드리지 않는다.
- 서버 렌더에서 깨지지 않게 셰이더 컴포넌트는 클라이언트에서만 그린다.
- 알아 둘 것: Shaders 는 기본으로 방문의 5% 표본에서 성능 기록(사이트 도메인·브라우저 종류·기기 종류·FPS)을 shaders.com 으로 보낸다. 내가 끄라고 했거나 사이트 개인정보 정책상 외부 전송을 막아야 하면 `<Shader disableTelemetry>` 를 붙인다. 따로 말이 없으면 그대로 두고, 끝난 뒤 보고에 이 사실을 한 줄 알려 준다.
- 끝나면 바뀐 파일 목록과, 실제로 움직이는 배경이 보이는지 확인한 방법(개발 서버 화면 등)을 알려 줘.

출처: Duchamp 모션 배경 https://duchamp.app/readymade/backgrounds/shader-plaster-studio