atomsystem 0.4.3 → 0.5.1

package/components/blocks/InteractiveChatBlock.tsx

@@ -1,7 +1,15 @@
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Bot, User, Sparkles, Paperclip, MoreVertical, CheckCheck } from 'lucide-react';
+import { Card, Button, Input, Badge } from '@/components/ui';
+import {
+  Send,
+  Bot,
+  User,
+  Paperclip,
+  Check,
+  Plus,
+} from 'lucide-react';
 
 interface ChatMessage {
   id: string;
@@ -11,10 +19,10 @@ interface ChatMessage {
 }
 
 const QUICK_PROMPTS = [
-  '🎨 primary 브랜드 색상 변경 방법',
-  '📐 8pt 그리드 스페이싱 토큰 조회',
-  '⚡ 다크모드 자동 전환 구현 가이드',
-  '🚀 0KB 런타임 CSS 내보내기'
+  '디자인 토큰 어떻게 설정하나요?',
+  '4pt 그리드 스페이싱 규칙',
+  '다크모드 컬러 전환',
+  '0KB 런타임 CSS 빌드',
 ];
 
 export function InteractiveChatBlock() {
@@ -22,62 +30,59 @@ export function InteractiveChatBlock() {
     {
       id: 'm1',
       sender: 'assistant',
-      text: '안녕하세요! AtomDesignToken 대화형 어시스턴트입니다. 무엇이든 물어보세요. 디자인 시스템 구축과 토큰 확장을 신속히 도와드립니다.',
-      timestamp: '오전 10:24',
+      text: '안녕하세요. 디자인 토큰 AI 어시스턴트입니다. 색상 시스템, 스페이싱 규격, 레이아웃에 관해 궁금한 점을 질문해보세요.',
+      timestamp: '10:00 AM',
     },
     {
       id: 'm2',
       sender: 'user',
-      text: '디자인 토큰을 Tailwind v4 프로젝트에 어떻게 연결하나요?',
-      timestamp: '오전 10:25',
+      text: '브랜드 primary 색상 토큰을 어떻게 바꾸나요?',
+      timestamp: '10:01 AM',
     },
     {
       id: 'm3',
       sender: 'assistant',
-      text: '@import "tailwindcss"; 설정 후 css/atom-ui.css를 최상단에 import하면 모든 --atom-* CSS 변수가 @theme 규칙과 자동 동기화되어 즉시 클래스로 활용할 수 있습니다!',
-      timestamp: '오전 10:25',
+      text: '우측 상단의 테마 에디터를 열거나, :root의 --atom-primary CSS 변수를 원하는 색상 코드로 지정하면 즉시 모든 컴포넌트에 반영됩니다.',
+      timestamp: '10:01 AM',
     },
   ]);
 
-  const [inputValue, setInputValue] = useState('');
+  const [inputVal, setInputVal] = useState('');
   const [isTyping, setIsTyping] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    scrollToBottom();
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
   }, [messages, isTyping]);
 
-  const handleSendMessage = (textToSend?: string) => {
-    const text = textToSend || inputValue;
+  const handleSend = (textToSend?: string) => {
+    const text = textToSend || inputVal;
     if (!text.trim()) return;
 
     const now = new Date();
-    const timeStr = `${now.getHours() < 12 ? '오전' : '오후'} ${now.getHours() % 12 || 12}:${String(now.getMinutes()).padStart(2, '0')}`;
+    const timeStr = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`;
 
-    const newUserMsg: ChatMessage = {
-      id: `usr-${Date.now()}`,
+    const newMsg: ChatMessage = {
+      id: `user-${Date.now()}`,
       sender: 'user',
-      text: text.trim(),
+      text: text,
       timestamp: timeStr,
     };
 
-    setMessages((prev) => [...prev, newUserMsg]);
-    if (!textToSend) setInputValue('');
+    setMessages((prev) => [...prev, newMsg]);
+    if (!textToSend) setInputVal('');
     setIsTyping(true);
 
-    // AI 자동 답변 시뮬레이션
     setTimeout(() => {
-      let replyText = '문의해주신 내용에 대한 표준 가이드라인이 준비되었습니다. AtomDesignToken의 W3C DTCG 토큰 명세를 통해 모든 프레임워크에서 100% 일관된 UI를 유지할 수 있습니다.';
-      if (text.includes('색상') || text.includes('primary')) {
-        replyText = '브랜드 기본 색상은 `--atom-primary: #3182f6;` 토큰으로 정의되어 있으며, Theme Editor에서 슬라이더나 프리셋을 통해 실시간으로 변경하고 즉시 내보낼 수 있습니다.';
+      let replyText = `"${text}"에 대한 디자인 토큰 가이드입니다. AtomDesignToken의 W3C DTCG 표준 규격에 따라 모든 변수는 CSS 변수(--atom-*)로 안전하게 컴파일됩니다.`;
+      if (text.includes('primary') || text.includes('색상')) {
+        replyText = 'Primary 브랜드 토큰은 css/atom-ui.css의 --atom-primary 변수로 선언되어 있으며, Tailwind v4 및 런타임 없는 순수 CSS로 상속됩니다.';
       } else if (text.includes('그리드') || text.includes('스페이싱')) {
-        replyText = '스페이싱 토큰은 4px 기반으로 `--spacing-1: 4px;`, `--spacing-2: 8px;`, `--spacing-4: 16px;` 순으로 균일하게 모듈화되어 있습니다.';
-      } else if (text.includes('다크모드')) {
-        replyText = '최상위 html 태그의 `data-theme="dark"` 속성 또는 `.dark` 클래스를 토글하면 모든 시맨틱 색상 토큰이 부드러운 트랜지션과 함께 즉시 반전됩니다.';
+        replyText = '스페이싱 토큰은 4px 배수 규격(--atom-space-1: 4px, --atom-space-2: 8px, --atom-space-4: 16px)으로 엄격히 관리됩니다.';
+      } else if (text.includes('다크')) {
+        replyText = '최상위 html 태그의 data-theme="dark" 속성을 통해 라이트/다크 시맨틱 토큰 매트릭스가 즉시 스위칭됩니다.';
       }
 
       const newBotMsg: ChatMessage = {
@@ -89,145 +94,124 @@ export function InteractiveChatBlock() {
 
       setMessages((prev) => [...prev, newBotMsg]);
       setIsTyping(false);
-    }, 1100);
+    }, 800);
   };
 
   return (
-    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm overflow-hidden flex flex-col h-[520px] transition-colors">
-      {/* Chat Header */}
-      <div className="px-5 py-3.5 border-b border-(--border-subtle) bg-(--bg-secondary)/50 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="relative">
-            <div className="w-9 h-9 rounded-xl bg-(--accent-primary) flex items-center justify-center text-white shadow-xs">
-              <Bot className="w-5 h-5" />
-            </div>
-            <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-emerald-500 border-2 border-(--bg-primary)" />
+    <Card className="flex flex-col h-[480px] overflow-hidden bg-(--bg-primary) border border-(--border-subtle) transition-colors">
+      {/* 1. Chat Header */}
+      <div className="px-4 py-3 border-b border-(--border-subtle) flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle) text-(--text-primary) flex items-center justify-center font-bold text-xs">
+            <Bot className="w-3.5 h-3.5" />
           </div>
           <div>
-            <div className="flex items-center gap-1.5">
-              <h3 className="text-sm font-bold text-(--text-primary)">Atom AI Agent</h3>
-              <span className="px-1.5 py-0.2 rounded text-[10px] font-semibold bg-(--accent-primary)/10 text-(--accent-primary)">
-                온라인
-              </span>
+            <div className="text-xs font-semibold text-(--text-primary)">
+              디자인 토큰 어시스턴트
             </div>
-            <p className="text-[11px] text-(--text-muted)">평균 응답 속도 0.8초 · 디자인 시스템 도우미</p>
+            <div className="text-[11px] text-(--text-muted)">온디맨드 응답</div>
           </div>
         </div>
-        <div className="flex items-center gap-1">
-          <button
-            onClick={() => setMessages(messages.slice(0, 1))}
-            className="text-xs text-(--text-muted) hover:text-(--text-primary) px-2 py-1 rounded transition-colors"
-          >
-            대화 비우기
-          </button>
-          <button className="p-1.5 text-(--text-muted) hover:text-(--text-primary) rounded-lg transition-colors">
-            <MoreVertical className="w-4 h-4" />
-          </button>
-        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setMessages(messages.slice(0, 1))}
+          className="text-xs py-1 px-2.5 h-auto"
+        >
+          대화 초기화
+        </Button>
       </div>
 
-      {/* Messages Scroll Feed */}
-      <div className="flex-1 p-4 sm:p-5 overflow-y-auto space-y-4">
+      {/* 2. Messages Scroll Area */}
+      <div ref={scrollRef} className="flex-1 p-4 overflow-y-auto space-y-3.5 bg-(--bg-primary)">
         {messages.map((m) => {
           const isUser = m.sender === 'user';
           return (
             <div
               key={m.id}
-              className={`flex items-end gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}
+              className={`flex items-start gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}
             >
-              {/* Avatar */}
               <div
-                className={`w-7 h-7 rounded-lg flex items-center justify-center text-xs shrink-0 ${
+                className={`w-6 h-6 rounded-(--radius-sm) flex items-center justify-center text-xs shrink-0 ${
                   isUser
-                    ? 'bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)'
-                    : 'bg-(--accent-primary)/15 text-(--accent-primary)'
+                    ? 'bg-(--text-primary) text-(--bg-primary)'
+                    : 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)'
                 }`}
               >
-                {isUser ? <User className="w-4 h-4" /> : <Sparkles className="w-4 h-4" />}
+                {isUser ? <User className="w-3 h-3" /> : <Bot className="w-3 h-3" />}
               </div>
 
-              {/* Message Bubble */}
-              <div className={`max-w-[78%] flex flex-col ${isUser ? 'items-end' : 'items-start'}`}>
+              <div className={`max-w-[75%] space-y-1 ${isUser ? 'items-end' : 'items-start'}`}>
                 <div
-                  className={`px-4 py-2.5 rounded-2xl text-xs sm:text-sm leading-relaxed ${
+                  className={`p-3 rounded-(--radius) text-xs leading-relaxed ${
                     isUser
-                      ? 'bg-(--accent-primary) text-white rounded-br-xs shadow-xs'
-                      : 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) rounded-bl-xs'
+                      ? 'bg-(--text-primary) text-(--bg-primary) font-medium'
+                      : 'bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)'
                   }`}
                 >
                   {m.text}
                 </div>
-                <div className="flex items-center gap-1 mt-1 text-[10px] text-(--text-muted)">
-                  <span>{m.timestamp}</span>
-                  {isUser && <CheckCheck className="w-3 h-3 text-(--accent-primary)" />}
+                <div className={`text-[11px] text-(--text-muted) px-1 ${isUser ? 'text-right' : 'text-left'}`}>
+                  {m.timestamp}
                 </div>
               </div>
             </div>
           );
         })}
 
-        {/* Typing Pulse Indicator */}
         {isTyping && (
-          <div className="flex items-center gap-2.5">
-            <div className="w-7 h-7 rounded-lg bg-(--accent-primary)/15 text-(--accent-primary) flex items-center justify-center shrink-0">
-              <Sparkles className="w-4 h-4" />
-            </div>
-            <div className="bg-(--bg-secondary) border border-(--border-subtle) px-3 py-2 rounded-2xl rounded-bl-xs flex items-center gap-1">
-              <span className="w-2 h-2 rounded-full bg-(--accent-primary) animate-bounce" style={{ animationDelay: '0ms' }} />
-              <span className="w-2 h-2 rounded-full bg-(--accent-primary) animate-bounce" style={{ animationDelay: '150ms' }} />
-              <span className="w-2 h-2 rounded-full bg-(--accent-primary) animate-bounce" style={{ animationDelay: '300ms' }} />
-            </div>
+          <div className="flex items-center gap-2 text-xs text-(--text-muted)">
+            <Bot className="w-3.5 h-3.5" />
+            <span>확인 중...</span>
           </div>
         )}
-        <div ref={messagesEndRef} />
       </div>
 
-      {/* Quick Prompts Chips */}
-      <div className="px-4 py-2 bg-(--bg-primary) border-t border-(--border-subtle) flex items-center gap-1.5 overflow-x-auto scrollbar-none">
-        {QUICK_PROMPTS.map((prompt, idx) => (
-          <button
+      {/* 3. Quick Suggestion Pills */}
+      <div className="px-3 py-2 border-t border-(--border-subtle) flex items-center gap-1.5 overflow-x-auto scrollbar-none">
+        {QUICK_PROMPTS.map((q, idx) => (
+          <Button
             key={idx}
-            onClick={() => handleSendMessage(prompt)}
-            className="shrink-0 text-[11px] font-medium px-2.5 py-1 rounded-full bg-(--bg-secondary) hover:bg-(--border-subtle) text-(--text-secondary) hover:text-(--text-primary) border border-(--border-subtle) transition-colors"
+            variant="outline"
+            size="sm"
+            onClick={() => handleSend(q)}
+            className="shrink-0 text-xs py-1 px-2.5 h-auto whitespace-nowrap"
           >
-            {prompt}
-          </button>
+            {q}
+          </Button>
         ))}
       </div>
 
-      {/* Input Bar */}
-      <div className="p-3 sm:p-4 bg-(--bg-primary) border-t border-(--border-subtle)">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSendMessage();
-          }}
-          className="flex items-center gap-2"
-        >
-          <button
-            type="button"
-            className="p-2 text-(--text-muted) hover:text-(--text-primary) hover:bg-(--bg-secondary) rounded-xl transition-colors shrink-0"
-            title="첨부 파일"
-          >
-            <Paperclip className="w-4 h-4" />
-          </button>
+      {/* 4. Bottom Input Bar composed with Input & Button */}
+      <div className="p-3 border-t border-(--border-subtle) bg-(--bg-primary)">
+        <div className="flex items-center gap-2">
           <input
             type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder="AI 에이전트에게 메시지를 입력하세요 (Enter 전송)..."
-            className="flex-1 text-xs sm:text-sm px-3.5 py-2.5 rounded-xl bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--accent-primary) placeholder:text-(--text-muted) transition-colors"
+            value={inputVal}
+            onChange={(e) => setInputVal(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            placeholder="디자인 시스템이나 토큰 규칙에 관해 질문하세요..."
+            className="flex-1 text-xs px-3 py-2 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--border-strong) transition-colors"
           />
-          <button
-            type="submit"
-            disabled={!inputValue.trim()}
-            className="p-2.5 rounded-xl bg-(--accent-primary) hover:bg-(--accent-hover) disabled:opacity-40 disabled:hover:bg-(--accent-primary) text-white font-medium shadow-xs transition-colors shrink-0"
+          <Button
+            type="button"
+            variant="primary"
+            size="sm"
+            onClick={() => handleSend()}
+            aria-label="전송"
             title="전송"
+            className="p-2 h-auto"
           >
-            <Send className="w-4 h-4" />
-          </button>
-        </form>
+            <Send className="w-3.5 h-3.5" />
+          </Button>
+        </div>
       </div>
-    </div>
+    </Card>
   );
 }

package/components/blocks/MetricStatsBlock.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import { Card, Badge } from '@/components/ui';
 import {
   TrendingUp,
   TrendingDown,
@@ -8,7 +9,6 @@ import {
   Users,
   Target,
   Server,
-  ArrowUpRight,
 } from 'lucide-react';
 
 interface MetricItem {
@@ -25,9 +25,9 @@ interface MetricItem {
 const METRICS: MetricItem[] = [
   {
     id: 'm-arr',
-    label: '연간 반복 매출 (ARR)',
-    subLabel: '전체 유료 구독 합산',
-    value: '₩142,850,000',
+    label: '월간 반복 매출 (MRR)',
+    subLabel: '구독 플랜 총액',
+    value: '₩48,250,000',
     change: '+18.4%',
     isPositive: true,
     icon: 'dollar',
@@ -35,9 +35,9 @@ const METRICS: MetricItem[] = [
   },
   {
     id: 'm-mau',
-    label: '월간 활성 개발자 (MAU)',
-    subLabel: '토큰 CLI 호출 계정',
-    value: '49,210 명',
+    label: '활성 개발자 (MAU)',
+    subLabel: '토큰 CLI 활성 호출자',
+    value: '49,210명',
     change: '+12.6%',
     isPositive: true,
     icon: 'users',
@@ -45,23 +45,23 @@ const METRICS: MetricItem[] = [
   },
   {
     id: 'm-cvr',
-    label: '체험 가입 전환율 (CVR)',
-    subLabel: '스타터 → 프로 전환',
-    value: '4.92 %',
+    label: '유료 플랜 전환율',
+    subLabel: '무료에서 Pro 업그레이드',
+    value: '4.92%',
     change: '-0.3%',
     isPositive: false,
     icon: 'target',
-    sparkline: [60, 58, 62, 54, 52, 55, 48, 50],
+    sparkline: [60, 58, 62, 55, 50, 52, 48, 45],
   },
   {
-    id: 'm-sla',
-    label: 'API 응답 신뢰도 & 가동률',
-    subLabel: '글로벌 엣지 네트워크',
-    value: '99.99 %',
-    change: '+0.01%',
+    id: 'm-uptime',
+    label: 'API 가동률 & SLA',
+    subLabel: '엣지 컴파일 노드 헬스',
+    value: '99.98%',
+    change: '+0.02%',
     isPositive: true,
     icon: 'server',
-    sparkline: [98, 99, 99, 100, 99, 100, 100, 100],
+    sparkline: [95, 96, 98, 97, 99, 99, 100, 100],
   },
 ];
 
@@ -69,110 +69,82 @@ export function MetricStatsBlock() {
   const getIcon = (type: MetricItem['icon']) => {
     switch (type) {
       case 'dollar':
-        return <DollarSign className="w-4 h-4 text-emerald-500" />;
+        return <DollarSign className="w-3.5 h-3.5 text-(--accent-primary)" />;
       case 'users':
-        return <Users className="w-4 h-4 text-blue-500" />;
+        return <Users className="w-3.5 h-3.5 text-blue-500" />;
       case 'target':
-        return <Target className="w-4 h-4 text-amber-500" />;
+        return <Target className="w-3.5 h-3.5 text-amber-500" />;
       case 'server':
-        return <Server className="w-4 h-4 text-purple-500" />;
+        return <Server className="w-3.5 h-3.5 text-emerald-500" />;
     }
   };
 
-  const renderSparkline = (points: number[], isPositive: boolean) => {
-    const min = Math.min(...points);
-    const max = Math.max(...points);
-    const range = max - min || 1;
-    const width = 80;
-    const height = 28;
-
-    const coords = points.map((p, idx) => {
-      const x = (idx / (points.length - 1)) * width;
-      const y = height - ((p - min) / range) * (height - 6) - 3;
-      return `${idx === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
-    }).join(' ');
-
-    const strokeColor = isPositive ? 'var(--atom-success, #10b981)' : 'var(--atom-destructive, #f04452)';
-
-    return (
-      <svg width={width} height={height} className="overflow-visible">
-        <path
-          d={coords}
-          fill="none"
-          stroke={strokeColor}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-  };
-
   return (
-    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm p-5 sm:p-6 transition-colors">
-      {/* Top Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-(--border-subtle) mb-5">
-        <div>
-          <span className="text-[11px] font-semibold text-(--accent-primary) uppercase tracking-wider">
-            경영 & 인프라 텔레메트리
-          </span>
-          <h3 className="text-lg font-bold text-(--text-primary) mt-0.5">
-            4대 핵심 비즈니스 KPI 지표 대시보드
-          </h3>
-        </div>
-        <div className="text-[11px] text-(--text-muted) flex items-center gap-1.5 mt-2 sm:mt-0">
-          <span className="w-2 h-2 rounded-full bg-emerald-500" />
-          <span>실시간 동기화 상태: 정상 (Latency 14ms)</span>
-        </div>
-      </div>
+    <Card className="overflow-hidden transition-colors">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-(--border-subtle)">
+        {METRICS.map((m) => {
+          const maxVal = Math.max(...m.sparkline);
+          const minVal = Math.min(...m.sparkline);
+          const range = maxVal - minVal || 1;
 
-      {/* 4 Cards Grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {METRICS.map((metric) => (
-          <div
-            key={metric.id}
-            className="p-4 rounded-xl bg-(--bg-secondary)/50 hover:bg-(--bg-secondary) border border-(--border-subtle) hover:border-(--border-strong) transition-all duration-200 shadow-xs flex flex-col justify-between"
-          >
-            <div>
-              {/* Header inside card */}
-              <div className="flex items-center justify-between mb-2">
-                <div className="p-2 rounded-lg bg-(--bg-primary) border border-(--border-subtle)">
-                  {getIcon(metric.icon)}
-                </div>
-                <div
-                  className={`inline-flex items-center gap-0.5 text-xs font-bold px-2 py-0.5 rounded-md ${
-                    metric.isPositive
-                      ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
-                      : 'bg-rose-500/10 text-rose-600 dark:text-rose-400'
-                  }`}
-                >
-                  {metric.isPositive ? (
-                    <TrendingUp className="w-3 h-3" />
-                  ) : (
-                    <TrendingDown className="w-3 h-3" />
-                  )}
-                  <span>{metric.change}</span>
+          const points = m.sparkline
+            .map((val, idx) => {
+              const x = (idx / (m.sparkline.length - 1)) * 70;
+              const y = 24 - ((val - minVal) / range) * 20;
+              return `${x},${y}`;
+            })
+            .join(' ');
+
+          return (
+            <div key={m.id} className="p-4 sm:p-5 flex flex-col justify-between space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="p-1.5 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                    {getIcon(m.icon)}
+                  </div>
+                  <span className="text-xs text-(--text-secondary) font-medium">{m.label}</span>
                 </div>
               </div>
 
-              {/* Title & Sub */}
-              <div className="text-xs font-semibold text-(--text-secondary)">{metric.label}</div>
-              <div className="text-[10px] text-(--text-muted) mb-2">{metric.subLabel}</div>
+              <div className="flex items-baseline justify-between">
+                <div>
+                  <div className="text-xl font-bold tracking-tight text-(--text-primary)">
+                    {m.value}
+                  </div>
+                  <div className="text-[11px] text-(--text-secondary) mt-0.5">{m.subLabel}</div>
+                </div>
 
-              {/* Value */}
-              <div className="text-xl sm:text-2xl font-black text-(--text-primary) tracking-tight">
-                {metric.value}
+                {/* Mini SVG Sparkline */}
+                <div className="w-18 h-7">
+                  <svg className="w-full h-full overflow-visible" viewBox="0 0 70 24">
+                    <polyline
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      points={points}
+                      className={m.isPositive ? 'text-emerald-500' : 'text-rose-500'}
+                    />
+                  </svg>
+                </div>
               </div>
-            </div>
 
-            {/* Sparkline & Footer */}
-            <div className="flex items-end justify-between pt-4 mt-2 border-t border-(--border-subtle)">
-              <span className="text-[10px] text-(--text-muted)">지난 30일 추이</span>
-              <div>{renderSparkline(metric.sparkline, metric.isPositive)}</div>
+              <div className="pt-2 border-t border-(--border-subtle) flex items-center justify-between text-[11px]">
+                <span className="text-(--text-secondary)">전월 동기 대비</span>
+                <span
+                  className={`font-semibold flex items-center gap-0.5 ${
+                    m.isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'
+                  }`}
+                >
+                  {m.isPositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+                  <span>{m.change}</span>
+                </span>
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
-    </div>
+    </Card>
   );
 }