import React, { useState } from 'react';
import { List, FileText, Edit3, Monitor, Layers, Box, Grid, Layout, Component, Square, MessageSquare, Bell, ChevronDown, ToggleLeft, Calendar, Upload } from 'lucide-react';

// 공통 UX 가이드 - 시스템 전반 UX 규칙 및 패턴 정의
const CommonUXGuide = () => {
  const [activeSection, setActiveSection] = useState('atomic-design');

  const sections = [
    { id: 'atomic-design', label: '아토믹 디자인', icon: Layers },
    { id: 'ui-elements', label: 'UI 요소별 UX', icon: Component },
    { id: 'list-ux', label: '목록 페이지 UX', icon: List },
    { id: 'detail-ux', label: '상세 페이지 UX', icon: FileText },
    { id: 'form-ux', label: '폼/입력 UX', icon: Edit3 },
    { id: 'responsive', label: '반응형 규칙', icon: Monitor },
  ];

  return (
    <div className="p-6">
      {/* 페이지 헤더 */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold">공통 UX</h1>
        <p className="text-gray-500">시스템 전반에서 사용되는 UX 규칙과 패턴을 정의합니다</p>
      </div>

      {/* 섹션 탭 */}
      <div className="flex gap-2 mb-6 border-b">
        {sections.map(section => {
          const Icon = section.icon;
          return (
            <button
              key={section.id}
              onClick={() => setActiveSection(section.id)}
              className={`flex items-center gap-2 px-4 py-2 border-b-2 transition-colors ${
                activeSection === section.id
                  ? 'border-black text-black font-medium'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Icon className="w-4 h-4" />
              {section.label}
            </button>
          );
        })}
      </div>

      {/* 아토믹 디자인 시스템 */}
      {activeSection === 'atomic-design' && (
        <div className="space-y-6">
          {/* 개요 */}
          <div className="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-6">
            <h3 className="font-bold text-purple-800 mb-3 flex items-center gap-2">
              <Layers className="w-5 h-5" />
              SAM MES 아토믹 디자인 시스템
            </h3>
            <p className="text-purple-700 mb-4">
              컴포넌트를 <strong>Atoms → Molecules → Organisms → Templates</strong> 단계로 구성하여
              일관된 UI와 재사용성을 극대화합니다.
            </p>
            <div className="grid grid-cols-4 gap-3 text-sm">
              <div className="bg-white rounded-lg p-3 text-center border">
                <div className="text-2xl mb-1">⚛️</div>
                <div className="font-medium">Atoms</div>
                <div className="text-xs text-gray-500">기본 요소</div>
              </div>
              <div className="bg-white rounded-lg p-3 text-center border">
                <div className="text-2xl mb-1">🧬</div>
                <div className="font-medium">Molecules</div>
                <div className="text-xs text-gray-500">조합 요소</div>
              </div>
              <div className="bg-white rounded-lg p-3 text-center border">
                <div className="text-2xl mb-1">🦠</div>
                <div className="font-medium">Organisms</div>
                <div className="text-xs text-gray-500">복합 컴포넌트</div>
              </div>
              <div className="bg-white rounded-lg p-3 text-center border">
                <div className="text-2xl mb-1">📄</div>
                <div className="font-medium">Templates</div>
                <div className="text-xs text-gray-500">페이지 레이아웃</div>
              </div>
            </div>
          </div>

          {/* ========== ATOMS ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-red-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-red-800 flex items-center gap-2">
                ⚛️ Atoms (기본 요소)
              </h3>
              <p className="text-sm text-red-600 mt-1">더 이상 분해할 수 없는 가장 작은 UI 단위</p>
            </div>
            <div className="p-6 space-y-6">

              {/* Button */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">ATOM</span>
                  Button 버튼
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm text-gray-600 mb-3">다양한 variant와 size를 지원하는 버튼 컴포넌트</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Primary</button>
                      <button className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium">Secondary</button>
                      <button className="bg-green-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Success</button>
                      <button className="bg-red-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Danger</button>
                      <button className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium">Outline</button>
                      <button className="text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-100">Ghost</button>
                    </div>
                    <div className="flex items-center gap-2">
                      <button className="bg-blue-500 text-white px-3 py-1.5 rounded-lg text-sm font-medium">Small</button>
                      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Medium</button>
                      <button className="bg-blue-500 text-white px-5 py-2.5 rounded-lg text-base font-medium">Large</button>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">variant</span>: 'primary' | 'secondary' | 'success' | 'danger' | 'outline' | 'ghost'</p>
                      <p><span className="text-purple-600">size</span>: 'sm' | 'md' | 'lg'</p>
                      <p><span className="text-purple-600">disabled</span>: boolean</p>
                      <p><span className="text-purple-600">onClick</span>: () =&gt; void</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* TextInput */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">ATOM</span>
                  TextInput 텍스트 입력
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <input type="text" placeholder="기본 입력 필드" className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
                    <input type="text" placeholder="비활성화 상태" disabled className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-gray-50 text-gray-500" />
                    <input type="text" placeholder="에러 상태" className="w-full px-3 py-2 border border-red-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" />
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">placeholder</span>: string</p>
                      <p><span className="text-purple-600">value</span>: string</p>
                      <p><span className="text-purple-600">onChange</span>: (value) =&gt; void</p>
                      <p><span className="text-purple-600">disabled</span>: boolean</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Select */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">ATOM</span>
                  Select 셀렉트
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div>
                    <select className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
                      <option value="">선택하세요</option>
                      <option value="1">옵션 1</option>
                      <option value="2">옵션 2</option>
                      <option value="3">옵션 3</option>
                    </select>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">options</span>: {'{ value, label }[]'}</p>
                      <p><span className="text-purple-600">value</span>: string</p>
                      <p><span className="text-purple-600">onChange</span>: (value) =&gt; void</p>
                      <p><span className="text-purple-600">placeholder</span>: string</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* StatusBadge */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">ATOM</span>
                  StatusBadge 상태 뱃지
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="flex flex-wrap gap-2">
                    <span className="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-medium">완료</span>
                    <span className="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-medium">진행중</span>
                    <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs font-medium">대기</span>
                    <span className="bg-red-100 text-red-700 px-2 py-1 rounded text-xs font-medium">반려</span>
                    <span className="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs font-medium">미발행</span>
                    <span className="bg-indigo-100 text-indigo-700 px-2 py-1 rounded text-xs font-medium">생산지시</span>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">status</span>: string (상태명)</p>
                      <p><span className="text-purple-600">size</span>: 'sm' | 'md'</p>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">* 상태별 색상은 statusColors 객체에서 자동 매핑</p>
                  </div>
                </div>
              </div>

              {/* Checkbox */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">ATOM</span>
                  Checkbox 체크박스
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="flex items-center gap-4">
                    <label className="flex items-center gap-2">
                      <input type="checkbox" className="rounded border-gray-300" />
                      <span className="text-sm">미선택</span>
                    </label>
                    <label className="flex items-center gap-2">
                      <input type="checkbox" checked readOnly className="rounded border-gray-300" />
                      <span className="text-sm">선택됨</span>
                    </label>
                    <label className="flex items-center gap-2">
                      <input type="checkbox" disabled className="rounded border-gray-300" />
                      <span className="text-sm text-gray-400">비활성화</span>
                    </label>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">사용법</p>
                    <div className="text-xs font-mono">
                      <p>{'<input type="checkbox" checked={isSelected} onChange={handleChange} />'}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== MOLECULES ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-orange-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-orange-800 flex items-center gap-2">
                🧬 Molecules (조합 요소)
              </h3>
              <p className="text-sm text-orange-600 mt-1">Atoms를 조합하여 만든 기능적 UI 그룹</p>
            </div>
            <div className="p-6 space-y-6">

              {/* FormField */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs">MOLECULE</span>
                  FormField 폼 필드
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="space-y-4">
                    <div className="space-y-1.5">
                      <label className="block text-sm font-medium text-gray-700">
                        거래처명 <span className="text-red-500 ml-0.5">*</span>
                      </label>
                      <input type="text" placeholder="거래처명 입력" className="w-full px-3 py-2 border border-gray-200 rounded-lg" />
                      <p className="text-xs text-gray-500">사업자등록증 상의 상호명을 입력하세요</p>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">구성</p>
                    <div className="text-xs space-y-1">
                      <p>• <span className="font-medium">Label</span> (라벨 + 필수표시)</p>
                      <p>• <span className="font-medium">Input</span> (TextInput/Select 등)</p>
                      <p>• <span className="font-medium">Hint</span> (도움말 텍스트)</p>
                    </div>
                    <p className="text-xs font-medium text-gray-500 mt-3 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">label</span>: string</p>
                      <p><span className="text-purple-600">required</span>: boolean</p>
                      <p><span className="text-purple-600">hint</span>: string</p>
                      <p><span className="text-purple-600">children</span>: ReactNode</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* SearchInput */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs">MOLECULE</span>
                  SearchInput 검색 입력
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="relative">
                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">🔍</span>
                    <input type="text" placeholder="검색어를 입력하세요..." className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg" />
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">구성</p>
                    <div className="text-xs space-y-1">
                      <p>• <span className="font-medium">Search Icon</span> (검색 아이콘)</p>
                      <p>• <span className="font-medium">TextInput</span> (입력 필드)</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* InfoRow */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs">MOLECULE</span>
                  InfoRow 정보 행
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <div>
                      <p className="text-sm text-gray-500 mb-1">견적번호</p>
                      <p className="font-medium text-gray-900">QT-2025-001</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-500 mb-1">거래처</p>
                      <p className="font-medium text-gray-900">삼성물산(주)</p>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">label</span>: string</p>
                      <p><span className="text-purple-600">value</span>: string | ReactNode</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* TabFilter */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs">MOLECULE</span>
                  TabFilter 탭 필터
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="flex gap-2">
                    <button className="px-4 py-2 rounded-full text-sm font-medium bg-black text-white">전체</button>
                    <button className="px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700">진행중</button>
                    <button className="px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700">완료</button>
                    <button className="px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700">취소</button>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">tabs</span>: {'{ id, label }[]'}</p>
                      <p><span className="text-purple-600">activeTab</span>: string</p>
                      <p><span className="text-purple-600">onTabChange</span>: (id) =&gt; void</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Pagination */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs">MOLECULE</span>
                  Pagination 페이지네이션
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500">총 125건 중 1-10</span>
                    <div className="flex items-center gap-1">
                      <button className="px-3 py-1 border rounded text-sm">&lt;</button>
                      <button className="px-3 py-1 bg-black text-white rounded text-sm">1</button>
                      <button className="px-3 py-1 border rounded text-sm">2</button>
                      <button className="px-3 py-1 border rounded text-sm">3</button>
                      <button className="px-3 py-1 border rounded text-sm">&gt;</button>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">currentPage</span>: number</p>
                      <p><span className="text-purple-600">totalPages</span>: number</p>
                      <p><span className="text-purple-600">onPageChange</span>: (page) =&gt; void</p>
                      <p><span className="text-purple-600">totalItems</span>: number</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== ORGANISMS ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-green-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-green-800 flex items-center gap-2">
                🦠 Organisms (복합 컴포넌트)
              </h3>
              <p className="text-sm text-green-600 mt-1">Molecules와 Atoms를 조합한 독립적인 UI 섹션</p>
            </div>
            <div className="p-6 space-y-6">

              {/* Card */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">ORGANISM</span>
                  Card 카드
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="bg-white rounded-xl border border-gray-100 shadow-sm">
                    <div className="px-5 py-4 border-b border-gray-100">
                      <h3 className="font-semibold text-gray-900">카드 제목</h3>
                    </div>
                    <div className="p-5">
                      <p className="text-gray-600">카드 내용이 들어가는 영역입니다.</p>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">title</span>: string (선택)</p>
                      <p><span className="text-purple-600">children</span>: ReactNode</p>
                      <p><span className="text-purple-600">className</span>: string</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* StatCard / DashboardCard */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">ORGANISM</span>
                  StatCard / DashboardCard 통계 카드
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="grid grid-cols-2 gap-3">
                    <div className="bg-white rounded-xl p-4 border">
                      <p className="text-sm text-gray-500 mb-1">이번 달 견적</p>
                      <p className="text-2xl font-bold">125건</p>
                    </div>
                    <div className="bg-white rounded-xl p-4 border">
                      <p className="text-sm text-gray-500 mb-1">진행중 수주</p>
                      <p className="text-2xl font-bold text-blue-600">42건</p>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">icon</span>: IconComponent</p>
                      <p><span className="text-purple-600">title/label</span>: string</p>
                      <p><span className="text-purple-600">value</span>: string | number</p>
                      <p><span className="text-purple-600">color</span>: 'blue' | 'green' | 'red' | ...</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* ListTable */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">ORGANISM</span>
                  ListTable 목록 테이블
                </h4>
                <div className="border rounded-lg overflow-hidden">
                  <table className="w-full text-sm">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="text-center p-3 w-10"><input type="checkbox" className="rounded" /></th>
                        <th className="text-left p-3">번호</th>
                        <th className="text-left p-3">제목</th>
                        <th className="text-left p-3">상태</th>
                        <th className="text-center p-3 w-24">작업</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-t bg-blue-50">
                        <td className="text-center p-3"><input type="checkbox" checked readOnly className="rounded" /></td>
                        <td className="p-3 font-mono">001</td>
                        <td className="p-3">샘플 데이터</td>
                        <td className="p-3"><span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">완료</span></td>
                        <td className="p-3 text-center">
                          <button className="text-blue-600 text-xs mr-2">수정</button>
                          <button className="text-red-600 text-xs">삭제</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div className="bg-gray-50 rounded-lg p-3 mt-3">
                  <p className="text-xs font-medium text-gray-500 mb-2">특징</p>
                  <div className="text-xs space-y-1">
                    <p>• 체크박스 선택 시 해당 행에만 작업 버튼 표시</p>
                    <p>• 선택된 행은 bg-blue-50 배경</p>
                    <p>• useListSelection 훅과 함께 사용</p>
                  </div>
                </div>
              </div>

              {/* SlidePanel */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">ORGANISM</span>
                  SlidePanel 슬라이드 패널
                </h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="border rounded-lg h-40 relative overflow-hidden bg-gray-100">
                    <div className="absolute right-0 top-0 h-full w-2/3 bg-white shadow-lg">
                      <div className="flex items-center justify-between px-4 py-3 border-b bg-gray-50">
                        <span className="font-bold">패널 제목</span>
                        <button className="text-gray-400">✕</button>
                      </div>
                      <div className="p-4 text-sm text-gray-500">패널 내용...</div>
                    </div>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs font-medium text-gray-500 mb-2">Props</p>
                    <div className="text-xs font-mono space-y-1">
                      <p><span className="text-purple-600">isOpen</span>: boolean</p>
                      <p><span className="text-purple-600">onClose</span>: () =&gt; void</p>
                      <p><span className="text-purple-600">title</span>: string</p>
                      <p><span className="text-purple-600">width</span>: 'max-w-md' | 'max-w-2xl' | ...</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* PageHeader */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">ORGANISM</span>
                  PageHeader 페이지 헤더
                </h4>
                <div className="border rounded-lg p-4 bg-gray-50">
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <span className="text-blue-500">📋</span>
                      <h1 className="text-xl font-bold text-gray-900">견적 목록</h1>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <button className="border px-3 py-1.5 rounded text-sm">견적서</button>
                        <button className="border px-3 py-1.5 rounded text-sm">산출내역서</button>
                      </div>
                      <div className="flex items-center gap-2">
                        <button className="border px-4 py-2 rounded text-sm">목록</button>
                        <button className="bg-black text-white px-4 py-2 rounded text-sm">+ 견적 등록</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-gray-50 rounded-lg p-3 mt-3">
                  <p className="text-xs font-medium text-gray-500 mb-2">레이아웃 규칙</p>
                  <div className="text-xs space-y-1">
                    <p>• <strong>1행</strong>: 아이콘 + 타이틀</p>
                    <p>• <strong>2행</strong>: 좌측(문서버튼) / 우측(액션버튼)</p>
                    <p>• 타이틀: text-xl font-bold</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== TEMPLATES ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-blue-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-blue-800 flex items-center gap-2">
                📄 Templates (페이지 레이아웃)
              </h3>
              <p className="text-sm text-blue-600 mt-1">Organisms를 배치하여 완성한 페이지 구조</p>
            </div>
            <div className="p-6 space-y-6">

              {/* ListPageLayout */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">TEMPLATE</span>
                  ListPageLayout 목록 페이지
                </h4>
                <div className="border rounded-lg overflow-hidden bg-gray-100 p-4">
                  <div className="bg-white rounded-lg p-3 space-y-3 text-xs">
                    <div className="border-b pb-2">
                      <div className="font-bold">1. PageHeader</div>
                      <div className="text-gray-500 ml-4">타이틀 + 등록 버튼</div>
                    </div>
                    <div className="border-b pb-2">
                      <div className="font-bold">2. StatCards (4개)</div>
                      <div className="grid grid-cols-4 gap-1 mt-1">
                        <div className="bg-gray-200 h-8 rounded"></div>
                        <div className="bg-gray-200 h-8 rounded"></div>
                        <div className="bg-gray-200 h-8 rounded"></div>
                        <div className="bg-gray-200 h-8 rounded"></div>
                      </div>
                    </div>
                    <div className="border-b pb-2">
                      <div className="font-bold">3. SearchInput</div>
                      <div className="bg-gray-200 h-6 rounded mt-1"></div>
                    </div>
                    <div className="border-b pb-2">
                      <div className="font-bold">4. TabFilter</div>
                      <div className="flex gap-1 mt-1">
                        <div className="bg-black text-white px-2 py-0.5 rounded">전체</div>
                        <div className="bg-gray-200 px-2 py-0.5 rounded">진행중</div>
                        <div className="bg-gray-200 px-2 py-0.5 rounded">완료</div>
                      </div>
                    </div>
                    <div>
                      <div className="font-bold">5. ListTable</div>
                      <div className="bg-gray-200 h-20 rounded mt-1"></div>
                    </div>
                  </div>
                </div>
              </div>

              {/* DetailPageLayout */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">TEMPLATE</span>
                  DetailPageLayout 상세 페이지
                </h4>
                <div className="border rounded-lg overflow-hidden bg-gray-100 p-4">
                  <div className="bg-white rounded-lg p-3 space-y-3 text-xs">
                    <div className="border-b pb-2">
                      <div className="font-bold">1. PageHeader</div>
                      <div className="text-gray-500 ml-4">타이틀 + 문서버튼(좌) + 액션버튼(우)</div>
                    </div>
                    <div>
                      <div className="font-bold">2. Card Sections (반응형 그리드)</div>
                      <div className="grid grid-cols-3 gap-2 mt-1">
                        <div className="bg-gray-200 h-24 rounded p-2">
                          <div className="text-xs font-medium mb-1">기본정보</div>
                        </div>
                        <div className="bg-gray-200 h-24 rounded p-2">
                          <div className="text-xs font-medium mb-1">금액정보</div>
                        </div>
                        <div className="bg-gray-200 h-24 rounded p-2">
                          <div className="text-xs font-medium mb-1">상태정보</div>
                        </div>
                      </div>
                      <div className="text-gray-500 mt-2">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* FormPageLayout */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">TEMPLATE</span>
                  FormPageLayout 등록/수정 페이지
                </h4>
                <div className="border rounded-lg overflow-hidden bg-gray-100 p-4">
                  <div className="bg-white rounded-lg p-3 space-y-3 text-xs">
                    <div className="border-b pb-2">
                      <div className="font-bold">1. PageHeader</div>
                      <div className="text-gray-500 ml-4">타이틀 + 취소/저장 버튼(우측)</div>
                    </div>
                    <div>
                      <div className="font-bold">2. Form Sections</div>
                      <div className="space-y-2 mt-1">
                        <div className="bg-gray-200 rounded p-2">
                          <div className="text-xs font-medium mb-1">기본 정보</div>
                          <div className="grid grid-cols-3 gap-1">
                            <div className="bg-white h-6 rounded"></div>
                            <div className="bg-white h-6 rounded"></div>
                            <div className="bg-white h-6 rounded"></div>
                          </div>
                        </div>
                        <div className="bg-gray-200 rounded p-2">
                          <div className="text-xs font-medium mb-1">상세 정보</div>
                          <div className="grid grid-cols-3 gap-1">
                            <div className="bg-white h-6 rounded"></div>
                            <div className="bg-white h-6 rounded"></div>
                            <div className="bg-white h-6 rounded"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== HOOKS ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-purple-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-purple-800 flex items-center gap-2">
                🪝 Custom Hooks (커스텀 훅)
              </h3>
              <p className="text-sm text-purple-600 mt-1">컴포넌트 로직을 재사용 가능하게 분리한 함수</p>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="border rounded-lg p-4">
                  <h4 className="font-bold text-gray-800 mb-2">useListSelection</h4>
                  <p className="text-sm text-gray-600 mb-3">목록 선택 상태 관리</p>
                  <div className="bg-gray-50 rounded p-3 text-xs font-mono">
                    <p className="text-purple-600">반환값:</p>
                    <p>selectedIds, handleSelect, handleSelectAll,</p>
                    <p>isAllSelected, hasSelection, isMultiSelect, isSelected</p>
                  </div>
                </div>
                <div className="border rounded-lg p-4">
                  <h4 className="font-bold text-gray-800 mb-2">useResponsive</h4>
                  <p className="text-sm text-gray-600 mb-3">화면 크기 감지</p>
                  <div className="bg-gray-50 rounded p-3 text-xs font-mono">
                    <p className="text-purple-600">반환값:</p>
                    <p>screenSize, isMobile, isTablet,</p>
                    <p>isDesktop, isMobileOrTablet</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* UI 요소별 UX */}
      {activeSection === 'ui-elements' && (
        <div className="space-y-6">
          {/* 개요 */}
          <div className="bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 rounded-lg p-6">
            <h3 className="font-bold text-indigo-800 mb-3 flex items-center gap-2">
              <Component className="w-5 h-5" />
              UI 요소별 UX 가이드
            </h3>
            <p className="text-indigo-700">
              각 UI 요소(다이얼로그, 버튼, 드롭다운 등)의 <strong>사용 목적, 동작 규칙, 스타일 가이드</strong>를 정의합니다.
            </p>
          </div>

          {/* ========== 다이얼로그/모달 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-blue-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-blue-800 flex items-center gap-2">
                <Square className="w-5 h-5" />
                다이얼로그 / 모달 (Dialog / Modal)
              </h3>
              <p className="text-sm text-blue-600 mt-1">사용자의 주의를 집중시키고 중요한 작업이나 정보를 표시</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 사용 목적 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">사용 목적</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <div className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">✓</span>
                      <div>
                        <p className="font-medium text-sm">확인 다이얼로그 (Confirm)</p>
                        <p className="text-xs text-gray-500">삭제, 취소 등 되돌릴 수 없는 작업 전 확인</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">✓</span>
                      <div>
                        <p className="font-medium text-sm">알림 다이얼로그 (Alert)</p>
                        <p className="text-xs text-gray-500">중요한 정보나 경고 메시지 표시</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">✓</span>
                      <div>
                        <p className="font-medium text-sm">폼 다이얼로그 (Form)</p>
                        <p className="text-xs text-gray-500">빠른 데이터 입력 (간단한 추가/수정)</p>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">✓</span>
                      <div>
                        <p className="font-medium text-sm">선택 다이얼로그 (Selection)</p>
                        <p className="text-xs text-gray-500">품목 선택, 거래처 검색 등 데이터 선택</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <span className="text-green-500 mt-0.5">✓</span>
                      <div>
                        <p className="font-medium text-sm">상세 보기 (Detail)</p>
                        <p className="text-xs text-gray-500">목록에서 상세 정보 빠른 확인</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* 동작 규칙 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">동작 규칙</h4>
                <div className="space-y-3">
                  <div className="bg-yellow-50 border border-yellow-200 rounded p-3">
                    <p className="font-medium text-yellow-800 text-sm mb-2">필수 규칙</p>
                    <ul className="text-sm text-yellow-700 space-y-1">
                      <li>• 배경 오버레이 클릭 시 닫힘 (확인 다이얼로그 제외)</li>
                      <li>• ESC 키로 닫기 지원</li>
                      <li>• 닫기(X) 버튼 항상 우측 상단에 배치</li>
                      <li>• 열릴 때 첫 번째 입력 필드 또는 주요 버튼에 포커스</li>
                    </ul>
                  </div>
                  <div className="bg-red-50 border border-red-200 rounded p-3">
                    <p className="font-medium text-red-800 text-sm mb-2">금지 사항 (이 프로젝트 규칙)</p>
                    <ul className="text-sm text-red-700 space-y-1">
                      <li>• 모달/다이얼로그 콘텐츠 영역에 아이콘 사용 금지</li>
                      <li>• 섹션 헤더에 숫자 뱃지나 이모지 사용 금지</li>
                      <li>• 기본 버튼(닫기 X 버튼 등)만 아이콘 허용</li>
                    </ul>
                  </div>
                </div>
              </div>

              {/* 스타일 가이드 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">스타일 가이드</h4>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium text-gray-600 mb-2">크기별 사용</p>
                    <table className="w-full text-sm border">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="text-left p-2 border-b">크기</th>
                          <th className="text-left p-2 border-b">너비</th>
                          <th className="text-left p-2 border-b">용도</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-2">Small</td>
                          <td className="p-2 font-mono text-xs">max-w-sm</td>
                          <td className="p-2">확인/알림</td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-2">Medium</td>
                          <td className="p-2 font-mono text-xs">max-w-md</td>
                          <td className="p-2">간단한 폼</td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-2">Large</td>
                          <td className="p-2 font-mono text-xs">max-w-2xl</td>
                          <td className="p-2">복잡한 폼</td>
                        </tr>
                        <tr>
                          <td className="p-2">XLarge</td>
                          <td className="p-2 font-mono text-xs">max-w-4xl</td>
                          <td className="p-2">테이블/목록</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-600 mb-2">버튼 배치 규칙</p>
                    <div className="space-y-2 text-sm">
                      <div className="bg-gray-50 rounded p-3">
                        <p className="font-medium mb-1">확인 다이얼로그</p>
                        <div className="flex justify-end gap-2">
                          <button className="px-3 py-1.5 border rounded text-sm">취소</button>
                          <button className="px-3 py-1.5 bg-red-600 text-white rounded text-sm">삭제</button>
                        </div>
                        <p className="text-xs text-gray-500 mt-2">위험한 작업: 빨간색 버튼 사용</p>
                      </div>
                      <div className="bg-gray-50 rounded p-3">
                        <p className="font-medium mb-1">일반 다이얼로그</p>
                        <div className="flex justify-end gap-2">
                          <button className="px-3 py-1.5 border rounded text-sm">취소</button>
                          <button className="px-3 py-1.5 bg-black text-white rounded text-sm">확인</button>
                        </div>
                        <p className="text-xs text-gray-500 mt-2">일반 작업: 검정색 버튼 사용</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* 예시 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">다이얼로그 예시</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* 확인 다이얼로그 */}
                  <div className="border rounded-lg overflow-hidden">
                    <div className="bg-gray-50 px-4 py-3 border-b flex justify-between items-center">
                      <span className="font-medium">삭제 확인</span>
                      <button className="text-gray-400 hover:text-gray-600">✕</button>
                    </div>
                    <div className="p-4">
                      <p className="text-sm text-gray-600 mb-4">선택한 2개의 항목을 삭제하시겠습니까?<br/>이 작업은 되돌릴 수 없습니다.</p>
                      <div className="flex justify-end gap-2">
                        <button className="px-3 py-1.5 border rounded text-sm">취소</button>
                        <button className="px-3 py-1.5 bg-red-600 text-white rounded text-sm">삭제</button>
                      </div>
                    </div>
                  </div>
                  {/* 폼 다이얼로그 */}
                  <div className="border rounded-lg overflow-hidden">
                    <div className="bg-gray-50 px-4 py-3 border-b flex justify-between items-center">
                      <span className="font-medium">거래처 추가</span>
                      <button className="text-gray-400 hover:text-gray-600">✕</button>
                    </div>
                    <div className="p-4">
                      <div className="space-y-3 mb-4">
                        <div>
                          <label className="block text-sm font-medium mb-1">거래처명 <span className="text-red-500">*</span></label>
                          <input type="text" className="w-full border rounded px-3 py-1.5 text-sm" placeholder="입력" />
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1">사업자번호</label>
                          <input type="text" className="w-full border rounded px-3 py-1.5 text-sm" placeholder="000-00-00000" />
                        </div>
                      </div>
                      <div className="flex justify-end gap-2">
                        <button className="px-3 py-1.5 border rounded text-sm">취소</button>
                        <button className="px-3 py-1.5 bg-black text-white rounded text-sm">저장</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 버튼 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-green-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-green-800 flex items-center gap-2">
                <Square className="w-5 h-5" />
                버튼 (Button)
              </h3>
              <p className="text-sm text-green-600 mt-1">사용자 액션을 트리거하는 인터랙티브 요소</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 버튼 유형 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">버튼 유형 및 용도</h4>
                <div className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full bg-black text-white px-4 py-2 rounded-lg text-sm font-medium mb-2">Primary</button>
                      <p className="text-xs text-gray-600">주요 액션 (저장, 등록, 확인)</p>
                      <p className="text-xs text-gray-500 mt-1">페이지당 1개 권장</p>
                    </div>
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium mb-2">Secondary</button>
                      <p className="text-xs text-gray-600">보조 액션 (취소, 목록)</p>
                      <p className="text-xs text-gray-500 mt-1">Primary와 함께 사용</p>
                    </div>
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium mb-2">Danger</button>
                      <p className="text-xs text-gray-600">위험 액션 (삭제)</p>
                      <p className="text-xs text-gray-500 mt-1">되돌릴 수 없는 작업</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium mb-2">Ghost / Link</button>
                      <p className="text-xs text-gray-600">텍스트 링크 스타일</p>
                      <p className="text-xs text-gray-500 mt-1">테이블 내 액션, 부가 기능</p>
                    </div>
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full bg-gray-100 text-gray-400 px-4 py-2 rounded-lg text-sm font-medium mb-2 cursor-not-allowed">Disabled</button>
                      <p className="text-xs text-gray-600">비활성 상태</p>
                      <p className="text-xs text-gray-500 mt-1">조건 미충족 시</p>
                    </div>
                    <div className="bg-gray-50 rounded p-3">
                      <button className="w-full bg-black text-white px-4 py-2 rounded-lg text-sm font-medium mb-2 flex items-center justify-center gap-2">
                        <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                        Loading
                      </button>
                      <p className="text-xs text-gray-600">로딩 상태</p>
                      <p className="text-xs text-gray-500 mt-1">API 호출 중</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* 버튼 크기 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">버튼 크기</h4>
                <div className="flex items-end gap-4 flex-wrap">
                  <div className="text-center">
                    <button className="bg-black text-white px-2.5 py-1 rounded text-xs font-medium">XSmall</button>
                    <p className="text-xs text-gray-500 mt-1">테이블 내</p>
                  </div>
                  <div className="text-center">
                    <button className="bg-black text-white px-3 py-1.5 rounded text-sm font-medium">Small</button>
                    <p className="text-xs text-gray-500 mt-1">보조 액션</p>
                  </div>
                  <div className="text-center">
                    <button className="bg-black text-white px-4 py-2 rounded text-sm font-medium">Medium</button>
                    <p className="text-xs text-gray-500 mt-1">기본 (권장)</p>
                  </div>
                  <div className="text-center">
                    <button className="bg-black text-white px-5 py-2.5 rounded text-base font-medium">Large</button>
                    <p className="text-xs text-gray-500 mt-1">강조 필요 시</p>
                  </div>
                </div>
              </div>

              {/* 버튼 배치 규칙 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">버튼 배치 규칙</h4>
                <div className="space-y-4">
                  <div className="bg-blue-50 border border-blue-200 rounded p-3">
                    <p className="font-medium text-blue-800 text-sm mb-2">페이지 헤더 버튼</p>
                    <div className="bg-white rounded p-3 border">
                      <div className="space-y-2">
                        <div className="flex items-center gap-2">
                          <span className="text-blue-500">📋</span>
                          <span className="font-bold">견적 목록</span>
                        </div>
                        <div className="flex justify-end">
                          <button className="bg-black text-white px-4 py-2 rounded text-sm">+ 견적 등록</button>
                        </div>
                      </div>
                    </div>
                    <p className="text-xs text-blue-700 mt-2">타이틀 아래, 우측 정렬</p>
                  </div>
                  <div className="bg-green-50 border border-green-200 rounded p-3">
                    <p className="font-medium text-green-800 text-sm mb-2">폼 버튼</p>
                    <div className="bg-white rounded p-3 border">
                      <div className="flex justify-end gap-2">
                        <button className="border px-4 py-2 rounded text-sm">취소</button>
                        <button className="bg-black text-white px-4 py-2 rounded text-sm">저장</button>
                      </div>
                    </div>
                    <p className="text-xs text-green-700 mt-2">우측 정렬, 취소 → 확인 순서</p>
                  </div>
                  <div className="bg-yellow-50 border border-yellow-200 rounded p-3">
                    <p className="font-medium text-yellow-800 text-sm mb-2">상세 페이지 버튼</p>
                    <div className="bg-white rounded p-3 border">
                      <div className="flex justify-between">
                        <div className="flex gap-2">
                          <button className="border px-3 py-1.5 rounded text-sm">견적서</button>
                          <button className="border px-3 py-1.5 rounded text-sm">산출내역서</button>
                        </div>
                        <div className="flex gap-2">
                          <button className="border px-4 py-2 rounded text-sm">목록</button>
                          <button className="bg-black text-white px-4 py-2 rounded text-sm">수정</button>
                        </div>
                      </div>
                    </div>
                    <p className="text-xs text-yellow-700 mt-2">좌측: 문서 버튼 / 우측: 액션 버튼</p>
                  </div>
                </div>
              </div>

              {/* 와이어프레임 규칙 */}
              <div className="border rounded-lg p-4 bg-gray-50">
                <h4 className="font-bold text-gray-800 mb-3">와이어프레임 버튼 규칙 (이 프로젝트)</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium mb-2">색깔 버튼 (Primary)</p>
                    <button className="bg-black text-white px-4 py-2 rounded text-sm">검정 배경 + 흰 텍스트</button>
                    <p className="text-xs text-gray-500 mt-2">blue-600, green-600 등 → 검정색으로 변환</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium mb-2">흰색/Outline 버튼</p>
                    <button className="bg-white border text-black px-4 py-2 rounded text-sm">흰 배경 + 검정 텍스트</button>
                    <p className="text-xs text-gray-500 mt-2">기존 스타일 유지</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 드롭다운/셀렉트 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-orange-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-orange-800 flex items-center gap-2">
                <ChevronDown className="w-5 h-5" />
                드롭다운 / 셀렉트 (Dropdown / Select)
              </h3>
              <p className="text-sm text-orange-600 mt-1">여러 옵션 중 하나 또는 여러 개를 선택</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 유형 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">드롭다운 유형</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">기본 셀렉트</p>
                    <select className="w-full px-3 py-2 border rounded bg-white text-sm">
                      <option>선택하세요</option>
                      <option>옵션 1</option>
                      <option>옵션 2</option>
                    </select>
                    <p className="text-xs text-gray-500 mt-2">단일 선택, 폼 필드용</p>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">검색 가능 셀렉트</p>
                    <div className="relative">
                      <input type="text" className="w-full px-3 py-2 border rounded text-sm" placeholder="검색..." />
                      <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    </div>
                    <p className="text-xs text-gray-500 mt-2">옵션 많을 때 (10개+)</p>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">다중 선택</p>
                    <div className="flex flex-wrap gap-1 p-2 border rounded bg-white">
                      <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs flex items-center gap-1">
                        옵션1 <span className="cursor-pointer">×</span>
                      </span>
                      <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs flex items-center gap-1">
                        옵션2 <span className="cursor-pointer">×</span>
                      </span>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">여러 항목 선택 시</p>
                  </div>
                </div>
              </div>

              {/* 동작 규칙 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">동작 규칙</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>기본값이 있으면 placeholder 대신 기본값 표시</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>옵션 10개 이상이면 검색 기능 추가</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>드롭다운 최대 높이: max-h-60 (스크롤 처리)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>키보드 네비게이션 지원 (↑↓, Enter, Esc)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>외부 클릭 시 닫힘</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 토스트/알림 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-purple-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-purple-800 flex items-center gap-2">
                <Bell className="w-5 h-5" />
                토스트 / 알림 (Toast / Notification)
              </h3>
              <p className="text-sm text-purple-600 mt-1">작업 결과나 시스템 상태를 일시적으로 표시</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 유형 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">토스트 유형</h4>
                <div className="space-y-3">
                  <div className="bg-green-50 border border-green-200 rounded-lg p-3 flex items-center gap-3">
                    <span className="text-green-500 text-xl">✓</span>
                    <div className="flex-1">
                      <p className="font-medium text-green-800">성공</p>
                      <p className="text-sm text-green-700">저장이 완료되었습니다.</p>
                    </div>
                    <button className="text-green-400">×</button>
                  </div>
                  <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
                    <span className="text-red-500 text-xl">!</span>
                    <div className="flex-1">
                      <p className="font-medium text-red-800">오류</p>
                      <p className="text-sm text-red-700">저장에 실패했습니다. 다시 시도해주세요.</p>
                    </div>
                    <button className="text-red-400">×</button>
                  </div>
                  <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 flex items-center gap-3">
                    <span className="text-yellow-500 text-xl">⚠</span>
                    <div className="flex-1">
                      <p className="font-medium text-yellow-800">경고</p>
                      <p className="text-sm text-yellow-700">입력하지 않은 필드가 있습니다.</p>
                    </div>
                    <button className="text-yellow-400">×</button>
                  </div>
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center gap-3">
                    <span className="text-blue-500 text-xl">ℹ</span>
                    <div className="flex-1">
                      <p className="font-medium text-blue-800">정보</p>
                      <p className="text-sm text-blue-700">새로운 견적이 등록되었습니다.</p>
                    </div>
                    <button className="text-blue-400">×</button>
                  </div>
                </div>
              </div>

              {/* 동작 규칙 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">동작 규칙</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="font-medium text-sm mb-2">표시 위치</p>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 기본: 우측 상단 (top-right)</li>
                      <li>• 모바일: 하단 중앙 (bottom-center)</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-medium text-sm mb-2">표시 시간</p>
                    <ul className="text-sm text-gray-600 space-y-1">
                      <li>• 성공: 3초 후 자동 닫힘</li>
                      <li>• 오류: 5초 또는 수동 닫기</li>
                      <li>• 정보: 4초 후 자동 닫힘</li>
                    </ul>
                  </div>
                </div>
              </div>

              {/* 사용 규칙 */}
              <div className="border rounded-lg p-4 bg-yellow-50">
                <h4 className="font-bold text-yellow-800 mb-3">토스트 vs 다이얼로그 선택 기준</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="font-medium text-yellow-800 mb-2">토스트 사용</p>
                    <ul className="text-yellow-700 space-y-1">
                      <li>• 단순 결과 알림 (저장 완료)</li>
                      <li>• 사용자 흐름 중단 불필요</li>
                      <li>• 부가 정보 전달</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-medium text-yellow-800 mb-2">다이얼로그 사용</p>
                    <ul className="text-yellow-700 space-y-1">
                      <li>• 사용자 확인 필요 (삭제)</li>
                      <li>• 중요한 오류 메시지</li>
                      <li>• 추가 입력/선택 필요</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 탭 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-teal-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-teal-800 flex items-center gap-2">
                <Layout className="w-5 h-5" />
                탭 (Tabs)
              </h3>
              <p className="text-sm text-teal-600 mt-1">관련 콘텐츠를 논리적으로 그룹화하여 전환</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 유형 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">탭 유형</h4>
                <div className="space-y-4">
                  <div>
                    <p className="font-medium text-sm mb-2">라인 탭 (기본)</p>
                    <div className="flex border-b">
                      <button className="px-4 py-2 border-b-2 border-black text-black font-medium">전체</button>
                      <button className="px-4 py-2 border-b-2 border-transparent text-gray-500">진행중</button>
                      <button className="px-4 py-2 border-b-2 border-transparent text-gray-500">완료</button>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">페이지 내 콘텐츠 전환, 문서 유형 선택</p>
                  </div>
                  <div>
                    <p className="font-medium text-sm mb-2">필터 탭 (Pill)</p>
                    <div className="flex gap-2">
                      <button className="px-4 py-2 rounded-full bg-black text-white text-sm">전체</button>
                      <button className="px-4 py-2 rounded-full bg-gray-100 text-gray-700 text-sm">진행중</button>
                      <button className="px-4 py-2 rounded-full bg-gray-100 text-gray-700 text-sm">완료</button>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">목록 필터링, 상태별 분류</p>
                  </div>
                  <div>
                    <p className="font-medium text-sm mb-2">카운트 탭</p>
                    <div className="flex gap-2">
                      <button className="px-4 py-2 rounded-full bg-black text-white text-sm">전체 (125)</button>
                      <button className="px-4 py-2 rounded-full bg-gray-100 text-gray-700 text-sm">진행중 (42)</button>
                      <button className="px-4 py-2 rounded-full bg-gray-100 text-gray-700 text-sm">완료 (83)</button>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">각 상태별 건수 표시</p>
                  </div>
                </div>
              </div>

              {/* 사용 규칙 */}
              <div className="border rounded-lg p-4 bg-red-50">
                <h4 className="font-bold text-red-800 mb-3">탭 사용 규칙 (이 프로젝트)</h4>
                <div className="space-y-2 text-sm text-red-700">
                  <div className="flex items-start gap-2">
                    <span className="text-red-500 mt-0.5">✗</span>
                    <p><strong>상세 페이지에서 탭 사용 금지</strong> - 섹션 기반 레이아웃 사용</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>탭 허용: 문서 전환 (견적서/산출내역서/발주서)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>탭 허용: 목록 필터링 (전체/진행중/완료)</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 테이블 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-slate-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                <Grid className="w-5 h-5" />
                테이블 (Table)
              </h3>
              <p className="text-sm text-slate-600 mt-1">구조화된 데이터를 행과 열로 표시</p>
            </div>
            <div className="p-6 space-y-6">

              {/* 기본 구조 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">테이블 기본 구조</h4>
                <div className="border rounded-lg overflow-hidden">
                  <table className="w-full text-sm">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="text-center p-3 w-10 border-b"><input type="checkbox" className="rounded" /></th>
                        <th className="text-left p-3 border-b font-medium">번호</th>
                        <th className="text-left p-3 border-b font-medium">제목</th>
                        <th className="text-left p-3 border-b font-medium">상태</th>
                        <th className="text-center p-3 w-24 border-b font-medium">작업</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-b hover:bg-gray-50">
                        <td className="text-center p-3"><input type="checkbox" className="rounded" /></td>
                        <td className="p-3 font-mono">001</td>
                        <td className="p-3">샘플 데이터</td>
                        <td className="p-3"><span className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">완료</span></td>
                        <td className="text-center p-3">-</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* 컬럼 정렬 */}
              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">컬럼 정렬 규칙</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium mb-1">좌측 정렬 (text-left)</p>
                    <ul className="text-gray-600 text-xs space-y-1">
                      <li>• 텍스트 (제목, 이름)</li>
                      <li>• 설명, 메모</li>
                    </ul>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium mb-1">우측 정렬 (text-right)</p>
                    <ul className="text-gray-600 text-xs space-y-1">
                      <li>• 숫자 (금액, 수량)</li>
                      <li>• 비율, 퍼센트</li>
                    </ul>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium mb-1">가운데 정렬 (text-center)</p>
                    <ul className="text-gray-600 text-xs space-y-1">
                      <li>• 체크박스</li>
                      <li>• 상태 뱃지</li>
                      <li>• 작업 버튼</li>
                    </ul>
                  </div>
                </div>
              </div>

              {/* 테이블 규칙 */}
              <div className="border rounded-lg p-4 bg-blue-50">
                <h4 className="font-bold text-blue-800 mb-3">테이블 UX 규칙</h4>
                <div className="space-y-2 text-sm text-blue-700">
                  <div className="flex items-start gap-2">
                    <span className="text-blue-500 mt-0.5">✓</span>
                    <p>첫 번째 컬럼: 체크박스 (전체선택 포함)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-blue-500 mt-0.5">✓</span>
                    <p>마지막 컬럼: 작업 (선택 시에만 버튼 표시)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-blue-500 mt-0.5">✓</span>
                    <p>선택된 행: bg-blue-50 배경색</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-blue-500 mt-0.5">✓</span>
                    <p>정렬: 번호 내림차순 (최신순)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-blue-500 mt-0.5">✓</span>
                    <p>호버: hover:bg-gray-50</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 토글/스위치 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-cyan-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-cyan-800 flex items-center gap-2">
                <ToggleLeft className="w-5 h-5" />
                토글 / 스위치 (Toggle / Switch)
              </h3>
              <p className="text-sm text-cyan-600 mt-1">두 가지 상태(On/Off) 간 전환</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">토글 유형</h4>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
                    <div>
                      <p className="font-medium text-sm">스위치 토글</p>
                      <p className="text-xs text-gray-500">설정 ON/OFF</p>
                    </div>
                    <div className="w-12 h-6 bg-black rounded-full relative cursor-pointer">
                      <div className="w-5 h-5 bg-white rounded-full absolute right-0.5 top-0.5 shadow"></div>
                    </div>
                  </div>
                  <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
                    <div>
                      <p className="font-medium text-sm">체크박스 토글</p>
                      <p className="text-xs text-gray-500">개별 항목 선택</p>
                    </div>
                    <input type="checkbox" checked readOnly className="w-5 h-5 rounded" />
                  </div>
                  <div className="flex items-center justify-between p-3 bg-gray-50 rounded">
                    <div>
                      <p className="font-medium text-sm">라디오 버튼</p>
                      <p className="text-xs text-gray-500">단일 선택 (그룹 내)</p>
                    </div>
                    <div className="flex gap-4">
                      <label className="flex items-center gap-2">
                        <input type="radio" name="radio-demo" checked readOnly />
                        <span className="text-sm">옵션1</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="radio" name="radio-demo" />
                        <span className="text-sm">옵션2</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">사용 가이드</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="font-medium mb-2">스위치 사용</p>
                    <ul className="text-gray-600 space-y-1">
                      <li>• 즉시 적용되는 설정</li>
                      <li>• 활성/비활성 상태</li>
                      <li>• 기능 ON/OFF</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-medium mb-2">체크박스 사용</p>
                    <ul className="text-gray-600 space-y-1">
                      <li>• 다중 선택 가능</li>
                      <li>• 폼 제출 시 적용</li>
                      <li>• 목록 항목 선택</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 날짜/시간 선택 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-rose-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-rose-800 flex items-center gap-2">
                <Calendar className="w-5 h-5" />
                날짜 / 시간 선택 (Date / Time Picker)
              </h3>
              <p className="text-sm text-rose-600 mt-1">날짜, 시간, 기간을 선택</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">날짜 선택 유형</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">단일 날짜</p>
                    <input type="date" className="w-full px-3 py-2 border rounded text-sm" defaultValue="2025-01-15" />
                    <p className="text-xs text-gray-500 mt-2">견적일, 납기일 등</p>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">기간 선택</p>
                    <div className="flex items-center gap-2">
                      <input type="date" className="flex-1 px-3 py-2 border rounded text-sm" defaultValue="2025-01-01" />
                      <span className="text-gray-400">~</span>
                      <input type="date" className="flex-1 px-3 py-2 border rounded text-sm" defaultValue="2025-01-31" />
                    </div>
                    <p className="text-xs text-gray-500 mt-2">검색 기간, 작업 기간</p>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">날짜 형식</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center gap-4 p-2 bg-gray-50 rounded">
                    <span className="font-mono bg-white px-2 py-1 rounded border">YYYY-MM-DD</span>
                    <span className="text-gray-600">2025-01-15 (기본 형식)</span>
                  </div>
                  <div className="flex items-center gap-4 p-2 bg-gray-50 rounded">
                    <span className="font-mono bg-white px-2 py-1 rounded border">YYYY.MM.DD</span>
                    <span className="text-gray-600">2025.01.15 (표시용)</span>
                  </div>
                  <div className="flex items-center gap-4 p-2 bg-gray-50 rounded">
                    <span className="font-mono bg-white px-2 py-1 rounded border">YYYY-MM-DD HH:mm</span>
                    <span className="text-gray-600">2025-01-15 09:30 (시간 포함)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 파일 업로드 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-amber-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-amber-800 flex items-center gap-2">
                <Upload className="w-5 h-5" />
                파일 업로드 (File Upload)
              </h3>
              <p className="text-sm text-amber-600 mt-1">파일을 선택하거나 드래그하여 업로드</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">업로드 유형</h4>
                <div className="space-y-4">
                  <div>
                    <p className="font-medium text-sm mb-2">드래그 앤 드롭 영역</p>
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50">
                      <Upload className="w-10 h-10 text-gray-400 mx-auto mb-2" />
                      <p className="text-gray-600">파일을 이곳에 끌어다 놓거나</p>
                      <button className="text-blue-600 hover:underline text-sm">파일 선택</button>
                      <p className="text-xs text-gray-400 mt-2">최대 10MB, PDF/Excel/이미지 파일</p>
                    </div>
                  </div>
                  <div>
                    <p className="font-medium text-sm mb-2">업로드된 파일 목록</p>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                        <div className="flex items-center gap-2">
                          <span className="text-gray-400">📄</span>
                          <span className="text-sm">견적서_v1.pdf</span>
                          <span className="text-xs text-gray-400">(2.5MB)</span>
                        </div>
                        <button className="text-red-500 text-sm">삭제</button>
                      </div>
                      <div className="flex items-center justify-between p-2 bg-gray-50 rounded">
                        <div className="flex items-center gap-2">
                          <span className="text-gray-400">📊</span>
                          <span className="text-sm">산출내역.xlsx</span>
                          <span className="text-xs text-gray-400">(1.2MB)</span>
                        </div>
                        <button className="text-red-500 text-sm">삭제</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">업로드 규칙</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="font-medium mb-2">허용 파일 형식</p>
                    <ul className="text-gray-600 space-y-1">
                      <li>• 문서: PDF, DOC, DOCX, XLS, XLSX</li>
                      <li>• 이미지: JPG, PNG, GIF</li>
                      <li>• 기타: ZIP (압축 파일)</li>
                    </ul>
                  </div>
                  <div>
                    <p className="font-medium mb-2">제한 사항</p>
                    <ul className="text-gray-600 space-y-1">
                      <li>• 파일당 최대 크기: 10MB</li>
                      <li>• 총 업로드 한도: 50MB</li>
                      <li>• 파일 개수 제한: 10개</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 슬라이드 패널 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-violet-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-violet-800 flex items-center gap-2">
                <Layout className="w-5 h-5" />
                슬라이드 패널 (Slide Panel)
              </h3>
              <p className="text-sm text-violet-600 mt-1">화면 측면에서 슬라이드되어 나오는 패널</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">패널 유형</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">우측 패널 (기본)</p>
                    <div className="h-24 bg-gray-200 rounded relative overflow-hidden">
                      <div className="absolute right-0 top-0 h-full w-2/3 bg-white shadow-lg flex flex-col">
                        <div className="bg-gray-100 px-3 py-2 border-b text-xs font-medium flex justify-between">
                          <span>패널 제목</span>
                          <span>✕</span>
                        </div>
                        <div className="p-2 text-xs text-gray-400">내용...</div>
                      </div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">상세 보기, 빠른 편집</p>
                  </div>
                  <div className="bg-gray-50 rounded p-3">
                    <p className="font-medium text-sm mb-2">하단 패널 (모바일)</p>
                    <div className="h-24 bg-gray-200 rounded relative overflow-hidden">
                      <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-white shadow-lg flex flex-col">
                        <div className="bg-gray-100 px-3 py-1 border-b text-xs font-medium text-center">
                          <div className="w-10 h-1 bg-gray-300 rounded mx-auto mb-1"></div>
                          패널 제목
                        </div>
                        <div className="p-2 text-xs text-gray-400">내용...</div>
                      </div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">모바일 필터, 옵션</p>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">사용 규칙</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>상세 정보 빠른 확인 (목록 → 상세)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>기능정의서 패널 (화면을 밀고 나옴)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>필터/검색 옵션 (모바일)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-yellow-500 mt-0.5">!</span>
                    <p>복잡한 폼은 별도 페이지로 이동 권장</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 상태 뱃지 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-emerald-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-emerald-800 flex items-center gap-2">
                <Box className="w-5 h-5" />
                상태 뱃지 (Status Badge)
              </h3>
              <p className="text-sm text-emerald-600 mt-1">항목의 상태를 시각적으로 표시</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">상태별 색상</h4>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  <div className="text-center">
                    <span className="inline-block bg-green-100 text-green-700 px-3 py-1 rounded text-sm font-medium">완료</span>
                    <p className="text-xs text-gray-500 mt-1">성공, 승인</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded text-sm font-medium">진행중</span>
                    <p className="text-xs text-gray-500 mt-1">작업중, 처리중</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-yellow-100 text-yellow-700 px-3 py-1 rounded text-sm font-medium">대기</span>
                    <p className="text-xs text-gray-500 mt-1">검토중, 보류</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-red-100 text-red-700 px-3 py-1 rounded text-sm font-medium">취소</span>
                    <p className="text-xs text-gray-500 mt-1">반려, 실패</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-gray-100 text-gray-600 px-3 py-1 rounded text-sm font-medium">미발행</span>
                    <p className="text-xs text-gray-500 mt-1">초기, 미처리</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm font-medium">생산중</span>
                    <p className="text-xs text-gray-500 mt-1">제조, 가공중</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-purple-100 text-purple-700 px-3 py-1 rounded text-sm font-medium">검사중</span>
                    <p className="text-xs text-gray-500 mt-1">품질검사</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-orange-100 text-orange-700 px-3 py-1 rounded text-sm font-medium">출하대기</span>
                    <p className="text-xs text-gray-500 mt-1">배송준비</p>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">뱃지 크기</h4>
                <div className="flex items-center gap-4 flex-wrap">
                  <div className="text-center">
                    <span className="inline-block bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs font-medium">Small</span>
                    <p className="text-xs text-gray-500 mt-1">테이블 내</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded text-sm font-medium">Medium</span>
                    <p className="text-xs text-gray-500 mt-1">기본</p>
                  </div>
                  <div className="text-center">
                    <span className="inline-block bg-blue-100 text-blue-700 px-4 py-1.5 rounded text-base font-medium">Large</span>
                    <p className="text-xs text-gray-500 mt-1">강조</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 로딩 상태 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-gray-100 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
                <div className="w-5 h-5 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
                로딩 상태 (Loading States)
              </h3>
              <p className="text-sm text-gray-600 mt-1">데이터 로딩 중 사용자 피드백 제공</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">로딩 유형</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-gray-50 rounded p-4 text-center">
                    <div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
                    <p className="font-medium text-sm">스피너</p>
                    <p className="text-xs text-gray-500">버튼, 작은 영역</p>
                  </div>
                  <div className="bg-gray-50 rounded p-4">
                    <div className="space-y-2 animate-pulse">
                      <div className="h-4 bg-gray-300 rounded w-3/4"></div>
                      <div className="h-4 bg-gray-300 rounded w-1/2"></div>
                      <div className="h-4 bg-gray-300 rounded w-5/6"></div>
                    </div>
                    <p className="font-medium text-sm text-center mt-2">스켈레톤</p>
                    <p className="text-xs text-gray-500 text-center">콘텐츠 로딩</p>
                  </div>
                  <div className="bg-gray-50 rounded p-4 text-center">
                    <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                      <div className="bg-blue-500 h-2 rounded-full w-2/3"></div>
                    </div>
                    <p className="font-medium text-sm">프로그레스 바</p>
                    <p className="text-xs text-gray-500">파일 업로드</p>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">로딩 규칙</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>0.3초 이상 걸리면 로딩 표시</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>버튼 클릭 시 버튼 내 스피너 표시</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>페이지 로딩 시 스켈레톤 UI 사용</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>로딩 중 중복 클릭 방지 (disabled 처리)</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* ========== 빈 상태 ========== */}
          <div className="bg-white border rounded-lg overflow-hidden">
            <div className="bg-gray-50 px-6 py-4 border-b">
              <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
                <Box className="w-5 h-5" />
                빈 상태 (Empty State)
              </h3>
              <p className="text-sm text-gray-600 mt-1">데이터가 없거나 검색 결과가 없을 때</p>
            </div>
            <div className="p-6 space-y-6">

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">빈 상태 유형</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="border rounded-lg p-8 text-center bg-gray-50">
                    <div className="text-4xl mb-2">📋</div>
                    <p className="font-medium text-gray-700 mb-1">등록된 견적이 없습니다</p>
                    <p className="text-sm text-gray-500 mb-4">새 견적을 등록해보세요</p>
                    <button className="bg-black text-white px-4 py-2 rounded text-sm">+ 견적 등록</button>
                  </div>
                  <div className="border rounded-lg p-8 text-center bg-gray-50">
                    <div className="text-4xl mb-2">🔍</div>
                    <p className="font-medium text-gray-700 mb-1">검색 결과가 없습니다</p>
                    <p className="text-sm text-gray-500 mb-4">다른 검색어로 시도해보세요</p>
                    <button className="border px-4 py-2 rounded text-sm">검색 초기화</button>
                  </div>
                </div>
              </div>

              <div className="border rounded-lg p-4">
                <h4 className="font-bold text-gray-800 mb-3">빈 상태 규칙</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>상황에 맞는 일러스트 또는 아이콘</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>명확한 상태 메시지</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-green-500 mt-0.5">✓</span>
                    <p>다음 행동 유도 버튼 (CTA)</p>
                  </div>
                  <div className="flex items-start gap-2">
                    <span className="text-red-500 mt-0.5">✗</span>
                    <p>단순 "데이터 없음" 텍스트만 표시 금지</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      )}

      {/* 목록 페이지 UX */}
      {activeSection === 'list-ux' && (
        <div className="space-y-6">
          {/* 핵심 규칙 */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <h3 className="font-bold text-blue-800 mb-2">목록 페이지 핵심 규칙</h3>
            <p className="text-blue-700">모든 목록 페이지는 <strong>체크박스 선택 + 동적 작업 컬럼</strong> 기능을 포함합니다.</p>
          </div>

          {/* ★ 정렬 규칙 - 최신순 (번호 내림차순) */}
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <h3 className="font-bold text-yellow-800 mb-2">목록 정렬 규칙 (필수)</h3>
            <div className="space-y-2 text-yellow-700">
              <p><strong>1. 기본 정렬: 번호 내림차순 (최신순)</strong></p>
              <ul className="list-disc list-inside pl-4 text-sm space-y-1">
                <li>모든 목록은 <strong>번호가 가장 높은 항목(최신 등록)이 최상단</strong>에 위치</li>
                <li>예: QT-2025-100 → QT-2025-099 → QT-2025-001 순서</li>
                <li>날짜 기준이 아닌 <strong>등록 번호(ID) 기준</strong> 정렬</li>
              </ul>
              <p className="mt-3"><strong>2. 정렬 구현 방법:</strong></p>
              <div className="bg-white rounded p-3 text-xs font-mono mt-2">
                <pre>{`// 방법 1: ID 기준 내림차순 (권장)
const sortedData = [...data].sort((a, b) => b.id - a.id);

// 방법 2: 문서번호 기준 내림차순
const sortedData = [...data].sort((a, b) =>
  b.documentNo.localeCompare(a.documentNo)
);

// 방법 3: 등록일시 기준 내림차순
const sortedData = [...data].sort((a, b) =>
  new Date(b.createdAt) - new Date(a.createdAt)
);`}</pre>
              </div>
              <p className="mt-3"><strong>3. 적용 대상:</strong></p>
              <ul className="list-disc list-inside pl-4 text-sm space-y-1">
                <li>견적 목록, 수주 목록, 출하 목록</li>
                <li>작업지시 목록, 검사 목록</li>
                <li>거래처 목록, 품목 목록</li>
                <li>모든 기준정보/마스터 목록</li>
              </ul>
            </div>
          </div>

          {/* 체크박스 선택 핵심 동작 원칙 */}
          <div className="bg-green-50 border border-green-200 rounded-lg p-4">
            <h3 className="font-bold text-green-800 mb-2">체크박스 선택 시 수정/삭제 버튼 동작 (필수)</h3>
            <div className="space-y-2 text-green-700 text-sm">
              <p><strong>핵심 원칙:</strong> 체크박스를 선택하면 <strong>해당 행에만</strong> 수정/삭제 버튼이 즉시 표시됩니다.</p>
              <ul className="list-disc list-inside pl-4 space-y-1">
                <li>체크박스 선택 시 → 해당 행에 수정/삭제 버튼 <strong>즉시 표시</strong></li>
                <li>체크박스 해제 시 → 해당 행에서 버튼 <strong>즉시 숨김</strong></li>
                <li>작업 컬럼 헤더 → 1개 이상 선택 시에만 표시</li>
                <li>선택되지 않은 행 → 작업 컬럼은 빈 셀로 표시</li>
              </ul>
              <div className="mt-3 bg-white rounded p-3 border border-green-300">
                <p className="font-medium text-green-800 mb-1">구현 핵심 조건:</p>
                <code className="text-xs bg-green-100 px-2 py-1 rounded block">
                  {'{hasSelection && isSelected(item.id) && (<버튼 영역 />)}'}
                </code>
              </div>
            </div>
          </div>

          {/* 선택 상태별 동작 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">선택 상태별 동작</h3>
            <table className="w-full text-sm border">
              <thead className="bg-gray-50">
                <tr>
                  <th className="text-left p-3 border-b">선택 개수</th>
                  <th className="text-left p-3 border-b">작업 컬럼</th>
                  <th className="text-left p-3 border-b">테이블 우측 상단</th>
                  <th className="text-left p-3 border-b">각 행 버튼</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b">
                  <td className="p-3 font-medium">0개</td>
                  <td className="p-3 text-gray-500">숨김</td>
                  <td className="p-3 text-gray-500">-</td>
                  <td className="p-3 text-gray-500">-</td>
                </tr>
                <tr className="border-b bg-blue-50">
                  <td className="p-3 font-medium">1개</td>
                  <td className="p-3 text-blue-700">표시</td>
                  <td className="p-3 text-gray-500">-</td>
                  <td className="p-3 text-blue-700">수정, 삭제</td>
                </tr>
                <tr className="bg-blue-50">
                  <td className="p-3 font-medium">2개 이상</td>
                  <td className="p-3 text-blue-700">표시</td>
                  <td className="p-3 text-blue-700">선택 삭제 (N) 버튼</td>
                  <td className="p-3 text-blue-700">수정, 삭제 (각 행마다)</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* 테이블 구조 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">테이블 구조</h3>
            <div className="space-y-3 text-sm">
              <div className="flex items-start gap-2">
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs font-mono">1번째</span>
                <span>체크박스 컬럼 (헤더에 전체선택)</span>
              </div>
              <div className="flex items-start gap-2">
                <span className="bg-gray-200 px-2 py-0.5 rounded text-xs font-mono">마지막</span>
                <span>작업 컬럼 (1개 이상 선택 시에만 표시, 선택된 행에만 버튼 표시)</span>
              </div>
              <div className="flex items-start gap-2">
                <span className="bg-blue-100 px-2 py-0.5 rounded text-xs">선택된 행</span>
                <span><code className="bg-gray-100 px-1 rounded">bg-blue-50</code> 배경색 적용</span>
              </div>
              <div className="flex items-start gap-2">
                <span className="bg-red-100 px-2 py-0.5 rounded text-xs">다중 선택</span>
                <span>테이블 상단 우측에 "선택 삭제 (N)" 버튼 표시</span>
              </div>
            </div>
          </div>

          {/* useListSelection 훅 사용법 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">useListSelection 훅 사용법</h3>
            <div className="bg-gray-100 rounded p-4 text-sm font-mono overflow-x-auto">
              <pre>{`const {
  selectedIds,          // 선택된 ID 배열
  handleSelect,         // 개별 선택 토글 (id) => void
  handleSelectAll,      // 전체 선택 (event) => void
  clearSelection,       // 선택 초기화 () => void
  isAllSelected,        // 전체 선택 여부 (boolean)
  hasSelection,         // 1개 이상 선택 여부 (boolean)
  isMultiSelect,        // 2개 이상 선택 여부 (boolean)
  isSelected,           // 특정 ID 선택 여부 (id) => boolean
} = useListSelection(filteredData);`}</pre>
            </div>
          </div>

          {/* 목록 페이지 예시 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">목록 페이지 예시</h3>
            <div className="border rounded-lg overflow-hidden">
              {/* 선택 삭제 버튼 (2개 이상 선택 시) */}
              <div className="bg-red-50 p-3 border-b flex justify-end">
                <button className="bg-red-600 text-white px-4 py-2 rounded text-sm flex items-center gap-2">
                  선택 삭제 (2)
                </button>
              </div>
              <table className="w-full text-sm">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="text-center p-3 w-10">
                      <input type="checkbox" checked readOnly className="rounded" />
                    </th>
                    <th className="text-left p-3">견적번호</th>
                    <th className="text-left p-3">거래처</th>
                    <th className="text-left p-3">금액</th>
                    <th className="text-left p-3">상태</th>
                    <th className="text-center p-3 w-24">작업</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-t bg-blue-50">
                    <td className="text-center p-3"><input type="checkbox" checked readOnly className="rounded" /></td>
                    <td className="p-3 font-mono text-blue-600">QT-2025-001</td>
                    <td className="p-3">삼성물산(주)</td>
                    <td className="p-3">125,000,000원</td>
                    <td className="p-3"><span className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">견적중</span></td>
                    <td className="text-center p-3">
                      <div className="flex justify-center gap-1">
                        <button className="p-1.5 text-blue-600 hover:bg-blue-100 rounded" title="수정">✎</button>
                        <button className="p-1.5 text-red-600 hover:bg-red-100 rounded" title="삭제">🗑</button>
                      </div>
                    </td>
                  </tr>
                  <tr className="border-t bg-blue-50">
                    <td className="text-center p-3"><input type="checkbox" checked readOnly className="rounded" /></td>
                    <td className="p-3 font-mono text-blue-600">QT-2025-002</td>
                    <td className="p-3">현대건설(주)</td>
                    <td className="p-3">89,000,000원</td>
                    <td className="p-3"><span className="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">최종확정</span></td>
                    <td className="text-center p-3">
                      <div className="flex justify-center gap-1">
                        <button className="p-1.5 text-blue-600 hover:bg-blue-100 rounded" title="수정">✎</button>
                        <button className="p-1.5 text-red-600 hover:bg-red-100 rounded" title="삭제">🗑</button>
                      </div>
                    </td>
                  </tr>
                  <tr className="border-t hover:bg-gray-50">
                    <td className="text-center p-3"><input type="checkbox" className="rounded" /></td>
                    <td className="p-3 font-mono text-blue-600">QT-2025-003</td>
                    <td className="p-3">대우건설(주)</td>
                    <td className="p-3">45,000,000원</td>
                    <td className="p-3"><span className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">수정중</span></td>
                    <td className="text-center p-3"></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* 코드 예시 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">구현 코드 예시</h3>
            <div className="bg-gray-100 rounded p-4 text-xs font-mono overflow-x-auto">
              <pre>{`// 테이블 헤더
<thead>
  <tr>
    <th className="px-4 py-3 text-center w-10">
      <input type="checkbox" checked={isAllSelected} onChange={handleSelectAll} />
    </th>
    {/* ... 다른 컬럼들 ... */}
    {hasSelection && <th className="px-4 py-3 text-center w-24">작업</th>}
  </tr>
</thead>

// 테이블 행
<tr className={\`hover:bg-gray-50 \${isSelected(item.id) ? 'bg-blue-50' : ''}\`}>
  <td className="px-4 py-3 text-center">
    <input type="checkbox" checked={isSelected(item.id)} onChange={() => handleSelect(item.id)} />
  </td>
  {/* ... 다른 컬럼들 ... */}
  {hasSelection && isSelected(item.id) && (
    <td className="px-4 py-3 text-center">
      <button onClick={() => onEdit(item)}>수정</button>
      <button onClick={() => onDelete(item)}>삭제</button>
    </td>
  )}
</tr>`}</pre>
            </div>
          </div>
        </div>
      )}

      {/* 상세 페이지 UX */}
      {activeSection === 'detail-ux' && (
        <div className="space-y-6">
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">상세 페이지 레이아웃 규칙</h3>
            <div className="bg-yellow-50 border border-yellow-200 rounded p-4 mb-4">
              <p className="font-medium text-yellow-800">핵심 규칙</p>
              <p className="text-sm text-yellow-700">상세 페이지는 섹션 기반 레이아웃을 사용합니다. (탭 사용 금지)</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">반응형 그리드</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 데스크탑(lg): 3컬럼</li>
                  <li>• 태블릿(md): 2컬럼</li>
                  <li>• 모바일: 1컬럼</li>
                </ul>
                <div className="mt-2 bg-gray-100 rounded p-2 text-xs font-mono">
                  grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4
                </div>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">섹션 구성</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 섹션 제목 (font-medium)</li>
                  <li>• 섹션 테두리 (border rounded)</li>
                  <li>• 내부 패딩 (p-4)</li>
                </ul>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">필드 라벨/값</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 라벨: text-sm text-gray-500</li>
                  <li>• 값: font-medium</li>
                  <li>• 간격: space-y-3</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">상세 페이지 예시</h3>
            <div className="border rounded-lg overflow-hidden">
              <div className="bg-gray-50 p-4 border-b flex justify-between items-center">
                <div>
                  <h4 className="font-medium">견적 상세</h4>
                  <p className="text-sm text-gray-500">QT-2025-001</p>
                </div>
                <div className="flex gap-2">
                  <button className="border px-4 py-2 rounded text-sm">수정</button>
                  <button className="bg-black text-white px-4 py-2 rounded text-sm">수주전환</button>
                </div>
              </div>
              <div className="p-4">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div className="border rounded p-4">
                    <h5 className="font-medium mb-3 pb-2 border-b">기본정보</h5>
                    <div className="space-y-3">
                      <div><p className="text-sm text-gray-500">견적번호</p><p className="font-medium">QT-2025-001</p></div>
                      <div><p className="text-sm text-gray-500">거래처</p><p className="font-medium">삼성물산(주)</p></div>
                      <div><p className="text-sm text-gray-500">견적일</p><p className="font-medium">2025-01-15</p></div>
                    </div>
                  </div>
                  <div className="border rounded p-4">
                    <h5 className="font-medium mb-3 pb-2 border-b">금액정보</h5>
                    <div className="space-y-3">
                      <div><p className="text-sm text-gray-500">공급가액</p><p className="font-medium">113,636,364원</p></div>
                      <div><p className="text-sm text-gray-500">부가세</p><p className="font-medium">11,363,636원</p></div>
                      <div><p className="text-sm text-gray-500">합계</p><p className="font-medium">125,000,000원</p></div>
                    </div>
                  </div>
                  <div className="border rounded p-4">
                    <h5 className="font-medium mb-3 pb-2 border-b">상태정보</h5>
                    <div className="space-y-3">
                      <div><p className="text-sm text-gray-500">상태</p><p><span className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">견적중</span></p></div>
                      <div><p className="text-sm text-gray-500">담당자</p><p className="font-medium">홍길동</p></div>
                      <div><p className="text-sm text-gray-500">유효기간</p><p className="font-medium">2025-02-15</p></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 폼/입력 UX */}
      {activeSection === 'form-ux' && (
        <div className="space-y-6">
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">폼 입력 규칙</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">필수 입력 표시</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 라벨 옆에 <span className="text-red-500">*</span> 표시</li>
                  <li>• 필수 필드 미입력 시 테두리 빨간색</li>
                  <li>• 에러 메시지는 필드 아래</li>
                </ul>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">입력 필드 스타일</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 테두리: border rounded</li>
                  <li>• 패딩: px-3 py-2</li>
                  <li>• 포커스: ring-2 ring-black</li>
                </ul>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">버튼 배치</h4>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 저장/확인: 우측 정렬</li>
                  <li>• 취소: 저장 버튼 왼쪽</li>
                  <li>• 삭제: 좌측 정렬 (빨간색)</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">폼 예시</h3>
            <div className="border rounded-lg p-4 max-w-lg">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1">거래처명 <span className="text-red-500">*</span></label>
                  <input type="text" className="w-full border rounded px-3 py-2" placeholder="거래처명 입력" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">사업자번호 <span className="text-red-500">*</span></label>
                  <input type="text" className="w-full border rounded px-3 py-2" placeholder="000-00-00000" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">연락처</label>
                  <input type="text" className="w-full border rounded px-3 py-2" placeholder="02-0000-0000" />
                </div>
                <div className="flex justify-end gap-2 pt-4 border-t">
                  <button className="border px-4 py-2 rounded">취소</button>
                  <button className="bg-black text-white px-4 py-2 rounded">저장</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 반응형 규칙 */}
      {activeSection === 'responsive' && (
        <div className="space-y-6">
          {/* 반응형 UX 정책 */}
          <div className="bg-white border rounded-lg p-6">
            <div className="flex items-center gap-2 mb-4">
              <Monitor className="w-5 h-5" />
              <h3 className="text-lg font-medium">반응형 UX 정책</h3>
            </div>

            {/* 1. 브레이크포인트 */}
            <div className="mb-6">
              <h4 className="font-medium mb-3 flex items-center gap-2">
                <span className="text-blue-600">{'>'}</span> 1. 브레이크포인트
              </h4>
              <div className="space-y-3 pl-4">
                <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-blue-500">📱</span>
                    <span className="font-medium">모바일: ~ 767px (기본)</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">1열 레이아웃, 카드 리스트, 전체 너비 버튼</p>
                </div>
                <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-blue-500">💻</span>
                    <span className="font-medium">태블릿: 768px ~ 1279px (md:)</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">2열 레이아웃, 카드 리스트, 반응형 버튼</p>
                </div>
                <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-blue-500">🖥</span>
                    <span className="font-medium">데스크톱: 1280px ~ (lg:, xl:)</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">4열 통계 카드, 데이터 테이블, 인라인 버튼</p>
                </div>
              </div>
            </div>

            {/* 2. 목록 뷰 전환 */}
            <div className="mb-6">
              <h4 className="font-medium mb-3 flex items-center gap-2">
                <span className="text-blue-600">{'>'}</span> 2. 목록 뷰 전환
              </h4>
              <div className="space-y-3 pl-4">
                <div className="bg-green-50 border border-green-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-green-500">✓</span>
                    <span className="font-medium">1280px 미만: 카드 리스트 (ListMobileCard)</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">xl:hidden 클래스로 숨김</p>
                </div>
                <div className="bg-green-50 border border-green-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-green-500">✓</span>
                    <span className="font-medium">1280px 이상: 데이터 테이블</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">hidden xl:block 클래스로 표시</p>
                </div>
              </div>
            </div>

            {/* 3. 터치 최적화 */}
            <div className="mb-6">
              <h4 className="font-medium mb-3 flex items-center gap-2">
                <span className="text-blue-600">{'>'}</span> 3. 터치 최적화
              </h4>
              <div className="space-y-3 pl-4">
                <div className="bg-yellow-50 border border-yellow-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-yellow-500">👆</span>
                    <span className="font-medium">최소 터치 영역: 44px × 44px</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">버튼, 칩, 카드 클릭 영역 최소 크기</p>
                </div>
                <div className="bg-green-50 border border-green-100 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-green-500">✓</span>
                    <span className="font-medium">간격: gap-2 ~ gap-4 (8px ~ 16px)</span>
                  </div>
                  <p className="text-sm text-gray-600 pl-6">터치 오류 방지</p>
                </div>
              </div>
            </div>
          </div>

          {/* Tailwind 클래스 매핑 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">Tailwind 브레이크포인트 매핑</h3>
            <table className="w-full text-sm">
              <thead className="bg-gray-50">
                <tr>
                  <th className="text-left p-3">디바이스</th>
                  <th className="text-left p-3">브레이크포인트</th>
                  <th className="text-left p-3">Tailwind 접두사</th>
                  <th className="text-left p-3">주요 적용</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-t">
                  <td className="p-3">모바일</td>
                  <td className="p-3">~ 767px</td>
                  <td className="p-3 font-mono">(기본값)</td>
                  <td className="p-3">1열, 카드 리스트</td>
                </tr>
                <tr className="border-t">
                  <td className="p-3">태블릿</td>
                  <td className="p-3">768px ~ 1279px</td>
                  <td className="p-3 font-mono">md:</td>
                  <td className="p-3">2열, 카드 리스트</td>
                </tr>
                <tr className="border-t">
                  <td className="p-3">데스크톱</td>
                  <td className="p-3">1280px ~</td>
                  <td className="p-3 font-mono">xl:</td>
                  <td className="p-3">데이터 테이블, 4열 카드</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* 자주 사용하는 반응형 패턴 */}
          <div className="bg-white border rounded-lg p-6">
            <h3 className="text-lg font-medium mb-4">자주 사용하는 반응형 패턴</h3>
            <div className="space-y-4">
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">목록 뷰 전환 (테이블 ↔ 카드)</h4>
                <div className="bg-gray-100 rounded p-3 text-sm font-mono space-y-1">
                  <p className="text-green-700">{'// 카드 리스트 (모바일/태블릿)'}</p>
                  <p>{'<div className="xl:hidden">...<ListMobileCard /></div>'}</p>
                  <p className="text-green-700 mt-2">{'// 데이터 테이블 (데스크톱)'}</p>
                  <p>{'<div className="hidden xl:block">...<Table /></div>'}</p>
                </div>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">통계 카드 그리드</h4>
                <div className="bg-gray-100 rounded p-3 text-sm font-mono">
                  <p>grid grid-cols-2 md:grid-cols-4 gap-4</p>
                </div>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">상세 페이지 섹션 그리드</h4>
                <div className="bg-gray-100 rounded p-3 text-sm font-mono">
                  <p>grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4</p>
                </div>
              </div>
              <div className="border rounded p-4">
                <h4 className="font-medium mb-2">버튼 너비 (모바일 전체 너비)</h4>
                <div className="bg-gray-100 rounded p-3 text-sm font-mono">
                  <p>w-full md:w-auto</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CommonUXGuide;
