④段整套同步（六节＋ 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,583 @@
+# 스타벅스에서 영감을 받은 디자인 시스템
+
+> Category: 이커머스 & 리테일
+> 글로벌 커피 리테일 브랜드. 4단계 그린 시스템, 따뜻한 크림 캔버스, 풀 필 버튼.
+
+## 1. 비주얼 테마 & 분위기
+
+스타벅스 디자인 시스템은 매장 앞치마의 그린을 모든 화면에 걸쳐 입힌 **따뜻하고 자신감 넘치는 리테일 플래그십**입니다. 캔버스는 중성적인 따뜻한 크림(`#f2f0eb`)과 도자기 같은 오프화이트(`#edebe9`) 사이를 오가는데, 이는 실제 매장 소재인 종이 냅킨, 카페 벽, 우드 마감재를 참조한 색상입니다. 반면 시그니처 **스타벅스 그린**(`#006241`)은 히어로 밴드, CTA, 리워즈 경험에서 브랜드의 핵심 순간을 고정합니다. 그린은 4가지 정교하게 조율된 색조(Starbucks, Accent, House, Uplift)로 구성되며 각각 특정 서피스 역할에 매핑됩니다. 골드(`#cba258`)는 리워즈 상태 세리머니에서만 등장하고, 일반적인 액센트로는 사용되지 않습니다.
+
+타이포그래피가 브랜드 보이스의 대부분을 담당합니다. 전용 **SoDoSans** 서체(스타벅스 커스텀)는 촘촘한 `-0.16px` 자간과 함께 거의 모든 화면에 사용됩니다. 패션 매거진처럼 날카롭지 않고, 자신감 있으면서도 친근하게 읽힙니다. 특이한 점은, 리워즈 페이지가 특정 헤드라인 순간에 따뜻한 세리프체(`"Lander Tall", "Iowan Old Style", Georgia`)로 전환해 커피하우스 칠판의 향수를 은근히 담아낸다는 것입니다. 그리고 채용 페이지는 컵에 이름을 적는 느낌의 터치를 위해 손글씨 스크립트체(`"Kalam", "Comic Sans MS", cursive`)를 사용합니다. 세 가지 서체, 세 가지 맥락—시스템은 각각의 등장 시점에 대해 철저히 규율을 지킵니다.
+
+서피스는 둥근 형태를 통해 숨을 쉽니다. 모든 버튼은 50px 풀 필입니다. 카드는 12px 둥근 사각형을 사용합니다. "Frap" 플로팅 CTA—Green Accent(`#00754A`)의 56px 원형 주문 버튼—는 제품의 시그니처 깊이감 표현입니다. 오른쪽 하단에 떠 있으며 레이어드 그림자 스택(`0 0 6px rgba(0,0,0,0.24)` 베이스 + `0 8px 12px rgba(0,0,0,0.14)` 앰비언트)을 갖고, 누를 때 `scale(0.95)`로 압축됩니다. 그 외의 엘리베이션은 절제되어 있습니다. 카드 그림자는 `0.14/0.24` 알파로 속삭이듯 유지되고, 글로벌 내비게이션은 조용한 3레이어 그림자 스택을 사용합니다. 전체 시스템은 깔끔한 카페 간판처럼 느껴집니다. 가독성 있고, 따뜻하며, 결코 소리치지 않습니다.
+
+**주요 특성:**
+- 4단계 그린 브랜드 시스템(Starbucks / Accent / House / Uplift): 단일 "브랜드 그린"이 아닌, 각각 고유한 서피스 역할에 매핑됨
+- 골드는 리워즈 상태 순간에만 예약; 범용 액센트로 절대 사용하지 않음
+- 차가운 흰색 대신 따뜻한 중성 캔버스(`#f2f0eb` / `#edebe9`) 사용 — 카페 소재 참조
+- 촘촘한 `-0.16px` 자간의 커스텀 전용 서체(SoDoSans)가 보편적 보이스
+- 맥락별 서체 전환: 리워즈에는 세리프(Lander Tall), 채용 컵 이름에는 스크립트(Kalam)
+- 풀 필 버튼(`50px` 반경) 보편 적용, `scale(0.95)` 활성 프레스가 시그니처 마이크로 인터랙션
+- 플로팅 "Frap" 원형 CTA(`56px`, Green Accent 채우기, 레이어드 그림자 스택) — 제품의 시그니처 엘리베이션 요소
+- 기프트 카드 서피스는 **촬영된 실제 제품**으로 설계 — 모든 카드는 생성 그래픽이 아닌 고유한 일러스트 사진
+- 12px 카드 반경 + 속삭이듯 부드러운 그림자로 콘텐츠 카드를 납작하되 살짝 떠 있는 느낌으로 유지
+- `--space-3`인 1.6rem(~16px)을 기준점으로 6.4rem(~64px)까지 단계별로 올라가는 렘 기반 간격 스케일
+
+**색상 블록 페이지 리듬:** 크림 히어로 → 흰색 콘텐츠 섹션 → 흰색 텍스트의 다크 그린(`#1E3932`) 피처 밴드 → 크림 유틸리티 존 → 골드/흰색 텍스트의 다크 그린(`#1E3932`) 푸터 — 밝은 본문을 에스프레소처럼 어두운 양 끝이 감싸는 구조.
+
+## 2. 컬러 팔레트 & 역할
+
+**분석한 소스 페이지:** 홈페이지, 리워즈, 기프트 카드, 상품 상세(Pink Energy Drink), 상품 영양 정보(Cold Brew).
+
+### 기본
+
+- **Starbucks Green** (`#006241`): 전통적인 브랜드 그린. h1 헤딩, 리워즈 페이지의 주요 섹션 헤더, 단일 지배 색상이 필요한 곳에서 메인 브랜드 신호로 사용.
+- **Green Accent** (`#00754A`): 약간 더 밝고 발광감 있는 그린. 주요 채워진 CTA 색상("Explore our afternoon menu", "See the spring menu")이자 플로팅 Frap 원형 버튼의 채우기 색상.
+- **House Green** (`#1E3932`): 깊고 거의 검정에 가까운 브랜드 그린. 푸터 서피스, 피처 밴드 배경, 리워즈 상태 다크 서피스, 리워즈 히어로 밴드의 "Free coffee is just the beginning" 헤드라인에 사용.
+- **Green Uplift** (`#2b5148`): 장식용 액센트와 다크 그라디언트 순간에 드물게 사용되는 보조 미드다크 그린.
+- **Green Light** (`#d4e9e2`): 폼 유효 상태 틴트와 라이트 그린 유틸리티 서피스에 사용되는 연한 민트.
+
+### 보조 & 액센트
+
+- **Gold** (`#cba258`): 거의 리워즈 상태 세리머니 전용 — 골드 티어 콜아웃, 파트너십 배지(SkyMiles, Bonvoy), 프리미엄 느낌의 액센트. 범용 브랜드 색상으로 절대 사용하지 않음.
+- **Gold Light** (`#dfc49d`): 골드 티어 섹션의 배경 워시에 사용되는 더 부드러운 골드.
+- **Gold Lightest** (`#faf6ee`): 리워즈 페이지 파트너십 섹션 하단에 사용되는 크림 골드 페이지 서피스 워시 — 골드 액센트를 따뜻한 중성 시스템과 연결.
+
+### 서피스 & 배경
+
+- **White** (`#ffffff`): 기본 카드와 모달 서피스. 기프트 카드 타일의 카드 채우기에도 사용.
+- **Neutral Cool** (`#f9f9f9`): 드롭다운 메뉴("Account" 드롭다운), 폼 카드 래퍼, 조용한 유틸리티 컨테이너에 사용되는 미묘한 쿨 그레이 서피스.
+- **Neutral Warm** (`#f2f0eb`): 리워즈 유틸리티 존과 히어로 밴드의 따뜻한 크림 **기본 페이지 캔버스**.
+- **Ceramic** (`#edebe9`): 존 구분자, 부드러운 페이지 섹션 워시, 리워즈 파트너십 밴드에 사용되는 약간 더 따뜻하고 어두운 크림.
+- **Black** (`#000000`): 페이지 상단 CTA 스트립("Join now")과 고대비 탑 내비 로그인 버튼에 예약된 짙은 잉크.
+
+### 중성 & 텍스트
+
+- **Text Black** (`rgba(0, 0, 0, 0.87)`): 밝은 서피스의 기본 헤딩 및 본문 색상. 순수 검정이 아닌 87% 불투명도의 검정으로 더 따뜻하게 읽힘.
+- **Text Black Soft** (`rgba(0, 0, 0, 0.58)`): 밝은 서피스의 보조/메타데이터 텍스트.
+- **Text White** (`rgba(255, 255, 255, 1)`): 다크 그린 서피스의 기본 헤딩/본문 텍스트.
+- **Text White Soft** (`rgba(255, 255, 255, 0.70)`): 다크 그린 서피스의 보조 텍스트 — 푸터 링크 설명, 캡션 텍스트.
+- **Rewards Green** (`#33433d`): 리워즈 페이지 텍스트 블록에서만 사용되는 전용 뮤트 슬레이트 그린 — 완전한 Starbucks Green을 사용하지 않으면서도 "리워즈 서피스"를 암시하는 약간 "먼지 낀" 독서 색상.
+
+### 시맨틱 & 액센트
+
+- **Red** (`#c82014`): 오류 및 파괴적 상태(폼 무효, 파괴적 액션).
+- **Yellow** (`#fbbc05`): 경고 상태, 레거시 브랜드 터치.
+- **Green Light** (33% 불투명도의 `#d4e9e2` = `hsl(160 32% 87% / 33%)`): 폼 유효 필드 틴트 배경.
+- **Red Tint** (`hsl(4 82% 43% / 5%)`): 폼의 무효 필드 틴트.
+
+### 블랙/화이트 알파 래더
+
+오버레이 및 보조 텍스트 사용을 위한 두 가지 병렬 반투명 스케일:
+- `rgba(0,0,0,0.06)`부터 `rgba(0,0,0,0.90)`까지 10% 단계 — 밝은 서피스의 다크 오버레이용
+- `rgba(255,255,255,0.10)`부터 `rgba(255,255,255,0.90)`까지 10% 단계 — 다크 서피스의 라이트 오버레이용
+
+### 그라디언트 시스템
+
+구조적 그라디언트 토큰은 관찰되지 않음. 서피스 계층은 전체적으로 단색 블록으로 구성 — 시스템은 그라디언트 대신 5단계 크림/그린 서피스 팔레트에 의존함.
+
+## 3. 타이포그래피 규칙
+
+### 폰트 패밀리
+
+- **기본:** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` — 거의 모든 서피스에 사용되는 스타벅스 전용 기업 서체
+- **로딩 폴백:** `"Helvetica Neue", Helvetica, Arial, sans-serif` — SoDoSans 로드 전 사용자에게 표시되는 서체
+- **리워즈 세리프:** `"Lander Tall", "Iowan Old Style", Georgia, serif` — 따뜻한 에디토리얼 느낌을 위해 특정 리워즈 페이지 헤드라인 순간에 사용
+- **채용 스크립트:** `"Kalam", "Comic Sans MS", cursive` — 스타벅스 컵에 적힌 손글씨 이름을 참조하여 채용 페이지 "컵 이름" 장식 터치에만 사용
+
+`:root`에서 명시적으로 활성화된 OpenType 스타일 세트 없음.
+
+### 계층 구조
+
+| 역할 | 크기 | 굵기 | 행 높이 | 자간 | 비고 |
+|------|------|--------|-------------|----------------|-------|
+| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | 가장 큰 리워즈/히어로 디스플레이 |
+| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | 보조 히어로 헤딩 |
+| Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | 랜딩 섹션 헤드라인 |
+| H1 | 24px | 600 | 36px | -0.16px | Starbucks-Green 기본 헤딩 |
+| H2 | 24px | 400 | 36px | -0.16px | Text Black의 보통 굵기 섹션 제목 |
+| Body Large | 19px | 400–600 | 33.25px (~1.75) | -0.16px | 히어로 인트로 카피, 피처 밴드 본문 |
+| Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | 기본 본문 카피 |
+| Small (text-2) | 1.4rem / ~14px | 400–600 | 1.5 | -0.01em | 버튼 레이블, 메타데이터, 폼 레이블 |
+| Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | 활성 플로트 레이블 상태, 캡션 마이크로 카피 |
+| 버튼 레이블 | 14–16px | 400–600 | 1.2 | -0.01em | 모든 필 버튼 레이블 |
+
+**자간 토큰:**
+- `letterSpacingNormal`: `-0.01em` (기본 — 촘촘하고 특징적)
+- `letterSpacingLoose`: `0.1em` (강조 캡스)
+- `letterSpacingLooser`: `0.15em` (대문자 스타일 레이블, 극단적 강조)
+
+**행 높이 토큰:**
+- `lineHeightNormal`: `1.5` (본문)
+- `lineHeightCompact`: `1.2` (디스플레이/버튼)
+
+### 원칙
+
+- **촘촘한 네거티브 트래킹(`-0.01em`)** 은 거의 보편적으로 적용됩니다. 제품 전체가 약간 압축되어 읽히는데, 이는 SoDoSans에 쥐어짜인 느낌 없이 자신감 있는 존재감을 부여합니다.
+- **계층은 크기가 아닌 굵기 변화로 전달합니다.** H1과 H2는 동일한 24px/36px 크기를 공유하며, 굵기(600 대 400)와 색상(Starbucks-Green 대 Text Black)만으로 구분됩니다.
+- **크기 토큰은 렘을 사용하며, 이 사이트에서는 `1rem = 10px`로 고정됩니다**(`font-size: 62.5%` 루트 트릭 사용). 따라서 `1.6rem` = 16px, `2.4rem` = 24px 등. 스케일은 시맨틱(textSize-1부터 textSize-10까지)이며, 임의적인 픽셀 값이 아닙니다.
+- **맥락별 서체 전환** — 리워즈의 세리프, 채용의 스크립트 — 은 의도적이고 한정적입니다. 동일한 서피스 내에서 기본 산세리프와 혼합하지 마십시오.
+- **본문 텍스트는 절대 순수 검정이 아닙니다** — 따뜻한 중성 캔버스 온도에 맞추기 위해 `rgba(0,0,0,0.87)`에 위치합니다.
+
+### 폰트 대체에 관한 참고사항
+
+SoDoSans는 스타벅스 전용 서체입니다(House Industries 라이선스, 공개적으로 이용 불가). 합리적인 오픈소스 대체재:
+- **Inter** (Google Fonts) — 유사한 휴머니스트 기하학적 비율, 다양한 굵기 범위
+- **Manrope** — 약간 더 둥글고 유사한 자신감 있는 느낌
+- **Nunito Sans** — 더 따뜻하고, "카페" 브랜드 대체로 적합
+
+대체 시, 촘촘한 `-0.01em` / `-0.16px` 트래킹이 여전히 잘 읽히는지 확인하십시오. 일부 오픈소스 폰트는 `-0.005em`이 필요할 수 있습니다.
+
+Lander Tall(리워즈 세리프)도 커스텀입니다 — 오픈소스 대체재: **Iowan Old Style**(이미 폴백에 포함), **Lora**, 또는 **Source Serif Pro**. Kalam(채용 스크립트)은 Google Fonts에서 직접 이용 가능합니다.
+
+## 4. 컴포넌트 스타일링
+
+### 버튼
+
+**1. 기본 채워진 버튼 — "Explore our afternoon menu / Sign up for free"**
+- 배경: `#00754A` (Green Accent)
+- 텍스트: `#ffffff`
+- 테두리: `1px solid #00754A`
+- 반경: `50px` (풀 필)
+- 패딩: `7px 16px`
+- 폰트: SoDoSans, 16px, 굵기 600, 자간 `-0.01em`
+- 활성 상태: `--buttonActiveScale`을 통한 `transform: scale(0.95)`
+- 전환: `all 0.2s ease`
+
+**2. 기본 아웃라인 버튼 — "Give them a try / Start an order"**
+- 배경: 투명
+- 텍스트: `#00754A` (Green Accent)
+- 테두리: `1px solid #00754A`
+- 반경/패딩/활성/전환은 기본 채워진 버튼과 동일
+
+**3. 블랙 채워진 버튼 — "Join now"**
+- 배경: `#000000`
+- 텍스트: `#ffffff`
+- 테두리: `1px solid #000000`
+- 반경: `50px`, 패딩: `7px 16px`
+- 폰트: 14px, 굵기 600
+- 페이지 상단 가입 스트립과 유사한 전환 순간에 사용
+
+**4. 다크 아웃라인 — "Sign in"**
+- 배경: 투명
+- 텍스트: `rgba(0, 0, 0, 0.87)` (Text Black)
+- 테두리: `1px solid rgba(0, 0, 0, 0.87)`
+- 반경: `50px`, 패딩: `7px 16px`
+- 폰트: 14px, 굵기 600
+
+**5. 그린 위 그린 반전 — "See the spring menu"**
+- 배경: `#ffffff`
+- 텍스트: `#00754A`
+- 테두리: `1px solid #ffffff`
+- 버튼 뒤 서피스가 다크 그린 House Green 밴드인 경우 사용 — 그린 배경 위에 채워진 그린 필 대신 화이트 버튼에 그린 텍스트
+
+**6. 다크 위 아웃라인 — "Learn more / Order now"**
+- 배경: 투명
+- 텍스트: `#ffffff`
+- 테두리: `1px solid #ffffff`
+- 화이트 채워진 CTA와 짝을 이루는 보조 액션을 위해 다크 그린 피처 밴드에 사용
+
+**7. 동의 버튼 (다크 그린 변형)**
+- 배경: `rgb(0, 130, 72)` (쿠키 동의 모듈에 사용되는 특정 변형 그린)
+- 텍스트: `#ffffff`
+- 테두리 없음, `50px` 반경, `7px 16px` 패딩, 14px / 굵기 400
+- Green Accent보다 약간 더 밝음 — 동의 배너 동의 액션에 예약
+
+**8. Frap — 플로팅 원형 주문 버튼**
+- 배경: `#00754A` (Green Accent)
+- 아이콘: `#ffffff`
+- 크기: `5.6rem / 56px` (표준), `4rem / 40px` (미니 변형)
+- 반경: `50%` (완전한 원)
+- 오른쪽 하단 고정, 추가 탭 편의를 위한 `-0.8rem` 터치 오프셋
+- 그림자 스택: 베이스 `0 0 6px rgba(0,0,0,0.24)` + 앰비언트 `0 8px 12px rgba(0,0,0,0.14)`
+- 활성 상태: 앰비언트 그림자가 `0 8px 12px rgba(0,0,0,0)`으로 페이드
+- 제품의 시그니처 엘리베이션 요소 — 모든 스크롤된 서피스 위에 떠 있음
+
+**9. 전체 너비 피드백 탭 — "Provide feedback"**
+- 배경: `#00754A`
+- 텍스트: `#ffffff`
+- 반경: `12px 12px 0px 0px` (상단 둥글기만)
+- 패딩: `8px 16px`
+- 폰트: 14px, 굵기 400
+- 뷰포트 가장자리에 부착되어 오른쪽 하단 내부에 고정 배치
+
+### 카드 & 컨테이너
+
+**콘텐츠 카드 (기본)**
+- 배경: `#ffffff` (`--cardBackgroundColor`)
+- 반경: `12px` (`--cardBorderRadius`)
+- 그림자: `0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)` (`--cardBoxShadow`)
+- 사용처: 피처 카드, 메뉴 아이템 타일, 리워즈 상태 패널
+
+**기프트 카드 타일**
+- 배경: 일러스트 사진이 카드를 채움(단색 배경 없음)
+- 반경: 카드와 유사(`~12px`, 모서리가 약간 더 타이트)
+- 그림자: 기본 카드보다 가벼움 — 캔버스 위에 놓인 실제 카드처럼 처리됨
+- 카드 그리드 위에 카테고리 레이블로 분류(Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)
+
+**리워즈 상태 카드 (리워즈 페이지 시그니처)**
+- 3열 그리드: Bronze / Gold / Silver — 각각 다크 그린(`#1E3932`) 패널:
+  - 컬러 그라디언트/색상 헤더 링
+  - 번호가 매겨진 "Level" 배지
+  - 큰 SoDoSans 굵기 600의 상태 제목
+  - 흰색/반투명 흰색 텍스트의 별/혜택 목록
+  - 하단 "As you earn more stars…" 진행 캡션
+
+**파트너십 카드 (리워즈)**
+- 배경: `#faf6ee` (Gold Lightest) 따뜻한 크림 서피스
+- 콘텐츠: 파트너 로고("SkyMiles", "Bonvoy")가 중앙 배치, 아래 설명 텍스트
+- 반경과 그림자는 기본 카드 스펙을 따름
+
+**드롭다운 메뉴 (계정 드롭다운, 탑 내비)**
+- 배경: `#f9f9f9` (Neutral Cool)
+- 메뉴 아이템: Text Black에서 `24px / 굵기 400`
+- 테두리 없음 — 화이트 내비 대비 배경 서피스 전환만
+
+**모달**
+- 패딩: `2.4rem` (`--modalPadding`)
+- 상단 패딩: `8.8rem` (`--modalTopPadding`) — 닫기 버튼/헤더를 위한 공간
+- 수직 패딩 합계: `11.2rem`
+- 반경은 카드 스펙에서 상속(`12px`)
+
+### 입력 & 폼
+
+**플로팅 레이블 입력**
+- 포커스/채워진 상태에서 레이블이 입력 테두리 위로 떠오름
+- 데스크톱 레이블 폰트 크기: 기본 `1.9rem`, 활성 시 `1.4rem`으로 애니메이션
+- 모바일 레이블 폰트 크기: 기본 `1.6rem`, 활성 시 `1.3rem`으로 애니메이션
+- 레이블 수평 오프셋: 왼쪽에서 `12px`
+- 활성 레이블 이동: `-50%` Y 이동과 함께 `-12px` 위로
+- 필드 패딩: `12px`
+- 폼 수평 패딩: `1.6rem`
+- 유효성 검사: 유효한 필드는 `rgba(green-light, 0.33)` 틴트; 무효 필드는 `rgba(red, 0.05)` 틴트
+- 전환: 체크된 입력에 `0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)`
+
+**옵션 아이콘 (체크박스/라디오)**
+- 패딩: `3px` 내부
+- 위의 체크된 입력 큐빅 베지어 애니메이션 사용(약간 "스프링감 있는" 2.32 오버슈트 곡선)
+
+### 내비게이션
+
+**글로벌 내비 (탑 바)**
+- 점진적 높이로 고정 배치: `64px` xs → `72px` 모바일 → `83px` 태블릿 → `99px` 데스크톱
+- 그림자 스택: `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` — 3레이어 부드러운 리프트
+- 왼쪽: 스타벅스 워드마크 로고, 왼쪽 가장자리에서 `99px`(md) / `131px`(lg) 오프셋
+- SoDoSans 굵기 400–600의 인라인 기본 링크: Menu · Rewards · Gift Cards
+- 오른쪽: 매장 찾기 링크 + 로그인(아웃라인) + 지금 가입(블랙 채워진)
+
+**서브 내비 (두 번째 바, 예: 리워즈 내부)**
+- 높이: `53px` (글로벌 서브내비) / `48px` (내부 서브내비)
+- 일반적으로 글로벌 내비 아래 수평 탭 그룹
+
+**모바일 내비**
+- 태블릿 브레이크포인트 이하에서 햄버거 드로어로 접힘
+- Frap 플로팅 버튼은 내비 상태와 무관하게 오른쪽 하단에 유지
+
+### 이미지 처리
+
+- **히어로 사진**: 제품 사진(컬러 배경의 투명 유리에 담긴 음료 — 코랄, 세이지, 따뜻한 앰버)이 스플릿 히어로 레이아웃의 ~40vw를 차지; 텍스트가 나머지 60vw 차지(`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`)
+- **기프트 카드 일러스트**: 각 카드는 고유한 일러스트 사진(채색된 느낌, 손으로 그린 것 같은, 따뜻한 색상 팔레트). 일반적인 생성 그래픽 사용 금지.
+- **리워즈 세리머니 이미지**: 손에 들고 비스듬한 각도로 찍힌 스타벅스 리워즈 앱 화면 사진 — 맥락 속의 제품 사진.
+- **메뉴 썸네일**: 깨끗한 화이트/크림 배경과 유리 주위의 살짝 부드러운 드롭 그림자가 있는 정사각형 또는 4:3 제품 사진.
+- **이미지 페이드인**: 이미지 로드 시 `opacity 0.3s ease-in` 전환(`--imageFadeTransition`).
+
+### 피처 밴드 (다크 그린 히어로 스트립)
+
+전체 너비의 `#1E3932` (House Green) 밴드:
+- 왼쪽: 흰색 헤드라인 + 서브헤드 + CTA 행
+- 오른쪽: 제품 사진 또는 일러스트
+- 섹션에 따라 ~40/60 또는 50/50 분할 비율
+- 전체적으로 흰색 텍스트, 보조 카피에는 `rgba(255,255,255,0.70)`
+- CTA는 그린 위 그린 반전(화이트 채워진) + 다크 위 아웃라인(화이트 아웃라인) 쌍을 따름
+
+### 익스팬더 / 아코디언
+
+- 지속 시간: `300ms` (`--expanderDuration`)
+- 타이밍 곡선: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` — 측정된 이즈아웃
+- 리워즈 및 기프트 페이지의 FAQ 섹션에 사용
+
+### 쿠키 동의 모듈
+
+"동의"(그린 채워진)와 "환경 설정 관리"(아웃라인) 버튼이 있는 페이지 상단의 다크 그린 모달 카드. 첫 방문 시 나타나며 닫을 수 있음.
+
+### 상품 상세 컴포넌트 (PDP 시그니처 클러스터)
+
+메뉴 상품 페이지(예: 음료 상세는 `/menu/product/40498/iced`, 영양 정보는 `/menu/product/.../nutrition`)에서 사용되는 반복 컴포넌트 클러스터. 토큰을 변경하지 않으면서 컴포넌트 인벤토리를 확장합니다.
+
+**사이즈 옵션 셀렉터**
+- 4개의 컵 아이콘 버튼 수평 행(Tall / Grande / Venti / Trenta)
+- 각 항목: 상단에 컵 실루엣 아이콘, 아래에 사이즈 이름(Starbucks-Green의 16/700), 액체 온스 캡션(Text Black Soft의 13/400)
+- 활성 상태: 선택된 컵 아이콘 주위에 그린 원형 링 아웃라인(`2px solid #00754A`)
+- 비활성: 링 없음, 동일한 타이포그래피
+- 전체 너비 행, 균등 간격
+- 컨테이너 반경: `12px` 또는 플랫; 개별 아이콘은 `50%` 원형
+- 패딩: `16px 24px` 내부
+
+**에드인 / 우유 선택 (아웃라인 사각형)**
+- 배경: `#ffffff`
+- 테두리: `1px solid #d6dbde` (입력 테두리)
+- 반경: `4px`
+- 열 내에서 전체 너비
+- 상단 테두리 위 플로팅 레이블: "Add-ins" / "Milk" / "Add-ins" — Text Black의 13/700, 대문자, `0.325px` 자간
+- 중앙에 표시된 값(예: "Ice", "Coconut", "Strawberry Fruit Inclusions scoop"): 16/400 Text Black
+- 오른쪽 Text Black Soft의 셰브론 다운 아이콘
+- 포커스: 테두리가 Green Accent(`#00754A`)로 전환
+
+**숫자 스테퍼**
+- 수량이 필요한 경우(예: Strawberry Fruit Inclusions scoop) 에드인 행 내부에 삽입
+- `−` 마이너스 버튼 + 카운트 숫자 + `+` 플러스 버튼, 레이블 오른쪽에 모두 인라인
+- 버튼: `1px solid #d6dbde` 테두리의 원형 `32×32px`, 중성 그레이 아이콘
+- 카운트 숫자: 중앙 정렬된 16/700 Text Black
+
+**커스터마이즈 버튼**
+- 배경: `#ffffff`
+- 텍스트: `#00754A` (Green Accent)
+- 테두리: `1.5px solid #00754A`
+- 반경: `50px` (풀 필)
+- 패딩: `14px 40px` (기본 필보다 넉넉하게 큰 — 보조 기본 액션)
+- 레이블: "Customize"와 금색 스파클 ✨ 아이콘이 왼쪽에 삽입
+- 사용처: 사이즈/우유 선택 후 음료 커스터마이즈 플로우 진입
+
+**주문에 추가 버튼 (PDP)**
+- 배경: `#00754A` (Green Accent)
+- 텍스트: `#ffffff`
+- 반경: `50px`
+- 패딩: `14px 32px`
+- 상품 카드 오른쪽 상단 고정 및/또는 매장 이용 가능 밴드 내 오른쪽 정렬
+- 다른 기본 CTA와 동일한 scale(0.95) 활성 동작
+
+**리워즈 코스트 필 — "200★ item"**
+- 배경: 투명
+- 테두리: `1px solid #cba258` (Gold)
+- 텍스트: `#cba258` (Gold)
+- 반경: `50px` (풀 필)
+- 패딩: `4px 12px`
+- 콘텐츠: "200★ item" — `★`은 작은 채워진 별 글리프로 이 항목 리딤에 필요한 리워즈 별 표시
+- 폰트: Proxima Nova 13/700, `0.5px` 자간
+- 리워즈 리딤 가능한 상품에만 사용
+
+**상품 설명 밴드**
+- 전체 너비 다크 그린 밴드(`#1E3932` House Green)
+- 위에서 아래로 포함:
+  1. 해당하는 경우 리워즈 코스트 필(골드)
+  2. 흰색 상품 설명 본문 카피(16/400/1.5)
+  3. 인포 아이콘 툴팁과 함께 인라인 영양 요약("140 calories, 25g sugar, 2.5g fat") — 14/700 흰색
+  4. "Full nutrition & ingredients list" 아웃라인-화이트-온-그린 필 버튼
+- 패딩: `32px` 수직
+- 기본 상품 헤더 밴드 아래 표시
+
+**재료 / 영양 테이블**
+- 영양 정보 페이지의 2열 레이아웃
+- 왼쪽 열: "Ingredients" 헤더 + 목록 또는 설명 단락이 있는 "Not available for this item" 플레이스홀더 텍스트 블록(Text Black Soft 14/400)
+- 오른쪽 열: "Nutrition" 헤더 + 레이블/값 행
+- 각 행: 왼쪽에 영양소 레이블(Proxima Nova 14/400), 오른쪽에 값(예: "140 calories", "25g", "205 mg**"), 아래에 `1px solid #e7e7e7` 헤어라인 구분
+- 하단 카페인/별표 마커에 대한 각주: 13/400 Text Black Soft
+- 영양 성분 규정 준수 테이블을 위한 재사용 가능한 패턴
+
+**매장 이용 가능 셀렉터**
+- 사이즈 옵션 행 위의 다크 그린 피처 밴드에 표시
+- 투명-화이트 내부의 전체 너비 둥근 사각형
+- 텍스트: 흰색으로 "For item availability, choose a store", 14/400
+- 오른쪽: 셰브론 다운 어포던스 + 흰색 아웃라인의 쇼핑백 SVG 아이콘
+- 반경: `4px`
+- 높이: ~48px
+
+**PDP 브레드크럼**
+- 상품 제목 위의 "Menu / Refreshers / Pink Energy Drink" 트레일
+- 구분자: Text Black Soft의 `/` 슬래시 문자
+- 현재 페이지는 링크 없음, 이전 페이지는 밑줄 있는 그린 액센트 링크
+- 폰트: 14/400 Proxima Nova
+- 모든 PDP 페이지에 표시
+
+**백 셰브론 링크 (PDP 영양 / 상세 서브 페이지)**
+- 영양 정보 페이지의 섹션 헤딩 위 "← Back" 텍스트 링크
+- Green Accent(`#00754A`) 14/700 Proxima Nova 텍스트
+- 동일한 그린의 왼쪽 셰브론 `<`
+- 깊은 서브 페이지의 전체 브레드크럼 대안
+
+## 5. 레이아웃 원칙
+
+### 간격 시스템
+
+렘 기반 시맨틱 스케일(기준 `1rem = 10px`):
+
+| 토큰 | 렘 | 픽셀 | 일반적 사용 |
+|-------|-----|--------|-------------|
+| `--space-1` | `0.4rem` | 4px | 가장 촘촘한 인라인 패딩 |
+| `--space-2` | `0.8rem` | 8px | 작은 간격, 버튼 수직 패딩 |
+| `--space-3` | `1.6rem` | 16px | 기본 — 카드 패딩, xs 외부 거터 |
+| `--space-4` | `2.4rem` | 24px | 섹션 내부 간격, md 외부 거터 |
+| `--space-5` | `3.2rem` | 32px | 주요 섹션 간 간격 |
+| `--space-6` | `4rem` | 40px | 큰 간격, lg 외부 거터, 헤더 크레이트 |
+| `--space-7` | `4.8rem` | 48px | 섹션 간 간격 |
+| `--space-8` | `5.6rem` | 56px | 매우 큰 여백 — Frap 높이 |
+| `--space-9` | `6.4rem` | 64px | 가장 넓은 섹션 패딩 |
+
+**거터 토큰:**
+- `--outerGutter: 1.6rem` (16px, 기본 / 모바일)
+- `--outerGutterMedium: 2.4rem` (24px, 태블릿)
+- `--outerGutterLarge: 4.0rem` (40px, 데스크톱)
+
+**보편적 리듬 상수:** `1.6rem`(16px)은 기본 외부 거터, 카드 패딩 기준선, 텍스트 사이즈 3 본문으로 모든 페이지에 나타나는 가장 빈번한 간격 단위입니다.
+
+### 그리드 & 컨테이너
+
+- 열 너비 스케일: `--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px`
+- 기프트 카드 그리드는 `~343px` 타일의 3-5개 반응형 그리드 사용
+- 리워즈 상태 섹션: `lg+` 브레이크포인트에서 3개의 다크 그린 패널
+- 히어로: `--headerCrateProportion` / `--contentCrateProportion`을 통한 비대칭 40%(이미지) / 60%(콘텐츠) 분할
+
+### 공백 철학
+
+공백은 "카페 안의 넉넉한 공간"이라는 느낌을 전달합니다. 섹션 패딩은 넉넉한 편입니다(40–64px). 콘텐츠 블록은 구분선보다 공백으로 구분됩니다. 크림 캔버스(`#f2f0eb`)는 그 자체로 흰색 카드와 그린 피처 밴드 사이의 시각적 숨통입니다.
+
+### 테두리 반경 스케일
+
+| 값 | 사용 |
+|-------|-----|
+| `12px` | 카드, 모달, 메뉴 아이템 타일(`--cardBorderRadius`) |
+| `12px 12px 0 0` | 전체 너비 피드백 탭(상단만 둥글기) |
+| `50px` | 모든 버튼 — 풀 필 반경(`--buttonBorderRadius`) |
+| `50%` | 원형 아이콘, Frap 플로팅 버튼, 아바타 썸네일 |
+| 특수 | 스타벅스 Visa 카드 목업용 `3.3333%/5.298%` 타원형(`--svcRoundedCorners`) |
+
+## 6. 깊이 & 엘리베이션
+
+| 레벨 | 처리 | 사용 |
+|-------|-----------|-----|
+| 카드 | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | 기본 콘텐츠 카드 — 속삭이듯 부드러운 이중 그림자 |
+| 글로벌 내비 | `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` | 고정 탑 바의 3레이어 부드러운 리프트 |
+| Frap 베이스 | `0 0 6px rgba(0,0,0,0.24)` | 플로팅 원형 CTA 주변의 베이스 헤일로 |
+| Frap 앰비언트 | `0 8px 12px rgba(0,0,0,0.14)` | 스택된 방향성 앰비언트 — Frap을 앞으로 띄움 |
+| 기프트 카드 | 일러스트 사진 주변의 가벼운 드롭 그림자 | 기프트 타일의 실물 카드 느낌 |
+| Starbucks Card (SVC) | `drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))` | 스타벅스 카드 비주얼을 위한 스택된 SVG 드롭 그림자 |
+
+**그림자 철학:** 속삭이듯 부드럽고, 단색 위에 레이어드 — 이 시스템은 단일 무거운 드롭 그림자를 사용하지 않습니다. 대신 오프셋이 다른 2–3개의 낮은 알파 그림자를 쌓아 실세계의 앰비언트 + 직접 조명을 시뮬레이션합니다. Frap 버튼은 어떤 페이지에서든 가장 높이 올라간 요소입니다.
+
+### 장식적 깊이
+
+- **그라디언트 시스템 없음** — 서피스는 단색 블록
+- **색상 블록 밴딩**이 지각된 깊이를 전달합니다(다크 그린 밴드는 크림/흰색 본문 섹션 사이의 "함몰된 피처 존"으로 읽힘)
+- 스타벅스 카드 비주얼의 **SVG 필터 그림자**는 box-shadow 없이 살짝 3D 물리감을 더함
+
+## 7. 해야 할 것과 하지 말아야 할 것
+
+### 해야 할 것
+- 순수 흰색 대신 Neutral Warm(`#f2f0eb`) 또는 Ceramic(`#edebe9`)을 페이지 캔버스로 사용 — 따뜻한 크림이 시그니처
+- 그린 단계를 의도한 서피스 역할에 매핑 — 헤딩에는 Starbucks Green, CTA에는 Green Accent, 딥 밴드에는 House Green, 장식에는 Uplift
+- 시스템 전체에서 SoDoSans에 `-0.01em` / `-0.16px`의 촘촘한 트래킹 유지
+- 예외 없이 모든 버튼에 50px 풀 필 반경 적용
+- 보편적인 버튼 활성 상태로 `transform: scale(0.95)` 적용
+- 골드는 리워즈 상태 세리머니 순간에만 예약
+- 거의 모든 곳에 SoDoSans 사용; 리워즈 에디토리얼 헤드라인에만 Lander Tall 세리프로 전환; 채용 "컵 이름" 순간에만 Kalam 스크립트 예약
+- 엘리베이션을 위해 하나의 무거운 드롭 그림자 대신 2–3개의 낮은 알파 그림자 레이어
+- 모든 쇼핑 서피스에서 Frap 원형 CTA를 지속적인 플로팅 주문 진입점으로 사용
+- 콘텐츠 카드 사이에서 크림 캔버스가 숨쉬게 두기 — 구분선 대신 공백 사용
+
+### 하지 말아야 할 것
+- 페이지 캔버스로 순수 흰색 사용 금지 — 따뜻한 크림 온도는 필수적
+- "하나의 브랜드 그린"을 선택하지 말 것 — 4가지 그린 시스템은 의도적; `#006241`만 사용하면 브랜드가 평탄해짐
+- 골드를 범용 액센트로 사용 금지 — 리워즈 신호 전용
+- 버튼 모서리를 직각으로 만들지 말 것 — 50px 필은 보편적
+- 그라디언트 채우기 도입 금지 — 시스템은 전체적으로 색상 블록
+- h1과 h2를 크기로 대비시키지 말 것 — 계층 구조는 굵기 + 색상에서 나옴(600 Starbucks-Green 대 400 Text Black)
+- 본문 텍스트에 순수 검정 사용 금지 — `rgba(0,0,0,0.87)`이 따뜻한 캔버스와 어울림
+- 버튼에서 `scale(0.95)` 활성 피드백 생략 금지 — 시그니처 마이크로 인터랙션
+- 단일 무거운 그림자 사용 금지; 항상 2–3개의 낮은 알파 그림자 레이어
+- 메인 쇼핑 플로우에 세리프나 스크립트 도입 금지 — 각각 리워즈와 채용 맥락에 속함
+
+## 8. 반응형 동작
+
+### 브레이크포인트
+
+컴포넌트 너비 토큰과 점진적 내비 높이에서 추론:
+
+| 이름 | 너비 | 주요 변경 사항 |
+|------|-------|-------------|
+| xs | < 480px | 글로벌 내비 64px; 햄버거 메뉴; 단일 열 레이아웃; 필 버튼 전체 너비 |
+| 모바일 | 480–767px | 글로벌 내비 72px; 기프트 카드 그리드 2개; 카드 패딩 압축 |
+| 태블릿 | 768–1023px | 글로벌 내비 83px; 기프트 카드 그리드 3개; 히어로 분할 시작 |
+| 데스크톱 | 1024–1439px | 글로벌 내비 99px; 기프트 카드 그리드 4개; 완전한 비대칭 히어로 40/60 |
+| XLarge | 1440px+ | 콘텐츠가 `--columnWidthXLarge`로 제한; 기프트 카드 그리드 5개; 추가 크림 마진 |
+
+### 터치 타겟
+
+- `7px 16px` 패딩의 필 버튼은 약 32px 높이로 측정됨 — 터치 전용 서피스의 44px WCAG AAA 최소값 이하. 모바일에서 버튼 패딩이 시각적으로 확장될 수 있음.
+- `56px`의 Frap 플로팅 원형 버튼은 최솟값을 충분히 상회.
+- Frap은 시각적 가장자리 너머 8px로 탭 영역을 확장하기 위해 `--frapTouchOffset: calc(-1 * .8rem)` 사용.
+- 폼 플로트 레이블 입력은 모바일에서 레이블 폰트 크기가 커짐(데스크톱 1.9rem 기준 대비 1.6rem) — 팔을 뻗은 거리에서 탭하고 읽기 더 쉬움.
+
+### 접기 전략
+
+- **글로벌 내비 높이가 점진적으로 확장**: 단일 값이 아닌 브레이크포인트에 걸쳐 64 → 72 → 83 → 99px
+- **히어로 분할 접힘**: 40/60 비대칭 분할 → 모바일에서 스택(이미지 위, 콘텐츠 아래)
+- **기프트 카드 그리드**: 조정된 카드 너비와 함께 브레이크포인트에 걸쳐 5개 → 4개 → 3개 → 2개 → 1개
+- **피처 밴드**: 전체 너비 유지, 모바일에서 텍스트 + 이미지 수직 스택
+- **외부 거터 확장**: 뷰포트가 커짐에 따라 16px → 24px → 40px
+- **리워즈 3열 상태 패널**: 모바일에서 단일 열로 스택
+
+### 이미지 동작
+
+- 히어로 제품 사진은 모바일에서 수직으로 더 타이트하게 크롭; 콘텐츠가 시각적 앵커
+- 기프트 카드 일러스트는 화면 비율 유지; 카드 그리드가 리플로우
+- 이미지 로드 시 `opacity 0.3s ease-in` 페이드인 전환(갑작스러운 팝인 방지)
+- 리워즈 앱-인-핸드 사진은 비례적으로 확장; 절대 늘어나지 않음
+
+## 9. 에이전트 프롬프트 가이드
+
+### 빠른 색상 참조
+
+- 기본 CTA: "Green Accent (`#00754A`)"
+- 기본 CTA 텍스트: "White (`#ffffff`)"
+- 브랜드 헤딩: "Starbucks Green (`#006241`)"
+- 피처 밴드 / 푸터: "House Green (`#1E3932`)"
+- 페이지 캔버스: "Neutral Warm (`#f2f0eb`)"
+- 카드 캔버스: "White (`#ffffff`)"
+- 밝은 배경의 헤딩 텍스트: "Text Black (`rgba(0,0,0,0.87)`)"
+- 밝은 배경의 본문 텍스트: "Text Black Soft (`rgba(0,0,0,0.58)`)"
+- 다크 그린 배경의 본문 텍스트: "Text White Soft (`rgba(255,255,255,0.70)`)"
+- 리워즈 액센트: "Gold (`#cba258`)"
+- 리워즈 텍스트: "Rewards Green (`#33433d`)"
+- 파괴적: "Red (`#c82014`)"
+
+### 예시 컴포넌트 프롬프트
+
+1. "Green Accent(`#00754A`) 배경, 흰색 텍스트 'Explore our afternoon menu', SoDoSans 폰트 16px 굵기 600, `-0.01em` 자간, `50px` 테두리 반경(풀 필), `7px 16px` 패딩으로 기본 스타벅스 CTA 필 버튼을 만드세요. `0.2s ease` 전환과 함께 활성 상태로 `transform: scale(0.95)`를 적용하세요."
+
+2. "`12px` 테두리 반경, 레이어드 그림자 `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)`의 White(`#ffffff`) 배경 콘텐츠 카드를 디자인하세요. 콘텐츠에 `16–24px` 패딩(`--space-3`부터 `--space-4`)을 적용하세요. `16px` 간격으로 형제 요소와 함께 Neutral Warm(`#f2f0eb`) 페이지 캔버스 위에 배치하세요."
+
+3. "Frap 플로팅 원형 주문 버튼을 만드세요 — `56px` 지름, Green Accent(`#00754A`) 채우기, 중앙에 흰색 쇼핑백 아이콘. 레이어드 그림자: `0 0 6px rgba(0,0,0,0.24)` + `0 8px 12px rgba(0,0,0,0.14)`. `-0.8rem` 터치 오프셋과 함께 오른쪽 하단에 고정 배치. 활성 상태에서 앰비언트 그림자가 `scale(0.95)`와 함께 `0 8px 12px rgba(0,0,0,0)`으로 접힘."
+
+4. "다크 그린 피처 밴드를 만드세요 — House Green(`#1E3932`) 배경의 전체 너비 섹션. 왼쪽 열: 흰색 SoDoSans h2 24px 굵기 600, 이어서 Text White Soft(`rgba(255,255,255,0.70)`) 본문 단락, 두 버튼이 있는 CTA 행(기본은 Green Accent 텍스트의 White 채우기, 보조는 Outlined-on-Dark 흰색 테두리). 오른쪽 열: 제품 사진. 분할 비율 40/60, `768px` 이하에서 수직 스택."
+
+5. "리워즈 상태 카드를 만드세요 — `12px` 테두리 반경의 House Green(`#1E3932`) 패널, 컬러 그라디언트 상단 스트라이프(Bronze/Silver/Gold 티어). 흰색으로 SoDoSans 24px 굵기 600 제목. `rgba(255,255,255,0.70)` 보조 캡션이 있는 흰색 글머리 혜택 목록. 하단 진행 텍스트는 Text White Soft. `lg+`에서 3패널 그리드, 모바일에서 단일 열."
+
+6. "기프트 카드 타일을 디자인하세요 — 카드 반경 `12px` 일치, 전체 서피스로 일러스트 사진(손으로 그린 수채화 느낌) 채우기. 미묘한 드롭 그림자로 크림 캔버스 위에 실제 카드처럼 느껴지게 합니다. 그리드 위 SoDoSans 24px 굵기 400의 카테고리 레이블('Spring', 'Thank You', 'Birthday') 하단에 그룹화."
+
+7. "스타벅스 상품 상세 헤더를 만드세요 — 상품 제목 위에 14/400 흰색으로 'Menu / Refreshers / Pink Energy Drink' 브레드크럼이 있는 House Green(`#1E3932`) 밴드, SoDoSans 32/700 대문자 흰색 제목. 제목 아래 중앙 제품 사진. 사진 아래: 4개의 사이즈 셀렉터 행 — 각 컵 아이콘 버튼은 수직 컵 실루엣, 사이즈 이름('Tall' / 'Grande' / 'Venti' / 'Trenta') 16/700 흰색, 액체 온스 13/400 Text White Soft. 선택된 사이즈는 컵 아이콘을 `2px solid #00754A` 원형 링으로 감쌈."
+
+8. "스타벅스 커스터마이즈 플로우를 만드세요 — 사이즈 셀렉터 아래, 3개의 스택된 아웃라인 사각형 입력 행(흰색 배경, `1px solid #d6dbde` 테두리, `4px` 반경). 각각 상단 테두리 위에 13/700 Text Black 대문자 플로팅 레이블('Add-ins', 'Milk', 'Add-ins'). 중앙 값(예: 'Ice', 'Coconut'). 오른쪽: Text Black Soft의 셰브론 다운. 스쿱 행에는 원형 `32px` 아웃라인 버튼(`−` `1` `+`)의 숫자 스테퍼 삽입. 세 필드 아래: 금색 스파클 아이콘, `50px` 반경, `14px 40px` 패딩의 아웃라인 그린 'Customize' 필. 같은 행에 Green Accent 채워진 'Add to Order' 필 쌍."
+
+9. "스타벅스 상품 설명 밴드를 디자인하세요 — 상품 헤더 아래 전체 너비 House Green(`#1E3932`). 상단: 골드 아웃라인 '200★ item' 리워즈 코스트 필(`50px` 반경, `4px 12px` 패딩, 골드 `#cba258` 테두리와 텍스트). 아래: 흰색 16/400/1.5 상품 설명. 흰색 14/700 인라인 영양 요약('140 calories, 25g sugar, 2.5g fat')과 인포 아이콘 툴팁. 아웃라인-화이트-온-그린 필 버튼 'Full nutrition &amp; ingredients list'. 32px 수직 패딩."
+
+10. "스타벅스 영양 성분 테이블을 만드세요 — White 카드 내부의 2열 레이아웃. 왼쪽 열: 'Ingredients' 헤더(24/400 Text Black), 이어서 재료 목록 또는 14/400 Text Black Soft의 'Not available for this item' 플레이스홀더 단락. 오른쪽 열: 'Nutrition' 헤더, 이어서 `1px solid #e7e7e7` 헤어라인으로 구분된 레이블/값 행(영양소 이름 왼쪽, 값 오른쪽). 타이포그래피: 레이블은 14/400 Text Black, 값은 오른쪽 정렬 14/700 Text Black. 하단의 각주 별표 마커는 13/400 Text Black Soft."
+
+### 반복 가이드
+
+이 디자인 시스템으로 생성된 기존 화면을 다듬을 때:
+1. 한 번에 하나의 컴포넌트에 집중하세요
+2. 이 문서의 특정 색상 이름과 헥스 코드를 참조하세요
+3. 정확한 값과 함께 자연어 설명("따뜻한 크림 캔버스", "4단계 그린 시스템")을 사용하세요
+4. 50px 필 + `scale(0.95)` 활성 상태를 보편적으로 유지하세요
+5. 그린이 올바른 역할에 매핑되어 있는지 확인하세요(CTA에 Green Accent, 헤딩에 Starbucks Green, 밴드에 House Green)
+6. 그라디언트 도입 금지 — 시스템은 색상 블록
+7. 전체적으로 SoDoSans 트래킹을 `-0.01em` / `-0.16px`로 유지하세요
+
+### 알려진 공백
+
+- SoDoSans는 Google Fonts에서 이용할 수 없는 전용 서체입니다 — 공개적으로 구현할 때 Inter 또는 Manrope을 대체로 사용하고 교체를 문서화하세요
+- Lander Tall(리워즈 세리프)도 커스텀 — Iowan Old Style, Lora, 또는 Source Serif Pro로 대체
+- 문서화된 몇 가지(`--duration: 0.4s`, `--iconTransition: all ease-out 0.2s`, `--expanderDuration: 300ms`) 이외의 모든 인터랙티브 서피스에 대한 컴포넌트별 애니메이션 타이밍은 미캡처
+- 폼 오류 상태 전체 스타일링(빨간 테두리 굵기, 아이콘 배치)은 틴트 토큰에서 확인되나 완전히 추출되지 않음
+- 채용 페이지 전용 컴포넌트(컵 이름 카드, 검색 라디오 그리드)는 토큰 이름에서 참조되나 이 추출에서 다루지 않음
+- Starbucks Visa Card / Starbucks-Card (SVC) 상세 목업 스펙은 `--svcRoundedCorners` 및 `--svcSvcShadowFilter` 토큰으로 암시되나 완전히 문서화되지 않음