설명 요약

1. 고객 정보 입력

   • “이름|이메일”로 Personal Hash (SHA-256) 생성 → 화면에 표시

   • 입력된 추가 데이터 → Data Hash (SHA-256) 생성 → 화면에 표시

   • 현재 UTC ISO → Timestamp 표시

   • 세 문자열(16진) → 다시 SHA-256 → Harbor Hash 생성 → 화면에 표시

2. LumiSignal (컬러 블록)

   • Harbor Hash(64hex)를 6글자씩(=3바이트) 끊어 총 11개의 {r,g,b} 블록 배열 생성

   • renderColorBlocks()가 <div class="color-block"> 11개(30×30px)를 #signalArea에 나란히 렌더링

   • 이로써 **“한눈에 11색 블록”**이 표시됩니다.

3. 2부 LumiSphere (두 개 구체)

   • 첫 6블록 → canvas.width = 6, height = 1 → 6픽셀 스트라이프 → Sphere A 텍스처

   • 나머지 5블록 → canvas.width = 5, height = 1 → 5픽셀 스트라이프 → Sphere B 텍스처

   • initSphere()가 두 구체를 초기화(Three.js 씬/카메라/조명/구체 세팅)

   • updateSphereWithBlocks()가 각각의 블록 배열을 텍스처로 만들어 구체에 입힘

   • 결과: 두 구체를 나란히 보면 11개 블록 전체가 빠짐없이 시각화됩니다.