9종이 함께 쓰는 Sheet 가 stay2 모바일 시안의 하단 시트를 그대로 옮긴 것이라
데스크톱에서도 640px 판이 화면 바닥에 붙어 떴다.
- kit.css·paper.css: .sheet 를 가운데 정렬, .sbox 폭 560px·높이 100svh-48px, 모서리는 템플릿 --k-r
- kit.css: 라운드·코랄·미니멀·솔숲 예약 창(.sheetbody)에 여백이 없어 글자가 창 끝에 붙던 것
- docs/TEMPLATE_DESIGN.md: 창 위치 규칙
eslint 통과 · vitest 123 passed · 9종 모바일·1440px 에서 위아래·좌우 여백 같음 확인
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
같은 템플릿 안에서도 축제 카드(흰 바탕·글 안쪽)와 명소 카드(바탕 없음·글 아래)가 따로 놀았다.
실측(9종 전수): 제목 굵기 400/500/700/900, 사진 모서리 0/12/18/22px 가 한 화면에 섞여 있었다.
- kit/Card.tsx·card.css: 사진 3:2 + 제목 1줄 + 거리 1줄 + 설명 2줄. 템플릿 차이는 --kc-* 변수만
- 9종 Around·Festival, 고택 인물: 사진 카드를 PhotoCard 로 교체. 맛집·홈 목록 행은 그대로
- 템플릿 CSS: 모서리·글꼴·강조색 변수와 그리드 간격. 일러스트는 상자형, 빅타이포는 선 격자
- 모바일 캐러셀 화살표가 카드를 가려 1024px 미만에서 숨김
- docs/TEMPLATE_DESIGN.md: 사진 카드 규칙
tsc·eslint 통과 · vitest 123 passed · 12개 사이트 굽기 · 카드 모양 템플릿당 1종 확인
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
stay2 는 머리글 아래로 펼치는 목록이지만 떠 있는 상자가 쓰기 낫다(대표 결정). 모양만 고택에 맞춘다.
- paper.css: #w4d-panel 배경 --paper · 1px --line · 4px 모서리 · 옅은 그림자
- 줄 구분 실선, 지금 곡은 --soft 바탕, 판 라벨·이퀄라이저 #8c4a2f, 가사 명조
site vitest 105 passed, 390px 에서 목록을 펼쳐 확인
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
고택이 stay2 DOM 이식 1차에 머물러 화면 전체 폭·다른 머리글로 나가 시안과 달랐다.
- layouts/paper/paper.css: stay2 CSS 를 .w4p 안으로 옮겼다(@layer components, Tailwind 유틸이 이긴다)
- layouts/paper: 머리글·탭·첫 화면·날씨·블로그·소개·객실·사진·영상·주변·예약·이용안내·오시는 길·FAQ·축제·일정·지역 이야기·예약 요청 창
- stay2 하위 페이지(지역 소개·이용안내·이야기)는 #/area · #/stay · #/story 탭 전환, 내용은 한 HTML 에 둔다
- 공용 섹션에서 계산 함수만 꺼내 쓴다: infoView · useBookingRequest · StayBookingDemo 달력 함수
- SectionList: 레이아웃이 blog · reviews · postcardMaker 자리를 바꿀 수 있다
- templates.json paper: 보조색 #5b564e · 본문 고딕 · 모서리 4px · 간격 2.5rem(stay2 값)
- app.test: 고택 Frame 표식을 새 클래스(w4p)로
머뭄 데이터로 구워 1280·390px 에서 stay2 와 나란히 비교(첫 페이지 4855/4857px).
site tsc·eslint·vitest 105 passed, frontend vite build 통과
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
