oh-my-design-cli 1.3.9 → 1.5.1

package/web/references/gmarket/DESIGN.md

@@ -0,0 +1,464 @@
+---
+id: gmarket
+name: Gmarket
+display_name_kr: 지마켓
+country: KR
+category: ecommerce
+homepage: "https://www.gmarket.co.kr"
+primary_color: "#ffd200"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=gmarket.co.kr&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Gmarket Sans
+  url: "https://corp.gmarket.com/fonts/"
+  type: brand
+  description: "Gmarket's SIL OFL brand typeface — 3 weights, TTF/OTF, 11,172 KR glyphs. First-party font artifact from a 25-year-old open marketplace; backing 247 :root CSS vars + Smile Yellow #ffd200 + Club/Event/Service sub-systems on the storefront."
+---
+
+# Design System Inspiration of Gmarket (지마켓)
+
+## 1. Visual Theme & Atmosphere
+
+Gmarket is what a quarter-century-old Korean open-market looks like after Shinsegae's 2021 acquisition: a department-store conglomerate has bought a Y2K-era trading floor and is mid-renovation, but the floor is still open and the deals are still moving. The home page is unapologetically dense — a 1200px fixed canvas (`--minWidth: 1200px`), white surface, ink-near-black text (`#222222`), and a single, surgical brand asset: **Gmarket Red** `#da120d`, deployed almost exclusively on price (`쿠폰적용가`, `52%`, the final-card-discount line). There is no gradient, no hero video, no marketing flourish. The atmosphere is **"전단지가 잘 정돈된 백화점 1층"** — a leaflet, organized — where every pixel of vertical real estate is a chance to surface another deal, and the visual job of design is to keep that density legible.
+
+The page reads as a vertical stack of category modules, each anchored by an H2 in 28px/700 (or 24px/700 in the compact module variant), beneath which 2-up or 4-up product cards repeat indefinitely. The product card itself is a Korean-marketplace classic: thumbnail (mostly 1:1 square, occasionally 16:9 banner), title in body weight, price in 16–18px Gmarket Red and bold, then a delivery chip (스마일배송 / 무료배송), a few badges (쿠폰적용가 / 카드혜택가), and a heart. Cards never carry box-shadow — depth, in Gmarket's chrome, is borders and color tints, not elevation. Pills, however, are everywhere: navigation chips, filter strips, "Smile Club" loyalty rails, all radius 20–27px.
+
+The token system, captured live from `:root`, is **enormous** — 247 CSS custom properties — and unusually formal for a legacy marketplace. Ten hues (gray, red, orange, yellow, green, teal, blue, indigo, purple, pink), each in a clean 10-stop ladder (50→900), plus three sub-systems that map directly to revenue programs: **Club Smile** (Shinsegae Universe loyalty — navy/blue/gray, each in 5 stops), **Event** (BF / BS / BSD sub-brand event accents), and three single-token service accents (Smile-Yellow `#ffd200`, StarDelivery-Purple `#7130f3`, Green-Connect-Blue `#00c3a0`). The display face is the brand's own **Gmarket Sans** — distributed at `corp.gmarket.com/fonts/` under the SIL Open Font License in three weights (Light 300 / Medium 500 / Bold 700) — used for section H2s, banner copy, and the (image-replacement) wordmark. The body, in contrast, rides the Apple-SD-Gothic-Neo / Noto Sans CJK KR system stack, which is the conventional choice when you cannot guarantee the user has downloaded the brand font.
+
+**Key Characteristics:**
+- **Gmarket Red** `#da120d` as the *price-discount asset* — almost exclusively used on numerical price/discount strings, not as a generic primary CTA fill
+- **Gmarket Sans** as the official display typeface (SIL OFL, 3 weights) — one of the rare Korean DSes with a first-party distributed brand font
+- **Ten-hue × 10-stop formal color ladder** + three named sub-systems (Club Smile / Event / Service-accent) — atypical token-system maturity for a legacy 2000-era marketplace
+- **1200px fixed desktop canvas** — Gmarket has not committed to fluid responsive on its web flagship; mobile lives at `m.gmarket.co.kr`
+- **No box-shadow** in sampled production — depth is borders + tints, identical to Bunjang
+- **Sprite-driven icons** (`sprite__common--before` / `sprite__common--after`) — legacy CSS sprites, deliberately not migrated to SVG
+- **BEM-flavored naming** — `button__category-all`, `text__title`, `box__layer-title`, `list-item--recent` — the production code is more disciplined than the rendered density suggests
+- **Density over hierarchy** — page is 10+ stacked category modules deep; users scan visual rhythm (red price + thumbnail), not headings
+
+## 2. Color Palette & Roles
+
+All values captured 2026-05-15 from production `:root` CSS custom properties via `getComputedStyle(document.documentElement)` on `https://www.gmarket.co.kr/` and `https://corners.gmarket.co.kr/Bestsellers`. Token names preserve Gmarket's own casing (PascalCase-Hyphen, e.g. `--Red-600`, `--Club-Navy-Main`).
+
+### Primary Brand
+- **Gmarket Red** (`#da120d`) — `--Red-600`. The brand-level red. Observed exclusively on price-discount text, percentage-off chips, and the occasional CTA edge — not used as a flooded button fill in sampled chrome.
+- **Pure White** (`#ffffff`) — `--White`. Page background, card surface.
+- **Near-Black Ink** (`#222222`) — `--Gray-900`. Primary text, headings, prices co-anchor with `--Red-600`.
+
+### Service-line Accents
+- **Smile Yellow** (`#ffd200`) — `--Smile-Yellow`. Loyalty / SmilePay / SmileClub program color.
+- **StarDelivery Purple** (`#7130f3`) — `--StarDelivery-Purple`. Same-day premium delivery service color.
+- **Green-Connect-Blue** (`#00c3a0`) — `--Green-Connect-Blue`. Cross-app continuity / Shinsegae connect program teal.
+
+### Event Sub-brands (promotional surfaces only)
+- **BF main** (`#f1266d`) — `--Event-bf-main`. Black Friday / large promo pink-red.
+- **BS main** (`#fd4e28`) — `--Event-bs-main`. Big-sale orange-red.
+- **BSD main** (`#7b00e7`) — `--Event-bsd-main`. Specialty promotion violet.
+
+### Club Smile (Shinsegae Universe loyalty)
+A separate sub-system, with its own Navy / Blue / Gray ladders — used on members-only Club rails and the Smile Universe surface.
+- **Navy** — `--Club-Navy-Main #002041` / `-80 #334d67` / `-60 #66798d` / `-40 #99a6b3` / `-20 #ccd2d9`
+- **Blue** — `--Club-Blue-Main #497cff` / `-80 #6d96ff` / `-60 #92b0ff` / `-40 #b6cbff` / `-20 #dbe5ff`
+- **Gray** — `--Club-Gray-Main #c8c8c8` / `-80 #d3d3d3` / `-60 #dedede` / `-40 #e9e9e9` / `-20 #f4f4f4`
+
+### Neutral Scale (`--Gray-*`)
+A 10-stop ladder, semantically aligned with Material's named stops but with Gmarket's own observed text-color discipline.
+- `--Gray-900` `#222222` — primary text, prices (when not red), headings
+- `--Gray-800` `#424242` — strong secondary text
+- `--Gray-700` `#616161` — secondary text
+- `--Gray-600` `#757575` — tertiary text, footer
+- `--Gray-500` `#9e9e9e` — disabled text, placeholder
+- `--Gray-400` `#bdbdbd` — disabled-icon, divider-strong
+- `--Gray-300` `#e0e0e0` — divider, input border
+- `--Gray-200` `#eeeeee` — light divider, card edge
+- `--Gray-100` `#f5f5f5` — section tint, row hover
+- `--Gray-50`  `#fafafa` — barely-tinted alternate row
+
+### Semantic / Utility Hues (each as a 10-stop ladder; `-600` is the most-deployed default)
+- **Red** — 50→900 (`#fff5f5` → `#7d0800`); brand & price use `-600 #da120d`, destructive/error typically `-500 #ef2b2a`
+- **Orange** — 50→900 (`#fff6f2` → `#5e2700`); time-pressure / countdown / "마감임박" badges use `-500 #f9560e` and `-600 #da4000`
+- **Yellow** — 50→900 (`#fffce5` → `#592500`); warning + the Smile-program family
+- **Green** — 50→900 (`#e5fce3` → `#013600`); availability / success — `-500 #00c400` observed for delivery-confirmed and stock-ok states
+- **Teal** — 50→900 (`#eaf9fa` → `#0a3545`); informational secondary, connect-program accent
+- **Blue** — 50→900 (`#eef7ff` → `#072182`); information, link, secondary CTA; `--swiper-theme-color: #007aff` is Swiper.js default, separately
+- **Indigo** — 50→900 (`#f5f5ff` → `#2d2587`); intentionally-cool informational, used on tab strips
+- **Purple** — 50→900 (`#fbf5ff` → `#37188c`); brand-extension, premium feature surfaces
+- **Pink** — 50→900 (`#fff2fc` → `#64009a`); promotional surfaces, often paired with `--Event-bf-main`
+
+### Default Page Surfaces
+- Page background: `#ffffff`
+- Card / surface: `#ffffff`
+- Footer / footer-area tint: `--Gray-100 #f5f5f5`
+- Section-divider tint: `--Gray-50 #fafafa`
+
+## 3. Typography
+
+Gmarket runs a two-tier typography model: a **first-party display face** for set-piece moments and a **conventional Korean system stack** for body density.
+
+### Type Stack
+- **Display** — `--gmarketFont: "Gmarket Sans", sans-serif`. Used on section H2s (28px / 700 in hero modules, 24px / 700 in compact modules), the H1 wordmark (image-replacement, `font-size: 0`), and promotional banner copy.
+- **Body / system** — `-apple-system, system-ui, "Apple SD Gothic Neo", Roboto, "Noto Sans CJK KR", Tahoma, "Noto Sans Korean", "Noto Sans KR", "Gmarket Sans", sans-serif`. Used on 146 / 272 sampled elements — the conventional Korean Apple-first → Noto-fallback chain, with Gmarket Sans as the final fallback before generic sans.
+
+### Gmarket Sans (first-party)
+Distributed at `corp.gmarket.com/fonts/` under the **SIL Open Font License** (free commercial + non-commercial), released in TTF and OTF, in three weights:
+- **Light** (300)
+- **Medium** (500)
+- **Bold** (700)
+
+Character set: 11,172 Korean syllables · 95 Latin · 986 special. Design intent (per the distribution page): geometric forms within square boundaries, aligned for accessibility across print/web/mobile. The font is the strongest single Tier-1 design-system artifact Gmarket publishes — no token JSON, no Storybook, no Figma library is publicly available, but the brand font is fully open and free to vendor.
+
+### Observed Size Scale (px)
+- `28px / 700` — Section H2 (hero modules: "지금 제일 잘 나가는 상품")
+- `28px / 400` — Subpage H2 (베스트 page: "G마켓 베스트" — note the lighter weight, used when the page itself is the title)
+- `24px / 700` — Compact module H2 ("전체카테고리", "프로모션 배너")
+- `18.72px / 700` — Card H3 ("하나더 상품", "베스트 상품")
+- `16px / 400-700` — Body, primary card title, primary nav anchor, price emphasis
+- `14px / 400` — Secondary nav, GNB language switcher ("Global"), filter/utility text
+- `13.3333px / 400` — Utility text, tooltip, swiper-button label, layer-close
+- `12px / 400-500` — Meta text, footer notices, micro-badges
+- `11px / 500` — Price-modifier labels ("쿠폰적용가"), the smallest legible price-context tag
+
+### Weight Discipline
+Two production weights dominate: **400** (body / nav / meta) and **700** (headings / prices / strong emphasis). Gmarket Sans's available **500 (Medium)** is *less frequently observed in sampled production CSS* — primarily reserved for the rendered logotype and certain banner overlays. The marketing surfaces lean on the 400/700 binary because the body system stack (Apple SD Gothic Neo, Noto Sans KR) is most stable at those two weights.
+
+### Line-height
+Largely default-browser (1.2–1.5 depending on element). Gmarket does not enforce a strict line-height token system on the home/bestsellers surfaces.
+
+## 4. Components
+
+All values from live CDP inspect on 2026-05-15. Where a state was not directly observed (hover / pressed / focus / disabled), the value is marked `(Inferred)`. Schema: one field per bullet.
+
+### Buttons
+
+**Primary CTA (price-anchor / "쇼핑하러 가기")**
+- Background: `#da120d` *(Inferred — observed as text color, also matches `--Red-600`; some commerce-detail CTAs ship as red flood fills)*
+- Text: `#ffffff`
+- Border: none
+- Radius: `4px` *(matches observed --radius level)*
+- Padding: `14px 24px` *(Inferred from observed nav padding scale)*
+- Font: 16px / 700 / system stack
+- Use: highest-intent purchase action; restricted to one per surface
+
+**Secondary / Outlined**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: `1px solid #e0e0e0`  (`--Gray-300`)
+- Radius: `3px`
+- Padding: `0px` *(observed on `button__sellermenu` — chrome-utility variant; commerce-page secondary buttons inflate to `10px 16px`)*
+- Font: 14px / 400 / system stack
+- Use: chrome-utility actions, "판매자서비스" footer button
+
+**Pill / Filter (nav anchor + category chips)**
+- Background: `transparent` or `#ffffff`
+- Text: `#222222` (active) / `#666666` (default)
+- Border: `1px solid #e0e0e0`  *(default, Inferred from card edge token)*
+- Radius: `20px`
+- Padding: variable `(8–12)px (16–20)px`
+- Font: 16px / 400 / system stack
+- Use: home-page module entry pills, GNB sub-category chips
+
+**Pill / Promo banner ("하나더")**
+- Background: `transparent`
+- Text: `#666666`
+- Radius: `20px`
+- Font: 16px / 400 / system stack
+- Use: in-card promo link with rounded pill affordance, observed live
+
+**Sprite / Icon Button**
+- Background: `transparent`
+- Text: `transparent` (icon-only — text hidden via sprite)
+- Border: none
+- Radius: `0px`
+- Padding: `0–5px`
+- Use: layer-close (×), swiper-next/prev, tooltip-info, search-clear; legacy CSS-sprite-driven (`sprite__common`)
+
+### Inputs
+
+**Search Field (header)**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: `2px solid #222222` *(Inferred — Gmarket's signature dark-stroked search input)*
+- Radius: `0px`
+- Height: `42–48px`
+- Font: 16px / 400 / system stack
+- Inner button: `button__search` sprite icon-only
+- Placeholder: `#9e9e9e` (`--Gray-500`)
+
+**Filter / Sort Input (refinement strip)**
+- Background: `#ffffff`
+- Border: `1px solid #e0e0e0`
+- Radius: `3px` *(observed)*
+- Padding: `0`
+- Font: 14px / 400
+
+### Cards
+
+**Product Card (home / bestsellers)**
+- Background: `#ffffff`
+- Border: none (separation via 8–16px gutter)
+- Radius: `0–6px` on thumbnail container; card itself: `0px`
+- Shadow: none
+- Padding: thumbnail flush, content padding `8px 0`
+- Thumbnail aspect: 1:1 (square) — dominant; 16:9 for banner-card variants
+- Title: 14–16px / 400 / `#222222`
+- Price (current): 16–18px / 700 / `#da120d`
+- Price (original / strike): 12–13px / 400 / `#9e9e9e` with `text-decoration: line-through`
+- Discount %: 12–18px / 700 / `#da120d`
+- Delivery chip: 11–12px / 500 / chip-background tied to service (스마일배송 yellow / 무료배송 gray)
+
+**Ranking Card (bestsellers)**
+- Adds: numeric rank badge (1, 2, 3 ...) top-left, 18–24px / 700, no fill
+- Top-3 ranks: `#da120d` text
+- Ranks 4+: `#222222` text
+
+### Badges / Chips
+
+**Discount-rate Badge**
+- Background: transparent (text-only) or `--Red-50 #fff5f5`
+- Text: `#da120d`
+- Radius: `0px` or `3px`
+- Font: 12–14px / 700
+
+**Smile Club / Loyalty Badge**
+- Background: `--Club-Navy-Main #002041`
+- Text: `#ffd200` (Smile-Yellow)
+- Radius: `3–4px`
+- Font: 11–12px / 700
+
+**Delivery Chip (스마일배송 / 무료배송 / 도착보장)**
+- Background: `--Smile-Yellow #ffd200` (스마일배송) / `--Gray-100 #f5f5f5` (무료배송) / `--StarDelivery-Purple #7130f3` (StarDelivery)
+- Text: `#222222` on yellow / `#616161` on gray / `#ffffff` on purple
+- Radius: `2–3px`
+- Padding: `2px 6px`
+- Font: 11px / 500
+
+### Navigation
+
+**GNB Anchor (top primary)**
+- Background: `transparent` (default) → `#222222` underline 2px (hover)
+- Text: `#222222` (default) / `#da120d` (current)
+- Padding: `17px 0px 20px`  *(observed live on `button__category-all`)*
+- Font: 16px / 400 / system stack
+
+**Utility Nav (top-bar mypage / cart / global)**
+- Text: `#777777` (`--Gray-medium`)
+- Font: 14px / 400 / system stack
+- Padding: minimal — text-only with sprite icon
+
+### Layers / Modals
+
+**Recent-products Layer (`box__layer-title`)**
+- Background: `#ffffff`
+- Border: `1px solid #e0e0e0` *(Inferred)*
+- Shadow: none observed
+- Title: 16px / 700 / `#222222` ("최근 본 상품")
+- Tab inactive: `#666666` (`--Gray-medium`)
+
+### Service Banners (event-system surfaces)
+
+**BF / BS / BSD promotional fills**
+- Background: `--Event-bf-main #f1266d` (BF) / `--Event-bs-main #fd4e28` (BS) / `--Event-bsd-main #7b00e7` (BSD)
+- Text: `#ffffff`
+- Use: full-bleed event-week landing modules — these are *not* part of the everyday chrome; they swap in for event-period campaigns and revert
+
+---
+
+**Verified:** 2026-05-15
+**Tier 1 sources:**
+- Live CDP `:9222` inspect — `https://www.gmarket.co.kr/` (182 samples, 247 :root CSS vars)
+- Live CDP `:9222` inspect — `https://corners.gmarket.co.kr/Bestsellers` (90 samples, 246 :root CSS vars)
+- `corp.gmarket.com/fonts/` — Gmarket Sans SIL OFL distribution page (typeface = Tier-1-positive)
+**Tier 2 sources:**
+- `getdesign.md/gmarket` — "No designs found for 'gmarket'" (verified 2026-05-15)
+- `styles.refero.design/?q=gmarket` — no result cards in SSR DOM (verified 2026-05-15)
+**Conflicts unresolved:**
+- Primary CTA flooded-red variant inferred (not observed in 272 sampled chrome elements; commerce-detail-page surfaces not captured this pass — flagged for UPDATE)
+- Hover / pressed / focus / disabled states not directly captured — single-pass CDP only
+
+## 5. Layout & Spacing
+
+Gmarket's flagship runs a **fixed-1200px desktop canvas** (`--minWidth: 1200px`). This is a deliberate legacy decision — the 2000-founded marketplace has not committed to fluid responsive on `www.`; the mobile flagship lives at `m.gmarket.co.kr` as a separate surface. Below 1200px, the desktop site horizontal-scrolls rather than reflowing.
+
+### Grid
+- **Outer max-width**: 1200px, centered, no bleed
+- **Module spacing**: ~48–64px vertical between category modules (H2 → first card row → repeat)
+- **Card grid**: 2-up on narrow modules, 4-up on standard modules, 5-up on bestsellers-page rank grid
+- **Card gutter**: 8–16px horizontal, 16–24px vertical
+- **Inner card padding**: 8px around content, thumbnail flush
+- **GNB strip height**: ~50–60px sticky, white background
+
+### Spacing Scale (inferred from observed padding/margin frequencies)
+Gmarket does not expose `--space-*` tokens. Observed paddings cluster at:
+- `4px` — micro (chip vertical)
+- `8px` — small (card inner)
+- `12–16px` — medium (button horizontal, list-item padding)
+- `20–24px` — large (section internal gap)
+- `48–64px` — module vertical break
+
+### Page Anatomy (home, top-to-bottom)
+1. Top utility bar — mypage / cart / global / lang (12–13px utility text)
+2. Main header — wordmark + search + cart icon
+3. GNB — 전체카테고리 / 베스트 / 신상마켓 / 슈퍼딜 / 알뜰쇼핑 / 브랜드데이 / G마켓Pay / 골프 / 라이브
+4. Hero swiper banner (Swiper.js, `--swiper-theme-color: #007aff`)
+5. Vertical category modules ×10 (each = H2 + grid)
+6. Footer — seller-services + legal + corp links + 신세계그룹 family-site row
+
+## 6. Iconography & Imagery
+
+- **CSS Sprites** — Gmarket has not migrated to SVG / icon-font for chrome icons. Production class system: `sprite`, `sprite__common`, `sprite__common--before`, `sprite__common--after`. Icons are positioned slivers of a master PNG, sized via `--spriteSize: 100% 100%`. This is a legacy choice — performance-fine, but inaccessible to recoloring at runtime.
+- **Product thumbnails** — 1:1 square dominant; 16:9 banner cards for category-feature modules
+- **Banner imagery** — promotional photography, large-typography overlays in Gmarket Sans, typically text + product + offer; brand stays out of the way
+- **No illustration system** observed in chrome — Gmarket is a photo-first marketplace; illustrations appear only in onboarding / empty-states (not captured this pass)
+
+## 7. Motion & Interaction
+
+Motion tokens **not directly captured** in single-pass CDP. Observed motion patterns:
+- **Swiper.js carousel** on hero banner — paged horizontal swipe (default Swiper timing, ~300ms)
+- **Sticky GNB** — fixed on scroll, no transform animation
+- **Hover affordances** — primarily underline + color shift on text-link; observed `cursor: pointer` on most clickable elements without elaborate transition
+- **No view-transition / scroll-driven animation** observed in chrome
+
+Flagged for UPDATE: capture explicit `transition` and `animation` shorthand frequencies, capture hover/focus states.
+
+## 8. Accessibility & States
+
+Gmarket's flagship has **observable a11y debt** — surfaced here factually, not editorialized.
+
+- **H1 image-replacement** — the wordmark `<h1>` carries `font-size: 0px`; logo is a sprite background-image. Screen readers receive the text "G마켓" via inner span, but visually-rendered alt-text is absent. Acceptable pattern, but text-color falls back to `--Gray-500 #9e9e9e` in some sampled cases (image hides this).
+- **Color contrast on price-red on white** — `#da120d` on `#ffffff` = 5.5:1 — passes WCAG AA for normal text (4.5:1) and AAA for large text (7:1+). Strong.
+- **`--Smile-Yellow #ffd200` on `#ffffff`** — 1.6:1 — fails WCAG AA. Used as background fill with dark text, not on white as foreground. Risk only if reused inverted.
+- **Fixed-1200px canvas** — fails WCAG 1.4.10 Reflow (320px reflow requirement). Mitigated only by the separate `m.gmarket.co.kr` mobile surface.
+- **Sprite-driven icons** — no `aria-label` consistently observed on `button__layer-close`, `button__tooltip`, swiper next/prev. Mixed: `<button>` carries text "닫기" in some cases, sprite-only in others.
+- **State coverage** — visible focus rings inconsistent; default-browser focus outline observed on `<a>`, custom focus rarely surfaced. Disabled state not directly captured.
+
+Captured floor: focus rings + disabled states are an UPDATE-pass target.
+
+## 9. Content Voice (analyst paraphrase — no verbatim Gmarket copy)
+
+Gmarket's chrome voice is **transactional and time-pressured**. It speaks in numeric specificity (price, discount %, time-remaining) and in service-naming (스마일배송 / 안전결제 / 도착보장 / 카드혜택가). It does not advertise brand personality from the chrome — the chrome is the deal. Brand voice lives in event-week landing banners and in the corporate site (`corp.gmarket.com`), where positioning copy reads aspirational ("Korea's e-commerce benchmark", "We Connect", "지금부터의 마켓").
+
+**Voice traits (analyst paraphrase, not lifted)**:
+- Specific over evocative — "쿠폰적용가 7,840원" beats "Great deal"
+- Compound service nouns — "스마일배송", "최종카드혜택가", "감정완료" — Korean marketplace argot, dense
+- Numeric urgency — countdown, stock-low, "마감임박" are first-class typographic citizens
+- Brand restraint — "G마켓" rarely speaks in first-person; the user does the verb
+
+**Do**: lead with price, name the service plainly, let the number do the work
+**Don't**: invent a brand voice from chrome — Gmarket's chrome is a venue, not a personality
+
+## 10. Voice & Tone (illustrative — OmD fresh derivations, not Gmarket copy)
+
+Three voice samples illustrating the analyst paraphrase above. **These are fresh derivations for ports — not Gmarket marketing copy. Verify before adoption.**
+
+- *"오늘 가격, 오늘 도착."* — six syllables, two facts, no adjective
+- *"쿠폰 적용 시 22% 더."* — price-context as headline; the verb is invisible
+- *"이 가격, 이번 주만."* — temporal scarcity without exclamation
+
+**Do**: specificity, service-name accuracy, price-first
+**Don't**: emotional adjectives ("amazing", "최고의"), abstract brand-claims, hero-tagline gestures in card chrome
+
+## 11. Brand Narrative
+
+Gmarket (지마켓) was founded as **2000** as an open-market predecessor of Korean e-commerce — among the first generations of platforms that let any individual seller post a product to a national catalog. eBay acquired the platform in 2009 and ran it as eBay Korea, alongside Auction (founded 1998, the older sibling). In **2021, Shinsegae Group (신세계그룹)** — the conglomerate behind E-Mart, the Shinsegae Department Store, and Starbucks Korea — acquired the eBay Korea business unit, bringing Gmarket and Auction under the Shinsegae Universe umbrella, alongside SSG.com and E-Mart Mall. The 2024–2026 chrome reflects this transition: the home page now surfaces "신세계 유니버스 클럽 전용" modules, the **Club Smile** color sub-system maps to Shinsegae's loyalty programme, and an "이마트몰" (E-Mart Mall) section ships fresh groceries inside the Gmarket interface.
+
+Gmarket's positioning slogan, observed on the corporate site as factual context: **"지금부터의 마켓"** ("the market from-now-onward"). The narrative argues that 25 years of marketplace experience is being relaunched as a Shinsegae-integrated commerce floor — Auction for the auction-hunters, Gmarket for the open-market regulars, SSG.com for the premium-vertical, all stitched together with SmilePay (single wallet), StarDelivery (premium delivery), and Smile Club (loyalty + members-only pricing).
+
+Service portfolio (per `corp.gmarket.com`, captured 2026-05-15): **Gmarket** (open market, since 2000), **Auction** (since 1998), **SmilePay** (wallet), **StarDelivery** (premium delivery), **Smile Club** (Shinsegae Universe loyalty), **G마켓Pay** (payment integration). HQ city, current CEO, headcount, and total funding not captured this pass (corporate site does not surface them on the analyzed page) — flagged for UPDATE.
+
+*(Founder name and 1999/2000 founding-team specifics from earlier eBay-Korea era have evolved through three ownership transitions — eBay Korea → Shinsegae acquisition 2021 — and any "founder quote" attribution must verify against multiple ownership-era sources. Not included here without that verification.)*
+
+## 12. Design Principles (analyst-derived from observed patterns)
+
+1. **Density is the service.** Gmarket users come to scan, not to read. The chrome optimizes scroll efficiency — vertical stacks of category modules, repeating thumbnail-price-chip rhythm — because finding the deal you didn't know you wanted is the value proposition.
+   *UI implication*: do not introduce hierarchy that breaks scan rhythm; do not pad sections to "breathe" at the expense of card count per fold.
+
+2. **Red is for price, not personality.** Gmarket Red `#da120d` is reserved almost exclusively for numerical price-discount tokens. The brand does not flood it as a generic primary fill in observed chrome.
+   *UI implication*: when porting Gmarket's palette to a new surface, treat red as a *semantic-price asset* (like Bunjang's), not a brand-button color.
+
+3. **Service-name accuracy over copy-craft.** "스마일배송" / "안전결제" / "도착보장" / "쿠폰적용가" are first-class typographic citizens. The brand does not abbreviate or rebrand them for casual surfaces.
+   *UI implication*: in any localized port, render Korean service-names exactly; do not translate "스마일배송" to "Smile Delivery" in Korean chrome.
+
+4. **Sub-brand color systems beat a flat palette.** Club Smile (5×3 navy/blue/gray), Event (BF/BS/BSD), and three single-token service accents map color directly to revenue programs.
+   *UI implication*: when extending Gmarket's palette, add named sub-systems for each commercial program, not generic "tertiary" tokens.
+
+5. **Legacy is not debt — it's discipline.** CSS sprites, fixed-1200px canvas, BEM naming — these are deliberate (cost / stability / muscle-memory for the seller community), not unmaintained.
+   *UI implication*: do not propose "modernization" without surfacing the operational cost of breaking 25-year-old seller workflows. The mobile flagship at `m.gmarket.co.kr` is where modern responsive lives.
+
+## 13. Personas (analyst inference — illustrative, verify before adoption)
+
+> *Disclaimer: Gmarket does not publish official user personas. The four archetypes below are inferred from observed surface design and Korean-marketplace context. Treat as illustrative analyst fiction for porting decisions, not as ground-truth.*
+
+1. **The 40-something household manager** — primary buyer for the family. Comes for staples (생필품 / 식품 / 세제), comes back for the Smile Club coupon. Scans the home grid by category, opens 4–6 product cards per visit, completes one purchase per session. Values: price accuracy, delivery reliability (스마일배송), coupon-stack legibility.
+
+2. **The deal-hunting 30-something** — knows the platform inside out. Bookmarks the bestsellers page, sorts by 가격 / 인기 / 신상품, uses keyboard shortcuts. Comes daily during 슈퍼딜 / 빅스마일데이 events. Values: countdown timers, "마감임박" badges, transparent card-discount math.
+
+3. **The 50+ open-market regular** — Gmarket-since-Y2K. Trusts the brand because it predates current Korean e-commerce. Less mobile-fluent — uses `www.gmarket.co.kr` on desktop, prefers the fixed-1200px canvas because it's predictable. Values: large enough text (won't tolerate < 14px), Korean service-names (won't tolerate Latin abbreviations), call-center hotline visibility.
+
+4. **The Shinsegae Universe loyalty member** — newer cohort, post-2021 acquisition. Discovered Gmarket through SSG.com cross-sell or E-Mart. Engages with the Club Smile modules, uses SmilePay as the default wallet. Values: members-only pricing, cross-app continuity (Green-Connect-Blue program), unified loyalty across Shinsegae brands.
+
+## 14. States
+
+| State | Surface | Token / pattern |
+|---|---|---|
+| **Default** | All chrome | Page bg `#ffffff`, text `--Gray-900 #222222`, accents per palette |
+| **Hover (link)** | Underline + color shift to `--Red-600 #da120d` *(Inferred — common Korean marketplace pattern, not directly captured)* |
+| **Hover (card)** | Subtle border highlight, no shadow added *(Inferred)* |
+| **Pressed** | `0.96` scale or no visual feedback *(Inferred, low-confidence)* |
+| **Focus** | Browser-default outline on `<a>` and `<input>`; custom focus ring not consistently observed |
+| **Disabled** | Text `--Gray-400 #bdbdbd`, background `--Gray-100 #f5f5f5` *(Inferred)* |
+| **Empty (recent-products layer)** | "최근 본 상품이 없습니다." — observed verbatim in layer; analyst note only, not adopted |
+| **Loading** | Skeleton not observed in chrome (page is server-rendered) |
+| **Error (search no-result)** | Not captured this pass — flagged for UPDATE |
+| **Success (purchase / cart-add)** | Toast / layer — not captured this pass |
+| **Promotional / Event-week** | Surface swaps to `--Event-bf-main` / `--Event-bs-main` / `--Event-bsd-main` fills with `#ffffff` text |
+| **Loyalty (Smile Club)** | Module backgrounds shift to `--Club-Navy-Main #002041`, accent `#ffd200` text |
+
+## 15. Motion & Easing
+
+Motion tokens **partially captured** — the chrome relies on Swiper.js defaults and CSS-transition shorthand rather than a public token system.
+
+### Observed
+- **Swiper carousel** — `--swiper-theme-color: #007aff` (Swiper.js library color, not a Gmarket brand token), default ~300ms slide duration
+- **Sticky GNB** — `position: sticky` with no transform animation
+- **Sprite-icon hover** — typically `transition: background-position 0.1s` (inferred from sprite pattern)
+
+### Not Captured (UPDATE targets)
+- Modal / layer open-close timing
+- Toast / snackbar duration
+- Scroll-driven animation
+- Reduced-motion handling
+
+### Motion Rules (analyst recommendation for ports, not lifted)
+- Carousels should default ~300ms
+- Hover responses should be ≤150ms
+- Layer / modal transitions should be 200–250ms with ease-out
+- Respect `prefers-reduced-motion: reduce` — disable swiper auto-advance, eliminate non-essential transitions
+
+---
+
+**Verified:** 2026-05-15
+**Tier 1 sources:**
+- Live CDP `:9222` inspect: `https://www.gmarket.co.kr/` (182 samples, 247 `:root` CSS vars)
+- Live CDP `:9222` inspect: `https://corners.gmarket.co.kr/Bestsellers` (90 samples, 246 `:root` CSS vars)
+- `https://corp.gmarket.com/` — corporate-narrative source (founding year, parent company, service portfolio)
+- `https://corp.gmarket.com/fonts/` — **Tier-1-positive** Gmarket Sans SIL OFL distribution
+**Tier 2 sources:**
+- `https://getdesign.md/gmarket` — "No designs found for 'gmarket'" (negative, verified 2026-05-15)
+- `https://styles.refero.design/?q=gmarket` — no result cards in SSR DOM (negative, verified 2026-05-15)
+**Tier 1 official DS:**
+- **Partial positive** — Gmarket Sans typeface (SIL OFL) is a first-party distributed brand-font artifact. No public Storybook / Figma library / token JSON / `design.gmarket.*` surface exists; `design.gmarket.co.kr`, `tech.gmarket.co.kr`, `brand.gmarket.co.kr`, `ui.gmarket.co.kr`, `gmarket.design` all DNS-no-resolve as of 2026-05-15. Production `:root` token system (247 CSS vars) is the de-facto public artifact, captured directly.
+**Conflicts unresolved:**
+- Primary CTA flooded-red variant inferred only — not directly observed in 272 sampled chrome elements; commerce-detail-page surface not captured this pass
+- Hover / pressed / focus / disabled / error / loading states largely not captured in single-pass CDP
+- Founder / CEO / HQ / headcount not captured from `corp.gmarket.com` analyzed page
+- Smile Club / SSG cross-app surfaces not directly inspected — Club Smile colors confirmed from `:root` but on-surface usage not sampled
+**IP guardrails:**
+- Gmarket logo / wordmark: reference-only, not redistributed
+- Gmarket Sans font files: NOT vendored in this repo (SIL OFL permits redistribution, but we link to first-party distribution at `corp.gmarket.com/fonts/`)
+- No verbatim Gmarket marketing copy reproduced; "지금부터의 마켓" quoted once as factual brand-narrative context in §11
+- Service-feature names (스마일배송 / 안전결제 / 도착보장 / Club Smile / SmilePay / StarDelivery) used descriptively
+- §10 voice samples are OmD-original illustrative reconstructions; explicitly marked "fresh derivations for ports — not Gmarket marketing copy"
+- §13 personas explicitly marked analyst inference, with disclaimer
+- Token CSS values reproduced under analytical fair-use as factual public-CSS observations