Add caliverse.io web benchmark output and meeting memory update

- Add /benchmark scan results for www.caliverse.io (tokens, screenshots, analysis) - Add 2026-05-19 meeting episode record - Update Topics_meeting long-term memory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 13:26:51 +09:00
parent 5d34b7d237
commit 2a4a5046b6
8 changed files with 1828 additions and 1 deletions
@@ -0,0 +1,284 @@
+# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세
+
+> **레퍼런스 URL**: https://www.caliverse.io
+> **분석 일자**: 2026-05-20
+> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세
+> **스캔된 페이지**: 1개 (crawlDepth: 3)
+
+## 한 줄 요약 (One-line Impression)
+무채색(Neutral) 중심의 정적인 컬러 팔레트와 강렬한 포인트 컬러(`rgb(26, 229, 172)`)를 사용하여 미래지향적이고 몰입감 있는 메타버스 세계관을 시각적으로 구현한 사이트입니다.
+
+## 1. 시각적 정체성 (Visual Identity)
+### 1-1. 컬러 팔레트 (Color Palette)
+*   **Primary Neutral**: `rgb(32, 32, 32)` (가장 높은 비중의 핵심 컬러)
+*   **Accent Color**: `rgb(26, 229, 17 ලෙස)` (전체 구성 중 6%를 차지하는 포인트 컬러)
+*   **Secondary Neutral**: `rgb(255, 255, 255)`
+*   **Composition**: 무채색이 94%로 매우 우세하며, 액센트 컬러는 6%로 제한되어 있어 시각적 집중도를 높임.
+*   **Background/Link**: 배경은 `rgba(0, 0, 0, 0)`이며, 링크 컬러는 `rgba(255, 255, 255, 0.4)`를 사용함.
+
+### 1-2. 타이포그래피 (Typography)
+*   **Font Family**: `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` 기반의 산세리프 체계.
+*   **Body Text**: 기본 크기 `16px`, `fontWeight: 400`.
+*   **Button Text**: `24px`, `fontWeight: 400`, Font Family는 `Arial`로 지정됨.
+*   **Font Weights**: `400`(가장 많음), `500`, `600`, `300`, `700` 등 다양한 두께를 사용함.
+*   **Font Sizes**: `16px`가 가장 빈번하게 사용되며, `24px`, `14px`, `13px`, `12px` 순으로 구성됨.
+
+## 2. 레이아웃 및 여백 (Layout & Whitespace)
+### 2-1. 그리드 시스템 (Grid System)
+*   **Viewport**: `1440px` x `900px` 기준.
+*   **Container**: `header`와 `main`은 `width: 1440px`, `maxWidth: none`으로 설정되어 있으며, `padding: 0px 30px`를 통해 내부 여백을 확보함.
+
+### 2래오 2-2. 섹션 간 여백 (Section Spacing)
+*   스캔 데이터 내 명시적인 섹션 간 마진 값은 "스캔 데이터 부족".
+
+### 2-3. 카드/카드 그리드 (Card Spacing)
+*   **Card Container**: `MuiList-root` 클래스를 사용하며, 자식 요소 간 `horizontalGapPx: 25px`의 간격을 유지함.
+
+### 2-4. Border Radius / 컨테이너
+*   **Scale**: `4px`, `8px`, `20px`, `100px`(Pill형) 등 다양한 반경이 사용됨.
+*   **Video/Media**: 비디오 요소에는 `20px`의 큰 `borderRadius`를 적용하여 부드러운 느낌을 줌.
+
+## 3. 마이크로 인터랙션 (Micro Interaction)
+### 3-1. Hover / Focus 효과
+*   **Button Hover**: `.mui-style-1s7qa4e`와 같은 요소에 호버 시 `background: rgba(32, 32, 32, 0.1)` 및 `color: rgb(32, 32, 32)`로 변화함.
+*   **Button (Log-in)**: `rgb(26, 229, 172)` 보더와 `rgb(0, 0, 0)` 배경을 가진 특수 버튼 존재.
+*   **Input Focus**: `outline: none` 및 `boxShadow: none` 처리를 통해 기본 포커스 링을 제거함.
+
+### 3-2. Transition 패턴
+*   **Distribution**: `0.2s`, `ease-in-out` 및 `ease` 속성의 `all` 프로퍼티에 대한 트랜지션이 적용됨 (count: 3, 1).
+
+### 3-3. 레이어링 (z-index / position)
+*   **Fixed Header**: `header`는 `position: fixed`, `zIndex: 1000`으로 설정되어 상단에 고정됨.
+*   **Layering Structure**: `z-index: 1000` (Header/Nav), `z-index: 3100` (Static Content) 등 계층 구조가 명확함.
+
+## 4. 라이팅 톤앤매너 (Microcopy & Voice)
+### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피
+*   **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등의 짧고 명확한 명령형/명사형 키워드 사용.
+*   **Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 신비롭고 탐험적인 톤의 영문 설명 제공.
+
+### 4-2. Placeholder 및 보이스 신호
+*   **Voice Signals**: `usesPolite: false`, `usesEmoji: false`로 확인되며, 감정적이거나 과장된 표현보다는 정보 전달 위주의 담백한 어조를 유지함.
+*   **Body Sample**: "About" (스캔 데이터 기준).
+
+---
+
+## 5. 정보 구조 / 사이트 맵 (Information Architecture)
+
+### 5-1. 사이트 트리 다이어그램 (Page Tree)
+```text
+/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)
+```
+
+### 5-2. 페이지 목록 (Flat View)
+- `https://www.caliverse.io/` (메인 랜딩 페이지)
+
+### 5-3. 페이지별 구성 요약 (Page Composition)
+| 페이지 URL | 주요 콘텐츠 역할 (Role) | 구성 요소 요약 |
+| :--- | :--- | :--- |
+| `/` | Landing Page | Header(Navigation), Main(Hero/Feature), Footer(Company Info) |
+
+### 5-4. IA 특징 정리
+- **단일 페이지 구조**: `totalPages: 1`로 명시된 바와 같이, 별도의 하위 페이지 없이 하나의 도메인 내에서 모든 정보를 제공하는 싱글 페이지 형태임.
+- **내비게이션 구조**: `nav` 태그를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가짐.
+*참고: 상세 페이지나 하위 카테고리 구조에 대한 데이터는 스캔 데이터 부족으로 확인 불가함.*
+
+### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)
+| 컴포넌트 타입 | 명칭/텍스트 | 주요 속성 및 스타일 (Size, Radius, Border, BG) |
+| :--- | :--- | :--- |
+| **Button** | Shop | `width: 63px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` |
+| **Button** | Workshop | `width: 99px`, `height: 24px`, `border-radius: 4px`, `bg: rgba(0,0,0,0)`, `font-size: 24px` |
+| **Button** | Log-in | `width: 125px`, `padding: 8px 25px`, `border-radius: 100px`, `border: 1px solid rgb(26,229,172)`, `bg: rgb(0,0,0)` |
+| **Button** | KR (Lang) | `width: 70px`, `height: 24px`, `border-radius: 8px`, `border: 0px none rgb(32,32,32)`, `bg: transparent` |
+| **List Item** | Nav Link | `font-size: 16px`, `font-weight: 400`, `bg: transparent` (About, Caliverse, Guide 등) |
+| **List Item** | Info Text | `font-size: 16px`, `font-weight: 4* (AboutCaliverseCaliumGuideCompanyContact)*` |
+
+### 5-6. 미디어 처리 (Media Treatment)
+- **이미지(Img)**: 로고 및 기타 UI 요소로 사용됨. (최대 `width: 207px`, `height: 19px`, `object-fit: contain`)
+- **비디오(Video)**: 메인 섹션의 배경 또는 기능적 요소로 활용됨. (`width: 1100px`, `height: 280px`, `border-radius: 20px`, `object-fit: cover`)
+
+---
+
+## 6. 준비해야 할 리소스 (Resources You Need to Prepare)
+
+### 6-1. 페이지별 이미지/비디오 수
+- **이미지(Images)**: 총 19개 (로고 및 UI 요소 포함)
+- **비디오(Videos)**: 총 4개
+
+### 6-2. 카피라이팅 분량
+- **Headline**: "NEW EARTH의 발견, 칼리버스"
+- **Body/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외)
+- **Footer Info**: 주식회사 정보, 주소, 연락처 등 (상세 텍스트 존재)
+
+### 6-3. 폼/입력 필드 목록
+- 스캔 데이터에 명시된 `formField` count는 0으로, 별도의 입력 폼은 확인되지 않음 (스캔 데이터 부족).
+
+---
+
+## 7. 디자인 토큰 (Design Tokens)
+
+### Color
+| Type | Value | Usage |
+| :--- | :--- | :--- |
+| Primary | `rgb(26, 229, 172)` | Accent Color (Top Accents) |
+| Neutral | `rgb(32, 32, 32)` | Primary Text / Dark Gray |
+| Neutral | `rgb(255, 255, 255)` | White / Secondary Text |
+| Transparent | `rgba(0, 0, 0, 0)` | Background / Button BG |
+| Link/Alpha | `rgba(255, 255, 255, 0.4)` | Link Color / Low Opacity Text |
+
+### Typography
+| Property | Value |
+| :--- | :--- |
+| Primary Font | `Pretendard, "Noto Sans KR", "Noto Sans JP", sans-name` |
+| Body Size | `16px` (Font Weight: `400`) |
+| Button Size | `24px` (Font Weight: `400`, Family: `Arial`) |
+| Font Sizes | `16px, 15px, 14px, 13px, 24px, 12px` |
+| Font Weights | `400, 500, 600, 300, 700` |
+
+### Layout & Spacing
+| Property | Value |
+| :--- | :--- |
+| Viewport | `1440px x 900px` |
+| Max Width | `none` (Body), `1440px` (Header/Main/Footer) |
+| Header Padding | `0px 30px` |
+| Footer Padding | `20px 0px` |
+| Border Radius | `4px, 8px, 20px, 100px` |
+
+### Motion
+| Property | Value |
+| :--- | :--- |
+| Transition | `all (duration: 0.2s, easing: ease-in-out)` |
+
+---
+
+## 8. 페이지 템플릿 맵 (Page Template Map)
+
+| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 |
+|---|---|---|---|---|
+| T1: Landing Page | `/` | Header → Nav → Main(Hero/Feature) → Footer | (없음 / 단독 페이지) | Header, Nav, Button, Footer |
+
+**[Template Specification]**
+- **T1 (Landing Page)**: `header` 태그는 `position: fixed`, `z-index: 1000`으로 설정하여 상단 고정. `main` 섹션 내에는 비디오 요소(`video`)를 활용한 배경 구현이 필요하며, `border-radius: 20px`가 적용된 카드 형태의 레이아웃을 구성함. 모든 버튼은 `MuiButton` 기반의 클래스를 따름.
+
+---
+
+## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
+
+> **⚠️ 이 단계의 미션 (절대 이탈 금지)**
+> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다.
+> - 다른 서비스로 재해석하거나 확장하지 않으며, 원본 그대로를 복원하는 것을 유일한 목적으로 한다.
+> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 수치를 정확히 인용한다.
+
+### 9-1. 디자인 토큰 정의 (원본 값 그대로)
+
+```css
+/* CSS Variables Definition */
+:root {
+  /* Color Palette */
+  --color-primary: rgb(32, 32, 32);
+  --color-text-main: rgb(32, 32, 32);
+  --color-text-secondary: rgba(255, 255, 255, 0.4);
+  --color-accent: rgb(26, 229, 172);
+  --color-bg-neutral: rgb(32, 32, 32); /* Based on dominant count */
+  --color-white: rgb(255, 255, 255);
+  --color-black: rgb(0, 0, 0);
+  --color-transparent: rgba(0, 0, 0, 0);
+  --color-subtle-white: rgba(255, 255, 255, 0.6);
+
+  /* Typography */
+  --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
+  --font-body: "Noto Sans KR", -apple-term-system, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-size-base: 16px;
+  --font-size-button-text: 24px; /* From button.fontSize */
+
+  /* Layout & Spacing */
+  --container-max-width: 1440px;
+  --border-radius-pill: 100px;
+  --border-radius-small: 4px;
+  --border-radius-medium: 8px;
+  --border-radius-large: 20px;
+
+  /* Transitions */
+  --transition-standard: all 0.2s ease-in-out;
+}
+```
+
+### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)
+
+| 컴포넌트 타입 | Props / Style Specification |
+| :--- | :--- |
+| **Button (Primary/Log-in)** | `padding: 8px 25px;`, `border-radius: 100px;`, `background: rgb(0, 0, 0);`, `border: 0px none rgb(26, 229, 172);`, `color: rgb(32, 32, 32);`, `font-weight: 600;`, `font-size: 14px;` |
+| **Button (Ghost/Shop)** | `width: 63px;`, `height: 24px;`, `display: flex;`, `padding: 0px;`, `background: rgba(0, 0, 0, 0);`, `border: 0px none rgb(32, 32, 32);`, `font-size: 24px;` |
+| **Button (KR/Language)** | `width: 70px;`, `height: 24px;`, `padding: 0px;`, `border-radius: 8px;`, `background: rgba(0, 0, 0, 0);`, `font-size: 14px;`, `font-weight: 600;` |
+| **Navigation Item** | `font-size: 16px;`, `font-weight: 400;`, `color: rgb(32, 32, 32);` (Based on card/list items) |
+| **Video Card (Feature)** | `width: 1100px;`, `height: 280px;`, `border-radius: 20px;`, `object-fit: cover;` |
+
+### 9-3. 페이지별 레이아웃 마크업 가이드
+
+**Template: Main Landing Page (Single Page Application Structure)**
+```jsx
+<HTML>
+  <body>
+    {/* Header Section */}
+    <header className="e1rkdor11 MuiBox-root mui-style-1c8koze" style={{ position: 'fixed', top: 0, zIndex: 1000, width: 1440, padding: '0 30px', display: 'flex' }}>
+      <nav className="MuiBox-root mui-style-1ypl5o3">
+        {/* Nav Links: About, Metaverse, Music Performance, etc. */}
+      </nav>
+      <div className="Button-Group">
+        <button className="mui-style-17i3o03">Shop</button>
+        <button className="mui-style-17i3*">Workshop</button>
+        <button className="mui-style-login">Log-in</button>
+      </div>
+    </header>
+
+    <main className="e1rkdor10 MuiBox-root mui-style-17l764i" style={{ display: 'flex', width: 1440 }}>
+      {/* Hero Section */}
+      <section className="hero">
+        <h1>JUMP IN CALIVERSE</h1>
+        <p>Experience the Ultimate FPS Battle</p>
+        {/* Video/Media Content */}
+      </section>
+
+      {/* Feature List/Cards */}
+      <section className="features">
+        {/* Card items with MuiList-root structure */}
+      </section>
+    </main>
+
+    <footer className="MuiBox-root mui-style-1d7wxpy" style={{ padding: '20px 0px' }}>
+      <p>상호: 주식회사 칼리버스 | ... (Footer Text)</p>
+    </footer>
+  </body>
+</HTML>
+```
+
+### 9-4. 인터랙션 재현 명세
+
+*   **Button Hover Effect**: `.mui-style-1s7qa4e:hover { background: rgba(32, 32, 32, 0.1); color: rgb(32, 32, 32); }`
+*   **Global Transition**: `all 0.2s ease-in-out` 적용 (스캔 데이터의 transitionDistribution 근거)
+*   **Input Autofill Fix**: `input:-webkit-autofilter... { transition: background-color 9999s ease-out; box-shadow: white 0px 0px 0px 1000px inset; }` 적용
+
+### 9-5. 콘텐츠 및 자산 준비 목록
+
+*   **[Assets] 이미지/아이콘**:
+    *   로고 및 브랜드 이미지 (스캔 데이터 기준 `img` 태그 총 19개 항목 확인)
+    *   아이콘 라이브러리: Inline SVG 사용 (`hasInlineSvg: true`)
+*   **[Assets] 비디오**:
+    *   메인 피처용 비디오 4개 세트 (스캔 데이터 `videoCount: 4` 근거, 각 `1100x280` 규격)
+*   **[Copywriting]**:
+    *   헤드라인: "JUMP IN CALIVERSE", "Experience the Ultimate FPS Battle"
+    *   푸터 정보: 주식회사 칼리버스 사업자 정보 및 연락처 전문
+
+### 9-6. 개발 티켓 (원본 복원 기준)
+
+*   **[FE]** 디자인 토큰(CSS Variables) 설정 및 테마 구축
+*   **[FE]** Material UI(MUI) 기반 레이아웃 구조(`MuiBox`, `MuiList`) 구현
+*   **[FE]** Header/Navigation 고정(Fixed) 및 반응형 미디어 쿼리 적용 (`max-width: 1280px` 등)
+*   **[Asset]** 비디오 소스 및 이미지 에셋 확보 (총 19개 이미지, 4개 비디오)
+*   **[FE]** 버튼 컴포넌트별 상태(Hover, Active) 인터랙션 구현
+
+## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
+
+*   **Dynamic Data**: `AboutCaliverseCaliumGuideCompanyContact` 등 텍스트가 하나로 뭉쳐 있는 부분의 개별 분리 구조.
+*   **Backend/CMS**: 각 섹션(Hero, Feature, Footer)에 들어가는 비디오 및 이미지의 동적 로딩 구조.
+*   **Font License**: `Pretendard` 및 `Noto Sans KR` 등의 웹폰트 호출 경로 및 라이선스 설정.
+*   **Navigation Logic**: 드롭다운 메뉴(`ul` 태그 `top: 100%`)의 상세 동작 트리거.
@@ -0,0 +1,290 @@
+# 웹벤치마크 www.caliverse.io 2026-05-20
+
+- **원본 URL**: www.caliverse.io
+- **스캔 시각**: 2026-05-20T04:11:24.529Z
+- **크롤 옵션**: depth 3 · 최대 8페이지
+- **생성**: Astra /benchmark · Datacollect web-benchmark
+
+# NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE) 레퍼런스 사이트 재구축 명세
+
+> **레퍼런스 URL**: https://www.caliverse.io
+> **분석 일자**: 2026-05-20
+> **분석 관점**: 4-렌즈 (Visual / Layout / Interaction / Voice) + IA 및 페이지 템플릿 + 재구축 명세
+> **스캔된 페이지**: 1개 (crawlDepth: 3)
+
+## 한 줄 요약 (One-line Impression)
+무채색(Neutral) 중심의 강렬한 포인트 컬러(`rgb(26, 229, 172)`)를 사용하여 미래지향적이고 몰입감 있는 메타버스 세계관을 시각적으로 구현한 사이트입니다.
+
+## 1. 시각적 정체성 (Visual Identity)
+### 1-1. 컬러 팔레트 (Color Palette)
+전체 구성 중 무채색이 94%로 매우 압도적인 비중을 차지하며, 포인트 컬러(Accent)는 6%로 제한되어 있어 극도의 대비를 보여줍니다.
+*   **Primary Neutral**: `rgb(32, 3‌‌32)` (가장 높은 빈도: 142회)
+*   **Primary Accent**: `rgb(26, 229, 172)` (포인트 컬러로 사용됨)
+*   **Secondary Neutral**: `rgb(255, 255, 255)` (48회)
+*   **Link/Disabled State**: `rgba(255, 255, 255, 0.4)` (6회)
+*   **Background**: `rgba(0, 0, 0, 0)` (스캔 데이터상 투명값으로 명시됨)
+
+### 1-2. 타이포그래피 (Typography)
+글꼴은 가독성이 높은 산세리프 계열을 사용하며, 시스템 폰트 스택을 정교하게 구성하고 있습니다.
+*   **Primary Font Stack**: `Pretendard`, `"Noto Sans KR"`, `"Noto Absent JP"`, `sans-serif`
+*   **Body Text**: `16px` 크기, `400` 웨이트, `normal` 라인 높이 적용
+*   **Button Text (UI Component)**: 
+    *   `24px` 크기의 대형 버튼 요소 존재 (`fontFamily: "Arial"`)
+    *   일반 텍스트는 `14px` 및 `16px` 위주로 구성됨
+*   **Font Weights**: `400`(166회), `500`(35회), `600`(18회) 순으로 사용되어 정보의 계층을 분리함
+
+## 2. 레이아웃 및 여백 (Layout & Whitespace)
+### 2-1. 그리드 시스템 (Grid System)
+*   **Viewport**: `1440px` x `900px` 기준 설계
+*   **Container**: `header`와 `main`은 `width: 1440px`이며, `maxWidth: none`으로 설정되어 화면 전체를 활용함
+*   **Header Padding**: `0px 30px`의 좌우 여백을 가짐
+
+### 2-2. 섹션 간 여백 (Section Spacing)
+*   스캔 데이터 내 명시적인 섹션 간 간격 수치는 "스캔 데이터 부족"으로 확인됨
+
+### 2	3. 카드/카드 그리드 (Card Spacing)
+*   **Card Layout**: `MuiList-root` 클래스를 통해 구현된 리스트 형태의 구조를 가짐
+*   **Gap**: 요소 간 `horizontalGapPx: 25px`의 간격이 적용됨
+
+### 2-4. Border Radius / 컨테이너
+*   **Button/UI**: `4px`(버튼), `8px`(KR 선택기), `100px`(Log-in 버튼) 등 목적에 따라 상이함
+*   **Media**: 비디오 요소(`video`)에는 `20px`의 큰 곡률 적용
+
+## 3. 마이크로 인터랙션 (Micro Interaction)
+### 3-1. Hover / Focus 효과
+*   **Button Hover**: `.mui-style-1s7qa4e:hover` 시 배경색이 `rgba(32, 32, 32, 0.1)`로 변화하며 색상 대비를 제공함
+*   **Link/Input**: `input:focus` 시 `outline: none` 처리가 되어 있으며, 특정 요소에 대해 `box-shadow`를 통한 피드백을 설계함
+
+### 3-2. Transition 패턴
+*   모든 속성(`all`)에 대해 `0.2s` 동안 `ease-in-out` 및 `ease` 가속도가 적용되어 부드러운 움직임을 구현함 (`duration: 0.2s`, `count: 3/1`)
+
+### 3-3. 레이어링 (z-index / position)
+*   **Fixed Header**: `header` 요소는 `position: fixed`, `z-index: 1000`으로 설정되어 스크롤 시 상단에 고정됨
+*   **Overlay/Layer**: `MuiBox-root mui-style-5iw4aw`와 같이 `z-index: 1000`을 가진 레이어가 존재함
+
+## 4. 라이팅 톤앤매너 (Microcopy & Voice)
+### 4-1. 헤드라인 / 서브헤드라인 / CTA 카피
+*   **Headline/Description**: "In our exploration, we’ve discovered a strange new world..."와 같이 미지의 세계를 탐험하는 듯한 서사적 문체를 사용함
+*   **CTA Samples**: `Shop`, `Workshop`, `Log-in`, `KR` 등 명확하고 짧은 명령형/명사형 단어를 사용하여 행동 유도력을 높임
+
+### 4-2. Placeholder 및 보이스 신호
+*   **Voice Signal**: 감정적 동요가 없는 정중한(Polite) 톤을 유지하며, 이모지나 느낌표 등의 과도한 사용은 배제됨 (`usesPolite: false`, `usesEmoji: false`)
+*   **Body Sample**: "About"과 같은 간결한 단어를 통해 정보의 성격을 정의함
+
+---
+
+## 5. 정보 구조 / 사이트 맵 (Information Architecture)
+
+### 5-1. 사이트 트리 다이어그램 (Page Tree)
+```text
+/ (other · list-card · imgs:19 · CTA:4) NEW EARTH의 발견, 칼리버스 - 칼리버스 (CALIVERSE)
+```
+
+### 5-2. 페이지 목록 (Flat View)
+*   `https://www.caliverse.io/` (메인 랜딩 페이지)
+
+### 5-3. 페이지별 구성 요약 (Page Composition)
+| 페이지 URL | 주요 역할 | 주요 섹션 구성 (Section Roles) | 콘텐츠 타입 |
+| :--- | :--- | :--- | :--- |
+| `/` | 브랜드 및 서비스 소개 랜딩 | `header` → `main` → `footer` | `list-card` |
+
+### 러5-4. IA 특징 정리
+*   **단일 페이지 구조**: 전체 사이트가 하나의 페이지(`totalPages: 1`)로 구성된 싱글 페이지 애플리케이션(SPA) 형태의 랜딩 페이지입니다.
+*   **내비게이션 중심**: `header`와 `nav`를 통해 `About`, `Caliverse`, `Guide`, `Company`, `Contact` 등 서비스의 주요 섹션으로 연결되는 구조를 가집니다.
+*   **콘텐츠 집중도**: 텍规律적인 페이지 이동보다는 스크롤을 통한 정보 전달(Depth 3~4)에 집중되어 있습니다.
+
+### 5-5. 재구축용 컴포넌트 명세 (Component Reconstruction Spec)
+| 컴포넌트 ID | 타입 | 속성 및 스타일 명세 (Attributes & Styles) | 비고 |
+| :--- | :--- | :--- | :--- |
+| `btn-shop` | Button | `width: 63px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 |
+| `btn-workshop` | Button | `width: 99px`, `height: 24px`, `border-radius: 4px`, `font-size: 24px` | Icon/Text형 |
+| `btn-login` | Button | `width: 125px`, `height: 42px`, `padding: 8px 25px`, `border-radius: 100px`, `bg: rgb(0,0,0)`, `color: rgb(26,229,172)` | Primary CTA |
+| `btn-lang` | Button | `width: 70px`, `height: 24px`, `border-radius: 8px`, `font-size: 14px`, `font-weight: 600` | Language Switcher |
+| `nav-item` | List Item | `font-size: 16px`, `font-weight: 400`, `background: rgba(0,0,0,0)` | Navigation Link |
+| `card-link` | List Item | `font-size: 16px`, `text: "AboutCaliverse..."`, `padding: 0px` | Footer/Menu Link |
+
+### 5-6. 미디어 처리 (Media Treatment)
+*   **이미지(Img)**: 총 19개 요소 중 스캔 데이터상 확인된 규격화된 이미지 포함 (`width: 207px, height: 19px` 등). `object-fit: contain` 적용 필요.
+*   **비디오(Video)**: 4개의 비디오 소스 존재. `width: 1100px`, `height: 280px`, `aspectRatio: 3.s93`, `border-radius: 20px` 규격 준수 필요.
+
+---
+
+## 6. 준비해야 할 리소스 (Resources You Need to Prepare)
+
+### 6-1. 페이지별 이미지/비디오 수
+*   **이미지**: 총 19개 (로고, 아이콘, 배너 등 포함)
+*   **비디오**: 4개 (`aspectRatio: 3.93`의 고정 규격 영상)
+
+### 6-2. 카피라이팅 분량
+*   **Headline/Description**: "In our exploration, we’ve discovered a strange new world..." (약 150자 내외 영문 텍스트)
+*   **Footer Info**: 상호, 대표자명, 주소, 연락처 등 법적 고지 정보 포함.
+
+### 6-3. 폼/입력 필드 목록
+*   스캔 데이터상 `formField` 개수: 0 (입력 폼 없음)
+
+---
+
+## 7. 디자인 토큰 (Design Tokens)
+
+### Color & Typography
+| 분류 | Token | Value (Exact) |
+| :--- | :--- | :--- |
+| **Color** | Primary Text | `rgb(32, 32, 32)` |
+| | Accent Color | `rgb(26, 229, 172)` |
+| | Link Color | `rgba(255, 25*s, 255, 0.4)` |
+| | Background (Neutral) | `rgb(32, 32, 32)` (count: 142), `rgb(255, 255, 255)` (count: 48) |
+| **Typography** | Primary Font | `Pretendard`, `"Noto Sans KR"`, `"Noto Sans JP"`, `sans-serif` |
+| | Body Size | `16px` |
+| | Button Size | `24px` |
+| | Font Weight | `400`, `500`, `600`, `700` |
+
+### Layout & Spacing
+| 분류 | Token | Value (Exact) |
+| :--- | :--- | :--- |
+| **Spacing** | Header Padding | `0px 30px` |
+| | Footer Padding | `20px 0px` |
+| **Radius** | Border Radius Scale | `4px`, `8px`, `20px`, `100px` (Pill shape) |
+| **Layout** | Viewport Size | `1440px * 900px` |
+
+---
+
+## 8. 페이지 템플릿 맵 (Page Template Map)
+
+| 템플릿 ID | 적용 URL | 공통 블록 순서 (위 → 아래) | 페이지별 차이점 | 재사용 컴포넌트 |
+|---|---|---|---|---|
+| T1: Brand Landing | `/` | Header → Nav → Main(Hero/Content) → Footer | (단독 페이지) | Header, Nav, Main, Footer |
+
+**Template Specification Notes:**
+*   **T1 (Brand Landing)**: `header`와 `nav`는 `position: fixed` 또는 `sticky`로 상단 고정(`zIndex: 1000`)을 기본으로 하며, `main` 섹션 내의 콘텐츠는 `viewport` 높이에 따라 스크롤되는 구조임. `main` 태그 내부에는 비디오 요소(`video`, `borderRadius: 20px`)가 포함된 섹션이 배치되어야 함.
+
+---
+
+## 9. 원본 사이트 재구축 명세 (Rebuild Spec — Same Site, Built From Scratch)
+
+> **⚠️ 이 단계의 미션 (절대 이탈 금지)**
+> - 이 섹션은 **원본 레퍼런스 사이트와 가능한 한 같은 사이트를 처음부터 다시 만들기 위한 개발 명세**다.
+> - 다른 서비스로 재해석하거나 개선하지 않으며, 오직 원본의 수치를 그대로 복원하는 데 집중한다.
+> - 모든 결정값(색상, 폰트, 여백, Radius, 전환 속도)은 제공된 JSON 스캔 데이터의 값을 정확히 인용한다.
+
+### 9-1. 디자인 토큰 정의 (원본 값 그대로)
+
+```css
+/* CSS Variables Definition */
+:root {
+  /* Colors - Palette from JSON */
+  --color-neutral-dark: rgb(32, 32, 32);
+  --color-white: rgb(255, 255, 255);
+  --color-accent: rgb(26, 229, 172);
+  --color-black: rgb(0, 0, 0);
+  --color-transparent-white: rgba(255, 255, 255, 0.4);
+  --color-transparent-white-low: rgba(255, 255, 255, 0.6);
+  --color-black-alpha: rgba(0, 0, 0, 0);
+
+  /* Typography */
+  --font-primary: "Pretendard", "Noto Sans KR", "Noto Sans JP", sans-serif;
+  --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "system-ui", Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-size-base: 16px;
+  --font-size-button-text: 24px; /* From button.fontSize in JSON */
+
+  /* Layout & Spacing */
+  --viewport-width: 1440px;
+  --viewport-height: 900px;
+  --header-padding: 0px 30px;
+  --footer-padding: 20px 0px;
+
+  /* Border Radius Scale */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+러
+  --radius-lg: 20px;
+  --radius-pill: 100px;
+
+  /* Transitions */
+  --transition-standard: 0.2s ease-in-out;
+}
+```
+
+### 9-2. 컴포넌트 명세 (원본 사이트의 카드/버튼/네비 등)
+
+| 컴포넌트 타입 | 속성 (Props/CSS) | 상세 수치 및 값 (JSON 근거) |
+| :--- | :--- | :--- |
+| **Button (Primary)** | `background`, `color`, `border-radius`, `padding` | `rgb(0, 0, 0)`, `rgb(255, 255, 255)`, `100px`, `8px 25px`, `font-weight: 600` |
+| **Button (Ghost/Link)** | `background`, `border`, `font-size` | `rgba(0, 0, 0, 0)`, `0px none rgb(32, 32, 32)`, `24px` |
+| **Navigation Item** | `font-size`, `font-weight` | `16px`, `400` |
+| **Card (List Item)** | `padding`, `border-radius`, `font-size` | `0px`, `0px`, `16px` |
+| **Video/Media Container**| `border-radius`, `object-fit` | `20px`, `cover` |
+
+### 9-3. 페이지별 레이아웃 마크업 가이드
+
+#### [Template T1: Main Landing Page]
+**구조 (HTML Skeleton):**
+```html
+<!-- Header Section -->
+<header class="e1rkdor11 MuiBox-root mui-style-1c8koze" style="padding: 0 30px; display: flex;">
+  <!-- Logo & Navigation -->
+  <nav class="MuiBox-root mui-style-1ypl5o3">
+    <ul>...</ul>
+  </nav>
+  <!-- CTA Buttons (Shop, Workshop, Log-in, KR) -->
+  <div class="button-group">...</div>
+</header>
+
+<!-- Main Content Section -->
+<main class="e1rkdor10 MuiBox-root mui-style-17l764i">
+  <!-- Hero/Video Section -->
+  <section class="hero-section">
+    <video width="1100" height="280" style="border-radius: 20px;"></video>
+    <h1>JUMP IN CALIVERSE...</h1>
+  </section>
+  <!-- Content List/Cards -->
+  <section class="content-grid">
+    <!-- MuiList-root components -->
+  </section>
+</main>
+
+<!-- Footer Section -->
+<footer class="MuiBox-root mui-style-1d7wxpy" style="padding: 20px 0px;">
+  <p>상호: 주식회사 칼리버스 | ...</p>
+</footer>
+```
+
+### 9-4. 인터랙션 재현 명세
+
+*   **Button Hover (Link/Icon Type):**
+    *   `selector: .mui-style-1s7qa4e.MuiButtonBase-root:hover`
+    *   `background: rgba(32, 32, 32, 0.1)`
+    *   `color: rgb(32, 32, 32)`
+*   **Global Transition:**
+    *   `property: all`, `duration: 0.2s`, `easing: ease-in-out` (또는 `ease`)
+*   **Input Autofill Fix:**
+    *   `selector: input:-webkit-autofint`
+    *   `transition: background-color 9999s ease-out`
+
+### 9-5. 콘텐츠 및 자산 준비 목록
+
+*   **[이미지/비디오 자산]**
+    *   [ ] 로고 이미지 (Width: 207px, Height: 19px)
+    *   [ ] 메인 비주얼 비디오 (3개 세트, 1100x280px, `object-fit: cover`, `border-radius: 20px`)
+    *   [ ] 기타 아이콘 및 UI 요소 (12px~24px 크기의 PNG/SVG)
+*   **[텍래프트/카피]**
+    *   [ ] 메인 헤드라인 ("JUMP IN CALIVERSE...")
+    *   [ ] 푸터 정보 (주소, 대표자명, 이메일 등 텍스트 데이터)
+*   **[기타]**
+    *   [ ] KR 언어 선택을 위한 국가 아이콘/텍스트
+
+### 9-6. 개발 티켓 (원본 복원 기준)
+
+*   **[FE]** 디자인 토큰(CSS Variables) 기반 테마 설정 (`:root` 정의)
+*   **[FE]** Material UI(MUI) 스타일 클래스(`mui-style-...`)를 활용한 레이아웃 구조 구현
+*   **[FE]** Header/Navigation 컴포넌트 및 반응형 미디어 쿼리(`max-width: 1280px` 등) 적용
+*   **[Asset]** 비디오 플레이어 컴포넌트 제작 (`border-radius: 20px` 적용)
+*   **[Asset]** 로고 및 UI 아이콘 에셋 등록
+
+---
+
+## 🔍 복원 시 추정이 필요한 영역 (Buildability Gaps)
+
+*   **Dynamic Data:** `AboutCaliverseCaliumGuideCompanyContact`와 같이 하나의 문자열로 뭉쳐 있는 리스트 항목들의 개별 분리 구조.
+*   **Video Source:** 비디오 태그(`video`) 내부에 실제 재생될 소스 파일의 경로 및 포맷.
+*   **Navigation Logic:** `nav` 태프트 내의 각 메뉴 클릭 시 이동할 내부/외부 링크(URL) 매핑 정보.
+*   **Font Files:** `Pretendable`, `Noto Sans KR` 등의 웹폰트 호스팅 및 `@font-face` 선언 경로.
@@ -0,0 +1,25 @@
+# 웹벤치마크 www.caliverse.io 분석해줘. 2026-05-20
+
+- **원본 URL**: www.caliverse.io 분석해줘.
+- **스캔 시각**: 2026-05-20T03:04:08.592Z
+- **생성**: Astra /benchmark · Datacollect web-benchmark
+
+### 메타
+- **title**: (없음)
+- **description**: (없음)
+- **lang**: (없음)
+
+### 디자인 토큰 (상위)
+- **컬러 팔레트 Top 5**: (없음)
+- **컬러 비율**: (없음)
+- **Primary Font**: `(없음)`
+- **그리드**: (없음)
+
+### 사이트맵 (1페이지, depth 1)
+```
+/ (unknown)
+```
+
+### 마이크로카피
+- **헤드라인**: (없음)
+- **CTA Top 5**: (없음)
@@ -0,0 +1,26 @@
+{
+  "id": "28fc0a7c-563c-406f-a6fa-7fc21cbc23ed",
+  "sessionId": "task_1779179713679",
+  "title": "회의록 작성해줘.  참석자 : 김원일 PD, 기획팀: 오경득팀장, 김성회, 신혜진, 강성규. PM 한에...",
+  "summary": "시작: 회의록 작성해줘. \n\n참석자 : 김원일 PD, 기획팀: 오경득팀장, 김성회, 신혜진, 강성규. PM 한에성. \n\n일시 ; 2026년 5월 19일 @ 14시 \n장소 : 5층 회의실\n → 최종: 그러면 내 컴퓨터가 i7 12세대, RTX3080 이라고 할경우, 제일 적합한 모델과 세팅값을 알려줄 수 있어?",
+  "keyDecisions": [
+    "전체 영상에 적용 하는 것으로 하되 자막 제공이 안되는 영상도 있을 수 있다.",
+    "게스트 로그인을 삭제하면 약관 동의 절차도 최소화 가능하며, UUID 관리 방식에 대한 법무 검토 필요.",
+    "사항 및 Action Items (TO-DO)",
+    "(A/B 테스트) | 김성회 | 개발팀 |"
+  ],
+  "topics": [
+    "참석자",
+    "게스트",
+    "그러니까",
+    "로그인",
+    "그래서",
+    "저희가",
+    "이렇게",
+    "그리고"
+  ],
+  "projectContext": "e:\\Wiki",
+  "timestamp": 1779186665422,
+  "duration": 0,
+  "messageCount": 8
+}
@@ -300,7 +300,137 @@
      "createdAt": 1778145104617,
      "lastReferencedAt": 1778145104617,
      "referenceCount": 0
+    },
+    {
+      "id": "99d505ae-b031-44b7-90a6-bc3d9696a09c",
+      "category": "rule",
+      "content": "무조건 오른쪽 되는 거잖아요. 연동되면 네 맞습니다.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665369,
+      "lastReferencedAt": 1779186665369,
+      "referenceCount": 0
+    },
+    {
+      "id": "849506dc-5450-4338-a25c-005cd25e3226",
+      "category": "rule",
+      "content": "무조건 로그인해야지만 돌아가는 건 아니고 그러면 그건 필요가 없다.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665370,
+      "lastReferencedAt": 1779186665370,
+      "referenceCount": 0
+    },
+    {
+      "id": "d290c0e5-7415-488a-9ab1-3caa5c175442",
+      "category": "rule",
+      "content": "무조건 넘어가 뒤쪽은",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665371,
+      "lastReferencedAt": 1779186665371,
+      "referenceCount": 0
+    },
+    {
+      "id": "793ffed2-ab1c-420a-a1b1-c59c4ef4b14a",
+      "category": "rule",
+      "content": "이후에 이제 홈으로 진입을 하게 되는데요.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665377,
+      "lastReferencedAt": 1779186665377,
+      "referenceCount": 0
+    },
+    {
+      "id": "dbb321eb-34f4-4f08-a5c9-bddf1ee7f7bb",
+      "category": "rule",
+      "content": "이후에 이제 이동 이용 약관 동의 화면으로 넘어가고요.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665381,
+      "lastReferencedAt": 1779186665381,
+      "referenceCount": 0
+    },
+    {
+      "id": "2ba0dc07-f537-4649-926a-0de484b91a46",
+      "category": "rule",
+      "content": "이후에 해야 될지 앞에서 해야 될지 고민이다라고 말씀을 드렸던 상태고요.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665385,
+      "lastReferencedAt": 1779186665385,
+      "referenceCount": 0
+    },
+    {
+      "id": "4cea1972-02c4-4bcb-b9a3-dc60024a05af",
+      "category": "rule",
+      "content": "이후에 하는 게 확실하다라고 답변을 주기는 했었거든요.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665389,
+      "lastReferencedAt": 1779186665389,
+      "referenceCount": 0
+    },
+    {
+      "id": "191f32b7-271d-45dd-a24d-0fe9c08aed6a",
+      "category": "rule",
+      "content": "이후에 계정 연동을 하기 위해서는 이제 이 마이 페이지에서 옵션 화면으로 진입을 해야 되고요.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665394,
+      "lastReferencedAt": 1779186665394,
+      "referenceCount": 0
+    },
+    {
+      "id": "b27407ff-7bb7-4dc6-aaf5-dc541181f8b8",
+      "category": "goal",
+      "content": "목표 가 될 것 같고 나머지 소셜 쪽 기능들은 일단 저희가 게스트 로그인을 하는 순간에 막 많은 숫자의 계정들이 생길 거고 게시되는 자료들이 많아지면 사실 저희는 다 스토리지 이슈가 있을 것 같아서 막는 게 맞지 않을까",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665398,
+      "lastReferencedAt": 1779186665398,
+      "referenceCount": 0
+    },
+    {
+      "id": "82fd1db5-7c22-4345-8f53-4d6f119c9c57",
+      "category": "goal",
+      "content": "결국에는 위버스 쪽에서 어떻게 했는지를 체크해 보면 되는데 enko JP 이에 따라 폰트가 달라지게 되거나",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665402,
+      "lastReferencedAt": 1779186665402,
+      "referenceCount": 0
+    },
+    {
+      "id": "53ff4274-200f-4f0d-8622-a03ec1e72ca1",
+      "category": "goal",
+      "content": "결국에 게스트는 막아야 되는 게 맞는 것 같습니다.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665406,
+      "lastReferencedAt": 1779186665406,
+      "referenceCount": 0
+    },
+    {
+      "id": "b4825160-9df6-4e99-b668-fe2b4ad2fb5e",
+      "category": "decision",
+      "content": "결론 : 전체 영상에 적용 하는 것으로 하되 자막 제공이 안되는 영상도 있을 수 있다.",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665411,
+      "lastReferencedAt": 1779186665411,
+      "referenceCount": 0
+    },
+    {
+      "id": "e1127369-133f-4db6-8d99-3335b29f666a",
+      "category": "decision",
+      "content": "으로 결정",
+      "source": "session:task_1779179713679",
+      "confidence": 0.7,
+      "createdAt": 1779186665416,
+      "lastReferencedAt": 1779186665416,
+      "referenceCount": 0
    }
  ],
-  "lastUpdated": 1778145104617
+  "lastUpdated": 1779186665416
 }