④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,393 @@
+# Airbnb에서 영감을 받은 디자인 시스템
+
+> Category: 이커머스 및 리테일
+> 여행 마켓플레이스. 따뜻한 코럴 액센트, 사진 중심, 둥근 UI.
+
+## 1. 비주얼 테마와 분위기
+
+Airbnb의 2026년 디자인은 우연히 앱이 된 여행 잡지처럼 느껴진다——순수한 흰 캔버스는 전면 사진에 자리를 내주고, 인터페이스 자체는 뒤로 물러나 숙소 사진이 숨 쉴 수 있게 한다. 트레이드마크인 Rausch 코럴 핑크(`#ff385c`)는 절제되어 있지만 분명하게 쓰인다: 검색 CTA, 활성 탭 인디케이터, 주요 액션 버튼, 그리고 가끔 가격이나 위시리스트 하트에 포인트로 사용된다. 나머지는 철저한 그레이스케일로, `#222222`가 거의 모든 텍스트를 담당한다.
+
+이 시스템이 한눈에 Airbnb임을 알아볼 수 있는 이유는 콘텐츠에 대한 엄청난 *신뢰* 때문이다. 숙소 사진은 히어로 크기로 표시되며, 4:3 비율에 가장자리까지 둥근 처리를 한다. 카테고리 전환은 세 탭 피커(홈 / 체험 / 서비스)를 통해 이루어지며, 3D 렌더링 일러스트 아이콘(경사 지붕 집, 열기구, 서비스 벨)이 함께한다——물리적이고 촉각적이며 거의 장난감 같은 느낌——`Airbnb Cereal VF` 레이블과 짝을 이룬다. 3D 렌더와 순수 타이포그래픽 UI가 어색함 없이 공존하는 보기 드문 소비자 제품이다.
+
+가장 새로운 화면은 **체험** 프로덕트 라인——같은 크롬이지만 카드 밀도가 더 높고 사진이 더 풍부하며, 중앙 앵커 예약 패널에 스티키 우측 레일 가격이 붙는다. 숙소와 체험 모두 세부 페이지는 엄격한 템플릿을 따른다: 전면 히어로 이미지 그리드 → 겹쳐지는 둥근 예약 카드(스크롤 시 고정) → 편의시설 → 리뷰(게스트 즐겨찾기 어워드는 큰 중앙 `4.81` 평점과 월계관 lockup으로 표시) → 지도 → 호스트 프로필 → 안내사항. 방을 예약하든 요트 투어를 예약하든 리듬은 일정하다.
+
+**주요 특징:**
+- Rausch 코럴 핑크(`#ff385c`)를 단일 액센트 브랜드 컬러로, 주요 CTA와 검색 버튼에만 사용
+- 4:3 / 16:9 전면 사진과 부드러운 코너 라운딩(14–20px)을 주요 비주얼 어휘로 사용
+- 3D 렌더링 카테고리 아이콘과 타이포그래픽 탭을 페어링——시스템에서 일러스트가 허용되는 유일한 공간
+- 원형 `50%` 아이콘 버튼(뒤로 화살표, 공유, 즐겨찾기, 캐러셀 화살표)이 인터페이스 전반에 배치
+- `Airbnb Cereal VF`가 8px 법적 각주부터 28px 섹션 제목까지 모든 레이블을 담당——단일 패밀리 시스템
+- 프로덕트 티어 컬러 코딩: Airbnb Plus(마젠타 `#92174d`), Airbnb Luxe(딥 퍼플 `#460479`), Airbnb(Rausch 코럴)
+- 게스트 즐겨찾기 어워드 lockup——두 월계관 사이에 중앙 정렬된 거대한 평점 숫자, 시스템에서 가장 알아볼 수 있는 순간 중 하나
+- 스티키 예약 패널, 가격 → 날짜 → 게스트 스택으로 데스크톱 우측 레일에 고정되며 모바일에서는 하단 고정 "예약" 바로 변환
+- 모바일 하단 고정 네비게이션(탐색 / 위시리스트 / 로그인), 활성 상태는 Rausch 틴트
+
+## 2. 컬러 팔레트 및 역할
+
+### 프라이머리
+- **Rausch**(`#ff385c`): 브랜드의 트레이드마크 코럴 핑크. CSS 변수 `--palette-bg-primary-core`. 사용처: 주요 "예약" 버튼, 검색 제출 버튼, 활성 탭 밑줄, 위시리스트 하트 채우기, 가격 강조. 모든 페이지에서 가장 높은 시인성을 가진 단일 컬러.
+
+### 세컨더리 및 액센트
+- **딥 Rausch**(`#e00b41`): 더 채도가 높은 변형. CSS 변수 `--palette-bg-tertiary-core`. 누름/활성 버튼 상태와 그라디언트 끝점에 사용.
+- **Plus 마젠타**(`#92174d`): CSS 변수 `--palette-bg-primary-plus`. Airbnb Plus 프로덕트 티어의 브랜드 컬러——고급 큐레이팅 숙소 오퍼링.
+- **Luxe 퍼플**(`#460479`): CSS 변수 `--palette-bg-primary-luxe`. Airbnb Luxe 프로덕트 티어의 브랜드 컬러——빌라/에스테이트 수준 렌탈.
+- **인포 블루**(`#428bff`): CSS 변수 `--palette-text-legal`. 법적/정보 링크(약관, 개인정보, 안내)에 사용——시스템에서 유일한 모노크롬이 아닌 링크 컬러.
+
+### 서피스 및 배경
+- **캔버스 화이트**(`#ffffff`): 기본 페이지 배경. 모든 카드, 컨테이너, 세부 페이지가 여기서 시작된다.
+- **소프트 클라우드**(`#f7f7f7`): 푸터 배경, 지도 뷰 래퍼, 그리고 프라이머리 화이트에서 한 단계 물러나고 싶은 "기타" 섹션에 쓰이는 미묘한 서브서피스 틴트.
+- **헤어라인 그레이**(`#dddddd`): 어디에나 있는 1px 테두리 컬러——카드, 편의시설 행, 리뷰 패널, 푸터 컬럼을 분리한다. 레이아웃 시스템의 일꾼.
+
+### 뉴트럴 및 텍스트
+- **잉크 블랙**(`#222222`): CSS 변수 `--palette-text-primary`. 시스템의 거의 검정. 모든 제목, 본문 단락, 내비 레이블, 가격. 페이지의 모든 텍스트 중 약 90%에 사용.
+- **차콜**(`#3f3f3f`): CSS 변수 `--palette-text-focused`. 포커스 상태 입력 텍스트와 한 단계 아래 강조 카피에 사용.
+- **애시 그레이**(`#6a6a6a`): CSS 변수 `--palette-bg-tertiary-hover`. 세컨더리 레이블, 도시명 아래 "코티지 렌탈" 스타일의 서브타이틀 카피, 차분한 푸터 링크.
+- **뮤트 그레이**(`#929292`): CSS 변수 `--palette-text-link-disabled`. 비활성화 버튼과 낮은 우선순위 메타데이터.
+- **스톤 그레이**(`#c1c1c1`): 3차 구분선, 아이콘 스트로크, 플레이스홀더 아바타.
+
+### 시맨틱 및 액센트
+- **에러 레드**(`#c13515`): CSS 변수 `--palette-text-primary-error`. 폼 유효성 검사 오류, 파괴적 액션 경고.
+- **딥 에러**(`#b32505`): CSS 변수 `--palette-text-secondary-error-hover`. 에러 상태의 누름/활성 변형.
+- **반투명 블랙**(`rgba(0, 0, 0, 0.24)`): CSS 변수 `--palette-text-material-disabled`. 비활성화된 Material 스타일 레이블.
+
+### 그라디언트 시스템
+Airbnb의 브랜드 그라디언트는 드물게 등장하며, 보통 워드마크와 검색 버튼의 브랜드 순간에만 사용된다:
+
+```
+linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
+```
+
+이 코럴 → 마젠타 스윕은 "브랜드 순간"——전체 서피스에는 절대 사용하지 않고, 오직 좁은 필 형태나 로고 처리로만 사용한다.
+
+## 3. 타이포그래피 규칙
+
+### 폰트 패밀리
+- **Airbnb Cereal VF**(프라이머리이자 유일한 폰트): 시스템 전체를 담당하는 독점 가변 웨이트 산세리프체. 폴백(순서): `Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`.
+
+추출된 토큰에서 관찰된 웨이트: 500, 600, 700. 400 레귤러 없음——시스템의 "본문" 웨이트는 500으로, 모든 텍스트 블록에 자신감 있고 의도적으로 읽히는 미묘한 추가 밀도를 부여한다.
+
+OpenType 기능: `salt`(스타일리스틱 얼터네이트)는 콤팩트한 11px와 14px 600 웨이트 레이블에 사용——숫자와 특수 문자 조형을 더 촘촘하게 하기 위한 것으로 보인다. 리가처나 분수 숫자 기능은 관찰되지 않았다.
+
+### 위계
+
+| 역할 | 크기 | 웨이트 | 줄 높이 | 자간 | 비고 |
+|------|------|--------|-------------|----------------|-------|
+| 섹션 제목 | 28px / 1.75rem | 700 | 1.43 | 0 | "미래 여행을 위한 영감" — 페이지 수준 제목 |
+| 서브섹션 제목 | 22px / 1.38rem | 500 | 1.18 | -0.44px | "이 숙소가 제공하는 것", "호스트 소개" — 콘텐츠 구분선 |
+| 카드 제목 | 21px / 1.31rem | 700 | 1.43 | 0 | 리뷰 패널 제목, 카드 리드 제목 |
+| 숙소 제목 | 20px / 1.25rem | 600 | 1.20 | -0.18px | "소규모 요트 투어, 무제한 와인 & 과일" — 세부 페이지 숙소 타이틀 |
+| 서브타이틀 볼드 | 16px / 1.00rem | 600 | 1.25 | 0 | 호스트 이름, 도시명 |
+| 본문 미디엄 | 16px / 1.00rem | 500 | 1.25 | 0 | 세부 페이지 주요 본문 |
+| 대형 버튼 | 16px / 1.00rem | 500 | 1.25 | 0 | "예약", "호스트 되기" |
+| 기본 버튼 | 14px / 0.88rem | 500 | 1.29 | 0 | 표준 버튼 레이블 |
+| 링크 | 14px / 0.88rem | 500 | 1.43 | 0 | 내비 링크, 푸터 링크 |
+| 캡션 미디엄 | 14px / 0.88rem | 500 | 1.29 | 0 | 메타데이터, 서브타이틀 행("코티지 렌탈", "빌라 렌탈") |
+| 캡션 볼드 | 14px / 0.88rem | 600 | 1.43 | 0 | `salt` 기능 활성화——숫자 통계, 소형 텍스트 강조 |
+| 캡션 스몰 | 13px / 0.81rem | 400 | 1.23 | 0 | 리뷰 날짜, 마이크로 메타데이터 |
+| 마이크로 기본 | 12px / 0.75rem | 400 | 1.33 | 0 | 푸터 면책사항, 법적 마이크로 카피 |
+| 마이크로 볼드 | 12px / 0.75rem | 700 | 1.33 | 0 | "NEW" 필 레이블 |
+| 배지 대문자 | 11px / 0.69rem | 600 | 1.18 | 0 | `salt` 기능——콤팩트 카테고리/상태 배지 |
+| 위첨자 | 8px / 0.50rem | 700 | 1.25 | 0.32px | 대문자——가격 각주, 소수점 이하 |
+
+### 원칙
+- **하나의 패밀리, 다양한 웨이트.** Airbnb Cereal VF가 8px 법적 텍스트부터 28px 페이지 제목까지 모두 처리한다——비주얼 아이덴티티는 서체 혼용이 아닌 패밀리 자체에서 온다.
+- **500이 새로운 400.** 시스템의 "레귤러" 웨이트는 500으로, 모든 단락에 웹 기본값보다 약간 더 자신감 있는 텍스처를 부여한다.
+- **네거티브 트래킹은 디스플레이 타입에만.** 20px 이상의 제목은 트래킹을 -0.18에서 -0.44px 압축하여 조각된 느낌을 낸다; 본문 크기는 가독성을 위해 트래킹 0을 유지한다.
+- **제목은 타이트한 줄 높이, 본문은 여유롭게.** 디스플레이 타입은 1.18–1.25(타이트)로 설정; 본문과 캡션은 장문 읽기 편의성을 위해 1.43으로 확장된다.
+- **8px를 제외하고 올대문자 없음.** 시스템에서 유일한 대문자 변환은 8px 위첨자——나머지는 모두 문장 대문자에 미묘한 웨이트 변화로 처리한다.
+
+### 폰트 대체품에 대한 참고사항
+Airbnb Cereal VF는 독점 폰트다. 가장 가까운 오픈소스 대체품은 **Circular Std**(여전히 상업용) 또는 **Inter**(무료, Google Fonts)로, 디스플레이 크기에서 자간을 -0.01em 줄인다. 엄격한 브랜드 충실도를 원한다면, 문서화된 폴백 체인(`Circular, -apple-system, system-ui`)은 macOS/iOS에서 `system-ui`가 비슷한 비율을 가진 San Francisco로 해석되어 허용 가능한 렌더링을 제공한다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**프라이머리 CTA**("예약", "검색", "날짜 추가")
+- 배경: Rausch `#ff385c`
+- 텍스트: 캔버스 화이트 `#ffffff`, Airbnb Cereal 500, 16px
+- 패딩: 세로 약 14px, 가로 24px
+- 반경: 8px(직사각형) 또는 50%(원형 아이콘 변형)
+- 테두리: 없음
+- 활성/누름: `transform: scale(0.92)` 더하기 `0 0 0 2px`의 2px `#222222` 포커스 링
+
+**세컨더리 버튼**("호스트 되기", 아웃라인 3차 액션)
+- 배경: `#ffffff`
+- 텍스트: 잉크 블랙 `#222222`, Airbnb Cereal 500, 14–16px
+- 패딩: 10px 16px
+- 반경: 20px(필) 또는 8px(직사각형)
+- 테두리: 1px solid 헤어라인 그레이 `#dddddd`
+
+**아이콘 전용 원형 버튼**(뒤로 화살표, 공유, 즐겨찾기, 캐러셀 컨트롤)
+- 배경: `#f2f2f2`(약간 오프화이트) 또는 1px 반투명 블랙 테두리가 있는 화이트
+- 아이콘: `#222222` 아웃라인 스트로크, 16–20px
+- 크기: 직경 32–44px
+- 반경: 50%
+- 활성/누름: `transform: scale(0.92)`; 컬러풀한 사진 배경과 분리하는 4px 화이트 링 `0 0 0 4px rgb(255,255,255)`
+
+**비활성화 버튼**
+- 배경: `#f2f2f2`
+- 텍스트: 스톤 그레이 `#c1c1c1`
+- 불투명도: 0.5
+
+**필 탭 버튼**(카테고리 선택기 "홈 / 체험 / 서비스")
+- 배경: 투명
+- 텍스트: 잉크 블랙 `#222222`, Airbnb Cereal 500, 16px
+- 패딩: 8px 14px
+- 활성 상태: 레이블 아래 2px 잉크 블랙 밑줄
+- 레이블 위에 36–48px 3D 렌더링 일러스트 아이콘과 페어링
+
+### 카드 및 컨테이너
+
+**숙소 카드**(홈페이지 그리드, 검색 결과)
+- 배경: `#ffffff`
+- 반경: 이미지에 14px, 텍스트는 투명 배경 위에 직접 배치
+- 이미지: 4:3 비율, 전면, 동일한 14px 반경
+- 패딩: 외부 컨테이너 없음; 이미지와 메타데이터 행 사이 12px 간격
+- 그림자: 없음——분리는 여백과 사진 고유의 반경에서 온다
+- 메타데이터 패턴: 1행에 도시/지역(16px 600), 2행에 거리/소요시간(14px 500 애시 그레이), 3행에 날짜 범위, 하단에 "1박당" 가격 행
+
+**세부 페이지 예약 패널**(객실/체험 페이지의 스티키 우측 레일)
+- 배경: `#ffffff`
+- 반경: 14–20px
+- 테두리: 1px solid 헤어라인 그레이 `#dddddd`
+- 그림자: `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — 3겹으로 쌓인 미묘한 엘리베이션
+- 패딩: 24px
+- 너비: 약 370px, 뷰포트 상단에서 120–140px 아래에 고정
+- 내용: 가격 헤드라인 → 날짜 피커 → 게스트 드롭다운 → 프라이머리 CTA → "아직 청구되지 않습니다" 각주
+
+**편의시설 그리드 카드**(숙소 세부 페이지)
+- 배경: `#ffffff`
+- 테두리: 행 수준에서 1px solid 헤어라인 그레이 `#dddddd`(항목별 아님)
+- 패딩: 편의시설 행당 세로 16px
+- 아이콘 + 레이블 패턴: 왼쪽에 24px 아웃라인 아이콘, 오른쪽에 16px 500 웨이트 레이블
+
+**리뷰 카드**(세부 페이지의 개별 리뷰)
+- 배경: `#ffffff`, 테두리 없음
+- 패딩: 0(그리드 갭에 의존)
+- 내용: 40px 원형 아바타 + 16px 600 웨이트 이름 + 14px 400 애시 그레이 날짜를 한 행에, 아래에 14px 500 본문 단락
+
+### 입력 필드 및 폼
+
+**검색 바**(홈페이지 주요)
+- 배경: `#ffffff`
+- 테두리: 세 세그먼트(어디 / 언제 / 인원)를 감싸는 1px solid 헤어라인 그레이 `#dddddd`
+- 반경: 32px(풀 필)
+- 그림자: `rgba(0, 0, 0, 0.04) 0 2px 6px 0` — 미묘하게 떠 있는 느낌
+- 구조: 얇은 세로 구분선으로 나뉜 세 세그먼트, 각 세그먼트에 12px 500 레이블과 14px 500 플레이스홀더
+- 제출: 우측 끝에 Rausch 원형 아이콘 버튼, 직경 48px
+
+**텍스트 입력**(일반 폼)
+- 배경: `#ffffff`
+- 테두리: 1px solid 헤어라인 그레이 `#dddddd`
+- 반경: 8px
+- 패딩: 14px 16px
+- 포커스: 테두리가 잉크 블랙으로 전환되고 `0 0 0 2px` 블랙 외부 링이 추가됨
+- 에러: 테두리가 `#c13515`(에러 레드)로 전환되고 헬퍼 텍스트도 같은 색
+
+**날짜 피커**
+- 달력 그리드: 7열 레이아웃, 원형 `50%` 날짜 셀, 너비 40–44px
+- 선택된 범위: 잉크 블랙 `#222222` 배경에 흰 숫자
+- 시작/끝 앵커: 더 큰 채워진 원; 중간 날짜는 소프트 클라우드 `#f7f7f7` 틴트
+
+### 내비게이션
+
+**상단 내비(데스크톱)**
+- 높이: 약 80px
+- 배경: `#ffffff`
+- 왼쪽: Rausch 색의 Airbnb 워드마크+로고 lockup(102×32px)
+- 중앙: 세 탭 카테고리 피커(홈 / 체험 / 서비스), 36–48px 3D 아이콘을 위에, 16px 500 레이블을 아래에; 활성 탭은 2px 잉크 블랙 밑줄
+- 오른쪽: "호스트 되기" 텍스트 링크, 32px 원형 글로브(언어), 36px 햄버거 아바타 메뉴
+- 하단 테두리: 1px solid 헤어라인 그레이 `#dddddd`
+
+**상단 내비(모바일)**
+- 전체 너비 검색 필이 한 행을 차지: "여행지를 찾아보세요" 플레이스홀더와 작은 돋보기 아이콘
+- 아래: 세 탭 카테고리 피커가 유지됨(홈 / 체험 / 서비스)——일러스트 아이콘이 약 28px로 축소
+- 하단 고정 탭 바: 탐색(활성 상태 Rausch) / 위시리스트 / 로그인——24px 아이콘 위에 12px 레이블
+
+**숙소 세부 보조 내비**
+- 히어로 이미지를 스크롤하면 나타나는 스티키 수평 스크롤 앵커 링크(사진 · 편의시설 · 리뷰 · 위치 · 호스트)
+- 높이: 56px
+- 하단 테두리: 1px solid 헤어라인 그레이
+
+### 이미지 처리
+
+- **주요 비율**: 홈페이지 숙소 그리드 4:3, 체험 히어로 사진 16:9, 아바타 1:1
+- **반경**: 숙소 그리드 이미지 14px, 세부 페이지 히어로 사진 프레임 20px, 아바타 `50%`
+- **세부 페이지 이미지 그리드**: 큰 왼쪽 이미지(50% 너비) 1장과 오른쪽 2×2 작은 사진 4장으로 구성된 다섯 사진 그리드, 모두 20px 둥근 외부 컨테이너 공유
+- **지연 로딩**: `loading="lazy"`를 광범위하게 사용하고 블러 처리된 플레이스홀더 미리보기 먼저 제공
+- **캐러셀**: 32px 원형 화살표 버튼이 이미지에 겹쳐 수직 중앙에 배치; 도트 인디케이터는 하단에서 12px 위
+
+### 시그니처 컴포넌트
+
+**게스트 즐겨찾기 어워드 Lockup**(높은 평점의 숙소 세부 페이지에 두드러지게 표시)
+- 700 웨이트로 44–56px 중앙 정렬된 평점 숫자
+- 좌우에 손그림 월계관 SVG 일러스트, 각 약 48px 높이
+- 아래: 12px 700 대문자 "게스트 즐겨찾기" 레이블, 자간 0.32px, 14px 500 애시 그레이 서브레이블
+- 전체 너비 블록, 컨테이너 테두리 없음——흰 캔버스 위에 직접 배치
+
+**세 탭 카테고리 피커**(모든 탐색 화면 상단에 표시)
+- 세 탭: 홈 / 체험 / 서비스
+- 각 탭: 약 48px 높이의 3D 렌더링 일러스트 아이콘(집, 기구, 벨)과 16px 500 레이블 조합
+- 체험과 서비스에는 현재 아이콘 우측 상단에 작은 네이비 블루 "NEW" 필(12px 700 흰 텍스트에 다크 블루 배경)이 떠 있음
+- 활성 탭: 레이블 아래 2px 잉크 블랙 밑줄
+
+**영감 도시 그리드**(홈페이지 "미래 여행을 위한 영감")
+- 데스크톱 6열, 모바일 2열의 목적지 링크 그리드
+- 각 셀: 1행에 16px 600 도시명, 2행에 14px 500 애시 그레이 렌탈 유형 서브타이틀("코티지 렌탈", "빌라 렌탈")
+- 이미지 없음——텍스트 전용 그리드
+- 카테고리 탭으로 상단 구분(인기 / 예술 & 문화 / 해변 / 산 / 아웃도어 / 체험 / 여행 팁 & 영감 / Airbnb 친화 아파트)——활성 탭은 2px 밑줄과 웨이트 변화
+
+**예약 스티키 카드**(숙소 세부 페이지)
+- 사용자가 히어로를 스크롤하면 데스크톱에서 뷰포트 상단에서 120px 아래에 고정
+- 모바일에서는 "₩X부터 / 박" 레이블과 Rausch "예약" 필이 있는 전체 너비 하단 바로 접힘
+- 항상 표시: 가격 헤드라인 → 날짜 표시 → 게스트 선택기 → Rausch CTA → "아직 청구되지 않습니다" 면책사항
+
+**체험 호스트 카드**(체험 세부 페이지)
+- 상단에 3:2 커버 사진이 있는 전체 너비 둥근 컨테이너
+- 원형 호스트 아바타(56px)가 커버 하단 가장자리에 50% 겹쳐 표시
+- 겹침 아래: 호스트 이름 16px 700, 호스팅 기간 14px 500 애시 그레이, 작은 Rausch "호스트에게 연락" 필 버튼
+- 리뷰와 편의시설/위치 블록 사이의 전환으로 사용
+
+**"알아두어야 할 사항" 스트립**(숙소 세부 페이지)
+- 규칙/정책의 3열 블록(하우스 규칙, 안전 및 재산, 취소 정책)
+- 각 열: 상단에 아이콘, 16px 600 제목, 14px 500 애시 그레이 본문, 잉크 블랙 밑줄 "더 보기" 링크
+- 구분선: 전체 스트립의 상하에 1px 헤어라인 그레이 테두리
+
+## 5. 레이아웃 원칙
+
+### 간격 시스템
+- **기본 단위**: 8px
+- **추출된 스케일**: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px——픽셀 퍼펙트 아이콘 정렬을 위한 오프그리드 값 몇 가지가 포함된 세밀한 스케일
+- **섹션 패딩**: 데스크톱 상하 약 48–64px, 모바일 24–32px
+- **카드 내부 패딩**: 예약 패널과 대형 카드에 24px, 편의시설 행에 16px, 숙소 카드 메타데이터에 12px
+- **숙소 카드 사이 거터**: 데스크톱 24px, 모바일 16px
+- **쌓인 텍스트 행 사이**: 4–8px(매우 촘촘——여행 숙소의 "정보 밀도" 느낌을 강화)
+
+### 그리드 및 컨테이너
+- **최대 콘텐츠 너비**: 초와이드에서 1760–1920px(Airbnb는 대부분의 사이트보다 그리드를 더 넓게 확장); 대부분의 세부 페이지는 1280px
+- **홈페이지 숙소 그리드**: ≥1760px에서 6열, ≥1440px에서 5열, ≥1128px에서 4열, ≥800px에서 3열, ≥550px에서 2열, 이하 1열
+- **세부 페이지**: 2열 비대칭——메인 콘텐츠 약 58%, 스티키 예약 패널 오른쪽 약 36%, 약 6% 거터
+- **푸터**: 3열 지원 / 호스팅 / Airbnb
+
+### 여백 철학
+Airbnb는 정보 밀도가 높지만 결코 답답하지 않다. 여백은 *그룹화*를 위해 사용된다——숙소 카드에는 24px의 거터가 있어 각 사진이 별도의 객체로 읽힌다. 그러나 각 카드 아래의 메타데이터는 4–8px 간격을 사용하여 가격/도시/날짜가 하나의 단위처럼 느껴진다. 세부 페이지 예약 패널에는 24px의 내부 패딩이 있지만, 내부 행(날짜 피커, 게스트 선택기, CTA)은 12px로 쌓여 있다——카드와 페이지 사이의 경계가 내부 콘텐츠보다 더 많은 분리 작업을 한다.
+
+### 테두리 반경 스케일
+| 반경 | 사용처 |
+|--------|-----|
+| 4px | 인라인 앵커 태그, 태그 칩 |
+| 8px | 텍스트 버튼, 드롭다운, 소형 유틸리티 버튼 |
+| 14px | 숙소 카드 사진, 일반 콘텐츠 컨테이너, 배지 |
+| 20px | 주요 둥근 버튼(필 형태), 대형 이미지, 예약 패널 |
+| 32px | 검색 바 필, 초대형 컨테이너 |
+| 50% | 모든 원형 아이콘 버튼, 모든 아바타, 위시리스트 하트——시스템의 시그니처 둥근 기하학 |
+
+## 6. 깊이 및 엘리베이션
+
+| 레벨 | 처리 | 사용처 |
+|-------|-----------|-----|
+| 0 | 그림자 없음 | 숙소 카드, 본문 콘텐츠, 텍스트 전용 섹션 |
+| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | 활성/누름 아이콘 버튼(뒤로, 공유, 즐겨찾기 등)——인터랙션을 나타내는 미묘한 리프트 |
+| 2 | `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` | 예약 패널 스티키 카드, 모달, 드롭다운 메뉴——시스템의 시그니처 3겹 엘리베이션 |
+| 포커스 링 | `0 0 0 2px #222222` | 활성 상태 버튼, 포커스된 검색 입력 |
+| 화이트 구분 링 | `rgb(255, 255, 255) 0 0 0 4px` | 사진 위에 겹쳐진 원형 버튼——4px 화이트 링이 버튼을 컬러풀한 이미지 배경에서 깔끔하게 분리 |
+
+그림자 철학: Airbnb는 단일 드롭 대신 **쌓인 레이어드 그림자**를 사용한다. 3겹 예약 패널 그림자는 하나의 응집된 리프트로 읽히지만 실제로는 서로 다른 불투명도/블러 값의 세 개의 독립된 그림자——그림자 주변에 미묘한 안티앨리어싱을 생성하여 무겁지 않으면서도 프리미엄하게 느껴진다.
+
+### 장식적 깊이
+- **사진이 곧 깊이**: 시스템은 시각적 깊이를 만들기 위해 전면 사진에 크게 의존한다; 그림자와 그라디언트는 아껴 사용되어 사진이 무거운 작업을 하도록 한다
+- **월계관 Lockup**: 게스트 즐겨찾기 어워드는 두 SVG 월계관 일러스트를 사용하여 그렇지 않으면 평평했을 평점 숫자에 의식적인 트로피 같은 존재감을 부여한다
+- **3D 렌더링 카테고리 아이콘**: 홈/체험/서비스 아이콘에는 아트워크에 구워진 부드러운 내부 조명과 미묘한 그림자가 있다——브랜드가 "입체적인" 일러스트를 허용하는 유일한 곳
+
+## 7. 해야 할 것과 하지 말아야 할 것
+
+### 해야 할 것
+- Rausch `#ff385c`를 주요 액션과 활성 탭 인디케이터를 위해 아껴두기——장식적 사용으로 희석하지 않는다.
+- 사진이 숨 쉬게 하기——4:3 크롭, 14–20px 둥근 모서리, 텍스트 오버레이 없음, 그라디언트 스크림 없음.
+- Rausch 아래의 모든 텍스트 레이어에 잉크 블랙 `#222222` 사용——이것이 시스템의 니어블랙이며, 순수한 `#000000`이 아니다.
+- 세 탭 카테고리 피커의 3D 일러스트 아이콘을 플랫 타이포그래피와 페어링——단일 화면 내에서 일러스트 스타일을 혼용하지 않는다.
+- 세 개의 낮은 불투명도 그림자(약 2%, 4%, 10%)를 쌓아 시그니처 예약 패널 엘리베이션을 만든다.
+- 모든 카드 간 및 행 간 구분선에 헤어라인 그레이 `#dddddd` 1px 테두리를 사용한다.
+- 데스크톱에서는 예약 패널을 스티키로, 모바일에서는 하단 고정 예약 바로 접는다.
+- 메타데이터 그룹 내에는 4–8px 간격을, 카드 사이에는 24px를 사용——정보 밀도는 의도된 것이다.
+
+### 하지 말아야 할 것
+- Rausch / Plus 마젠타 / Luxe 퍼플 프로덕트 티어 팔레트 외에 세컨더리 액센트 컬러를 도입하지 않는다.
+- 사진 안에 텍스트를 배치하지 않는다——캡션은 항상 이미지 아래에, 오버레이하지 않는다.
+- 8px 위첨자 역할을 제외하고 올대문자 레이블을 사용하지 않는다.
+- 아이콘 버튼을 50% 이외의 각도로 둥글게 하지 않는다——원형이 시스템의 시그니처 기하학이다.
+- 숙소 카드에 드롭 그림자를 추가하지 않는다——그것들은 흰 캔버스 위에 엘리베이션 없이 놓인다.
+- 그라디언트 배경을 사용하지 않는다——시스템의 유일한 그라디언트는 워드마크 위의 좁은 Rausch → 마젠타 스윕이다.
+- 400 레귤러 폰트 웨이트를 사용하지 않는다——Airbnb Cereal의 본문 웨이트는 500이다.
+- Airbnb Cereal VF를 다른 디스플레이 서체로 재정의하지 않는다——시스템은 의도적으로 단일 패밀리다.
+
+## 8. 반응형 동작
+
+### 브레이크포인트
+
+Airbnb는 약 60개의 브레이크포인트를 선언하지만(컴포넌트 라이브러리의 디자인 타임 아티팩트), 의미 있는 레이아웃 변화는 훨씬 작은 세트에서 일어난다:
+
+| 이름 | 너비 | 주요 변화 |
+|------|-------|-------------|
+| 울트라와이드 | ≥1760px | 6열 숙소 그리드, 1760–1920px 최대 콘텐츠 너비 |
+| 데스크톱 XL | 1440–1759px | 5열 그리드, 전체 내비 표시, 스티키 우측 레일 예약 패널 |
+| 데스크톱 | 1128–1439px | 4열 그리드, 스티키 예약 패널 유지 |
+| 노트북 | 1024–1127px | 3–4열 그리드, 카테고리 내비 수평 유지 |
+| 태블릿 | 800–1023px | 3열 그리드, 글로벌 검색이 단일 행 필로 접힐 수 있음 |
+| 소형 태블릿 | 550–799px | 2열 그리드, 예약 패널이 전체 너비 인라인 블록으로 내려옴 |
+| 모바일 | 375–549px | 1열 쌓인 레이아웃, 하단 고정 탭 바 등장(탐색 / 위시리스트 / 로그인) |
+| 소형 모바일 | <375px | 엣지 패딩이 16px로 타이트해짐; 카테고리 피커 아이콘이 약 28px로 축소 |
+
+### 터치 타깃
+모든 인터랙티브 요소는 44×44px 이상을 충족한다. 원형 아이콘 버튼 패밀리는 32–44px로 설계되었으며 8–12px의 확장 히트 에어리어 패딩이 있다. Rausch 주요 예약 버튼은 약 48px 높이. 세 탭 카테고리 피커의 히트 에어리어는 레이블+아이콘 전체 직사각형(일반적으로 탭당 약 64×80px).
+
+### 접기 전략
+- **내비**: 태블릿 이상에서는 Airbnb 워드마크 + 세 탭 피커를 유지; 모바일에서는 피커가 검색 필 바로 아래로 슬라이드되고, 글로브/아바타 컨트롤은 하단 고정 탭 바로 이동.
+- **검색 바**: 데스크톱에서는 Rausch 원형 제출 버튼이 있는 세 세그먼트 필(어디 / 언제 / 인원); 모바일에서는 단일 행 "여행지를 찾아보세요" 필로 접히고, 탭하면 전체 화면 검색 시트가 열린다.
+- **예약 패널**: ≥1128px에서 스티키 우측 레일; 800–1127px에서 메인 콘텐츠 열 인라인; <800px에서 하단 고정 "예약" 필.
+- **숙소 그리드**: 브레이크포인트를 가로질러 6 → 5 → 4 → 3 → 2 → 1열로 리플로우.
+- **세부 페이지 이미지 그리드**: 데스크톱에서 5장 레이아웃(큰 1장 + 작은 4장); 모바일에서 페이지 도트 인디케이터가 있는 스와이프 가능한 전면 캐러셀로 변환.
+- **푸터**: 3열 레이아웃이 <800px에서 단일 열 쌓기로 접힘.
+
+### 이미지 동작
+- `loading="lazy"` 전역 적용, 블러 처리된 `im_w=` URL 파라미터화 미리보기 썸이 먼저 제공됨
+- 반응형 이미지는 Airbnb의 `muscache.com` CDN을 사용하며 `im_w` 쿼리 파라미터로 너비 기반 전달(`im_w=240`, `im_w=720`, `im_w=1200`, `im_w=2400`)
+- 아트 디렉션 크롭 없음——같은 이미지가 브레이크포인트를 가로질러 스케일 업/다운
+- 캐러셀은 소스 비율에 관계없이 일관된 4:3 비율을 유지하기 위해 사진 높이를 자동 조정
+
+## 9. 에이전트 프롬프트 가이드
+
+### 빠른 컬러 참조
+- 주요 CTA: "Rausch (#ff385c)"
+- 페이지 배경: "Canvas White (#ffffff)"
+- 서브서피스: "Soft Cloud (#f7f7f7)"
+- 제목/본문 텍스트: "Ink Black (#222222)"
+- 보조 텍스트: "Ash Gray (#6a6a6a)"
+- 테두리/구분선: "Hairline Gray (#dddddd)"
+- 에러: "Error Red (#c13515)"
+- 인포 링크: "Info Blue (#428bff)"
+- Luxe 티어 액센트: "Luxe Purple (#460479)"
+- Plus 티어 액센트: "Plus Magenta (#92174d)"
+
+### 컴포넌트 프롬프트 예시
+- "주요 예약 버튼 만들기: Rausch (#ff385c) 배경, 흰 Airbnb Cereal 500 웨이트 16px 레이블, 14px × 24px 패딩, 8px 테두리 반경, 그림자 없음. 활성/누름 시 `transform: scale(0.92)` 추가와 2px 잉크 블랙 포커스 링(`0 0 0 2px #222222`)."
+- "숙소 카드 만들기: 14px 테두리 반경의 4:3 전면 사진, 컨테이너 그림자 없음; 이미지 아래 4px 간격으로 세 텍스트 행 쌓기: 도시명 16px 600 잉크 블랙, 렌탈 유형 14px 500 애시 그레이(#6a6a6a), 가격 범위 16px 500 잉크 블랙과 14px '1박당' 접미사."
+- "스티키 예약 패널 디자인: 흰 배경, 14px 테두리 반경, 1px 헤어라인 그레이(#dddddd) 테두리, 3겹 엘리베이션 그림자(`rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`), 24px 패딩, 370px 너비, 데스크톱에서 뷰포트 상단에서 120px 아래에 고정. 내용: 가격 헤드라인, 날짜 피커, 게스트 드롭다운, Rausch 주요 CTA, 12px 애시 그레이 '아직 청구되지 않습니다' 면책사항."
+- "세 탭 카테고리 피커 만들기: 홈, 체험, 서비스로 레이블된 세 개의 등너비 탭; 각 탭에 약 48px 3D 렌더링 일러스트 아이콘(집, 기구, 벨)을 위에, 16px 500 잉크 블랙 레이블을 아래에; 활성 탭은 2px 잉크 블랙 밑줄; 체험과 서비스 아이콘 우측 상단에 다크 네이비 배경의 작은 12px 700 흰 'NEW' 필 추가."
+- "게스트 즐겨찾기 어워드 Lockup 렌더링: 52px 700 웨이트 잉크 블랙으로 중앙 정렬된 평점 숫자, 좌우에 손그림 SVG 월계관(높이 약 48px); 아래에 12px 700 대문자 'GUEST FAVORITE' 레이블, 자간 0.32px; 서브레이블 14px 500 애시 그레이; 컨테이너 테두리 없이 흰 캔버스 위에 전체 너비 블록으로 직접 배치."
+
+### 반복 가이드
+이 디자인 시스템으로 생성된 기존 화면을 다듬을 때:
+1. 한 번에 **하나의 컴포넌트**에 집중한다.
+2. 이 문서의 구체적인 컬러 이름과 헥스 코드를 참조한다(예: "잉크 블랙 #222222", "다크 그레이" 아님).
+3. 자연어 설명과 측정값을 함께 사용한다("긴 그림자 문자열"이 아닌 "미묘한 3겹 엘리베이션").
+4. 원하는 "느낌"을 설명한다("매거진 같은, 사진 우선" vs "고밀도 유틸리티").
+5. 항상 본문에는 Airbnb Cereal VF 500 웨이트, 강조에는 600–700을 기본으로——400 사용 금지.
+6. Rausch 핑크를 희소하게 유지——하나의 뷰포트에 Rausch 색의 요소가 두 개 이상 나타나면 그 중 하나를 중화할지 고려한다.
+
+### 알려진 격차
+- **홈페이지 숙소 그리드 카드**: 주요 숙소 카드 그리드(airbnb.com의 주요 비주얼 서피스)는 추출된 홈페이지 스크린샷에서 완전히 캡처되지 않았다——콘텐츠가 부분적으로만 로드되었다. 위의 숙소 카드 사양은 영감 그리드 구조와 Airbnb의 더 넓은 관행에서 추론된 것이다; 프로덕션 사용 전에 라이브 사이트에서 정확한 비율과 메타데이터 위계를 확인한다.
+- **체험 카테고리 아이콘**: 홈/체험/서비스의 3D 일러스트 아이콘은 래스터 자산으로 제공된다; 정확한 소스 파일 사양(SVG 대 PNG, 렌더링된 픽셀 치수)은 여기에 문서화되어 있지 않다.
+- **애니메이션 및 전환 타이밍**: 캡처되지 않음——정적 추출 범위.
+- **다크 모드**: Airbnb는 추출된 프로덕트 서피스에서 네이티브 다크 모드를 출시하지 않았다; 이 문서는 단일 라이트 모드 테마만 설명한다.