atomsystem 0.4.1 → 0.4.3

package/components/blocks/InteractiveChatBlock.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Bot, User, Sparkles, Paperclip, MoreVertical, CheckCheck } from 'lucide-react';
+
+interface ChatMessage {
+  id: string;
+  sender: 'user' | 'assistant';
+  text: string;
+  timestamp: string;
+}
+
+const QUICK_PROMPTS = [
+  '🎨 primary 브랜드 색상 변경 방법',
+  '📐 8pt 그리드 스페이싱 토큰 조회',
+  '⚡ 다크모드 자동 전환 구현 가이드',
+  '🚀 0KB 런타임 CSS 내보내기'
+];
+
+export function InteractiveChatBlock() {
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: 'm1',
+      sender: 'assistant',
+      text: '안녕하세요! AtomDesignToken 대화형 어시스턴트입니다. 무엇이든 물어보세요. 디자인 시스템 구축과 토큰 확장을 신속히 도와드립니다.',
+      timestamp: '오전 10:24',
+    },
+    {
+      id: 'm2',
+      sender: 'user',
+      text: '디자인 토큰을 Tailwind v4 프로젝트에 어떻게 연결하나요?',
+      timestamp: '오전 10:25',
+    },
+    {
+      id: 'm3',
+      sender: 'assistant',
+      text: '@import "tailwindcss"; 설정 후 css/atom-ui.css를 최상단에 import하면 모든 --atom-* CSS 변수가 @theme 규칙과 자동 동기화되어 즉시 클래스로 활용할 수 있습니다!',
+      timestamp: '오전 10:25',
+    },
+  ]);
+
+  const [inputValue, setInputValue] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isTyping]);
+
+  const handleSendMessage = (textToSend?: string) => {
+    const text = textToSend || inputValue;
+    if (!text.trim()) return;
+
+    const now = new Date();
+    const timeStr = `${now.getHours() < 12 ? '오전' : '오후'} ${now.getHours() % 12 || 12}:${String(now.getMinutes()).padStart(2, '0')}`;
+
+    const newUserMsg: ChatMessage = {
+      id: `usr-${Date.now()}`,
+      sender: 'user',
+      text: text.trim(),
+      timestamp: timeStr,
+    };
+
+    setMessages((prev) => [...prev, newUserMsg]);
+    if (!textToSend) setInputValue('');
+    setIsTyping(true);
+
+    // AI 자동 답변 시뮬레이션
+    setTimeout(() => {
+      let replyText = '문의해주신 내용에 대한 표준 가이드라인이 준비되었습니다. AtomDesignToken의 W3C DTCG 토큰 명세를 통해 모든 프레임워크에서 100% 일관된 UI를 유지할 수 있습니다.';
+      if (text.includes('색상') || text.includes('primary')) {
+        replyText = '브랜드 기본 색상은 `--atom-primary: #3182f6;` 토큰으로 정의되어 있으며, Theme Editor에서 슬라이더나 프리셋을 통해 실시간으로 변경하고 즉시 내보낼 수 있습니다.';
+      } 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` 클래스를 토글하면 모든 시맨틱 색상 토큰이 부드러운 트랜지션과 함께 즉시 반전됩니다.';
+      }
+
+      const newBotMsg: ChatMessage = {
+        id: `bot-${Date.now()}`,
+        sender: 'assistant',
+        text: replyText,
+        timestamp: timeStr,
+      };
+
+      setMessages((prev) => [...prev, newBotMsg]);
+      setIsTyping(false);
+    }, 1100);
+  };
+
+  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)" />
+          </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>
+            <p className="text-[11px] text-(--text-muted)">평균 응답 속도 0.8초 · 디자인 시스템 도우미</p>
+          </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>
+      </div>
+
+      {/* Messages Scroll Feed */}
+      <div className="flex-1 p-4 sm:p-5 overflow-y-auto space-y-4">
+        {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'}`}
+            >
+              {/* Avatar */}
+              <div
+                className={`w-7 h-7 rounded-lg 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)'
+                }`}
+              >
+                {isUser ? <User className="w-4 h-4" /> : <Sparkles className="w-4 h-4" />}
+              </div>
+
+              {/* Message Bubble */}
+              <div className={`max-w-[78%] flex flex-col ${isUser ? 'items-end' : 'items-start'}`}>
+                <div
+                  className={`px-4 py-2.5 rounded-2xl text-xs sm:text-sm 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'
+                  }`}
+                >
+                  {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>
+              </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>
+        )}
+        <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
+            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"
+          >
+            {prompt}
+          </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>
+          <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"
+          />
+          <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"
+            title="전송"
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/components/blocks/MetricStatsBlock.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import React from 'react';
+import {
+  TrendingUp,
+  TrendingDown,
+  DollarSign,
+  Users,
+  Target,
+  Server,
+  ArrowUpRight,
+} from 'lucide-react';
+
+interface MetricItem {
+  id: string;
+  label: string;
+  subLabel: string;
+  value: string;
+  change: string;
+  isPositive: boolean;
+  icon: 'dollar' | 'users' | 'target' | 'server';
+  sparkline: number[];
+}
+
+const METRICS: MetricItem[] = [
+  {
+    id: 'm-arr',
+    label: '연간 반복 매출 (ARR)',
+    subLabel: '전체 유료 구독 합산',
+    value: '₩142,850,000',
+    change: '+18.4%',
+    isPositive: true,
+    icon: 'dollar',
+    sparkline: [35, 42, 40, 55, 60, 58, 72, 85],
+  },
+  {
+    id: 'm-mau',
+    label: '월간 활성 개발자 (MAU)',
+    subLabel: '토큰 CLI 호출 계정',
+    value: '49,210 명',
+    change: '+12.6%',
+    isPositive: true,
+    icon: 'users',
+    sparkline: [20, 25, 22, 38, 45, 48, 55, 64],
+  },
+  {
+    id: 'm-cvr',
+    label: '체험 가입 전환율 (CVR)',
+    subLabel: '스타터 → 프로 전환',
+    value: '4.92 %',
+    change: '-0.3%',
+    isPositive: false,
+    icon: 'target',
+    sparkline: [60, 58, 62, 54, 52, 55, 48, 50],
+  },
+  {
+    id: 'm-sla',
+    label: 'API 응답 신뢰도 & 가동률',
+    subLabel: '글로벌 엣지 네트워크',
+    value: '99.99 %',
+    change: '+0.01%',
+    isPositive: true,
+    icon: 'server',
+    sparkline: [98, 99, 99, 100, 99, 100, 100, 100],
+  },
+];
+
+export function MetricStatsBlock() {
+  const getIcon = (type: MetricItem['icon']) => {
+    switch (type) {
+      case 'dollar':
+        return <DollarSign className="w-4 h-4 text-emerald-500" />;
+      case 'users':
+        return <Users className="w-4 h-4 text-blue-500" />;
+      case 'target':
+        return <Target className="w-4 h-4 text-amber-500" />;
+      case 'server':
+        return <Server className="w-4 h-4 text-purple-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>
+
+      {/* 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>
+                </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>
+
+              {/* Value */}
+              <div className="text-xl sm:text-2xl font-black text-(--text-primary) tracking-tight">
+                {metric.value}
+              </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>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/blocks/PricingPlanBlock.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Check, X, Sparkles, Zap, Shield, Building2 } from 'lucide-react';
+
+interface PricingTier {
+  id: string;
+  name: string;
+  badge?: string;
+  isPopular?: boolean;
+  description: string;
+  monthlyPrice: number;
+  annualPrice: number;
+  icon: 'zap' | 'sparkles' | 'building';
+  features: { text: string; included: boolean }[];
+  ctaText: string;
+}
+
+const TIERS: PricingTier[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: '개인 개발자 및 소규모 사이드 프로젝트를 위한 무료 스타터 팩',
+    monthlyPrice: 0,
+    annualPrice: 0,
+    icon: 'zap',
+    ctaText: '무료로 시작하기',
+    features: [
+      { text: '최대 3개 프로젝트 연동', included: true },
+      { text: '기본 W3C DTCG 토큰 명세 제공', included: true },
+      { text: 'Tailwind v4 CSS 자동 컴파일', included: true },
+      { text: '커스텀 브랜드 테마 에디터', included: false },
+      { text: '우선순위 기술 지원 SLA', included: false },
+      { text: 'SSO 단일 로그인 및 감사 로그', included: false },
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    isPopular: true,
+    badge: '가장 인기 있는 플랜',
+    description: '성장하는 스타트업 및 디자인 시스템 팀을 위한 전문 도구 모음',
+    monthlyPrice: 29,
+    annualPrice: 22,
+    icon: 'sparkles',
+    ctaText: '14일 무료 체험 시작',
+    features: [
+      { text: '무제한 프로젝트 & 토큰 세트', included: true },
+      { text: '고급 실시간 차트 & 블록 전체 제공', included: true },
+      { text: 'Tailwind v4 / CSS / React 원클릭 내보내기', included: true },
+      { text: '커스텀 브랜드 테마 에디터 및 프리셋', included: true },
+      { text: '영업일 24시간 내 기술 지원 SLA', included: true },
+      { text: 'SSO 단일 로그인 및 감사 로그', included: false },
+    ],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: '엔터프라이즈 보안, 규정 준수, 대규모 팀을 위한 맞춤형 인프라',
+    monthlyPrice: 99,
+    annualPrice: 79,
+    icon: 'building',
+    ctaText: '영업팀 문의하기',
+    features: [
+      { text: '모든 Pro 기능 무제한 포함', included: true },
+      { text: '전담 솔루션 아키텍트 지원', included: true },
+      { text: '온프레미스 / VPC 프라이빗 배포', included: true },
+      { text: '99.99% 시스템 가동률 SLA 보증', included: true },
+      { text: 'SSO (SAML, Okta) & 상세 감사 로그', included: true },
+      { text: '맞춤형 계약 및 보안성 심사 지원', included: true },
+    ],
+  },
+];
+
+export function PricingPlanBlock() {
+  const [isAnnual, setIsAnnual] = useState<boolean>(true);
+  const [selectedPlan, setSelectedPlan] = useState<string>('pro');
+
+  const getTierIcon = (icon: PricingTier['icon']) => {
+    switch (icon) {
+      case 'zap':
+        return <Zap className="w-5 h-5 text-blue-500" />;
+      case 'sparkles':
+        return <Sparkles className="w-5 h-5 text-amber-500" />;
+      case 'building':
+        return <Building2 className="w-5 h-5 text-purple-500" />;
+    }
+  };
+
+  return (
+    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm p-5 sm:p-8 transition-colors">
+      {/* Header & Billing Toggle */}
+      <div className="text-center max-w-2xl mx-auto mb-10">
+        <span className="text-xs font-semibold text-(--accent-primary) uppercase tracking-wider">
+          투명하고 예측 가능한 요금제
+        </span>
+        <h3 className="text-2xl sm:text-3xl font-extrabold text-(--text-primary) tracking-tight mt-1 mb-3">
+          팀의 규모에 꼭 맞는 유연한 플랜
+        </h3>
+        <p className="text-xs sm:text-sm text-(--text-secondary) leading-relaxed">
+          숨겨진 비용 없이 언제든 플랜을 변경하거나 해지할 수 있습니다. 연간 결제 시 20%의 추가 할인이 적용됩니다.
+        </p>
+
+        {/* Toggle Switch */}
+        <div className="inline-flex items-center gap-3 p-1 rounded-full bg-(--bg-secondary) border border-(--border-subtle) mt-6">
+          <button
+            onClick={() => setIsAnnual(false)}
+            className={`px-4 py-1.5 rounded-full text-xs font-semibold transition-all ${
+              !isAnnual
+                ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            월간 결제
+          </button>
+          <button
+            onClick={() => setIsAnnual(true)}
+            className={`flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-semibold transition-all ${
+              isAnnual
+                ? 'bg-(--accent-primary) text-white shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <span>연간 결제</span>
+            <span
+              className={`text-[10px] px-1.5 py-0.2 rounded-full font-bold ${
+                isAnnual ? 'bg-white/20 text-white' : 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+              }`}
+            >
+              20% OFF
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* 3-Column Pricing Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
+        {TIERS.map((tier) => {
+          const isSelected = selectedPlan === tier.id;
+          const price = isAnnual ? tier.annualPrice : tier.monthlyPrice;
+
+          return (
+            <div
+              key={tier.id}
+              onClick={() => setSelectedPlan(tier.id)}
+              className={`relative flex flex-col justify-between rounded-2xl p-6 transition-all duration-200 cursor-pointer ${
+                tier.isPopular
+                  ? 'border-2 border-(--accent-primary) bg-(--bg-secondary)/40 shadow-md ring-4 ring-(--accent-primary)/10'
+                  : 'border border-(--border-strong) bg-(--bg-primary) hover:border-(--accent-primary)/50 shadow-xs'
+              }`}
+            >
+              {/* Popular Badge */}
+              {tier.badge && (
+                <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-[11px] font-bold bg-(--accent-primary) text-white shadow-sm flex items-center gap-1">
+                  <Sparkles className="w-3 h-3" />
+                  <span>{tier.badge}</span>
+                </div>
+              )}
+
+              <div>
+                {/* Tier Title & Icon */}
+                <div className="flex items-center justify-between mb-4">
+                  <div className="p-2.5 rounded-xl bg-(--bg-secondary) border border-(--border-subtle)">
+                    {getTierIcon(tier.icon)}
+                  </div>
+                  {isSelected && (
+                    <span className="text-[11px] font-bold px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+                      선택됨
+                    </span>
+                  )}
+                </div>
+
+                <h4 className="text-lg font-bold text-(--text-primary)">{tier.name}</h4>
+                <p className="text-xs text-(--text-secondary) mt-1 min-h-[32px] leading-relaxed">
+                  {tier.description}
+                </p>
+
+                {/* Price Display */}
+                <div className="my-6 pb-6 border-b border-(--border-subtle)">
+                  <div className="flex items-baseline gap-1">
+                    <span className="text-3xl sm:text-4xl font-black text-(--text-primary)">
+                      \${price}
+                    </span>
+                    <span className="text-xs text-(--text-muted)">/월 (계정당)</span>
+                  </div>
+                  <div className="text-[11px] text-(--text-muted) mt-1">
+                    {isAnnual ? '연간 일괄 결제 기준' : '매월 자동 갱신'}
+                  </div>
+                </div>
+
+                {/* Feature Checklist */}
+                <div className="space-y-3 mb-6">
+                  <div className="text-[11px] font-semibold text-(--text-muted) uppercase tracking-wider">
+                    포함된 핵심 기능
+                  </div>
+                  {tier.features.map((feat, idx) => (
+                    <div key={idx} className="flex items-center gap-2.5 text-xs">
+                      {feat.included ? (
+                        <div className="w-4 h-4 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0">
+                          <Check className="w-2.5 h-2.5 stroke-[3]" />
+                        </div>
+                      ) : (
+                        <div className="w-4 h-4 rounded-full bg-(--bg-secondary) text-(--text-muted) flex items-center justify-center shrink-0">
+                          <X className="w-2.5 h-2.5" />
+                        </div>
+                      )}
+                      <span className={feat.included ? 'text-(--text-primary)' : 'text-(--text-muted) line-through'}>
+                        {feat.text}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Action CTA */}
+              <button
+                className={`w-full py-2.5 rounded-xl font-bold text-xs tracking-wide transition-all shadow-xs ${
+                  tier.isPopular
+                    ? 'bg-(--accent-primary) hover:bg-(--accent-hover) text-white'
+                    : 'bg-(--bg-secondary) hover:bg-(--border-strong) text-(--text-primary) border border-(--border-subtle)'
+                }`}
+              >
+                {tier.ctaText}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}