zugzbot 1.0.21 → 1.0.22

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

@@ -1,317 +0,0 @@
----
-id: tving
-name: TVING
-display_name_kr: TVING (티빙)
-country: KR
-category: consumer-tech
-homepage: "https://www.tving.com"
-primary_color: "#ff153c"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=tving.com&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#ff153c"
-    canvas: "#000000"
-    on-primary: "#ffffff"
-    surface: "#2e2e2e"
-    surface-modal: "#111111"
-    surface-overlay: "#262626"
-    text-secondary: "#b3b3b3"
-    text-tertiary: "#a3a3a3"
-    disabled-bright: "#d9d9d9"
-    muted: "#6e6e6e"
-    disabled-deep: "#4f4f4f"
-    cate-home: "#ff1f45"
-    cate-live: "#ff584a"
-    cate-clip: "#fd8163"
-    cate-vod: "#387dff"
-    cate-movie: "#7d57fc"
-    cate-ad: "#fcc800"
-  typography:
-    family: { sans: "Pretendard", mono: "Pretendard" }
-    hero:         { size: 43, weight: 700, use: "Hero headline, onboarding h2" }
-    cta:          { size: 19, weight: 700, use: "Primary CTA label" }
-    secondary-nav: { size: 16, weight: 400, use: "Secondary nav" }
-    footer:       { size: 16, weight: 400, use: "Footer link" }
-    nav-cta:      { size: 14, weight: 700, use: "Nav CTA 티빙 시작하기" }
-    body:         { size: 12, weight: 400, use: "Body baseline" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
-  rounded: { sm: 3, md: 8, lg: 16, full: 9999 }
-  shadow:
-    none: "none"
-  components_harvested: true
-  components:
-    button-cta-hero: { type: button, bg: "#ff153c", fg: "#ffffff", radius: 12, font: "19/700", use: "Primary hero CTA" }
-    button-cta-nav: { type: button, bg: "#ff153c", fg: "#ffffff", radius: 8, font: "14/700", use: "Header inline CTA 티빙 시작하기" }
-    card-poster: { type: card, radius: 16, use: "Poster card, top-corners-only radius, art bleeds bottom edge" }
-    chip-meta: { type: badge, radius: 3, use: "Fine chip / tag / meta-label" }
-    avatar: { type: avatar, radius: 9999, use: "Avatar / circular icon" }
----
-
-# Design System Inspiration of TVING (티빙)
-
-## 1. Visual Theme & Atmosphere
-
-TVING is Korea's CJ ENM-backed streaming platform, and its product surface reads like a cinema-darkened auditorium tuned for Korean primetime — the canvas is a near-absolute black (`#000000` locked at the document root), text floats in pure white (`#FFFFFF`) with a four-step gray scale beneath it (`#B3B3B3` → `#A3A3A3` → `#6E6E6E` → `#4F4F4F`), and the single chromatic interruption is a saturated red the brand encodes on `:root` as `--tving: 350 100% 54.12%` — runtime hex `#FF153C`. This is not a sentimental crimson. It is a hot, almost neon scarlet, applied with monastic discipline: across 3,000 sampled nodes, only twelve carry that red as a background — every one of them a CTA, a brand mark, or a live-status indicator. The platform's geometric signature is a top-corners-only card radius (`16.5292px 16.5292px 0 0`), engineered so poster art bleeds to the bottom edge of each tile — an OTT idiom shared with Disney+ and Wavve but tuned here to a 1.033rem radius that reads slightly tighter than industry default.
-
-What distinguishes TVING from its Korean OTT peers is the **category-color taxonomy hardcoded into the design system itself**. Six content categories — home (`#FF1F45`), live (`#FF584A`), clip (`#FD8163`), VOD (`#387DFF`), movie (`#7D57FC`), and ad (`#FCC800`) — are not merely page accents but first-class `:root` CSS custom properties (`--color-cate-home`, `--color-cate-live`, etc.). Category color IS product taxonomy: when a user navigates between live KBO baseball, VOD drama, and clip browse, the chrome itself shifts hue. Reinforcing this, the system carries **dedicated live-streaming geometry tokens** — `--kbo-player-height`, `--sports-player-width`, `--live-tab-player-companion-banner-height` — meaning live sports is not a feature retrofitted onto a VOD player but a co-equal surface paradigm. Pretendard is the exclusive typeface (100% of samples; Apple SD Gothic Neo only as system fallback), weight discipline is binary (400 body / 700 heading and CTA — no 500/600 intermediates observed), and depth is constructed through layered dark surfaces (`#000` → `#2E2E2E` → `rgba(15,15,15,0.74)` overlay) rather than box-shadows, which return `0 0 #0000` on every sampled production element.
-
-**Key Characteristics:**
-- Locked dark canvas (`#000000` at `html`) — no light-mode token observed; the platform is dark-mode-only by design.
-- Single brand red (`#FF153C`) reserved for CTAs and brand marks; observed on 4 of 12 dominant background colors, runtime alpha-variants `rgb(255,21,60)` / `rgb(254,21,60)` / `rgb(255,31,69)` all collapse to one canonical token.
-- **Six-category color taxonomy as `:root` primitives** — home/live/clip/VOD/movie/ad each own a CSS custom property; rare case where color IS product information architecture.
-- Top-corners-only card radius (`16.5292px 16.5292px 0 0`) for poster bleed — observed 20× on home surface alone.
-- Pretendard exclusive (SIL OFL 1.1), weight binary (400 / 700).
-- Box-shadow zero across product chrome — depth via surface contrast, not elevation.
-- Dedicated live-streaming geometry tokens (`--kbo-player-*`, `--sports-player-*`) elevate live as a peer surface to VOD.
-- Tailwind utility layer (`--tw-*`) + Emotion CSS-in-JS (`css-*` hashes) + shadcn-pattern semantic roles (`--card`, `--popover`, `--muted`) coexist — pragmatic framework stack, not opinionated DS purism.
-
-## 2. Color Palette & Roles
-
-### Brand
-- **TVING Red** (`#FF153C`, canonical `--tving: 350 100% 54.12%` HSL) — primary CTA backgrounds, brand mark, live-status accents. Runtime alpha-variants observed (`#FE153C`, `#FF1F45`) collapse to one logical token.
-- **Pure Black** (`#000000`) — locked canvas at `html` and `body`. No theme alternate observed.
-- **Pure White** (`#FFFFFF`) — primary text on canvas; 519 occurrences in 3,000-node sample (dominant text color).
-
-### Surface ladder (dark)
-- `#000000` — canvas / page background (12 occurrences as bg)
-- `#2E2E2E` — elevated card / chip surface (10 occurrences as bg)
-- `#111111` / `#262626` — modal / overlay surface
-- `rgba(15,15,15,0.74)` — bottom-sheet / scrim overlay
-- `rgba(0,0,0,0.5)` — image-overlay scrim
-- `rgba(255,255,255,0.1)` / `rgba(255,255,255,0.4)` — hover/active glass tint on poster cards
-
-### Text scale (grayscale)
-- `#FFFFFF` — primary text, headlines (519×)
-- `#B3B3B3` — secondary body (169×)
-- `#A3A3A3` — tertiary metadata (24×)
-- `#D9D9D9` — disabled-bright (6×)
-- `#6E6E6E` — muted hint (52×)
-- `#4F4F4F` — disabled-deep (1×)
-
-### Category taxonomy (first-class `:root` tokens)
-- `--color-cate-home`: `#FF1F45` (home shelf)
-- `--color-cate-live`: `#FF584A` (live streaming)
-- `--color-cate-clip`: `#FD8163` (short-form clips)
-- `--color-cate-vod`: `#387DFF` (on-demand)
-- `--color-cate-movie`: `#7D57FC` (films)
-- `--color-cate-ad`: `#FCC800` (sponsored / ad indicator)
-
-### Border
-- `hsl(0,0%,31%)` (`--border`) — hairline divider; rendered at 1px on dark surface, near-invisible until hover.
-
-## 3. Typography
-
-Pretendard exclusive. No display accent face. No serif. Weight binary.
-
-| Role | Family | Size (observed) | Weight |
-|---|---|---|---|
-| Hero headline (h2 onboarding) | Pretendard | 43.4px | 700 |
-| Body baseline | Pretendard | 12.4px | 400 |
-| Primary CTA label | Pretendard | 18.6px | 700 |
-| Nav CTA ('티빙 시작하기') | Pretendard | 14px | 700 |
-| Footer link | Pretendard | 15.5px | 400 / 700 mixed |
-| Secondary nav | Pretendard | 16px | 400 |
-
-**Stack:** `Pretendard, -apple-system, "system-ui", Roboto, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`
-
-CDN: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css` (SIL OFL 1.1).
-
-## 4. Shape & Radius
-
-Base token `--radius: 0.5rem` (8px), but runtime values cluster at three points:
-
-| Radius | Frequency | Role |
-|---|---|---|
-| `16.5292px` (top-corners only) | 41× (20× as top-only) | Poster card top — image bleeds bottom edge |
-| `12.4px` | 3× | Primary hero CTA |
-| `8px` | 1× observed | Header inline CTA |
-| `3px` (and top-only) | 13× (10× top-only) | Fine chip / tag / meta-label |
-| `50%` | 4× | Avatar / circular icon |
-| `9999px` | 1× | Pill (rare) |
-
-The signature is **top-corners-only on poster cards** — bottom edge sits flush against metadata so poster art reads as bleed, not framed.
-
-## 5. Spacing & Layout
-
-Layout primitives carried as CSS custom properties on `:root`:
-
-| Token | Value | Role |
-|---|---|---|
-| `--gnb-height` | `70px` | Global nav bar (authenticated) |
-| `--header-height` | `4rem` (64px) | Marketing / onboarding header |
-| `--bottom-tab-height` | `4.167rem` (≈66.7px) | Mobile bottom tab bar |
-| `--safe-area-inset-{top,bottom,left,right}` | dynamic | iOS PWA safe areas |
-| `--content-inset-{top,bottom,right}` | `0px` (default) | Dynamic content insets when player docked |
-| `--live-tab-player-height-desktop` | `calc((100vw - 40rem) * 0.5625)` | 16:9 docked player |
-| `--kbo-player-width` | `calc(100vw - 31.25rem)` | KBO baseball player width (subtracts 500px sidebar) |
-| `--sports-player-height` | `calc((100vw - 31.25rem) * 0.5625)` | Sports player 16:9 |
-
-Page viewport: `1280×713` (desktop test). Onboarding scroll height `4,440px` (~6.22 viewports).
-
-## 6. Elevation & Depth
-
-**Box-shadow returns `0 0 #0000` on every sampled product element.** Depth is constructed via surface contrast:
-
-1. Canvas `#000000`
-2. Elevated `#2E2E2E` (+46 luminance)
-3. Modal/overlay `rgba(15,15,15,0.74)`
-4. Glass tint `rgba(255,255,255,0.1)` on hover
-
-The `--tw-shadow` and `--tw-drop-shadow` Tailwind tokens exist but render as zero — design discipline, not framework limitation.
-
-## 7. Iconography & Imagery
-
-Not directly inspected this pass (authenticated browse gated). System signals:
-- Avatar / circular icons use `50%` radius (4 observed).
-- Live indicators presumed to use `--color-cate-live` (`#FF584A`) as fill.
-- Poster art is the dominant visual asset on browse surfaces; placeholder ratio inferred at 2:3 portrait (industry standard, confirmed by top-corners-only card geometry).
-
-## 8. Motion
-
-Not captured live (no interactions triggered during static-state inspect). System carries Swiper carousel (`--swiper-theme-color: #007AFF`) and SweetAlert2 (`--swal2-width: 30rem`) as vendor primitives. Tailwind transform tokens (`--tw-translate-{x,y}`, `--tw-rotate`, `--tw-scale-{x,y}`) are reset to default — motion is applied per-component, not from `:root`.
-
-Flagged for UPDATE pass: hover transitions on poster cards, player chrome fade timing, modal entrance curves.
-
-## 9. Component Patterns & States
-
-### Primary CTA (`프로모션 보기`, `티빙 시작하기`)
-- Background: `#FF153C` (canonical brand red)
-- Color: `#FFFFFF`
-- Radius: `12.4px` (hero) / `8px` (header inline)
-- Padding: `19.6292px 62px` (hero) — generous horizontal, allowing 4-syllable Korean CTAs without wrap
-- Font: Pretendard 18.6px / 700 (hero), 14px / 700 (header)
-- Height: 62px (hero), 32px (header)
-- Border: none
-
-### Secondary / nav links
-- Color: `#A3A3A3` default, `#FFFFFF` active
-- Size: 15.5px / 400 (passive), 700 (current)
-- No background, no border
-
-### Footer
-- Background: `#000000` (continuous with canvas)
-- Links: `#A3A3A3` 15.5px; `개인정보처리방침` rendered at weight 700 (legal-emphasis convention)
-
-### Live status
-- Presumed to use `#FF584A` (`--color-cate-live`) with circular pulse indicator (live token system suggests dedicated chrome).
-
-## 10. Voice & Tone
-
-TVING's product voice — observed from button labels, footer copy register, and onboarding headline structure — is **concise, action-oriented, casual-polite Korean (`-요/-세요`)**. No exclamation marks observed on CTAs. No marketing superlatives within product chrome. The onboarding headline `지금 시작해보세요` is grammatically a polite imperative without emphasis — invitation, not exhortation.
-
-The voice register sits between Netflix Korea's neutral-formal and Wavve's slightly more casual approach. Footer items use legal-register nouns (`이용약관`, `법적고지`) without softening.
-
-**Voice samples (OmD-original analyst characterizations — NOT verbatim from TVING):**
-- Action: "지금 보세요" / "이어서 보기" / "시청 계속하기"
-- Status: "라이브 진행 중" / "오늘 공개" / "에피소드 12까지"
-- Empty / error: "잠시 후 다시 시도해주세요" / "지금은 시청할 수 없어요"
-
-IP guardrail: TVING's actual marketing taglines (`스트리밍의 모든 것`, etc.) are NOT reproduced in this DESIGN.md. Voice samples above are fresh illustrative reconstructions in the observed register.
-
-## 11. Brand Narrative (Reported Facts Only)
-
-TVING is operated by **TVING Inc.**, a subsidiary of **CJ ENM** (Korea's largest media conglomerate). Originally launched in 2010 as a CJ Hellovision live-TV streaming service, the platform was relaunched in 2020 as a standalone OTT after CJ ENM spun off TVING as an independent company in partnership with JTBC Studios. The platform's competitive thesis is **K-content provenance** — CJ ENM and JTBC together produce a large share of Korea's tvN, JTBC, and CJ-affiliated drama and entertainment IP, giving TVING first-window exclusivity on a substantial portion of Korean primetime programming. In 2022, TVING absorbed Paramount+ Korean operations under a content partnership.
-
-Headquarters: Seoul, South Korea. Service domain: `www.tving.com`. The 🐴 horse emoji prefixing the browser tab title is a 2024-2025 brand-personality device tied to TVING's marketing campaigns.
-
-**[FILL IN]**: Exact subscriber count, current CEO, latest funding round are not verified at OmD attribution fidelity in this pass — flagged for UPDATE if needed.
-
-## 12. Personas (Inferred, Public-Surveys-Only)
-
-**[FILL IN]** — Personas below are **inferred from public market positioning** (CJ ENM K-content focus, live-sports investment, mobile-first chrome), not from TVING-published user research:
-
-1. **K-drama primetime viewer (25-44, urban, mobile)** — watches tvN / JTBC originals same-night-as-broadcast; values episode-tracking continuity and download-for-commute.
-2. **Live sports follower (KBO baseball, 30-55, dual-screen)** — uses TVING during commute and at home for live KBO games (TVING holds KBO streaming rights); dedicated `--kbo-player-*` tokens confirm this user is a first-class design target.
-3. **Variety-show casual (teens-20s, social)** — clips surface (`--color-cate-clip`) suggests short-form viewing pattern for variety highlights, shared into chat apps.
-
-Authentic persona work would require access to TVING's internal research or commissioned surveys — explicitly out of scope here.
-
-## 13. Anti-Patterns & Don'ts
-
-**Do NOT, when porting this design language to your own product:**
-
-1. **Don't replicate the locked dark canvas if your content is not video.** TVING's `#000` works because poster art and video frames provide all the visual energy. A dark-mode SaaS dashboard or marketplace inherits the gloom without inheriting the cinema.
-2. **Don't claim a six-category taxonomy without earning it.** The `--color-cate-*` system works because TVING genuinely has six content surface paradigms (live sports, live TV, VOD drama, VOD movie, clips, ads). Adopting six taxonomy hues for a product with three actual surfaces produces visual noise.
-3. **Don't replicate `#FF153C` verbatim.** It is a CJ ENM brand color in spirit; shift via `delta_set` if you want a "TVING-like" warm scarlet — try `#E0142E` to `#FF2A4D` range with WCAG-checked contrast on dark surface.
-4. **Don't skip Pretendard for "system font."** TVING's typography reads tight and modern because Pretendard's optical sizing differs from Apple SD Gothic Neo at the 12-18px display range. System fallback degrades the character meaningfully.
-5. **Don't apply top-corners-only radius to non-poster cards.** That geometry is meaningful only when the bottom edge is an image bleed; on a text card it reads as a CSS mistake.
-6. **Don't import the live-streaming geometry tokens as-is.** `--kbo-player-width: calc(100vw - 31.25rem)` is calibrated to TVING's specific sidebar — meaningless context elsewhere.
-
-## 14. Implementation Notes
-
-- **Stack**: Next.js (inferred from chunked CSS class hashes) + Emotion CSS-in-JS + Tailwind utility layer + shadcn/ui-pattern semantic role tokens.
-- **Token strategy**: HSL components in CSS vars (`350 100% 54.12%`) so `hsl(var(--tving) / 0.5)` produces alpha variants without separate tokens — a shadcn idiom.
-- **Live geometry**: All live-streaming player dimensions are `calc()` expressions against `100vw` minus a fixed sidebar — meaning the player resizes responsively to viewport while sidebar stays pinned.
-- **iOS PWA**: `--safe-area-inset-*` plumbed throughout — TVING ships as a native-feeling PWA on iOS in addition to native apps.
-- **Vendor coexistence**: SweetAlert2 (modal), Swiper (carousel), and the bundled shadcn-pattern primitives all run side-by-side. Pragmatic, not opinionated.
-
-## 15. Verification
-
-| § | Source | Date | Confidence |
-|---|---|---|---|
-| 1, 2, 3, 4, 5, 6, 9 | Live CDP capture via browser-harness :9222 — 13 raw_samples, 114 :root CSS custom properties, 3000-node frequency analysis | 2026-05-15 | High |
-| 7, 8 | Token-level signals only (interactions not triggered in static inspect) | 2026-05-15 | Medium (flagged for UPDATE) |
-| 10 | Observed button labels + footer copy register; voice samples are OmD-original analyst reconstructions | 2026-05-15 | Medium (no verbatim adoption) |
-| 11 | Public corporate narrative (CJ ENM / TVING Inc. press history) | 2026-05-15 | Medium (subscriber/CEO marked FILL IN) |
-| 12 | **Inferred only** — no TVING-published persona research consulted | 2026-05-15 | Low (explicitly flagged) |
-| 13 | OmD-original analytical guidance | 2026-05-15 | High (analyst opinion) |
-
-### Tier 1 — Official Design System
-**Result: negative (documented).**
-
-Probed all canonical subdomain patterns:
-- `design.tving.com` → DNS 000
-- `brand.tving.com` → DNS 000
-- `tech.tving.com` → DNS 000
-- `tving.com/design` → 404
-- GitHub `tving` org → 1 repo (`tving.github.io`, empty)
-- CJ ENM corporate channels — no public TVING-branded DS portal
-
-The production CSS `:root` token set (114 custom properties) extracted via live CDP capture is the closest authoritative public artifact and is treated here as the de-facto source of truth.
-
-### Tier 2 — Third-party indexes
-- `getdesign.md/q/tving` → 404
-- `styles.refero.design/?q=tving` → 200 with no result cards
-
-Consistent with the systemic Korean-coverage gap.
-
-### IP Guardrails
-- Brand assets (logo, name, `#FF153C`) referenced for analysis only — not redistributed.
-- §10 Voice samples are **fresh OmD-original analyst reconstructions** in the observed register — no verbatim TVING marketing copy or taglines reproduced.
-- §11 narrative is sourced from publicly reported facts (CJ ENM corporate history); subscriber/CEO/funding marked **[FILL IN]** where attribution fidelity is insufficient.
-- §12 personas are explicitly inferred from market positioning; authentic persona work would require TVING-internal research.
-- Content thumbnails (poster art, hero stills, episode metadata) NOT captured into product DOM or this DESIGN.md. Reference screenshot kept under fair-use commentary.
-
-### Flagged for UPDATE pass
-- Authenticated browse / VOD detail / live KBO player surfaces — gated, not inspected.
-- Motion timing (poster card hover, player chrome fade, modal entrance) — requires interaction triggers.
-- Exact live category-color usage on chrome — `--color-cate-*` system observed in tokens but per-surface application not visually verified.
-- TVING subscriber count, current CEO, latest funding, founding-year specifics for §11.
-
----
-
-*Captured via `omd:add-reference` (CREATE mode) on 2026-05-15. See `assets/_reference/` for tokens.json, structure.json, fonts.json, .live-inspect-proof.json, screenshots/, LICENSE-NOTE.md, attribution.md.*
-
-## 16. Do's and Don'ts
-
-### Do
-- Lock the canvas to pure black (#000000) at the document root and build depth through surface contrast (#000 → #2E2E2E → rgba(15,15,15,0.74)) since box-shadow renders 0 0 #0000 across all product chrome
-- Reserve the brand red #FF153C strictly for CTAs, brand marks, and live-status accents — keeping it to a handful of background nodes the way the doc samples only twelve red backgrounds across 3,000 nodes
-- Drive content-area-aware chrome from the six --color-cate-* tokens (home #FF1F45, live #FF584A, clip #FD8163, VOD #387DFF, movie #7D57FC, ad #FCC800) so color carries product taxonomy
-- Apply the top-corners-only radius (16.5292px 16.5292px 0 0) to poster cards so the image bleeds flush to the bottom metadata edge
-- Set Pretendard as the exclusive typeface and hold weights to the binary 400 body / 700 heading-and-CTA scale, with no 500/600 intermediates
-- Build primary CTAs as #FF153C background, #FFFFFF label, Pretendard 18.6px/700 with generous 19.6292px 62px padding so 4-syllable Korean labels never wrap
-
-### Don't
-- Spread #FF153C across large background areas or decorative fills — it is a CTA, brand-mark, and live-status accent only, never an ambient surface color
-- Apply the locked dark canvas to non-video products, since #000 earns its energy from poster art and video frames a SaaS dashboard or marketplace cannot supply
-- Adopt the six --color-cate-* taxonomy hues for a product with fewer than six genuine content surface paradigms, which only produces visual noise
-- Reproduce #FF153C verbatim as it is a CJ ENM brand color — shift it within the #E0142E–#FF2A4D range with WCAG contrast checks on dark surface if you want a TVING-like scarlet
-- Substitute a system font for Pretendard, whose optical sizing differs meaningfully from Apple SD Gothic Neo at the 12–18px display range
-- Apply the top-corners-only radius to text cards or import the live geometry tokens (e.g. --kbo-player-width: calc(100vw - 31.25rem)) as-is, since both are calibrated to TVING's poster bleed and specific sidebar

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

@@ -1,131 +0,0 @@
-{
-  "navigated_at": "2026-05-15T00:00:00Z",
-  "source_url": "https://www.tving.com (redirected to https://www.tving.com/onboarding for unauth state)",
-  "viewport": "1280x713",
-  "tool_used": "browser-harness CDP :9222 (Chrome remote-debugging)",
-  "method": "new_tab + wait_for_load + js(getComputedStyle sampling) + capture_screenshot",
-  "raw_samples": [
-    {
-      "element_selector": "body",
-      "font-family": "Pretendard, -apple-system, \"system-ui\", Roboto, \"Segoe UI\", ...",
-      "color": "rgb(255, 255, 255)",
-      "background-color": "rgb(0, 0, 0)",
-      "font-size": "12.4px"
-    },
-    {
-      "element_selector": "html",
-      "background-color": "rgb(0, 0, 0)",
-      "note": "Dark canvas locked at root; surfaces remain dark across hero/onboarding"
-    },
-    {
-      "element_selector": "BUTTON.css-2ecmcz (primary CTA '프로모션 보기')",
-      "background-color": "rgb(255, 21, 60)",
-      "color": "rgb(255, 255, 255)",
-      "border-radius": "12.4px",
-      "padding": "19.6292px 62px",
-      "font-weight": "700",
-      "font-size": "18.6px",
-      "height": "62px"
-    },
-    {
-      "element_selector": "A '티빙 시작하기' (header CTA)",
-      "background-color": "rgb(254, 21, 60)",
-      "color": "rgb(255, 255, 255)",
-      "border-radius": "8px",
-      "height": "32px",
-      "font-weight": "700",
-      "font-size": "14px"
-    },
-    {
-      "element_selector": "h2 '지금 시작해보세요'",
-      "color": "rgb(255, 255, 255)",
-      "font-size": "43.4px",
-      "font-weight": "700",
-      "font-family": "Pretendard"
-    },
-    {
-      "element_selector": "footer nav a (이용약관/개인정보처리방침 등)",
-      "color": "rgb(163, 163, 163)",
-      "font-size": "15.5px",
-      "font-weight": "400-700 mixed"
-    },
-    {
-      "element_selector": ":root --tving (HSL)",
-      "value": "350 100% 54.12%",
-      "note": "Canonical brand token; equivalent hex ≈ #FF153C (matches observed CTA bg rgb(255,21,60))"
-    },
-    {
-      "element_selector": ":root --color-cate-home / live / clip / vod / movie / ad",
-      "values": {
-        "home": "#ff1f45",
-        "live": "#ff584a",
-        "clip": "#fd8163",
-        "vod": "#387dff",
-        "movie": "#7d57fc",
-        "ad": "#fcc800"
-      },
-      "note": "Six-category taxonomy hardcoded as CSS custom properties — distinctive brand signature"
-    },
-    {
-      "element_selector": ":root --gnb-height / --header-height / --bottom-tab-height",
-      "values": {
-        "gnb-height": "70px",
-        "header-height": "4rem",
-        "bottom-tab-height": "4.167rem"
-      }
-    },
-    {
-      "element_selector": ":root --radius",
-      "value": "0.5rem",
-      "note": "Base radius token; observed runtime values 8px / 12.4px / 16.5292px (largest = card top corners)"
-    },
-    {
-      "element_selector": "top color frequency (body-level sampling, 3000 nodes)",
-      "values": {
-        "rgb(255,255,255)": 519,
-        "rgb(179,179,179)": 169,
-        "rgb(110,110,110)": 52,
-        "rgb(163,163,163)": 24,
-        "rgb(217,217,217)": 6
-      },
-      "note": "White + 4-step gray scale dominates text; zero non-grayscale text color"
-    },
-    {
-      "element_selector": "top background frequency",
-      "values": {
-        "rgb(0,0,0)": 12,
-        "rgb(46,46,46)": 10,
-        "rgb(255,21,60)": 2,
-        "rgb(255,31,69)": 1,
-        "rgb(254,21,60)": 1,
-        "rgba(0,0,0,0.5)": 1
-      },
-      "note": "Three near-identical reds (255,21,60 / 254,21,60 / 255,31,69) — runtime alpha/hover variants of canonical --tving #FF153C"
-    },
-    {
-      "element_selector": "top radius frequency",
-      "values": {
-        "16.5292px": 41,
-        "16.5292px 16.5292px 0px 0px": 20,
-        "3px": 13,
-        "3px 3px 0px 0px": 10,
-        "50%": 4,
-        "12.4px": 3
-      },
-      "note": "Card top-corner-only radius pattern (poster bleed); fine 3px chips; circular for avatars"
-    }
-  ],
-  "css_var_count": 114,
-  "css_var_namespaces": [
-    "--tving (brand)",
-    "--color-cate-* (6 category hues)",
-    "--gnb-height / --header-height / --bottom-tab-height / --content-inset-* (layout)",
-    "--live-tab-* / --kbo-player-* / --sports-player-* (live-streaming geometry)",
-    "--safe-area-inset-* (iOS PWA)",
-    "--tw-* (tailwind utility)",
-    "--swal2-* / --swiper-* (vendor)",
-    "--card / --popover / --muted / --accent / --background / --foreground (shadcn-pattern semantic)"
-  ],
-  "screenshot_captured": "screenshots/hero-desktop.png (1280x713, above-fold)",
-  "ip_guardrail_note": "Content thumbnails (poster art, hero stills) NOT captured into product DOM. Only reference screenshot kept under fair-use commentary. No verbatim taglines reproduced in DESIGN.md."
-}

package/.opencode/oh-my-design/web/references/tving/assets/_reference/LICENSE-NOTE.md

@@ -1,37 +0,0 @@
-# License Note — tving Reference Capture
-
-This directory contains design-reference materials captured from
-**TVING (티빙)**'s public website on **2026-05-15** for the purpose of
-informing UI design work in this project.
-
-## What's here is for REFERENCE, not REDISTRIBUTION
-
-- **Design tokens** (colors, fonts, spacing, radii) — `tokens.json` /
-  `structure.json` / `fonts.json`. These are facts about the brand's
-  design system and may inform your own design.
-- **Logo / screenshots** — captured for visual recognition during
-  development. These are CJ ENM / TVING trademarks and copyrighted
-  visual works. Do not embed in your own product, marketing, or any
-  redistribution. Replace with your own brand mark before shipping.
-- **Content thumbnails** (poster art, hero stills) — copyrighted by
-  respective rights holders (studios, distributors). NOT captured
-  into product DOM; reference screenshots only.
-
-## What you should NOT do
-
-- Embed `logo.*` or `screenshots/*.png` in your own product UI.
-- Copy `tokens.json` hex values into your own brand without shifting
-  via `delta_set` (see omd:init).
-- Copy any marketing text, taglines, or content metadata verbatim.
-- Reuse poster art or content stills.
-
-## What you SHOULD do
-
-- Use the **design language** (token relationships, dark-canvas
-  composition patterns, category-color taxonomy, voice register) to
-  inform your project's DESIGN.md.
-- Replace all brand-identifying assets with your own before sharing.
-
-See `attribution.md` for source URLs and capture timestamps.
-
-This note is generated by `omd:add-reference`. Do not edit by hand.

package/.opencode/oh-my-design/web/references/tving/assets/_reference/attribution.md

@@ -1,52 +0,0 @@
-# Attribution — tving Reference Capture
-
-Captured: **2026-05-15** via `omd:add-reference` (CREATE mode) + `browser-harness` CDP :9222
-
-## Sources
-
-| File | Source URL | Captured | Notes |
-|---|---|---|---|
-| `tokens.json` | https://www.tving.com (→ /onboarding) | 2026-05-15 | Computed styles via browser-harness CDP, factual analysis |
-| `structure.json` | https://www.tving.com (→ /onboarding) | 2026-05-15 | Observable composition facts (CSS vars, layout geometry, category taxonomy) |
-| `fonts.json` | https://www.tving.com | 2026-05-15 | Computed `font-family` first-token + known-font registry match |
-| `.live-inspect-proof.json` | https://www.tving.com | 2026-05-15 | 13 raw_samples (≥5 floor), 114 CSS custom properties captured |
-| `screenshots/hero-desktop.png` | https://www.tving.com (1280×713) | 2026-05-15 | Reference for design alignment — onboarding surface (unauth) |
-
-## Skipped (URL recorded for manual review)
-
-- Authenticated browse / VOD detail / live player surfaces — gated behind login, not inspected in this pass. Flagged for UPDATE.
-- Content thumbnail / poster art — copyrighted by respective rights holders (studios, distributors). NOT downloaded.
-- Marketing video assets — skipped per skill policy.
-
-## Tier-1 Official Design System
-
-**Result: negative (documented).**
-
-Probed (all DNS no-resolve or 404 as of 2026-05-15):
-- `design.tving.com` → DNS 000
-- `brand.tving.com` → DNS 000
-- `tech.tving.com` → DNS 000
-- `tving.com/design` → 404
-- GitHub `tving` org → 1 repo only (`tving.github.io`, no DS content)
-- CJ ENM corporate channels — no public TVING-branded DS portal
-
-The production CSS `:root` token set (114 custom properties, captured via CDP) is the closest authoritative public artifact and was extracted directly.
-
-## Tier-2 Indexes
-
-- `getdesign.md/q/tving` → 404
-- `styles.refero.design/?q=tving` → 200 but no result cards
-
-Consistent with the systemic Korean-coverage gap.
-
-## Rights
-
-These materials are owned by **CJ ENM** (TVING Inc.) and its respective
-rights holders. Captured under fair-use principles for the purpose of
-design analysis and development reference. See `LICENSE-NOTE.md` for
-usage boundaries.
-
-## Refresh
-
-Rerun `omd:add-reference tving` to recapture. Tokens reflect the live
-site at capture time and may drift as the brand evolves.

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

@@ -1,31 +0,0 @@
-{
-  "captured_at": "2026-05-15T00:00:00Z",
-  "fonts": [
-    {
-      "family": "Pretendard",
-      "license": "SIL OFL 1.1 (open-source, free for commercial use)",
-      "cdn_url": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css",
-      "html_link": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css\" />",
-      "live_observed": true,
-      "role": "body + heading + CTA (exclusive — 100% of sampled elements)",
-      "observed_weights": [400, 700]
-    },
-    {
-      "family": "-apple-system",
-      "license": "system (macOS/iOS)",
-      "cdn_url": null,
-      "html_link": null,
-      "live_observed": false,
-      "role": "system fallback (#2 in stack)"
-    },
-    {
-      "family": "system-ui",
-      "license": "system",
-      "cdn_url": null,
-      "html_link": null,
-      "live_observed": false,
-      "role": "system fallback (#3 in stack)"
-    }
-  ],
-  "full_fallback_chain": "Pretendard, -apple-system, \"system-ui\", Roboto, \"Segoe UI\", Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
-}

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

@@ -1,55 +0,0 @@
-{
-  "captured_at": "2026-05-15T00:00:00Z",
-  "source_url": "https://www.tving.com (→ /onboarding)",
-  "viewport": "1280x713",
-  "hero": {
-    "type": "text-only (unauth onboarding) — full content surface gated behind login; authenticated surface presumed video-poster grid (industry-standard OTT pattern, not inspected in this pass)",
-    "has_carousel": false,
-    "primary_visual_position": "center",
-    "background_ornament": "none (flat #000 canvas)",
-    "headline_size_px": 43.4,
-    "headline_weight": 700,
-    "primary_cta_height_px": 62
-  },
-  "cta": {
-    "dominant_shape": "rounded-rectangle (not pill)",
-    "primary_radius_px_observed": 12.4,
-    "header_cta_radius_px": 8,
-    "secondary_style": "ghost / text-link in nav, no outlined variant observed in onboarding surface",
-    "color_role": "single brand red across all CTA variants — no secondary CTA color in unauth surface"
-  },
-  "nav": {
-    "structure": "minimal top bar (logo + 시작하기 CTA) on unauth onboarding; authenticated surface presumed to have GNB with --gnb-height: 70px (per CSS token)",
-    "approx_item_count_unauth": 2,
-    "footer_item_count": 7,
-    "footer_items": ["고객센터", "이용약관", "개인정보처리방침", "청소년 보호정책", "법적고지", "이벤트", "공지사항"],
-    "has_search": false,
-    "has_locale_switch": false
-  },
-  "page": {
-    "viewport_heights_unauth": 6.22,
-    "scroll_h_px": 4440,
-    "predominant_alignment": "center",
-    "image_density_unauth": "none (text-driven onboarding)",
-    "image_density_authenticated": "high (presumed — OTT poster grid)"
-  },
-  "section_rhythm": [
-    "top bar (logo + 시작하기)",
-    "hero headline + primary CTA",
-    "value props (text-based)",
-    "footer (정책 / 고객센터 / 이벤트 anchors)"
-  ],
-  "category_taxonomy_signal": {
-    "categories_encoded_as_css_vars": ["home", "live", "clip", "vod", "movie", "ad"],
-    "note": "Six-category content taxonomy is encoded directly as CSS custom properties (--color-cate-*) on :root — meaning category color is a first-class design system primitive, not a per-page override. Live/sports surfaces have additional geometry tokens (--kbo-player-*, --sports-player-*) suggesting dedicated layouts for KBO baseball and other live sports content."
-  },
-  "notes": [
-    "Unauthenticated visitors are redirected from / to /onboarding — full catalog browse is gated.",
-    "Pretendard exclusive: zero non-Pretendard sample observed.",
-    "Dark canvas is locked at html level (#000) — no theme-switch token observed.",
-    "Card radius pattern is top-corners-only (poster image bleeds to bottom edge), a streaming-platform idiom shared with Disney+ / Netflix / Wavve but distinct in TVING's 16.5292px radius (≈ 1rem * 1.033).",
-    "Live-streaming geometry primitives (--live-tab-player-*, --kbo-player-*, --sports-player-*) are first-class design tokens — TVING treats live as a separate surface paradigm from VOD.",
-    "Bottom tab present at 4.167rem (≈ 66.7px) per design token — mobile-first chrome.",
-    "Emotion CSS-in-JS (`css-*` class hashes) + Tailwind utilities (`--tw-*` token namespace) coexist; semantic shadcn-pattern role vars (`--card`, `--popover`, `--muted`, `--accent`) suggest a shadcn/ui base with Pretendard + brand red overlay."
-  ]
-}