oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/naverwebtoon/DESIGN.md

@@ -4,474 +4,251 @@ name: Naver Webtoon
 country: KR
 category: consumer-tech
 homepage: "https://comic.naver.com"
-primary_color: "#00DC64"
+primary_color: "#00dc64"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=comic.naver.com&sz=128"
-verified: "2026-05-27"
+verified: "2026-07-13"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: product-home, url: "https://comic.naver.com/index", inspected: "2026-07-13" }
+    - { id: webtoon-list, kind: product-browse, url: "https://comic.naver.com/webtoon", inspected: "2026-07-13" }
+    - { id: best-challenge, kind: product-creator-discovery, url: "https://comic.naver.com/bestChallenge", inspected: "2026-07-13" }
+  sources:
+    - { id: home-capture, kind: product-surface, url: "https://comic.naver.com/index", captured: "2026-07-13" }
+    - { id: webtoon-list-capture, kind: product-surface, url: "https://comic.naver.com/webtoon", captured: "2026-07-13" }
+    - { id: best-challenge-capture, kind: product-surface, url: "https://comic.naver.com/bestChallenge", captured: "2026-07-13" }
+    - { id: company-about, kind: official-doc, url: "https://about.webtoon.com/", captured: "2026-07-13" }
+    - { id: company-brands, kind: official-doc, url: "https://about.webtoon.com/our-brands?company=naverWebtoon", captured: "2026-07-13" }
+    - { id: font-design, kind: official-doc, url: "https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md", captured: "2026-07-13" }
+    - { id: font-license, kind: license, url: "https://github.com/orioncactus/pretendard/blob/main/LICENSE", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": &product { surface_id: home, source_id: home-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.surface": *product
+    "tokens.colors.foreground": *product
+    "tokens.colors.muted": *product
+    "tokens.colors.tag-surface": *product
+    "tokens.colors.on-primary": &webtoon { surface_id: webtoon-list, source_id: webtoon-list-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.typography.family.ui": *product
+    "tokens.typography.brand-title.size": *product
+    "tokens.typography.brand-title.weight": *product
+    "tokens.typography.brand-title.use": *product
+    "tokens.typography.section-title.size": *product
+    "tokens.typography.section-title.weight": *product
+    "tokens.typography.section-title.lineHeight": *product
+    "tokens.typography.section-title.use": *product
+    "tokens.typography.tab.size": *product
+    "tokens.typography.tab.weight": *product
+    "tokens.typography.tab.lineHeight": *product
+    "tokens.typography.tab.use": *product
+    "tokens.typography.tag.size": *product
+    "tokens.typography.tag.weight": *product
+    "tokens.typography.tag.lineHeight": *product
+    "tokens.typography.tag.use": *product
+    "tokens.rounded.square": *product
+    "tokens.rounded.compact": *product
+    "tokens.components.content-tab.type": *product
+    "tokens.components.content-tab.fg": *product
+    "tokens.components.content-tab.font": *product
+    "tokens.components.content-tab.states": *product
+    "tokens.components.content-tab.use": *product
+    "tokens.components.tag-link.type": *product
+    "tokens.components.tag-link.bg": *product
+    "tokens.components.tag-link.fg": *product
+    "tokens.components.tag-link.radius": *product
+    "tokens.components.tag-link.padding": *product
+    "tokens.components.tag-link.font": *product
+    "tokens.components.tag-link.use": *product
+    "tokens.components.pagination.type": &challenge { surface_id: best-challenge, source_id: best-challenge-capture, method: computed-style, captured: "2026-07-13" }
+    "tokens.components.pagination.fg": *challenge
+    "tokens.components.pagination.font": *challenge
+    "tokens.components.pagination.states": *challenge
+    "tokens.components.pagination.use": *challenge
 tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
+  source: reconciled
+  extracted: "2026-07-13"
+  note: "Selector-backed values are restricted to the supplied public comic.naver.com product capture. NAVER global-shell chrome and zero-use font declarations are not product-token substitutes."
   colors:
     primary: "#00dc64"
-    primary-hover: "#00c758"
-    brand: "#00dc64"
-    canvas: "#ffffff"
-    surface: "#f7f7f7"
-    foreground: "#1a1a1a"
-    body: "#666666"
-    muted: "#999999"
+    surface: "#ffffff"
+    foreground: "#000000"
+    muted: "#666666"
+    tag-surface: "#f6f6f6"
     on-primary: "#ffffff"
-    hairline: "#eeeeee"
-    border-strong: "#dddddd"
-    accent-like: "#ff4d6d"
-    accent-star: "#ffb300"
-    error: "#f5444c"
-    viewer-black: "#000000"
   typography:
-    family: { sans: "Pretendard", mono: "Pretendard" }
-    display:    { size: 28, weight: 700, lineHeight: 1.3, use: "Featured banner, event headers" }
-    section:    { size: 20, weight: 700, lineHeight: 1.35, use: "Row headers" }
-    title-card: { size: 16, weight: 600, lineHeight: 1.4, use: "Webtoon title under thumbnail" }
-    author:     { size: 13, weight: 400, lineHeight: 1.4, use: "Author name, genre line" }
-    body:       { size: 14, weight: 400, lineHeight: 1.6, use: "Synopsis, descriptions" }
-    label:      { size: 14, weight: 600, lineHeight: 1.4, use: "Buttons, day tabs" }
-    caption:    { size: 12, weight: 400, lineHeight: 1.4, use: "View/like counts, timestamps" }
-    rank:       { size: 22, weight: 700, use: "Chart rank, tabular" }
-  spacing: [4, 8, 12, 16, 20, 24, 32]
-  rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
-  shadow:
-    subtle: "0px 2px 8px rgba(0,0,0,0.06)"
-    floating: "0px 4px 12px rgba(0,0,0,0.12)"
-    toast: "0px 4px 12px rgba(0,0,0,0.16)"
-  components_harvested: true
+    family: { ui: "Pretendard" }
+    brand-title: { size: 24, weight: 700, use: "Product header wordmark area" }
+    section-title: { size: 20, weight: 600, lineHeight: 1.05, use: "Product-home section heading" }
+    tab: { size: 15, weight: 500, lineHeight: 1.40, use: "Product content tab" }
+    tag: { size: 14, weight: 500, lineHeight: 2.14, use: "Product-home tag link" }
+  rounded: { square: 0, compact: 4 }
   components:
-    button-primary: { type: button, bg: "#00dc64", fg: "#ffffff", radius: "8px", padding: "10px 18px", font: "14px / 600", states: "hover #00c758, disabled bg #eeeeee fg #bbbbbb", use: "Primary read CTA" }
-    button-outline: { type: button, bg: "#ffffff", fg: "#333333", border: "1px solid #dddddd", radius: "8px", padding: "10px 18px", font: "14px / 600", use: "Secondary action" }
-    button-subscribe: { type: button, bg: "rgba(0,220,100,0.10)", fg: "#00c758", radius: "8px", padding: "10px 18px", font: "14px / 600", use: "관심웹툰 subscribe toggle, green-tinted when active" }
-    input-search: { type: input, bg: "#f7f7f7", fg: "#333333", radius: "8px", padding: "12px 14px", font: "14px / 400", focus: "1px border #00dc64", use: "Title/author search" }
-    card-thumbnail: { type: card, bg: "transparent", radius: "8px", states: "hover scale 1.03 + title emphasis", use: "Webtoon thumbnail card, art is the card" }
-    card-info: { type: card, bg: "#ffffff", radius: "12px", padding: "20px", shadow: "0px 2px 8px rgba(0,0,0,0.06)", use: "Title-detail header" }
-    badge-up: { type: badge, bg: "#00dc64", fg: "#ffffff", radius: "4px", padding: "1px 5px", font: "11px / 700", use: "UP / new-episode flag, the green ritual" }
-    chip: { type: badge, bg: "#f7f7f7", fg: "#666666", radius: "999px", padding: "6px 14px", font: "13px / 500", active: "bg #00dc64, fg #ffffff", use: "요일별 day tabs, genre filters" }
-    badge-rating: { type: badge, bg: "transparent", fg: "#ffb300", font: "12px / 700", use: "별점 average beside a star" }
-    tab: { type: tab, fg: "#999999", font: "15px / 600", active: "fg #00dc64, 2px #00dc64 underline", use: "Day-of-week tab" }
-    toast: { type: toast, bg: "#1a1a1a", fg: "#ffffff", radius: "8px", padding: "12px 16px", shadow: "0px 4px 12px rgba(0,0,0,0.16)", font: "14px / 500", use: "Transient feedback, 3s auto-dismiss" }
+    content-tab: { type: tab, fg: "#00dc64", font: "15px / 500 Pretendard", states: "unselected #666666; selected #00dc64 via captured tab interaction", use: "Product content tabs, selectors home::[data-omd-capture=16] and home::[data-omd-capture=17]" }
+    tag-link: { type: badge, bg: "#f6f6f6", fg: "#666666", radius: "4px", padding: "0px 10px", font: "14px / 500 Pretendard", use: "Product-home tag link, selector home::[data-omd-capture=64]" }
+    pagination: { type: button, fg: "#00dc64", font: "14px / 500 Pretendard", states: "static disabled previous control observed separately with #000000; no general disabled rule", use: "Best Challenge selected page, selector surface-3::[data-omd-capture=133]" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Naver Webtoon (네이버웹툰)
 
 ## 1. Visual Theme & Atmosphere
 
-Naver Webtoon is the platform that invented the format — the vertical-scroll, mobile-native comic ("webtoon") that turned Korean digital comics into a global medium. Its interface exists to do one thing supremely well: get out of the way so a thumbnail grid of cover art can pull you into the next binge. The browse experience is bright and clean — predominantly white surfaces with crisp black-and-gray text — punctuated by the unmistakable **Webtoon green `#00DC64`** ("WT GREEN"), a fresh, almost electric grass-green that marks brand moments, the logo, primary CTAs, and "UP"/new-episode signals. This green is the brand's whole personality: young, energetic, optimistic — the color of "something new just dropped."
-
-What defines Webtoon visually is **the grid is the design**. Cover thumbnails — vivid, illustrated, every genre and art style imaginable — are the source of color and energy; the chrome around them is deliberately calm so the art screams and the UI whispers. Ranking numbers, genre chips, day-of-week tabs (요일별), and "UP" badges form a tight, scannable information layer over a white canvas. When you actually read, the viewer flips to a focused, distraction-free vertical scroll where the strip itself fills the screen. Two modes, one identity: a buzzy discovery grid and a quiet reading canvas.
+NAVER WEBTOON is WEBTOON Entertainment's Korean webcomic platform. The company describes it as Korea's largest webcomic platform, launched in 2005 to let both emerging and established creators build an audience and earn from webcomics; its BEST CHALLENGE route is the self-publishing path for up-and-coming creators. In the supplied public capture, that creator-and-reader service is expressed with a compact white product shell, black text, a bright green creator entry, and image/content-led browsing rather than a marketing campaign system.
 
-Typography is Korean-system-led — Naver's own typefaces and the standard Korean web/app stack (**Pretendard**, Apple SD Gothic Neo, Malgun Gothic, with Nanum lineage), rendered black-on-white with green accents. Type is friendly and rounded in feel, sentence-case, optimized for fast scanning of dozens of titles and for long-form reading comfort in the viewer.
-
-**Key Characteristics:**
-- Webtoon green `#00DC64` ("WT GREEN") as the brand + primary interactive accent — logo, CTAs, "UP" / new badges
-- Bright white canvas with black/gray text — chrome whispers so cover art screams
-- Thumbnail-grid-first discovery; focused vertical-scroll reading viewer
-- Naver / Pretendard-led Korean type stack, black-on-white with green accents
-- Day-of-week (요일별) tabs and ranking numbers as a core scannable info layer
-- Young, energetic, optimistic tone — "something new just dropped"
-- "UP" badge culture: the green new-episode signal is a brand ritual
+The captured product surfaces share a short, practical visual vocabulary: white `#FFFFFF`, black `#000000`, muted `#666666`, pale tag fills `#F6F6F6`, and green `#00DC64` on a creator entry, selected tabs, selected pagination, and a browse heading. This is a record of the current captured routes—not a claim that every NAVER, WEBTOON Entertainment, mobile, reader, payment, or logged-in surface follows the same contract. NAVER account/service utility chrome appears in the artifact as a separate inherited shell and is not promoted into these product tokens.
 
 ## 2. Color Palette & Roles
 
-Webtoon green `#00DC64` is the documented "WT GREEN" brand color (RGB 0,220,100). comic.naver.com is bot-protected (WebFetch blocked), so product grays/blacks below follow Naver web conventions and the documented brand palette; treat product hexes as conventional, not from a live-inspected token doc.
-
-### Brand / Interactive
-- **WT Green** (`#00DC64`): The signature color (RGB 0, 220, 100). Logo, primary CTA, "UP"/new-episode badge, active selection, brand moments. The single energetic accent.
-- **WT Green Deep** (`#00C758`): Pressed / hover variant of the green.
-- **WT Green Light** (`rgba(0,220,100,0.10)`): Subtle green-tinted highlight backgrounds.
+- **Product green** (`#00DC64`): Observed on the creator-entry button, selected content tabs, selected pagination, and a weekday browse heading.
+- **Surface white** (`#FFFFFF`): Observed header-search background and the text on the captured green weekday heading.
+- **Foreground black** (`#000000`): Observed search text, product headings, and creator-entry text.
+- **Muted gray** (`#666666`): Observed unselected content-tab text and tag-link text.
+- **Tag surface** (`#F6F6F6`): Observed tag-link background on the product home.
 
-### Surfaces
-- **Pure White** (`#FFFFFF`): Browse canvas, cards, headers — the bright base behind the grid.
-- **Surface Gray** (`#F7F7F7`): Section backgrounds, inactive chip fills, skeleton blocks.
-- **Surface Gray Strong** (`#EEEEEE`): Secondary fills, dividers' surface variant.
-- **Viewer Black** (`#000000`): The reading-viewer background option (dark reading mode) so the strip art is the only light.
+No hover color, error color, dark reader surface, shadow ladder, or universal brand palette is promoted because it was not established by the supplied product capture.
 
-### Text
-- **Text Primary** (`#1A1A1A`): Titles, author names, primary labels.
-- **Text Strong** (`#333333`): Strong body labels, episode titles.
-- **Text Body** (`#666666`): Body text, synopsis, metadata.
-- **Text Secondary** (`#999999`): Captions, view/like counts, timestamps.
-- **Text Tertiary** (`#BBBBBB`): Placeholder, disabled labels.
+## 3. Typography Rules
 
-### Borders
-- **Divider** (`#EEEEEE`): Hairline row/grid separators.
-- **Border Strong** (`#DDDDDD`): Active input outlines, emphasized edges.
+### Font evidence classes
 
-### Semantic
-- **New / UP** (`#00DC64`): The green doubles as the "new episode / UP" semantic.
-- **Like / Heart** (`#FF4D6D`): Favorite/like heart — a warm pink-red, distinct from brand green.
-- **Rating / Star** (`#FFB300`): Star ratings (별점) accent.
-- **Error** (`#F5444C`): Form errors, failures.
+- **Live product computed use:** `Pretendard` is the computed family on 1,371 captured elements across the three product routes. The collector reports a high-confidence loaded FontFaceSet match, so it is the sole `tokens.typography.family.ui` family.
+- **Declared-only font asset:** `Pretendard Variable` has 92 captured `@font-face` source URLs but zero visible computed uses. It remains a declared asset, not a substituted UI-family token.
+- **Declared-only faces:** `hind`, `NanumBarunGothic`, `NanumSquare`, and `Volte` have zero visible uses in this artifact. They remain declared-only.
+- **Unresolved shell family:** `나눔고딕` occurs in 12 global NAVER utility-shell observations but has no matching loaded FontFace in the artifact. It remains unresolved and is excluded from the product family token.
+- **Upstream asset and licence:** Pretendard's upstream README describes its cross-platform, multilingual family and variable distribution. Its upstream LICENSE is SIL Open Font License 1.1. These sources explain the font asset; the product-use conclusion comes from computed use plus the loaded FontFaceSet match above.
 
-## 3. Typography Rules
+### Observed hierarchy
 
-### Font Family
-- **Primary**: `Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Nanum Gothic", sans-serif`
-- **Brand surfaces**: Naver's house typefaces appear in marketing/logo lockups
-- **Numerals**: tabular-friendly for ranking numbers and view/like counts
-
-### Hierarchy
-
-| Role | Size | Weight | Line Height | Use |
-|------|------|--------|-------------|-----|
-| Display Hero | 28–32px | 700 | 1.3 | Featured banner, event headers |
-| Section Heading | 20–22px | 700 | 1.35 | Row headers (오늘의 신작, 인기 급상승) |
-| Title Card | 15–16px | 600 | 1.4 | Webtoon title under thumbnail |
-| Author / Sub | 13px | 400 | 1.4 | Author name, genre line |
-| Body | 14px | 400 | 1.6 | Synopsis, descriptions (looser LH for reading) |
-| Label / CTA | 14px | 600 | 1.4 | Buttons, day tabs |
-| Caption | 12px | 400 | 1.4 | View/like counts, timestamps |
-| Ranking Number | 18–22px | 700 | tight | Chart rank — tabular |
-
-### Conventions
-- **700 for headings + ranks, 600 for titles/CTAs, 400 for body** — a clean three-weight rhythm.
-- **Numbers are content** — ranking positions, episode numbers, view counts, ratings are first-class typography, tabular-aligned.
-- **Looser line-height for reading** — synopsis and viewer captions use ~1.6 LH for long-form comfort.
-- **Sentence-case, no all-caps** — Korean and Latin both; the grid stays friendly, not shouty.
+| Role | Size | Weight | Line height | Captured use |
+|---|---:|---:|---:|---|
+| Header wordmark area | 24px | 700 | normal | `home::h1` |
+| Section title | 20px | 600 | 21px | `ComponentHead__title` on product home |
+| Content tab | 15px | 500 | 21px | selected and unselected `ComponentHead__button_tab` |
+| Tag link | 14px | 500 | 30px | `TagGroup__tag` on product home |
 
 ## 4. Component Stylings
 
-comic.naver.com blocks automated fetch; geometry below follows Naver web conventions + the documented WT GREEN brand. Treat as conventional, not live-inspected tokens.
+### Header search
 
-### Buttons
-
-**Primary (WT Green)**
-- Background: `#00DC64`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 10px 18px
-- Font: 14px / 600 / Pretendard
-- Hover: background `#00C758`
-- Disabled: background `#EEEEEE`, text `#BBBBBB`
-- Use: Primary CTA — 첫화 보기, 구독하기, 정주행. The green call-to-read.
-
-**Outline / Secondary**
+**Default**
 - Background: `#FFFFFF`
-- Text: `#333333`
-- Border: 1px solid `#DDDDDD`
-- Radius: 8px
-- Padding: 10px 18px
-- Font: 14px / 600 / Pretendard
-- Use: Secondary action (관심 등록, 미리보기)
-
-**Subscribe / Toggle CTA**
-- Background (subscribed): `rgba(0,220,100,0.10)`
-- Text (subscribed): `#00C758`
-- Border: none
-- Radius: 8px
-- Padding: 10px 18px
-- Font: 14px / 600 / Pretendard
-- Use: 관심웹툰 subscribe toggle — fills green-tinted once active
-
-### Inputs
-
-**Search Field**
-- Background: `#F7F7F7`
-- Text: `#333333`
-- Border: none (filled)
-- Radius: 8px
-- Padding: 12px 14px
-- Font: 14px / 400 / Pretendard
-- Placeholder: `#BBBBBB`
-- Focus: 1px border `#00DC64`
-- Use: Title/author search — green focus ring
-
-### Cards
-
-**Webtoon Thumbnail Card**
-- Background: transparent (cover art fills)
-- Border: none
-- Radius: 8px (cover), `50%` for character/round thumbs
-- Aspect: vertical poster (commonly ~3:4) or square in some rows
-- Hover: subtle scale ~1.03 + title emphasis
-- Use: The atomic unit of every browse row/grid — the art is the card, chrome stays off it
-
-**Info Card (title detail header)**
-- Background: `#FFFFFF`
-- Border: none
-- Radius: 12px
-- Padding: 20px
-- Shadow: `0px 2px 8px rgba(0,0,0,0.06)`
-- Use: Title-detail header — cover, title, author, genre, rating, 구독 CTA
+- Text: `#000000`
+- Radius: `0px`
+- Padding: `0px 65px 0px 10px`
+- Font: `14px / 400 Pretendard`
+- Use: Product-home header search input; `home::[data-omd-capture="4"]`.
 
-### Badges / Chips
+### Creator entry
 
-**UP / New Badge**
+**Default**
 - Background: `#00DC64`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 4px
-- Padding: 1px 5px
-- Font: 11px / 700 / Pretendard
-- Use: The signature "UP" / new-episode flag on thumbnails — the green ritual
-
-**Genre / Day Chip**
-- Background: `#F7F7F7`
+- Text: `#000000`
+- Radius: `4px`
+- Padding: `11px 33px`
+- Font: `12px / 400 Pretendard`
+- Use: Product global-navigation creator entry; `home::[data-omd-capture="14"]`.
+
+### Content tab
+
+**Default**
 - Text: `#666666`
-- Border: none
-- Radius: 999px
-- Padding: 6px 14px
-- Font: 13px / 500 / Pretendard
-- Active: `#00DC64` bg + `#FFFFFF` text
-- Use: 요일별 day tabs, genre filters
-
-**Rating Badge**
-- Background: transparent
-- Text: `#FFB300`
-- Font: 12px / 700 / Pretendard
-- Use: 별점 average beside a star
-
-### Tabs / Nav
-
-**Day-of-Week Tab (요일별)**
-- Active text: `#00DC64`
-- Inactive text: `#999999`
-- Indicator: 2px `#00DC64` underline (active)
-- Font: 15px / 600 / Pretendard
-- Use: 월/화/수/목/금/토/일 + 완결 switcher — the core browse organizer
-
-**Bottom Tab (Active)**
-- Active icon/text: `#1A1A1A` (with green accent on the primary tab)
-- Inactive: `#BBBBBB`
-- Border: 1px solid `#EEEEEE` (top only)
-- Font: 11px / 500 / Pretendard
-- Use: 웹툰 / 베스트도전 / MY / etc.
-
-### Toasts
-
-**Snackbar**
-- Background: `#1A1A1A`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 12px 16px
-- Shadow: `0px 4px 12px rgba(0,0,0,0.16)`
-- Font: 14px / 500 / Pretendard
-- Use: "관심웹툰에 추가했어요" transient feedback, 3s auto-dismiss
+- Font: `15px / 500 Pretendard`
+- Use: Unselected product content tab; `home::[data-omd-capture="16"]`.
+- Selected: Text `#00DC64`; observed at `home::[data-omd-capture="17"]` and in the captured tab interaction.
 
----
+### Tag link
 
-**Verified:** 2026-05-27
-**Tier 1 sources:** comic.naver.com (WebFetch blocked — bot-protected; visual atmosphere from prior knowledge + brand search). WT GREEN `#00DC64` (RGB 0,220,100) confirmed via brand search (logos-world / 1000logos brand-palette records + WEBTOON Canvas logo guidelines lineage). Product grays/blacks/component geometry follow Naver web conventions — not live-inspected tokens.
-**Tier 2 sources:** getdesign.md/naverwebtoon — not checked. styles.refero.design — not checked.
-**Conflicts unresolved:** Live computed-style inspection unavailable (comic.naver.com blocks automated fetch). All §4 component values flagged conventional; WT GREEN `#00DC64` is the one verified token. A future UPDATE pass with browser inspection should re-confirm component geometry.
+**Default**
+- Background: `#F6F6F6`
+- Text: `#666666`
+- Radius: `4px`
+- Padding: `0px 10px`
+- Font: `14px / 500 Pretendard`
+- Use: Product-home tag link; `home::[data-omd-capture="64"]`.
 
-## 5. Layout Principles
+The same class also appears at 16px/500/37px on the home route. That is an observed route-local size record, not a generalized size scale.
 
-### Spacing System
-- Base unit: 8px
-- Common values: 4, 8, 12, 16, 20, 24, 32
-- Grid gutter: ~12px between thumbnails; ~24px between content rows
+### Pagination
 
-### Grid & Container
-- Browse: responsive thumbnail grid — 3–4 cols mobile, 6+ desktop, within a max content width (~1200px)
-- Day-tabs row sticky near the top organizing the whole browse
-- Viewer: single-column full-width vertical scroll, the strip fills the reading width
+**Selected page**
+- Text: `#00DC64`
+- Font: `14px / 500 Pretendard`
+- Use: Best Challenge selected page; `surface-3::[data-omd-capture="133"]`.
+- Disabled: A disabled previous control is statically observed at `surface-3::[data-omd-capture="132"]` with `#000000`; no reusable disabled treatment is inferred from that single observation.
 
-### Whitespace Philosophy
-- **The grid is the design.** Chrome (tabs, ranks, chips) is calm and compact so cover art carries the color and energy.
-- **Two densities.** Discovery is tight and scannable (many titles per screen); the reading viewer is spacious and focused (one strip, nothing else).
-- **Scannable info layer.** Ranking numbers, UP badges, and day tabs form a consistent, low-chrome overlay on the art.
+Only tab selection has interaction provenance in the supplied bundle (`interactionCount: 7`). No hover, pressed, focus, menu, dialog, error, toast, responsive, card, thumbnail, reading-viewer, or checkout variant is asserted.
 
-### Border Radius Scale
-- Compact (4px): UP/new badges, inline flags
-- Standard (8px): buttons, inputs, thumbnail cards
-- Comfortable (12px): info cards, detail headers
-- Pill (999px): genre/day chips
-- Circle (50%): character/round thumbnails, avatars
+---
+**Verified:** 2026-07-13
+**Tier 1 sources:** `https://comic.naver.com/index` (product home), `https://comic.naver.com/webtoon` (product browse), `https://comic.naver.com/bestChallenge` (product creator discovery), `https://about.webtoon.com/` and `https://about.webtoon.com/our-brands?company=naverWebtoon` (official company and service context), `https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md` (upstream font distribution/design), `https://github.com/orioncactus/pretendard/blob/main/LICENSE` (upstream font licence)
+**Tier 2 sources:** `https://getdesign.md/naverwebtoon` (attempted; built-in web open safe-open failure and no search record), `https://styles.refero.design/?q=naver%20webtoon` (attempted; built-in web open safe-open failure and no search record)
+**Conflicts unresolved:** none
 
-## 6. Depth & Elevation
+The legacy prose-derived token sheet, hover/pressed/focus treatments, reader and payment states, logo-color assertions, shadow ladder, universal spacing/radius rules, and unobserved component variants were removed because the supplied 2026 capture does not substantiate them.
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (0) | No shadow | Browse grid, thumbnails (the gutter separates them) |
-| Subtle (1) | `0px 2px 8px rgba(0,0,0,0.06)` | Info cards, detail headers |
-| Floating (2) | `0px 4px 12px rgba(0,0,0,0.12)` | Dropdowns, sticky tab bar on scroll |
-| Toast (3) | `0px 4px 12px rgba(0,0,0,0.16)` | Snackbars |
+## 5. Layout Principles
 
-**Shadow philosophy.** On the bright white grid, shadows are minimal — thumbnails are separated by the gutter, not by drop shadows, so the art reads edge-to-edge. Elevation appears only where chrome floats (sticky tabs, dropdowns, toasts). Soft, neutral, single-layer. In the dark reading viewer, depth (if any) comes from surface lightness, not shadow.
+The capture establishes a 1440×900 view of three public product routes, not a responsive layout system. Observed geometry includes a 35px header search input, a 39px creator entry, 21px content tabs, 30px and 37px tag links, and a 45px green weekday heading. It does not establish breakpoints, a reusable grid, poster aspect ratios, sticky behavior, or reader layout rules.
+
+## 6. Depth & Elevation
+
+The documented search, creator entry, tabs, tags, weekday heading, and pagination samples all report `box-shadow: none`. No elevation token is promoted.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use WT Green `#00DC64` for the logo, primary CTA, UP badge, and active selection
-- Keep the browse canvas white and let cover art supply the color
-- Render ranking numbers, episode numbers, and counts as first-class tabular typography
-- Use the UP badge (green, 4px radius) consistently as the new-episode signal
-- Give the reading viewer maximum focus — strip fills the screen, chrome hides
 
-### Don't
-- Don't put drop shadows or borders on thumbnail cards — the gutter separates them
-- Don't introduce a second saturated accent competing with the green
-- Don't crowd the reading viewer with chrome — reading is a focused mode
-- Don't use all-caps or marketing-shouty type on the grid
-- Don't tint the browse canvas — white keeps the cover art vivid
+- Reuse only the selector-backed white, black, gray, and green treatments documented above when recreating these specific public-route patterns.
+- Preserve the selected/unselected tab color split only in contexts with the captured tab semantics.
+- Keep `Pretendard` as the product UI family only where a compatible loaded-font path is available.
 
-## 8. Responsive Behavior
+### Don't
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile (Primary) | <768px | 3–4 thumbnails per row, bottom tab nav, swipeable day tabs |
-| Tablet | 768–1024px | 4–5 per row, condensed top nav |
-| Desktop (Web) | >1024px | 6+ per row, full top nav, max ~1200px content |
+- Don't treat the inherited NAVER utility shell as a NAVER WEBTOON product-token source.
+- Don't substitute `Pretendard Variable`, `NanumSquare`, or another declared font for the verified computed `Pretendard` family.
+- Don't infer card, reader, payment, hover, focus, error, or responsive contracts from this three-route capture.
 
-### Touch & Media
-- Thumbnail is the primary touch target; min ~44px controls
-- Day-of-week tabs swipeable on mobile
-- Reading viewer: vertical scroll, tap-zones for UI toggle, full-bleed strip
+## 8. Responsive Behavior
 
-### Image Behavior
-- Cover thumbnails: `object-fit: cover`, lazy-loaded, 8px radius
-- Reading strip: full reading-width, native aspect, sequential vertical
-- Character/round thumbs: 50% circle
+No responsive viewport comparison was supplied. The reference makes no breakpoint, touch-target, image-ratio, or mobile-reader assertion.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA / brand / UP: WT Green `#00DC64` (hover `#00C758`)
-- Canvas: white `#FFFFFF`; surface `#F7F7F7`; viewer black `#000000`
-- Text: primary `#1A1A1A`; body `#666666`; secondary `#999999`
-- Divider `#EEEEEE`; like/heart `#FF4D6D`; rating `#FFB300`
-
-### Example Component Prompts
-- "Build a Webtoon primary CTA: bg `#00DC64`, white 14px/600 text, 8px radius, 10px 18px padding. Hover bg `#00C758`. Disabled bg `#EEEEEE` text `#BBBBBB`."
-- "Create a Webtoon browse grid: white `#FFFFFF` bg, responsive grid of vertical cover cards (8px radius, no border, ~12px gutter). Each card: cover image + a green UP badge (`#00DC64`, 4px radius, 11px/700 white, '\''UP'\'') top-left when new + title (15px/600 `#1A1A1A`) + author (13px/400 `#999999`) below."
-- "Design a day-of-week tab row: 월~일 + 완결, active text `#00DC64` with a 2px `#00DC64` underline, inactive `#999999`, 15px/600, swipeable."
-- "Create a title-detail header card: white bg, 12px radius, `0px 2px 8px rgba(0,0,0,0.06)` shadow, 20px padding. Cover thumb left, title 20px/700, author 13px/400 `#999999`, rating `#FFB300` star + number, green 구독 CTA."
-
-### Iteration Guide
-1. WT Green `#00DC64` = logo + primary CTA + UP badge + active state
-2. White canvas; cover art carries the color and energy
-3. Pretendard / Korean system stack, black-on-white with green accents
-4. Numbers (rank/episode/count) are tabular first-class typography
-5. Radius: 4px UP badge, 8px buttons/cards, 12px info cards, 999px chips, 50% round thumbs
-6. Two densities: tight discovery grid, focused reading viewer
-
----
+For a captured content-tab pattern, use `15px / 500 Pretendard`, `#666666` unselected text, and `#00DC64` selected text; retain the state only where tab-selection behavior exists. For the captured header search, use a white, square-cornered 35px field with `0px 65px 0px 10px` padding and `14px / 400 Pretendard`. Do not extend these snippets into a generic WEBTOON app system.
 
 ## 10. Voice & Tone
 
-Naver Webtoon speaks like an excited friend who can't wait to show you the next great series — warm, upbeat, second-person, and a little playful, but never spammy. The default register is soft-polite `해요체` (`새 회차가 올라왔어요`, `관심웹툰에 추가했어요`), friendly and young. Korean is the unquestioned primary voice; English appears in title romanizations and the "WEBTOON" wordmark. The energy maps to the green: copy is about *what's new*, *what's hot*, *what you'll love next* — the buzz of discovery.
-
-| Context | Tone |
-|---|---|
-| CTAs | Short Korean verb (`첫화 보기`, `정주행`, `구독하기`, `미리보기`). |
-| New-content nudges | Upbeat, second person (`기다리던 새 회차가 올라왔어요`). |
-| Success toasts | Past-tense single sentence, soft ending (`관심웹툰에 추가했어요`). No emoji on system chrome. |
-| Error messages | Blameless, specific, one action (`잠시 후 다시 시도해 주세요`). Never `오류가 발생했습니다`. |
-| Empty states | Warm + one action (`아직 관심웹툰이 없어요. 마음에 드는 작품을 추가해 보세요`). |
-| Recommendation rows | Energetic, taste-led (`이런 작품 어때요?`, `요즘 뜨는 작품`). |
-| Legal / payment (쿠키/대여) | Formal `합니다` register — the single exception. |
-
-**Forbidden phrases.** `오류가 발생했습니다` (generic error), exclamation-as-pressure stacking, marketing superlatives piled on chrome, English-first strings on Korean surfaces, emoji on system-generated toasts (emoji belongs to user comments, not UI chrome).
-
-**Voice samples.**
-- `첫화 보기` — common read-CTA pattern. <!-- illustrative: follows Naver Webtoon's standard read CTA; comic.naver.com blocks automated verification -->
-- `새 회차가 올라왔어요` — illustrative new-episode nudge. <!-- illustrative: follows the UP/new-episode ritual; not verified verbatim -->
-- `관심웹툰에 추가했어요` — illustrative subscribe-success toast. <!-- illustrative: not verified as live copy -->
-- `요즘 뜨는 작품` — illustrative trending-row header. <!-- illustrative: not verified verbatim -->
+The supplied evidence contains Korean product labels but no official voice guide or verified product-copy inventory. No reusable tone rule, do/don't table, or sample copy is asserted.
 
 ## 11. Brand Narrative
 
-Naver Webtoon (네이버웹툰) launched in **2004** inside the Naver portal and effectively *created the modern webtoon* — the vertical-scroll, mobile-native digital comic read top-to-bottom rather than page-by-page. By building a free, ad/IP-supported platform open to amateur creators (베스트도전 → 도전만화 → 정식 연재), it turned reading comics into a daily habit organized around the 요일별 (day-of-week) release schedule, and turned drawing them into a viable career. The format became a global export; the company (now WEBTOON / Webtoon Entertainment) took the model worldwide and to a US listing.
-
-The design follows the mission directly: a bright, friendly, low-friction grid that makes *discovering and following* series effortless, and a focused viewer that makes *reading* them comfortable. The WT GREEN `#00DC64` is the emotional core — fresh, young, optimistic — the color of the "UP" badge that says a new episode of the series you love just dropped. That little green flag is a genuine brand ritual: a daily dopamine signal that keeps a generation coming back.
-
-What Naver Webtoon refuses: the dense, text-heavy seriousness of legacy comic portals, and the dark, cinematic moodiness of video-OTT browse (Webtoon's discovery canvas is bright and buzzy, not a dim lobby). It's a friendly newsstand where the covers do the selling and the green means "new."
+WEBTOON Entertainment describes NAVER WEBTOON as Korea's largest webcomic platform. Its official brands page says it launched in 2005 and enables new and established creators to build an audience and make money from webcomics; it distinguishes BEST CHALLENGE as the self-publishing path for emerging creators. The official company site frames the wider organization as a story-oriented entertainment service and a platform where creators and users discover, create, and share stories. These are service and company facts, not proof of a visual or interaction system beyond the captured routes.
 
 ## 12. Principles
 
-1. **The grid is the design.** Cover art carries the color and energy; chrome whispers. *UI implication:* no borders/shadows on thumbnails; calm, compact tabs/ranks/chips over a white canvas.
-2. **Green means new.** `#00DC64` is the brand and the UP/new-episode signal. *UI implication:* reserve green for the logo, primary CTA, UP badge, and active state — never decoration.
-3. **Two modes, one identity.** Buzzy discovery and quiet reading are distinct densities. *UI implication:* the browse grid is tight and scannable; the reading viewer hides chrome and gives the strip the screen.
-4. **Numbers are content.** Ranks, episode numbers, and counts are first-class. *UI implication:* render them as tabular, high-emphasis typography, not afterthoughts.
-5. **Friendly, never shouty.** The brand is young and warm, not aggressive marketing. *UI implication:* sentence-case, soft `해요체`, no all-caps or exclamation pressure on the grid.
-6. **Daily ritual.** The 요일별 schedule and the UP badge make Webtoon a habit. *UI implication:* surface "what's new for you today" prominently; the green flag is the reward loop.
+1. **Creator participation.** Official material says the service gives new and established creators ways to build an audience and make money. *UI implication:* the captured global product navigation includes a green creator entry; no broader creator-flow pattern is inferred.
+2. **Discovery, creation, and sharing.** WEBTOON Entertainment describes its platform around those three participant activities. *UI implication:* no unmeasured navigation, recommendation, or sharing pattern is prescribed here.
+3. **Emerging-creator publishing.** The official brands page identifies BEST CHALLENGE as the self-publishing path for up-and-coming creators. *UI implication:* the captured Best Challenge route is retained as a distinct product surface rather than generalized to reader browsing.
 
 ## 13. Personas
 
-*Personas are fictional archetypes informed by publicly described Korean webtoon-reader segments, not individual people.*
-
-**다은 (Da-eun), 19, Seoul.** University freshman, reads 8 series across the week, each on its release day. Lives for the green UP badge — checks the app the moment a new episode is due. Reads on the subway in the focused vertical viewer; comments and shares with friends.
-
-**준호 (Jun-ho), 27, Daejeon.** Office worker and casual reader. Binges completed (완결) series on weekends, spends 쿠키 to unlock ahead. Discovers via the trending and recommendation rows, judges by cover art and rating number first.
-
-**소민 (So-min), 23, Busan.** Aspiring creator. Posts to 베스트도전 hoping to go pro, reads obsessively to study what works. Treats the platform as both library and career ladder — the open creator pipeline is why she's here.
+This reference does not invent demographic personas. The official context identifies three stakeholder groups: readers/users who discover stories, new and established webcomic creators who build audiences and monetize work, and emerging self-publishers using BEST CHALLENGE. No motivations, demographics, or task flows beyond those official descriptions are asserted.
 
 ## 14. States
 
-| State | Treatment |
+| State | Captured treatment |
 |---|---|
-| **Empty (no subscriptions)** | Single `#999999` warm line (`아직 관심웹툰이 없어요`) + one green CTA (`작품 둘러보기`). No clutter on white. |
-| **Empty (search no results)** | Single `#999999` caption (`검색 결과가 없어요`). No spammy suggestions. |
-| **Loading (grid first paint)** | Thumbnail-shaped skeleton blocks at `#F7F7F7` with a subtle shimmer toward `#EEEEEE`, layout-matched. |
-| **Loading (viewer)** | Centered spinner in `#00DC64` over the dim viewer; each panel lazy-loads as you scroll. |
-| **Error (load failed)** | Centered `#1A1A1A` line (`불러올 수 없어요. 잠시 후 다시 시도해 주세요`) + green retry. |
-| **Error (inline field)** | Input border `#F5444C`, caption below `#F5444C` 12px, one actionable sentence. |
-| **Success (subscribed)** | Snackbar `#1A1A1A` white text (`관심웹툰에 추가했어요`), 3s; subscribe CTA fills green-tinted. |
-| **Success (cookie purchased)** | Confirmation surface — green checkmark, balance, single `확인`. |
-| **Skeleton** | `#F7F7F7` blocks at exact thumbnail dimensions, 8px radius, ~1.2s shimmer to `#EEEEEE`. |
-| **Disabled (CTA)** | Green button → bg `#EEEEEE`, text `#BBBBBB`. Geometry unchanged. |
+| Content tab, unselected | `#666666`, 15px/500, `home::[data-omd-capture="16"]` |
+| Content tab, selected | `#00DC64`, 15px/500, `home::[data-omd-capture="17"]`; tab interaction provenance exists |
+| Pagination, selected page | `#00DC64`, 14px/500, `surface-3::[data-omd-capture="133"]` |
+| Pagination, disabled previous | Statically disabled with `#000000`, 14px/500, `surface-3::[data-omd-capture="132"]`; not a generalized disabled rule |
+
+No loading, empty, success, error, toast, skeleton, focus, hover, or pressed state was captured for promotion.
 
 ## 15. Motion & Easing
 
-Naver Webtoon's motion is light and energetic in discovery, calm and uninterrupted in reading — never bouncy enough to feel like a toy, never so still it feels dull.
-
-**Durations:**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Toggle flips, UP badge appear |
-| `motion-fast` | 150ms | Hover lift, chip select, button press |
-| `motion-standard` | 250ms | Thumbnail hover scale, tab switch, sheet open |
-| `motion-slow` | 400ms | Banner crossfade, page-to-detail transition |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Default — most motion |
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Modals, sheets, toasts appearing |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-| `ease-pop` | `cubic-bezier(0.34, 1.4, 0.64, 1)` | Reserved — UP/new-badge appearance only |
-
-**Signature motions.**
-1. **Thumbnail hover.** Cover scales `1.0 → 1.03` over `motion-standard / ease-standard` with a subtle title emphasis. No shadow pulse — the scale is the lift.
-2. **UP badge pop.** When a new episode lands, the green UP badge appears with a brief 1.1 scale-pop (`ease-pop`) — the one licensed bit of bounce, because "new episode" deserves a tiny celebration.
-3. **Reading scroll.** The viewer is pure native vertical scroll — no parallax, no transition gimmicks; chrome fades out on scroll-down, back in on tap. Reading must never be interrupted by motion.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, hover scales and the UP pop collapse to instant opacity changes; shimmer skeletons become static `#F7F7F7`. No exceptions.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Tier 1 (UI tokens, §1–9): comic.naver.com WebFetch BLOCKED (bot-protected) on
-2026-05-27 — no live computed-style inspection was possible. WT GREEN `#00DC64`
-(RGB 0,220,100) confirmed via brand search (logos-world.net / 1000logos.net
-Webtoon brand-color records + WEBTOON Canvas logo guidelines lineage). All §4
-component values and product grays/blacks are CONVENTIONAL (Naver web norms +
-documented brand green), not live-inspected tokens — flagged in the §4 footer.
-
-Tier 2 (founding/narrative): Naver Webtoon launched 2004 inside the Naver
-portal; pioneered vertical-scroll mobile webtoons and the 요일별 release model
-and amateur-creator pipeline (베스트도전/도전만화); the company became WEBTOON /
-Webtoon Entertainment with global + US-listing reach. General industry
-knowledge for the format history.
-
-Voice samples: all four (`첫화 보기`, `새 회차가 올라왔어요`, `관심웹툰에
-추가했어요`, `요즘 뜨는 작품`) are ILLUSTRATIVE patterns following Naver
-Webtoon's `해요체` register and UP/new-episode discovery ritual — NOT verified
-verbatim, since the site blocked automated inspection.
-
-Personas (§13) are fictional archetypes. Any resemblance to specific users is
-unintended.
--->
+No duration, easing, animation, or reduced-motion behavior was captured. Tab selection is the only observed interaction kind; it establishes state provenance, not a motion token.