회로가 밑에서 도는 네온 기판

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 회로가 밑에서 도는 네온 기판

## 언제 쓰는 작업인가
하드웨어·칩·실험실 제품의 첫 화면에 쓴다. 기판 사진이 없어도, 전류가 흐르는 바닥만으로 밤 실험실이 먼저 선다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 브랜드 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- Three.js·Spline 뷰어는 쓰지 않는다. 캔버스 하나와 셰이더 한 장이다

## 이 카드에 필요한 것
- WebGL2 셰이더. 패키지를 설치하지 않는다. 캔버스 한 장에 프래그먼트 셰이더로 그린다.

## 건드릴 범위
첫 화면 전체를 덮는 기판과 방식 세 카드, 마감 CTA, 바닥글까지다. 회로 시뮬레이터나 결제는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
거의 검은 남색 #070A12 위에 시안 글자 #D7F6FF, 강조 #3EE0FF. 히어로는 화면 높이 전체이고, 캔버스가 inset 0 으로 깔린다. 카메라는 높이 1.15 에서 바닥 평면(y=0)을 내려다보고, 시간이 가면 z 로 0.55 씩 전진한다. 격자 칸마다 십자 트레이스가 시안으로 켜지고, 가운데 패드는 따뜻한 점이다. 유리 가장자리는 Fresnel 로만 밝다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #070A12, 글자 #D7F6FF, 보조 #7AA3B4, 시안 #3EE0FF. 제목은 세리프 굵기 400 에 어두운 그림자. 본문 폭은 1180px, 좌우 여백 28px. 히어로 글 위에 위·아래 어두운 그라디언트를 얹어 회로가 글자를 먹지 않게 한다.
2. 캔버스는 히어로에 absolute inset 0. WebGL2 컨텍스트를 { antialias: false, alpha: false } 로 얻는다. 정점 셰이더는 전체 화면 삼각형 하나, 프래그먼트 셰이더가 장면을 전부 그린다.
3. 카메라 원점 ro = vec3(0.0, 1.15, uTime * 0.55), 방향 rd = normalize(vec3(uv.x, uv.y - 0.18, 1.2)). 바닥은 y=0 평면, t = -ro.y / rd.y. 격자 g = p.xz * 1.35, 칸 id 는 floor(g).
4. 트레이스는 min(abs(f.x-0.5), abs(f.y-0.5)) 가 0에 가까울수록 켠다. 전류는 hash(id + floor(uTime*0.6)) 가 0.42 를 넘긴 칸만. 패드는 length(f-0.5) < 0.13. 기판 색 vec3(0.03, 0.07, 0.09), 트레이스 vec3(0.12, 0.85, 1.0), 패드 vec3(1.0, 0.9, 0.55).
5. 안개는 1.0 - exp(-t * 0.12). 유리는 pow(1.0 - max(dot(-rd, vec3(0,1,0)), 0.0), 3.0) 을 시안 0.35 로 더한다. 하늘은 아래 남색에서 위 청록으로, 한쪽에 약한 점광.
6. 캔버스는 CSS 크기의 62% 로 그리고 devicePixelRatio 는 1.5 로 상한한다. IntersectionObserver 로 화면 밖이면 그리기를 건너뛴다. prefers-reduced-motion 이면 첫 프레임만 그린다. 아래 카드는 3열, 트레이스·유리·루프. 900px 아래에서는 1열로 접는다.

## 기본값(필요하면 바꿔라)
- 전진 속도: uTime * 0.55 (바꿀 수 있는 범위: 0.2 ~ 1.2(빠르면 격자가 번진다))
- 카메라 높이: 1.15 (바꿀 수 있는 범위: 0.7 ~ 1.8)
- 전류 밀도: hash 임계 0.42 (바꿀 수 있는 범위: 0.25 ~ 0.6(낮을수록 칸이 많이 켜진다))
- 유리 가장자리: Fresnel 지수 3 · 0.35 (바꿀 수 있는 범위: 지수 2 ~ 5, 세기 0.15 ~ 0.55)

## 하지 말 것
- Three.js 나 Spline 뷰어를 붙이지 않는다. 이 장면은 캔버스 하나와 셰이더 한 장이다.
- 격자를 CSS background-image 로 깔지 않는다. 원근과 안개가 빠지면 기판이 아니라 모눈이 된다.
- 모든 칸을 동시에 켜지 않는다. 전류가 흐르는 칸만 켜져야 회로로 읽힌다.
- 유리 전체를 밝게 칠하지 않는다. 가장자리 Fresnel 만 더한다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.