코발트 실크

이 프로젝트에 Duchamp 모션 배경 "코발트 실크"(빛을 머금은 깊은 파랑)를 실시간 셰이더 배경으로 넣어 줘.

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

## 넣는 방법
1. `npm i shaders@4.0.2` (pnpm·yarn 이면 그 도구로). 버전을 올리지 않는다.
2. 아래 코드를 `CobaltSilkBackground.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-cobalt-silk.large.webp, object-fit: cover)로 대신 보여 준다. 처음 그려지기 전 빈 화면이 보이지 않게 같은 포스터를 CSS 배경으로 깔아 둔다.
5. `prefers-reduced-motion: reduce` 면 셰이더를 띄우지 말고 포스터만 보여 준다.

```tsx
import {
  Shader,
  FilmGrain,
  Flip,
  FlowingGradient,
  LinearGradient,
  RadialGradient,
  Vignette,
} from 'shaders/react'

export default function CobaltSilkBackground() {
  return (
    <Shader>
      <FlowingGradient
        colorA="#0a1260"
        colorB="#1a2fe0"
        colorC="#2b47ff"
        colorD="#0f1c9c"
        seed={69}
        speed={1.6} />
      <Flip
        flipX={true} />
      <LinearGradient
        colorSpace="oklab"
        end={{
          x: 0.5,
          y: 1
        }}
        start={{
          x: 0.5,
          y: 0
        }}
        stops={[{ color: "rgba(5, 11, 60, 0)", position: 0.36 }, { color: "rgba(5, 11, 60, 0.12)", position: 0.44 }, { color: "rgba(5, 11, 60, 0.32)", position: 0.52 }, { color: "rgba(5, 11, 60, 0.5)", position: 0.6 }, { color: "rgba(5, 11, 60, 0.62)", position: 0.68 }, { color: "rgba(5, 11, 60, 0.72)", position: 0.8 }, { color: "rgba(5, 11, 60, 0.8)", position: 1 }]} />
      <RadialGradient
        aspect={1.3}
        blendMode="softLight"
        center={{
          x: 0.5,
          y: -0.05
        }}
        colorSpace="oklab"
        radius={0.9}
        stops={[{ color: "rgba(255, 241, 224, 0.35)", position: 0 }, { color: "rgba(255, 241, 224, 0.1925)", position: 0.45 }, { color: "rgba(255, 241, 224, 0)", position: 1 }]} />
      <Vignette
        center={{
          x: 0.5,
          y: 0.25
        }}
        color="#03061a"
        falloff={0.8}
        intensity={0.5}
        radius={0.3} />
      <FilmGrain
        bias={1}
        strength={0.05} />
    </Shader>
  )
}
```

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

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