zugzbot 1.0.21 → 1.0.22

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

@@ -1,415 +0,0 @@
----
-id: wadiz
-name: Wadiz
-country: KR
-category: fintech
-homepage: "https://www.wadiz.kr"
-primary_color: "#00c4c4"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=wadiz.kr&sz=256"
-verified: "2026-05-14"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#00c4c4"
-    primary-hover: "#07abae"
-    tint: "#e6fafa"
-    tint-accent: "#bef5f5"
-    heading: "#191f28"
-    body: "#333d4b"
-    muted: "#4e5968"
-    subtle: "#6b7684"
-    placeholder: "#8b95a1"
-    disabled: "#b1b8c3"
-    canvas: "#ffffff"
-    surface-alt: "#fafbfd"
-    surface-neutral: "#f2f5f8"
-    divider: "#e3e7ee"
-    border: "#ced4de"
-    success: "#00af84"
-    alert: "#ff5959"
-    info: "#4672f9"
-    promo: "#fcc500"
-    on-primary: "#ffffff"
-  typography:
-    family: { sans: "Pretendard", mono: "ui-monospace" }
-    hero-numeral: { size: 64, weight: 700, lineHeight: 1.1, use: "Funded amount % on detail pages" }
-    h1:           { size: 48, weight: 700, lineHeight: 1.2, use: "Home banner, category landing" }
-    h2:           { size: 32, weight: 700, lineHeight: 1.25, use: "Section titles" }
-    h3:           { size: 24, weight: 700, lineHeight: 1.3, use: "Maker name, modal headings" }
-    card-title:   { size: 18, weight: 700, lineHeight: 1.35, use: "Reward card project title" }
-    lead:         { size: 17, weight: 400, lineHeight: 1.5, use: "Short paragraph leads" }
-    body:         { size: 15, weight: 400, lineHeight: 1.55, use: "Description text, body copy" }
-    label:        { size: 14, weight: 400, lineHeight: 1.4, use: "Time-remaining, supporter count" }
-    caption:      { size: 13, weight: 400, lineHeight: 1.4, use: "Helper text, fine print" }
-    small:        { size: 12, weight: 400, lineHeight: 1.3, use: "Badge text, micro-tags" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 64 }
-  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
-  shadow:
-    header: "0 1px #0000000f"
-    modal: "0 16px 16px -1px #0a16461a, 0 0 5px #0a16460f"
-  components:
-    button-primary: { type: button, bg: "#00c4c4", fg: "#ffffff", radius: 8, use: "Filled mint contained CTA; active #07abae family" }
-    button-secondary: { type: button, bg: "transparent", fg: "#00c4c4", radius: 8, use: "Outlined mint; 1px #00c4c4 border, hover #e6fafa" }
-    button-tint: { type: button, bg: "#e6fafa", fg: "#00c4c4", radius: 8, use: "Wadiz signature tint button; hover #bef5f5" }
-    label-badge-solid: { type: badge, bg: "#00c4c4", fg: "#ffffff", use: "Funding-state chip solid (오픈중)" }
-    label-badge-tint: { type: badge, bg: "#e6fafa", fg: "#00c4c4", use: "Funding-state chip tint (얼리버드)" }
-    reward-card: { type: card, bg: "#ffffff", radius: 8, padding: "16px", use: "Most-shipped component; 4:3 thumbnail, badge row, funding row" }
-    input: { type: input, bg: "#ffffff", fg: "#333d4b", radius: 8, padding: "12px 16px", font: "15px/400", use: "Border 1px #ced4de, focus #00c4c4, error #ff5959" }
-    modal: { type: dialog, bg: "#ffffff", radius: 16, padding: "32px", use: "Desktop modal max-w 480px; mobile bottom-sheet top corners only" }
-    tooltip: { type: card, bg: "#191f28", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "12px/400", use: "Tooltip/popover" }
-    nav: { type: tab, bg: "#ffffff", fg: "#191f28", use: "Fixed top header h64, white veil, hairline shadow" }
-  components_harvested: true
----
-
-# Design System Inspiration of Wadiz
-
-## 1. Visual Theme & Atmosphere
-
-Wadiz (와디즈) is the design language of **a crowdfunding marketplace that wants to feel like a clean retail catalog, not a charity drive**. Korea has a single dominant rewards-funding platform, and Wadiz long ago decided that *the maker's story belongs in the photography and the copy* — the chrome around it gets out of the way. The system runs on white surfaces (`#ffffff` page, `#fafbfd` surface alt, `#f2f5f8` content shelf), Toss-family near-black ink (`#191f28` heading, `#4e5968` muted, `#6b7684` subtle), and one saturated brand mint (`#00c4c4`) that does every interactive job — CTA fills, checkbox marks, focus outlines, progress fills, loader strokes. The mint is internally labeled `mint` in the CSS module class system (`.Button_mint__2W1nI`), and the supporting pastel `#e6fafa` is its tinted resting surface.
-
-The single most distinctive geometric choice is the radius scale. The production bundle contains **112 occurrences of `border-radius: 8px`** and 56 of `4px` — `8px` is the workhorse for cards, buttons, badges, and inputs. There are also 24 instances of `16px` (mostly for hero-tier modals and the top-rounded sheet pattern `16px 16px 0 0`) and 30 instances of `50%` (avatars, indicator dots, the circular maker badge). Wadiz is **medium-soft**: not as flat as Banksalad (2px) and not as plumply consumer as Toss-mobile (12–16px default). 8px reads as *retail catalog* — confident, photographic-product-grid friendly, not toy-like.
-
-Typography is **Pretendard only** — no display secondary face — loaded from the Cloudflare CDN (`pretendard/1.3.9/dynamic-subset`) and declared as the family on every text node in the reset (`wui.css`). The default weight is **400** (393 declarations) for body and listing text; **700** (358) appears almost as often for funding amounts, percentages, headings, and the maker name; **500** (109) is the medium-emphasis label weight. Base body size is `15px` (not the more common 14 or 16), and the size scale climbs through `14 → 16 → 18 → 20 → 24 → 28 → 32 → 40 → 48 → 64px` for the home hero. Letter-spacing is essentially zero across the system — Wadiz never tracks Korean tight; only the largest display headings get a `-.03em` adjustment.
-
-**Key Characteristics:**
-- Pretendard exclusive — no display accent face
-- Brand mint `#00c4c4` for all interactive moments (`Button_mint`, checkbox, focus, progress, loader)
-- Mint pastel `#e6fafa` as the resting surface of secondary CTAs (tint pattern)
-- 8px radius dominance — medium-soft, retail-catalog feel
-- Toss-family Korean ink palette (`#191f28` / `#4e5968` / `#6b7684` / `#8b95a1`)
-- Four named label colors: `mint`, `yellow` `#fcc500`, `blue` `#4672f9`, `red` `#ff5959` — each with `solid` / `outlined` / `tint` shapes
-- Five-state button system: `contained` / `outlined` / `tint` / `block` / `circular`
-- Surface alternation `#ffffff` → `#fafbfd` → `#f2f5f8` — quiet shelf stacking
-- Single-direction blue-black shadow `0 6px 6px -1px #0a16461a` — never colored, never theatrical
-- `#fcc500` (yellow) for trending / hot-deal labels — the system's hottest visual moment is *promotion*, not error
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Wadiz Mint** (`#00c4c4`): Primary brand color. Filled CTA backgrounds, link color in body copy, checkbox-checked icon, focus outlines, progress-fill, loader stroke, brand wordmark. A teal-cyan close to Tiffany-green but cooler — readable on white, energetic without being playful.
-- **Mint Hover/Active** (`#07abae`): Foreground color on tinted secondary buttons; *text* color on hover for outlined mint variants. Wadiz uses a *darker* mint on hover (opposite of Banksalad's lighten-on-hover convention).
-- **Mint Tint Surface** (`#e6fafa`): The pastel resting surface for `tint` mint buttons, the hover surface for outlined mint buttons, the success-state surface.
-- **Mint Tint Accent** (`#bef5f5`): Tint-mint hover/active surface — one shade more saturated than `#e6fafa`. Used when a tint button is itself being interacted with.
-
-### Heading & Body (Toss-family ink scale)
-- **Heading** (`#191f28`): Maximum-depth ink for headings, funding amounts, maker names. Never `#000`.
-- **Heading Alt** (`#1d2129`): Secondary near-black, used as `--dark` CSS variable for top-bar and high-emphasis fills.
-- **Body** (`#333d4b`): Standard reading text, paragraph copy.
-- **Muted** (`#4e5968`): Secondary descriptions, metadata, list-item descriptions.
-- **Subtle** (`#6b7684`): Captions, time-remaining text, footer copy.
-- **Placeholder** (`#8b95a1`): Input placeholders, the lowest readable tier.
-- **Disabled** (`#b1b8c3` / `#ced4de`): Disabled text and icons.
-
-### Surface & Border
-- **Page** (`#ffffff`): Default canvas.
-- **Surface Alt** (`#fafbfd`): Soft alternation — section dividers, "softly different" panels.
-- **Surface Neutral** (`#f2f5f8`): Content-shelf fills, search-bar resting surface, secondary card surface.
-- **Surface Neutral 2** (`#f2f4f6`): A second-pass neutral, used in modal interiors.
-- **Divider** (`#e3e7ee`): Default horizontal rules, table borders.
-- **Input Border** (`#ced4de`): Default input field border.
-
-### Label / Badge Family
-Wadiz exposes four named color variants for `LabelBadge`, each with three shapes (`solid` = filled brand; `outlined` = border-only; `tint` = pastel surface + saturated foreground). These badges power the funding-state chips that sit on every campaign card — *오픈예정*, *오픈중*, *얼리버드*, *마감임박*, *앵콜*, *인기*.
-
-- **Yellow** — `solid` `#fcc500` (text `#fff`), `tint` surface `#fffae1` (text `#fcc500`). For trending / hot-deal / 인기 (popular).
-- **Blue** — `solid` `#4672f9` (text `#fff`), `tint` surface `#ecf2ff` (text `#4672f9`), `accent` surface `#d7e3ff`, alt `#325ad7`, pale-link `#5a87ff`. For info, neutral state tags, secondary CTAs.
-- **Red** — `solid` `#ff5959` (text `#fff`), `tint` surface `#fff0f0` (text `#ff5959`), `accent` surface `#ffdcdc`, strong `#e43131`, softs `#ff6666`/`#ff7777`. For *마감임박* (deadline closing), refund, withdraw, validation error.
-- **Mint** — the same `#00c4c4` family used for primary CTA — when used as a label, signals "active funding" / "오픈중".
-
-### Semantic
-- **Success Green** (`#00af84`): Used sparingly — paid / completed / shipped states only. Brand mint is the default success color; this deeper teal-green appears only when a "this is a financial settlement, not just an interaction" tone is needed.
-- **Alert Red** (`#ff5959` family): All error and urgency. The deadline-closing chip is the only place red ever feels celebratory rather than punitive.
-- **Image Error Thumb** (`#ffb9b9`): The placeholder background when a reward thumbnail fails to load — a soft pink-red, not a gray, so the failure is *visible* without being scary.
-
-### Overlay / Modal
-- **Scrim Light** (`rgba(0,0,0,.06)` / `.15` / `.32` / `.4`): Tier of darkening overlays for menus, popovers, modals, full-sheet.
-- **White Veil** (`rgba(255,255,255,.7)` / `.9` / `.95`): For sticky headers on photography-rich pages.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`
-- **Display Accent**: None — Pretendard does the entire job
-- Variable-axis Pretendard supplies 400/500/700 weights as needed; subset CSS is dynamic via cdnjs Pretendard 1.3.9
-- Base body size: **15px** (not 14, not 16 — a deliberate Korean-rendering choice; Pretendard's 15px reads cleaner than 14px at typical Korean line lengths)
-
-### Hierarchy
-
-| Role | Family | Size | Weight | Line Height | Notes |
-|---|---|---|---|---|---|
-| Hero numeral (funded amount %) | Pretendard | 64px | 700 | 1.1 | The biggest moment — campaign success % on detail pages |
-| H1 page | Pretendard | 40–48px | 700 | 1.2 | Home banner copy, category landing |
-| H2 section | Pretendard | 32px | 700 | 1.25 | Section titles ("지금 오픈 중", "인기 펀딩") |
-| H3 card title | Pretendard | 24px | 700 | 1.3 | Maker name on detail, modal headings |
-| Card title (project) | Pretendard | 18px | 700 | 1.35 | Reward card project title (2-line clamp) |
-| Lead body | Pretendard | 17px | 400 | 1.5 | Short paragraph leads |
-| Body default | Pretendard | 15px | 400 | 1.55 | Description text, body copy (base) |
-| Body emphasis | Pretendard | 15px | 500 | 1.55 | In-paragraph emphasis, button labels |
-| Label / metadata | Pretendard | 14px | 400/500 | 1.4 | Time-remaining, supporter count, category tag |
-| Caption | Pretendard | 13px | 400 | 1.4 | Helper text, fine print |
-| Small label | Pretendard | 12px | 400/700 | 1.3 | Badge text, micro-tags |
-| Micro | Pretendard | 10px | 400 | 1.3 | Footer fine print only |
-
-Weight distribution (counted in production bundle): **400 = 393×, 700 = 358×, 500 = 109×.** The near-parity of 400 and 700 is the signal — every body paragraph is 400, every funding amount and percentage is 700, and the eye learns to bounce between the two. Wadiz never uses 300 (light) — there is no "elegant thin display" in the system.
-
-### Letter Spacing
-- Default: **0** (no tracking on Korean body)
-- Largest display only: **-0.03em** (rare; visible only in the very biggest home-hero numerals)
-
-## 4. Spacing & Layout
-
-### Spacing Scale (px)
-
-The system follows a roughly 4-multiple scale, but with specific opinionated stops:
-
-`4 → 8 → 12 → 16 → 20 → 24 → 32 → 40 → 48 → 64`
-
-Most observed gaps cluster around `16` (card padding), `20` (vertical rhythm between card sections), `24` (between-card gutter), and `32` (between section blocks). The 64px stop is rare — used as the top-padding on hero sections and the spacing under the biggest funding-amount numeral.
-
-### Layout
-
-- **Page max-width**: ~1200px content rail centered with auto margins; full-bleed hero photography routinely breaks out
-- **Card grid**: 4-column on desktop home (240–280px each), 2-column on tablet, 1-column on mobile
-- **Card aspect**: Reward thumbnail is 4:3, with a 16:9 variant on the hero carousel
-- **Header height**: ~64px fixed, with a `rgba(255,255,255,.95)` veil so the photography behind it stays half-readable
-- **Section vertical rhythm**: 32–48px between sections, 16–20px within a card
-- **Card padding**: 16px on listing cards, 20–24px on detail-page cards
-
-### Radius
-
-`8px` is the system default (112 occurrences). The full scale:
-
-- **3px** (26x): The smallest chip / inline indicator
-- **4px** (56x): Inline tag, mini-badge
-- **8px** (112x): Buttons, cards, inputs, modal — *the default for everything*
-- **16px** (24x): Hero modals, the bottom-sheet pattern (rounded only at top: `16px 16px 0 0`, 3x)
-- **50%** (30x): Avatars, indicator dots, circular maker badges
-- **100px / 999em** (6 + 3x): Pill-shaped filter chips and the "see more" floating button
-
-The 2px radius variant exists (7x) but is reserved for technical contexts — chart legend swatches, image-crop frames — not the user-facing UI.
-
-## 5. Components
-
-### Buttons
-
-The most distinctive system in the bundle. Class names follow the pattern `.Button_<role>__<hash>` with five orthogonal axes:
-
-1. **Color variant**: `mint` (brand) · `blue` (info) · `red` (destructive) · `yellow` (promo) · `green` (success)
-2. **Shape variant**: `contained` (filled) · `outlined` (border-only, default) · `tint` (pastel surface + saturated label)
-3. **Width**: default · `block` (full-row)
-4. **Geometry**: rectangular · `circular` · `badge` (chip-sized)
-5. **State**: default · `hover` · `active` · `disabled` · `loading`
-
-**Primary CTA (filled mint contained)**:
-- Background `#00c4c4`, text `#ffffff`, border-color `#00c4c4`, radius `8px`
-- Hover: background stays `#00c4c4` with subtle inner-shadow shift
-- Active: background and text desaturate to `#07abae`-family
-
-**Secondary CTA (outlined mint)**:
-- Background `transparent`, text `#00c4c4`, border `1px solid #00c4c4`
-- Hover: background `#e6fafa`, text `#07abae`
-
-**Tint button (the Wadiz signature)**:
-- Background `#e6fafa`, text `#00c4c4`, border `1px solid #e6fafa`
-- Hover: background `#bef5f5`, text `#07abae`
-- This is the third button shape — neither filled-loud nor outlined-quiet — and it carries the most visual weight in marketing modules
-
-### Label Badges
-
-The funding-state vocabulary. Pattern `.LabelBadge_<color>__<hash>.LabelBadge_<shape>__<hash>`:
-
-- **solid**: `border: solid 1px <hue>; background-color: <hue>; color: #fff;`
-- **outlined**: `border: solid 1px <hue>; background-color: #fff; color: <hue>;`
-- **tint**: `border: solid 1px <pastel>; background-color: <pastel>; color: <hue>;`
-
-The 12 combinations cover every funding state (오픈예정 = blue outlined, 오픈중 = mint solid, 얼리버드 = yellow tint, 마감임박 = red solid, 앵콜 = blue solid, 인기 = yellow solid). The reversed badge (`ReversalLabelBadge`) is for dark-background photography overlays.
-
-### Reward Card
-
-The single most-shipped component. Structure:
-
-- **Thumbnail** (4:3, radius `8px` at the top): Lazy-loaded with `opacity 0 → 1` 0.25s ease-in-out fade — `.CardThumbnail_visible__343f4`
-- **Error state**: When the thumbnail fails, `background-color: #ffb9b9` (soft pink-red) — a recognizable Wadiz failure state, not a gray box
-- **LabelBadge row**: 1–2 chips at top-left (`마감임박` + `얼리버드`)
-- **Maker line**: `font-size: 13px`, `color: #6b7684` — small, secondary
-- **Title**: `font-size: 18px`, `font-weight: 700`, `color: #191f28`, 2-line clamp
-- **Funding row**: Percentage `28px / 700 / #00c4c4` + supporter count `14px / 400 / #4e5968`
-- **Progress bar**: 4px tall, radius `2px`, fill `#00c4c4`, track `#f2f5f8`
-
-### Inputs
-
-- Border `1px solid #ced4de`, radius `8px`, padding `12–14px 16px`, font `15px / 400 / #333d4b`
-- Focus: border `#00c4c4`, no shadow ring (Wadiz prefers a colored border change over an outline glow)
-- Disabled: background `#fafbfd`, text `#b1b8c3`
-- Error: border `#ff5959`, helper-text below in `#ff5959 / 13px`
-
-### Header / Navigation
-
-- Fixed top, height ~64px, background `rgba(255,255,255,.95)` so photography below stays half-visible
-- Logo wordmark left, primary nav center (펀딩 · 프리오더 · 비즈니스 · 모집 · 광고 · 와디즈 매니저), search + login right
-- Drop shadow `0 1px #0000000f` — barely a hairline
-
-### Modal / Sheet
-
-- Desktop modal: radius `16px`, shadow `0 16px 16px -1px #0a16461a, 0 0 5px #0a16460f`, max-width `~480px`, padding `32px`
-- Mobile bottom-sheet: radius `16px 16px 0 0` (top corners only), full-width, slide-up
-- Scrim `rgba(0,0,0,.4)`
-
-### Tooltip / Popover
-
-- Background `rgba(17,17,17,.8)`, text `#ffffff`, radius `4px`, padding `8px 12px`, font `12px / 400`
-- Shadow `0 15px 30px #00000026`
-
-## 6. Imagery & Iconography
-
-### Imagery
-
-Wadiz's photography is **the product**. Every campaign supplies its own hero — a kitchen tool against a colored backdrop, a maker holding a prototype in a workshop, a flat-lay of a fashion drop. The system never overrides this with a heavy chrome — the white surface, 8px radii, and quiet shadow exist so the imagery carries the entire emotional load. The home page is essentially a 4-column gallery of *other people's photography*, separated by `#f2f5f8` shelf neutrals.
-
-The single Wadiz-controlled image moment is **the loader** — a "waffle" loader (the literal class is `Loader_waffle-loader-color__sANH-`) that animates the brand mint `#00c4c4` in a stroked-rectangle pulse. This is the only place Wadiz puts its mint *on* photography rather than next to it.
-
-### Iconography
-
-- **Style**: Outlined, 1.5-2px stroke, 24px default canvas; filled variants exist for active/selected states
-- **Hit area**: 40-44px around 24px icons
-- **Color**: Inherits text color by default (`#4e5968` for muted nav, `#191f28` for primary, `#00c4c4` for active)
-- **Common icons**: Heart (즐겨찾기), bell (알림), search (검색), share (공유), filter (필터), close (X), chevron-down (드롭다운), check (확인 — uses mint), exclamation (마감임박 — uses red)
-
-## 7. Motion & Interaction
-
-- **Default easing**: `ease-in-out` for thumbnail fade-in (0.25s); the system avoids `cubic-bezier` show-off curves
-- **Page transitions**: Instant — Wadiz is a content site, not a marketing scroll experience
-- **Hover**: Cards do a barely-perceptible lift (`box-shadow 0 6px 6px → 0 32px 40px -2px`) — the resting elevation thickens, no translate
-- **CTA hover**: Color shift only (no scale, no shadow change) — text `#00c4c4 → #07abae` on outlined, background tint deepens on filled
-- **Loading**: The waffle loader is the global loading affordance — never a spinner, never a skeleton on the home grid (the imagery loads with `opacity 0 → 1`, which IS the skeleton)
-- **Tap feedback** (mobile): Active state is the same as hover — saturated mint becomes `#07abae`, tint surface darkens to `#bef5f5`
-- **Transitions**: `transition-property: opacity` `0.25s ease-in-out` is the most common; nothing animates color transitions
-- **Scroll**: No parallax, no reveal-on-scroll; the page is a quiet vertical river
-
-## 8. Voice & Microcopy
-
-Wadiz writes in **Korean polite-casual** — `~해요` / `~하세요` tone, not formal `~합니다`. The voice is **the assistant standing next to a maker's product, explaining without selling**. Funding amounts are stated as facts, not exclamations. The system avoids superlative marketing language ("최고", "최강", "혁신적") — when something is selling well, the label badge does the work (인기 yellow solid), not the copy.
-
-### Microcopy patterns observed
-
-- Funding status: `오픈예정` · `오픈중` · `얼리버드` · `마감임박` · `종료` · `앵콜` — short, factual
-- Empty state: descriptive without apology — `아직 등록된 펀딩이 없어요` (rather than 죄송합니다)
-- Confirm dialogs: action-oriented buttons — `확인` / `취소`, never `예` / `아니오`
-- Loading: silent (the waffle loader is the only signal — no copy)
-- Errors: specific not vague — `해당 펀딩은 종료되었어요` rather than "오류가 발생했습니다"
-- Time: relative — `3시간 남음` · `5일 남음` (not absolute timestamps in feed)
-- CTA verbs: `펀딩하기` · `알림받기` · `공유하기` · `더보기` — *-하기* gerund pattern, not imperative `해라`
-
-### IP guardrail
-This DESIGN.md does **not** quote verbatim Wadiz taglines or marketing copy. The patterns above describe the *shape* of the voice (gerund -하기 verbs, polite-casual ~해요, factual funding-state labels) and are independently reproducible. Brand assets and product photography referenced in §1 / §6 are observational only — not for redistribution.
-
-## 9. Accessibility & States
-
-- **Focus ring**: 2px solid `#00c4c4` outline with `2px` offset (observed on `Checkbox_icon`)
-- **Contrast**: Heading `#191f28` on white = 17.1:1 (AAA). Body `#333d4b` on white = 12.6:1 (AAA). Mint CTA `#00c4c4` on white = 2.3:1 — *fails AA for text but Wadiz uses `#fff` text on the filled mint, which is 2.7:1*. **This is the system's known weak point**: filled mint buttons have white text at borderline AA. The outlined and tint variants flip the contrast (`#00c4c4` text on `#e6fafa` surface = 2.4:1, also weak). For accessibility-critical surfaces, the outlined mint with a dark text override should be considered.
-- **Disabled**: Text `#b1b8c3` on `#fafbfd` = ~2.7:1 (intentionally low — disabled IS the signal)
-- **Hit area**: Minimum 40x40px (mobile increases to 44x44)
-- **Labels**: All inputs paired with persistent above-field labels, never placeholder-as-label
-- **Error state**: Color (`#ff5959`) + iconography (`!` icon) + helper text — never color alone
-
-## 10. Philosophy & Principles
-
-Wadiz's design philosophy can be read off the production system without needing brand-published manifestos:
-
-1. **The product is the photograph.** White surfaces, 8px radii, hairline shadows — every visual decision in the chrome exists to keep the maker's image at the visual center. The brand mint never colorizes a thumbnail; it only colorizes the chrome that frames the thumbnail.
-
-2. **Funding state is a vocabulary, not a sentiment.** Six named states (`오픈예정` / `오픈중` / `얼리버드` / `마감임박` / `앵콜` / `인기`) × three badge shapes (`solid` / `outlined` / `tint`) × four color hues = 72 valid badges. The system over-builds this surface so that no two campaigns ever feel "the same" in a feed.
-
-3. **Mint is the verb.** The brand color appears almost exclusively on things you can *do* — buttons, links, checkboxes, focus, progress, loader. Mint is never decorative; if it's there, it's interactive.
-
-4. **Korean ink, not black.** The `#191f28 → #4e5968 → #6b7684 → #8b95a1` scale is the Toss-family ink scale, now standard across Korean fintech-adjacent products. Wadiz adopting it positions itself in the *trustworthy Korean product* register rather than the *international marketplace* register that pure black or warm-near-black would suggest.
-
-5. **Tint over outline.** The most distinctive button shape in the system is `tint` — pastel surface + saturated label — and it carries the marketing weight that outline buttons carry on most sites. This is a deliberate softening of the page rhythm: the eye lands on tint surfaces before it lands on outlined ones.
-
-## 11. Personas (Speculative — Not Brand-Confirmed)
-
-> ⚠️ The named personas below are *inferred from the surfaces*, not from a published Wadiz brand document. They are FILL-IN candidates for designers building Wadiz-adjacent products. Replace with audience-specific research before shipping.
-
-- **The supporter (`서포터`)**: 25–45, mostly mobile, browses on subway during commute, supports 2–6 campaigns/year averaging 30–80k₩ each. Wants short campaign titles, clear *얼리버드* eligibility, and *마감임박* urgency cues. Cares about the maker's story for ~30 seconds before deciding.
-- **The maker (`메이커`)**: 28–45, small studio or 1-person brand, ships 1–3 campaigns/year. Spends days inside Wadiz Studio (the back-office) writing campaign copy and uploading photography. Sees Wadiz as their pop-up retail moment, not their permanent store.
-- **The browser (`구경꾼`)**: 20–40, no recent funding, opens Wadiz on a hot-deal notification ~weekly. Will scroll for 5 minutes, save 2 items, fund 1 in 4 sessions.
-
-## 12. Anti-Patterns (System-Level)
-
-- **No verbatim Wadiz taglines** — voice patterns yes, brand copy no
-- **No "최고" / "최강" / "혁신적" marketing superlatives** — funding state vocabulary does the work
-- **No drop-shadows with brand color** — shadows are always blue-black tinted, never mint
-- **No mint on photography** — mint colorizes chrome, not images (the waffle loader is the single exception)
-- **No 12px+ radius on functional buttons** — that's the consumer-app idiom; Wadiz stays at 8px to read as catalog
-- **No skeleton placeholders on the home grid** — the opacity fade-in IS the loading state
-- **No serif** — Pretendard is the entire system
-- **No black `#000`** — `#191f28` is the floor
-
-## 13. Reference Examples (User-Side)
-
-- **Home rewards feed** (`/`) — the 4-column reward-card grid with funding-state badges
-- **Category listing** (`/web/wreward/category/<id>`) — filtered grid with persistent filter chips
-- **Campaign detail** (`/web/campaign/<id>`) — hero photography full-bleed, sticky funding panel right rail
-- **Funding sheet** (mobile bottom-sheet pattern) — `16px 16px 0 0` rounded top, slide-up, `rgba(0,0,0,.4)` scrim
-
-## 14. Notes on Adaptation
-
-When borrowing Wadiz's language for a related product:
-
-- If you're building a **rewards marketplace**, keep the white-page + 8px-radius + tint-button trio — that's the legible Wadiz signature
-- If you're building a **non-funding catalog** (e.g., gallery commerce), drop the funding-state badges entirely and the system reads as a generic-but-clean Korean catalog (you've lost the IP)
-- If you're building a **fintech adjacent surface**, swap mint `#00c4c4` for your brand hue, keep the Toss-family ink scale, keep the tint-button pattern — that's the broadly-applicable layer
-- The brand color is **the only swap-out point**. Everything else is industry-standard Korean product hygiene and is fine to keep.
-
-## 15. Footer — Verification
-
-**Verified:** 2026-05-14
-
-**Tier 1 — Live capture (primary):**
-- `https://www.wadiz.kr/` (home, 58.3KB HTML)
-- `https://www.wadiz.kr/web/wreward/category/289` (category listing, 58.0KB HTML)
-- `https://www.wadiz.kr/web/main` (main route, 58.4KB HTML)
-- `https://static.wadiz.kr/main/main.css` — **936KB production bundle, authoritative**. All `#00c4c4` (111×), `#191f28` (208×), radius (`8px` 112×), font-weight (`700` 358×), and named button-variant classes (`Button_mint`, `Button_blue`, `Button_red`, `Button_yellow`, `LabelBadge_solid`/`outlined`/`tint`) directly observed
-- `https://static.wadiz.kr/static/web/wui.css` — reset + body font-family canonical declaration
-- Proof: `assets/_reference/.live-inspect-proof.json` (5 surfaces, 8 raw_samples, full token-frequency table)
-
-**Tier 1 fallback note:** CDP `:9222` WebSocket connection blocked by Chrome `--remote-allow-origins` guard (handshake 403). Substituted with direct `curl` of the production CSS bundle — which is *higher signal* than runtime sampling because it exposes the entire token system in one file rather than only the styles applied to currently-rendered DOM. Reproducible: any reader can `curl -sL https://static.wadiz.kr/main/main.css | grep -c "#00c4c4"` and recover the same `111` occurrence count.
-
-**Tier 1 brand-owned docs:** Wadiz tech blog (`blog.wadiz.kr`) is known to publish a "와디즈 디자인 시스템 구축하기" article (referenced in Wadiz search results); direct article URL returned 404 on this verification pass — likely renamed or moved. **Followup**: re-discover the canonical URL in next UPDATE pass. The blog post's existence is acknowledged here, but no claims in §1–14 above depend on it — every claim is sourced to the live production CSS.
-
-**Tier 2 — Cross-check directories:**
-- `getdesign.md/wadiz` → **empty** (no entry)
-- `styles.refero.design/?q=wadiz` → **empty** (no entry)
-
-**Tier 3 — Reconcile:**
-- No conflicts found. The CSS bundle is internally consistent and matches the rendered HTML structure across all three surfaces.
-- Known weak spot: filled mint CTA contrast is borderline AA (white text on `#00c4c4` = 2.7:1). Documented in §9, not "fixed" — it is the system as shipped.
-
-**Confidence:** **High** — single 936KB production CSS bundle is the canonical token source; named variant classes (`Button_mint`, `LabelBadge_yellow`) confirm internal design-system vocabulary; three HTML surfaces confirm consistent application. No `(unverified live)` flags on any §1–9 token.
-
-**Known gaps / Followup:**
-1. Re-discover canonical URL for the "와디즈 디자인 시스템 구축하기" blog post (linked in Wadiz internal search, 404 on direct fetch) — would upgrade §10 from "inferred from production system" to "brand-confirmed"
-2. Detail-page (`/campaign/<id>`) and funding-sheet flows not inspected this pass — UPDATE pass recommended to verify §5 sticky funding panel + funding sheet measurements
-3. §11 personas explicitly marked as inferred — replace with audience research before any production use
-
-## 16. Do's and Don'ts
-
-### Do
-- Reserve the brand mint #00c4c4 for interactive moments only — CTA fills, links, checkbox marks, focus outlines, progress fills, and the waffle loader — so mint always reads as a verb
-- Default to 8px radius for buttons, cards, inputs, and modals (the 112-occurrence workhorse), reserving 16px for hero modals and the 16px 16px 0 0 bottom-sheet pattern and 50% for avatars and indicator dots
-- Set body text in Pretendard at 15px / 400 and reserve 700 for funding amounts, percentages, headings, and maker names so the eye bounces between the two near-parity weights
-- Use the Toss-family ink scale (#191f28 heading, #4e5968 muted, #6b7684 subtle, #8b95a1 placeholder) for all text instead of pure black
-- Build funding-state chips from the LabelBadge system using solid / outlined / tint shapes across the mint, yellow #fcc500, blue #4672f9, and red #ff5959 hues (오픈중 = mint solid, 마감임박 = red solid, 인기 = yellow solid)
-- Reach for the tint button (#e6fafa surface, #00c4c4 label, hover to #bef5f5 / #07abae) to carry marketing weight, letting it land before outlined buttons in the page rhythm
-
-### Don't
-- Use pure black #000 anywhere — #191f28 is the ink floor of the system
-- Apply mint #00c4c4 onto campaign photography or thumbnails — mint colorizes the chrome that frames the image, with the waffle loader as the single exception
-- Tint drop-shadows with the brand color — shadows stay blue-black (0 6px 6px -1px #0a16461a), never mint, never theatrical
-- Put 12px or larger radius on functional buttons — that consumer-app idiom breaks Wadiz's 8px retail-catalog read
-- Drop skeleton placeholders on the home grid — the thumbnail opacity 0 to 1 fade-in over 0.25s ease-in-out IS the loading state
-- Reach for marketing superlatives like 최고, 최강, or 혁신적, or introduce a serif or 300-weight thin face — the funding-state vocabulary does the selling and Pretendard does the entire type job

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

@@ -1,137 +0,0 @@
-{
-  "id": "wadiz",
-  "captured_at": "2026-05-14",
-  "method": "CDP browser :9222 attempted (blocked by --remote-allow-origins handshake 403) → fallback: direct curl of production CSS bundles + HTML surfaces",
-  "surfaces": [
-    {
-      "url": "https://www.wadiz.kr/",
-      "type": "home",
-      "html_bytes": 58290,
-      "captured": true
-    },
-    {
-      "url": "https://www.wadiz.kr/web/wreward/category/289",
-      "type": "category-listing",
-      "html_bytes": 58031,
-      "captured": true
-    },
-    {
-      "url": "https://www.wadiz.kr/web/main",
-      "type": "main-route",
-      "html_bytes": 58442,
-      "captured": true
-    },
-    {
-      "url": "https://static.wadiz.kr/main/main.css",
-      "type": "production-css-bundle",
-      "bytes": 936473,
-      "captured": true,
-      "value": "Authoritative — full token system in one file"
-    },
-    {
-      "url": "https://static.wadiz.kr/static/web/wui.css",
-      "type": "reset-css",
-      "bytes": 2385,
-      "captured": true,
-      "value": "Font stack canonical declaration"
-    }
-  ],
-  "raw_samples": [
-    {
-      "selector": ".Button_button__1U5se.Button_contained__2qbQa.Button_mint__2W1nI",
-      "role": "Primary CTA (filled mint)",
-      "border_color": "#00c4c4",
-      "background_color": "#00c4c4",
-      "color": "#fff",
-      "source": "main.css L:~grep-mint contained"
-    },
-    {
-      "selector": ".Button_button__1U5se.Button_mint__2W1nI:hover",
-      "role": "Primary CTA hover (outlined)",
-      "border_color": "#00c4c4",
-      "background_color": "#e6fafa",
-      "color": "#07abae",
-      "source": "main.css L:~grep-mint hover"
-    },
-    {
-      "selector": ".Button_button__1U5se.Button_tint__1II__.Button_mint__2W1nI",
-      "role": "Tint button (secondary mint)",
-      "border_color": "#e6fafa",
-      "background_color": "#e6fafa",
-      "color": "#00c4c4",
-      "source": "main.css L:~grep-mint tint"
-    },
-    {
-      "selector": ".Checkbox_icon__3Pv3C",
-      "role": "Checkbox checked icon",
-      "background_color": "#00c4c4",
-      "border": "1px solid #07abae",
-      "outline": "2px solid #00c4c4",
-      "source": "main.css L:~Checkbox"
-    },
-    {
-      "selector": ".LabelBadge_yellow__3S6Dx.LabelBadge_solid__25RIc",
-      "role": "Trending / hot-deal yellow label",
-      "background_color": "#fcc500",
-      "border": "1px solid #fcc500",
-      "color": "#fff",
-      "source": "main.css L:~LabelBadge"
-    },
-    {
-      "selector": ".LabelBadge_yellow__3S6Dx.LabelBadge_tint__1FLYB",
-      "role": "Trending tint badge",
-      "background_color": "#fffae1",
-      "color": "#fcc500",
-      "source": "main.css L:~LabelBadge tint"
-    },
-    {
-      "selector": "body (wui.css reset)",
-      "role": "Document body",
-      "font_family": "pretendard,-apple-system,blinkmacsystemfont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif",
-      "font_size": "15px",
-      "source": "wui.css L:~body"
-    },
-    {
-      "selector": ".CardThumbnail_thumbnail__3bDBJ",
-      "role": "Reward card thumbnail",
-      "border_radius": "8px (inherited via CardSpinner_container)",
-      "transition": "opacity .25s ease-in-out",
-      "source": "main.css L:~CardThumbnail"
-    }
-  ],
-  "token_frequencies": {
-    "border_radius_8px": 112,
-    "border_radius_4px": 56,
-    "border_radius_3px": 26,
-    "border_radius_16px": 24,
-    "border_radius_50pct": 30,
-    "font_weight_400": 393,
-    "font_weight_700": 358,
-    "font_weight_500": 109,
-    "font_size_14px": 261,
-    "font_size_12px": 184,
-    "font_size_16px": 177,
-    "color_ffffff": 250,
-    "color_191f28": 208,
-    "color_4e5968": 154,
-    "color_f2f5f8": 130,
-    "color_6b7684": 123,
-    "color_00c4c4_brand_mint": 111,
-    "color_07abae_brand_mint_hover": 40,
-    "color_e6fafa_brand_mint_tint": 11,
-    "color_bef5f5_brand_mint_accent": 7,
-    "color_ff5959_alert_red": 62,
-    "color_4672f9_info_blue": 14,
-    "color_fcc500_label_yellow": 9,
-    "color_00af84_success_green": 4
-  },
-  "named_button_variants_observed": ["mint", "blue", "red", "yellow", "green", "contained", "tint", "outlined", "active", "loading", "block", "circular", "badge"],
-  "css_variables_root": {
-    "--white-68": "rgba(255,255,255,.68)",
-    "--black-84": "rgba(0,0,0,.84)",
-    "--black-54": "rgba(0,0,0,.54)",
-    "--pale-grey-30": "rgba(240,242,245,.3)",
-    "--dark": "#1d2129"
-  },
-  "fallback_notes": "CDP WebSocket connection blocked by Chrome --remote-allow-origins guard (handshake 403). Substituted with direct curl of production CSS bundle (main.css = 936KB authoritative source) + 3 HTML surface snapshots. Verifiable: any reader can re-run `curl -sL https://static.wadiz.kr/main/main.css | grep '#00c4c4' | wc -l` and reproduce the 111 occurrences."
-}

package/.opencode/oh-my-design/web/references/wadiz/assets/_reference/fonts.json

@@ -1,17 +0,0 @@
-{
-  "id": "wadiz",
-  "captured_at": "2026-05-14",
-  "source": "https://static.wadiz.kr/static/web/wui.css body declaration + index.html <link> tags",
-  "primary": {
-    "family": "Pretendard",
-    "license": "OFL 1.1 (open-source variable)",
-    "cdn_loaded": "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css",
-    "stack": "pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif",
-    "weights_in_use": [400, 500, 700],
-    "default_weight": 400,
-    "base_body_size_px": 15
-  },
-  "display_accent": null,
-  "letter_spacing_observed": "-.03em (rare, large display headings only)",
-  "rationale": "Wadiz runs Pretendard exclusively — no display secondary face. The mark of a Korean fintech-adjacent product post-2022: Toss/Banksalad/Kakao-Bank all consolidated on Pretendard for Korean+Latin coverage with weight axis. 400 (393x) carries body, 700 (358x) carries pricing/funding amounts and headings, 500 (109x) is for medium-emphasis labels."
-}

package/.opencode/oh-my-design/web/references/wadiz/assets/_reference/structure.json

@@ -1,35 +0,0 @@
-{
-  "id": "wadiz",
-  "captured_at": "2026-05-14",
-  "primary_surfaces": [
-    { "url": "https://www.wadiz.kr/", "label": "Home (rewards funding feed)" },
-    { "url": "https://www.wadiz.kr/web/wreward/category/289", "label": "Category listing" },
-    { "url": "https://www.wadiz.kr/web/main", "label": "Main route" }
-  ],
-  "naming_pattern": "CSS Modules with BEM-ish `<Component>_<part>__<hash>`. Detected components: Button, LabelBadge, Card, CardThumbnail, CardSpinner, Checkbox, Loader, CountryListSection, ReversalLabelBadge, MainCarousel, RewardCard, Maker. Variant suffix is the role (`contained`, `tint`, `outlined`, `mint`, `blue`, `red`, `yellow`, `green`, `block`, `badge`, `circular`).",
-  "button_system": {
-    "shapes": ["contained (filled)", "outlined (default)", "tint (soft pastel fill)", "block (full-width)", "circular", "badge"],
-    "color_variants": ["mint (brand)", "blue (info / secondary CTA)", "red (alert / withdraw / refund)", "yellow (promo / highlight)", "green (success / paid)"],
-    "states": ["default", "hover", "active", "disabled", "loading"]
-  },
-  "label_badge_system": {
-    "color_variants": ["mint", "yellow", "blue", "red"],
-    "shapes": ["solid (filled)", "outlined (border-only)", "tint (pastel surface + saturated text)"],
-    "use": "Funding-state tags: '오픈예정', '오픈중', '얼리버드', '마감임박', '앵콜', '인기'"
-  },
-  "card_system": {
-    "default_radius": "8px (CardSpinner_container, CardThumbnail)",
-    "thumbnail_aspect": "fixed via background-size:cover, opacity fade-in 0.25s",
-    "error_thumbnail_bg": "#ffb9b9 (red tint, visual signal that image failed)"
-  },
-  "spacing_scale_hints_px": [4, 8, 12, 16, 20, 24, 32, 40, 48, 64],
-  "elevation_layers": [
-    "L0 page background — flat #ffffff",
-    "L1 surface alt #fafbfd — barely-perceptible alternation",
-    "L2 surface neutral #f2f5f8 — content shelf",
-    "L3 card resting — 0 6px 6px -1px #0a16461a + 0 0 5px #0a16460f",
-    "L4 card lift / hover — 0 32px 40px -2px #0a16461f + 0 0 5px #0a16460f",
-    "L5 modal — 0 16px 16px -1px #0a16461a + 0 0 5px #0a16460f"
-  ],
-  "screens_in_sample": ["home (rewards feed)", "category listing", "main route (mobile/redirect)"]
-}