oh-my-design-cli 1.6.1 → 1.6.2

package/web/references/mustit/DESIGN.md

@@ -0,0 +1,282 @@
+---
+id: mustit
+name: "MUSTIT"
+country: KR
+category: ecommerce
+homepage: "https://www.mustit.co.kr"
+primary_color: "#D00000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=mustit.co.kr&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# MUSTIT
+
+Korea's leading luxury resale marketplace connecting 1,300+ luxury brands and millions of monthly shoppers through a mobile-first, discovery-driven experience.
+
+## 1. Visual Theme & Atmosphere
+
+MUSTIT projects a disciplined luxury-marketplace aesthetic: a near-black (`#1F1F2C`) and white canvas that recedes so individual product photography can dominate, accented by a single assertive brand red (`#D00000`) that marks every price-cut, badge, and primary CTA. The official brand philosophy — "Smart Luxury — Make the Best Discovery" — is made tangible through high-density list grids, tight typographic hierarchy in Pretendard, and a periscope-lens symbol (M SCOPE) that signals personal curation. Shadow use is deliberately restrained (max `rgba(0,0,0,.05)`), surfaces feel flat and minimal, and the red accent creates instant visual priority in a visually busy product grid.
+
+## 2. Color Palette & Roles
+
+- **Brand Navy:** `#1F1F2C` — official primary brand color (CI logotype, hero backgrounds, brand header)
+- **Brand Red:** `#D00000` — primary action color; discount price labels, primary CTA button, cart badge, active filter, sale tag
+- **Text Primary:** `#222222` — body text, product titles, prices, headings
+- **Text Secondary:** `#888888` — captions, secondary metadata, placeholder
+- **Text Tertiary:** `#555555` — supporting body copy, sub-descriptions
+- **Text Disabled:** `#cccccc` — disabled input labels, muted controls
+- **Info Blue:** `#3083e4` — informational tags, delivery status, link text
+- **Outlet Burgundy:** `#8c1e46` — outlet badge background
+- **Background White:** `#ffffff` — page and card backgrounds
+- **Surface Light:** `#fafafa` — list section backgrounds, hot deal section
+- **Surface Mid:** `#f5f5f5` — divider fills, skeleton base
+- **Border Default:** `#e6e6e6` — card borders, divider lines
+- **Border Subtle:** `#f0f0f0` — tab underlines, light dividers
+
+## 3. Typography Rules
+
+Primary typeface: **Pretendard** (all UI copy); secondary: **SD Gothic Neo** (legacy web); display: **Archivo Expanded** (brand marketing/corp headings).
+
+| Token | Size | Weight | Line-height | Usage |
+|-------|------|--------|-------------|-------|
+| Display | 28px | 700 | 1.35 | Section hero titles |
+| Title L | 24px | 700 | 1.33 | Modal, page headers |
+| Title M | 20px | 700 | 1.35 | Section headers |
+| Title S | 18px | 600 | 1.5 | Card group titles |
+| Body L | 16px | 500 | 1.5 | Navigation links |
+| Body M | 15px | 600 | 1.47 | Button labels, product name |
+| Body S | 14px | 700 | 1.43 | Product price, form labels |
+| Caption L | 13px | 700 | 1.38 | Search keyword, chips |
+| Caption S | 12px | 700 | 1.33 | Metadata, sizes |
+| Label | 11px | 700 | 1.45 | Badges, micro-copy |
+| Fine | 10px | 400 | 1.6 | Legal, cart count |
+
+## 4. Component Stylings
+
+### Button
+
+**Primary (Black)**
+- Background: `#333333`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 48px
+- Font: 15px / 600
+- Padding: 0 16px
+
+**Primary (Red / Confirm)**
+- Background: `#D00000`
+- Text: `#ffffff`
+- Border: 1px solid `#D00000`
+- Radius: 4px
+- Height: 48px
+- Font: 18px / 500
+
+**Outline (Secondary)**
+- Background: `#ffffff`
+- Text: `#222222`
+- Border: 1px solid `#333333`
+- Radius: 4px
+- Height: 32px
+- Font: 13px / 600
+
+**Disabled**
+- Background: `#ffffff`
+- Text: `#888888`
+- Border: 1px solid `#dddddd`
+- Radius: 4px
+
+---
+
+### Tab
+
+**Active**
+- Text: `#222222`
+- Font: 16px / 700
+- Border-bottom: 2px solid `#222222`
+
+**Inactive**
+- Text: `#aaaaaa`
+- Font: 16px / 500
+
+---
+
+### Badge
+
+**Outlet**
+- Background: `#8c1e46`
+- Text: `#ffffff`
+- Radius: 2px
+- Height: 22px
+- Padding: 0 8px
+- Font: 11px / 700
+
+**Info Tag**
+- Text: `#3083e4`
+- Border: 1px solid `#3083e4`
+- Radius: 2px
+- Height: 24px
+- Font: 12px / 400
+
+---
+
+### Filter Chip
+
+**Default**
+- Border: 1px solid `#cccccc`
+- Radius: 17px
+- Height: 34px
+
+**Active**
+- Border: 1px solid `#D00000`
+- Radius: 17px
+
+---
+
+### Search Input
+
+**Default**
+- Background: `#ffffff`
+- Text: `#222222`
+- Radius: 4px
+- Height: 40px
+- Padding: 0 12px
+- Font: 15px / 600
+
+**Placeholder**
+- Text: `#aaaaaa`
+- Font: 15px / 400
+
+---
+
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.mustit.co.kr (homepage HTML + embedded CSS bundle, 1.2 MB), https://corp.mustit.co.kr/brand (CI/BI brand page HTML), https://corp.mustit.co.kr/lib/css/mustit-corp.css (corp brand CSS, 70 kB), https://static-ux.mustit.co.kr/ux/service/common/pretendard.css (font CSS)
+**Tier 2 sources:** getdesign.md/mustit — NOT LISTED (no data returned). refero — KR/TW brand, no result expected.
+**Conflicts unresolved:** The main shopping app uses `#333` as the primary CTA (near-black), while the corp site uses `#000`/`#1F1F2C` for brand backgrounds; `#D00000` is consistent across both as the accent/discount/action color.
+
+## 5. Layout Principles
+
+MUSTIT is built mobile-first as a Nuxt.js SPA served from `m.web.mustit.co.kr`. The standard content gutter is 16px on each side. Product grids use a 2-column layout with an ~8px gap between cards. Sections are separated by a 10px gray divider strip (`#f5f5f5`) or a 1px border line (`#f0f0f0`). The bottom fixed action bar (buy / cart) sits above the native safe-area inset. Maximum content width on desktop is 360–420px, centered with a white card. Sticky top navigation height is 44–56px.
+
+## 6. Depth & Elevation
+
+Surfaces are intentionally flat. Elevation is expressed through subtle shadows, not strong drop shadows:
+
+- **Level 0** — flat (no shadow): content sections, list items
+- **Level 1** — `box-shadow: 0 2px 4px 0 rgba(0,0,0,.03)`: product cards, filter chips
+- **Level 2** — `box-shadow: 0 2px 8px 0 rgba(0,0,0,.05)`: bottom sheets, filter buttons
+- **Overlay** — `background: rgba(0,0,0,.5)`: modal/sheet backdrop
+- **Dark scrim** — `rgba(0,0,0,.03)` pseudo-overlay on product thumbnails
+
+Bottom sheets use `border-radius: 15px 15px 0 0`; modals/alerts use `border-radius: 8px`.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#D00000` exclusively for price discounts, sale badges, and primary conversion CTAs
+- Keep all button radius at 4px for UI elements; use 17px+ only for pill chips/filter controls
+- Use Pretendard weight 700 for all prices and product names to create scan hierarchy
+- Keep section backgrounds alternating between `#ffffff` and `#fafafa` for visual rhythm
+- Apply `transition: all 0.2s ease` for interactive micro-feedback (hover/active states)
+- Use the 16px horizontal gutter consistently across all list and card views
+
+### Don't
+- Don't mix the brand red `#D00000` with decorative elements — reserve it for urgency/action signals
+- Don't use more than two typeface families in any single view (Pretendard + one brand face)
+- Don't apply heavy shadows (`rgba >0.1`) — the luxury positioning demands minimal depth cues
+- Don't round product image containers — keep them square with sharp corners to frame merchandise
+- Don't use the outlet burgundy `#8c1e46` outside of the Outlet category badge context
+
+## 8. Responsive Behavior
+
+The primary product is a mobile web app (max-width ~360–428px). The viewport is locked: `user-scalable=no, initial-scale=1.0`. At wider breakpoints the layout centers in a white card against a neutral background. The product grid collapses from a 2-column to a 1-column detail view on PDP. Images use Cloudflare `/_dims_/format/webp/autorotate/on` for adaptive delivery. Font sizes do not scale with viewport — they are fixed px values throughout.
+
+## 9. Agent Prompt Guide
+
+When generating MUSTIT-style UI:
+- Mobile-first, max-width 428px, 16px side padding
+- Color: `#222` body, `#D00000` price/CTA, `#888` secondary, `#fafafa` section background
+- Font: Pretendard; body 14px/700 for prices, 13px/700 for captions, 15px/600 for buttons
+- Buttons: bg `#333`, color `#fff`, radius 4px, height 48px — or red `#D00000` for confirm actions
+- Cards: no radius, white bg, `box-shadow: 0 2px 4px 0 rgba(0,0,0,.03)`, 1px `#f0f0f0` border
+- Tabs: `border-bottom: 2px solid #222` active, `color: #aaa` inactive
+- Chips: `border-radius: 17px`, `border: 1px solid #ccc` default, `#D00000` active
+- No heavy gradients in product areas; hotdeal sections may use deep purple-to-teal gradients
+- Keep all decorative shadow under `rgba(0,0,0,.05)`
+
+## 10. Voice & Tone
+
+**Three adjectives:** Direct, Discovery-forward, Confident
+
+| Do | Don't |
+|----|-------|
+| Use active, action-oriented verbs ("발견하세요", "탐험하세요") | Use passive constructions or vague luxury puffery |
+| Keep copy concise — product names and discount percentages speak | Over-explain or add unnecessary adjectives |
+| Lead with the deal / discovery hook | Lead with brand philosophy in transactional flows |
+| Mix Korean and brand/product names naturally | Force awkward Konglish or all-Korean transliterations |
+
+**Illustrative voice samples:**
+- *Illustrative:* "세상 모든 럭셔리 취향을 탐험하세요." — broad, aspirational, discovery-forward
+- *Illustrative:* "정품 200% 보장. 오늘 핫딜 특가를 놓치지 마세요." — direct, urgency-led, trust-anchored
+- *Illustrative:* "1,300개 해외명품 브랜드. 매일 달라지는 특가." — data-led, no fluff, scan-friendly
+
+## 11. Brand Narrative
+
+MUSTIT (머스트잇) launched in 2011 as Korea's first dedicated luxury goods marketplace, solving a single friction: accessing authenticated global luxury brands without travelling abroad or paying full retail. The platform grew into a multi-sided market, adding seller tools, authentication guarantees, and eventually a price-comparison engine across 1,300+ brands and 3.7 million+ product listings (2022 figures).
+
+The company's second chapter, captured in the tagline "Smart Luxury — Make the Best Discovery," shifts emphasis from access to personalised taste-curation. Where early MUSTIT competed on price and breadth, today it competes on intelligence: surfacing the right item from an enormous catalogue for each individual shopper. The M SCOPE periscope symbol — introduced in the 2020s rebrand — encodes this shift from "shopping" to "exploration."
+
+At its core, MUSTIT positions luxury not as an exclusive club but as an everyday enrichment layer. The brand promises that even a person who has never bought a designer item before can "minimise the risk of failure" through personalised guidance — democratising taste without cheapening aspiration.
+
+## 12. Principles
+
+1. **Discovery over search.** Every surface should surface the unexpected, not just confirm known intent. *UI implication:* Prioritise curated carousels and personalised shelf rows over pure search-result grids.
+
+2. **Trust before conversion.** Authentication guarantees and seller ratings must be visible at the product card level, not buried in PDP fine print. *UI implication:* Show authenticity badges inline on thumbnails; never hide them behind a tap.
+
+3. **Speed as luxury.** A slow page is a brand failure in a segment where impatience is typical. *UI implication:* Use WebP images, skeleton loading, and SSR; never show empty-state jumps on first paint.
+
+4. **Red means action.** The brand red is a semantic signal, not a decoration. *UI implication:* Apply `#D00000` only to discount labels, CTA buttons, and active states — never to illustrative or informational copy.
+
+5. **Mobile is the brand.** The desktop experience is secondary. *UI implication:* Design all layouts at 375px width first; use fixed px font sizes; lock zoom.
+
+## 13. Personas
+
+*Illustrative persona A — "명품 입문자" (Luxury Newcomer):* A mid-20s professional buying their first designer piece. Price-sensitive but aspirational, anxious about authenticity. Scans price discounts and authentication badges before product names. Expects clear return/guarantee copy.
+
+*Illustrative persona B — "셀럽 팔로워" (Trend Follower):* A late-20s social-media-active consumer chasing the same items worn by influencers or K-pop idols. Arrives via specific brand + item searches. Values speed of finding the item and peer review signals over price.
+
+*Illustrative persona C — "컬렉터" (Collector):* A 35–50 connoisseur who tracks rare or discontinued items across multiple platforms. Filters heavily, compares price histories, and values seller reputation data. Low churn once trusted.
+
+*Illustrative persona D — "선물 구매자" (Gift Buyer):* An occasional visitor purchasing for a birthday or anniversary. Needs curated "best-seller" shelving, category gift guides, and express delivery confidence. Highly reactive to the discount badge.
+
+## 14. States
+
+- **Empty — search no results:** White background, centered illustration, heading "검색 결과가 없어요" in `#222`, subtitle in `#888`; height fills viewport minus nav
+- **Loading — product grid:** 2-column skeleton grid; each card shows a `#f5f5f5` rectangle (image placeholder) and two `#f5f5f5` text lines at 14px and 12px height; no shimmer animation measured
+- **Error — network failure:** Toast-style slide-up notification in `#333` background, white text, 0.4s cubic-bezier spring entry
+- **Error — sold-out PDP:** Primary CTA replaced with a disabled-styled gray button (`#ddd` border, `#888` text); "품절" (sold out) label in `#D00000`
+- **Success — add to cart:** Slide-up toast message confirms addition; green check in `#12cf35`; auto-dismiss at 2–3 s
+- **Skeleton — product card:** `border-radius: 0` image block + two placeholder lines in `#f5f5f5` rendered before data arrives
+- **Disabled — form field:** `background: #fafafa`, `border: 1px solid #f0f0f0`, label text `#ccc`
+- **Active filter chip:** `border: 1px solid #D00000`; badge counter circle `background: #D00000`, `color: #fff`, `border-radius: 9px`
+
+## 15. Motion & Easing
+
+| Token | Duration | Easing | Usage |
+|-------|----------|--------|-------|
+| Micro | 150ms | `ease-out` | Icon rotation (dropdown arrow), tap highlight |
+| Fast | 200ms | `ease` | Slide-up toast entry, top/bottom position change |
+| Standard | 250ms | `ease-out` | Fade in/out, bottom-sheet slide up/down |
+| Medium | 400ms | `cubic-bezier(.25,.46,.45,.94)` | Sheet slide + opacity composite |
+| Spring | 400ms | `cubic-bezier(.47,1.64,.41,.8)` | Toast bounce-in |
+| Slow | 500ms | `ease` | Pagination indicator slide, banner swipe |
+| Wish | 400ms | `ease-in` | Wishlist heart animation (on/off) |
+
+**Rules:**
+- Enter animations use `ease-out`; exit animations use `ease-in`
+- Never animate product image loads — swap instantly to avoid layout shift
+- Sheet overlays fade backdrop at 250ms separate from content slide
+- All interaction animations ≤ 500ms total; prefer ≤ 250ms for taps

package/web/references/payco/DESIGN.md

@@ -0,0 +1,227 @@
+---
+id: payco
+name: "PAYCO"
+country: KR
+category: fintech
+homepage: "https://www.payco.com"
+primary_color: "#FF2233"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=payco.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# PAYCO
+
+South Korea's everyday fintech super-app — combining payment, points, financial services, and document storage in one red-branded platform operated by NHN PAYCO.
+
+## 1. Visual Theme & Atmosphere
+
+PAYCO's digital product language is built on a high-contrast red-and-white foundation that projects urgency, confidence, and accessibility. The vivid brand red (#FF2233) anchors every primary action — sidebar headers, CTA buttons, active navigation underlines — against a clean white canvas, creating an energetic rhythm without visual clutter. Dark charcoal (#2a303a) carries all body copy, keeping legibility sharp on white surfaces. Secondary UI chrome falls into neutral greys and off-whites, so the brand red always reads as a call to action. The overall atmosphere is functional and trustworthy: nothing extraneous competes with the moment of payment or redemption, yet the red signals that speed and benefit are always one tap away.
+
+## 2. Color Palette & Roles
+
+- **Brand Red:** `#FF2233` — primary brand color; buttons, active nav, sidebar headers, emphasis text (CSS custom property `--brand-color`)
+- **Legacy Red:** `#ff1414` — GNB bottom border, hover states, point figures; retained alongside brand red for legacy components
+- **Body Dark:** `#2a303a` — primary text, body copy, nav link default
+- **Off-Black:** `#2d2d2d` — secondary headings, dense data text
+- **Mid Grey:** `#666666` — secondary body text, input value text
+- **Placeholder Grey:** `#999999` — input placeholder, tertiary labels
+- **Light Neutral:** `#f4f6fa` — surface background for cards and section washes
+- **Divider:** `#ededed` — table borders, section dividers
+- **Input Border:** `#d4d4d4` — form field outlines at rest
+- **Disabled Surface:** `#dadada` — disabled button background
+- **Disabled Text:** `#aaacae` — disabled button label
+- **White:** `#ffffff` — page background, card fill, button fill (ghost/secondary)
+
+## 3. Typography Rules
+
+- **Korean primary:** `NotoSans` (NotoSans KR), weights 100–700; used in service sections, navigation, and promotional copy
+- **Newer flows:** `'Pretendard Variable'`, weights 400/500/700; used in modern refund and transaction screens
+- **Base stack (legacy):** `'Apple SD Gothic Neo', NanumGothic, ng, dotum, Helvetica, sans-serif`; applies to body, inputs, buttons
+- **Base size:** 16px; line-height 1.27; letter-spacing −1px (body)
+- **Hero heading:** 52px / 700 / color `#fff` / letter-spacing −0.56px (`.kv_heading`)
+- **Hero subtext:** 24px / 300 / color `#fff` / line-height 32px (`.kv_text`)
+- **Section title:** 52px / 700 / color `#000` (`.main_title`)
+- **Section subtitle:** 32px / 400 / color `#000` / line-height 50px (`.sub_title`)
+- **Nav links:** 24px / 300 / NotoSans / color `#191919`
+- **Large button label:** 18px / 700 / line-height 48px (`.bn_big *`)
+- **Medium button label:** 13px / 700 / line-height 39px (`.bn_l *`)
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Brand Button (bn_big + brand color)**
+- Background: `#FF2233`
+- Text: `#ffffff`
+- Border: 1px solid `#FF2233`
+- Height: 48px
+- Font: 18px / 700
+
+**Dark Secondary Button (bn_bk)**
+- Background: `#565960`
+- Text: `#ffffff`
+- Border: 1px solid `#4a4f56`
+- Height: 48px
+- Font: 18px / 700
+
+**Ghost Button (bn_gy)**
+- Background: `#ffffff`
+- Text: `#191a1c`
+- Border: 1px solid `#bfbfbf`
+
+**Disabled Button (bn_disabled)**
+- Background: `#dadada`
+- Text: `#aaacae`
+- Border: 1px solid `#d2d2d2`
+
+**Modern CTA Link Button (halt_apply)**
+- Background: `#FF2233`
+- Text: `#ffffff`
+- Radius: 8px
+- Height: 51px
+- Padding: 16px 10px
+- Font: 14px / 400
+
+### Form Inputs
+
+**Standard Input (inp)**
+- Background: `#ffffff`
+- Text: `#666666`
+- Border: 1px solid `#d4d4d4`
+- Height: 32px
+- Padding: 0 0 0 20px
+- Font: 12px
+
+**Placeholder**
+- Text: `#999999`
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.payco.com (homepage HTML), https://www.payco.com/share/css/common.css?1778564615926 (full CSS bundle, 398 KB)
+**Tier 2 sources:** getdesign.md/payco — NOT LISTED (no data). refero ?q=PAYCO — no KR result.
+**Conflicts unresolved:** #FF2233 (CSS :root --brand-color) and #ff1414 (legacy GNB border) coexist; #FF2233 is the canonical brand red per the custom property declaration.
+
+## 5. Layout Principles
+
+- Desktop content width: 1026px centered (`.wrap { width: 1026px; margin: 0 auto }`)
+- Full-width hero image with centred overlay text at 1600px minimum width for large screens
+- Sidebar navigation (`.snb_header_wrap`) uses brand red background at 184px height
+- Service sections stack vertically with generous vertical padding (159px top on first section, 115px on subsequent)
+- Service tab navigation is inline with 25px spacing between items
+- Footer uses narrower 760px content width with 180px left padding for address block
+
+## 6. Depth & Elevation
+
+- Flat surfaces dominate: cards and panels use 1px border or background colour shift rather than drop shadows
+- Panel dropdowns use subtle shadow: `box-shadow: 0 1px 0 rgba(0,0,0,.1)` (`.ly_panel_cont`)
+- Modal overlay uses full-screen dimmed layer: `background: #000; opacity: .7` (`.dimmed`)
+- z-index layering: skip link 120, sticky nav 99, date picker 100, modal 100+
+- Active GNB bottom underline: 4px solid `#ff1414` — the heaviest border accent in the system
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#FF2233` exclusively for primary CTAs, active states, and brand emphasis to maintain hierarchy
+- Set body text in `#2a303a` on white for maximum legibility
+- Use NotoSans (KR) for promotional and section heading copy; use Pretendard Variable for newer transactional screens
+- Apply the 1px solid `#d4d4d4` border on all inputs at rest state
+- Use the `bn_big` sizing (198×48px, 18px/700) for primary page-level call-to-action buttons
+- Keep content within the 1026px centred wrapper on desktop
+
+### Don't
+- Don't introduce additional brand colours outside the measured palette without alignment
+- Don't use the brand red `#FF2233` for body text or non-actionable elements — it triggers urgency
+- Don't omit the disabled state styling (`#dadada` / `#aaacae`) when rendering inactive buttons
+- Don't mix Pretendard Variable and legacy `'Apple SD Gothic Neo'` stacks in the same component context
+- Don't override the 4px GNB bottom border or the sidebar red header — these are structural brand anchors
+
+## 8. Responsive Behavior
+
+- Desktop first layout; breakpoints defined at max-width 1280px and max-width 1100px (narrow content adjustments)
+- At min-width 1600px: full-width hero image scales to cover with absolute centred positioning
+- Hero image uses `transform: translate(-50%, -50%)` for centred cover on all viewport sizes
+- Sticky navigation (`fp_nav`) transitions from absolute to fixed at 69px from top of viewport when user scrolls
+- Footer and sidebar widths do not adapt below 1100px; mobile experience served by native apps
+
+## 9. Agent Prompt Guide
+
+Use these conventions when generating PAYCO-branded UI:
+
+- Primary brand hex is `#FF2233`; use it for primary buttons, active nav items, and emphasis spans
+- Body text hex is `#2a303a`; secondary text is `#666`; placeholder is `#999`
+- Surface backgrounds: `#fff` (cards, page), `#f4f6fa` (section wash), `#f4f4f4` (info panels)
+- Button large: 198×48px, border 1px solid matching background, text 18px/700, white text on brand red
+- Input: height 32px, padding-left 20px, border 1px solid `#d4d4d4`, font 12px, text `#666`
+- Disabled: background `#dadada`, border `#d2d2d2`, text `#aaacae`
+- Corner radius: 8px for modern CTAs; 20px–100px for pill badges/tags; flat (0) for legacy button variants
+- Font: NotoSans KR for headings/promo; Pretendard Variable for transactional screens; fall back to Apple SD Gothic Neo
+- Transitions on nav indicator: `width 0.5s` ease
+
+## 10. Voice & Tone
+
+**Adjectives:** Practical, reassuring, familiar
+
+| Dimension | Do | Don't |
+|-----------|-----|-------|
+| Register | Friendly and direct; speak like a trusted neighbour | Formal or distant — avoid corporate stiffness |
+| Sentences | Short to mid-length; action-led | Long conditional clauses that delay the point |
+| Vocabulary | Everyday Korean consumer language; minimal jargon | Finance-heavy terminology without explanation |
+
+Voice samples (illustrative):
+- "결제가 필요한 모든 순간, PAYCO 하세요." (Every moment you need to pay, PAYCO it.) — short, verb-forward, brand name as a verb
+- "실속있는 포인트, 편리한 결제, 간편한 금융." (Practical points, convenient payment, simple finance.) — three-beat rhythm, benefit-first
+- "일상의 빈틈을 채우다" (Fill the gaps in your daily life.) — poetic but grounded, positions PAYCO as an everyday companion
+
+## 11. Brand Narrative
+
+PAYCO launched in 2015 under NHN (formerly NHN Entertainment, the company behind Hangame and NAVER's early gaming arm), aiming to consolidate the fragmented Korean payment landscape into a single mobile wallet. Rather than targeting power users, the service centred on the mass consumer's everyday inconveniences — small purchases, loyalty point management, transit payments — and built trust by linking to users' existing bank accounts without requiring a new card.
+
+The brand's current mission is captured in the homepage OG description: "실속있는 포인트, 편리한 결제, 간편한 금융, 안전한 전자문서함" — practical points, convenient payment, simple finance, secure digital document storage. This four-part mission reflects PAYCO's evolution from a pure payments app into a life-services super-app: the 페이코 라이프 (PAYCO Life) positioning introduced on the homepage signals that the brand sees itself as a utility layer across employment (office meal vouchers, campus IDs), commerce, and government-facing document exchange.
+
+NHN PAYCO operates the service as a subsidiary of NHN, and the product's visual language — dominated by the vivid brand red, clean white surfaces, and tight typographic scale — deliberately contrasts with the clutter of legacy Korean fintech apps. The tagline "일상의 빈틈을 채우다" (Fill the gaps in your daily life) positions PAYCO as a background enabler: always available, never intrusive, and genuinely useful in the uncovered corners of everyday life.
+
+## 12. Principles
+
+1. **Simplicity over completeness.** Every flow should reduce friction to its minimum. *UI implication:* Prefer single-action screens; hide advanced options behind progressive disclosure rather than exposing all settings upfront.
+
+2. **Trust through transparency.** Users are handling money and documents; every state must be communicated clearly. *UI implication:* Show explicit confirmation dialogs, unambiguous success screens, and honest error messages with recovery paths.
+
+3. **Reliability at every touchpoint.** PAYCO must work first time, every time, for every demographic. *UI implication:* Design for the lowest-common-denominator device; never depend on hover states for critical information.
+
+4. **Everyday relevance.** Benefits and points should feel attainable, not aspirational. *UI implication:* Surface accumulated points and savings prominently in personalised dashboards; use concrete numbers rather than percentages.
+
+5. **Brand clarity under load.** In dense data screens (transaction lists, coupon grids), brand red must remain a signal, not decoration. *UI implication:* Reserve `#FF2233` for primary CTAs and alert states only; use neutral greys for all listing chrome.
+
+## 13. Personas
+
+*Illustrative — these are representative archetypes synthesised from PAYCO's stated service areas and public product positioning.*
+
+*Illustrative Office Worker (지민, 28):* Uses PAYCO daily for the company meal-voucher (식권) at the office canteen, accumulates points on convenience-store runs, and occasionally pays transit fares. Values speed over discovery — expects the payment barcode to appear in under two taps.
+
+*Illustrative University Student (소연, 22):* Relies on the campus PAYCO card (캠퍼스) for student ID and library access, uses the app to send small remittances to family, and redeems coupon notifications between lectures. Sensitive to data charges; expects the app to be fast on mid-range Android.
+
+*Illustrative Self-Employed Merchant (영호, 45):* Accepts PAYCO at his neighbourhood bakery via QR code terminal; checks settlement summaries weekly. Values clear revenue totals and simple dispute resolution over any loyalty features.
+
+*Illustrative Document-Conscious Parent (혜진, 38):* Stores electronic documents (전자문서) — insurance policies, government notices — in PAYCO's digital wallet. Cares about security assurances and needs to find documents quickly when contacted by an insurer.
+
+## 14. States
+
+- **Empty:** Grey centre-aligned text `#999` with a descriptive label; no brand-red elements to avoid false urgency in zero-data screens
+- **Loading (spinner):** 22×22px animated sprite (`.sp_load`) absolutely centred on the container; background image from CDN; grey tones to avoid distraction
+- **Loading (image):** 30×30px animated gif (`.img_loading`) centred in column headers or card panels; separate assets for dark and light panel backgrounds
+- **Error (page-level):** Full-width white overlay with centred error illustration, 24px `#565960` heading, 13px `#666` body text, and a single recovery CTA button; brand-red used only in the recovery link (`.error .desc a`)
+- **Error (inline):** `#FF2233` caution text (`.caution`, `.confirm`) at 12px directly below the affected field
+- **Success:** Implicit via forward navigation; no dedicated success-screen pattern found in CSS — completion is signalled by routing to next step
+- **Skeleton:** No explicit skeleton-loading CSS found; loading spinners serve this role
+- **Disabled:** Background `#dadada`, border `#d2d2d2`, text `#aaacae`; cursor:default implied; interactive events suppressed
+
+## 15. Motion & Easing
+
+- **Navigation indicator:** `transition: width 0.5s` — the `fp_nav` active underline expands from 0 to 100% width; easing unspecified (browser default ease)
+- **Transform usage:** `transform: translate(-50%, -50%)` for absolute centring of hero image and modals; `transform: translateY(-50%)` for vertically centred inline elements — all used for layout, not animation
+- **Page scroll:** `fp_nav` transitions between absolute and fixed positioning on scroll; no explicit scroll-animation timing defined
+- **General rule:** Transitions are minimal and functional; the brand does not use decorative motion. Duration scale: 0.5s for page-level indicator; shorter interactions implied by browser defaults
+- **Easing intent:** Flat ease (browser default) for all measured transitions; no cubic-bezier custom curves found in the CSS bundle