# design-type-05 — 인터랙션 인벤토리 (출처: cmesrobotics.ai) ★풀사이트 학습

실측 기반 (ScrollTrigger 인벤토리 덤프 + 250px 단위 상태 추적 + 페이지별 hover 전/후 비교).
시그니처: **① See./Think./Move. 캔버스 씬 핀 ② 방사형 그라데이션+파티클 히어로 ③ 흩어진 단어 정렬 헤딩**.
호버 전수는 `hover-inventory.md` 참조.

---

## 1. See./Think./Move. 캔버스 씬 핀 ★시그니처 (메인의 백미)

- **위치**: 메인 `.pinBx` / **트리거**: pin(900→8033, 7100px = 뷰포트 8배), scrub ≈ 즉답(0.000001)
- **구조** (pin-skeleton.json 실측): `.pinBx > .wrap > .txtBx.n1/.n2/.n3`(좌측 텍스트 스택) + **canvas(1440×810) 하나가 시각 전체 담당**
  — 핀 내부에 img 요소 없음. 3D 렌더 장면(카메라 → 포인트클라우드 → 로봇 팔레타이징)을 **canvas 2d에 이미지 시퀀스로 드로잉**
- **텍스트 전환**: 활성 txtBx에 `o` 클래스 토글(실측: n1은 스크롤 500~2500, n2는 3000~4000에서 `o` 보유) → CSS 트랜지션으로 페이드/슬라이드.
  씬당 약 2200~2500px 스크롤 배분, 씬 사이 전환 갭 존재
- **텍스트 구성**: 대형 영문 워드(~105px Bold) + 도트 3개+번호(01/02/03, 퍼플) + 국문 카피 2~3줄
- **재현**: canvas 시퀀스 대신 **이미지 크로스페이드 + 클래스 토글**로 동등 효과. `components/SceneSequencePin.tsx`
- **영상 실측 보강 (2026-07-14)**: 씬1(See.)의 캔버스 배경은 순흑이 아니라 **퍼플/화이트 파티클 클라우드가 부유하는 필드**
  (`video_pin_particle_field.png`) — 시퀀스 도입부가 파티클 → 카메라/장비 렌더로 전이. 재현 시 씬1 배경에 파티클 레이어 고려
- 난이도: 중상

**2026-08-12 사용자 화면 녹화 재실측 (1235 메라민테크 시안 QA) — 텍스트 전환·배경 매체 패턴 정정**:
- **텍스트 전환은 단순 fade-up이 아니라 수직 캐러셀 스왑이다.** 실제 원본 동작: 활성 텍스트가 바뀌는 순간
  이전 텍스트는 **아래로 내려가며 퇴장**, 다음 텍스트는 **위에서 내려와 자리잡는다** (n1→n2 전환 시 n1이 아래로,
  n2가 위에서 진입). 이미지 크로스페이드처럼 텍스트도 "그 자리에서 opacity만" 바뀌는 게 아님.
  재현 시: 각 텍스트 블록을 절대위치로 겹쳐두고, 대기 상태(아직 활성 아님)는 위쪽(중앙 기준 -50% - 120%)에,
  지나간 상태는 아래쪽(-50% + 120%)에 배치 → 활성 전환 시에만 GSAP tween으로 이동시킨다.
  React state로 매 스크롤 프레임마다 다시 그리면 GSAP의 직접 transform 제어와 충돌하므로, 위치는 항상
  gsap.set/fromTo/to로만 갱신하고 JSX style에는 넣지 않을 것.
- **배경 매체는 "정적 이미지/canvas가 아니라 스크롤 진행률에 스크럽되는 살아있는 매체"가 핵심 체감이다.**
  원본은 canvas 2d 포인트클라우드지만, 그 캔버스를 그대로 재현하지 않더라도 최소한 "스크롤에 따라 배경이
  계속 변한다"는 체감은 반드시 유지해야 한다. 정적 이미지 크로스페이드(씬 전환 시에만 opacity 변경)는
  이 체감을 주지 못해 레퍼런스와 다르게 느껴진다는 피드백을 받음.
  → **재현 대안**: 씬마다 짧은(8~10초) 무료 스톡 영상을 배정하고, `ScrollTrigger.onUpdate`에서 해당 씬의
  로컬 진행률(0~1)을 `video.currentTime = localProgress * video.duration`으로 직접 매핑해 스크럽한다
  (자동재생 아님 — muted+paused 상태에서 currentTime만 프레임 단위로 갱신). 이러면 canvas 없이도
  "스크롤에 반응하는 배경"의 체감이 유지된다. 씬 전환 시에는 기존처럼 opacity 크로스페이드.
  적용: `components/SceneSequencePin.tsx` (SequenceScene에 `videoSrc` 필드 추가, `imageSrc`는 대체 poster/모바일 폴백용으로 유지)

**★ 2026-08-13 재현 기본값 갱신 (1298 대청시스템스 2라운드 피드백 — 이후 design-type-05 시안은 이 방식을 기본으로 쓸 것)**:
- **텍스트 전환은 "수직 캐러셀 스왑(yPercent 이동)"이 아니라 마스크 와이프(clip-path)로 구현한다.**
  사용자가 명시적으로 "텍스트가 단순히 내려오는 게 아니라 마스크 형태로 아래로 닫히면서 지워지고, 다시
  마스크로 위로 걷히면서 나오는 인터랙션"을 요청 — 퇴장 `inset(0 0 t% 0)`(커튼이 아래로 내려오며 지움) /
  진입 `inset((1-t)% 0 0 0)`(커튼이 위로 걷히며 드러남)을 쓰면 텍스트 블록 자체는 위치 이동 없이 제자리에
  고정되고, 두 마스크가 항상 정확히 여집합이라 **구조적으로 겹칠 수 없다**.
- 위 22~29번 항목의 "각 텍스트 블록을 절대위치로 겹쳐두고 gsap.set/fromTo/to로 yPercent 갱신" 방식은
  **"활성 인덱스 변경 → 트윈 2개(퇴장/진입) 발사"** 구조라, 빠르게 스크롤하면 이전 트윈이 끝나기 전에
  다음 트윈이 겹쳐 시작되어 두 텍스트가 순간적으로 겹쳐 보이는 버그가 실측됨. 이 문제는 애초에
  "state → effect → 시간 기반 트윈" 경로 자체를 없애고 **ScrollTrigger onUpdate에서 매 프레임 진행률로
  clip-path를 직접 계산**해야 근본적으로 해결된다(레이스 컨디션이 발생할 트윈 경합이 없음).
- 마지막 씬은 넘겨줄 다음 씬이 없으므로 자체 퇴장 트랜지션을 걸지 않아야 한다(`hasNext` 가드 없으면 핀
  구간 끝에서 마지막 텍스트가 허공으로 사라짐).
- **배경 실사 Ken Burns 움직임은 크게(scale 1→1.3대 + 팬 이동) — 미묘한 정도로는 "배경이 움직인다"는
  체감이 안 난다는 피드백.** 씬마다 독립된 루프(딜레이 오프셋)로 돌려 전환 시점과 겹치지 않게 한다.
- 확정 구현: `components/SceneSequencePin.tsx` (design-references 루트, 이 버전을 그대로 복사해 쓸 것)

## 2. 방사형 그라데이션 + 파티클 히어로 ★시그니처 (2026-07-14 라이브 재실측 + 사용자 영상 실측으로 확정)

- **위치**: 메인 s1 / **트리거**: 로드 인트로 + 배경 상시 루프
- **⚠️ 교정 이력**: 초기 학습의 "가로 드리프트 상시 루프"는 오판(인트로 중간 캡처). 사용자 녹화 영상
  (`recordings/user_scroll_hover.mp4`, 2fps 프레임 분석)으로 최종 확정:
- **로드 인트로 타임라인 (영상 실측, 리로드 기준)**:
  1. ~1.0s: 화이트 → 라이트 원판 + 중앙 블루 blob만 (텍스트 없음, 도트 링 형성 시작) — `video_intro_1_blob.png`
  2. 2.0~2.5s: 국문 카피("로봇을 넘어 지능을 더한 자동화로…")가 **초대형(뷰포트 초과) 상태로 우→좌 가로 이동하며 동시에 축소**
     — 가로 이동+스케일다운 결합이 핵심 — `video_intro_2_giant_travel.png`
  3. ~3.0s: 국문이 중앙 작은 서브라인으로 정착
  4. ~3.5s: 2줄 대형 영문 헤드라인("It's More Than Robotics. / We Automate Intelligence.", 72px)이 아래에서 페이드업 — `video_intro_3_headline_rise.png`
  5. ~4.0s: 완료. 이후 헤드라인은 **정적**
- **배경 상시 루프**: 라이트 원판 안에서 블루/퍼플 블러 blob 2~3개 유영(.blurBx n1~n3), 얇은 점선 그리드,
  원판 둘레 화이트 도트 링(밀도 높음), 하단 스크롤 캡슐
- DOM 실측: `.s1 > .puzzleBg(.bg/.gradiant) + .objBx(.blurBx n1·n2 blue/n3 purple, .circle n1·n2, .dotBx) + .wrap(.txtBx h1+h2, .scroll_ico)`
- 마우스 패럴랙스 없음 (mousemove 전후 무변화 실측, canvas_mouse_*.png)
- **재현**: 인트로는 x(우측 오프셋)+scale 동시 수렴 → 정착 후 영문 stagger 페이드업. 배경 blob 유영 + 도트 링 회전. `components/GradientPulseHero.tsx`
- 난이도: 중

**2026-08-12 재현 시 실수 정정 (1235 메라민테크 시안 QA)**: "우→중앙 슬라이드+스케일다운" 처리는 **반드시 짧은 영문
헤드라인(2줄, 원본 기준 "It's More Than Robotics." 류)에만 걸어야 한다.** 처음 재현 시 이 처리를 (훨씬 긴) 국문
서브카피 문장에 걸었더니, `scale: 5.5` 같은 큰 배율에서 텍스트 자체 폭이 뷰포트를 몇 배 초과해 `overflow-hidden`에
잘려 화면 밖으로 잘려나가는 것처럼 보이는 버그가 발생했다 (초기 화면에서 텍스트가 중앙정렬되지 않고 오른쪽으로
잘린 채 멈춰 보임). 국문 서브카피는 원본처럼 **작게, 단순 페이드/슬라이드업으로만** 처리하고, 초대형 슬라이드다운은
영문 헤드라인 쪽에 배정할 것. 또한 오프셋은 `vw` 절대단위 대신 `xPercent`(요소 자신의 폭 기준 상대단위)를 쓰면
텍스트 길이가 바뀌어도 항상 안전하게 중앙 정착한다.
추가로, 원본은 정착 이후 **스크롤에 따라 헤딩+배경 그라데이션 오브젝트가 함께 스케일다운**되며 다음 섹션으로
전환된다(2단계). 로드 인트로만 구현하고 이 스크롤 연동 스케일다운을 빠뜨리기 쉬우므로, 헤딩과 배경 오브젝트를
하나의 wrapper(group)로 묶어 `ScrollTrigger scrub`로 scale/opacity를 함께 낮추는 처리를 반드시 포함할 것.
적용: `components/PhotoGradientHero.tsx`

**★ 2026-08-13 재현 기본값 갱신 (1298 대청시스템스 2라운드 피드백 — 이후 design-type-05 시안은 이 방식을 기본으로 쓸 것)**:
- **인트로 스케일다운은 텍스트에만 걸지 말고, 배경(이미지/blob/도트필드)까지 포함한 그룹 전체에 정중앙
  기준으로 걸 것.** 헤드라인에만 `xPercent 55→0 / scale 2.6→1`을 걸었더니 "정중앙이 아니라 오른쪽에서
  축소가 시작되는 것처럼 보인다"는 피드백을 받음. → `xPercent` 오프셋 완전 제거. 배경+텍스트 전부를
  `transform-origin: 50% 50%`인 그룹 하나로 묶어 그룹 전체가 `scale 1.45→1`로 정착하게 한다.
- **도트 링은 "얇은 원형 링"이 아니라 원본처럼 중심원 바깥으로 넓게 흩뿌려진 스타필드다.** 실측
  스크린샷(`screenshots/main/hero_intro.png` 등) 재확인 결과 반경 밴드(대략 32~150%)에 각도·크기·불투명도가
  전부 변주된 점들이 퍼져 있음 — 균일한 반지름의 얇은 링(기존 `RING_DOTS`)은 원본보다 훨씬 단순하다는
  지적을 받아 `SCATTER_DOTS`(150개, 반경 밴드+각도+크기+불투명도 랜덤)로 교체.
- **스크롤 연동 축소 트윈은 `gsap.to`가 아니라 `gsap.fromTo`로 시작값(scale:1)을 명시할 것.** 인트로
  트윈(1.45→1)과 스크롤 트윈이 같은 요소의 같은 속성(scale)을 서로 다른 시점에 다루면, `to()`만 쓸 경우
  스크롤 트윈이 시작값을 잘못 캐싱해 스크롤을 시작하는 순간 요소가 순간적으로 커지는(1.45로 튀는) 버그가
  실측됨. `fromTo(el, {scale:1}, {scale:0.82,...})`로 시작값을 명시하면 사라진다 — 같은 요소·같은 속성을
  시점이 다른 두 트윈이 다룰 때는 항상 이 패턴을 쓸 것 (design-type-05뿐 아니라 일반 규칙).
- 배경 실사에 슬로우 Ken Burns 줌(`scale 1→1.14`, ~19s yoyo)을 추가하면 정적 사진이어도 "배경이 상시
  살아있다"는 인상을 준다.
- 확정 구현: `components/PhotoGradientHero.tsx`(실사 버전, design-references 루트 — 이 버전을 그대로 복사해
  쓸 것) / CSS 그라데이션판(실사 없을 때)은 `components/GradientPulseHero.tsx`

**★ 2026-08-13 재현 기본값 갱신 2 (1250 코벡 3라운드 피드백 — 위 88번 항목의 "그룹 전체 스케일다운"과
"SCATTER_DOTS" 지침을 아래 내용으로 갱신/대체. 이후 design-type-05 시안은 이 방식을 기본으로 쓸 것)**:
- **배경과 전경(텍스트)의 스크롤 스케일 "방향"을 분리할 것 — 절대 같은 방향으로 함께 축소시키지 말 것.**
  88번 항목에서 "배경+텍스트를 하나의 그룹으로 묶어 함께 scale down"하도록 했었는데, 실제로 스크롤해
  보니 배경 실사(object-cover)가 그룹과 함께 scale 1→0.82로 축소되면서 **섹션보다 작아져 네 모서리에
  검은 여백이 드러나는 버그**가 나왔다. object-cover 이미지는 scale이 1 미만으로 내려가는 순간 컨테이너를
  완전히 못 덮는다는 게 원인. → **배경 전용 wrapper(`bgScaleRef`)를 텍스트 그룹(`groupRef`)과 완전히
  분리하고, 배경은 스크롤에 따라 절대 1 미만으로 내려가지 않게 "확대만"(`scale 1→1.3`) 시킨다.** 텍스트
  그룹은 기존대로 축소(`scale 1→0.82`)하되, 배경엔 절대 같은 축소를 걸지 말 것. 결과적으로 스크롤하면
  "텍스트는 멀어지고 배경은 가까워지는" 대비되는 카메라 워크가 되며, 이 방식은 애초에 모서리 여백이
  구조적으로 발생할 수 없다(배경이 컨테이너보다 작아지는 경우 자체가 없으므로).
  로드 인트로의 `scale 1.45→1` 정착은 두 레이어(bg/fg) 모두에 동일 파라미터로 걸어 시각적으로는 여전히
  "다 같이 정착"하는 것처럼 보이게 유지하고, **스크롤 연동 트윈만** 방향을 분리한다.
- **도트/파티클 장식은 기본값에서 아예 뺄 것.** 88번 항목의 `SCATTER_DOTS`(스타필드 도트 150개)를
  실제로 적용해봤고, 이후 업종 맞춤형으로 "상승하는 증기/기포 파티클"로도 바꿔봤지만(코벡이 진공증발농축
  업종이라 시도) **두 버전 다 "의미 없고 안 멋있다"는 피드백을 받아 완전히 제거하는 것으로 최종 확정**됐다.
  배경 실사 + blob 유영(2개) + 아래 헤드라인 컬러 와이프만으로 충분히 "살아있는" 히어로가 된다. 원본
  (cmesrobotics.ai)에 도트 필드가 있다는 사실 자체는 유효하지만, **재현 시안에서는 기본값으로 넣지
  말고 생략**한다 — 업체 업종에 정말 잘 맞아떨어지는 파티클 모티프가 있다고 판단될 때만 예외적으로 고려하되,
  넣기 전에 반드시 사용자 확인을 받을 것(두 번이나 반려된 이력이 있으므로 임의로 기본 채택하지 말 것).
- **메인 헤드라인에 색상 마스크 와이프 신규 추가.** 로드 인트로에서 헤드라인이 흰색으로 페이드업 정착한
  직후, 그 위에 겹쳐 둔 `accent-soft` 색 사본을 `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)`로
  왼쪽→오른쪽 와이프시켜 "색이 칠해지는" 인상을 준다(줄마다 stagger). 최종 상태는 헤드라인 전체가
  accent 색으로 바뀌어 있는 것 — 별도로 원상복구하지 않는다.
- 확정 구현: `components/PhotoGradientHero.tsx` (design-references 루트, 이 버전을 그대로 복사해 쓸 것)

## 3. 흩어진 단어 정렬 헤딩 ★시그니처

- **위치**: 메인 s4 도입("Solution" 라벨 구간) / **트리거**: scrub 1 (div.cont 실측 8540→9146)
- **움직임**: 섹션 타이틀의 단어들이 **각자 기울고 흩어진 상태로 시작 → 스크롤에 따라 수평 정렬로 수렴**
  (scrub_09350.png: 뒷단어들이 기울어져 낙하 중인 상태 포착). 라이트 배경 전환(s4.bgColor)과 동시 진행
- **재현**: 단어 span 분해 + 단어별 rotate/x/y 랜덤 오프셋 → scrub으로 0 수렴. `components/ScatterAlignHeading.tsx`
- 난이도: 중

## 4. 다크→라이트 배경 전환 (s4.bgColor)

- 핀 종료 후 딥블랙 → 화이트로 **배경색 스크럽 전환** (트리거 s4.bgColor 7223~9480). 콘텐츠 온도가 바뀌는 지점을 색으로 선언

## 4.5. Application 벤토 그리드 — hover 퍼플 채움 (영상 실측 2026-07-14)

- **위치**: 메인 ④ "Empowering Industry with Physical AI." / **트리거**: 스크롤 진입(카드 스태거 페이드) + hover
- **hover 문법 확정**: 정적 캡처에서 "카드 1장 퍼플 그라데이션 채움"으로 기록했던 것은 **hover 상태**였음 —
  호버하면 해당 카드의 산업 이미지가 **퍼플 그라데이션 채움 + 국문 설명 텍스트 노출**로 전환 (`video_bento_hover_purple.png`,
  자동차 제조 카드: "정밀한 조립부터 품질 검사까지 자동차 제조를 혁신합니다.")
- 시안 재현: hover 시 accent 그라데이션 오버레이 페이드인 + 설명 노출 (이미지→채움 전환)

**2026-08-12 레이아웃 정정(사용자 레퍼런스 녹화 재확인, 메라민테크 1235 QA)**: 이전 기록에는 없었지만,
이 벤토는 **균일한 3열 카드 그리드가 아니라 명확한 비대칭(masonry형) 배치**다. 6개 타일 기준 실측:
- 1번 타일(LOGISTICS)이 **2열×2행(가로+세로 모두 큰 피처 타일)**
- 2번 타일(HEAVY MANUFACTURING)이 **1열×2행(세로로 긴 타일)**, 1번 타일 옆에 나란히
- 3번 타일(SECONDARY BATTERY)은 1행 높이(2번과 같은 행 시작이지만 세로로 길지 않음 — 재확인 필요, 최초 캡처 기준으론 2번과 비슷한 높이로 보임)
- 4~5번(AUTOMOBILE/SHOE)은 1열×1행 두 개가 1번 타일 아래 나란히
- 6번(FOOD MANUFACTURING)은 **2열×1행(가로로 넓은 타일)**, 2/3번 아래
- grid-template-areas로 표현하면 대략 `"a a b" "a a b" "c d d" "c e f"`(6개 타일 기준, c는 2번처럼 세로로 긴 타일 하나 더 두는 변형)
- 재현 시 Tailwind `grid-cols-3`만으로는 이 비대칭을 못 만든다. CSS `grid-template-areas` + `nth-child` 매핑을 쓰거나
  각 타일에 명시적 `grid-row: span N` 지정이 필요. 모바일은 1열 스택으로 자연스럽게 폴백.
  적용 예시: `components/BusinessBento.tsx` + `index.css`의 `.bento-grid` (1235 메라민테크 시안)

**2026-08-13 마우스 인터랙션 정밀 재실측 (사용자 신규 화면 녹화, 35초, 2fps 프레임 분석)**:
- **hover 전환에 명확한 트레일링(잔상) 지연이 있다.** 마우스가 카드 A→B→C로 빠르게 이동해도 각 카드의
  퍼플/블루 그라데이션 채움 + 텍스트 노출이 즉시 스위칭되지 않고, 이전 카드의 hover 상태가 살짝 늦게
  꺼지면서 다음 카드와 짧게 겹쳐 보인다 (프레임 실측 기준 카드당 대략 0.3~0.6s 정도의 fade-out/in 트랜지션).
  빠르게 마우스를 훑으면 "한 박자 늦게 따라오는" 채움 효과가 체감된다 — 즉시 토글이 아니라 각 카드가
  독립적으로 opacity 트랜지션을 갖는 구조. 재현 시 hover 상태를 CSS `transition-opacity duration-300~500`
  정도로 카드마다 독립 적용할 것 (그룹 전체를 한 state로 묶어 즉시 스위칭하면 이 체감이 사라짐).
- **그라데이션 채움과 설명 텍스트의 등장 타이밍이 분리되어 있다.** hover 시작 시 그라데이션 오버레이가
  먼저 빠르게 페이드인하고, 설명 텍스트는 그보다 살짝 늦게(스태거) 나타난다. 마우스가 카드를 스쳐 지나가면
  그라데이션만 잠깐 보이고 텍스트는 아예 안 뜨는 경우도 관찰됨 — 텍스트 등장에 최소 체류시간이 있는 구조로 추정.
- **카드별 hover 설명 카피 추가 실측** (기존에 자동차 제조만 기록돼 있었음):
  - 자동차 제조: "정밀한 조립부터 품질 검사까지 자동차 제조를 혁신합니다." (기존 실측과 일치)
  - 중공업 제조: "고온, 고중량 작업의 한계를 넘어 위험한 산업 현장을 안전하게 바꿉니다."
  - 신발 제조: "수작업 중심의 공정에 피지컬 AI를 더해 생산 영역을 확장합니다."
  - 식품 제조: "빠르게 변화하는 식품 트렌드에 즉각 대응하는 생산 라인, 피지컬 AI가 다품종 소량 생산 시대의 유연성을 제공합니다."
  → 카피 패턴: 1문장은 "기존 한계/문제" 프레이밍, 2문장(있는 경우)은 "피지컬 AI가 ~한다" 해결 프레이밍. 재현 시 톤 참고.

## 5. 솔루션 카드 캐러셀 — hover 퍼플 패널 (영상 실측 보강)

- **메인 ⑤ Solution**: 카드는 4장이 아니라 **6장 이상이 가로 캐러셀로 뷰포트를 벗어남** (드래그/스크롤)
- **hover 문법**: 카드 위에 **퍼플 반투명 패널이 나타나며 솔루션명(영문+국문, 예: "Piece Picking 피스피킹") + → 화살표 버튼** 노출
  (`video_solution_hover_panel.png`) — 카드 자체는 영상 썸네일 유지

**2026-08-13 재실측 (신규 화면 녹화)**: 카드에 hover하면 **커서가 포인터(손가락) 아이콘으로 바뀐다** — 클릭 가능
요소임을 명확히 신호. 또한 캐러셀은 **한 방향 스크럽이 아니라 좌우 양방향으로 자유롭게 스크롤/드래그된다** —
사용자가 오른쪽으로 훑어 뒷 카드(Void Fill 등)를 본 뒤 다시 왼쪽으로 되돌려 첫 카드(Palletizing)로 복귀하는
것을 실측 — 트랙패드 가로 스크롤 또는 드래그 스와이프에 그대로 반응하는 일반 가로 스크롤 컨테이너로 재현할 것
(GSAP scrub으로 위치를 강제 고정하는 방식은 이 자유 스크롤 체감과 맞지 않음). hover 트레일링 지연(위 4.5 항목
참조)도 이 캐러셀 카드에 동일하게 나타남.

## 5b. 솔루션 상세 — 가로 카드 캐러셀 + 스텝 핀

- 서브 템플릿 공통 (solution 8종, pins 2 / scrubs 1~2 실측):
  - 특징 카드(01/02/03 번호+미디어+카피)가 **가로로 이어지며 뷰포트를 벗어남** — 스크럽 가로 이동 또는 드래그 스와이프
  - "Solution Steps": 블러 처리된 현장 배경 위 대형 타이틀 + 스텝 라벨(3D VISION, SAFETY SYSTEM…)이 순차 강조되는 핀
  - Process: 라이트 배경 가로 스크롤 카드(컬러 3D 렌더 썸네일 + 퍼플 타이틀 + 리스트)
- 재현 난이도: 중 — StackingBands/가로 스크럽 조합으로 대응

## 5c. Customer Success Story — 고객사 사례 카드 그리드 (신규 실측, 2026-08-12 사용자 레퍼런스 녹화)

이전까지 `pages/main.md`·`interactions.md` 어디에도 이 섹션의 실제 DOM 구조가 없어 재현 시 추정에 의존했다
(1235 메라민테크 REVIEW.md #6-1·#6-2에서 이 부재를 지적함). 사용자가 녹화한 화면 재생 기준 구조를 확정한다.

- **위치**: 메인 ⑥, Solution 카드 로우 바로 다음 / 라이트(화이트) 배경, 다크 섹션(솔루션) 뒤에 옴
- **헤딩**: "Customer Success Story" (영문 대문자 시작, `display-sm` 급) + 국문 서브카피 2줄
- **카드 그리드**: 3열, 첫 카드만 **와이드(거의 2배 폭) + 강조 보더**(블루/퍼플 그라데이션 링, 은은한 발광)로
  시각적 위계를 만듦. 배경에 얇은 점선 그리드 패턴(about-mission의 그리드 패턴과 유사한 어휘 재사용).
  이후 카드 3장은 균등한 3열
- **카드 구성**: 실사 썸네일(고객사 현장 사진, 로봇/설비가 함께 찍힌 사진) + 카드 아래 **고객사 로고/워드마크
  + 컬러 점(brand color bullet) + "고객사명 | 솔루션명" 한 줄 + 2줄 설명**
  (예: "coupang 쿠팡 | 포대 디팔레타이징 솔루션 적용 사례" / "농심엔지니어링 | 환적 솔루션" / "APR | 보이드필 솔루션" / "OLIVE YOUNG | 피스피킹 솔루션")
- **하단 CTA**: "자세히 보기 >>>" 그라데이션 버튼, 카드 그리드 아래 중앙
- **재현 시 창작 주의**: 이 패턴은 **실제 고객사 로고·사례가 있는 업체에만 그대로 적용**한다. 원본 사이트에
  검증 가능한 시공실적/고객 사례가 없는 리드(예: 1235 메라민테크는 게시판에 등록된 사례 0건)는 이 카드
  그리드를 억지로 채우지 말고, `AboutPanel`처럼 검증 가능한 다른 정보(회사개요·조직도 등)로 대체하거나
  섹션 자체를 생략한다 — `_taste-profile.md`의 "가짜 디테일 금지" 원칙 우선.

## 6. 제품 상세 — 카피 슬라이더

- 좌 고정 3D 렌더(그라데이션 보더 패널) + 우측 번호(01…)+타이틀+리스트가 **화살표/도트로 넘어가는 슬라이더** (Swiper)
- 이미지 패널은 유지한 채 텍스트만 교체 — 제품 스펙 나열을 슬라이드로 압축하는 패턴

**★ 2026-08-13 재현 방식 확정 (1298 대청시스템스, 2라운드 피드백 — Swiper를 그대로 쓰지 말 것)**:
- 원본은 드래그/휠로 넘어가지만, 재현 시 Swiper의 **Mousewheel 모듈이 이 프로젝트 Vite 사전번들 환경에서
  스와이퍼 인스턴스에 실제로 등록되지 않는 버그를 실측**했다(`swiper.modules`에 push 자체가 안 되고
  `swiper.params.mousewheel` 키가 아예 생성되지 않음 — `node_modules/swiper/shared/swiper-core.mjs`를
  직접 fetch해 raw 클래스로 같은 파라미터를 넣으면 정상 동작하는 것으로 보아 `swiper/react`와
  `swiper/modules`가 별도 청크로 사전번들되며 깨지는 것으로 추정, 원인 완전 규명은 못함). 컨테이너에
  직접 `onWheel` 핸들러를 달아 `slideNext/slidePrev`를 호출하고 `data-lenis-prevent`로 우회하는 방식도
  시도했으나, 이 조합이 Lenis의 전역 스크롤 루프와 충돌해 사이트 전체 스크롤이 덜렁거리고 다른 핀
  섹션(씬 핀 등)의 sticky까지 풀리는 부작용이 있었다.
  → **Swiper를 아예 쓰지 말고, `SceneSequencePin`과 동일한 GSAP ScrollTrigger pin+scrub + 상호보완
  clip-path 전환**으로 구현한다. 섹션 자체 높이를 늘려(`screensPerItem`) sticky 콘텐츠를 스크롤 진행률로
  전환하면 Lenis/ScrollTrigger 루프를 전혀 건드리지 않아 다른 핀 섹션과 완전히 같은 메커니즘으로 수렴한다.
  전환은 퇴장 `inset(0 0 t% 0)` / 진입 `inset((1-t)% 0 0 0)` 상호보완 마스크(1번 항목과 동일 원리)로,
  마지막 패널은 자체 퇴장 트랜지션을 걸지 않는다.
  확정 구현: `_shared-components/ScrollPinPanels.tsx` — 이 컴포넌트를 그대로 재사용할 것 (제품/솔루션
  카피 슬라이더 전용, props로 items 배열만 넘기면 됨).
- **Swiper를 다른 용도(가로 드래그 캐러셀 등, 예: 인증서 카드)로 쓸 때도 Navigation/Mousewheel 등
  부가 모듈은 등록 실패를 의심하고 `javascript_tool`로 `swiper.modules`/`swiper.params`를 직접 확인할 것.**
  좌우 이동 UI(화살표 버튼)가 필요하면 모듈에 기대지 말고 `swiper.slidePrev()/slideNext()` 코어 API를
  직접 호출하는 커스텀 버튼으로 구현 — 드래그 전용 캐러셀에 좌우 이동 단서가 전혀 없으면 사용자가 뒤쪽
  카드를 놓치기 쉽다는 피드백도 있었으니, 카드가 4개를 넘는 가로 캐러셀에는 화살표 버튼을 기본으로 붙일 것.

## 7. about-mission — 기울어진 미디어 패널 + 고스트 텍스트

- 다크 배경에 미디어 패널이 **원근 기울기(회전)** 로 배치, 배경에 초대형 고스트 워드("Vision" 등 저대비 텍스트) — scrub 6개 실측
- 퍼플 풀블리드 밴드로 섹션 전환

## 8. 리스트/정보형 페이지 (news·ir·story·video·contact)

- 스크럽 0 — **인터랙션을 정보성 페이지에서는 완전히 끔**. 등장 fade 정도만.
- 다크 스토리텔링과 라이트 정보성의 이분법이 이 사이트 UX의 핵심 판단

## 9. 헤더/공통

- 라이트 헤더(화이트 배경) 고정, GNB hover 시 서브메뉴 드롭 (mega 아님, 컬럼별)
- **2026-08-12 정정**: 원본은 페이지 전체가 라이트라 헤더가 항상 라이트 고정이지만, 우리 시안처럼 히어로가
  실사+다크 오버레이인 멀티 톤 구성에서는 헤더를 라이트 고정으로 그대로 가져가면 다크 배경 위에서 GNB
  텍스트가 거의 안 보이는 대비 사고가 난다. 헤더는 **현재 스크롤 위치가 지나는 섹션의 밝기(다크/라이트)에
  따라 텍스트·로고 라벨·CTA 버튼 색을 그 즉시 전환**해야 한다. 구현: 각 섹션 루트에
  `data-header-theme="dark"|"light"`를 달고, 헤더의 스크롤 핸들러에서 헤더 높이 지점(probe)을 지나는
  섹션의 테마를 읽어 상태로 반영(`components/Header.tsx`).
- 우하단 채팅 플로팅 버튼(퍼플 원형) 전 페이지 상주
- 페이지 로드: 각 페이지가 로드 직후 같은 URL로 1회 자체 리로드(구현 특성) — 재현 불필요
- **스크롤 끝 자동 다음 페이지 전환 없음** (실측 확인)
- **2026-08-13 추가 실측**: 푸터 진입 시 우측 상단에 **"맨 위로" 플로팅 버튼**(다크 라운드 사각형, ↑ 아이콘)이
  고정 노출된다. 채팅 버튼과 별개로 푸터 영역 한정 등장(실측: 헤더 CTA 배경밴드 하단 경계에서부터 나타남).
  재현 시 채팅 버튼과 겹치지 않게 반대편(좌측 또는 위쪽) 배치 권장.

## 배경 매체

- canvas 2d 이미지 시퀀스(메인 핀) + mp4 다수(메인 s8 풀스크린, 솔루션 카드) + CSS 파티클
- 시안 대응: 시퀀스는 이미지 크로스페이드, 파티클·그라데이션은 CSS 재현, 영상 슬롯은 업종 스톡/실사

## CSS 모션 토큰

- keyframes: opacity/opacity05/opacity025, rotate, floating20~70(6종), scale50~150(9종) — 파티클 시스템용
- scrub: 메인 핀은 즉답(0.000001), s4 정렬은 scrub 1 — **핀은 즉답, 보조 모션은 관성**의 이원화

## 재현 시 주의 (우리 규칙 접점)

- 핀 재현은 CSS sticky + 높이 확보 (GSAP pin 금지 — 취향 프로파일)
- 8화면 핀은 시안에서 4~5화면으로 압축 권장
- 파티클·그라데이션 남용 금지 원칙과 충돌 주의 — 히어로 1곳에만 허용하고 본문 구간은 무채 유지
- 다크/라이트 이분법(스토리=다크, 정보=라이트)은 멀티페이지 시안의 페이지 배분 기준으로 사용