# 화면 및 페이지 설계
## 브랜드 기준
- 회사명 표기: `PROS·ON`
- 보조 표기: `PROSTHETICS` (업종 설명용)
- 업종 방향: 의지 제작, 보행 분석, 환자 맞춤형 의지 솔루션
- 공식 로고: `Concepts/image.png`의 심볼·워드마크를 기준으로 제작한 `public/brand/proson-logo.svg`
- `Concepts` 폴더의 설명 문구가 포함된 이미지는 홈페이지에 직접 사용하지 않는다.
- 시각 방향: 네이비를 기본 색상으로 사용하고 골드를 강조 색상으로 활용한다.

## 공개 페이지
- 홈: PROS·ON 핵심 메시지와 재활·보행 훈련 샘플 이미지, 서비스 요약, 제작·상담 프로세스, 전문성 및 신뢰 요소, 최신 글, 문의 CTA
- 회사소개: 회사 개요, 전문 분야, 시설·제작 환경, 가치, 팀 또는 연혁
- 서비스: 맞춤형 의지·인솔 제작, 보행 분석·평가, 상담·제작·사후관리 등 서비스별 소개와 문의 연결
- 문의: 상담 안내, 연락처, 운영시간, 주소·지도, 문의 방법
- 블로그: 최신순 목록, 카테고리·태그 필터, 검색
- 글 상세: 제목, 요약, 본문, 태그, 발행일, 관련 글, 목록 이동

## 공통 레이아웃
- 헤더: PROS·ON 공식 SVG 로고, 홈·회사소개·서비스·블로그·문의 내비게이션, 문의 CTA
- 푸터: 로고, 회사 기본 정보, 주요 링크, 저작권 및 정책 링크
- 모든 페이지는 명확한 제목 구조, 키보드 탐색, 접근성 있는 색상 대비를 제공한다.

## 반응형 기준
- 모바일 우선으로 설계하고 모바일 320~767px, 태블릿 768~1023px, 데스크톱 1024px 이상을 지원한다.
- 모바일 헤더는 햄버거 메뉴로 전환하고 메뉴 열기·닫기 및 현재 위치를 명확히 제공한다.
- 콘텐츠 카드는 모바일에서 단일 열, 태블릿 이상에서 2열 이상으로 유동 배치한다.
- 히어로와 서비스 이미지는 화면 폭에 맞게 축소하며 핵심 내용이 잘리지 않도록 한다.
- 제목·본문·여백·버튼은 화면 크기에 맞춰 조정하고 CTA와 폼은 터치하기 쉬운 크기로 제공한다.
- 표·코드·긴 문자열·첨부 이미지는 화면 밖으로 넘치지 않으며 모든 화면에서 가로 스크롤이 없어야 한다.