# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is the official website for 밍글 스튜디오 (Mingle Studio), a motion capture studio located in Incheon, South Korea. The website is a multi-page static site built with vanilla HTML, CSS, and JavaScript, showcasing motion capture services, studio galleries, and client portfolios.

## Architecture & Structure

### Page Architecture
The site follows a modular component-based structure:

- **Main Pages**: `index.html`, `about.html`, `services.html`, `portfolio.html`, `gallery.html`, `contact.html`, `qna.html`, `404.html`
- **Shared Components**: `components/header.html`, `components/footer.html`
- **Page-specific Assets**: Each page has dedicated CSS (`css/[page].css`) and JavaScript (`js/[page].js`) files
- **Common Assets**: `css/common.css` and `js/common.js` provide shared functionality

### Component Loading System
The site uses a dynamic component loading system implemented in `js/common.js`:
- Header and footer are loaded via `fetch()` API from `components/` directory
- Fallback system: Static backup footer is hidden when dynamic loading succeeds
- Components are initialized after DOM load with proper error handling

### CSS Architecture
- **CSS Variables**: Defined in `:root` of `common.css` with motion capture/VTuber orange theme
- **Modular Approach**: Common styles in `common.css`, page-specific styles in separate files
- **Responsive Design**: Mobile-first approach with breakpoints at 768px and 1200px
- **Color Scheme**: Primary orange (`#ff8800`) with gradient variations for modern tech aesthetic

## Development Commands

### Quick Start (권장)
**Windows:**
```cmd
# 더블클릭으로 실행
start-server.bat
```

**macOS/Linux:**
```bash
# 터미널에서 실행
./start-server.sh
```

### Manual Server Start
**Node.js (권장):**
```bash
npm run dev          # http://localhost:8000
npm start           # 같은 기능
npm run serve       # 같은 기능
npm test           # 도움말 + 서버 시작
```

**Python:**
```bash
python server.py    # 커스텀 서버 (추천)
python -m http.server 8000  # 기본 서버
```

### Development Features
- **자동 브라우저 열기**: 서버 시작 시 자동으로 브라우저에서 사이트 열림
- **Clean URLs**: `.html` 확장자 없이 접근 가능 (`/about`, `/services` 등)
- **개발 최적화**: 캐시 비활성화, CORS 헤더 추가
- **오류 처리**: 포트 충돌 및 기본적인 오류 상황 처리

### Available URLs
- Homepage: http://localhost:8000/
- About: http://localhost:8000/about
- Services: http://localhost:8000/services  
- Portfolio: http://localhost:8000/portfolio
- Gallery: http://localhost:8000/gallery
- Contact: http://localhost:8000/contact
- Q&A: http://localhost:8000/qna

## Key Technical Details

### SEO Optimization
- Structured data (JSON-LD) with LocalBusiness schema for search engines
- Comprehensive meta tags including Open Graph, Twitter Cards, and Korean platform-specific tags
- Sitemap.xml without lastmod dates to prevent unwanted date display in search results
- Favicon system: Both ICO (`mingle-logo.ico`) and WebP (`mingle-logo.webp`) formats

### Image Management
- Studio images stored in `Studio_Image/` directory using WebP format for optimization
- Gallery system dynamically references these images with descriptive alt text
- Logo assets: `mingle-logo.webp` (primary) and `mingle-logo.ico` (favicon)

### Form Handling & Interactivity
- Contact form with real-time validation in `js/contact.js`
- Lazy loading implementation for performance optimization
- Scroll animations and intersection observers for modern UX

## Content Management

### Adding Gallery Images
1. Add new WebP images to `Studio_Image/` directory
2. Update `gallery.html` with new gallery items following the existing pattern:
   ```html
   <div class="gallery-item">
       <img src="Studio_Image/[filename].webp" alt="descriptive text" class="gallery-img" loading="lazy">
       <div class="gallery-caption">Caption Text</div>
   </div>
   ```

### Adding Portfolio Videos
- YouTube videos: Update `portfolio.html` with iframe embed using `data-src` for lazy loading
- SOOP/streaming VODs: Direct iframe source for broadcast examples

### Navigation Updates
When adding new pages, update `components/header.html` navigation links and ensure corresponding CSS/JS files follow the naming convention.

## Business Context

This website represents a motion capture studio business with:
- **Primary Service**: OptiTrack-based motion capture studio rental (22만원/hour)
- **Target Market**: VTubers, game developers, content creators
- **Location**: Incheon Techno Valley, unique positioning as Incheon's only motion capture facility
- **Technical Specs**: 28 OptiTrack cameras, 8×7m capture space

Understanding this context helps with content updates, SEO optimization, and feature development that aligns with the studio's business objectives.