zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/toss/README.md

@@ -1,19 +0,0 @@
-# Toss (토스) Inspired Design System
-
-DESIGN.md crafted from Toss's publicly documented [TDS (Toss Design System)](https://tossmini-docs.toss.im/tds-mobile/) and [brand guidelines](https://brand.toss.im/). This references the TDS color tokens, typography system, and component specifications from official documentation and tech blog posts. Colors, fonts, and spacing are based on publicly available specifications.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-
-Use DESIGN.md as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Toss design language.
-
-## Sources
-
-- [TDS Mobile Docs](https://tossmini-docs.toss.im/tds-mobile/) — Component and token documentation
-- [Toss Brand Resource Center](https://brand.toss.im/) — Brand colors and identity
-- [Toss Tech Blog (Design)](https://toss.tech/design) — Design system philosophy and updates
-- [Tossface](https://github.com/toss/tossface) — Open-source emoji font
-- [Toss GitHub](https://github.com/toss) — Open-source libraries

package/.opencode/oh-my-design/design-md/toss-securities/DESIGN.md

@@ -1,247 +0,0 @@
----
-id: toss-securities
-name: Toss Securities
-display_name_kr: Toss Securities (토스증권)
-country: KR
-category: fintech
-homepage: "https://tossinvest.com"
-primary_color: "#3182f6"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=tossinvest.com&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#3182f6"
-    primary-hover: "#2562b9"
-    primary-pressed: "#29518e"
-    brand-text: "#4391ff"
-    positive: "#dc2e47"
-    positive-hover: "#ad2136"
-    positive-pressed: "#8d222f"
-    positive-text: "#f5445a"
-    negative: "#3182f6"
-    negative-text: "#4391ff"
-    canvas: "#101013"
-    overlay: "#202025"
-    on-primary: "#ffffff"
-  typography:
-    family: { sans: "Toss Product Sans", mono: "Toss Product Sans" }
-    section-h2:  { size: 24, weight: 700, use: "Section headers" }
-    sub-h3:      { size: 19, weight: 700, use: "Sub-section headers" }
-    nav:         { size: 15, weight: 500, use: "Global nav links" }
-    body:        { size: 16, weight: 400, use: "Body and button text" }
-    input:       { size: 15, weight: 400, use: "Form field text" }
-    memo-chip:   { size: 12, weight: 600, use: "Contextual pill action" }
-    on-cta:      { size: 16, weight: 400, use: "White on tinted-fill button" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
-  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
-  shadow:
-    none: "none"
-  components_harvested: true
-  components:
-    button-brand: { type: button, bg: "#3182f6", fg: "#ffffff", use: "Primary CTA brand fill" }
-    badge-positive: { type: badge, fg: "#f5445a", font: "12/600", use: "Up-tick / 매수 indicator (KR red-up)" }
-    badge-negative: { type: badge, fg: "#4391ff", font: "12/600", use: "Down-tick / 매도 indicator (KR blue-down)" }
-    input-field: { type: input, font: "15/400", use: "Form field on dark surface" }
----
-
-# Design System Inspiration of Toss Securities (토스증권)
-
-## 1. Visual Theme & Atmosphere
-
-Toss Securities is the brokerage arm inside Korea's fintech super-app, and it inherits its parent's typographic and chromatic DNA while pulling the entire surface into a deep, calm dark mode by default. The page opens not on white but on a near-black canvas — page background `rgb(23, 23, 28)` over a deeper surface token `#101013` — where money information feels less like banking-product chrome and more like an instrument panel: legible, quiet, technically dense, and resolutely free of decoration. Where retail-banking Toss optimises for "anyone can use this," Toss Securities optimises for "someone watching a chart wants this exact answer right now," and the visual system reflects that pivot without changing brand vocabulary.
-
-The custom **Toss Product Sans** typeface carries over wholesale from `toss.im` — same Korean-Latin optical balancing, same tabular-numeral support that makes price ticks, volume figures, and percent changes line up cleanly across rows. Body sits at 16px / 400, section headings at 24px / 700, sub-section headings at 18.72px / 700, and global navigation uses an intermediate 15px / 500 weight that quietly separates wayfinding from reading. There is no display-only accent typeface; restraint is the rule.
-
-What makes Toss Securities visually unique inside the Toss family is the **semantic colour inversion**: the parent product treats blue as "go / primary action," but a securities surface must carry the Korean-finance locale convention where **red means a price went up (positive)** and **blue means a price went down (negative)**. The live token tree honours this — `--tw-semantic-color-fill-positive-default: #dc2e47` (red), `--tw-semantic-color-fill-negative-default: #3182f6` (blue) — and the same Toss Blue `#3182f6` is reused as the brand CTA fill `--tw-semantic-color-fill-brand-default`. Context resolves the ambiguity: a blue rectangle next to a price tick means "this stock fell"; a blue rectangle as a button means "execute." Designers porting this language outside KR/JP/TW **must invert** the positive/negative hue assignments.
-
-**Key Characteristics:**
-- Dark-mode-first surface (`#101013` deepest, `rgb(23,23,28)` body, `#202025` overlay)
-- Toss Product Sans inherited from parent brand — tabular numerals for price data
-- KR-finance locale: `positive` = red `#dc2e47`, `negative` = blue `#3182f6` (semantic tokens, not just colour values)
-- Toss Blue `#3182f6` carries dual duty as brand CTA AND down-tick — context-disambiguated
-- Three-namespace token system on `:root`: `--tw-semantic-*` (role) / `--tw-adaptive-*` (theme-aware primitive) / `--wts-adaptive-*` (Web-Toss-Securities scale)
-- Zero box-shadow on production chrome — depth via layered surface alpha + translucent 1px borders (`rgba(214,224,239,0.09)`)
-- Two-tier radius family: `8px` for cards/inputs/buttons, `32px` for contextual chips/pills
-- 416 CSS custom properties live on `:root` — a real internal DS, simply not published
-
-## 2. Color Palette & Roles
-
-### Brand (CTA, links, active)
-- **Toss Blue** (`#3182f6`): `--tw-semantic-color-fill-brand-default`. Primary CTA fill, brand icon, brand link.
-- **Toss Blue Hover** (`#2562b9`): `--tw-semantic-color-fill-brand-defaultHover`.
-- **Toss Blue Pressed** (`#29518e`): `--tw-semantic-color-fill-brand-defaultPressed`.
-- **Brand Text** (`#4391ff`): `--tw-semantic-color-txt-brand`. Brand-coloured inline text.
-- **Brand Text Hover** (`#74b1f8`): `--tw-semantic-color-txt-brandHover`.
-
-### Semantic — KR finance convention (CRITICAL)
-- **Positive / Up / 매수** (`#dc2e47`): `--tw-semantic-color-fill-positive-default`. RED. Used for rising prices, gain indicators, buy confirms.
-- **Positive Hover** (`#ad2136`): `--tw-semantic-color-fill-positive-defaultHover`.
-- **Positive Pressed** (`#8d222f`): `--tw-semantic-color-fill-positive-defaultPressed`.
-- **Positive Text** (`#f5445a`): `--tw-semantic-color-txt-positive`.
-- **Positive Text Hover** (`#ff7187`): `--tw-semantic-color-txt-positiveHover`.
-- **Positive Weak** (`rgba(219,81,87,0.2)`): `--tw-semantic-color-fill-positive-weak`. Tinted background for up-tick rows.
-- **Negative / Down / 매도** (`#3182f6`): `--tw-semantic-color-fill-negative-default`. BLUE. Same hex as Brand — context disambiguates.
-- **Negative Text** (`#4391ff`): `--tw-semantic-color-txt-negative`.
-- **Negative Weak** (`rgba(67,122,223,0.2)`): `--tw-semantic-color-fill-negative-weak`.
-
-> **Locale rule**: This is non-negotiable for KR/JP/TW finance UI. Porting to US/EU markets requires swapping all `positive-*` tokens to green and all `negative-*` tokens to red. Toss Securities does not ship that variant publicly; it must be authored downstream.
-
-### Surface (dark default)
-- **Surface 100** (`#101013`): `--tw-semantic-color-bg-surface100`. Deepest surface — page floor.
-- **Body composite** (`rgb(23, 23, 28)`): rendered body background as observed via getComputedStyle.
-- **Overlay 300** (`#202025`): `--tw-semantic-color-bg-overlay300`. Modal/sheet overlay base.
-- **Panel border outer** (`rgba(214,224,239,0.09)`): `--tw-semantic-color-component-panel-borderOuter`. Translucent dividers — depth without shadow.
-
-### Text (dark surface)
-- **Primary** (`rgba(242,246,255,0.9)`): `--tw-semantic-color-txt-neutral-primary`. Default reading text.
-- **Primary Hover** (`rgba(255,255,255,0.96)`).
-- **Primary Pressed** (`#FFFFFF`).
-- **Secondary observed** (`rgba(253,253,254,0.89)`): inline secondary text — slightly warmer alpha.
-- **Tertiary observed** (`rgba(242,242,255,0.47)`): disabled / muted captions.
-- **Body default rendered** (`rgb(195, 195, 198)`): composited body text — neutral cool grey.
-- **Static white** (`#FFFFFF`): `--tw-semantic-color-txt-staticWhite`. On-CTA text.
-
-### Icon
-- **Icon brand** (`#3182f6`).
-- **Icon neutral primary** (`rgba(217,223,235,0.8)`).
-- **Icon positive** (`#f5445a`) — up-tick chevron.
-- **Icon negative** (`#4391ff`) — down-tick chevron.
-
-## 3. Typography Rules
-
-### Font Family
-
-**Primary**: `"Toss Product Sans", Tossface, -apple-system, system-ui, "Bazier Square", "Noto Sans KR", "Segoe UI", "Apple SD Gothic Neo", sans-serif`
-
-Tossface is Toss's open-source emoji font (3500+ glyphs, parent-brand asset). Toss Product Sans is loaded via parent-domain CDN — Toss Securities does not appear to serve its own webfont copy on this surface.
-
-### Hierarchy (observed live)
-
-| Role | Size | Weight | Notes |
-|------|------|--------|-------|
-| Section H2 | 24px | 700 | "지수 목록" / "실시간 차트" |
-| Sub-section H3 | 18.72px | 700 | "필터" / "종목 정보" |
-| Nav link | 15px | 500 | Global nav |
-| Body / button text | 16px | 400 | Body default |
-| Input text | 15px | 400 | Form fields |
-| Memo chip | 12px | 600 | Contextual pill action |
-| On-CTA text | 16px | 400 | White on tinted-fill button |
-
-### Numeric & data treatment
-Tabular numerals inherit from Toss Product Sans variable-width / tabular-mode toggle. Price ticks, order-book columns, and percent changes use the tabular mode so digits align by column without `font-variant-numeric` patching at each surface.
-
-## 4. Iconography & Imagery
-
-- Icon weight: medium-stroke, single-tone (`--tw-semantic-color-icon-*`).
-- Brand icon set inherits from parent Toss icon system.
-- No decorative illustration on data surfaces — the price chart IS the imagery.
-- Marketing surfaces (homepage feed) use product screenshots of the order panel itself, recursively.
-
-## 5. Layout & Spacing
-
-- **Two-pane stock detail**: chart + price panel (left) / order panel (right rail).
-- **Card radius**: `8px` (cards, inputs, default buttons).
-- **Chip radius**: `32px` (pill controls — memo, filter chips).
-- **Icon button radius**: `6–8px` with compact padding (`3px 6px` to `6px 8px`).
-- **No box-shadow** on any production chrome element sampled.
-- Surface depth = base `#101013` → body `rgb(23,23,28)` composite → overlay `#202025` for sheets.
-- Translucent `rgba(214,224,239,0.09)` 1px borders for panel separation.
-
-## 6. Components
-
-### Buttons
-- **Ghost (default observed)**: bg `rgba(217,217,255,0.11)` / text `#fff` or `rgba(253,253,254,0.89)` / radius `8px` / 16px text / 400 weight.
-- **Brand CTA (inferred from token tree, not sampled directly on this surface)**: bg `#3182f6` / text `#fff` / radius `8px`.
-- **Memo chip**: bg `rgba(217,217,255,0.11)` / radius `32px` / 12px / 600 / padding `0 8px`.
-- **Icon button**: radius `6–8px` / padding `3×6` to `6×8`.
-
-### Order panel (stock detail)
-- Panels: 차트 · 호가 · 시세 · 일반주문 · 개인·외국인·기관 · 체결가.
-- Order types: 일반주문 / 정규장 주문 예약.
-
-### Navigation
-- Global: 홈 · 피드 · 주식 골라보기 · 내 계좌 · 내 투자.
-- Secondary: 관심 · 최근 본 · 실시간.
-- Auth: 로그인.
-
-### Price tick (semantic)
-- Up → text `#f5445a` (icon `#f5445a`), weak tint `rgba(219,81,87,0.2)`.
-- Down → text `#4391ff` (icon `#4391ff`), weak tint `rgba(67,122,223,0.2)`.
-
-## 7. Motion & Interaction
-
-State tokens captured for all interactive roles:
-
-- **Brand**: default `#3182f6` → hover `#2562b9` → pressed `#29518e`.
-- **Positive**: default `#dc2e47` → hover `#ad2136` → pressed `#8d222f`.
-- **Negative**: default `#3182f6` → hover `#2562b9` → pressed `#29518e`.
-- **Ghost-fill family**: `*-ghostHover` / `*-ghostPressed` / `*-weakHover` / `*-weakPressed` exist for every role — fine-grained state language.
-
-Motion timing tokens not captured this pass (no live transition introspection performed) — flagged for UPDATE.
-
-## 8. Accessibility & Density
-
-- Dark surface + `rgba(242,246,255,0.9)` primary text ≈ AA-passing contrast on `#101013` (~14:1).
-- Body composited grey `rgb(195,195,198)` on `rgb(23,23,28)` ≈ 11:1 — comfortable AA.
-- **Locale risk**: KR red/blue convention is opposite to most US/EU expectations. Cross-locale users may misread direction.
-- High data density tolerates 16px body baseline because tabular numerals stabilise column scanning.
-
-## 9. Voice (illustrative, fresh derivations — not verbatim Toss copy)
-
-- "Watch the tick. Move when it matters."
-- "차트는 정직해요. 결정은 빠르게."
-- "Real prices. Real depth. No theatre."
-
-§10 voice samples above are tone-shape paraphrases — derived from observing the calm/declarative product voice on the live surface, not lifted from Toss Securities marketing copy. Brand owns its own taglines; we do not reproduce them.
-
-## 10. Personas (FILL IN — surface-inferred placeholders)
-
-- **A. Active retail trader, KR 20s–30s**: opens app multiple times intraday, watches a small watchlist, executes via mobile. Wants speed and signal. `[FILL IN with sourced research]`
-- **B. Long-horizon individual investor, KR 30s–50s**: monthly rebalance, ETF + blue-chip focus, uses 내 계좌 dashboard primarily. `[FILL IN]`
-- **C. First-time investor onboarding from Toss core**: came in via Toss super-app, expects continuity of brand and trust. `[FILL IN]`
-
-## 11. Anti-patterns (don't steal)
-
-- **Do not** copy positive=red / negative=blue into non-KR/JP/TW locales without inversion.
-- **Do not** assume Toss Blue means "brand CTA" everywhere — on Securities it also means "down-tick."
-- **Do not** introduce box-shadow as elevation language; this system has chosen translucent borders + layered surface alphas.
-- **Do not** introduce a third radius tier; the system is deliberately two-tier (`8px` / `32px`).
-- **Do not** introduce a display-only typeface; restraint is the point.
-
-## 12. Reference URLs
-
-- Production app: https://tossinvest.com (homepage)
-- Production stock surface: https://www.tossinvest.com/stocks/A005930/order (Samsung Electronics order panel)
-- Parent brand DS context: https://toss.im (typography + base colour origin)
-- Tossface (open-source emoji): https://github.com/toss/tossface
-
-## 13. Verification footer
-
-- **Tier 1 official DS**: ✗ NEGATIVE — no `design.tossinvest.com`, no `tossinvest.com/design`, no `tossinvest.com/brand` portal; GitHub org `@toss` (45+ repos, verified for `toss.im`) has zero Toss-Securities-specific design-system / Storybook / token repository; no `toss-im` or `toss-securities` GitHub org exists. Production code exposes 416 `:root` CSS custom properties across three namespaces (`--tw-semantic-*`, `--tw-adaptive-*`, `--wts-adaptive-*`) — the closest public artifact, captured directly.
-- **Tier 2 indexes**: not consulted (consistent with KR fintech systemic gap logged in `2026-05-13-kr10.md` and `2026-05-14-kr10.md` audits).
-- **Tier 3 live capture**: ✓ CDP `:9222` getComputedStyle on **two surfaces** — homepage (601 DOM samples, 416 `:root` vars) + stock order surface (`A005930/order`). 12 raw_samples retained in `.live-inspect-proof.json` (≥5 floor).
-- **IP guardrails**: brand assets reference-only; no verbatim Toss Securities taglines/copy reproduced; voice samples in §9 are fresh derivations; logo not redistributed; persona block in §10 explicitly marked `[FILL IN]` (no fabricated quotes).
-- **Flagged for UPDATE**: (a) motion timing tokens not captured this pass; (b) light-mode variant — `--tw-adaptive-*` namespace implies a theme switch but only dark default observed live; (c) personas pending public-research sourcing; (d) primary CTA visual not directly sampled (token tree confirms `#3182f6` fill but live surface served ghost-button variants on inspected paths).
-
-## 14. Do's and Don'ts
-
-### Do
-- Build dark-mode-first, layering surfaces from deepest #101013 to body rgb(23,23,28) to overlay #202025 for sheets
-- Encode the KR-finance locale by using red #dc2e47 for positive/up ticks and blue #3182f6 for negative/down ticks via the positive/negative semantic tokens
-- Create depth with translucent rgba(214,224,239,0.09) 1px borders and layered surface alpha instead of elevation
-- Keep the two-tier radius scale, using 8px for cards, inputs, and buttons and 32px for pill controls like memo and filter chips
-- Set type from the observed hierarchy: 24px/700 section H2, 18.72px/700 sub-section H3, 15px/500 nav links, and 16px/400 body
-- Use Toss Product Sans tabular numerals so price ticks, order-book columns, and percent changes align by column
-
-### Don't
-- Copy positive=red / negative=blue into non-KR/JP/TW locales without inverting positive-* to green and negative-* to red
-- Assume Toss Blue #3182f6 always means brand CTA, since on this surface it is also the down-tick fill and only context disambiguates
-- Introduce box-shadow as elevation language; this system deliberately uses translucent borders plus layered surface alphas
-- Add a third radius tier beyond the deliberate two-tier 8px / 32px scale
-- Introduce a display-only accent typeface; restraint is the rule and there is no decorative accent face
-- Decorate data surfaces with illustration; the price chart itself is the imagery

package/.opencode/oh-my-design/design-md/toss-securities/assets/_reference/.live-inspect-proof.json

@@ -1,126 +0,0 @@
-{
-  "$schema": "omd-live-inspect-proof-0.1",
-  "method": "CDP :9222 / Page.navigate + Runtime.evaluate(getComputedStyle)",
-  "browser": "Chrome/148.0.7778.97",
-  "captured_at": "2026-05-15",
-  "tab_ws": "ws://localhost:9222/devtools/page/25ED2AE747AA5E59EE5A90C8A10ECCB4",
-  "surfaces": [
-    "https://www.tossinvest.com/?focusedProductCode=A005930",
-    "https://www.tossinvest.com/stocks/A005930/order"
-  ],
-  "total_dom_samples": 601,
-  "css_vars_captured": 416,
-  "raw_samples": [
-    {
-      "label": "body",
-      "selector": "body",
-      "color": "rgb(195, 195, 198)",
-      "background": "rgb(23, 23, 28)",
-      "fontFamily": "\"Toss Product Sans\", Tossface, -apple-system, system-ui, \"Bazier Square\", \"Noto Sans KR\", \"Segoe UI\", \"Apple SD Gothic Neo\"",
-      "fontSize": "16px",
-      "fontWeight": "400",
-      "evidence": "page-level dark surface + Toss Product Sans confirmed"
-    },
-    {
-      "label": "h2",
-      "selector": "h2",
-      "text": "지수 목록",
-      "color": "rgb(195, 195, 198)",
-      "fontSize": "24px",
-      "fontWeight": "700",
-      "evidence": "section heading scale"
-    },
-    {
-      "label": "h3",
-      "selector": "h3",
-      "text": "필터",
-      "color": "rgb(195, 195, 198)",
-      "fontSize": "18.72px",
-      "fontWeight": "700",
-      "evidence": "sub-section heading scale (1.17rem)"
-    },
-    {
-      "label": "primary-button-chrome",
-      "selector": "button",
-      "color": "rgb(255, 255, 255)",
-      "background": "rgba(217, 217, 255, 0.11)",
-      "borderRadius": "8px",
-      "fontSize": "16px",
-      "evidence": "ghost button on dark — fill via translucent off-white tint, not solid colour"
-    },
-    {
-      "label": "memo-chip",
-      "selector": "button (idx=1, stock detail)",
-      "text": "메모 작성",
-      "color": "rgba(253, 253, 254, 0.89)",
-      "background": "rgba(217, 217, 255, 0.11)",
-      "borderRadius": "32px",
-      "fontSize": "12px",
-      "fontWeight": "600",
-      "padding": "0px 8px",
-      "evidence": "pill-style chip — second radius tier (32px) for contextual actions"
-    },
-    {
-      "label": "nav-link",
-      "selector": "nav a",
-      "color": "rgba(253, 253, 254, 0.89)",
-      "fontSize": "15px",
-      "fontWeight": "500",
-      "evidence": "global nav weight 500 (between body 400 and heading 700)"
-    },
-    {
-      "label": "input",
-      "selector": "input",
-      "color": "rgb(255, 255, 255)",
-      "fontSize": "15px",
-      "fontWeight": "400",
-      "evidence": "text input fully white on dark — no placeholder seen in this sample"
-    },
-    {
-      "label": "css-token-positive-red-fill",
-      "selector": ":root",
-      "css_var": "--tw-semantic-color-fill-positive-default",
-      "value": "#dc2e47",
-      "evidence": "KR-finance convention: 'positive' (up / 매수) renders red — semantic token captured directly from :root"
-    },
-    {
-      "label": "css-token-negative-blue-fill",
-      "selector": ":root",
-      "css_var": "--tw-semantic-color-fill-negative-default",
-      "value": "#3182f6",
-      "evidence": "KR-finance convention: 'negative' (down / 매도) renders blue — same hex as Toss Blue brand CTA, context disambiguates"
-    },
-    {
-      "label": "css-token-brand-blue",
-      "selector": ":root",
-      "css_var": "--tw-semantic-color-fill-brand-default",
-      "value": "#3182f6",
-      "evidence": "Brand fill = Toss Blue — inherited from parent toss.im design language"
-    },
-    {
-      "label": "css-token-page-surface",
-      "selector": ":root",
-      "css_var": "--tw-semantic-color-bg-surface100",
-      "value": "#101013",
-      "evidence": "dark-mode page surface — deeper than rendered body (which observes 23,23,28 via composite)"
-    },
-    {
-      "label": "css-token-panel-border-outer",
-      "selector": ":root",
-      "css_var": "--tw-semantic-color-component-panel-borderOuter",
-      "value": "rgba(214,224,239,0.09)",
-      "evidence": "panel separation via translucent border, not box-shadow — confirms zero-elevation chrome thesis"
-    }
-  ],
-  "ip_guardrails": {
-    "brand_assets_reference_only": true,
-    "verbatim_taglines_excluded": true,
-    "logo_not_redistributed": true,
-    "voice_samples_fresh_derivations": true
-  },
-  "tier1_ds_status": "negative — no public design.tossinvest.com / brand portal / Storybook / Figma library; production code exposes 416 :root tokens (--tw-semantic-* + --tw-adaptive-* + --wts-adaptive-*) which is the closest public artifact",
-  "tier2_indexes": {
-    "getdesign.md": "not consulted (KR fintech systemic gap — consistent with KR-10 batch)",
-    "styles.refero.design": "not consulted (same)"
-  }
-}