zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/catchtable/DESIGN.md

@@ -1,341 +0,0 @@
----
-id: catchtable
-name: CatchTable
-country: KR
-category: consumer-tech
-homepage: "https://www.catchtable.co.kr"
-primary_color: "#ff3d00"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=catchtable.co.kr&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  note: "Single-CTA discipline — brand orange #FF3D00 is the only primary fill, deployed sparingly; depth from borders + hairline alpha, not shadows"
-  colors:
-    primary: "#ff3d00"
-    primary-hover: "#fa8d6b"
-    brand: "#ff3d00"
-    canvas: "#ffffff"
-    foreground: "#000000"
-    title: "#222222"
-    body-strong: "#424242"
-    muted: "#666666"
-    tertiary: "#5f5f5f"
-    placeholder: "#9e9e9e"
-    disabled: "#b5b5b5"
-    icon-default: "#8f8f8f"
-    icon-subtle: "#aaaaaa"
-    on-primary: "#ffffff"
-    surface-subdued: "#f9f9f9"
-    surface-muted: "#f5f5f5"
-    surface-cool: "#f2f5f7"
-    surface-cool-alt: "#f0f4fa"
-    border-default: "#e4e4e4"
-    border-cool: "#dce3e8"
-    info: "#186ade"
-    success: "#43c478"
-    success-strong: "#077d55"
-    error: "#d91f11"
-    warning: "#f5c518"
-    premium: "#8f49de"
-  typography:
-    family: { sans: "Pretendard", mono: "" }
-    section-title:      { size: 20, weight: 700, lineHeight: 1.5, use: "음식종류별 BEST, 캐치 매거진, search hero label" }
-    big-section:        { size: 18, weight: 700, lineHeight: 1.5, use: "Larger card titles" }
-    card-title:         { size: 16, weight: 600, lineHeight: 1.5, use: "Restaurant card titles in list / detail" }
-    body-default:       { size: 14, weight: 400, lineHeight: 1.5, use: "Dominant — nav labels, list items, body" }
-    tab-label:          { size: 14, weight: 400, lineHeight: 1.5, use: "Bottom-tab labels" }
-    chip-label:         { size: 14, weight: 500, lineHeight: 1.5, use: "Geo chips, filter chips" }
-    search-input:       { size: 13, weight: 500, lineHeight: 1.5, use: "Search placeholder #9e9e9e" }
-    neighbourhood-chip: { size: 13, weight: 500, lineHeight: 1.5, use: "청담, 압구정·로데오 style" }
-    caption:            { size: 12, weight: 400, lineHeight: 1.5, use: "Timestamps, secondary meta" }
-    footer-body:        { size: 11, weight: 400, lineHeight: 1.5, use: "Regulatory disclosure text" }
-    policy-link:        { size: 11, weight: 500, lineHeight: 1.5, use: "Footer 서비스 이용약관 row" }
-    micro-meta:         { size: 10, weight: 500, lineHeight: 1.5, use: "Slide counter 2 / 25, compact tab" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 45 }
-  rounded: { sm: 4, md: 8, lg: 12, full: 999 }
-  shadow:
-    xs: "rgba(0,0,0,.12) 0 1px 2px, rgba(0,0,0,.08) 0 0 1px, rgba(0,0,0,.08) 0 0 1px"
-    sm: "rgba(0,0,0,.12) 0 2px 8px, rgba(0,0,0,.08) 0 1px 4px, rgba(0,0,0,.08) 0 0 1px"
-    drop: "rgba(0,0,0,.12) 0 2px 12px"
-    md: "rgba(0,0,0,.12) 0 6px 12px, rgba(0,0,0,.08) 0 4px 8px, rgba(0,0,0,.08) 0 0 4px"
-    lg: "rgba(0,0,0,.12) 0 16px 20px, rgba(0,0,0,.08) 0 8px 16px, rgba(0,0,0,.08) 0 0 8px"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#ff3d00", fg: "#ffffff", radius: "12px", height: "44px", font: "14px / 500", hover: "press #fc9086", use: "Single primary CTA pill — single-CTA discipline, only variant" }
-    search-input: { type: input, bg: "#f5f5f5", fg: "#000000", radius: "0px", font: "13px / 500", use: "Search field, placeholder #9e9e9e, inline search icon left" }
-    chip-row: { type: badge, bg: "transparent", fg: "#5f5f5f", font: "14px / 500", use: "Geo/filter chips, no fill or border at rest — separation by spacing" }
-    best-of-pill: { type: card, bg: "#ffffff", radius: "4px", font: "14px / 400", use: "Image-led tile + ink label below, no card chrome (호텔 뷔페, 스시 오마카세)" }
-    bottom-tab-bar: { type: tab, fg: "#424242", font: "14px / 400", active: "ink darkens to #000000", use: "5 tabs (홈/저장/내 주변/마이다이닝/MY), icon-over-label" }
-    footer-disclosure: { type: card, bg: "#f9f9f9", fg: "#8f8f8f", font: "11px / 400", use: "Footer block, 11px/500 policy links separated by | pipe" }
----
-
-# Design System Inspiration of CatchTable (캐치테이블)
-
-## 1. Visual Theme & Atmosphere
-
-CatchTable is Korea's premier restaurant-reservation platform — a service that lets diners book hotel buffets, sushi omakase, and hanwoo tasting menus with the same calm as flipping through a magazine. The atmosphere on the home surface is **editorial restraint**: a white canvas (`#FFFFFF`), deep black ink (`#000000` for body, `#222222` for titles), zero ambient shadow, and a hard-square chrome that lets food photography do the speaking. Where a delivery app would flood the screen with red CTAs and stamp-shaped discount stickers, CatchTable shows you photographs and titles — the brand orange `#FF3D00` appears exactly where you place your finger, and almost nowhere else.
-
-This isn't accidental minimalism — it's a vanilla-extract token system with **145 `:root` design tokens** discovered live (the namespace is `_11bicz7*`, a hashed identifier, so the system has no semantic names exposed publicly — only values). The token sheet defines a five-tier shadow ladder, a 33-color palette across brand / ink / surface / support-cool / semantic / overlay, a 10-step type scale that all share a **150% line-height contract**, and a radius family that defaults to `0px` on 92% of elements and softens only for rasterised thumbnails (`4px`), interactive controls (`8px`), and the primary CTA pill (`12px`). The discipline is the design.
-
-Typographically the system is Pretendard-only — no display font, no brand-display moment, no signage-typography flex. Pretendard 400 carries roughly 91% of all rendered text, with 700 reserved for section titles (`음식종류별 BEST`, `캐치 매거진`) and price emphasis. The home flow opens with a search field on `#F5F5F5` fill, a location chip row, a 25-slide Swiper hero, a "어디로 가시나요?" neighbourhood-discovery row, a horizontally scrolling "음식종류별 BEST" pillar, and an editorial "캐치 매거진" magazine module before reaching a five-tab bottom nav (홈 / 저장 / 내 주변 / 마이다이닝 / MY). The overall impression is **taste-maker, not utility** — the brand wants to feel closer to a Michelin guide than to OpenTable.
-
-**Key Characteristics:**
-- Single accent `#FF3D00` (CatchTable Orange) deployed sparingly — single-CTA discipline, not flooded brand color
-- Hard-square chrome (`0px` radius on 92% of elements) — sharpness amplifies food photography
-- Pretendard-only stack, no display font; 150% line-height applied uniformly to all ~35 typography slots
-- White-canvas + black-ink editorial restraint — depth lives in borders and surface tints, not shadows
-- Five-tier shadow ladder defined in tokens but rarely fired on the home surface
-- Mobile-first WebView shell with `status-bar-top` reservation — desktop is a porthole
-- 5-tab bottom nav as the global IA spine; 마이다이닝 is the reservation-history / loyalty hub
-- Editorial 캐치 매거진 module signals taste-maker positioning, not transactional booking
-
-## 2. Color Palette & Roles
-
-### Primary
-
-- **CatchTable Orange** (`#FF3D00`): Brand primary. Used **exclusively** on the primary CTA pill (`12px` radius, `#FFF` text, 14px/500). In a 3000-element scan of the home surface, this color appears just 4 times in text/icon contexts and once as a background fill — scarcity is the discipline.
-- **Pure White** (`#FFFFFF`): Page canvas, card surfaces. Clean, photograph-amplifying.
-- **Title Black** (`#222222`): Section sub-titles, restaurant names, neighbourhood chip labels.
-- **Pure Black** (`#000000`): Body text default, link text, nav labels. Maximum contrast.
-
-### Brand support
-
-- **Orange Soft** (`#FA8D6B`): Soft variant for pressed states and warm accents.
-- **Orange Pressed** (`#FC9086`): Active-press / hover-state surface.
-- **Orange Tint Warm** (`#FDF0EC`): Banner/notice surface fill.
-- **Orange Tint Pale** (`#FCF3F2`): Subtle alert surface fill.
-
-### Ink ladder (text & icon)
-
-- **Body Default** (`#000000`): Default body text — used everywhere by default.
-- **Title** (`#222222`): Section sub-titles, list-item titles.
-- **Body Strong** (`#424242`): Tab-bar labels at rest.
-- **Body Muted** (`#666666`): Footer policy links, secondary descriptions.
-- **Tertiary** (`#5F5F5F`): Chip-button text (e.g. 현재 위치로).
-- **Placeholder** (`#9E9E9E`): Search-input placeholder.
-- **Disabled** (`#B5B5B5`): Disabled controls.
-- **Icon Default** (`#8F8F8F`): Footer regulatory text, icon default.
-- **Icon Subtle** (`#AAAAAA`): Decorative icons.
-
-### Surface
-
-- **Canvas** (`#FFFFFF`): Page background.
-- **Subdued** (`#F9F9F9`): Footer block fill.
-- **Muted** (`#F5F5F5`): Search-input fill, chip rest state.
-- **Cool** (`#F2F5F7`): Optional cool-tinted surface.
-- **Cool Alt** (`#F0F4FA`): Info-tint surface paired with `#186ADE`.
-
-### Borders
-
-- **Hairline Alpha** (`#00000014`): Default hairline divider (8% black).
-- **Border Default** (`#E4E4E4`): Standard card and input border.
-- **Border Cool** (`#DCE3E8`): Cool-themed surface border.
-
-### Support cool-ink (rare; used in editorial / magazine module)
-
-- **Cool Ink Deep** (`#1C2B36`), **Mid** (`#3E5463`), **Soft** (`#7A909E`), **Light** (`#9FB1BD`).
-
-### Semantic
-
-- **Info** (`#186ADE`) / **Info Soft** (`#75B1FF`) / **Info Tint** (`#F0F4FA`)
-- **Success** (`#43C478`) / **Success Strong** (`#077D55`) / **Success Tint** (`#EBF7ED`)
-- **Danger** (`#D91F11`): Distinct from brand orange — semantic red is darker, redder. Don't confuse.
-- **Warning** (`#F5C518`)
-- **Premium Purple** (`#8F49DE`): Reserved for premium-tier badges (e.g. members-only restaurants).
-
-### Overlay
-
-- **Counter Dim** (`rgba(20,24,29,0.74)`): Swiper slide-counter pill.
-- **Scrim 70/60** (`rgba(0,0,0,0.7)`, `rgba(0,0,0,0.6)`): Modal/sheet backdrops.
-
-## 3. Typography Rules
-
-### Font Family
-
-- **Primary**: `Pretendard, -apple-system, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif`
-- **No brand display font.** No headline accent. Pretendard alone carries the entire system. This is a deliberate restraint — the photography is the brand.
-
-### Hierarchy
-
-| Role | Size | Weight | Line Height | Notes |
-|------|------|--------|-------------|-------|
-| Section Title | 20px | 700 | 150% | `음식종류별 BEST`, `캐치 매거진`, search hero label `어디로 가시나요?` |
-| Big Section | 18px | 700 | 150% | Larger card titles |
-| Card Title | 16px | 600 | 150% | Restaurant card titles in list / detail surfaces |
-| Body Default | 14px | 400 | 150% | **Dominant** — 900 of 1149 sampled elements; nav labels, list items, body |
-| Tab Label | 14px | 400 | 150% | Bottom-tab labels |
-| Chip Label | 14px | 500 | 150% | Geo chips, filter chips |
-| Search Input | 13px | 500 | 150% | Placeholder color `#9E9E9E` |
-| Neighbourhood Chip | 13px | 500 | 150% | `청담`, `압구정·로데오` style |
-| Caption | 12px | 400 | 150% | Timestamps, secondary meta |
-| Footer Body | 11px | 400 | 150% | Regulatory disclosure text |
-| Policy Link | 11px | 500 | 150% | Footer `서비스 이용약관` row |
-| Micro Meta | 10px | 500 | 150% | Slide counter `2 / 25`, bottom-tab compact mode |
-
-### Principles
-
-- **150% line-height is a system-wide contract.** Every typography token across ~35 distinct slots ships `line-height: 150%`. Don't break this — vertical rhythm depends on it.
-- **400 dominates, 700 punctuates.** Weight distribution observed: 400 = 91%, 500 = 5%, 700 = 2%, 450 = 2%, 600 = <1%. The "weight rhythm" is binary — body or title, almost nothing in between.
-- **No tracking adjustments observed** — `letter-spacing: normal` is universal.
-- **Micro text below WCAG body floor**: 10–11px appears on slide counters and legal disclosures. For ports to Latin-script translations, elevate these to ≥12px.
-
-## 4. Radius & Shape
-
-The geometry is **hard-square by default**:
-
-| Use | Radius | Frequency |
-|---|---|---|
-| Default chrome (canvas, sections, list rows, dividers, search input) | `0px` | 1063 of 1149 sampled elements (92%) |
-| Photo thumbnail (rasterised, inside Swiper) | `4px` (also `4.05px` legacy) | 40 |
-| Interactive control (button, card pill, filter pill) | `8px` | 29 |
-| Avatar / circular icon | `50%` | 13 |
-| **Primary CTA pill** | `12px` | 3 |
-| Pill-full (rare, special-case) | `999px` | 1 |
-
-The visual signature is the **absence** of softening on the chrome. Sharp corners frame food photography the way a magazine frames a photograph. When porting: do **not** apply a global `border-radius: 8px` reset — you will lose the brand entirely.
-
-## 5. Elevation
-
-Five-tier shadow ladder defined in `:root`, but used sparingly on the home surface (only 2 distinct shadows fired across 3000+ elements observed). Depth is mostly carried by **borders + surface tints**.
-
-| Tier | Token | Recipe |
-|---|---|---|
-| xs | `--shadow-xs` | `0 1px 2px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08)` |
-| sm | `--shadow-sm` | `0 2px 8px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08)` |
-| drop | `--shadow-drop` | `0 2px 12px rgba(0,0,0,.12)` |
-| md | `--shadow-md` | `0 6px 12px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08), 0 0 4px rgba(0,0,0,.08)` |
-| lg / modal | `--shadow-lg` | `0 16px 20px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08), 0 0 8px rgba(0,0,0,.08)` |
-
-Reserve elevation for: floating action buttons over photography, bottom sheets, sticky search bars on scroll, modal surfaces. Don't fire on cards-at-rest — borders or hairline alpha (`#00000014`) handle separation.
-
-## 6. Spacing & Layout
-
-Observed spacing scale (px): **4 / 8 / 12 / 16 / 20 / 24 / 32 / 45 / 60**.
-
-- **Mobile-first**: WebView shell with `status-bar-top` and `status-bar-padding-top` classes — the design target is the in-app surface, not desktop.
-- **Section paddings**: `pb-45` and `mb-16` legacy utility classes — 45px bottom-of-section, 16px between modules.
-- **Horizontal scrolling lists** dominate discovery — `음식종류별 BEST` is a swipe-row of best-of pills, not a vertical grid.
-- **Bottom tab bar** owns the lowest 56–60px of the viewport.
-
-## 7. Iconography & Photography
-
-- **Photography-first**. The home flow is dominated by 4:3 and landscape food photography. Tile thumbnails carry a subtle `4px` radius — the only soft-corner surface in the system.
-- **Icons are line-style**, rendered as inline SVG; default stroke color `#8F8F8F` (icon-default), darkening to `#000` on active states.
-- **No illustration system observed** on the home surface. Magazine articles inside 캐치 매거진 carry editorial photography rather than custom illustration.
-
-## 8. Component Patterns
-
-- **Primary CTA pill**: `#FF3D00` fill, `#FFF` text, 14px/500 Pretendard, `12px` radius, ~44px tall — only one variant observed. Single-color, single-shape, single-CTA discipline.
-- **Search input**: `#F5F5F5` fill, sharp `0px` corners, 13px/500 placeholder `#9E9E9E`, inline search icon left.
-- **Chip / pill row**: 13–14px/500 ink, no fill at rest, no border at rest — separation by spacing alone (chips at `청담`, `압구정·로데오`, etc.).
-- **Geo-toggle button** (현재 위치로): 14px/500, ink `#5F5F5F`, leading geo icon — text-style action button.
-- **Best-of horizontal pill** (호텔 뷔페, 스시 오마카세): Image-led tile + 14px/400 ink label below — no card chrome, just photo + name.
-- **Bottom tab bar**: 5 tabs (홈 / 저장 / 내 주변 / 마이다이닝 / MY), icon-over-label, 14px/400 ink default; active state inferred (not captured live this pass — flagged).
-- **Swiper hero**: 25-slide carousel with counter pill (`2 / 25 / 전체`) on `rgba(20,24,29,0.74)` overlay.
-- **Footer disclosure block**: `#F9F9F9` surface, 14px/400 corporate info, 11px/500 policy links separated by `|` pipe glyphs, 11px/400 regulatory disclaimer.
-
-## 9. Accessibility & Locale
-
-- **WCAG contrast** — `#000` on `#FFF` body is 21:1 (max); `#222`/`#FFF` titles are 16.1:1; `#FF3D00`/`#FFF` CTA pill is **3.7:1** — **fails AA for normal text but passes AA for large text (18pt+/14pt bold equivalent)**. Since the CTA pill ships 14px/500 (below the bold threshold), this sits at the **borderline AA fail** for body. The system as shipped accepts the trade-off; ports must either bold the CTA label or darken the orange to `#E63600` (≈4.6:1) for strict AA.
-- **Micro text below body floor**: 10–11px slide counters and footer disclaimers are below WCAG body recommendations. Ports to Latin scripts (where stroke widths increase) should elevate to ≥12px.
-- **No landmark elements observed in initial capture** — `<main>` is present but no `<aside>` / explicit `role` annotations on the bottom tab bar. A11y debt; flag for ports.
-- **Locale convention**: Korean restaurant-reservation flows assume KR mobile carriers, KakaoTalk-style identity, and 24h reservation windows. The 마이다이닝 (My Dining) IA spine is loyalty-flavoured, not transaction-flavoured — ports should consider whether the destination market expects a "Reservations" history rather than a "Dining" hub.
-
-## 10. Voice & Microcopy
-
-**Voice shape** (analyst characterisation — not verbatim CatchTable copy): **curatorial-warm, gerund-light, second-person-implied**. The on-surface copy treats the user as a diner choosing a story, not a customer completing a transaction.
-
-Don'ts:
-- Don't write "Book now." The brand's invitation is softer.
-- Don't write "X% off" stickers across photography. The system is photograph-respectful.
-- Don't write urgency timers. Magazine, not flash sale.
-
-Voice samples (fresh OmD-original characterisations, **not** lifted from CatchTable copy — three options to triangulate the shape):
-
-1. *"오늘의 자리, 천천히 골라보세요."* — invitation framing, soft imperative.
-2. *"이번 주말, 어디서 드실래요?"* — question framing, peer-to-peer warmth.
-3. *"미식의 시작, 한 자리에서."* — slogan-shape, factual + warm.
-
-**IP guardrail**: The title-tag phrase "즐거운 미식 생활의 시작" is quoted **once** in §11 as a factual brand-narrative reference and is **not** adopted as headline copy in any sample above. The gerund-lite, curatorial register is documented as a *shape*, not reproduced.
-
-## 11. Brand Narrative (factual provenance)
-
-CatchTable is operated by **주식회사 와드** (WAD Inc.), founded by **용태순** (Yong Tae-soon, current 대표/CEO). Headquartered in **Bundang, Gyeonggi-do** (corporate disclosure observed on the home footer, 2026-05-15). The service positions itself as a premium-leaning restaurant-reservation platform with editorial inflection — the 캐치 매거진 module on the home surface signals that the brand treats discovery as guidebook-style curation, not a transactional booking listing. Title-tag positioning observed on the home surface: "캐치테이블 | 즐거운 미식 생활의 시작" (factual evidence of curatorial-warm positioning, **not** adopted as design copy).
-
-**FILL IN** (verification deferred — Crunchbase / DART access needed): founding year, total funding raised, employee headcount, investor list, monthly active users, reservation volume. These are reported in Korean trade press but were not verified at OmD attribution fidelity in this pass.
-
-## 12. Personas (illustrative — for portable design briefs only)
-
-> Personas are illustrative sketches derived from observable IA decisions (e.g. 마이다이닝 hub, 호텔 뷔페 / 스시 오마카세 / 한우 오마카세 best-of pillars). They are **not** based on internal CatchTable research and should be treated as analyst-inferred FILL-IN placeholders.
-
-- **The Anniversary Planner** — 30s couple in Seoul; books quarterly for birthdays / anniversaries; values curation over price; uses 저장 (Save) before deciding.
-- **The Omakase Regular** — 40s professional; books monthly; uses 마이다이닝 as a memory aid (where did I go, what did I eat); cares about repeat-discount tiers.
-- **The Out-of-Town Visitor** — late 20s traveller in town for 2 days; uses 내 주변 + 캐치 매거진 to discover; books 24–48h ahead; one-shot user (low return).
-
-## 13. Anti-Patterns
-
-Things CatchTable's design **avoids** — and which a port must avoid to keep the inspiration:
-
-- ❌ Flooding the surface with brand orange. Orange is a single-CTA color, not a section-fill color.
-- ❌ Softening every corner. 92% of chrome is `0px` radius — sharpness is the brand.
-- ❌ Adding a display / brand-typography font. Pretendard alone is the entire system.
-- ❌ Firing shadows on cards at rest. Depth = borders + hairline alpha.
-- ❌ "Book now" urgency rhetoric or countdown timers. Voice is curatorial, not transactional.
-- ❌ Discount stickers stamped on food photography. Photography is sovereign.
-- ❌ Breaking the 150% line-height contract. Every text slot ships 150% — don't compress.
-- ❌ Treating desktop as the primary canvas. Design ships to mobile WebView; desktop is a porthole.
-
-## 14. Motion (partially captured — flagged)
-
-Motion tokens were **not** captured in this CDP pass — only entry-fade on Swiper transitions was visibly inferred. The home Swiper uses a default Swiper.js horizontal slide (cubic-ease, ~300ms). Detailed motion tokens (durations, easings, FAB rise, sheet present, tab-switch) require a follow-up UPDATE pass with interaction-triggered capture. **Flagged**.
-
-## 15. Footer / Verification
-
-- **DS surfaces probed and result**:
-  - `design.catchtable.co.kr` → DNS no-resolve (000)
-  - `tech.catchtable.co.kr` → DNS no-resolve (000)
-  - `www.catchtable.co.kr/brand` → 302 redirect (no brand portal)
-  - `github.com/catchtable` → 200 but only 3 public repos (`prerender-java`, `claude-hud`, `brand-review-tool`); **no design-system / Storybook / tokens repo**
-  - `getdesign.md/catchtable` → "No designs found for 'catchtable'"
-  - `styles.refero.design/?q=catchtable` → no result cards
-  - **Result**: **Tier 1 official DS = authoritative NEGATIVE.** The system lives in production code as a vanilla-extract token sheet — captured here directly via CDP (145 `:root` vars on `app.catchtable.co.kr/`).
-
-- **Live capture method**: Chrome DevTools Protocol over `localhost:9222`, `websocket-client` with `suppress_origin=True`, `Runtime.evaluate` against `document.documentElement` for full `:root` custom-property enumeration plus a 3000-element `getComputedStyle` frequency analysis. Browser: Chrome/148.0.7778.97. Captured `2026-05-15T07:10Z`.
-
-- **Surfaces inspected**: `https://app.catchtable.co.kr/` (35 element samples, 145 `:root` vars, 3000-element frequency table) + `https://app.catchtable.co.kr/ct/shop/list?categoryName=서울` (4 element samples — degraded desktop shell, used to confirm primary CTA spec).
-
-- **Proof artefacts**:
-  - `assets/_reference/.live-inspect-proof.json` — 10 raw_samples (≥5 floor), full frequency proof, 33-color token map, 5-tier shadow ladder.
-  - `assets/_reference/.live-inspect-raw.json` — provenance manifest.
-  - `assets/_reference/tokens.json` — normalised colour / typography / radius / elevation / spacing.
-  - `assets/_reference/fonts.json` — Pretendard stack + weight-role map.
-  - `assets/_reference/structure.json` — IA + heading outline + tone-observed.
-  - `_research.md` — 5-tier source map + IP guardrails + flags.
-
-- **IP guardrails**: Brand assets (logo, name, primary `#FF3D00`) referenced for inspiration only. Title-tag positioning phrase quoted **once** as §11 narrative evidence; **not** reproduced as design copy. §10 voice samples are fresh OmD analyst paraphrases. Token values reproduced as factual CSS-custom-property values under analytical fair-use.
-
-- **Confidence**: **High** for tokens, type, radius, elevation, colour, IA spine, footer disclosure. **Medium** for personas (analyst-inferred from IA, not from internal research). **Low / Flagged** for motion (not captured), restaurant-detail page, list page, sell/reservation flow, MY tab — all require an UPDATE pass via mobile-emulated CDP.
-
-- **Verification date**: 2026-05-15.
-
-## 16. Do's and Don'ts
-
-### Do
-- Reserve CatchTable Orange (#FF3D00) for the single primary CTA pill only, where it appears in just 4 text/icon contexts across a 3000-element scan
-- Keep chrome hard-square at 0px radius (92% of elements), softening only to 4px for photo thumbnails, 8px for interactive controls, and 12px for the primary CTA pill
-- Set Pretendard as the sole typeface across the entire system with no display or headline font, letting food photography be the brand moment
-- Apply line-height: 150% to every typography slot, from the 20px/700 Section Title down to the 10px/500 Micro Meta, as a system-wide contract
-- Carry separation with borders and hairline alpha (#00000014) on cards at rest, reserving the five-tier shadow ladder for FABs, bottom sheets, sticky search bars, and modals
-- Keep body weight at Pretendard 400 (91% of text) and punctuate only with 700 for section titles and price emphasis
-
-### Don't
-- Flood sections or large backgrounds with brand orange #FF3D00 — it is a single-CTA color, not a section-fill color
-- Apply a global border-radius reset like 8px to the chrome — it erases the hard-square 0px signature that frames the photography
-- Add a display or brand-typography font alongside Pretendard, which alone carries 91% of all rendered text
-- Fire shadows on cards at rest — depth is meant to come from borders and hairline alpha, not the shadow ladder
-- Stamp discount stickers, X% off badges, or countdown timers over food photography, which the system treats as sovereign
-- Confuse semantic Danger red #D91F11 with brand orange #FF3D00, or compress the 150% line-height contract

package/.opencode/oh-my-design/design-md/catchtable/_research.md

@@ -1,54 +0,0 @@
-# CatchTable / 캐치테이블 — research notes
-
-**Verified**: 2026-05-15
-**Operator**: 주식회사 와드 (WAD Inc.) — 대표 용태순 — Bundang, Gyeonggi
-**Service URL**: https://www.catchtable.co.kr → 302 → https://app.catchtable.co.kr/
-**Category**: consumer-tech / restaurant reservation (외식 예약)
-**Title-tag positioning** (referenced for §11 narrative only, **not** adopted as design copy): "캐치테이블 | 즐거운 미식 생활의 시작"
-
-## 5-tier source map
-
-| Tier | Source | Result |
-|---|---|---|
-| 1 — Official DS | `design.catchtable.co.kr` | DNS no-resolve (000) |
-| 1 — Official DS | `tech.catchtable.co.kr` | DNS no-resolve (000) |
-| 1 — Official DS | `www.catchtable.co.kr/brand` | 302 redirect to marketing root (no brand portal) |
-| 1 — GitHub org | `github.com/catchtable` | 200 but only 3 public repos (`prerender-java`, `claude-hud`, `brand-review-tool`) — **zero** design-system / Storybook / tokens repo |
-| 1 — Live production (authoritative) | CDP :9222 / `app.catchtable.co.kr/` | ✓ 145 `:root` CSS custom properties (vanilla-extract `_11bicz7*` namespace) + 35 element samples + 3000-element frequency table |
-| 2 — Index aggregators | `getdesign.md/catchtable` | "No designs found for 'catchtable'" (verified 2026-05-15) |
-| 2 — Index aggregators | `styles.refero.design/?q=catchtable` | no result cards (verified 2026-05-15) |
-| 3 — Engineering blog | `medium.com/wcd-tech-blog` | 403 (private/removed); no public design article surfaced |
-| 4 — Crunchbase / corp data | inferred via footer disclosure: 주식회사 와드 / 대표 용태순 / Seongnam-Bundang | retained for §11; founding-year & funding figures not verified this pass — flagged FILL-IN |
-| 5 — IP-safe live capture | CDP raw + frequency analysis | ≥10 raw_samples retained in `.live-inspect-proof.json`; 145 root tokens reproduced as factual CSS custom property values under analytical fair-use |
-
-## Tier-1 official DS result
-
-**Authoritative NEGATIVE.** No public design-system site, no brand portal, no Storybook, no Figma Community kit, no `design-tokens` GitHub repo. The design system exists **only as the vanilla-extract token sheet compiled into production CSS** — accessible by runtime inspection. The 3 public repos on the GitHub org are unrelated (SSR prerender helper, a Claude Code plugin, an internal review tool).
-
-## Token system discovered (vanilla-extract auto-hash)
-
-Namespace `_11bicz7*` on `:root`. 145 vars covering:
-
-- **Color**: 33 brand/ink/surface/semantic tokens — Primary `#FF3D00` (with soft `#FA8D6B`, tints `#FCF3F2`/`#FDF0EC`, pressed `#FC9086`), full ink ladder `#000/#222/#424242/#666/#5F5F5F/#9E9E9E/#B5B5B5/#8F8F8F/#AAAAAA`, surface family `#FFF/#F9F9F9/#F5F5F5/#F2F5F7/#F0F4FA`, support cool-ink `#1C2B36/#3E5463/#7A909E/#9FB1BD`, semantic info `#186ADE/#75B1FF/#F0F4FA`, success `#43C478/#077D55/#EBF7ED`, danger `#D91F11`, warning `#F5C518`, premium `#8F49DE`, alpha hairline `#00000014`.
-- **Typography**: size scale 10/11/12/13/14/15/16/18/20/24px; weights 400/450/500/600/700; line-height **150% uniform** on every typography slot.
-- **Radius**: 0px (default, 92% of elements) / 4px (thumbnails) / 8px (controls) / 12px (CTA pill) / 50% (avatars) / 999px (rare).
-- **Elevation**: 5-tier shadow ladder (xs/sm/drop/md/lg) — defined in tokens but rarely fired on the home surface.
-
-## IP guardrails
-
-- Brand assets (logo, name, primary `#FF3D00`) referenced for inspiration only; no redistribution.
-- Title-tag positioning ("즐거운 미식 생활의 시작") quoted **once** as factual brand-narrative evidence in §11; not adopted as headline copy.
-- §10 Voice samples are **fresh analyst paraphrases** — no verbatim CatchTable / 와드 marketing copy reproduced.
-- Token values reproduced as factual CSS custom property values under analytical fair-use.
-- §11/§13 persona block uses public-disclosure data (operator, executive name, HQ city); founding-year / funding / employee headcount **flagged FILL-IN** pending Crunchbase / DART access.
-
-## Flags
-
-1. **Tier 1 official DS = authoritative NEGATIVE.** Consistent with the systemic KR consumer-tech publishing gap (Bunjang, KREAM, Inflearn, Wadiz, Upbit all logged similar in `2026-05-13-kr10.md` and `2026-05-14-kr10.md`).
-2. **Mobile-first WebView shell on desktop** — design lessons port to mobile/native first; desktop is a porthole, not the design target.
-3. **150% line-height uniform contract** — unusual discipline; document explicitly so ports don't break it.
-4. **`#FF3D00` is single-CTA-only** (4 occurrences in 3000-element scan). Brand orange is *scarce*, not flooded. Document as a single-ink discipline.
-5. **Hard-square chrome (0px radius on 92% of elements)** is the visual signature. Soft corners only on rasterised photos. Easy to over-round during port — call out.
-6. **Editorial 캐치 매거진 module** signals brand positioning as taste-maker, not booking utility. Voice should match — curatorial, not transactional.
-7. **A11y micro-text floor**: 10–11px caption/meta used for slide counters and legal disclaimers — below WCAG body floor; ports must elevate to ≥12px for translated text where stroke widths increase.
-8. **List/search/restaurant-detail surfaces not inspected** this pass (desktop endpoint returns shell). UPDATE pass via mobile-emulated CDP recommended.

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

@@ -1,204 +0,0 @@
-{
-  "method": "Chrome DevTools Protocol :9222 / websocket-client suppress_origin=True / Runtime.evaluate(getComputedStyle + document.documentElement :root custom-property enumeration + 3000-element frequency analysis)",
-  "browser": "Chrome/148.0.7778.97",
-  "captured_at": "2026-05-15T07:10:00Z",
-  "page_urls": [
-    "https://app.catchtable.co.kr/",
-    "https://app.catchtable.co.kr/ct/shop/list?categoryName=서울"
-  ],
-  "ws_endpoint": "ws://localhost:9222/devtools/page/A4C8D1A86EF4D71064C45589969CFD5D",
-  "samples_total_observed": 39,
-  "css_vars_root": 145,
-  "raw_samples": [
-    {
-      "selector": "BUTTON._4qhv2s0 (primary CTA pill, list-surface fallback)",
-      "url": "/ct/shop/list",
-      "computed": {
-        "backgroundColor": "rgb(255, 61, 0)",
-        "color": "rgb(255, 255, 255)",
-        "borderRadius": "12px",
-        "fontFamily": "Pretendard, -apple-system, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, ...",
-        "fontSize": "14px",
-        "fontWeight": "500",
-        "text": "홈으로 가기"
-      }
-    },
-    {
-      "selector": "HTML / BODY (page canvas)",
-      "url": "/",
-      "computed": {
-        "backgroundColor": "rgb(255, 255, 255)",
-        "color": "rgb(0, 0, 0)",
-        "fontFamily": "Pretendard, -apple-system, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, sans-serif",
-        "fontSize": "10px (html root) / 14px (body)",
-        "fontWeight": "400"
-      }
-    },
-    {
-      "selector": "H3.section-title.ebold (음식종류별 BEST, 캐치 매거진)",
-      "url": "/",
-      "computed": {
-        "fontSize": "20px",
-        "fontWeight": "700",
-        "color": "rgb(0, 0, 0)",
-        "lineHeight": "150%"
-      }
-    },
-    {
-      "selector": "P._1ykiqva2 (어디로 가시나요? section hero label)",
-      "url": "/",
-      "computed": {
-        "fontSize": "20px",
-        "fontWeight": "700",
-        "color": "rgb(34, 34, 34)"
-      }
-    },
-    {
-      "selector": "INPUT._1smdfcr5._11bicz74d (search input)",
-      "url": "/",
-      "computed": {
-        "fontSize": "13px",
-        "fontWeight": "500",
-        "color": "rgb(158, 158, 158)",
-        "backgroundColor": "rgb(245, 245, 245)",
-        "borderRadius": "0px"
-      }
-    },
-    {
-      "selector": "BUTTON._11i5g4l4._11bicz749 (현재 위치로 chip)",
-      "url": "/",
-      "computed": {
-        "fontSize": "14px",
-        "fontWeight": "500",
-        "color": "rgb(95, 95, 95)"
-      }
-    },
-    {
-      "selector": "FOOTER (corporate footer block)",
-      "url": "/",
-      "computed": {
-        "backgroundColor": "rgb(249, 249, 249)",
-        "color": "rgb(0, 0, 0)",
-        "fontSize": "14px",
-        "fontWeight": "400"
-      }
-    },
-    {
-      "selector": "NAV.mo4qa92 (bottom tab bar: 홈 / 저장 / 내 주변 / 마이다이닝 / MY)",
-      "url": "/",
-      "computed": {
-        "fontSize": "14px",
-        "fontWeight": "400",
-        "color": "rgb(0, 0, 0)"
-      }
-    },
-    {
-      "selector": "A.best-food-list-item (호텔 뷔페 best-of pill)",
-      "url": "/",
-      "computed": {
-        "fontSize": "14px",
-        "fontWeight": "400",
-        "color": "rgb(0, 0, 0)"
-      }
-    },
-    {
-      "selector": "IMG.thumbnail (restaurant card photo)",
-      "url": "/",
-      "computed": {
-        "borderRadius": "4px",
-        "note": "1063 of 1149 sampled elements ship borderRadius=0px; the 4px family appears only on rasterised thumbnails inside Swiper sliders."
-      }
-    }
-  ],
-  "frequency_proof": {
-    "home_surface_3000_element_scan": {
-      "colors_top": [
-        ["rgb(0,0,0)", 1049], ["rgb(34,34,34)", 31], ["rgb(66,66,66)", 19],
-        ["rgb(102,102,102)", 16], ["rgb(255,255,255)", 11], ["rgb(143,143,143)", 8],
-        ["rgb(170,170,170)", 8], ["rgb(95,95,95)", 4], ["rgb(255,61,0)", 4]
-      ],
-      "backgrounds_top": [
-        ["rgba(0,0,0,0)", 1118], ["rgb(249,249,249)", 21], ["rgb(255,255,255)", 6],
-        ["rgb(245,245,245)", 3], ["rgba(20,24,29,0.74)", 1], ["rgb(253,233,226)", 1],
-        ["rgb(255,61,0)", 1], ["rgba(0,0,0,0.7)", 1]
-      ],
-      "radii_top": [
-        ["0px", 1063], ["8px", 29], ["4.05px", 20], ["4px", 20], ["50%", 13],
-        ["12px", 3], ["50px", 1], ["999px", 1], ["40px", 1], ["10px", 1]
-      ],
-      "font_families_top": [
-        ["Pretendard, -apple-system, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, sans-serif", 1154]
-      ],
-      "font_sizes_top": [
-        ["14px", 900], ["10px", 194], ["11px", 31], ["13px", 19], ["12px", 6],
-        ["20px", 3], ["16px", 1]
-      ],
-      "font_weights_top": [
-        ["400", 1047], ["500", 61], ["700", 22], ["450", 20], ["600", 4]
-      ],
-      "shadows_top": [
-        ["rgba(0,0,0,0.05) 0px 0px 20px 0px", 1],
-        ["rgba(0,0,0,0.25) 0px 5px 6px 0px", 1]
-      ]
-    }
-  },
-  "root_token_evidence": {
-    "vanilla_extract_namespace": "_11bicz7*",
-    "naming_pattern": "Auto-hashed vanilla-extract identifiers — no semantic names exposed; meaning inferred from value + usage site.",
-    "color_tokens_observed": {
-      "--_11bicz70": "#FF3D00",
-      "--_11bicz7w": "#FF3D00",
-      "--_11bicz71": "#FA8D6B",
-      "--_11bicz7l": "#FC9086",
-      "--_11bicz72": "#FDF0EC",
-      "--_11bicz7m": "#FCF3F2",
-      "--_11bicz76": "#222222",
-      "--_11bicz77": "#222222",
-      "--_11bicz78": "#5F5F5F",
-      "--_11bicz79": "#9E9E9E",
-      "--_11bicz7a": "#B5B5B5",
-      "--_11bicz7b": "#FFFFFF",
-      "--_11bicz73": "#FFFFFF",
-      "--_11bicz74": "#F5F5F5",
-      "--_11bicz7h": "#F5F5F5",
-      "--_11bicz75": "#F2F5F7",
-      "--_11bicz7g": "#E4E4E4",
-      "--_11bicz7u": "#E4E4E4",
-      "--_11bicz7j": "#DCE3E8",
-      "--_11bicz7s": "#F0F4FA",
-      "--_11bicz7c": "#1C2B36",
-      "--_11bicz7d": "#3E5463",
-      "--_11bicz7e": "#7A909E",
-      "--_11bicz7f": "#9FB1BD",
-      "--_11bicz7q": "#186ADE",
-      "--_11bicz7r": "#75B1FF",
-      "--_11bicz7o": "#43C478",
-      "--_11bicz7p": "#EBF7ED",
-      "--_11bicz7n": "#077D55",
-      "--_11bicz7k": "#D91F11",
-      "--_11bicz7t": "#F5C518",
-      "--_11bicz7v": "#8F49DE",
-      "--_11bicz7i": "#00000014"
-    },
-    "shadow_tokens_observed": {
-      "--_11bicz73u": "0px 1px 2px 0px rgba(0,0,0,.12), 0px 0px 1px 0px rgba(0,0,0,.08), 0px 0px 1px 0px rgba(0,0,0,.08)  [xs]",
-      "--_11bicz73w": "0px 2px 8px 0px rgba(0,0,0,.12), 0px 1px 4px 0px rgba(0,0,0,.08), 0px 0px 1px 0px rgba(0,0,0,.08)  [sm]",
-      "--_11bicz73v": "0px 2px 12px 0px rgba(0,0,0,.12)  [drop]",
-      "--_11bicz73x": "0px 6px 12px 0px rgba(0,0,0,.12), 0px 4px 8px 0px rgba(0,0,0,.08), 0px 0px 4px 0px rgba(0,0,0,.08)  [md]",
-      "--_11bicz73y": "0px 16px 20px 0px rgba(0,0,0,.12), 0px 8px 16px 0px rgba(0,0,0,.08), 0px 0px 8px 0px rgba(0,0,0,.08)  [lg/modal]"
-    },
-    "line_height_observed": "150% uniform across ~35 distinct typography slots — single line-height contract.",
-    "size_scale_observed_px": ["8", "10", "11", "12", "13", "14", "15", "16", "18", "20", "24"],
-    "weight_scale_observed": ["400", "450", "500", "600", "700"]
-  },
-  "tier1_official_ds_probes": {
-    "design.catchtable.co.kr": "DNS no-resolve (000)",
-    "tech.catchtable.co.kr": "DNS no-resolve (000)",
-    "www.catchtable.co.kr/brand": "302 redirect (no brand portal)",
-    "github_org_catchtable": "200 but only 3 repos (prerender-java, claude-hud, brand-review-tool) — zero design-system / Storybook / tokens repo",
-    "getdesign.md/catchtable": "explicit 'No designs found for \\'catchtable\\''",
-    "styles.refero.design/?q=catchtable": "no result cards",
-    "result": "AUTHORITATIVE NEGATIVE — Tier 1 official DS does not exist as a public artifact. The DS lives in production code as a vanilla-extract token sheet (145 :root vars) — captured here directly via CDP."
-  },
-  "verification_date": "2026-05-15"
-}

package/.opencode/oh-my-design/design-md/catchtable/assets/_reference/.live-inspect-raw.json

@@ -1,22 +0,0 @@
-{
-  "method": "Chrome DevTools Protocol over localhost:9222 / websocket-client suppress_origin=True / Runtime.evaluate getComputedStyle + :root CSS custom property dump + 3000-element frequency analysis",
-  "browser": "Chrome/148.0.7778.97",
-  "captured_at": "2026-05-15T07:10:00Z",
-  "surfaces": [
-    {
-      "tab_id": "A4C8D1A86EF4D71064C45589969CFD5D",
-      "url": "https://app.catchtable.co.kr/",
-      "viewport": {"w": 1280, "h": 713, "dpr": 1},
-      "samples_total": 35,
-      "css_vars_root": 145,
-      "raw_capture": "see /tmp/catchtable-raw.json (mirror of frequency table + samples below)"
-    },
-    {
-      "tab_id": "CCA4387B0B4FD4BD37F64893DEA18610",
-      "url": "https://app.catchtable.co.kr/ct/shop/list?categoryName=서울",
-      "viewport": {"w": 1280, "h": 713, "dpr": 1},
-      "note": "Surface returned shell with 홈으로 가기 CTA only (list endpoint requires authenticated mobile context). Used to confirm primary CTA color rgb(255,61,0) / radius 12px / single-orange discipline.",
-      "samples_total": 4
-    }
-  ]
-}