oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/shinhancard/DESIGN.md

@@ -8,414 +8,303 @@ primary_color: "#005df9"
 logo:
   type: favicon
   slug: "https://www.google.com/s2/favicons?domain=shinhancard.com&sz=128"
-verified: "2026-06-09"
+verified: "2026-07-13"
 added: "2026-06-09"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: product-web, url: "https://www.shinhancard.com/pconts/html/main.html", inspected: "2026-07-13" }
+    - { id: credit-detail, kind: product-web, url: "https://www.shinhancard.com/pconts/html/card/apply/credit/1232390_2207.html", inspected: "2026-07-13" }
+    - { id: premium-detail, kind: product-web, url: "https://www.shinhancard.com/pconts/html/card/apply/premium/1236160_2205.html", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.shinhancard.com/pconts/html/main.html", captured: "2026-07-13" }
+    - { id: credit-detail-live, kind: product-surface, url: "https://www.shinhancard.com/pconts/html/card/apply/credit/1232390_2207.html", captured: "2026-07-13" }
+    - { id: premium-detail-live, kind: product-surface, url: "https://www.shinhancard.com/pconts/html/card/apply/premium/1236160_2205.html", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.primary": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.canvas": *home
+    "tokens.colors.surface": *home
+    "tokens.colors.tonal": &detail { surface_id: credit-detail, source_id: credit-detail-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.surface-accent": *home
+    "tokens.colors.ink": *home
+    "tokens.colors.body": *home
+    "tokens.colors.slate": *home
+    "tokens.colors.muted": *home
+    "tokens.colors.border": *home
+    "tokens.colors.danger": *home
+    "tokens.colors.danger-bg": *home
+    "tokens.typography.family.sans": *home
+    "tokens.typography.display.size": *home
+    "tokens.typography.display.weight": *home
+    "tokens.typography.display.lineHeight": *home
+    "tokens.typography.display.tracking": *home
+    "tokens.typography.display.use": *home
+    "tokens.typography.title.size": *detail
+    "tokens.typography.title.weight": *detail
+    "tokens.typography.title.lineHeight": *detail
+    "tokens.typography.title.tracking": *detail
+    "tokens.typography.title.use": *detail
+    "tokens.typography.body.size": *home
+    "tokens.typography.body.weight": *home
+    "tokens.typography.body.lineHeight": *home
+    "tokens.typography.body.tracking": *home
+    "tokens.typography.body.use": *home
+    "tokens.typography.compact.size": *home
+    "tokens.typography.compact.weight": *home
+    "tokens.typography.compact.lineHeight": *home
+    "tokens.typography.compact.tracking": *home
+    "tokens.typography.compact.use": *home
+    "tokens.spacing.tight": *home
+    "tokens.spacing.compact": *home
+    "tokens.spacing.regular": *home
+    "tokens.spacing.surface": *detail
+    "tokens.rounded.sm": *home
+    "tokens.rounded.md": *home
+    "tokens.rounded.lg": *home
+    "tokens.rounded.xl": *detail
+    "tokens.shadow.menu": *home
+    "tokens.components.badge-danger.type": *home
+    "tokens.components.badge-danger.bg": *home
+    "tokens.components.badge-danger.fg": *home
+    "tokens.components.badge-danger.radius": *home
+    "tokens.components.badge-danger.padding": *home
+    "tokens.components.badge-danger.font": *home
+    "tokens.components.badge-danger.use": *home
+    "tokens.components.badge-blue.type": *home
+    "tokens.components.badge-blue.bg": *home
+    "tokens.components.badge-blue.fg": *home
+    "tokens.components.badge-blue.radius": *home
+    "tokens.components.badge-blue.padding": *home
+    "tokens.components.badge-blue.font": *home
+    "tokens.components.badge-blue.use": *home
 tokens:
-  source: live-extract
-  extracted: "2026-06-09"
+  source: reconciled
+  extracted: "2026-07-13"
   components_harvested: true
   colors:
     primary: "#005df9"
-    indigo: "#6268ff"
     canvas: "#ffffff"
     surface: "#f8f9fc"
-    surface-blue: "#f0f4fa"
-    surface-indigo: "#ebf0ff"
-    heading: "#101828"
-    slate: "#344054"
+    tonal: "#f0f4fa"
+    surface-accent: "#ebf0ff"
+    ink: "#101828"
     body: "#475467"
+    slate: "#344054"
     muted: "#667085"
-    muted-light: "#818da2"
     border: "#e4e7ec"
-    border-strong: "#d0d5dd"
-    on-primary: "#ffffff"
     danger: "#f44f4f"
     danger-bg: "#fff6f5"
   typography:
     family: { sans: "Digital One Shinhan" }
-    display:    { size: 32, weight: 900, lineHeight: 1.20, tracking: -0.64, use: "Hero / main visual headline" }
-    h1:         { size: 28, weight: 700, lineHeight: 1.30, tracking: -0.28, use: "Page title" }
-    section:    { size: 21, weight: 700, lineHeight: 1.30, tracking: -0.28, use: "Section heading" }
-    body-input: { size: 16, weight: 500, lineHeight: 1.69, tracking: -0.32, use: "Form input, emphasized body" }
-    body:       { size: 14, weight: 400, lineHeight: 1.71, tracking: -0.28, use: "Standard reading text, nav links" }
-    caption:    { size: 12, weight: 400, lineHeight: 1.50, use: "Metadata, fine print, timestamps" }
-  spacing: { xs: 2, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 48 }
-  rounded: { sm: 8, md: 12, lg: 16, full: 9999 }
+    display: { size: 32, weight: 800, lineHeight: 1.50, tracking: -0.64, use: "Promotional card title observed on the public home surface" }
+    title: { size: 28, weight: 700, lineHeight: 1.50, tracking: -0.56, use: "Detail-page heading observed on credit-card product surface" }
+    body: { size: 14, weight: 400, lineHeight: 1.71, tracking: -0.28, use: "Product-page reading text and controls" }
+    compact: { size: 12, weight: 300, lineHeight: 1.67, tracking: -0.24, use: "Compact product and menu metadata" }
+  spacing: { tight: 4, compact: 8, regular: 12, surface: 20 }
+  rounded: { sm: 8, md: 12, lg: 16, xl: 20 }
   shadow:
-    hairline: "#e4e7ec 0px 0px 0px 1px"
-    inset-line: "#d0d5dd 0px -1px 0px 0px inset"
+    menu: "rgba(12,17,29,0.1) 0px 4px 16px 0px"
   components:
-    button-primary: { type: button, bg: "#005df9", fg: "#ffffff", radius: "16px", padding: "2px 12px", font: "14px / 400", use: "Primary CTA — 로그인, SOL페이 다운로드 (shc-btn theme-primary)" }
-    button-tertiary: { type: button, bg: "#f0f4fa", fg: "#101828", radius: "12px", padding: "2px 8px", font: "14px / 400", use: "Tertiary action — 마이페이지, 내 정보관리 (shc-btn theme-tertiary)" }
-    button-indigo: { type: button, bg: "#6268ff", fg: "#ffffff", radius: "12px", padding: "2px 8px", font: "14px / 400", use: "Secondary accent action / promo" }
-    card: { type: card, bg: "#f8f9fc", fg: "#101828", radius: "16px", padding: "24px", font: "14px / 400", use: "Product / loan entry card, hairline #e4e7ec ring" }
-    card-indigo: { type: card, bg: "#ebf0ff", fg: "#101828", radius: "16px", padding: "24px", use: "Highlighted promo card on indigo tint" }
-    input-text: { type: input, bg: "#ffffff", fg: "#101828", radius: "8px", font: "16px / 500", use: "Search / form input, 1px #d0d5dd border, focus #005df9" }
-    badge-danger: { type: badge, bg: "#fff6f5", fg: "#f44f4f", radius: "8px", padding: "2px 8px", font: "12px / 400", use: "Alert / required / error badge" }
-    tab: { type: tab, bg: "#ffffff", fg: "#667085", radius: "0px", font: "14px / 400", active: "2px bottom border #005df9, fg #101828", use: "Main navigation / content tabs" }
-    list-item: { type: listItem, bg: "#ffffff", fg: "#344054", radius: "12px", padding: "0px 12px", font: "14px / 400", use: "Menu / quick-link list row, #e4e7ec divider" }
-    toggle: { type: toggle, bg: "#005df9", fg: "#ffffff", radius: "9999px", use: "On-state switch / segmented selector" }
+    badge-danger: { type: badge, bg: "#fff6f5", fg: "#f44f4f", radius: "12px", padding: "2px 8px", font: "11px / 500", use: "Tinted text badge on the public home surface (shc-badge--text type-tint theme-red)" }
+    badge-blue: { type: badge, bg: "#ebf0ff", fg: "#005df9", radius: "12px", padding: "2px 8px", font: "11px / 500", use: "Tinted text badge on the public home surface (shc-badge--text type-tint theme-blue)" }
 ---
 
-# Design System Inspiration of Shinhan Card
+# Shinhan Card — Design Reference
 
 ## 1. Visual Theme & Atmosphere
 
-Shinhan Card's website reads as the digital face of a major Korean financial institution that has been deliberately modernized for a mobile-first, super-app era. The page opens on a clean white canvas (`#ffffff`) layered with soft off-white and pale-blue surfaces (`#f8f9fc`, `#f0f4fa`), anchored by a single confident interactive blue (`#005df9`) that carries every primary call to action. Where legacy bank sites lean on dense navy chrome and stock imagery, Shinhan Card opts for generous rounded cards, airy spacing, and a restrained two-tone neutral scale that lets the blue do all the signalling. The result feels trustworthy and institutional, yet light and consumer-friendly — closer to a fintech app than a traditional card-issuer portal.
-
-The defining typographic element is the proprietary `Digital One Shinhan` typeface, set across the entire system from 32px hero display down to 12px fine print. It runs with consistently tight negative letter-spacing (around -0.28px at body sizes, widening to -0.64px at display) that packs Korean and Latin glyphs into dense, engineered lines. Body text sits at a comfortable 14px with a generous 24px line-height, giving the dense Hangul a calm, readable rhythm. Headlines escalate in weight rather than only in size — 700 for page and section titles, jumping to 900 for the hero — so hierarchy is felt through ink density as much as scale.
+Shinhan Card is a Korean specialist finance company whose stated business spans credit-card sales, cash advances, instalment finance, card loans, auto lease, and a broader platform-and-data business. The current public web experience connects that institutional remit to the group’s Shinhan SOL Pay digital brand: the company describes SOL Pay as a platform linking financial life and daily life, rather than only a card-management destination. On the captured public product surfaces, that transition is expressed through a bright `#005df9` action blue, quiet white and blue-grey fields, and `Digital One Shinhan` set tightly across product content. The result is a practical product language for card discovery and account-related tasks rather than a generalized marketing style.
 
-What distinguishes Shinhan Card is its use of barely-there elevation. Instead of drop shadows, surfaces are separated by a 1px hairline ring (`#e4e7ec 0px 0px 0px 1px`) and an inset bottom line (`#d0d5dd 0px -1px 0px 0px inset`). Depth is communicated through tinted surface stacking — white over `#f8f9fc` over `#f0f4fa` over `#ebf0ff` — rather than blur. This flat, paper-layered aesthetic keeps the interface feeling crisp and document-grade, appropriate for a product where users scan statements, balances, and transactions.
-
-**Key Characteristics:**
-- Proprietary `Digital One Shinhan` typeface across the entire system
-- Single interactive blue (`#005df9`) as the sole primary-action color
-- Weight-driven hierarchy: 400 body, 700 titles, 900 hero
-- Tinted surface stacking (`#ffffff` / `#f8f9fc` / `#f0f4fa` / `#ebf0ff`) instead of drop shadows
-- Hairline `#e4e7ec` rings and inset `#d0d5dd` lines for separation
-- Generous rounded geometry — 8px / 12px / 16px radius family
-- Tight negative tracking (-0.28px body, -0.64px display) for dense Korean text
-- Indigo (`#6268ff`) as a secondary accent for promotional moments
+The public system is more varied than the prior snapshot suggested. Product-detail pages carry `#f8f9fc` selection tiles and `#f0f4fa` toned actions; the home surface also exposes red and blue tint badges. Rounded values occur at 8, 12, 16, and 20px, while an opened navigation menu uses a light border and a small, explicit shadow. This reference therefore distinguishes the captured product web surfaces from the company’s corporate narrative and from any unobserved signed-in app, checkout, or documentation UI.
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Shinhan Blue** (`#005df9`): Primary brand color, CTA backgrounds, link text, active tab indicator, focus rings. A saturated, slightly electric blue that anchors the entire system.
-- **Ink** (`#101828`): Primary heading and high-emphasis text color. A near-black navy that adds warmth and depth over pure black.
-- **Pure White** (`#ffffff`): Page background, card surfaces, button text on the blue.
-
-### Accent
-- **Indigo** (`#6268ff`): Secondary accent for promotional cards and decorative highlights, paired with its tint surface.
-- **Surface Indigo** (`#ebf0ff`): Pale indigo tint for highlighted promo cards and feature callouts.
-
-### Neutral Scale
-- **Slate** (`#344054`): Strong body text, list rows, secondary headings.
-- **Body** (`#475467`): Standard secondary text, descriptions.
-- **Muted** (`#667085`): Tertiary text, inactive tab labels, captions.
-- **Muted Light** (`#818da2`): Disabled text, placeholders, axis labels.
-
-### Surfaces & Borders
-- **Surface** (`#f8f9fc`): Default card and panel background.
-- **Surface Blue** (`#f0f4fa`): Tertiary button background, subtle filled chips.
-- **Border** (`#e4e7ec`): Standard hairline border, dividers, card rings.
-- **Border Strong** (`#d0d5dd`): Input borders, inset separator lines.
-
-### Feedback
-- **Danger** (`#f44f4f`): Error text, alert badges, required-field markers.
-- **Danger BG** (`#fff6f5`): Tinted surface behind danger badges and inline errors.
+- **Primary blue** (`#005df9`): observed as the background of `shc-btn theme-primary size-xl` across the home, credit-detail, and premium-detail product surfaces.
+- **Canvas** (`#ffffff`): observed page and expanded-menu surface.
+- **Surface** (`#f8f9fc`): observed on home and product-detail selection tiles.
+- **Tonal surface** (`#f0f4fa`): observed on the `shc-capsule-btn theme-tonal size-md` action on both captured detail pages.
+- **Accent tint** (`#ebf0ff`): observed behind the blue text badge on the home surface.
+- **Ink** (`#101828`), **body** (`#475467`), **slate** (`#344054`), and **muted** (`#667085`): observed text families across the three product surfaces.
+- **Border** (`#e4e7ec`): observed on the open navigation menu and home chip.
+- **Danger tint** (`#fff6f5`) and **danger text** (`#f44f4f`): observed on `shc-badge--text type-tint theme-red` on home.
 
 ## 3. Typography Rules
 
-### Font Family
-- **Primary**: `Digital One Shinhan`, with system fallback stack: `-apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
-- The proprietary face covers both Hangul and Latin and is used at every level — there is no separate display or mono family on the marketing surface.
+### Font evidence classes
 
-### Hierarchy
+- **Live computed surface-use — `Digital One Shinhan`.** The supplied capture records 691 visible uses across the home, credit-detail, and premium-detail product surfaces. Computed declarations resolve to `"Digital One Shinhan", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`.
+- **FontFaceSet/source corroboration — `Digital One Shinhan`.** The same bundle reports the family as `loaded` with high confidence and eight first-party source URLs: Light, Medium, Bold, and ExtraBold `.woff`/`.woff2` files under `https://www.shinhancard.com/pconts/static/webfonts/`.
+- **Official distributed product asset.** Those files are served from Shinhan Card’s own webfont path and corroborate the live web family. A publicly indexed Shinhan Card font licence or separate brand-font catalogue was not found in this update, so no reuse licence is asserted.
+- **Declared-only asset — `swiper-icons`.** A data-URL `@font-face` was declared, but the capture records zero visible uses. It is an icon asset, not a UI-family token.
+- **System fallbacks.** The Apple/system/Segoe/Roboto/Arial chain remains a declaration fallback; it is not presented as a Shinhan Card brand font.
 
-| Role | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|--------|-------------|----------------|-------|
-| Display / Hero | 32px (2.00rem) | 900 | 1.20 | -0.64px | Main visual headline, maximum density |
-| Page Title (h1) | 28px (1.75rem) | 700 | 1.30 | -0.28px | Top-level page title |
-| Section (h2) | 21px (1.31rem) | 700 | 1.30 | -0.28px | Section / card-group heading |
-| Body Emphasized / Input | 16px (1.00rem) | 500 | 1.69 | -0.32px | Form input, emphasized body |
-| Body | 14px (0.88rem) | 400 | 1.71 | -0.28px | Standard reading text, nav links |
-| Caption | 12px (0.75rem) | 400 | 1.50 | normal | Metadata, fine print, timestamps |
+### Observed hierarchy
 
-### Principles
-- **Weight as hierarchy**: Distinction comes primarily from weight escalation (400 → 700 → 900), not only size. The hero's 900 weight is the heaviest moment in the system.
-- **Tight tracking for Hangul density**: Negative letter-spacing (-0.28px body, -0.64px display) keeps dense Korean lines compact and engineered.
-- **Generous line-height on body**: 14px body runs at a 24px line box (~1.71) so dense Hangul stays calm and scannable.
-- **One family, all levels**: `Digital One Shinhan` carries the entire system, reinforcing brand consistency from hero to fine print.
+| Role | Size | Weight | Line height | Tracking | Captured context |
+|---|---:|---:|---:|---:|---|
+| Promotional title | 32px | 800 | 48px | -0.64px | Home card text |
+| Detail heading | 28px | 700 | 42px | -0.56px | Credit-card product page |
+| Product body/control | 14px | 400 | 24px | -0.28px | Product pages and controls |
+| Compact metadata | 12px | 300 | 20px | -0.24px | Product and menu metadata |
 
-## 4. Component Stylings
+## 4. Components
 
-### Buttons
+### Primary action
 
-**Primary** (`shc-btn theme-primary`)
+**Default**
 - Background: `#005df9`
-- Text: `#ffffff`
-- Padding: 2px 12px (size-xl), 2px 8px (size-lg)
-- Radius: 16px (xl), 12px (lg)
-- Font: 14px `Digital One Shinhan` weight 400
-- Use: Primary CTA — "로그인", "신한 SOL페이 다운로드"
+- Text: `#101828`
+- Radius: `16px`
+- Padding: `2px 12px`
+- Font: `14px / 400 / Digital One Shinhan`
+- Use: `shc-btn theme-primary size-xl` on home, credit-detail, and premium-detail public product surfaces; evidence `home::[data-omd-capture="27"]`.
 
-**Tertiary** (`shc-btn theme-tertiary`)
+### Toned capsule action
+
+**Default**
 - Background: `#f0f4fa`
 - Text: `#101828`
-- Padding: 2px 8px
-- Radius: 12px
-- Use: Secondary actions — "마이페이지", "내 정보관리"
-
-**Indigo Accent**
-- Background: `#6268ff`
-- Text: `#ffffff`
-- Radius: 12px
-- Use: Promotional / accent CTAs paired with `#ebf0ff` surfaces
-
-### Cards & Containers
-- Background: `#f8f9fc` (standard) or `#ebf0ff` (promo highlight)
+- Radius: `20px`
+- Padding: `8px 12px`
+- Font: `14px / 400 / Digital One Shinhan`
+- Use: `shc-capsule-btn theme-tonal size-md` on both captured product-detail surfaces; evidence `surface-2::[data-omd-capture="29"]`.
+
+### Product-detail tile
+
+**Default**
+- Background: `#f8f9fc`
 - Text: `#101828`
-- Radius: 16px
-- Padding: 24px
-- Separation: 1px hairline ring `#e4e7ec 0px 0px 0px 1px`, no drop shadow
-- Use: Loan/product entry cards, feature tiles
+- Radius: `16px`
+- Padding: `20px`
+- Font: `14px / 400 / Digital One Shinhan`
+- Use: captured product-detail tile on both credit and premium pages; evidence `surface-2::[data-omd-capture="20"]`.
 
-### Inputs & Forms
-- Background: `#ffffff`
-- Border: `1px solid #d0d5dd`
-- Radius: 8px
-- Text: `#101828`, 16px weight 500
-- Placeholder: `#818da2`
-- Focus: `#005df9` border / ring
-
-### Badges
-**Danger / Alert**
+### Tinted text badge
+
+**Danger**
 - Background: `#fff6f5`
 - Text: `#f44f4f`
-- Padding: 2px 8px
-- Radius: 8px
-- Font: 12px weight 400
-
-### Tabs / Navigation
-- Inactive: `#667085` text, transparent background
-- Active: `#101828` text with 2px bottom border `#005df9`
-- Font: 14px weight 400
-- Sticky header on white with hairline `#e4e7ec` divider
-
-### List Items
+- Radius: `12px`
+- Padding: `2px 8px`
+- Font: `11px / 500 / Digital One Shinhan`
+- Use: `shc-badge--text type-tint theme-red` on the public home surface; evidence `home::span`.
+
+**Blue**
+- Background: `#ebf0ff`
+- Text: `#005df9`
+- Radius: `12px`
+- Padding: `2px 8px`
+- Font: `11px / 500 / Digital One Shinhan`
+- Use: `shc-badge--text type-tint theme-blue` on the public home surface; evidence `home::span`.
+
+### Navigation menu
+
+**Observed open menu**
 - Background: `#ffffff`
-- Text: `#344054`
-- Radius: 12px
-- Padding: 0px 12px
-- Divider: 1px `#e4e7ec` between rows
+- Text: `#101828`
+- Border: `1px solid #e4e7ec`
+- Radius: `12px`
+- Shadow: `rgba(12,17,29,0.1) 0px 4px 16px 0px`
+- Font: `14px / 400 / Digital One Shinhan`
+- State: `expanded`, `menu-open`
+- Use: `shc-dropdown__option` after the captured menu interaction on all three product surfaces; evidence `home::[data-omd-interaction-capture="menu-0-0"]`.
+
+Only the defaults and the one expanded menu state above are documented. The supplied evidence records menu expansion only; it does not establish hover, focus, disabled, error, pressed, dialog, toast, input, or tab-state variants for these components.
 
 ---
 
-**Verified:** 2026-06-09 (omd-add-reference live inspect)
-**Tier 1 sources:** https://www.shinhancard.com, https://www.shinhancard.com/pconts/html/main.html
+**Verified:** 2026-07-13
+**Tier 1 sources:** `https://www.shinhancard.com/pconts/html/main.html` (public product surface), `https://www.shinhancard.com/pconts/html/card/apply/credit/1232390_2207.html` (credit-card detail product surface), `https://www.shinhancard.com/pconts/html/card/apply/premium/1236160_2205.html` (premium-card detail product surface), `https://www.shinhancard.com/pconts/company/html/intro/business/business.html` (official company/business context), `https://www.shinhancard.com/pconts/company/html/promotion/press/1225309_3999.html` (official SOL Pay brand-transition context)
+**Tier 2 sources:** `https://getdesign.md/shinhancard` (attempted; built-in web open safe-open failure and no Shinhan Card record returned by search), `https://styles.refero.design/?q=Shinhan%20Card` (attempted; built-in web open safe-open failure and no matching indexed result returned by search)
+**Conflicts unresolved:** none
+
+Legacy primary text, tertiary/indigo button, input, tab, list-row, toggle, universal-card, broad responsive, and all unobserved interactive-state claims were removed because the supplied 2026 three-surface bundle does not support them.
 
 ## 5. Layout Principles
 
-### Spacing System
-- Base unit: 8px
-- Scale: 2px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
-- Notable: Tight inner button padding (2px vertical) contrasts with generous 24px card padding — chrome is dense, content surfaces are airy.
+### Observed spacing and shape
 
-### Grid & Container
-- Centered main column with full-width tinted section bands
-- Product/loan entries arranged as multi-column rounded card grids
-- Sticky top header with GNB navigation; footer carries customer-center numbers and legal links over `#ffffff`
-- Quick-link rows and statement-style lists use full-width `#ffffff` rows with hairline dividers
+The capture’s most frequent spacing values are 4, 8, 12, 20, and 24px. Component-level evidence gives the useful boundary: the toned action uses 8px 12px padding, while the product-detail tile uses 20px padding. Rounded values are not a single global scale: the captured actions and menus use 8, 12, 16, or 20px according to component.
 
-### Whitespace Philosophy
-- **Paper-layered depth**: Sections are distinguished by tinted surfaces (`#f8f9fc`, `#f0f4fa`, `#ebf0ff`) stacked over white, not by shadows.
-- **Airy cards, dense data**: Marketing cards get 24px padding while transactional list rows pack tightly for scanning statements.
-- **Rounded calm**: Consistent 12–16px radius across cards and buttons softens the institutional density.
+### Surface-domain boundary
 
-### Border Radius Scale
-- Small (8px): Inputs, badges, small chips
-- Standard (12px): Buttons, list rows, the workhorse radius
-- Large (16px): Cards, product tiles, large CTAs
-- Full (9999px): Toggles, pill selectors
+The three inspected URLs are public product-web surfaces. They are not a signed-in statement, checkout, or mobile-app capture, so this reference does not prescribe a transactional information architecture, responsive breakpoint map, or a universal grid.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, inline text |
-| Hairline (Level 1) | `#e4e7ec 0px 0px 0px 1px` ring | Cards, panels, content tiles |
-| Inset Line (Level 2) | `#d0d5dd 0px -1px 0px 0px inset` | Sticky headers, list-row bottoms, input bases |
-| Surface Tint (Level 3) | `#f8f9fc` / `#f0f4fa` / `#ebf0ff` stacking | Section separation without blur |
-| Focus Ring | `#005df9` outline | Keyboard focus, active input |
-
-**Shadow Philosophy**: Shinhan Card almost entirely avoids blurred drop shadows. Elevation is communicated through crisp 1px hairline rings (`#e4e7ec`) and inset bottom lines (`#d0d5dd`), reinforced by tinted-surface stacking. This produces a document-grade, paper-layered feel appropriate for a financial product where clarity and precision outrank decorative depth.
+The expanded `shc-dropdown__option` menu is the only directly measured elevated layer: `rgba(12,17,29,0.1) 0px 4px 16px 0px` with a 1px `#e4e7ec` border and 12px radius. The product tiles measured in this bundle use no blur shadow. This is evidence for those two observed contexts, not a general “no-shadow” rule for the whole product.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use `#005df9` as the single primary-action and link color
-- Separate surfaces with hairline `#e4e7ec` rings and tinted stacking rather than drop shadows
-- Use `#101828` (ink navy) for headings instead of pure black
-- Escalate weight (400 → 700 → 900) to build hierarchy
-- Keep radii in the 8–16px family for cards and buttons
-- Apply tight negative tracking (-0.28px) on dense Korean body text
-- Use `Digital One Shinhan` at every level for brand consistency
+
+- Use `#005df9` for a primary action only when applying the observed `shc-btn theme-primary size-xl` pattern.
+- Keep the observed `Digital One Shinhan` webfont metadata when the first-party files can be loaded; otherwise label it unavailable rather than substituting a system font as the brand face.
+- Preserve component provenance: product-detail tile values belong to the two card-detail URLs, while tint badges were observed on home.
+- Treat the 12px-radius elevated menu as an observed open-menu treatment, not a general card token.
 
 ### Don't
-- Don't introduce a second primary CTA color — blue carries all primary actions
-- Don't use heavy blurred drop shadows — hairlines and inset lines are the language
-- Don't use pure black (`#000000`) for headings — always `#101828`
-- Don't use pill/fully-rounded shapes on cards — those are reserved for toggles
-- Don't crowd cards — keep the airy 24px padding
-- Don't use the indigo (`#6268ff`) accent for standard primary CTAs — it is promotional
-- Don't apply positive letter-spacing on Hangul body text
+
+- Don't promote the declared `swiper-icons` face or the system fallback chain to Shinhan Card’s UI family.
+- Don't infer a white primary-button label, focus ring, hover style, disabled state, input spec, or tab treatment from the unobserved component states.
+- Don't extend public product-web measurements into signed-in app, checkout, or documentation UI.
+- Don't represent the prior indigo button, full-pill toggle, or universal 24px card as current canonical components without new evidence.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, stacked cards, larger tap targets |
-| Tablet | 640–1024px | 2-column card grids, moderate padding |
-| Desktop | 1024–1280px | Full multi-column product grids |
-| Large Desktop | >1280px | Centered content with generous side margins |
-
-### Touch Targets
-- Buttons keep comfortable horizontal padding (8–12px) with full-height tap zones
-- Navigation links at 14px with adequate row spacing
-- Cards span full width on mobile for easy tapping
-- `pc-only` list rows collapse out of the mobile layout
-
-### Collapsing Strategy
-- Hero: 32px display compresses on mobile, weight 900 maintained
-- Navigation: horizontal GNB → hamburger / drawer on mobile
-- Product cards: multi-column → 2-column → single column stacked
-- Statement/list rows: maintain full-width hairline-divided layout
-- Section spacing: 48px → reduced on mobile
-
-### Image Behavior
-- Card thumbnails maintain 16px radius at all sizes
-- Tinted section bands persist full-width across breakpoints
-- Promo cards keep their `#ebf0ff` surface and indigo accent on mobile
+No viewport comparison is present in the supplied evidence bundle. The reference therefore preserves no breakpoint, mobile-navigation, touch-target, or image-behaviour rule. A responsive claim requires a later capture that records the relevant viewport and component provenance.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA: Shinhan Blue (`#005df9`)
-- Background: Pure White (`#ffffff`)
-- Card surface: Off-white (`#f8f9fc`)
-- Promo surface: Surface Indigo (`#ebf0ff`)
-- Heading text: Ink (`#101828`)
-- Body text: Body (`#475467`)
-- Muted text: Muted (`#667085`)
-- Border: Hairline (`#e4e7ec`)
-- Link: Shinhan Blue (`#005df9`)
-- Accent: Indigo (`#6268ff`)
-- Error: Danger (`#f44f4f`)
-
-### Example Component Prompts
-- "Create a hero on white. Headline at 32px Digital One Shinhan weight 900, line-height 1.20, letter-spacing -0.64px, color #101828. Subtitle 16px weight 500, color #475467. Primary blue CTA (#005df9 bg, #ffffff text, 16px radius, 2px 12px padding) and tertiary button (#f0f4fa bg, #101828 text, 12px radius)."
-- "Design a product card: #f8f9fc background, 16px radius, 24px padding, 1px hairline ring #e4e7ec, no drop shadow. Title 21px weight 700 #101828, body 14px weight 400 #475467."
-- "Build a danger badge: #fff6f5 background, #f44f4f text, 8px radius, 2px 8px padding, 12px weight 400."
-- "Create tabs: inactive #667085 14px labels, active #101828 with 2px bottom border #005df9. Sticky white header with hairline #e4e7ec divider."
-- "Design an input: white background, 1px solid #d0d5dd border, 8px radius, 16px weight 500 #101828 text, #818da2 placeholder, focus border #005df9."
-
-### Iteration Guide
-1. Blue (`#005df9`) is the only primary-action color — never add a second
-2. Weight escalation (400 / 700 / 900) builds hierarchy before size
-3. Separate surfaces with hairline rings + tinted stacking, never heavy shadows
-4. Heading color is `#101828`, body `#475467`, muted `#667085`
-5. Radius family: 8px inputs, 12px buttons/rows, 16px cards, 9999px toggles
-6. Apply -0.28px tracking on body, -0.64px on display
-7. Indigo (`#6268ff`) and `#ebf0ff` are promotional only — not standard CTAs
-
----
+Use this reference as a constrained public-product-web sample, not a complete Shinhan Card application kit. A faithful observed action is `#005df9` background, `#101828` text, 16px radius, 2px 12px padding, and 14px/400 `Digital One Shinhan`; a toned detail-page action is `#f0f4fa`, `#101828`, 20px radius, and 8px 12px padding. For product-detail tiles, use `#f8f9fc`, 16px radius, and 20px padding only in that detail-page context. Do not invent a primary-button contrast color or interaction state.
 
 ## 10. Voice & Tone
 
-Shinhan Card's voice is that of a trusted, polished Korean financial partner — reassuring, clear, and service-oriented, without the stiffness of a legacy bank. Korean copy favors polite, customer-respecting registers and concrete benefit framing ("목돈이 필요할 때", "카드값이 부담될 때") that meets the user at a moment of need. Labels are plain and functional ("로그인", "마이페이지", "이용대금명세서"), prioritizing comprehension over cleverness. The tone is calm and competent: a major card issuer that wants the digital experience to feel as dependable as its physical card.
+Shinhan Card’s official business description uses a practical service register: card, instalment-finance, loan, lease, platform, and data services are named plainly, and SOL Pay is described as connecting financial life and everyday life. The public product surfaces therefore support a clear, task-oriented tone rather than speculative lifestyle copy. The 2023 SOL Pay announcement says the rebrand was intended to make the group’s digital brands easier for customers to understand and use; that supports clarity and familiarity as editorial goals, not a complete public copywriting standard.
 
-| Context | Tone |
-|---|---|
-| Hero / promo headlines | Benefit-first, situational. Speaks to a user's moment of need. |
-| Product descriptions | Concrete and plain. Names the product and the situation it solves. |
-| CTAs | Functional imperatives. "로그인", "다운로드", "신청하기". |
-| Form / error messages | Polite, specific, guiding. Explains what to fix. |
-| Navigation / menu | Noun-based, scannable. Mirrors banking task vocabulary. |
-| Legal / disclosure | Formal, regulatory-grade Korean. |
-| Customer center | Warm, accessible. Phone numbers surfaced prominently. |
+### Do
 
-**Forbidden phrases.** Hype superlatives ("혁신적인", "최고의" without basis), exclamation-heavy marketing, emoji on transactional surfaces, and vague benefit claims without a concrete product. The register stays trustworthy and service-grade.
+- Name the card or financial task directly.
+- Use short, respectful Korean labels that help a customer move through a known task.
+- Keep SOL Pay references tied to their stated payment and daily-finance role.
 
-## 11. Brand Narrative
+### Don't
 
-Shinhan Card is one of Korea's largest credit-card and consumer-finance companies, part of the Shinhan Financial Group, one of the country's leading financial conglomerates. As a major issuer, its remit spans credit and check cards, card loans (장기/단기카드대출), installment finance, and an expanding digital-payments footprint anchored by the SOL Pay app. The website positions Shinhan Card not merely as a card portal but as a financial-services super-app gateway — surfacing loans, statements, payments, and account management from a single, modernized hub.
+- Don't invent a brand slogan, executive quote, or promotional tone rule from component styling.
+- Don't turn regulatory, eligibility, or lending copy into casual lifestyle claims.
 
-The design reflects a deliberate modernization of the institutional banking experience. Rather than the dense navy chrome and corporate imagery typical of legacy financial portals, Shinhan Card adopts a light, rounded, fintech-adjacent aesthetic: white canvases, tinted surface layering, a single confident blue, and the proprietary `Digital One Shinhan` typeface that ties every touchpoint — web, app, card, and signage — to one coherent brand voice. This is a company signalling that it takes both trust and modern usability seriously.
+## 11. Brand Narrative
+
+Shinhan Card describes itself as a specialist finance company handling credit cards and instalment finance, with card loans and auto lease among its stated businesses. Its official business page places those services alongside a platform-and-data business that uses the digital Shinhan SOL Pay platform to connect customers’ financial lives and daily lives. It also situates the company’s current identity after the 2007 integration with LG Card.
 
-What Shinhan Card embraces: clarity over decoration, a single anchoring brand blue, paper-layered depth that reads as document-grade precision, and benefit-first copy that meets users at moments of financial need. What it avoids: heavy shadows, cluttered legacy chrome, and hype-driven marketing that would undercut a financial institution's credibility.
+The recent public evolution relevant to this reference is the SOL Pay naming transition. In its November 2023 announcement, Shinhan Card said the former life-finance platform Shinhan pLay had been renamed under the group’s Shinhan SOL digital brand while strengthening the card company’s payment identity. The captured web system belongs to public card and product-detail surfaces in that larger context; it is not evidence about the complete logged-in SOL Pay experience.
 
 ## 12. Principles
 
-1. **Trust through clarity.** Every surface prioritizes legibility and scannability — appropriate for a product where users read balances, statements, and terms. Decoration never competes with comprehension.
-2. **One anchoring blue.** `#005df9` carries all primary intent. A single, confident interactive color keeps the system disciplined and the brand instantly recognizable.
-3. **Weight, not noise.** Hierarchy is built through weight escalation (400 → 700 → 900), letting the neutral palette stay calm while importance is still unmistakable.
-4. **Paper, not blur.** Elevation is hairline rings and tinted stacking, not drop shadows. The interface should feel like a crisp, well-organized document.
-5. **One typeface, one voice.** `Digital One Shinhan` across every level unifies web, app, and physical brand into a single identity.
-6. **Meet the moment of need.** Copy is benefit-first and situational, addressing the user's financial context directly rather than abstractly.
-7. **Modern, but dependable.** Rounded geometry and airy spacing modernize the experience without sacrificing the steadiness a major financial institution must project.
+1. **Connect card services to daily finance.** Shinhan Card explicitly frames SOL Pay as linking financial life and daily life. *UI implication:* keep public product paths understandable as card, payment, and finance tasks rather than generic platform navigation.
+2. **Make the group digital brand easier to understand.** The SOL Pay announcement identifies intuitive understanding and easier use as the goal of the brand transition. *UI implication:* prefer direct labels and avoid using visual novelty as a replacement for task clarity.
+3. **Preserve evidence domains.** Public web product pages, corporate/company material, and a potentially signed-in app answer different questions. *UI implication:* reuse a captured public component only with its URL and state boundary; do not infer hidden product patterns.
 
 ## 13. Personas
 
-*Personas below are fictional archetypes informed by publicly observable Shinhan Card user segments (everyday cardholders, loan/credit users, mobile-payment adopters, and SMB owners), not individual people.*
-
-**Ji-woo Park, 29, Seoul.** Office worker who manages nearly everything through the SOL Pay app. Checks her statement weekly and values being able to see her 이용대금명세서 and reward points at a glance. Trusts Shinhan Card because the digital experience feels as reliable as the physical card, and the clean layout makes scanning transactions effortless.
+### Evidence-backed service audiences (not fictional personas)
 
-**Min-seok Kang, 41, Incheon.** Needs a short-term card loan to cover a cash-flow gap (단기카드대출). Appreciates that the site surfaces loan options with plain, situational labels ("소액 현금이 필요할 때") rather than burying them in jargon. Wants clear terms and a frictionless application — and distrusts financial sites that feel cluttered or pushy.
+- **Individual, corporate, and public-organization card users.** The official business page describes credit-card payment services for these groups. No individual behaviour, name, or demographic is asserted.
+- **Customers considering card-finance products.** The official page describes short-term and long-term card loans and instalment finance. This supports a service audience only, not a persona journey.
+- **SOL Pay users.** Shinhan Card describes SOL Pay as its digital platform for connecting finance and daily life. The supplied web capture does not expose a signed-in user flow or user-research segment.
 
-**Hye-jin Lim, 35, Busan.** Small-business owner exploring 개인사업자대출 and installment options. Works daily across statements and payment schedules. Values the dense, scannable list rows and the consistency between the web portal and the app. Would be frustrated by any redesign that added decoration at the expense of data density.
-
-**Seung-ho Yoon, 52, Daegu.** Long-time cardholder who primarily uses the web portal and customer center. Relies on the prominently displayed 고객센터 number and the formal, regulatory-grade disclosure copy to feel confident. Trusts the modernized look precisely because it still reads as a serious financial institution, not a flashy startup.
+Specific personas, motivations, and quotes remain **[FILL IN]** until supported by first-party research or user-provided material.
 
 ## 14. States
 
-| State | Treatment |
+| Observed state | Evidence boundary |
 |---|---|
-| **Empty (no transactions)** | White canvas. Single line in Muted (`#667085`) at 14px explaining no activity yet. One Shinhan Blue CTA. No illustration clutter. |
-| **Empty (no results)** | Muted (`#667085`) single line. Filter/search summary stays visible so the user can adjust. |
-| **Loading** | Skeleton blocks in Border (`#e4e7ec`) at final dimensions, paper-flat with subtle shimmer. No spinner overlays on content. |
-| **Error (form validation)** | Field-level. Danger (`#f44f4f`) text + `#fff6f5` tinted background. Message names what is invalid and how to fix it. |
-| **Error (request failed)** | Inline banner in Danger tone. Plain-Korean explanation plus a retry or customer-center path. No generic "오류가 발생했습니다" alone. |
-| **Success (action saved)** | Brief inline confirmation in Ink (`#101828`); blue accent on the affected row. Calm, no exclamation, no emoji. |
-| **Disabled** | Surface and text fade together; primary blue becomes a muted tint rather than switching to gray, preserving brand read. |
-| **Focus** | `#005df9` ring/border on inputs and interactive elements for clear keyboard navigation. |
-| **Active tab** | `#101828` label with 2px `#005df9` bottom border. |
+| Expanded navigation menu | Captured after a menu interaction on all three product surfaces; white surface, 1px `#e4e7ec` border, 12px radius, and `rgba(12,17,29,0.1) 0px 4px 16px 0px` shadow. |
+| Hover, focus, disabled, error, loading, empty, success, toast, dialog, and form validation | Not established by the supplied bundle; intentionally omitted rather than synthesized. |
 
 ## 15. Motion & Easing
 
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State commits, selection, focus rings |
-| `motion-fast` | 150ms | Hover, button press, tab switch |
-| `motion-standard` | 250ms | Drawer, modal, dropdown, accordion |
-| `motion-slow` | 350ms | Page-level transitions, hero reveals |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — sheets, drawers, dropdowns |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
-
-**Explicitly forbidden.** No bounce, no overshoot, no playful spring on transactional surfaces. A financial institution's motion is steady and predictable; motion exists to clarify continuity (which panel opened, which tab is active), never to delight at the cost of trust.
-
-**Signature motions.**
-
-1. **Tab indicator slide.** The `#005df9` 2px bottom border slides between tabs using `motion-fast / ease-standard`, signalling the active section without abrupt jumps.
-2. **Drawer / GNB reveal.** Mobile navigation slides in with `motion-standard / ease-enter`; surfaces fade their hairline rings into place rather than dropping shadows.
-3. **Surface tint transition.** Section bands crossfade their tinted backgrounds (`#f8f9fc` ↔ `#ebf0ff`) on scroll-into-view with `motion-slow`, keeping the paper-layered feel calm.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Tabs and drawers commit immediately; the portal stays fully functional.
-
-## 16. Do's and Don'ts
-
-### Do
-- Anchor every primary action and link in Shinhan Blue (`#005df9`)
-- Build hierarchy with weight (400 / 700 / 900) before reaching for size
-- Use hairline `#e4e7ec` rings and tinted surface stacking for separation
-- Keep `Digital One Shinhan` across all levels for a unified brand voice
-- Hold radii in the 8 / 12 / 16px family; reserve 9999px for toggles
-- Write benefit-first, situational Korean copy that meets the user's need
-- Use Ink (`#101828`) for headings, never pure black
-
-### Don't
-- Don't add a second primary CTA color alongside the blue
-- Don't apply heavy blurred drop shadows — hairlines and inset lines are the depth language
-- Don't use the indigo (`#6268ff`) accent for standard primary CTAs
-- Don't crowd cards — preserve the airy 24px padding
-- Don't use fully-rounded pill shapes on cards or content tiles
-- Don't lean on hype superlatives or emoji on transactional surfaces
-- Don't apply positive letter-spacing to dense Korean body text
+No motion duration, easing curve, or reduced-motion treatment was captured. The menu’s open state proves that a menu can expand; it does not prove a transition recipe. Motion tokens and animation guidance are therefore **[FILL IN]** pending a capture that records timing and behaviour.