designmd-forge 1.2.0

package/dist/data/designs/ios-kakaotalk.md

@@ -0,0 +1,414 @@
+# Design System Inspiration of KakaoTalk (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+KakaoTalk's iOS app is the everyday super-app of South Korea — messaging at its core, with gifting, payments, channels, and shopping wrapped around it. Its design language is instantly identifiable by one thing: **Kakao Yellow (`#FEE500`)**, a saturated, almost-electric yellow that paints the outbound chat bubble, the primary CTA, and the rounded speech-bubble logo, always paired with a deep, near-black **Kakao Brown (`#3C1E1E`)** for the text that sits on that yellow. This yellow-and-brown pairing is the brand's whole personality: warm, playful, friendly, and unmistakably Korean. The app itself stays restrained — clean light backgrounds, a calm light-gray chat thread, plain system text — so the yellow can do the talking exactly where it matters.
+
+Two screens anchor the product. The **Friends tab** is a vertically scrolling roster: your own profile banner at the top (rounded-square avatar, name, a one-line status message that often includes emoji), then a "Friends · N" section header, then friend rows — each a rounded-square avatar, name in semibold, and a status line (a mood, a now-playing track via the music badge, or "출근중..." style text). Below friends come Channels (Kakao's brand/business accounts). The **chat thread** is KakaoTalk's heart: inbound bubbles in light gray on the left with the sender's rounded-square avatar and small name above, outbound bubbles in Kakao Yellow on the right, and — the signature detail — the **unread-count number and timestamp docked to the inner side of the bubble**, not inside it. That little yellow "1" next to a bubble (meaning "1 person hasn't read this yet") is one of the most culturally recognizable UI elements in Korea.
+
+KakaoTalk's other defining content type is **emoticons and gifticons**. Emoticons are Kakao Friends characters (Ryan the lionless-lion, Apeach, Muzi, Tube) sent as large stickers — they're a core revenue and expression channel, not an afterthought. Gifticons are sendable gift vouchers (a coffee, a cake, a chicken) that arrive as a rich card in the thread with a product image, brand, and name; the recipient redeems it with a barcode. The composer reflects this: a `+`/menu icon (to send gifticons, photos, money, location, schedules), a pill text field, and an emoticon-face icon that opens the Kakao Friends sticker keyboard.
+
+Typography is the iOS system face (SF Pro) for Latin and the platform Korean face (Apple SD Gothic Neo) for Hangul; KakaoTalk does use a heavier "KakaoBig"-style weight for big titles. Hierarchy is utilitarian: bold nav titles, semibold list names, regular message body, small gray status/metadata. The type stays quiet and lets the yellow, the rounded-square avatars, and the Kakao Friends characters carry the brand.
+
+**Key Characteristics:**
+- Kakao Yellow (`#FEE500`) outbound bubbles + primary CTA + speech-bubble logo, on Kakao Brown (`#3C1E1E`) text
+- Calm canvas — light gray/white light mode, warm charcoal `#1A1A1A` dark; a distinct light-gray chat thread backdrop
+- Unread count + timestamp docked to the bubble's **inner side** — the yellow "1" is iconic in Korea
+- Rounded-square avatars (≈16pt radius) — never circles — across friends, chat, and channels
+- Friends tab: my-profile banner + "Friends · N" section + friend rows with status/now-playing
+- Emoticons = Kakao Friends characters (Ryan / Apeach / Muzi / Tube) as large stickers — first-class
+- Gifticons — sendable gift vouchers that arrive as a rich product card with a barcode redeem
+- Channels — Kakao brand/business accounts listed below friends
+- Bottom tab bar: Friends / Chats / Open (Chat) / Shopping / More — super-app surface area
+- Status message line on profiles (a mood + emoji) — the social texture of Korean messaging
+- Bubbles are gently rounded (≈14pt) with the head corner squared to ≈4pt
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Kakao Yellow** (`#FEE500`): The brand. Outbound message bubbles, primary CTA buttons, speech-bubble logo, unread count mark, key highlights.
+- **Kakao Yellow Pressed** (`#E6CF00`): Pressed/active state on yellow buttons and bubbles.
+- **Kakao Brown** (`#3C1E1E`): Text and glyphs that sit on yellow — logo fill, button label on yellow, outbound bubble text.
+- **Kakao Brown Soft** (`#5A3A3A`): Secondary brown for icons/labels on lighter yellow surfaces.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Friends list, settings, modal backgrounds.
+- **Chat Backdrop Light** (`#B2C7DA`): KakaoTalk's signature blue-gray chat-thread background (the classic "KakaoTalk wallpaper" default).
+- **Surface Gray** (`#F5F5F5`): Grouped settings backdrop, search field fill.
+- **Inbound Bubble Light** (`#FFFFFF`): Inbound message bubble fill on the blue-gray thread.
+- **Divider Light** (`#E6E6E6`): Hairline dividers between list rows and sections.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#1A1A1A`): Friends/list canvas — NOT pure black; keeps the app warm.
+- **Chat Backdrop Dark** (`#1E2A33`): Dark equivalent of the signature blue-gray thread color.
+- **Dark Surface 1** (`#242424`): Composer bar, grouped settings rows, cards.
+- **Dark Surface 2 / Inbound Bubble Dark** (`#2E2E2E`): Inbound bubble fill, hovered rows.
+- **Dark Divider** (`#333333`): Hairline dividers.
+
+### Text
+- **Text Primary Light** (`#191919`): Primary list and message text on light.
+- **Text Secondary Light** (`#6A6A6A`): Status messages, timestamps, metadata.
+- **Text Tertiary Light** (`#9A9A9A`): Disabled, very low-emphasis.
+- **Text Primary Dark** (`#EDEDED`): Primary text on dark.
+- **Text Secondary Dark** (`#9A9A9A`): Secondary text on dark.
+- **Text On Yellow** (`#3C1E1E`): Text inside outbound bubbles and on yellow buttons (Kakao Brown).
+- **Text On Thread (dark)** (`rgba(255,255,255,0.78)`): Sender names / day separators over the dark thread backdrop.
+
+### Semantic
+- **Unread Yellow** (`#FEE500`): The "N unread" count mark docked beside a bubble — the iconic accent.
+- **Link Blue** (`#4B9BFF`): Hyperlinks, "see all" actions, selectable text.
+- **Success Green** (`#2ECC71`): Success toasts, payment confirmation.
+- **Error Red** (`#F15E6C`): Failed send, destructive actions (Leave chat, Block).
+- **Notification Red** (`#FF3B30`): Tab-bar unread badge dot/count.
+- **Music Badge** (`#6A6A6A`): Now-playing badge on a friend's status line.
+
+### Kakao Friends Character Accents (emoticon brand palette)
+| Character | Accent |
+|-----------|--------|
+| Ryan (lion) | `#FBC02D` |
+| Apeach (peach) | `#FF9EB1` |
+| Muzi (radish) | `#FFE082` |
+| Tube (duck) | `#FFD54F` |
+| Frodo (dog) | `#8D6E63` |
+| Neo (cat) | `#A1887F` |
+
+## 3. Typography Rules
+
+### Font Family
+- **Latin Primary**: `SF Pro Text` / `SF Pro Display` (Apple system font).
+- **Hangul Primary**: `Apple SD Gothic Neo` (the iOS Korean system face) — KakaoTalk renders Korean text in the platform Korean font.
+- **Big Titles**: KakaoTalk uses a heavier "KakaoBig"-style weight (mapped to SF Pro Display / Apple SD Gothic Neo Heavy on iOS) for large nav titles.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'SF Pro Text', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif`
+- **Emoji / Emoticons**: Apple Color Emoji for system emoji; Kakao Friends emoticons are image stickers (not font glyphs).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Large Title | SF Pro Display / SD Gothic Heavy | 32pt | 900 | 1.15 | -0.4pt | Big screen title (e.g. "친구") |
+| Screen Title | SF Pro Display | 26pt | 700 | 1.2 | -0.3pt | Modal / sheet titles |
+| Nav Title | SF Pro Display | 20pt | 900 | 1.2 | -0.3pt | Compact nav bar title ("Friends") |
+| Profile Name | SF Pro Text | 17pt | 700 | 1.25 | -0.1pt | My-profile banner name |
+| Section Header | SF Pro Text | 18pt | 700 | 1.3 | -0.1pt | "Members & settings" |
+| Message Body | SF Pro Text | 15pt | 400 | 1.35 | 0pt | The message text inside bubbles |
+| List Row Title | SF Pro Text | 15pt | 600 | 1.3 | 0pt | Friend / chat name |
+| Status / Preview | SF Pro Text | 13pt | 400 | 1.3 | 0pt | Status message, last-message preview |
+| Sender / Tab | SF Pro Text | 12pt | 500 | 1.2 | 0.1pt | Name above an inbound bubble; tab labels |
+| Unread Mark | SF Pro Text | 11pt | 700 | 1.0 | 0pt | The yellow "N" beside a bubble |
+| Bubble Time | SF Pro Text | 10pt | 400 | 1.0 | 0pt | Timestamp docked beside a bubble |
+| Tab Badge | SF Pro Text | 10pt | 700 | 1.0 | 0pt | Red unread count on a tab |
+| Button | SF Pro Text | 16pt | 700 | 1.0 | 0pt | Primary button label |
+| Emoticon-only | — | sticker | — | — | — | Kakao Friends stickers render ~120pt image |
+
+### Principles
+- **System faces, heavier titles**: Latin in SF Pro, Hangul in Apple SD Gothic Neo; only big titles go very heavy (900) for the friendly KakaoBig feel.
+- **Body is 400, names are 600**: Message text is regular; friend/chat names are semibold for fast scanning.
+- **Korean-first metrics**: Line height is generous (≈1.35) so Hangul (which has taller glyphs than Latin) breathes; never tighten below 1.3 for body.
+- **Quiet type, loud yellow**: Hierarchy leans on weight + the yellow accent + rounded-square avatars, not big type contrast.
+- **Dynamic Type first-class**: Message body, list names, status lines scale; tab labels, unread marks, bubble times stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (확인 / Confirm / Send gift)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#FEE500` (Kakao Yellow)
+- Text: `#3C1E1E` (Kakao Brown), SF Pro Text 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal
+- Pressed: background `#E6CF00` + scale 0.98
+- Disabled: `#FEE500` at 40% opacity
+
+**Secondary / Outline Button (Add friend / Cancel)**
+- Background: transparent
+- Border: 1pt divider (`#E6E6E6` light / `#333333` dark)
+- Text: primary text color, SF Pro Text 14pt weight 600
+- Corner radius: 8pt
+- Padding: 12pt vertical, 20pt horizontal
+- Pressed: 6% gray fill
+
+**Pill / Utility Button (선물하기 Gift / Mute / Filter)**
+- Background: surface gray / `#2E2E2E` dark
+- Border: 1pt divider
+- Text: primary text color, SF Pro Text 14pt weight 500
+- Corner radius: 999pt (pill)
+- Padding: 10pt vertical, 18pt horizontal
+
+**Text Button (전체 보기 / See all)**
+- Font: SF Pro Text 14pt weight 600
+- Color: `#4B9BFF` (Link Blue)
+- No background, no underline
+- Pressed: 50% opacity
+
+### Message Bubble (the core atom)
+
+**Inbound Bubble**
+- Background: `#FFFFFF` (light, on the blue-gray thread) / `#2E2E2E` (dark)
+- Text: primary text color, SF Pro Text 15pt weight 400
+- Corner radius: 14pt, with the **top-leading corner squared to 4pt** (head/tail toward the avatar)
+- Padding: 9pt vertical, 12pt horizontal
+- Max width: 82% of thread width
+- Leading avatar: 36pt rounded-square (≈14pt radius), aligned to the top of the bubble run
+- Sender name: 12pt weight 500, `rgba(255,255,255,0.78)` on dark thread / `#6A6A6A` on light, above the first bubble in a run
+- Meta (to the trailing side of the bubble, bottom-aligned): timestamp 10pt; no unread mark on inbound
+
+**Outbound Bubble**
+- Background: `#FEE500` (Kakao Yellow)
+- Text: `#3C1E1E` (Kakao Brown), SF Pro Text 15pt weight 500
+- Corner radius: 14pt, with the top-trailing corner squared to 4pt
+- Aligned trailing; no avatar for self
+- Meta (to the **leading side** of the bubble, bottom-aligned): unread count mark (yellow `#FEE500` "N", weight 700, 11pt) stacked above the timestamp (10pt `rgba(255,255,255,0.5)` on dark)
+
+**Bubble Run Grouping**
+- Consecutive messages from the same sender within 60s collapse: avatar + name show once at the top; bubbles stack with 3pt gap; the meta (time / unread) shows only on the last bubble of the run
+
+### Unread Mark (signature distinctive component)
+- A small number rendered to the **inner side** of an outbound bubble (between the bubble and the screen edge), bottom-aligned
+- Color: Kakao Yellow `#FEE500`, SF Pro Text 11pt weight 700
+- Means "N recipients have not yet read this message"; disappears (or counts down in a group) as people read
+- The single most culturally recognizable KakaoTalk UI element
+
+### Gifticon Card (distinctive component)
+- A rich card sent in the thread for a gift voucher
+- Container: rounded 16pt, `#FFFFFF` light / `#242424` dark, soft shadow
+- Top: product image band ~120pt tall (often a warm yellow gradient backdrop for the product)
+- Body: brand name 11pt `#6A6A6A`, product name 13pt weight 700, "선물이 도착했어요" style header
+- Footer (recipient side): "사용하기 / Use" pill button → opens a barcode redeem screen
+- Width: ~188pt
+
+### Navigation
+
+**Top Nav (Friends / Chats)**
+- Height: 52pt + safe area
+- Background: canvas (`#FFFFFF` light / `#1A1A1A` dark)
+- Leading: large/compact title (20pt weight 900)
+- Trailing: a row of 21pt outline action icons (search, add friend, settings/⋮) `#6A6A6A`
+- 0.5pt bottom divider
+
+**Chat Nav Bar (top of a thread)**
+- Height: 52pt + safe area
+- Background: matches the thread backdrop (blue-gray light / `#1E2A33` dark)
+- Leading: back chevron 22pt
+- Center-leading: chat title (friend/group name) 16pt weight 700
+- Trailing: search-in-chat + hamburger (chat menu / drawer) 20pt
+
+**Bottom Tab Bar**
+- Height: 64pt + safe area
+- Background: `rgba(255,255,255,0.96)` light / `rgba(26,26,26,0.96)` dark with blur + 0.5pt top divider
+- Tabs (5): Friends, Chats, Open (Chat), Shopping, More
+- Icon size: 24pt
+- Active: primary text color (`#191919` / `#EDEDED`), icon filled — no color tint
+- Inactive: `#777777`, icon stroked
+- Unread badge: red `#FF3B30` pill on the Chats icon, white 10pt weight 700
+- Labels: SF Pro Text 10pt weight 500, always shown
+
+**Friend Row**
+- Height: 64pt
+- Leading: 44pt rounded-square avatar (≈16pt radius)
+- Title: friend name 15pt weight 600
+- Subtitle: status message 13pt weight 400 `#6A6A6A` (1 line) OR a now-playing badge (music note 13pt + track name)
+- Trailing: optional gift / VIP / channel chip
+
+### Input Fields
+
+**Composer**
+- Layout: `+` menu button (left) · pill text field (center) · emoticon-face button (right) · (send/voice morphs in on the right when typing)
+- Pill field: height 38pt, background `#F5F5F5` light / `#2E2E2E` dark, 999pt radius, 16pt horizontal padding
+- Placeholder: empty (KakaoTalk shows no placeholder text — just the empty pill)
+- `+` button: 24pt outline glyph `#6A6A6A` — opens the action sheet (album, camera, gifticon, pay/송금, location, schedule, voice, file, contact)
+- Emoticon button: 24pt smiley glyph `#6A6A6A` — opens the Kakao Friends sticker keyboard
+- Bar background: canvas, 0.5pt top divider
+
+**Search Field (Friends / Chats)**
+- Height: 38pt
+- Background: `#F5F5F5` light / `#2E2E2E` dark
+- Corner radius: 999pt (pill) or 8pt (depending on screen)
+- Leading icon: magnifyingglass 16pt `#9A9A9A`
+- Placeholder: "이름, 채팅방, 모임 검색" 14pt `#9A9A9A`
+
+### Distinctive Components
+
+**Unread Count Mark** — see above; the iconic yellow "N" beside a bubble.
+
+**Kakao Friends Emoticon Sticker**
+- Sent as a large image sticker (~120pt) with no bubble background; tappable to enlarge/animate
+- Emoticon keyboard: a grid of the user's owned sticker sets with character tabs along the bottom
+
+**Gifticon Card** — see above; sendable gift voucher with barcode redeem.
+
+**Status Message Line**
+- A one-line mood under a profile name; supports emoji and updates over time — the social texture of the friends list
+
+**My-Profile Banner**
+- Top of the Friends tab: large rounded-square avatar + name + editable status message; tapping opens the full profile (cover image, decorations, music)
+
+**Open Chat (오픈채팅) Tab**
+- A discovery/list surface for public/anonymous group rooms by topic — its own bottom tab with a globe-style icon
+
+**Now-Playing Badge**
+- A music-note glyph + track title on a friend's status line, sourced from their profile music
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 6, 8, 10, 12, 16, 18, 20, 24, 28, 32
+- Bubble vertical gap (different senders): 12pt
+- Bubble vertical gap (same-sender run): 3pt
+- Thread horizontal inset: 12pt
+- List row inset: 18pt leading / 18pt trailing
+
+### Grid & Container
+- iPhone: chat thread full-bleed over the backdrop with 12pt horizontal inset; bubbles max 82% width
+- iPad: thread max-width 680pt centered; split view shows the Chats list (340pt) + thread
+- Friends list: full-width 64pt rows; section headers ("Friends · N", "Channels")
+- Bottom tab bar pinned; nav bars pinned
+
+### Whitespace Philosophy
+- **Roster density**: friend rows are compact (64pt) so the eye scans names + statuses quickly
+- **Thread breathing**: 12pt between speakers, 3pt within a run; the colored backdrop frames the bubbles
+- **Avatars anchor the left rail**: inbound rows reserve a 36pt rounded-square avatar gutter so names + bubbles align
+- **Meta sits outside the bubble**: time + unread count dock to the bubble's inner side so the bubble itself stays clean — a defining KakaoTalk layout choice
+
+### Border Radius Scale
+- Square (0pt): nav bars, dividers, full-screen media
+- Subtle (4pt): the squared head corner of a bubble
+- Standard (8pt): primary/secondary buttons, search field
+- Bubble (14pt): message bubbles
+- Avatar / Card (16pt): rounded-square avatars, gifticon cards, sheets
+- Comfortable (24pt): bottom sheets
+- Pill (999pt): composer field, utility chips, gifticon "Use" button
+- Circle (50%): rarely used — small status dots only (avatars are rounded-squares, not circles)
+
+## 6. Depth & Elevation
+
+KakaoTalk is mostly flat with soft, subtle shadows; depth signals "this floats above the thread/list".
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Thread backdrop, list rows, bubbles |
+| Raised (Level 1) | `rgba(0,0,0,0.06) 0 1px 3px` | Gifticon card, composer separation |
+| Floating (Level 2) | `rgba(0,0,0,0.16) 0 6px 16px` | Action sheet, emoticon keyboard, popovers |
+| Sheet (Level 3) | `rgba(0,0,0,0.22) 0 -4px 24px` | Bottom sheets (chat menu, gift flow, settings) |
+| Modal Scrim | `rgba(0,0,0,0.4)` | Dim behind modals and sheets |
+
+**Shadow Philosophy**: The thread and list stay flat so the yellow bubbles and rounded-square avatars carry the visual weight. Shadows are reserved for cards (gifticon) and floating UI (action sheet, emoticon keyboard). On dark mode shadows nearly vanish, so floating panels gain a 1pt `#333333` border as the elevation cue and cards switch to a `#242424` fill that lifts them off the `#1E2A33` thread / `#1A1A1A` canvas.
+
+### Motion
+- **Message send**: outbound bubble pops up + fades in from the composer over 200ms ease-out; the unread mark fades in once delivered
+- **Unread countdown (group)**: the yellow "N" cross-fades to "N-1" as each member reads — no aggressive animation
+- **New inbound message**: bubble fades + 6pt slide-up in 180ms ease-out; thread auto-scrolls if pinned to bottom
+- **Emoticon send**: sticker scales 0.7 → 1.0 over 220ms spring (animated emoticons then play their loop)
+- **Action sheet / emoticon keyboard**: slides up from bottom 280ms ease-out with scrim fade
+- **Tab switch**: instant content swap; active icon cross-fades fill in 120ms; red badge bounces in
+- **Gifticon arrival**: card slides in + a subtle confetti/sparkle accent on first appearance
+- **Pull-to-refresh (Friends)**: Kakao-yellow spinner; 250ms settle
+- **Haptic feedback**: light tick on send, soft impact on emoticon send, selection tick on tab change
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Kakao Yellow (`#FEE500`) for outbound bubbles, the primary CTA, and the speech-bubble logo
+- Put Kakao Brown (`#3C1E1E`) text on yellow — never white or black
+- Dock the unread count + timestamp to the bubble's **inner side**, not inside the bubble
+- Render the unread mark as a yellow "N" — it is the single most iconic KakaoTalk element
+- Use rounded-square avatars (≈16pt radius) everywhere — friends, chat, channels
+- Give the chat thread its signature blue-gray backdrop (light) / `#1E2A33` (dark)
+- Treat Kakao Friends emoticons as large stickers (no bubble) — they are first-class content
+- Render gifticons as rich product cards with a barcode "Use" redeem
+- Show a status-message line under profile/friend names (mood + emoji, or now-playing)
+- Use Apple SD Gothic Neo for Hangul and generous line height (≈1.35) for Korean text
+- Keep the list/thread flat; reserve soft shadows for cards and floating sheets
+
+### Don't
+- Don't use white or black text on the yellow bubble — it must be Kakao Brown `#3C1E1E`
+- Don't put the time/unread count inside the bubble — KakaoTalk docks it to the inner side
+- Don't use circular avatars — KakaoTalk avatars are rounded squares
+- Don't color the chat thread plain white — it has a distinct blue-gray backdrop
+- Don't render emoticons inside a bubble — they are bubble-less large stickers
+- Don't tighten Hangul line height below ~1.3 — Korean glyphs need vertical room
+- Don't tint the active tab yellow — active tabs use the primary text color (filled icon), no color tint
+- Don't pure-black the dark canvas — use `#1A1A1A` (warm) and `#1E2A33` for the thread
+- Don't substitute the yellow with orange/gold — it is specifically `#FEE500`
+- Don't squarify bubbles — they're ≈14pt rounded with only the head corner clipped to ~4pt
+- Don't bury the `+` menu — gifticons, pay, schedule, location all live there and are core to KakaoTalk
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Bubble max-width 84%; avatar 40pt; gifticon card 172pt |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; nav bar extends under island |
+| iPhone 15/16 Pro Max | 430pt | Bubble max-width 80%; avatar 48pt; larger gifticon image |
+| iPad (portrait) | 768pt | Split: Chats list (340pt) + thread (centered max 680pt) |
+| iPad (landscape) | 1024pt+ | Persistent Friends/Chats list + thread; Shopping in a wider grid |
+
+### Dynamic Type
+- Scales: message body, list names, status lines, screen titles
+- Fixed: tab labels, unread marks, bubble times, tab badges (layout-sensitive in run grouping)
+- Gifticon card image scales proportionally with thread width, not font scale
+
+### Orientation
+- All screens rotate; iPad gains persistent split view (list + thread)
+- Media/emoticon full-screen viewer supports rotation
+- Composer + emoticon keyboard stay pinned above the keyboard in both orientations
+
+### Touch Targets
+- Bubble (long-press for reactions/menu): full bubble, min 44pt tall
+- Tab bar icons: 24pt glyph, 44pt hit
+- `+` menu / emoticon button: 24pt glyph, 44pt hit
+- Friend row: full 64pt row tappable
+- Gifticon "Use" pill: min 36pt tall
+
+### Safe Area Handling
+- Top: nav bars extend to the top safe area and under the Dynamic Island (content within safe area)
+- Bottom: tab bar + composer respect the home indicator
+- Keyboard: thread scrolls above the keyboard; composer + emoticon keyboard dock on it
+- Sides: 12pt thread inset, 18pt list inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Kakao Yellow: `#FEE500`
+- Yellow pressed: `#E6CF00`
+- Kakao Brown (text on yellow): `#3C1E1E`
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#1A1A1A`
+- Chat backdrop: `#B2C7DA` light / `#1E2A33` dark
+- Inbound bubble: `#FFFFFF` light / `#2E2E2E` dark
+- Outbound bubble: `#FEE500` (brown text)
+- Text primary: `#191919` light / `#EDEDED` dark
+- Text secondary: `#6A6A6A` light / `#9A9A9A` dark
+- Unread mark: `#FEE500`
+- Link blue: `#4B9BFF`
+- Notification badge: `#FF3B30`
+- Error red: `#F15E6C`
+
+### Example Component Prompts
+- "Build the KakaoTalk Friends top section in SwiftUI: a 52pt nav row (title 'Friends' SF Pro Display 20pt weight 900, trailing search/add/settings outline icons 21pt `#6A6A6A`), then a my-profile banner — 52pt rounded-square avatar (16pt radius, yellow gradient `#FEE500`→`#E6CF00`), name SF Pro Text 17pt weight 700, status message 13pt `#6A6A6A` with emoji — then a 'Friends · N' section label SF Pro Text 12pt weight 700 `#6A6A6A`."
+
+- "Create a KakaoTalk inbound message row: a 36pt rounded-square avatar (14pt radius) on the leading side aligned to the top of the run, then a column — sender name SF Pro Text 12pt weight 500 `rgba(255,255,255,0.78)` (on the dark `#1E2A33` thread), then bubbles. Inbound bubble: `#2E2E2E` (dark) fill, SF Pro Text 15pt weight 400 `#EDEDED`, 14pt corner radius with the top-leading corner squared to 4pt, 9pt vertical / 12pt horizontal padding, max-width 82%. The timestamp (10pt `rgba(255,255,255,0.5)`) sits to the trailing side of the bubble, bottom-aligned."
+
+- "Build the KakaoTalk outbound bubble with its iconic unread mark: a Kakao-Yellow `#FEE500` bubble with `#3C1E1E` text SF Pro Text 15pt weight 500, 14pt radius with the top-trailing corner squared to 4pt, aligned trailing. On the **leading** side of the bubble (between it and the screen edge), bottom-aligned, render a small column: the unread count as a yellow `#FEE500` '1' SF Pro Text 11pt weight 700, and below it the timestamp 10pt `rgba(255,255,255,0.5)`. The mark fades in once delivered and counts down as recipients read."
+
+- "Render a KakaoTalk gifticon card: a 188pt-wide rounded-16pt card (`#242424` dark, soft shadow), a ~120pt product-image band on a warm yellow gradient at top, then body — brand name 11pt `#9A9A9A`, product name 13pt weight 700 `#EDEDED` — and (recipient side) a pill 'Use / 사용하기' button 999pt radius that opens a barcode redeem screen."
+
+- "Build the KakaoTalk composer: a bottom bar on canvas with a 0.5pt top divider. Layout: a `+` menu button (24pt outline glyph `#6A6A6A`) on the left, an empty pill text field in the center (38pt tall, `#2E2E2E` dark fill, 999pt radius, 16pt horizontal padding, NO placeholder text), and an emoticon-face button (24pt smiley `#6A6A6A`) on the right; a send glyph morphs in on the right when the field has text. The `+` opens an action sheet (album, camera, gifticon, pay/송금, location, schedule, voice)."
+
+- "Create the KakaoTalk friend row: 64pt tall, leading 44pt rounded-square avatar (16pt radius), title = friend name SF Pro Text 15pt weight 600, subtitle = either a status message 13pt weight 400 `#6A6A6A` (1 line) OR a now-playing badge (music-note glyph 13pt + track title). Optional trailing gift/VIP/channel chip."
+
+- "Build the KakaoTalk bottom tab bar: 5 tabs — Friends, Chats, Open, Shopping, More — 24pt icons, active = primary text color with a FILLED icon (no color tint), inactive = `#777777` stroked. A red `#FF3B30` unread badge pill (white 10pt weight 700) sits on the Chats icon. Labels SF Pro Text 10pt weight 500 always shown. Backdrop `rgba(26,26,26,0.96)` (dark) with blur + 0.5pt top divider."
+
+### Iteration Guide
+1. Outbound bubbles are Kakao Yellow `#FEE500` with Kakao Brown `#3C1E1E` text — never white/black text on yellow
+2. The unread count + timestamp dock to the bubble's INNER side (outside the bubble) — the yellow "N" is the #1 iconic element
+3. Avatars are rounded squares (≈16pt radius) everywhere — never circles
+4. The chat thread has a distinct backdrop: blue-gray light / `#1E2A33` dark — not plain white
+5. Inbound bubbles are white (light) / `#2E2E2E` (dark); the head corner is clipped to ~4pt, radius ≈14pt
+6. Kakao Friends emoticons are large bubble-less stickers; gifticons are rich product cards with barcode redeem
+7. Hangul renders in Apple SD Gothic Neo with generous (~1.35) line height; big titles go weight 900 (KakaoBig feel)
+8. Active tabs use the primary text color with a filled icon — no yellow tint on the tab bar
+9. Canvas is white light / `#1A1A1A` dark (warm, not pure black)
+10. The `+` composer menu holds the super-app: gifticon, pay/송금, schedule, location — don't bury it