oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/11st/DESIGN.md

@@ -2,399 +2,280 @@
 id: 11st
 name: 11st
 country: KR
-category: e-commerce
-homepage: "https://www.11st.co.kr"
+category: ecommerce
+homepage: "https://www.11st.co.kr/"
 primary_color: "#ff0038"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=11st.co.kr&sz=128"
-verified: "2026-06-09"
+verified: "2026-07-13"
 added: "2026-06-09"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: product-home, url: "https://www.11st.co.kr/", inspected: "2026-07-13" }
+    - { id: main, kind: product-home, url: "https://www.11st.co.kr/main", inspected: "2026-07-13" }
+    - { id: category, kind: product-category, url: "https://www.11st.co.kr/categories/1467565", inspected: "2026-07-13" }
+  sources:
+    - { id: home-capture, kind: product-surface, url: "https://www.11st.co.kr/", captured: "2026-07-13" }
+    - { id: main-capture, kind: product-surface, url: "https://www.11st.co.kr/main", captured: "2026-07-13" }
+    - { id: category-capture, kind: product-surface, url: "https://www.11st.co.kr/categories/1467565", captured: "2026-07-13" }
+    - { id: brand-context, kind: official-doc, url: "https://www.11stcorp.com/brand", captured: "2026-07-13" }
+    - { id: design-system, kind: official-doc, url: "https://design.11stcorp.com/", captured: "2026-07-13" }
+    - { id: company-profile, kind: official-doc, url: "https://www.11stcorp.com/resources/guide/2026_11street_Brochure_Kor.pdf", captured: "2026-07-13" }
+    - { id: advertising-guide, kind: official-doc, url: "https://ads.11st.co.kr/contents/guide/read?bbsNo=617&incHideYN=Y", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.canvas": &product { surface_id: home, source_id: home-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.foreground": *product
+    "tokens.colors.body": *product
+    "tokens.colors.brand-red": *product
+    "tokens.colors.muted": *product
+    "tokens.colors.hairline": *product
+    "tokens.colors.on-brand": *product
+    "tokens.typography.family.ui": *product
+    "tokens.typography.family.numerals": *product
+    "tokens.typography.family.brand": *product
+    "tokens.typography.body.size": *product
+    "tokens.typography.body.weight": *product
+    "tokens.typography.body.lineHeight": *product
+    "tokens.typography.body.use": *product
+    "tokens.typography.search.size": *product
+    "tokens.typography.search.weight": *product
+    "tokens.typography.search.lineHeight": *product
+    "tokens.typography.search.use": *product
+    "tokens.typography.price.size": *product
+    "tokens.typography.price.weight": *product
+    "tokens.typography.price.lineHeight": *product
+    "tokens.typography.price.use": *product
+    "tokens.typography.price-struck.size": *product
+    "tokens.typography.price-struck.weight": *product
+    "tokens.typography.price-struck.lineHeight": *product
+    "tokens.typography.price-struck.use": *product
+    "tokens.spacing.xs": *product
+    "tokens.spacing.sm": *product
+    "tokens.spacing.md": *product
+    "tokens.spacing.lg": *product
+    "tokens.rounded.square": *product
+    "tokens.rounded.card": *product
+    "tokens.rounded.billboard-control": *product
+    "tokens.rounded.circular": *product
+    "tokens.components.global-search.type": *product
+    "tokens.components.global-search.bg": *product
+    "tokens.components.global-search.fg": *product
+    "tokens.components.global-search.radius": *product
+    "tokens.components.global-search.height": *product
+    "tokens.components.global-search.font": *product
+    "tokens.components.global-search.states": *product
+    "tokens.components.global-search.use": *product
+    "tokens.components.billboard-control.type": *product
+    "tokens.components.billboard-control.bg": *product
+    "tokens.components.billboard-control.fg": *product
+    "tokens.components.billboard-control.border": *product
+    "tokens.components.billboard-control.radius": *product
+    "tokens.components.billboard-control.height": *product
+    "tokens.components.billboard-control.font": *product
+    "tokens.components.billboard-control.states": *product
+    "tokens.components.billboard-control.use": *product
+    "tokens.components.deal-card.type": *product
+    "tokens.components.deal-card.bg": *product
+    "tokens.components.deal-card.fg": *product
+    "tokens.components.deal-card.radius": *product
+    "tokens.components.deal-card.shadow": *product
+    "tokens.components.deal-card.states": *product
+    "tokens.components.deal-card.use": *product
+    "tokens.components.header-inventory-dialog.type": *product
+    "tokens.components.header-inventory-dialog.bg": *product
+    "tokens.components.header-inventory-dialog.fg": *product
+    "tokens.components.header-inventory-dialog.radius": *product
+    "tokens.components.header-inventory-dialog.states": *product
+    "tokens.components.header-inventory-dialog.use": *product
 tokens:
-  source: live-extract
-  extracted: "2026-06-09"
-  components_harvested: true
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Values are selector-backed observations from three public 11st product routes. The corporate brand site, advertising guide, and declared fonts are separate evidence domains."
   colors:
-    primary: "#ff0038"
-    accent-discount: "#f43142"
     canvas: "#ffffff"
-    heading: "#111111"
+    foreground: "#111111"
     body: "#666666"
+    brand-red: "#ff0038"
     muted: "#a9a9a9"
-    on-primary: "#ffffff"
     hairline: "#eeeeee"
-    ink: "#000000"
+    on-brand: "#ffffff"
   typography:
-    family: { sans: "Noto Sans KR", fallback: "Apple SD Gothic Neo, Malgun Gothic, sans-serif" }
-    price-hero:  { size: 24, weight: 700, lineHeight: 1.2, tracking: 0, use: "Discount price, the largest emphasis unit on a product card" }
-    search-input: { size: 16, weight: 400, lineHeight: 1.3, tracking: 0, use: "Global search field text and active search tab label" }
-    price-base:  { size: 16, weight: 400, lineHeight: 1.3, tracking: 0, use: "Standard price figure, sub-amounts" }
-    body:        { size: 14, weight: 400, lineHeight: 1.5, tracking: 0, use: "Default reading text, links, nav, labels" }
-    heading:     { size: 14, weight: 700, lineHeight: 1.5, tracking: 0, use: "Section heads, h1/h2, strong labels" }
-    caption:     { size: 13, weight: 400, lineHeight: 1.4, tracking: 0, use: "Strikethrough original price, metadata, fine print" }
-    micro:       { size: 11, weight: 400, lineHeight: 1.4, tracking: 0, use: "Unit suffix, badge digits, tiny labels" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 40 }
-  rounded: { sm: 4, md: 8, lg: 25, full: 9999 }
-  shadow:
-    none: "none"
-    ambient: "rgba(0,0,0,0.06) 0px 2px 8px"
-    elevated: "rgba(0,0,0,0.12) 0px 6px 16px"
+    family: { ui: "Noto Sans KR", numerals: "Lato New", brand: "11StreetGothic" }
+    body: { size: 14, weight: 400, lineHeight: 1.50, use: "Repeated public product-home body, list, button, and dialog samples" }
+    search: { size: 18, weight: 400, lineHeight: 2.44, use: "Public product-home global search input" }
+    price: { size: 16, weight: 400, lineHeight: 1.50, use: "Public home deal-card price using Lato New first" }
+    price-struck: { size: 13, weight: 400, lineHeight: 1.85, use: "Public home deal-card struck price using Lato New first" }
+  spacing: { xs: 4, sm: 8, md: 12, lg: 20 }
+  rounded: { square: 0, card: 4, billboard-control: 50, circular: 9999 }
   components:
-    button-primary: { type: button, bg: "#ff0038", fg: "#ffffff", radius: "4px", padding: "12px 24px", font: "16px / 700", use: "Primary commerce CTA (구매하기/장바구니), brand red on white" }
-    button-ghost: { type: button, bg: "#ffffff", fg: "#111111", radius: "4px", padding: "10px 20px", font: "14px / 400", use: "Secondary action, 1px #eeeeee border" }
-    search-tab: { type: tab, fg: "#111111", radius: "25px", padding: "0px 20px 2px", font: "16px / 400", active: "active label #ff0038, rounded 25px pill seat", use: "Integrated search-scope selector (통합검색/아마존)" }
-    input-search: { type: input, bg: "#ffffff", fg: "#666666", radius: "4px", padding: "0px 12px", font: "16px / 400", use: "Global search field, hairline #eeeeee underline/border" }
-    card-product: { type: card, bg: "#ffffff", fg: "#111111", radius: "8px", use: "Product tile, 1px #eeeeee border, ambient shadow on hover" }
-    badge-discount: { type: badge, bg: "#ffffff", fg: "#f43142", radius: "4px", padding: "1px 6px", font: "11px / 700", use: "Discount-rate flag (13%할인), red figure on white" }
-    price-discount: { type: badge, bg: "#ffffff", fg: "#111111", radius: "4px", padding: "0px", font: "24px / 700", use: "Final discount price, the loudest type on a card" }
-    price-original: { type: badge, bg: "#ffffff", fg: "#a9a9a9", radius: "4px", padding: "0px", font: "13px / 400", use: "Strikethrough original price (판매가)" }
-    listItem-nav: { type: listItem, bg: "#ffffff", fg: "#666666", radius: "0px", padding: "0px 12px", font: "14px / 400", use: "GNB / category nav row, #111111 on hover" }
+    global-search: { type: input, bg: "transparent", fg: "#666666", radius: "0px", height: "44px", font: "18px / 400 Noto Sans KR", states: "focus and pressed samples change foreground to #111111; no flow transition inferred", use: "Product home and /main; selector home::[data-omd-capture=1]" }
+    billboard-control: { type: button, bg: "#ffffff", fg: "#999999", border: "1px solid #eeeeee", radius: "50px", height: "50px", font: "17px / 400 Noto Sans KR", states: "default only; no interaction transition captured", use: "Product home and /main billboard control; selector home::[data-omd-capture=109]" }
+    deal-card: { type: card, bg: "#ffffff", fg: "#666666", radius: "4px", shadow: "rgba(0,0,0,0.06) 0px 2px 10px -2px, rgba(0,0,0,0.28) 0px 0px 1px", states: "default only; no hover contract captured", use: "Home deal card; selector home::div.c-card-item.c-card-item--deal.c-card-item--box" }
+    header-inventory-dialog: { type: dialog, bg: "#ffffff", fg: "#666666", radius: "0px", states: "dialog-open observed after the menu trigger on home and /main", use: "Header inventory dialog; selector home::[data-omd-interaction-capture=dialog-0-0]" }
+  components_harvested: true
 ---
 
-# Design System Inspiration of 11st
+# Design System Inspiration of 11st (11번가)
 
 ## 1. Visual Theme & Atmosphere
 
-11st (11번가) is one of Korea's largest open-market e-commerce platforms, and its homepage is built for one job: get a shopper from a vast, dense catalog to a purchase decision as fast as possible. The atmosphere is high-density and utilitarian — a white canvas (`#ffffff`) packed edge-to-edge with product tiles, prices, badges, and navigation. This is not the airy, whitespace-luxury aesthetic of a Western SaaS landing page; it is the deliberate, information-rich layout of a Korean mega-mall portal where every pixel of above-the-fold real estate earns its place. The reading temperature is set by a neutral gray body color (`#666666`) on near-black headings (`#111111`), keeping the chrome quiet so that color can do exactly one thing: signal commerce urgency.
-
-That single signal is the 11st brand red. The live DOM reveals a sharp, saturated red (`#ff0038`) on active and focused states, paired with a slightly warmer discount-accent red (`#f43142`) for promotional emphasis like discount-rate flags. Against the otherwise grayscale field, red is never decorative — it marks the thing you should act on or the saving you should notice. This restraint is the system's core discipline: a dense gray-and-white grid in which red is the only loud color, so the eye is trained to follow it straight to a CTA or a markdown.
+11st is a Korean open-market platform that has operated since 2008 and now presents shopping, search, payment, delivery, and seller participation as one commerce ecosystem. Its official company profile frames the service as a guide for a shopper’s product discovery and purchase journey; its brand page turns that metaphor into a minimal street-sign logo. The current public product routes express a much more utilitarian layer of that identity: a mostly white, compact information field where product names, prices, navigation, and search occupy the visual foreground. The saturated `#FF0038` appears in observed product text and border samples, while near-black and gray do the repetitive reading work. This is a reference for the captured public web surfaces, not a claim about a logged-in order flow, seller console, or mobile app.
 
-Typography is Korean-first. The stack leads with `Noto Sans KR`, falling back through `Apple SD Gothic Neo` and `Malgun Gothic` — the standard high-legibility Hangul stack tuned for small sizes at high density. Most text runs at 14px, the workhorse size of Korean portal UIs, with prices escalating to a bold 24px (`#111111`, weight 700) as the loudest unit on any product card. There is almost no shadow and almost no rounding in the base chrome; depth and softness are reserved, appearing only as gentle ambient elevation on hover and a distinctive 25px-radius pill on the integrated search-scope selector.
-
-**Key Characteristics:**
-- White canvas (`#ffffff`) with a high-density grid — information-rich, portal-style, anti-whitespace
-- Brand red `#ff0038` as the single action/urgency color on active and focused states
-- Warmer discount red `#f43142` reserved for promotional markdown emphasis
-- `Noto Sans KR` Hangul-first stack tuned for small-size legibility at high density
-- 14px body workhorse; bold 24px price (`#111111` weight 700) as the dominant card emphasis
-- Strikethrough original price in muted gray (`#a9a9a9`) beside the red-adjacent discount figure
-- Near-flat chrome — minimal shadow, minimal rounding — with a signature 25px search-tab pill
-- Grayscale field (`#111111`/`#666666`/`#a9a9a9`) so red reads as pure intent
+The official brand presentation is broader than the captured web palette. It describes the logo’s orange-red-pink gradient as an expression of customer, shopping, and experience. That official identity context is valuable, but it does not authorize unobserved gradient, CTA, or product-status tokens on the public storefront.
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **11st Red** (`#ff0038`): The brand's signature commerce red. Active/focused search-tab state, primary CTA backgrounds, urgency markers. A sharp, fully saturated red that anchors the entire system.
-- **Near-Black Ink** (`#111111`): Primary heading and price color. Not pure black — a dense near-black that reads as authoritative without harshness on white.
-- **Pure White** (`#ffffff`): Page background, card surfaces, search field fill, CTA text on red.
+- **Canvas — `#FFFFFF`:** observed white surface on public product routes and the header-inventory dialog.
+- **Foreground — `#111111`:** repeated dark text and the focused/pressed global-search foreground.
+- **Body — `#666666`:** repeated default text, borders, buttons, list items, and dialog text across home and `/main`.
+- **Brand red — `#FF0038`:** observed product-route text and border color, including the home deal-card rate sample. The capture does not establish it as a universal filled CTA background.
+- **Muted — `#A9A9A9`:** home deal-card struck-price text sample.
+- **Hairline — `#EEEEEE`:** observed billboard-control border on home and `/main`.
+
+## 3. Typography Rules
 
-### Accent
-- **Discount Red** (`#f43142`): Slightly warmer red used on promotional emphasis — discount-rate flags, "관련 상품" accent emphasis. Distinct from the action-red `#ff0038`; this is the markdown/savings register.
+### Evidence classes
 
-### Neutral Scale
-- **Body Gray** (`#666666`): Secondary text, navigation links, labels, the default reading color across chrome.
-- **Muted Gray** (`#a9a9a9`): Strikethrough original price (판매가), de-emphasized metadata, the "before discount" register.
-- **Hairline** (`#eeeeee`): Card borders, dividers, search-field underlines, the quiet structural lines of the dense grid.
+- **Live product computed use:** `Noto Sans KR` is loaded/high confidence with 727 visible uses across body, buttons, cards, dialogs, headings, inputs, list items, and text. Its visible computed family is corroborated by loaded FontFaceSet entries and eight 11st-hosted WOFF/WOFF2 sources. It is the UI family token.
+- **Live product numeric/card use:** `Lato New` is loaded/high confidence with 57 visible card uses and six 11st-hosted WOFF/WOFF2 sources. It is recorded for the observed price treatment, not substituted for Hangul UI text.
+- **Live product brand-face use:** `11StreetGothic` is loaded/high confidence with 16 visible body/text uses and two 11st-hosted WOFF sources. The official brand page separately publishes 11번가 고딕 Light, Regular, and Bold and states the ownership and free-use conditions. The official asset and its observed web use are related but distinct facts.
+- **Declared-only:** `11StreetGothicBold`, `Lato`, `Lato all`, and `Helvetica Neue` have declarations but no visible captured use. They remain declared-only.
+- **System or unresolved:** Arial and Roboto remain system classifications; 돋움 has computed occurrences without a matching loaded FontFace or known system mapping and remains unresolved. None is promoted as a 11st brand face.
 
-### Surface & Ink
-- **Ink** (`#000000`): True black reserved for fine iconography and maximal-contrast micro-elements.
-- **On-Primary** (`#ffffff`): Text and icon color on the red CTA surface.
+### Observed hierarchy
 
-## 3. Typography Rules
+| Role | Size | Weight | Line height | Source-domain use |
+|---|---:|---:|---:|---|
+| Product body/chrome | 14px | 400 | 21px | Repeated product home and `/main` samples, `Noto Sans KR` |
+| Global search | 18px | 400 | 44px | Public product-home search input, `Noto Sans KR` |
+| Deal-card price | 16px | 400 | 24px | Home `.c-card-item__price`, `Lato New` first |
+| Deal-card struck price | 13px | 400 | 24px | Home `.c-card-item__price-del`, `Lato New` first |
 
-### Font Family
-- **Primary**: `Noto Sans KR`
-- **Fallback**: `Apple SD Gothic Neo`, `Malgun Gothic`, `맑은 고딕`, `돋움`, `sans-serif`
-- The Hangul-first stack is chosen for crisp legibility at the small sizes (11px–14px) that dominate a dense commerce grid.
-
-### Hierarchy
-
-| Role | Size | Weight | Line Height | Use |
-|------|------|--------|-------------|-----|
-| Price Hero | 24px | 700 | 1.2 | Final discount price — the largest, loudest unit on a product card |
-| Search Input | 16px | 400 | 1.3 | Global search field text and active search-tab label |
-| Price Base | 16px | 400 | 1.3 | Standard price figure, sub-amounts |
-| Heading | 14px | 700 | 1.5 | Section heads, h1/h2, strong labels |
-| Body | 14px | 400 | 1.5 | Default reading text, links, nav rows |
-| Caption | 13px | 400 | 1.4 | Strikethrough original price, metadata, fine print |
-| Micro | 11px | 400 | 1.4 | Unit suffix (원), badge digits, tiny labels |
-
-### Principles
-- **14px is the workhorse.** The vast majority of chrome, navigation, and labels sit at 14px — the standard Korean portal reading size that balances density against legibility.
-- **Price is the headline.** There is no 48px hero type here. The biggest, boldest text on the page is a price (24px / 700). In a commerce-first system, the number IS the headline.
-- **Weight binary.** The system runs on 400 (everything) and 700 (headings, prices, emphasis). There is no light-weight display register; this is functional type, not luxury type.
-- **Hangul-first legibility.** `Noto Sans KR` is engineered for the small sizes the dense grid demands; the fallback chain keeps Hangul rendering consistent across OSes.
+The official advertising-production guide allows 11Street Gothic-Kor and Noto Sans CJK KR for PC and mobile, with other limited numeric conventions. It is documentation for advertising materials, not a replacement for the product-route computed/font-loading evidence above.
 
 ## 4. Component Stylings
 
-### Buttons
-**Primary CTA**
-- Background: `#ff0038`
-- Text: `#ffffff`
-- Padding: 12px 24px
-- Radius: 4px
-- Font: 16px Noto Sans KR weight 700
-- Use: Primary commerce action (구매하기 / 장바구니 / 주문하기)
+### Global search
+
+**Default**
+- Background: `transparent`
+- Text: `#666666`
+- Radius: `0px`
+- Height: `44px`
+- Font: `18px / 400 Noto Sans KR`
+- Use: Public product home and `/main`; `home::[data-omd-capture="1"]`, `.search_text.search_text_ad`.
+- Focus: foreground `#111111` in the captured focus sample.
+- Pressed: foreground `#111111` in the captured pressed sample.
+
+### Billboard control
 
-**Ghost / Secondary**
+**Default**
 - Background: `#ffffff`
-- Text: `#111111`
-- Padding: 10px 20px
-- Radius: 4px
+- Text: `#999999`
 - Border: `1px solid #eeeeee`
-- Use: Secondary actions, filters, quiet controls
+- Radius: `50px`
+- Height: `50px`
+- Font: `17px / 400 Noto Sans KR`
+- Use: Public home and `/main` billboard control; `home::[data-omd-capture="109"]`, `._billboard-controls__button_1wxhc_120`.
 
-### Search Tab (integrated scope selector)
-- Active label color: `#ff0038`
-- Radius: 25px (the system's signature pill seat)
-- Padding: 0px 20px 2px
-- Font: 16px weight 400
-- Use: Switching search scope (통합검색 / 아마존). The 25px-radius pill is the one place softness appears in the chrome.
+### Deal card
 
-### Search Input
+**Default**
 - Background: `#ffffff`
 - Text: `#666666`
-- Radius: 4px
-- Padding: 0px 12px
-- Border: hairline `#eeeeee` underline/border
-- Font: 16px weight 400
+- Radius: `4px`
+- Shadow: `rgba(0,0,0,0.06) 0px 2px 10px -2px, rgba(0,0,0,0.28) 0px 0px 1px`
+- Use: Home deal card; `home::div.c-card-item.c-card-item--deal.c-card-item--box` (16 observed occurrences).
 
-### Cards & Containers (product tile)
-- Background: `#ffffff`
-- Border: `1px solid #eeeeee`
-- Radius: 8px
-- Shadow: none at rest; ambient `rgba(0,0,0,0.06) 0px 2px 8px` on hover
-- Contents: thumbnail, title at 14px, discount-rate badge, 24px/700 discount price, strikethrough original price at 13px `#a9a9a9`
+The card’s observed price is `#111111`, `16px / 400`, with `Lato New` first; its observed struck-price is `#A9A9A9`, `13px / 400`, also with `Lato New` first. No hover, selection, loading, or purchase state is claimed for this card.
 
-### Badges
-**Discount-Rate Flag**
-- Background: `#ffffff`
-- Text: `#f43142`
-- Padding: 1px 6px
-- Radius: 4px
-- Font: 11px weight 700
-- Use: Discount percentage (13%할인) — red figure on white
+### Header inventory dialog
 
-### Navigation (GNB / category)
-- Row text: `#666666` at 14px weight 400
-- Hover: text shifts to `#111111`
-- Radius: 0px (square, dense rows)
-- White background, hairline `#eeeeee` dividers
-
-**Tier 1 sources:** https://www.11st.co.kr, https://about.11st.co.kr
+**Dialog open**
+- Background: `#ffffff`
+- Text: `#666666`
+- Radius: `0px`
+- Font: `14px / 400 Noto Sans KR`
+- Use: Opened from the header menu on home and `/main`; `home::[data-omd-interaction-capture="dialog-0-0"]`, `.c_header_inventory.c_header_inventory_not_recommend`.
 
-## 5. Layout Principles
+The collector records two menu-to-dialog interaction expansions. It does not establish further dialog variants, focus management, close behavior beyond the observed close control, or a generic overlay pattern.
 
-### Spacing System
-- Base unit: 4px
-- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 40px
-- The dense small-end steps (4–12px) reflect a layout that packs many tiles and labels into limited vertical space.
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** `https://www.11st.co.kr/` (product home), `https://www.11st.co.kr/main` (product home), `https://www.11st.co.kr/categories/1467565` (product category), `https://www.11stcorp.com/brand` (official identity, font asset, and font-use terms), `https://design.11stcorp.com/` (official design-system context), `https://www.11stcorp.com/resources/guide/2026_11street_Brochure_Kor.pdf` (official current company/history context), and `https://ads.11st.co.kr/contents/guide/read?bbsNo=617&incHideYN=Y` (official advertising-font guidance)
+**Tier 2 sources:** `https://getdesign.md/11st` (attempted; built-in web open returned no accessible record), `https://styles.refero.design/?q=11st` (attempted; built-in web open returned no accessible record), and built-in web search for both `11st` and `11번가` on each directory (no record returned)
+**Conflicts unresolved:** none
 
-### Grid & Container
-- Wide centered content column (~1240px) holding multi-column product grids
-- Above-the-fold is information-maximal: GNB, integrated search, category rail, promo banners, and product rails all compete for the first screen
-- Product tiles arranged in dense responsive grids (typically 4–6 across on desktop)
+Legacy claims that promoted a `#F43142` discount token, filled primary/ghost CTAs, a 25px search tab, an 8px universal product-card radius, hover elevation, generic mobile breakpoints, checkout/cart states, and motion tokens were removed. The supplied 2026 capture does not substantiate those values or variants.
 
-### Whitespace Philosophy
-- **Density as a feature.** Unlike whitespace-forward Western design, 11st treats density as a service to the shopper — more products visible means fewer scrolls to a decision. Gaps are tight and functional.
-- **Hairlines over gaps.** Structure is communicated by `#eeeeee` hairlines and borders rather than large empty margins, keeping the grid legible while maximizing content.
+## 5. Layout Principles
 
-### Border Radius Scale
-- Square (0px): Nav rows, dividers, many structural blocks
-- Small (4px): Buttons, badges, inputs — the workhorse rounding
-- Medium (8px): Product cards, thumbnails
-- Pill (25px): The integrated search-scope tab — the signature soft accent
-- Full (9999px): Circular icon buttons (scroll-to-top, category toggle)
+The supplied evidence covers three public desktop routes at `1440×900`. It establishes a 44px search input, 50px billboard control, repeated header/list chrome, and the observed deal-card samples above. It does not establish a reusable grid width, breakpoint range, mobile composition, category hierarchy, seller tool, cart, checkout, or account layout; those are deliberately omitted rather than inferred from an open-market category.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, nav rows, resting tiles |
-| Ambient (Level 1) | `rgba(0,0,0,0.06) 0px 2px 8px` | Product-card hover lift, quiet panels |
-| Elevated (Level 2) | `rgba(0,0,0,0.12) 0px 6px 16px` | Dropdowns, popovers, floating layers |
-
-**Shadow Philosophy**: 11st is a near-flat system. At rest, the chrome carries no shadow at all — structure comes from hairlines and color blocks, not elevation. Shadow appears only as a soft ambient lift on hover and as a slightly deeper layer for floating menus. This restraint keeps the dense grid visually calm; if every tile cast a shadow, the page would become noise. Depth is an interaction affordance here, not a decorative style.
+The observed deal-card sample has the specific two-layer shadow recorded in §4. The observed billboard control and header-inventory dialog have `box-shadow: none`. These route-local facts do not form an elevation scale.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use `#ff0038` as the single action/urgency color — CTAs, active states, focus
-- Reserve `#f43142` for discount/markdown emphasis (rate flags, savings)
-- Make the price the loudest element: 24px weight 700 in `#111111`
-- Pair the discount price with a muted `#a9a9a9` strikethrough original
-- Use `Noto Sans KR` and keep body text at 14px for portal-grade density
-- Communicate structure with `#eeeeee` hairlines, not large gaps
-- Keep chrome flat; reserve ambient shadow for hover/floating layers only
-- Use the 25px pill only on the integrated search-scope tab — it is a signature, not a default
+
+- Keep public product observations scoped to their captured selector and route.
+- Use `Noto Sans KR` for verified public Korean UI text and `Lato New` only where the observed price treatment calls for it.
+- Treat the official 11번가 고딕 distribution and its live web use as separate evidence classes.
+- Preserve the actual dialog-open provenance when referring to the header inventory layer.
 
 ### Don't
-- Don't introduce a second loud color — red is the only urgency signal
-- Don't use pure black (`#000000`) for headings; use near-black `#111111`
-- Don't add airy whitespace at the expense of product density — density is the value
-- Don't pill-round buttons or cards; rounding stays at 4–8px outside the search tab
-- Don't shadow resting tiles — flat-at-rest keeps the dense grid calm
-- Don't shrink the price below its 24px/700 dominance on a card
-- Don't mix `#ff0038` and `#f43142` arbitrarily — action-red vs markdown-red are distinct roles
-- Don't substitute a Latin-first font stack; Hangul legibility leads
+
+- Render a declared-only, system, or unresolved family as if it were a loaded 11st product font.
+- Turn official brand gradients, advertising-guide choices, or company-profile statements into unobserved storefront tokens.
+- Invent filled CTA, hover, checkout, or responsive variants absent from the collector evidence.
+- Generalize a card or control from a marketing, documentation, or unobserved authenticated surface.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <768px | Single/2-column tile grid, collapsed GNB, sticky search |
-| Tablet | 768–1024px | 3–4 column grid, condensed category rail |
-| Desktop | 1024–1280px | Full 4–6 column product grids, full GNB |
-| Large | >1280px | Centered ~1240px content with side margins |
-
-### Touch Targets
-- Primary CTA at 12px/24px padding gives a comfortable tap surface
-- Nav rows and category items spaced for thumb reach on mobile
-- Circular icon buttons (scroll-to-top, category toggle) sized for tap
-
-### Collapsing Strategy
-- Product grid: 6-column → 4 → 3 → 2 → 1 across breakpoints
-- GNB: full horizontal nav → hamburger/category drawer on mobile
-- Integrated search: persistent and often sticky at the top on mobile
-- Price block maintains its 24px/700 dominance; surrounding metadata wraps or truncates first
-
-### Image Behavior
-- Square product thumbnails with 8px radius, consistent across breakpoints
-- Promo banners scale full-width and swap to mobile-cropped variants
-- Lazy-loaded tiles below the fold to keep the dense grid performant
+No responsive capture was supplied. The only verified viewport is `1440×900`; no breakpoint, touch-target, mobile navigation, or image-resizing rule is recorded.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA / urgency: 11st Red (`#ff0038`)
-- Discount / markdown accent: Discount Red (`#f43142`)
-- Background: Pure White (`#ffffff`)
-- Heading / price: Near-Black (`#111111`)
-- Body text / nav: Body Gray (`#666666`)
-- Strikethrough / muted: Muted Gray (`#a9a9a9`)
-- Border / hairline: (`#eeeeee`)
-- CTA text: White (`#ffffff`)
-
-### Example Component Prompts
-- "Create a product card: white background, 1px solid #eeeeee border, 8px radius, no shadow at rest. Discount-rate badge in #f43142 (11px / 700) top-left. Title at 14px Noto Sans KR #666666. Discount price at 24px weight 700 #111111. Strikethrough original price at 13px #a9a9a9 beside it. On hover, ambient shadow rgba(0,0,0,0.06) 0px 2px 8px."
-- "Build a primary CTA: #ff0038 background, white text, 16px Noto Sans KR weight 700, 12px 24px padding, 4px radius. Label '구매하기'."
-- "Design an integrated search bar: white field, 16px #666666 text, hairline #eeeeee border, 4px radius, with a 25px-radius scope tab whose active label is #ff0038."
-- "Create a dense GNB row: white background, #666666 14px links, hover to #111111, #eeeeee divider hairlines, 0px radius square rows."
-
-### Iteration Guide
-1. Keep `#ff0038` as the only loud color — if a second bright hue appears, remove it.
-2. The price is the headline: 24px / 700 / `#111111`, never smaller than its surroundings.
-3. Body stays at 14px `Noto Sans KR`; weight is binary (400 / 700).
-4. Structure with `#eeeeee` hairlines, not whitespace — density is intentional.
-5. Chrome is flat at rest; shadow only on hover (`rgba(0,0,0,0.06) 0px 2px 8px`) or floating layers.
-6. Rounding stays at 4–8px; the 25px pill is exclusive to the search-scope tab.
-7. Distinguish `#ff0038` (action) from `#f43142` (markdown) by role, never interchangeably.
-
----
+Use only selector-backed public-web facts: a transparent 44px search field with `#666666` default text that becomes `#111111` in captured focus/pressed samples; a white 50px billboard control with `#999999` text, `#EEEEEE` border, and 50px radius; or the specifically observed home deal card. Do not ask an implementation to reproduce an unobserved purchase journey, brand-gradient campaign, or loaded font that the evidence does not support.
 
 ## 10. Voice & Tone
 
-11st's voice is brisk, transactional, and benefit-forward — the register of a Korean open-market that competes on price, speed, and selection. Microcopy is short and action-oriented: 구매하기 (buy), 장바구니 (cart), 할인 (discount), 무료배송 (free shipping). Numbers do the persuading — discount rates, final prices, point rewards — so prose stays out of the way. There is warmth in promotional energy (events, coupons, time-limited deals) but the underlying tone is efficient and shopper-respecting: tell me the price, the saving, and the action, in that order.
-
-| Context | Tone |
-|---|---|
-| Product titles | Dense, keyword-rich, scannable. Brand + spec + benefit packed for search legibility. |
-| CTAs | Direct imperatives. "구매하기", "장바구니 담기", "바로구매". |
-| Promotions | Energetic, urgency-flavored. Discount rate and deadline lead. |
-| Price/discount | Numbers first. The saving is the message. |
-| Notices / policy | Plain, procedural Korean. Clear about shipping, returns, points. |
-| Search / empty | Helpful, suggestion-forward. Offers related keywords and categories. |
-
-**Forbidden register.** Avoid airy lifestyle-brand prose that buries the price. Avoid burying the discount under adjectives. Avoid a second loud color competing with red for attention. The shopper came to compare and buy — respect that with numbers and clear actions, not mood copy.
+The official company profile describes 11st as a commerce platform that connects product search, information, purchase, and customer life. Keep public-facing content practical, product-specific, and clear about the next shopping action. This is a content-direction reading of the official profile, not a capture of checkout, service-recovery, or notification copy.
 
 ## 11. Brand Narrative
 
-11st (11번가) launched in **2008** as the open-market e-commerce platform of **SK** in South Korea, entering a market already contested by Gmarket and Auction. It grew into one of Korea's largest online marketplaces, and in **2018** the e-commerce business was spun off into a standalone company, **Eleven Street Co., Ltd.**, under the SK Square / SK Telecom orbit. The name "11번가" — literally "11th Street" — frames the service as a bustling commercial street where countless sellers and shoppers meet, an open marketplace rather than a single first-party retailer.
-
-The platform's defining strategic move in recent years has been its **Amazon Global Store** partnership, surfacing Amazon's catalog to Korean shoppers directly inside 11st — which is why the integrated search even offers an "아마존" scope alongside 통합검색. This positions 11st not just as a domestic open-market but as a gateway to cross-border selection, competing on breadth of catalog and price.
+11st launched as an open market in February 2008, opened a mobile service in 2010, and renewed its brand identity in 2016, according to its 2026 company profile. The same profile presents an evolving platform that connects customers and sellers across products, services, delivery, payment, and content.
 
-The design system follows directly from this identity. An open-market with millions of SKUs and thousands of sellers cannot afford editorial whitespace; it must surface as many comparable options as possible, as fast as possible. Hence the dense grid, the price-as-headline hierarchy, and the single disciplined use of red to mark action and savings. 11st's brand promise is selection and value, and the UI is engineered to deliver both at a glance.
+The official brand page describes the logo as a minimal street sign: a visual guide toward diverse goods and differentiated services. Its downloadable 11번가 고딕 family was tested for shopping words, numbers, punctuation, device environments, spacing, and readability, with the sign motif incorporated into its letterforms. Those brand and typeface statements explain the identity; they do not expand the observed public web component contract.
 
 ## 12. Principles
 
-1. **Density serves the shopper.** More products visible means fewer steps to a decision. Tight grids and hairline structure are a service, not a compromise.
-2. **The price is the headline.** In open-market commerce, the most important information is the number. It gets the largest, boldest type on the card.
-3. **Red means act or save.** A single saturated red (`#ff0038`) marks the action; a markdown red (`#f43142`) marks the saving. Red is never decorative.
-4. **Hangul-first legibility.** `Noto Sans KR` at small sizes keeps a dense Korean grid crisp and scannable.
-5. **Flat at rest, lift on intent.** No resting shadows; elevation is an interaction affordance, keeping the busy grid calm.
-6. **Structure with lines, not gaps.** `#eeeeee` hairlines organize density where whitespace would waste it.
-7. **One signature softness.** The 25px search-scope pill is the single intentional curve in an otherwise square, functional chrome.
-8. **Selection is the brand.** From domestic sellers to the Amazon Global Store, breadth of catalog is the promise the layout must honor.
+1. **Guide the shopping journey.** The company describes a platform spanning search, information, and purchase. *UI implication:* make observed product information easy to scan without inventing a flow.
+2. **Keep identity recognizable across surfaces.** The official logo and typeface both use the street-sign motif. *UI implication:* preserve the documented asset boundary rather than copying unobserved campaign treatments.
+3. **Support both customers and sellers.** The company profile presents both as stakeholders in the marketplace. *UI implication:* do not collapse a seller or advertising surface into a consumer-product component claim.
 
 ## 13. Personas
 
-*Personas below are fictional archetypes informed by publicly observable 11st user segments (deal-seeking shoppers, mobile-first buyers, cross-border bargain hunters, third-party sellers), not individual people.*
-
-**Ji-woo Park, 29, Seoul.** Mobile-first deal hunter. Opens 11st during her commute to compare prices on a specific gadget across sellers. Scans discount-rate badges and final prices in seconds; the strikethrough original tells her how good the deal is. Abandons any page where she has to hunt for the price. Trusts the platform because the savings are always legible at a glance.
-
-**Min-jun Kim, 42, Daegu.** Household-supplies bulk buyer. Uses 11st on desktop, filling a cart with everyday goods and chasing free-shipping thresholds and point rewards. Values the dense grid — he can see dozens of options without scrolling endlessly. Reads product titles like a spec sheet and ignores anything that looks like marketing fluff.
-
-**Seo-yeon Lee, 35, Bundang.** Cross-border bargain shopper. Came to 11st specifically for the Amazon Global Store — she toggles the search scope to 아마존 to compare imported goods against domestic listings. Cares about total landed price and delivery estimate. The integrated search that spans both catalogs is exactly why she stays on 11st instead of using two sites.
-
-**Tae-hyun Jung, 38, Incheon.** Third-party seller running a small electronics shop on the open-market. Thinks about how his listings render in the grid — thumbnail, title keywords, discount badge, price. Knows that a clear discount-rate flag and a competitive final price are what win the click in a sea of comparable tiles.
+*The reference does not invent named personas. The official company profile identifies customers and sellers as distinct marketplace stakeholders; any product-specific persona work needs task-specific research beyond this public capture.*
 
 ## 14. States
 
-| State | Treatment |
-|---|---|
-| **Empty (search, no results)** | White canvas. Plain line in `#666666` at 14px: "검색 결과가 없습니다." Suggested related keywords and popular categories offered below. No illustration-heavy dead end — redirect to selection. |
-| **Empty (cart)** | `#666666` single line: "장바구니에 담긴 상품이 없습니다." One `#ff0038` CTA back to shopping. |
-| **Loading (grid first paint)** | Skeleton tiles at final dimensions in `#eeeeee`. Thumbnail, title bar, and price bar placeholders sized to the real tile. Lazy-load below the fold. |
-| **Loading (price/stock refresh)** | Inline spinner or subtle shimmer on the affected tile; previous price stays visible until updated. |
-| **Error (action failed)** | Inline message near the action in plain Korean: what failed + what to do. No generic "오류가 발생했습니다" without a next step. |
-| **Error (sold out)** | Tile marks 품절; CTA switches to disabled/muted; suggests similar in-stock items. |
-| **Success (added to cart)** | Brief confirmation layer or toast: "장바구니에 담았습니다." Quick links to view cart or keep shopping. No emoji. |
-| **Success (order placed)** | Dedicated confirmation page with order number, total, and shipping estimate in `#111111`; next-step links prominent. |
-| **Disabled** | Muted to `#a9a9a9` on text with reduced surface contrast; red CTAs fade rather than recolor, preserving brand read. |
-| **Discount / deal active** | Discount-rate flag in `#f43142`, final price at 24px/700 `#111111`, strikethrough original at 13px `#a9a9a9`. The savings is the state. |
-
-## 15. Motion & Easing
-
-**Durations**:
-
-| Token | Value | Use |
+| Observed state | Treatment | Evidence boundary |
 |---|---|---|
-| `motion-instant` | 0ms | Selection ticks, focus marks |
-| `motion-fast` | 150ms | Hover lift, button press, tab switch |
-| `motion-standard` | 250ms | Dropdowns, cart layer, drawer open |
-| `motion-slow` | 400ms | Banner/carousel transitions, drawer slide |
+| Search default | Transparent field, `#666666` text, 44px height | Public home and `/main` selector-backed sample |
+| Search focus | `#111111` foreground | Captured pseudo-state only |
+| Search pressed | `#111111` foreground | Captured pseudo-state only |
+| Header inventory dialog open | White, square, `#666666` text dialog | Two collector interaction expansions on home and `/main` |
 
-**Easings**:
+No empty, loading, validation, disabled, cart, order, error, toast, or success state was captured, so none is specified.
 
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Most hover and panel transitions |
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Drawers, dropdowns arriving |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-
-**Restraint.** Motion is functional, not playful. A dense commerce grid stays calm — hover lifts are quick (150ms) and small, panels slide with standard easing, and there is no bounce or spring that would make a busy page feel chaotic.
-
-**Signature motions.**
-
-1. **Card hover lift.** Product tiles raise with a fast (150ms) ambient shadow (`rgba(0,0,0,0.06) 0px 2px 8px`) — a small, quick affordance confirming the tile is interactive without disturbing the grid's calm.
-2. **Search-scope tab switch.** Switching between 통합검색 and 아마존 transitions the active label to `#ff0038` within the 25px pill seat using `ease-standard` — instant feedback on scope change.
-3. **Category drawer / cart layer.** Slide-in panels use `motion-standard` with `ease-enter`; dismissals use `ease-exit`. The grid behind stays still.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, hover lifts and panel slides collapse to instant. The dense grid remains fully functional; nothing essential depends on animation.
-
-<!--
-OmD v0.1 Sources — 11st
-
-Token-level claims (sections 1–9, structured block) are sourced from live DOM
-inspection of https://www.11st.co.kr via Playwright getComputedStyle (2026-06-09):
-- Brand red #ff0038 (active/focused search tab LI), discount red #f43142 (em accent)
-- Heading/price #111111, body #666666, muted/strikethrough #a9a9a9, canvas #ffffff,
-  hairline #eeeeee
-- Noto Sans KR / Apple SD Gothic Neo / Malgun Gothic stack
-- 14px body workhorse, 24px/700 discount price, 16px search input, 25px search-tab radius
-See web/references/11st/.verification.md for raw samples.
-
-Brand narrative (§11): 11st (11번가) launched 2008 as SK's open-market; the
-e-commerce business was spun off as Eleven Street Co., Ltd. in 2018; the Amazon
-Global Store partnership surfaces Amazon's catalog inside 11st (reflected in the
-아마존 search scope). Widely documented public facts.
-
-Personas (§13) are fictional archetypes informed by publicly observable 11st
-user segments (deal-seekers, mobile buyers, cross-border shoppers, sellers).
-Names are illustrative; they do not refer to real people.
-
-Interpretive claims (e.g., "density serves the shopper", "the price is the
-headline") are editorial readings connecting 11st's open-market identity to its
-observed design system, not direct 11st statements.
--->
+## 15. Motion & Easing
+
+No duration, easing curve, or transition property was observed in the supplied evidence. The dialog-open interaction proves that the layer can be expanded on the captured routes, not how it should animate.