# Hearthline · 레퍼런스 적용 사례

Community v13의 첫 제출 기록 중 첫 화면을 발췌했습니다. 실제 실행 앱이 아닌 당시 화면 캡처입니다.

## 입력

- 원본: https://www.seamless-studio.com/
- reference ID: seamless-studio.com-20260824T193721135Z-042d89be
- reference revision: de2b0d7f6ad8bfc5
- 고정 자료: https://scaffold.builders/v1/layouts/seamless-studio.com-20260824T193721135Z-042d89be/reference?revision=de2b0d7f6ad8bfc5
- 프로젝트 입력 프롬프트 수집일: 2026-09-14
- 전체 프로젝트는 Seamless Studio(첫 화면), Tweek(일정), Usal Project(가입) 세 레퍼런스를 사용했습니다.

## 채택과 변경

- 채택: 넓은 어두운 소개 영역, 상단 양끝 정렬, 첫 화면 하단 카드 목록.
- PC: 좌우 여백 30px, 헤더 하단 69px, 카드 목록 시작 518px.
- 모바일: 좌우 여백 20px, 헤더 하단 64px, 카드 목록 시작 601px. 원본 595px 경계에 프로젝트가 정한 6px 전환 간격을 포함했습니다.
- 프로젝트 결정: 원본 브랜드·카피·사진 대신 Hearthline 콘텐츠와 CSS 그래픽 사용. 640px 반응형 전환점은 두 캡처에서 증명된 값이 아닌 프로젝트 결정입니다.

## 검증 범위

첫 제출 자체 검증 기록은 1440×900, 390×844에서 채택한 주요 경계를 측정하고 1 CSS px 이내 정렬을 보고했습니다. 첫 화면의 두 크기에서 접근성 자동 검사 violations 0, incomplete 0을 기록했습니다. 이는 당시 특정 화면의 검사 결과이며 전체 접근성을 보장하지 않습니다.

원본 사이트의 클릭·필터·전환 동작은 이 정적 자료로 확인하지 않았습니다. 이후 R1/R2 수정 결과는 여기에 포함하지 않습니다. 첫 제출 문서는 독립 검수를 기다리는 자체 검증 기록이며 정식 통과 선언이 아닙니다.

## 자료 추적

저장소 근거:
- dogfood-input/community-v13-ui/CAPTURE.md
- apps/community-dogfood-v13/docs/INVENTORY.md
- apps/community-dogfood-v13/docs/VALIDATION.md
- apps/community-dogfood-v13/evidence/screenshots/home-{desktop,mobile}-{clean,overlay}.png

사례에서 사용하는 구현 화면 세 장(PC 기본·가이드, 모바일 기본)은 위 원본 PNG를 변경 없이 복사했습니다. 원래 모바일 가이드 파일은 기본 화면과 내용이 같아 별도 가이드로 표시하지 않습니다.

원본 preview는 고정 reference 응답의 크기·SHA-256과 대조했습니다:
- reference-desktop.webp: c715cd7b5b108acdab041bee7ef20dd0a0270c1306a0b816b3791afe5f9a34d0
- reference-mobile.webp: 41bfd96632fdf98ab8089e93c8ae184f4106485ca5c5a2dc56bd1df228874abc

첫 제출 application source-set SHA-256: 01bb23e39b22aade69077c5d3300bde846a27ed0d9d8f48fd7ed70ef6673fce0