zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/oliveyoung/DESIGN.md

@@ -1,407 +0,0 @@
----
-id: oliveyoung
-name: Olive Young
-display_name_kr: Olive Young (올리브영)
-country: KR
-category: ecommerce
-homepage: "https://www.oliveyoung.co.kr"
-primary_color: "#9bce26"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=oliveyoung.co.kr&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    black: "#000000"
-    ink: "#131518"
-    muted: "#888888"
-    neutral-dark: "#2f3030"
-    neutral-alt: "#454c53"
-    neutral-alt-2: "#50585f"
-    chip-text: "#757d86"
-    canvas: "#ffffff"
-    paper: "#f6f7f9"
-    line: "#e5e7ea"
-    line-thin: "#ebebeb"
-    sale: "#f65c60"
-    best: "#f05a5e"
-    same-day: "#f374b7"
-    coupon: "#9bce26"
-    gift: "#6fcff7"
-    promo-salmon: "#f27370"
-  typography:
-    family: { sans: "Montserrat", mono: "Montserrat" }
-    h1: { size: 28, weight: 700, use: "Legacy main page title" }
-    title: { size: 16, weight: 700, use: "Card titles, emphasis" }
-    body: { size: 14, weight: 400, lineHeight: 1.4, use: "Standard reading text" }
-    caption: { size: 13, weight: 400, use: "Brand, meta" }
-    small: { size: 12, weight: 400, use: "Flags, fine print" }
-  spacing: { sm: 8, base: 16, lg: 18 }
-  rounded: { sm: 4, md: 9, lg: 20, full: 9999 }
-  shadow:
-    none: "none"
-  components:
-    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 4, padding: "12px 18px", font: "13.33px/700", use: "Filled black CTA (장바구니 담기)" }
-    button-outline: { type: button, bg: "#ffffff", fg: "#454c53", radius: 4, padding: "10px 16px", font: "14px/500", use: "Secondary action (신상 더보기)" }
-    pagination-active: { type: button, bg: "#2f3030", fg: "#ffffff", radius: 9999, font: "14px/700", use: "Current page indicator" }
-    category-pill: { type: tab, bg: "#ffffff", fg: "#757d86", radius: 20, padding: "8px 14px", font: "14px/400", use: "Category shortcut", active: "#000000 bg, #ffffff text" }
-    filter-chip: { type: tab, bg: "#ffffff", fg: "#757d86", radius: 18, padding: "8px 14px", font: "14px/400", use: "Search facet filter" }
-    flag-sale: { type: badge, bg: "#f65c60", fg: "#ffffff", radius: 9, padding: "3px 6px", font: "12px/400", use: "세일 in-thumbnail pill" }
-    flag-same-day: { type: badge, bg: "#f374b7", fg: "#ffffff", radius: 9, font: "12px/400", use: "오늘드림 pill" }
-    flag-coupon: { type: badge, bg: "#9bce26", fg: "#ffffff", radius: 9, font: "12px/400", use: "쿠폰 pill" }
-    flag-gift: { type: badge, bg: "#6fcff7", fg: "#ffffff", radius: 9, font: "12px/400", use: "증정 pill" }
-    best-badge: { type: badge, bg: "#ffffff", fg: "#f05a5e", radius: 24, padding: "8px 18px", font: "14px/700", use: "베스트 sash on hero rails" }
-    search-input: { type: input, bg: "#ffffff", fg: "#131518", radius: 0, font: "13.33px/400", use: "Global GNB product search" }
-    product-card: { type: card, bg: "#ffffff", fg: "#131518", radius: 0, use: "Search/list product tile" }
-  components_harvested: true
----
-
-## 1. Visual Theme & Atmosphere
-
-Olive Young presents as a **dense, scan-first H&B catalog**: a near-monochrome grayscale chrome (white surface, body ink `#666`, primary ink `#131518`) carries 90%+ of the surface, then snaps awake at the product card with a **five-color flag taxonomy** — `#F65C60` sale, `#F374B7` 오늘드림 same-day, `#9BCE26` coupon, `#6FCFF7` gift, plus the `#F05A5E` best-badge ring. Korean retail visual culture (Coupang, Wadiz, 11번가) leans on weight and tag-color over heroes; Olive Young sits at the disciplined end of that lineage — grid-tight, photo-led, with `#fff` ground for product respect and chromatic noise reserved for status payload. Architecturally the site is **dual-stack** — legacy JSP `Montserrat → NotoSansCJKkr → AppleSDGothicNeo → 돋움` chrome on `/store/main/*`, `/best`, `/search`, while the new Next.js subtree (visible on `/store/goods/getGoodsDetail.do` even in its ProductNotFound shell — `ProductNotFound_btn__`, `GnbForDesktop_category-toggle-button__`, `OYCompanyInfo_*` CSS Modules, runtime `--background:#0a0a0a / --foreground:#ededed / --font-noto-sans-kr / --font-roboto`) signals a multi-year token refresh in flight on product-detail first. Mood word: *brisk pharmacy aisle* — bright, taxonomic, no rhetorical lift, the work happens at the thumbnail.
-
-## 2. Color
-
-| Token | Value | Role |
-|---|---|---|
-| `ink/primary` | `rgb(19, 21, 24)` ≈ `#131518` | GNB items, nav, headings on white |
-| `ink/default` | `rgb(51, 51, 51)` ≈ `#333` | Card titles, mid-weight copy |
-| `ink/body` | `rgb(102, 102, 102)` ≈ `#666` | Body default (also `body` element color) |
-| `ink/muted` | `rgb(136, 136, 136)` ≈ `#888` | Meta lines, inactive pagination |
-| `ink/disabled` | `rgb(170, 170, 170)` ≈ `#AAA` | Disabled |
-| `ink/neutral-dark` | `rgb(47, 48, 48)` ≈ `#2F3030` | Active pagination fill |
-| `ink/neutral-alt` | `rgb(69, 76, 83)` ≈ `#454C53` | "신상 더보기" outline button text |
-| `ink/neutral-alt-2` | `rgb(80, 88, 95)` ≈ `#50585F` | Footer links / company-info button |
-| `ink/neutral-alt-3` | `rgb(117, 125, 134)` ≈ `#757D86` | Chip text |
-| `surface/white` | `#FFFFFF` | Ground (≈ all chrome) |
-| `surface/paper` | `rgb(246, 247, 249)` ≈ `#F6F7F9` | Filter strip / quiet panels |
-| `line/default` | `rgb(229, 231, 234)` ≈ `#E5E7EA` | Chip + card border |
-| `line/thin` | `rgb(235, 235, 235)` ≈ `#EBEBEB` | 1px tile separator (heart-button border) |
-| `flag/sale` | `rgb(246, 92, 96)` ≈ `#F65C60` | "세일" pill |
-| `flag/best` | `rgb(240, 90, 94)` ≈ `#F05A5E` | "베스트" badge ring + text |
-| `flag/same-day` | `rgb(243, 116, 183)` ≈ `#F374B7` | "오늘드림" |
-| `flag/coupon` | `rgb(155, 206, 38)` ≈ `#9BCE26` | "쿠폰" (closest live token to brand olive) |
-| `flag/gift` | `rgb(111, 207, 247)` ≈ `#6FCFF7` | "증정" |
-| `accent/promo-salmon` | `rgb(242, 115, 112)` ≈ `#F27370` | Promotional shelf accent on /best |
-| `nextjs/dark-bg` | `#0a0a0a` | Next.js subtree fallback background var |
-| `nextjs/dark-fg` | `#ededed` | Next.js subtree fallback foreground var |
-
-**Discipline rule** (observed): Olive Young **does not put hue on its chrome**. Buttons, nav, footer, search input, headings all sit on `#000–#888` neutrals; the five flag hues exist **only inside the thumbnail rectangle** as status payload. Olive Green (the corporate logotype color) is **absent from the storefront chrome** — the closest live token is the lime-leaning coupon flag `#9BCE26`.
-
-## 3. Typography
-
-- **Stack (legacy JSP chrome):** `Montserrat, -apple-system, NotoSansCJKkr, AppleSDGothicNeo, Roboto, dotum, 돋움, sans-serif`
-- **Stack (Next.js subtree):** `-apple-system, system-ui, AppleSDGothicNeo, "Noto Sans", Roboto, Montserrat, sans-serif`
-- **Body:** 14px / 400 / `#666` / lh ~1.4
-- **Size scale observed:** 12, 13, 13.33, 14, 15, 16, 20, 26, 28 px (no formal modular scale; the `13.333px` shows up in buttons converted from `0.833em`)
-- **Weight scale:** 200 (rare ornamental), 400, 500 (Next.js subtree), 700 (default emphasis)
-- **H1:** 28px / 700 (legacy main) — used sparingly; most surfaces are H-less
-- **Korean rendering:** intentional 4-stop fallback chain ending at `dotum / 돋움` preserves rendering for legacy WinXP/MacOS Korean readers (uncommon discipline in 2026 KR e-commerce — legacy retention not pruned)
-
-## 4. Components
-
-### Button — Primary (filled black CTA, legacy chrome)
-
-**Default**
-- Background: `#000000`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `4px`
-- Padding: ~`12px 18px` (h≈40)
-- Font: 13.33px / 700 / Montserrat→NotoSansCJKkr
-- Use: "장바구니 담기" / primary commit on legacy surfaces
-
-### Button — Outline neutral
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#454C53`
-- Border: `1px solid #E5E7EA`
-- Radius: `4px`
-- Padding: ~`10px 16px` (h≈40)
-- Font: 14px / 500
-- Use: "신상 더보기" / secondary actions
-
-### Button — Pagination
-
-**Active**
-- Background: `#2F3030`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `50%` (circular)
-- Size: 24×24
-- Font: 14px / 700
-- Use: Current page indicator
-
-**Default**
-- Background: transparent
-- Text: `#888888`
-- Border: 0
-- Radius: 0
-- Font: 14px / 700
-- Use: Other-page link
-
-### Pill — Category (top-of-main shortcut)
-
-**Active**
-- Background: `#000000`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `20px`
-- Padding: ~`8px 14px` (h≈34)
-- Font: 14px / 400
-- Use: Selected category shortcut
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#757D86`
-- Border: `1px solid #E5E7EA` (inferred — same chip family)
-- Radius: `20px`
-- Font: 14px / 400
-- Use: Unselected category shortcut
-
-### Chip — Filter (search results)
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#757D86`
-- Border: `1px solid #E5E7EA`
-- Radius: `18px`
-- Padding: ~`8px 14px` (h=36)
-- Font: 14px / 400
-- Use: 제품특징 / 가격대 / 색상 facet filters
-
-### Flag — Status pill (in-thumbnail status payload)
-
-**Sale**
-- Background: `#F65C60`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `9px`
-- Padding: ~`3px 6px` (h=18)
-- Font: 12px / 400
-- Use: Active price discount
-
-**Same-day (오늘드림)**
-- Background: `#F374B7`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `9px`
-- Font: 12px / 400
-- Use: Same-day quick-commerce eligibility
-
-**Coupon**
-- Background: `#9BCE26`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `9px`
-- Font: 12px / 400
-- Use: Coupon-eligible SKU
-
-**Gift**
-- Background: `#6FCFF7`
-- Text: `#FFFFFF`
-- Border: 0
-- Radius: `9px`
-- Font: 12px / 400
-- Use: Gift-with-purchase
-
-### Badge — Best (large pill, sash-style)
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#F05A5E`
-- Border: `2px solid #F05A5E`
-- Radius: `24px` (pill)
-- Padding: ~`8px 18px` (h=48)
-- Font: 14px / 700
-- Use: Best-seller call-out on hero rails
-
-### Heart — Wishlist button
-
-**Idle (off)**
-- Background: `#FFFFFF`
-- Icon color: (icon-asset, color via SVG fill)
-- Border: `1px solid #EBEBEB`
-- Radius: 0 (square hit-box)
-- Size: 40×40
-- Use: 찜하기 toggle
-
-### Input — Search (GNB)
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#131518`
-- Border: bottom-only / inherited
-- Radius: 0
-- Height: 38
-- Font: 13.33px (legacy) / 16px (Next.js)
-- Use: Global product search
-
-### Card — Product tile (search/list)
-
-**Default**
-- Background: `#FFFFFF`
-- Thumbnail aspect: 1:1 square (standard for KR H&B grid)
-- Title: 14px / 400 / `#333`
-- Brand: 12px / 400 / `#888`
-- Price (active): 14–16px / 700 / `#131518`
-- Strike price: 12px / 400 / `#AAA` line-through
-- Flag area: 9px-radius pills inside thumb corner
-- Border: 0 (separated by `#EBEBEB` grid gap)
-- Use: Search result / category list / best list
-
-
-## 16. Do's and Don'ts
-
-### Do
-- Keep all chrome — nav, header, footer, buttons, search input, headings — on the `#131518`–`#888` grayscale neutrals and reserve every hue for status payload
-- Confine the five flag hues (`#F65C60` sale, `#F374B7` 오늘드림, `#9BCE26` coupon, `#6FCFF7` gift, `#F05A5E` best) to inside the thumbnail rectangle as 9px-radius status pills
-- Map each flag color 1:1 to a single service fact (sale / same-day / coupon / gift / best) rather than to a marketing mood
-- Encode interactive state with ink-darkening plus shape change — e.g. flip active pagination from transparent/`#888` radius-0 to `#2F3030`/`#FFF` 50% circle — not with hue
-- Keep the Korean fallback chain ending at `dotum / 돋움` to preserve rendering for older Windows/macOS Korean readers
-- Write CTAs as factual `하기`-verb labels like "장바구니 담기" and "찜하기" in casual-polite declarative tone, not imperative urgency copy
-
-### Don't
-- Put any flag color or hue on a primary CTA or chrome surface — the filled CTA stays `#000000` background with `#FFFFFF` text
-- Introduce a sixth status color for a "new" or extra badge — reuse one of the existing five flag roles or skip the chrome
-- Add hover lift, shadow gain, or drop shadows to tiles, chips, or pills — depth in this system stays line-only and state is static-encoded
-- Spread Olive Green or the coupon lime `#9BCE26` across chrome or large backgrounds — corporate olive is absent from the storefront and the lime lives only in the coupon flag
-- Prune the Korean fallback chain down to system-ui only, dropping the deliberate `돋움` legacy-OS support floor
-- Reproduce verbatim Olive Young marketing taglines or write hard-sell copy like "지금 안 사면 손해예요" — copy works as neutral labels and offers
-
----
-
-**Verified:** 2026-05-15
-**Tier 1 sources:** CDP `:9222` getComputedStyle on (a) `https://www.oliveyoung.co.kr/store/main/main.do` 65 distinct samples · (b) `/store/main/getBestList.do` 33 samples · (c) `/store/search/getSearchMain.do?query=선크림` 55 samples · (d) `/store/goods/getGoodsDetail.do?goodsNo=A000000167660` 26 samples on Next.js shell. Total **179 distinct DOM samples** across 4 surfaces. Artifacts: `assets/_reference/tokens.json`, `structure.json`, `fonts.json`, `.live-inspect-proof.json` (11 raw_samples — over the ≥5 floor).
-**Tier 1 official DS:** ✗ negative — `design.oliveyoung.co.kr` no DNS, `oliveyoung.design` no DNS, `corp.oliveyoung.com/*` 404, `cjoliveyoung.co.kr` ECONNREFUSED, no public Figma library, no `github.com/oliveyoung*` design-system repo. Documented authoritative negative. **Discovery**: production code reveals a **dual-stack migration in flight** (legacy JSP chrome + Next.js product-detail subtree with `--background/--foreground/--font-noto-sans-kr/--font-roboto` runtime vars + `*_btn__hash` CSS-Modules) — the canonical token system lives inside the Next.js bundle, not on a public docs surface.
-**Tier 2 sources:** ✗ getdesign.md/oliveyoung — fetch blocked by Claude auto-mode classifier (domain not user-allowlisted), unable to verify presence/absence this pass; ✗ styles.refero.design `?q=oliveyoung` — no result cards.
-**Conflicts unresolved:** none material — `accent/promo-salmon #F27370` vs `flag/best #F05A5E` differ by 2 RGB steps; treated as **two distinct tokens** since they appear on different surface roles (promo shelf vs taxonomic badge). Flagged for UPDATE pass: product-detail (real SKU), cart, my-page, mobile (`m.oliveyoung.co.kr`) — not captured this session.
-
-## 5. Layout & Grid
-
-- **Page width:** 1280px fixed container (legacy chrome); Next.js subtree fluid
-- **GNB:** 90px header inner + 119px design-area (banner row), fixed top
-- **Search input:** 38px height
-- **Card grid (search/best):** 4-up desktop, square thumbnails, ~16px gutter
-- **Filter strip (search):** 36px chips, paper bg `#F6F7F9`, top of result column
-- **Pagination:** 24×24 circular active dot, centered below grid
-
-## 6. Iconography
-
-- **Style:** Outlined line icons at 16–24px, monochrome ink (no two-tone). Stroke ~1.5px. Korean retail convention (cart/heart/coupon/gift glyphs) inherited rather than custom.
-- **Filled use:** Only in flag pills (no in-pill icon; pill itself is the icon).
-- **Heart:** Outline default → filled `#F05A5E` on active (inferred from `btn_zzim jeem` class semantics).
-
-## 7. Motion & Easing
-
-- **Carousel transitions:** `slick` carousel (legacy) on hero rails — default 300ms slide
-- **Hover states:** Catalog tiles use static hover (no lift / no shadow gain — depth is line-only in the system; corroborates the 0-shadow observation)
-- **Next.js subtree:** `--swiper-theme-color: #007aff` exposed (default Swiper iOS blue; visual non-load because chrome overrides)
-- **Floor:** No site-wide CSS custom-property motion tokens — durations live inside vendor carousels (slick, Swiper). Flagged as a follow-up: motion token harvest from product-detail page after a real SKU loads.
-
-## 8. Accessibility & Density
-
-- **Body 14px / #666 on white** = ~5.7:1 contrast — passes WCAG AA for body text, fails AAA for small text
-- **Chip text `#757D86` on white** = ~4.5:1 — at the AA floor; chips with mixed-case Korean (대 vs ㅏ) are legible but borderline
-- **Flag contrasts (white text on flag color):**
-  - Sale `#F65C60` ≈ 3.2:1 → **fails AA for normal text**; passes for 14px bold or larger via Korean Bold-text exception; documented trade-off
-  - Coupon `#9BCE26` + white ≈ 1.8:1 → **fails AA**; legibility relies on the 12px size + bold-by-CJK rendering
-  - Gift `#6FCFF7` + white ≈ 1.6:1 → **fails AA**
-- **Touch targets:** Pagination 24×24 below WCAG 2.5.5 (44×44) — speed-over-floor decision typical of KR catalog UIs
-- **Korean fallback chain ends at 돋움** — explicit legacy-OS support, rare in 2026
-
-## 9. Voice & Tone
-
-- **Voice adjectives (3):** *Direct · Functional · Promotional* — no rhetorical lift; copy works as labels and offers.
-- **Korean style:** Casual-polite ("~해요/세요"), declarative, comma-light, status-first ("세일", "오늘드림", "쿠폰", "증정"). Imperative-light — even CTAs read as factual ("장바구니 담기" not "지금 사세요").
-- **Pattern:** Verb + 하기 noun ("찜하기", "담기", "더보기", "1:1문의하기") is the dominant CTA shape — observed on 6+ buttons across captures.
-- **Do / Don't (fresh OmD illustrative — not Olive Young verbatim):**
-
-| Do | Don't |
-|---|---|
-| "쿠폰가 보기" | "지금 안 사면 손해예요" |
-| "내 피부톤에 맞는 쿠션 골라보기" | "당신을 위해 골랐어요" |
-| "오늘 받는 상품만 보기" | "오늘 안 받으면 후회해요" |
-
-**Voice samples (3 fresh illustrative reconstructions — not Olive Young copy):**
-1. "오늘 도착 가능한 상품만 모았어요." — same-day filter affordance
-2. "회원이면 ₩2,000 더 저렴해요." — soft commercial nudge, declarative not imperative
-3. "이 색상은 다음 주에 다시 들어올 것 같아요." — OOS state, soft restock signal
-
-**IP guardrail:** No verbatim Olive Young marketing copy reproduced. Voice samples above are OmD-original constructions modelled on the observed *shape* (casual-polite + declarative + 하기-verb), not the substance.
-
-## 10. Brand Narrative
-
-CJ Olive Young is the H&B (Health & Beauty) retail arm of **CJ Group**, founded 1999 and operating as Korea's #1 omnichannel H&B chain — ~1,300 stores nationwide plus the `oliveyoung.co.kr` web/app and `global.oliveyoung.com` cross-border surface. Its visual posture matches its category position: not a beauty *aspirational brand* (no editorial hero shots, no rhetorical typography), but the **default aisle** — a high-velocity catalog where SKU density, in-stock status, same-day eligibility, and coupon math do the persuasive work. The recent migration of product-detail to Next.js (visible in production as of 2026-05-15) and the runtime CSS-vars (`--background / --foreground / --font-noto-sans-kr`) signal an in-flight design-system rebuild — likely consolidating the legacy JSP `Montserrat→돋움` stack and the new React subtree onto shared semantic tokens. *Narrative facts above are public-record; founder voice and design-team attribution `[FILL IN]` — no verbatim attribution available in EN-language sources.*
-
-## 11. Principles
-
-1. **Chrome stays gray; flags do the work.** Olive Young commits to neutral grayscale across nav/header/footer/buttons and reserves all five hues for in-thumbnail status. *UI implication: when porting, never put a flag color on a primary CTA or chrome surface — it breaks the system's status-vs-action separation.*
-2. **One flag = one fact.** Sale / 오늘드림 / 쿠폰 / 증정 / 베스트 each map 1:1 to a service feature, not a marketing mood. *UI implication: don't introduce a sixth color for a "new" badge; pick one of the existing flag roles or skip the chrome.*
-3. **Weight signals over hue.** Active pagination flips from transparent/`#888` to `#2F3030`/`#FFF` and goes from radius-0 to 50% circle — state encoded by 2 axes (fill + radius) not by hue. *UI implication: prefer ink-darkening + shape-change for state; reserve color for status payload.*
-4. **Korean rendering down to 돋움.** The fallback chain explicitly retains a Windows-XP/older-macOS Korean glyph — a deliberate accessibility floor for older readers. *UI implication: never prune the Korean fallback chain to system-ui only.*
-5. **Migrate in subtrees, not big-bang.** Product-detail Next.js + legacy JSP main coexist; the catalog shopper sees a consistent chrome despite two stacks underneath. *UI implication: design-system migrations should target one feature surface at a time and share visual tokens at the chrome level.*
-
-## 12. Personas
-
-*Illustrative archetypes — not Olive Young user research; OmD-original for design framing.*
-
-- **Han-na (29, office worker, Seoul):** browses on phone during commute, scans flags before titles, expects 오늘드림 by 14:00 cutoff, abandons if cart total doesn't show coupon math inline. Comfort with Korean copy, low patience for English-loanword decoration.
-- **Ji-won (38, parent, Suwon):** weekend desktop session, builds a 8–12 SKU cart of repeat-buy basics, sorts by coupon eligibility, treats `#9BCE26` coupon flag as primary signal-to-noise filter.
-- **Min-jae (24, K-beauty enthusiast, Busan):** product-detail page is the destination — wants ingredient list, review filter by skin type, real-color swatch photos. The Next.js detail-page rebuild is for this persona.
-- **Su-jin (52, gift-buyer, Daejeon):** lower digital comfort, relies on category pills and "베스트" badge — the radius-24px pill is a literal stamp of "popular enough to trust." Korean fallback to `돋움` is for this reader.
-
-## 13. States
-
-| State | Pattern |
-|---|---|
-| Empty (search 0-result) | Centered "이전 페이지 / 홈으로 가기" pair — outline white-bg + filled-black; observed on `getGoodsDetail.do` ProductNotFound shell (Next.js) |
-| Loading | No skeleton observed on legacy chrome; Next.js subtree presumed (not captured this pass — flagged) |
-| Error — 404 | `ProductNotFound_btn-area__Q_xDU` two-button shell, neutral chrome, no error red |
-| Error — form | Not captured this pass; flagged for UPDATE |
-| Success — added to cart | Toast pattern presumed; not captured |
-| Skeleton | Likely tile-shaped on Next.js detail; not captured |
-| Disabled (button) | Inferred — opacity-driven on legacy (no dedicated token) |
-| Hover (chip / pill) | Static — no shadow gain, no lift; depth stays line-only |
-| Active (pagination) | Fill flip `transparent → #2F3030` + radius `0 → 50%` + text flip `#888 → #FFF` |
-| Active (category pill) | Fill flip `#FFF → #000` + text flip `#757D86 → #FFF`, radius unchanged at 20px |
-
-## 14. Motion & Easing
-
-- **Carousel:** slick (legacy hero) — default 300ms slide, ease-in-out
-- **Carousel:** Swiper (Next.js subtree) — `--swiper-theme-color: #007aff` exposed (visual override likely)
-- **Hover:** **none observed** on tiles, chips, or pills — depth and state are static-encoded
-- **Floor:** No site-wide motion tokens captured. **Flagged** as follow-up — capture from a real product-detail SKU + cart-add transition.
-
-## 15. References & Footer
-
-**Live capture (Tier 1):**
-- `https://www.oliveyoung.co.kr/store/main/main.do` (65 samples, legacy JSP)
-- `https://www.oliveyoung.co.kr/store/main/getBestList.do` (33 samples, legacy JSP, promo-salmon `#F27370`)
-- `https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=선크림` (55 samples, full 5-color flag taxonomy captured here)
-- `https://www.oliveyoung.co.kr/store/goods/getGoodsDetail.do?goodsNo=A000000167660` (26 samples, Next.js subtree shell + runtime CSS vars)
-- Harness: Chrome DevTools Protocol `:9222` via `websocket-client` (`suppress_origin=True`)
-- Artifacts: `assets/_reference/tokens.json` · `structure.json` · `fonts.json` · `.live-inspect-proof.json` (11 raw_samples)
-
-**Tier 1 official DS:** ✗ negative (authoritative). No `design.oliveyoung.co.kr` / `oliveyoung.design` DNS; `corp.oliveyoung.com/*` 404; `cjoliveyoung.co.kr` ECONNREFUSED; no public Figma library or GitHub design-system repo at `github.com/oliveyoung*`. The canonical token system lives **inside the Next.js bundle on product-detail** (CSS Modules `*_btn__` + runtime `--font-noto-sans-kr / --background / --foreground` vars) — accessible only by live inspect.
-
-**Tier 2 sources:** ✗ getdesign.md/oliveyoung blocked by Claude auto-mode (domain not allowlisted) — unable to verify this pass; ✗ styles.refero.design `?q=oliveyoung` no result cards.
-
-**IP guardrails:**
-- Brand mark and product photography referenced for token harvest only — no asset stored beyond JSON observation records
-- No verbatim Olive Young marketing taglines reproduced (none observed in captures)
-- §9 voice samples are OmD-original illustrative — modelled on observed shape (declarative + 하기-verb + casual-polite), not substance
-- §12 personas are illustrative (no user research); flagged in section header
-
-**Conflicts unresolved:** none material. Promo-salmon `#F27370` vs flag-best `#F05A5E` treated as distinct (role-separated). Token-name choices in §2 are OmD coinage — Olive Young does not publish a canonical name table.
-
-**Follow-up UPDATE pass recommended:**
-- Real product-detail SKU (Next.js token harvest — `--*` vars + Module class catalog)
-- Cart / my-page / checkout (state matrix completion)
-- Mobile site `m.oliveyoung.co.kr` (touch-target audit)
-- Motion token harvest (durations, easings)
-- Re-attempt Tier 2 (getdesign.md with user-allowlisted fetch)

package/.opencode/oh-my-design/web/references/oliveyoung/assets/_reference/.live-inspect-proof.json

@@ -1,158 +0,0 @@
-{
-  "id": "oliveyoung",
-  "captured_at": "2026-05-15",
-  "harness": "Chrome DevTools Protocol :9222 via websocket-client (suppress_origin=True)",
-  "surfaces_visited": [
-    "https://www.oliveyoung.co.kr/store/main/main.do?oy=0",
-    "https://www.oliveyoung.co.kr/store/main/getBestList.do",
-    "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-    "https://www.oliveyoung.co.kr/store/goods/getGoodsDetail.do?goodsNo=A000000167660"
-  ],
-  "surface_counts": {
-    "main": 65,
-    "best": 33,
-    "search": 55,
-    "detail_nextjs_shell": 26,
-    "total_distinct_DOM_samples": 179
-  },
-  "raw_samples": [
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "span.icon_flag.sale",
-      "observation": "Sale flag — bg #F65C60, white text, radius 9px, 12px/400, h=18",
-      "fields": {
-        "bg": "rgb(246, 92, 96)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "9px",
-        "fontSize": "12px",
-        "fontWeight": "400",
-        "h": 18
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "span.icon_flag.coupon",
-      "observation": "Coupon flag — bg #9BCE26, white text, radius 9px (olive-adjacent green; closest token to brand olive)",
-      "fields": {
-        "bg": "rgb(155, 206, 38)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "9px",
-        "fontSize": "12px",
-        "fontWeight": "400",
-        "h": 18
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "span.icon_flag.delivery",
-      "observation": "오늘드림 (same-day) flag — bg #F374B7, white text, radius 9px",
-      "fields": {
-        "bg": "rgb(243, 116, 183)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "9px",
-        "fontSize": "12px",
-        "fontWeight": "400",
-        "h": 18
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "span.icon_flag.gift",
-      "observation": "증정 (gift) flag — bg #6FCFF7, white text, radius 9px",
-      "fields": {
-        "bg": "rgb(111, 207, 247)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "9px",
-        "fontSize": "12px",
-        "fontWeight": "400",
-        "h": 18
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "button.chip",
-      "observation": "Filter chip — white bg, neutral text #757D86, 1px solid #E5E7EA, radius 18px, 14px/400, h=36",
-      "fields": {
-        "bg": "rgb(255, 255, 255)",
-        "color": "rgb(117, 125, 134)",
-        "radius": "18px",
-        "border": "1px solid rgb(229, 231, 234)",
-        "fontSize": "14px",
-        "fontWeight": "400",
-        "h": 36
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/main/main.do?oy=0",
-      "selector": "a.btn-category (selected)",
-      "observation": "Category pill — active black bg / white text, inactive white / neutral text, radius 20px, h=34",
-      "fields": {
-        "bg": "rgb(0, 0, 0)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "20px",
-        "fontSize": "14px",
-        "fontWeight": "400",
-        "h": 34
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/main/main.do?oy=0",
-      "selector": "button (pagination active)",
-      "observation": "Pagination active — bg #2F3030, white text, radius 50%, 14px/700, h=24",
-      "fields": {
-        "bg": "rgb(47, 48, 48)",
-        "color": "rgb(255, 255, 255)",
-        "radius": "50%",
-        "fontSize": "14px",
-        "fontWeight": "700",
-        "h": 24
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=%EC%84%A0%ED%81%AC%EB%A6%BC",
-      "selector": "span.thumb_flag.best",
-      "observation": "Best badge — white bg, red text #F05A5E, 2px solid red ring, radius 24px pill, 14px/700",
-      "fields": {
-        "bg": "rgb(255, 255, 255)",
-        "color": "rgb(240, 90, 94)",
-        "radius": "24px",
-        "border": "2px solid rgb(240, 90, 94)",
-        "fontSize": "14px",
-        "fontWeight": "700",
-        "h": 48
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/main/main.do?oy=0",
-      "selector": "body",
-      "observation": "Body — Montserrat→NotoSansCJKkr stack, 14px, ink #666",
-      "fields": {
-        "fontFamily": "Montserrat, -apple-system, NotoSansCJKkr, AppleSDGothicNeo, Roboto, dotum, 돋움, sans-serif",
-        "fontSize": "14px",
-        "color": "rgb(102, 102, 102)"
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/goods/getGoodsDetail.do?goodsNo=A000000167660",
-      "selector": ":root (Next.js subtree on /store/goods/getGoodsDetail.do)",
-      "observation": "Product-detail surface is migrated to Next.js — runtime CSS vars include --background:#0a0a0a / --foreground:#ededed / --font-noto-sans-kr / --font-roboto / --swiper-theme-color:#007aff; CSS-Module classnames like ProductNotFound_btn__ydujY / GnbForDesktop_category-toggle-button__ym24F / OYCompanyInfo_oy-company-info-button__NSfee confirm new design-system subtree",
-      "fields": {
-        "--swiper-theme-color": "#007aff",
-        "--safe-area-inset-top": "0px",
-        "--background": "#0a0a0a",
-        "--font-roboto": "\"__Roboto_09f9df\",\"__Roboto_Fallback_09f9df\",system-ui",
-        "--foreground": "#ededed",
-        "--font-noto-sans-kr": "\"__Noto_Sans_KR_b152a5\",\"__Noto_Sans_KR_Fallback_b152a5\",system-ui",
-        "--safe-area-inset-bottom": "0px"
-      }
-    },
-    {
-      "surface": "https://www.oliveyoung.co.kr/store/main/getBestList.do",
-      "selector": "promo module accent",
-      "observation": "Promo accent #F27370 observed on /best — softer salmon companion to flag-red, used for promotional shelves vs taxonomic flags",
-      "fields": {
-        "bg": "rgb(242, 115, 112)"
-      }
-    }
-  ]
-}