# 템플릿 디자인 규칙

새 템플릿을 만들거나 기존 템플릿을 고칠 때 지키는 화면 규칙이다. 기준은 고택(`layouts/paper/`)이다.
고택은 손으로 만든 시안 `/s/stay2`(`solution/site/scripts/mockup/king-stay2/`)를 옮긴 것이라
스크롤 길이·접기·글자 크기가 이미 검증돼 있다. 수치가 애매하면 `layouts/paper/paper.css` 를 연다.

템플릿 목록과 등록 방법은 [TEMPLATES.md](TEMPLATES.md), 렌더링 흐름은 [RENDERING.md](RENDERING.md).

## 1. 폭

| 화면 | 규칙 |
|---|---|
| 모바일 390px | 먼저 맞춘다. 가로 넘침 0 |
| 700~1023px | 640px 한 단, 가운데 |
| 1024px 이상 | 템플릿마다 정한다. 넓은 배치면 콘텐츠 최대 1080px, 첫 화면은 가로 전체 |

부티크처럼 모바일 한 단을 데스크톱에서도 그대로 쓰는 템플릿이 있다. 정한 방식은 [TEMPLATES.md](TEMPLATES.md) 에 적는다.

## 2. 글자

- 본문 16~17px, 줄 간격 1.7 이상. 고택은 17px/1.9. **본문 16px 미만 금지**
- 보조 글씨 14~15px. 기능 글씨(버튼·메뉴) 12px 미만 금지
- 섹션 제목 22~30px. 고택은 19px 명조
- 첫 화면 문구: 모바일 28px 안팎, 데스크톱 48px 이하
- 상호를 크게 쓰는 템플릿(빅타이포)도 64px 이하
- `vw` 로 커지는 글자 크기 금지. 넓은 화면에서 끝없이 커진다
- 보조 글씨 대비 4.5:1 이상. `#8b95a1` 같은 연회색은 흰 바탕에서 2.9:1 이라 탈락한다

### 템플릿별 한글 글꼴 — 겹치지 않게 배정했다

| 템플릿 | 제목 | 본문 |
|---|---|---|
| 고택 | Noto Serif KR | 시스템 고딕 |
| 라운드 | Noto Sans KR | Noto Sans KR |
| 시네마 | 송명 | Noto Sans KR |
| 빅타이포 | 함렛 | 함렛 · IBM Plex Mono |
| 부티크 | Cormorant · 나눔명조 | 나눔명조 |
| 일러스트 | 주아 | 고운돋움 |
| 코랄 | Gothic A1 · Aboreto | Gothic A1 |
| 미니멀 | Diphylleia · Cinzel | Questrial · 나눔고딕 |
| 솔숲 | IBM Plex Sans KR | IBM Plex Sans KR |

새 템플릿은 이 표에 없는 글꼴을 쓴다. 웹폰트는 `seo/head.ts` `WEB_FONTS` 에 등록해야 받아 온다.

## 3. 간격

- 제목 위 여백 32px 이상. 제목 위가 아래보다 넓다
- 카드형 목록 사이 10px 이상(선으로 나누는 목록은 예외)
- 같은 목록의 카드는 같은 크기: 사진은 고정 비율 + `object-fit:cover`, 글은 줄 수 말줄임
- 칸 수는 항목 수에 맞춘다(`repeat(auto-fit, minmax(…))`). 3개인데 4칸을 잡아 빈칸을 남기지 않는다

## 4. 섹션 머리

- **제목은 위, 내용은 아래.** 참고한 펜션 사이트들이 모두 이 방식이다
- 제목을 왼쪽, 내용을 오른쪽에 두는 좌우 분할은 쓰지 않는다. 내용이 한두 줄이면 왼쪽이 텅 빈다
  (예외: 소개 글과 사진이 둘 다 충분할 때의 소개 섹션)
- 제목 위에 같은 뜻의 작은 라벨(‘객실’ 위 ‘객실 안내’)을 달지 않는다.
  참고 사이트의 정체성인 영문 제목(코랄 `Room View`, 미니멀 `Stay`)은 예외

## 5. 스크롤 줄이기 — 몇 개 보이고 접나

`<details>` 로 접는다. 내용은 HTML 에 남아 크롤러가 읽는다. 빼지 않는다.

| 목록 | 처음 보이는 수 | 근거 |
|---|---|---|
| 첫 화면 사진 | 5장 | `paper/Hero.tsx` `MAX_SLIDES` |
| 홈 객실 | 4개(2열) | 나머지는 이용안내 탭 |
| 홈 사진 갤러리 | 큰 1 + 4장 | `paper/Gallery.tsx` `FIRST` |
| 홈 주변 안내 | 3~4곳 | 나머지는 지역 탭 |
| 명소 · 맛집 | 8곳 | `paper/Around.tsx` `FIRST_ROWS` (데스크톱 넓은 배치는 8, 모바일 6도 허용) |
| 축제 | 가로 캐러셀 | 세로로 펼치지 않는다 |
| 추천 일정 | 4개 | `paper/Itinerary.tsx` `FIRST` |
| 노래 | 6곡 | `paper/Story.tsx` |
| 인물 | 4명 | `paper/Story.tsx` |
| 지역 읽기 | 3편, 본문 3줄 말줄임 | `paper/Story.tsx` |
| 자주 묻는 질문 | 8개, 질문은 접힌 상태 | `paper/Faq.tsx` `FIRST` |

## 6. 값 보여주기

- **‘가능 · 있음’은 ✓, ‘불가 · 없음’은 ✕ 목록으로 쓴다.** `주차 / 가능` 같은 표로 쓰지 않는다
  - 마크업: `<ul class="amen"><li class="on"><i class="ic">✓</i><span><b>주차</b> 가능</span></li>`
  - 색: ✓ `#15803d`, ✕ `#c2410c`. 가능한 것을 먼저 놓는다
  - 판정: `sections/EssentialInfoSection.tsx` `ON_VALUES`(가능·있음)
- 사진 없는 항목(인물 등)에 빈 사진 칸을 두지 않는다. 글만 있는 카드로 줄인다
- 거리·이름처럼 붙어 나오는 글은 띄우거나 줄을 나눈다

## 7. 탭 · 버튼

- 페이지 탭은 **밑줄**로 현재 위치를 표시한다. 회색 알약 배경 금지
- 탭·링크를 누르면 **같은 탭이어도 맨 위로** 바로 올라간다(`behavior:'instant'`, 전역 `scroll-behavior:smooth` 를 이긴다)
- 같은 동작은 한 이름: 예약 시트를 여는 버튼은 모두 **‘예약하기’**, 이용안내 탭으로 가는 버튼은 **‘이용안내 보기’**
- 버튼 글자가 두 줄로 접히면 안 된다. 모바일에서 버튼이 3개 이상이면 2열 격자로, 남는 하나는 한 줄 전체
- 키보드 포커스와 글자 선택색은 템플릿 색으로(`kit/kit.css`)

## 8. 하지 않는 것

- 영어 해외 사이트를 레퍼런스로 가져오지 않는다. 한국 사이트에서 UI(글자 크기·배치)로 고른다
- 디자인을 처음부터 손으로 짓지 않는다. 실물 사이트·시안을 받아 우리 콘텐츠에 맞게 옮긴다
- 섹션마다 똑같이 떠오르는 등장 효과, 모든 카드에 같은 그림자 — 생성형 기본값으로 읽힌다

## 9. 검수 순서

1. 해든스테이 테스트 데이터로 굽는다 (굽기 방법은 [RENDERING.md](RENDERING.md))
2. 1440px · 390px 에서 네 탭(홈 · 지역 · 이용안내 · 이야기)을 캡처해 **눈으로** 본다. lazy 이미지는 스크롤해서 띄운 뒤 찍는다
3. 제목 위 여백 32px 미만, 가로 넘침, 대비 부족을 잰다
4. `cd solution/site && npx eslint src/layouts && npx vitest run src/layouts`