zugzbot 1.2.0 → 1.4.0

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

@@ -1,453 +0,0 @@
----
-id: inflearn
-name: Inflearn
-country: KR
-category: education
-homepage: "https://www.inflearn.com"
-primary_color: "#00c471"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=inflearn.com&sz=256"
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#00c471"
-    primary-pressed: "#00a760"
-    heading: "#212529"
-    body: "#495057"
-    muted: "#868e96"
-    canvas: "#ffffff"
-    surface-neutral: "#f8f9fa"
-    border: "#dee2e6"
-    disabled-bg: "#f1f3f5"
-    disabled-fg: "#adb5bd"
-    error: "#fa5252"
-    info: "#228be6"
-    warning: "#fcc419"
-    teal-tag: "#1098ad"
-  typography:
-    family: { sans: "Pretendard", mono: "ui-monospace, SFMono-Regular, monospace" }
-    h1:      { size: 34, weight: 700, lineHeight: 1.3, use: "Page hero phrase" }
-    h2:      { size: 20, weight: 700, lineHeight: 1.35, use: "Section title" }
-    body:    { size: 16, weight: 400, lineHeight: 1.5, use: "Default running text" }
-    nav:     { size: 16, weight: 600, lineHeight: 1.5, use: "Nav label, button label" }
-    caption: { size: 14, weight: 400, lineHeight: 1.4, use: "Instructor name, view count, price subtext" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, lg: 32, full: 9999 }
-  shadow:
-    flat: "none"
-  components:
-    button-search: { type: button, bg: "#00c471", fg: "#ffffff", radius: 9999, font: "16px weight 400", use: "Signature green circle search-submit, 42px" }
-    button-primary: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, padding: "0 24px", font: "16px weight 600", use: "Filled label CTA, hover #00a760" }
-    nav-pill: { type: tab, bg: "#f8f9fa", fg: "#495057", radius: 32, font: "16px weight 600", use: "GNB nav pill, resting", active: "green tint bg, #00c471 text" }
-    button-ghost: { type: button, bg: "#ffffff", fg: "#495057", radius: 32, font: "16px weight 600", use: "Inline secondary GNB item, hover #f8f9fa" }
-    pagination-default: { type: button, bg: "#ffffff", fg: "#212529", radius: 8, font: "14px weight 400", use: "Page number button, gray border" }
-    pagination-active: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, font: "14px weight 400", use: "Selected page" }
-    button-disabled: { type: button, bg: "#f1f3f5", fg: "#adb5bd", radius: 8, use: "Form-incomplete state" }
-  components_harvested: true
----
-
-# Design System Inspiration of Inflearn
-
-## 1. Visual Theme & Atmosphere
-
-Inflearn (인프런) is the design language of a **Korean lifelong-learning marketplace that wants to feel like a friendly bookshop, not a corporate LMS**. Where Coursera leans on muted academic blues and Udemy crowds the screen with discount stickers, Inflearn opens onto a **clean white canvas** with a single saturated **mint-green** (`#00C471`) doing all the interactive work — search submit, primary CTAs, active pagination, "free starter" tags. The green is specifically *Korean fintech-adjacent mint* (kin to Toss/Banksalad/Naver Pay families, but pulled brighter and more yellow-leaning than any of them), signalling "trustworthy, modern Korean web" without inheriting either Naver's dated green-tab idiom or KakaoTalk's yellow warmth.
-
-The page furniture is unmistakably **Mantine-built**: 162 `--mantine-color-*` CSS variables are exposed at runtime, plus the full `--mantine-radius-{xs,sm,md,lg,xl}` and `--mantine-spacing-*` scale. Inflearn has effectively adopted Mantine's theme primitives wholesale and overridden them with a brand green. This means the **radius vocabulary is mostly 8px (`md`)** for cards, inputs, and pagination — neither aggressive flat-2px (Banksalad's data-tool register) nor consumer-app plump-16px (Toss). Two exceptions tell the story: navigation pills round to **32px** (extra-soft, "browse-don't-task" feel) and the **search-submit and tag chips go full-pill at `999px`** — the green circle search button is the one decisive, on-brand moment in a deliberately calm GNB.
-
-Typography is **Pretendard-first** with no custom display face. Headings (H1 34px / 700, H2 20px / 700) sit in Mantine-dark `#212529`, body text in `#495057`, muted metadata in `#868E96` — Inflearn does not use pure `#000` anywhere on type. The visual silhouette is intentionally close to "modern Korean SaaS landing" (Pretendard + clean white + one branded green) — recognizable to anyone who has used Toss, Wanted, or Banksalad — because Inflearn's audience overlaps heavily with those products and the brand wants instant credibility, not novelty.
-
-**Key Characteristics:**
-- Pretendard-first system font stack (no bundled web-font; OS fallback handles Korean coverage)
-- Signature mint-green `#00C471` for all primary action; brighter and more yellow than Toss/Banksalad mints
-- Mantine theme primitives exposed live (`--mantine-radius-md = 0.5rem`, `--mantine-color-*`)
-- Two radius families: cards/inputs at `8px`, nav pills at `32px`, decisive CTAs full-pill `999px`
-- Sticky white GNB at 65px — no shadow, no border — the green search button is the only visual accent
-- Course tiles are borderless transparent cards (`article.mantine-Card-root`, radius 8px, ~230×310px) — thumbnail does the visual work
-- Pagination uses solid-green active page on white surroundings — the same green as the CTA, no second accent hue
-- No theatrical shadow / no gradient — Inflearn is "calm catalog, friendly green"
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Inflearn Green** (`#00C471`): Primary brand color. Search submit, primary CTA, active pagination page, "starter / free" course tag fills, link accents.
-- **Inflearn Green Pressed** (`#00A760`): Pressed / focused / visited state. Observed as the high-frequency near-shade on the home palette histogram (450 instances) — likely the `:hover` / `:active` token paired with the primary.
-
-### Text
-- **Heading** (`#212529`): Mantine dark-9 equivalent. H1/H2/H3, course tile titles.
-- **Body** (`#495057`): Default reading text and nav link colour.
-- **Muted / Caption** (`#868E96`): Metadata, instructor sublabels, view counts.
-- **On-Green** (`#FFFFFF`): Text colour on every green surface (search submit, primary CTA, active pagination).
-
-### Surface
-- **Page** (`#FFFFFF`): Default canvas.
-- **Surface Neutral** (`#F8F9FA`): GNB pill button rest state, soft section dividers, secondary chip fills.
-- **Border / Divider Inferred** (`#DEE2E6`): Mantine gray-3 — implied separator hue (not directly captured but consistent with the Mantine system that Inflearn theme-extends).
-
-### Semantic (Mantine-inherited)
-- **Error Red** (`#FA5252`): Form validation errors, destructive confirmation. (Mantine red-6.)
-- **Info Blue** (`#228BE6`): Inline informational accent, link-type chips. (Mantine blue-6.)
-- **Warning Yellow** (`#FCC419`): Caution / pending states. (Mantine yellow-5.)
-- **Teal Tag** (`#1098AD`): Category / lecture-type tag accent (mantine cyan-7). Appears with notable frequency on course cards.
-
-Inflearn does not maintain a separate brand semantic palette — it inherits Mantine's `red / blue / yellow / cyan` scales and overrides only the `green` scale with the Inflearn primary. Designers picking from Inflearn should treat the Mantine palette as the de-facto extended system.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif`
-- **Mono**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` (carried from Mantine default — surfaces inside code-snippet course previews and dev-tools-style screenshots)
-- No custom display face. Headings use the same Pretendard stack; differentiation comes from weight and size only.
-- No bundled web-font on `/`. Korean glyphs render through the OS fallback chain.
-
-### Hierarchy
-
-| Role | Size | Weight | Line Height | Notes |
-|---|---|---|---|---|
-| H1 (page hero) | 34px | 700 | 44.2px (1.3) | Hero phrase: "인프런 - 라이프타임 커리어 플랫폼" |
-| H2 (section title) | 20px | 700 | 27px (1.35) | "0원으로 부담없이 시작하기" — section openers |
-| H3 (sub-section / card cluster head) | 18px (inferred) | 700 | 1.4 | Course-tile section labels |
-| Body | 16px | 400 | 1.5 | Default running text, nav default |
-| Nav label | 16px | 600 | 1.5 | "지식공유" / "로그인" / "카테고리" pills |
-| Button label (filled) | 16px | 600 | 1.0 | Primary CTA text |
-| Caption / Metadata | 13–14px (inferred) | 400 | 1.4 | Instructor name, view count, price subtext |
-
-### Rules
-- **Pretendard everywhere.** No serif, no rounded display face. Discipline is part of the calm-catalog feel.
-- **700 = heading. 600 = nav and labelled button. 400 = body, icon-only button, input.** There is no 500 — the weight scale is intentionally binary-ish.
-- Numerals (course price, ratings) inherit body weight 400 — Inflearn does not embolden prices the way fintech does. The decision to enrol should feel low-pressure.
-- Korean punctuation: full-width quotes `「」` / `『』` are avoided in UI; straight quotes only.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary CTA — Pill Search Submit**
-- Background: `#00C471`
-- Text: `#FFFFFF`
-- Border: 1px solid transparent
-- Radius: 999px
-- Padding: 0 (icon-only)
-- Height: 42px
-- Width: 42px
-- Font: 16px / 400 / Pretendard
-- Shadow: none
-- Use: The signature green circle search-submit button in the GNB — the single most-recognisable component on the site.
-
-**Primary CTA — Filled Label (Inferred)**
-- Background: `#00C471`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 0 16px (icon-button observed); 0 24px for labelled
-- Height: 42px
-- Font: 16px / 600 / Pretendard
-- Hover: background `#00A760`
-- Use: "수강신청", "결제하기", primary actions inside course detail / cart.
-
-**Nav Pill — Resting (Neutral)**
-- Background: `#F8F9FA`
-- Text: `#495057`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 22px (labelled) / 0 (icon-only 42×42)
-- Height: 42px
-- Font: 16px / 600 / Pretendard
-- Use: "로그인", "service-menu" icon, "카테고리" pill — every GNB action that is not the green search submit.
-
-**Nav Pill — Active (Selected)**
-- Background: `rgba(0, 196, 113, 0.1)` (inferred Mantine green tint)
-- Text: `#00C471`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 12px
-- Height: 42px
-- Font: 16px / 600 / Pretendard
-- Use: Active top-level nav section ("지식공유" when on /knowledge etc.).
-
-**Ghost / Text Link Button**
-- Background: transparent
-- Text: `#495057`
-- Border: 1px solid transparent
-- Radius: 32px
-- Padding: 0 12px
-- Font: 16px / 600 / Pretendard
-- Hover: background `#F8F9FA`
-- Use: Inline secondary GNB items ("지식공유"), category-row navigation.
-
-**Pagination — Default**
-- Background: `#FFFFFF`
-- Text: `#212529`
-- Border: 1px solid `#DEE2E6` (Mantine gray-3, inferred)
-- Radius: 8px
-- Padding: 0 12px
-- Height: 38px
-- Font: 14px / 400 / Pretendard
-- Use: Page number buttons on /courses listing.
-
-**Pagination — Active**
-- Background: `#00C471`
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 8px
-- Padding: 0 12px
-- Height: 38px
-- Font: 14px / 400 / Pretendard
-- Use: Currently selected page in the /courses pagination cluster.
-
-**Disabled (Inferred from Mantine default)**
-- Background: `#F1F3F5`
-- Text: `#ADB5BD`
-- Border: none
-- Radius: 8px
-- Padding: 12px 24px
-- Font: 16px / 600 / Pretendard
-- Use: Form-incomplete state on enrol / payment flows.
-
-### Inputs & Forms
-
-**Text Input — Default (Search)**
-- Background: `#FFFFFF`
-- Text: `#212529`
-- Placeholder: `#868E96` (inferred)
-- Border: 1px solid `#DEE2E6` (inferred — captured border was `0px none` on the inner input element; outer wrapper carries the border per Mantine pattern)
-- Radius: 8px
-- Padding: 0 12px
-- Height: 36px
-- Font: 16px / 400 / Pretendard
-- Use: GNB search field — paired with the green pill submit on its right.
-
-**Text Input — Focus (Inferred)**
-- Background: `#FFFFFF`
-- Border: 1px solid `#00C471`
-- Use: All form fields on focus.
-
-### Cards & Containers
-
-**Course Tile (Default)**
-- Background: transparent
-- Border: none
-- Radius: 8px
-- Padding: 0 (thumbnail is the visual container; metadata sits below in flow)
-- Width × Height: ~230 × 310px (home) / ~230 × 325px (/courses)
-- Shadow: none
-- Use: The dominant content unit. A `article.mantine-Card-root` wrapper with a thumbnail image (radius 8px), title in `#212529` 700, instructor in `#868E96`, price in `#212529` 400, optional green starter / red discount tags.
-
-**Course Tile — Featured / Highlighted (Inferred)**
-- Background: `#FFFFFF`
-- Border: 1px solid `#DEE2E6` (Mantine gray-3)
-- Radius: 8px
-- Padding: 16px
-- Shadow: `0 1px 3px rgba(0, 0, 0, 0.05)` (Mantine `--mantine-shadow-xs` equivalent)
-- Use: "추천" / promoted course slot on home rails.
-
-**Tag — Free / Starter**
-- Background: `rgba(0, 196, 113, 0.12)`
-- Text: `#00C471`
-- Radius: 999px
-- Padding: 2px 10px
-- Font: 12px / 600 / Pretendard
-- Use: "무료" / starter-course indicator on course tiles.
-
-**Tag — Category (Cyan-Teal)**
-- Background: `rgba(16, 152, 173, 0.1)`
-- Text: `#1098AD`
-- Radius: 999px
-- Padding: 2px 10px
-- Font: 12px / 600 / Pretendard
-- Use: Category / lecture-type tags on tiles.
-
-### Navigation
-
-**Global Nav (GNB)**
-- Background: `#FFFFFF`
-- Text: `#495057` (default) / `#212529` (heading & emphasized)
-- Border-bottom: none
-- Shadow: none
-- Position: sticky
-- Height: 65px
-- Layout: [logo] · [primary nav pills] · [search input + green pill submit] · [right-side icon pills + 로그인]
-- Use: The single GNB pattern; persists across home, courses, detail.
-
-**Footer (Inferred)**
-- Background: `#F8F9FA` (Mantine gray-0)
-- Text: `#495057` / `#868E96` for secondary lines
-- Padding: 48px 0 (block) — Mantine spacing-xl × 2
-- Use: Standard 4-column link list + company-info row.
-
----
-
-**Verified:** 2026-05-14
-**Tier 1 sources:**
-- `https://www.inflearn.com/` — live CDP inspect (browser-harness :9222) → `assets/_reference/.live-inspect-proof.json` (12 raw_samples + 162 `--mantine-*` CSS vars + h1/h2 typography sample)
-- `https://www.inflearn.com/courses` — second-surface live CDP inspect → `assets/_reference/.live-inspect-proof-courses.json` (8 raw_samples + pagination active-state observed `#00C471`)
-- `https://tech.inflab.com/20260305-new-header/` — Inflearn engineering blog post "MFE 환경에서 공통 헤더(GNB) 개편하기" confirming GNB rebuild as shared MFE component
-
-**Tier 2 sources:**
-- `https://getdesign.md/inflearn` — empty (verified 2026-05-14: "No designs found for 'inflearn'")
-- `https://styles.refero.design/?q=inflearn` — empty (verified 2026-05-14: no result cards returned)
-
-**Conflicts unresolved:** none
-
-**Inferred-but-not-live-captured tokens** (flagged for follow-up UPDATE on a course-detail / cart / payment surface): Primary CTA labelled fill (only icon-pill captured), focus state on inputs, disabled state, tag chip exact alpha values, footer exact spacing.
-
-## 5. Layout & Spacing
-
-Inflearn inherits Mantine's spacing scale verbatim:
-
-| Token | Value | Typical use |
-|---|---|---|
-| `--mantine-spacing-xs` | `0.625rem` (10px) | Tight chip/tag padding, inline icon gaps |
-| `--mantine-spacing-sm` | `0.75rem` (12px) | Button horizontal padding, list-item gutters |
-| `--mantine-spacing-md` | `1rem` (16px) | Default card padding, form field gap |
-| `--mantine-spacing-lg` | `1.25rem` (20px) | Section content gutter |
-| `--mantine-spacing-xl` | `1.5rem` (24px) | Section block separator, footer column gap |
-
-Course rails on the home page use a **6-column horizontal grid** (`~230px` tile × 6 = 1380px content width) with `24px` gap between tiles. The GNB content sits inside a `max-w-1200` container with `16px` left/right padding on viewport widths < 1280px. Vertical rhythm between content blocks is `48px–64px` — Mantine `xl × 2` to `xl × 2.5`.
-
-Density is **catalog-tight, not Toss-airy** — Inflearn assumes a returning user scanning for the next course, so it packs more tiles per fold than a marketing-first SaaS landing would. This is the major visual difference between Inflearn and (for example) Wanted: same Pretendard font, same Mantine-like radius vocabulary, but Inflearn shows you ~24 tiles above the fold; Wanted shows ~6.
-
-## 6. Iconography & Imagery
-
-- **Icon set**: Custom SVG line icons (24×24 viewbox, 1.5px stroke) for the GNB and inline actions. Stroke colour follows text-context (`#495057` default, `#00C471` when paired with active green surface).
-- **Course thumbnail style**: 16:9 photographic or illustrative — wide stylistic range because covers are author-submitted. Inflearn standardizes the radius (8px) and aspect ratio, not the art direction.
-- **Hero illustrations**: When used, soft flat-vector with a single mint-green accent so they read as "Inflearn-coloured" without dominating.
-- **Photography**: Sparse on product surfaces; reserved for instructor profile portraits in course detail.
-
-## 7. Motion
-
-Inflearn motion is **minimal-functional**:
-- Nav pill hover: background fade `200ms ease`.
-- Card hover: thumbnail scale `1.0 → 1.02`, `200ms ease-out`, paired with a subtle elevation increase (shadow `xs` → `sm`).
-- Page transitions: no client-side animated transitions — full SSR navigation on link click; the perceived motion budget is spent on the in-place hover affordances.
-- Loading: Mantine `Loader` (rotating dot ring) in `#00C471`.
-
-Mantine's default transition timing function is `--mantine-transition-timing-function: ease` — Inflearn does not override it.
-
-## 8. States
-
-- **Hover**: nav pill bg `#F8F9FA → #E9ECEF` (inferred); card thumbnail scale 1.02; CTA bg `#00C471 → #00A760`.
-- **Focus**: 2px outline `#00C471` at 2px offset on keyboard focus; input border swaps to `#00C471`.
-- **Active / Pressed**: CTA bg `#00A760`; pagination active page solid `#00C471` on white.
-- **Disabled**: Mantine default — `#F1F3F5` background, `#ADB5BD` text, `cursor: not-allowed`.
-- **Loading**: Mantine `Loader` in primary green; CTA can swap label for inline spinner.
-- **Empty**: Centered illustration + headline (`아직 수강 중인 강의가 없어요`) + secondary outlined CTA (`강의 둘러보기`).
-- **Error**: Inline `#FA5252` 14px text below the offending field; field border swaps to `#FA5252`.
-- **Success**: One-line confirmation in `#00C471` 14px, no toast theatre.
-- **Skeleton**: `#F1F3F5` block, shimmer `1.5s` linear (Mantine `Skeleton` default).
-
-## 9. Accessibility & Internationalization
-
-- **Korean is the primary language.** English surfaces exist for `/en/` mirror but are translations, not parity. Date formats follow Korean conventions (`2026년 5월 14일`).
-- **Pretendard** is a Korean-display-first font — supports the full Hangul block plus extended Latin; English text reads naturally without a separate Latin font.
-- **Color contrast**: Heading `#212529` on `#FFFFFF` = 16.0:1 (AAA). Body `#495057` on `#FFFFFF` = 8.6:1 (AAA). Primary green `#00C471` on `#FFFFFF` = 2.45:1 — **fails AA for body text**; Inflearn correctly uses it only on white-on-green CTAs (where contrast is 4.4:1, passes AA), as accent fills, and for >18pt heading-scale text. Designers should not use `#00C471` for body-text links without a darker variant — use `#00A760` (3.5:1, still borderline AA for body) and prefer underline + bold.
-- **Keyboard nav**: Mantine `focusRing="auto"` — visible 2px green ring on Tab navigation.
-- **Screen reader**: GNB icon-only buttons carry `aria-label` (`search-menu`, `service-menu` observed). Course tiles use semantic `<article>`.
-
-
-## 16. Do's and Don'ts
-
-### Do
-- Use the single mint-green #00C471 for all primary action — search submit, primary CTA, active pagination, free/starter tag fills — and swap to #00A760 only for hover/pressed states
-- Set type in the Pretendard-first stack with a binary-ish weight scale: 700 for headings (H1 34px, H2 20px), 600 for nav and labelled buttons, 400 for body and prices — there is no 500
-- Apply the two-family radius vocabulary: 8px for cards, inputs, and pagination; 32px for nav pills; and full-pill 999px only for the green search submit and tag chips
-- Render the GNB as a sticky 65px white bar with no shadow and no border, letting the green circular search button be the only visual accent
-- Keep course tiles borderless and transparent (~230x310px, 8px thumbnail radius) so the thumbnail does the visual work, with title in #212529, instructor in #868E96, and price in #212529 weight 400
-- Inherit the Mantine semantic palette for non-brand needs — red #FA5252 for errors, blue #228BE6 for info, cyan-teal #1098AD for category tags — and reach for it instead of inventing new hues
-
-### Don't
-- Introduce a second brand accent hue for a sub-product — tint the existing #00C471 (e.g. rgba(0,196,113,0.1)) or fall back to the Mantine red/blue/yellow/cyan scales instead
-- Use #00C471 for body-text links or small text — it scores only 2.45:1 on white and fails AA, so reserve it for white-on-green CTAs and >18pt headings
-- Embolden prices in red or add strikethrough discount callouts outside intentional sale rails — keep price in body weight 400 as a fact, not a flag
-- Add campaign drama like rotating banner carousels, parallax, or auto-advancing home rails — show ~24 calm catalog tiles above the fold and make card thumbnail scale (1.0 to 1.02) the only ambient motion
-- Use pressure or hype microcopy such as 지금 바로!, 놓치지 마세요, 최저가, 최고의 강의, Oops!, or 오류가 발생했습니다 — write agency-on-the-learner copy in casual-polite ~해요 instead
-- Call instructors 강사 or 교수 or pit them against each other with ranking labels — use the brand term 지식공유자님 and neutral counts like 수강생 12,400명
-
----
-
-## 10. Voice & Tone
-
-Inflearn speaks like **the friendly senior who shows you their bookshelf**, not the strict instructor. The tagline "**라이프타임 커리어 플랫폼**" (lifetime career platform) is the single most load-bearing piece of voice on the site — every microcopy decision reinforces *"learning is something you keep doing"* rather than *"finish this course and pass"*. Where Coursera says *"Earn a verified certificate"* and Udemy says *"30-Day Money-Back Guarantee"*, Inflearn says *"부담없이 시작하기"* (start without pressure) — the verb framing is always agency-on-the-learner, not pressure-from-the-platform.
-
-Korean is the dominant register; English appears only for technical course titles (where the technology has an English name — "React", "Spring", "Kubernetes") and for the `/en` mirror. The voice avoids the formal `~합니다` ending in product surfaces (it survives in legal / refund / receipt screens) and uses the casual-polite `~해요` everywhere users are choosing what to learn.
-
-| Context | Tone |
-|---|---|
-| CTAs | Imperative + concrete outcome, no exclamation. `수강신청 하기`, `결제하기`, `장바구니에 담기`. Never `지금 바로!`. |
-| Section headlines | A friendly invitation, not a sales hook. `0원으로 부담없이 시작하기` rather than `무료 강의 BEST 100!`. |
-| Course tile metadata | Bare facts. Instructor name, run time, rating, price. No promotional copy on the tile itself. |
-| Free tag | Two characters: `무료`. Green pill on white tile. No "FREE!" / "Limited time!" framing. |
-| Empty states | Why empty + one next step. `아직 수강 중인 강의가 없어요. 관심 분야의 강의를 둘러보세요.` |
-| Error / validation | Specific cause + action. `이메일 형식이 올바르지 않아요. 다시 확인해주세요.` Never `오류가 발생했습니다`. |
-| Success | One line, no celebration. `수강신청이 완료되었어요. 내 강의실에서 확인할 수 있어요.` |
-| Instructor surfaces | Respectful 2nd-person `~님`. `지식공유자님` is the brand term for instructor — never `강사`, which would feel one-way. |
-
-**Forbidden phrases (illustrative — not from a published Inflearn guide; derived from observed restraint on `/` and `/courses`)**: `오류가 발생했습니다`, `놓치지 마세요`, `Oops!`, `지금 바로!`, `최저가`, exclamation marks on routine CTAs, emoji on price or enrolment surfaces, superlatives on course recommendations (`최고의 강의`, `이번 주 1등`). Where ranking matters, Inflearn uses neutral counts (`수강생 12,400명`) instead of editorialized rank labels.
-
-## 11. Brand Narrative
-
-Inflearn was founded in **2015** by **Lee Hyung-joo (이형주)** under the parent company **Inflab (인프랩)**, headquartered in Seoul. The founding observation was specifically Korean: that working developers, designers, and PMs were learning more from short-form online courses than from university or formal certification, but the existing Korean e-learning market was dominated by exam-prep cram services (수능, 공무원) that treated adult professional learners as if they were teenagers preparing for the SAT.
-
-Inflearn's bet was that **the same people who built the Korean IT industry — engineers, designers, marketers — would also teach it**, if given a low-friction marketplace and a respectful split of the revenue. The platform brand name itself is *Information + Learn*, and Inflab's tagline frames the company as a **"lifetime career platform"** rather than an LMS or a course store — the design language reflects that framing: a calm catalog you return to, not a campaign-driven sales surface.
-
-By 2026, Inflearn lists tens of thousands of courses across IT, design, business, language, and lifestyle, and has expanded into roadmap-style course bundles, live mentoring, and a Q&A community. The visual evolution from the early-2010s blue-and-white directory layout to the current Mantine-built mint-green catalog is itself documented on the Inflab engineering blog (`tech.inflab.com`), where the team has written publicly about the design and infrastructure of the redesign — including, in 2026-03, a post on rebuilding the shared GNB header across the company's micro-frontend architecture.
-
-## 12. Principles
-
-1. **Friendly, not formal.** Casual-polite `~해요` is the default Korean ending. *UI implication:* avoid `~하시기 바랍니다` in product surfaces; reserve `~합니다` for legal screens.
-
-2. **Catalog density over campaign drama.** Returning users dominate the audience; the home page is a place to *scan*, not to *be sold to*. *UI implication:* show ~24 course tiles above the fold; reserve hero space for one calm headline, not a rotating banner carousel.
-
-3. **One green, used decisively.** A single brand colour for every interaction. *UI implication:* never introduce a secondary brand colour for a sub-product; tint the existing green or fall back to the Mantine semantic palette (red/blue/yellow/cyan).
-
-4. **The instructor is `지식공유자님`.** Knowledge-sharer, not lecturer. *UI implication:* avoid hierarchy language (`강사` / `교수`) and avoid star/rating language that pits instructors against each other on the same screen.
-
-5. **Price is a fact, not a flag.** Course prices appear in body weight 400, not bold red, not strikethrough-with-discount-callout (except on intentional sale rails). *UI implication:* a course tile is a content card first, a commerce card second.
-
-## 13. Personas
-
-*(Personas inferred from observable surface targeting on `/`, `/courses`, `tech.inflab.com`; not from a published Inflearn persona doc.)*
-
-- **The Switching IC.** 28–35, working in a Korean tech / non-tech company, considering a role pivot (e.g., backend engineer thinking about ML, marketer thinking about product). Comes to Inflearn evenings and weekends; values roadmap-style course bundles; reads instructor credentials carefully.
-
-- **The Senior Upskilling.** 35–45, mid-to-senior IC or first-line manager, topping up a specific gap (Kubernetes, React Server Components, FP&A). Buys 1–2 courses per quarter; impatient with marketing fluff; wants the table-of-contents on screen before deciding.
-
-- **The Student-to-Industry.** 21–26, university or bootcamp student, building the portfolio for first-job applications. Uses the free starter (`무료`) courses heavily; price-sensitive; the green free-tag is the most-clicked element on the home page for this persona.
-
-- **The Adjacent-Function Curious.** 28–40, designer learning a bit of code, PM learning analytics, engineer learning design. Browses outside their core category; sensitive to course difficulty signalling; relies on instructor rating and student count more than course title.
-
-## 14. States Catalog
-
-| Category | Treatment |
-|---|---|
-| **Empty — My Courses** | Center-aligned illustration; `아직 수강 중인 강의가 없어요`; secondary outlined CTA `강의 둘러보기` linking to `/courses`. |
-| **Empty — Wishlist** | `위시리스트가 비어 있어요. 마음에 드는 강의를 담아두세요.` + secondary CTA. |
-| **Empty — Search results** | `'<query>'에 대한 결과가 없어요.` + 3 chip suggestions from related categories. |
-| **Loading — page** | Mantine `Skeleton` placeholders for course tiles (6 tiles per row, 230×310). |
-| **Loading — submit** | Inline 16px spinner replaces CTA label; CTA remains green; pointer disabled. |
-| **Error — Network** | Inline banner `네트워크 연결을 확인해주세요. 다시 시도하시면 정상적으로 이용하실 수 있어요.` `다시 시도` outlined button. |
-| **Error — Validation** | 14px `#FA5252` text below field; field border `#FA5252`; field icon-side error icon. |
-| **Error — Payment** | Modal with specific cause line + `다른 결제 수단으로 시도하기` primary button. |
-| **Success — Enrolment** | Inline `수강신청이 완료되었어요.` `내 강의실로 가기` primary CTA. |
-| **Skeleton — Card** | `#F1F3F5` blocks for thumbnail (16:9) + 2 text lines; shimmer 1.5s linear. |
-| **Disabled — Form** | `#F1F3F5` bg, `#ADB5BD` text, `cursor: not-allowed`. Tooltip on hover explaining what is missing. |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 150ms | Hover bg fade, focus ring appear |
-| `motion-base` | 200ms | Card thumbnail scale, nav pill bg, button colour |
-| `motion-slow` | 300ms | Modal open, drawer slide |
-| `easing-default` | `ease` | All hover / focus transitions (Mantine default — `--mantine-transition-timing-function`) |
-| `easing-emphasized` | `cubic-bezier(0.4, 0, 0.2, 1)` | Modal / drawer enter — material-style emphasized easing |
-| `easing-decelerate` | `cubic-bezier(0, 0, 0.2, 1)` | Skeleton shimmer, page-content fade-in |
-
-**Motion rules**:
-- No carousel auto-advance on home rails (a deliberate departure from Korean commerce convention; Inflearn's audience is reading instructor names, not glancing at banners).
-- No parallax. No scroll-triggered hero animation on the marketing surfaces.
-- Card hover is the only ambient motion — every other animation requires explicit user input.
-- Respect `prefers-reduced-motion: reduce` — fall back to instant transitions, keep colour fades only.

package/.opencode/oh-my-design/design-md/inflearn/_promo.json

@@ -1,29 +0,0 @@
-{
-  "id": "inflearn",
-  "korean": "인프런",
-  "logo_url": "https://www.inflearn.com/static/favicon.ico",
-  "highlight": {
-    "type": "palette",
-    "tokens": {
-      "primary": "#00C471",
-      "pressed_inferred": "#00A760",
-      "heading": "#212529",
-      "body": "#495057",
-      "muted": "#868E96",
-      "surface_neutral": "#F8F9FA",
-      "radius_card": "8px",
-      "radius_nav_pill": "32px",
-      "radius_cta_full_pill": "999px",
-      "font": "Pretendard",
-      "framework": "Mantine UI"
-    },
-    "label": "인프런 그린 × Mantine 8/32/999px — 캠페인 아닌 카탈로그의 톤"
-  },
-  "design_system": {
-    "name": "Inflab Tech Blog",
-    "url": "https://tech.inflab.com/",
-    "type": "brand",
-    "description": "Engineering blog of Inflab (Inflearn's parent). Contains MFE / shared-GNB architecture posts but no canonical token table; the DS lives in production code via Mantine theme overrides.",
-    "live_verified": "2026-05-14"
-  }
-}

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

@@ -1,85 +0,0 @@
-# Inflearn — Reference Research Log
-
-**Mode**: CREATE
-**Verification date**: 2026-05-14
-**Capture method**: CDP Runtime.evaluate via `localhost:9222` (browser-harness skill)
-
----
-
-## Tier 1 — Live inspect + brand-owned sources
-
-| # | Source | Type | Status | Used in §§ |
-|---|--------|------|--------|------------|
-| 1 | `https://www.inflearn.com/` | Live DOM inspect (CDP, 12 raw_samples, 162 `--mantine-color-*` vars + `--mantine-radius-*` + `--mantine-spacing-*` + `--mantine-font-family`) | ✅ 200 | §1, §2, §3, §4, §5, §7, §9 |
-| 2 | `https://www.inflearn.com/courses` | Live DOM inspect (CDP, 8 raw_samples, pagination active-state `#00C471` confirmed, 38 mantine-Card-root tiles observed) | ✅ 200 | §4 (pagination), §5, §6 |
-| 3 | `https://tech.inflab.com/` | Inflearn engineering blog index | ✅ 200 | §11 |
-| 4 | `https://tech.inflab.com/20260305-new-header/` | Blog post: "MFE 환경에서 공통 헤더(GNB) 개편하기" — confirms GNB rebuild as shared MFE component | ✅ 200 | §11, §4 (GNB) |
-
-**Capture artefacts** (live-inspect proof, ≥5 raw_samples required, **20 captured**):
-- `assets/_reference/.live-inspect-proof.json` — home + courses raw_samples + palette histograms + mantine-evidence
-- `assets/_reference/.live-inspect-proof-courses.json` — full /courses second-surface capture
-- `assets/_reference/tokens.json` — distilled brand tokens
-- `assets/_reference/structure.json` — IA + layout signals
-- `assets/_reference/fonts.json` — typography sample
-
----
-
-## Tier 2 — Third-party directories
-
-| # | Source | Status | Notes |
-|---|--------|--------|-------|
-| 5 | `https://getdesign.md/inflearn` | ❌ Empty | Verified 2026-05-14 — page returns explicit "No designs found for 'inflearn'". |
-| 6 | `https://styles.refero.design/?q=inflearn` | ❌ Empty | Verified 2026-05-14 — no result cards returned for the query. |
-
-**Tier 2 conclusion**: Same pattern as the 2026-05-13 KR-10 batch — Tier 2 directories have weak Korean coverage. No conflict to resolve because Tier 2 produced no values. Tier 1 carries the entire system.
-
----
-
-## Tier 3 — Reconcile
-
-No conflicts. All §4 token values come from Tier 1 live inspect, with two explicit notes:
-
-1. **`#00A760` hover / pressed green** is inferred from the palette histogram (it appears 450× and 248× on home and /courses respectively, alongside the captured primary `#00C471`). Designers wanting authoritative hover/active values should inspect a button on the courses-detail page (TODO: follow-up UPDATE pass).
-2. **Disabled / focus / error focus tokens** are Mantine-default-inherited; called out as `(Inferred)` in §4 where directly captured values were not available.
-
----
-
-## Tier 1 vs. Tier 2 matrix
-
-| Field | Tier 1 (live) | getdesign | refero | Resolution |
-|---|---|---|---|---|
-| Primary green | `#00C471` (rgb(0,196,113), search submit + pagination active) | — | — | Tier 1 |
-| Font family | Pretendard stack | — | — | Tier 1 |
-| Radius scale | `xs=2px`, `sm=4px`, `md=8px`, `lg=16px`, `xl=32px` (from `--mantine-radius-*`) | — | — | Tier 1 |
-| Heading colour | `#212529` | — | — | Tier 1 |
-| Framework | Mantine UI (162 `--mantine-color-*` vars) | — | — | Tier 1 |
-| GNB height | 65px sticky white | — | — | Tier 1 |
-| Instructor term | `지식공유자` (knowledge-sharer) — from product copy + tech.inflab.com | — | — | Tier 1 |
-
-No (unresolved) flags.
-
----
-
-## Public design system surface
-
-**No public DS docs site found** (verified 2026-05-14):
-- `design.inflearn.com` — not resolving
-- `inflearn-design.github.io` — not present
-- Inflab GitHub org — no public DS / component-library repo discovered via `gh search`
-- `tech.inflab.com` — engineering blog, contains MFE / GNB / infra posts but no canonical token table
-
-→ Inflearn DS lives **in code on production**, accessible only via runtime inspect of Mantine theme variables. This is the same pattern as `29cm` / `ably` / `zigbang` in the 2026-05-13 KR-10 batch.
-
----
-
-## Confidence
-
-**High** for the captured surfaces (home + courses).
-**Medium** for inferred states (hover/pressed/focus/disabled/error-focus) — `(Inferred)` annotations in §4 are honest about this.
-**Follow-up UPDATE pass** recommended on a course detail + payment surface to capture the labelled-primary CTA, form focus, and disabled states authoritatively.
-
-## IP guardrails applied
-
-- No verbatim taglines: Inflearn's *"라이프타임 커리어 플랫폼"* is quoted once in §11 as factual brand-narrative context, not adopted as design copy.
-- Brand assets are referenced for visual study only; no logo file copied into `assets/_reference/`.
-- Voice samples in §10 are illustrative reconstructions in the casual-polite Korean register; not lifted verbatim from Inflearn surfaces.