@extends('layouts.app')

@section('title', 'Claude Cowork 소개')

@push('styles')
<style>
    .cw-card { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
    .cw-card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
    .cw-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
    .cw-badge-blue { background: #dbeafe; color: #1d4ed8; }
    .cw-badge-green { background: #dcfce7; color: #166534; }
    .cw-badge-purple { background: #f3e8ff; color: #7c3aed; }
    .cw-badge-amber { background: #fef3c7; color: #92400e; }
    .cw-badge-red { background: #fee2e2; color: #991b1b; }
    .cw-icon-circle { display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
    .cw-compare-row { display: flex; gap: 12px; }
    .cw-compare-col { flex: 1; padding: 16px; border-radius: 10px; }
    .cw-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
    .cw-step:last-child { border-bottom: none; }
    .cw-check { color: #10b981; font-weight: 700; flex-shrink: 0; }
    .cw-cross { color: #ef4444; font-weight: 700; flex-shrink: 0; }
</style>
@endpush

@section('content')
<div class="space-y-6">

    {{-- 페이지 헤더 --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Claude Cowork 소개</h1>
            <p class="mt-1 text-sm text-gray-500">비개발자도 AI로 업무를 자동화하는 새로운 방법 | SAM 팀을 위한 활용 가이드</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('claude-code.pricing.index') }}" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">요금정책 보기 &rarr;</a>
        </div>
    </div>

    {{-- ─── 핵심 요약 3카드 ─── --}}
    <div class="flex gap-4" style="flex-wrap: wrap;">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Cowork이란?
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">AI 업무 자동화 비서</div>
            <div class="text-sm text-gray-500 mt-0.5">코딩 없이 데스크톱에서 업무 자동화</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                절약 효과
            </div>
            <div class="text-lg font-bold text-emerald-600 mt-1">업무시간 20~30% 절감</div>
            <div class="text-sm text-gray-500 mt-0.5">비기술 직군 60%+ AI 활용</div>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 320px;">
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                요금
            </div>
            <div class="text-lg font-bold text-gray-900 mt-1">Pro $20/월부터</div>
            <div class="text-sm text-gray-500 mt-0.5">별도 설치 없이 데스크톱 앱에 포함</div>
        </div>
    </div>

    {{-- ─── 섹션 1: Cowork vs Code 핵심 비교 ─── --}}
    <div class="cw-card">
        <div class="cw-card-header">
            <h2 class="text-base font-semibold text-gray-800">Claude Code vs Cowork — 핵심 차이</h2>
            <p class="text-xs text-gray-400 mt-0.5">같은 Claude AI, 완전히 다른 용도</p>
        </div>
        <div class="p-5">
            <div class="cw-compare-row" style="flex-wrap: wrap;">
                {{-- Claude Code --}}
                <div class="cw-compare-col" style="background: #f0f9ff; border: 1px solid #bae6fd; min-width: 280px;">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="cw-icon-circle" style="width: 32px; height: 32px; background: #0284c7;">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                        </div>
                        <div>
                            <div class="font-bold text-gray-900 text-sm">Claude Code</div>
                            <div class="text-xs text-blue-600">개발자 전용 코딩 도구</div>
                        </div>
                    </div>
                    <div class="space-y-2 text-sm text-gray-700">
                        <div class="flex items-start gap-2"><span class="text-blue-500 mt-0.5">&#9654;</span> <span>터미널(CLI) / IDE에서 실행</span></div>
                        <div class="flex items-start gap-2"><span class="text-blue-500 mt-0.5">&#9654;</span> <span>코드 읽기, 작성, 리팩토링, 테스트</span></div>
                        <div class="flex items-start gap-2"><span class="text-blue-500 mt-0.5">&#9654;</span> <span>Git 커밋, PR 생성, 배포 자동화</span></div>
                        <div class="flex items-start gap-2"><span class="text-blue-500 mt-0.5">&#9654;</span> <span>서버 자동화 솔루션 개발</span></div>
                    </div>
                    <div class="mt-3 p-2 bg-blue-100 rounded text-xs text-blue-800 font-medium text-center">
                        비유: 목수의 연장 — 소프트웨어를 <strong>만드는</strong> 도구
                    </div>
                </div>

                {{-- Claude Cowork --}}
                <div class="cw-compare-col" style="background: #faf5ff; border: 1px solid #e9d5ff; min-width: 280px;">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="cw-icon-circle" style="width: 32px; height: 32px; background: #7c3aed;">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                        </div>
                        <div>
                            <div class="font-bold text-gray-900 text-sm">Claude Cowork</div>
                            <div class="text-xs text-purple-600">전 직원 업무 자동화 비서</div>
                        </div>
                    </div>
                    <div class="space-y-2 text-sm text-gray-700">
                        <div class="flex items-start gap-2"><span class="text-purple-500 mt-0.5">&#9654;</span> <span>데스크톱 앱에서 클릭으로 실행</span></div>
                        <div class="flex items-start gap-2"><span class="text-purple-500 mt-0.5">&#9654;</span> <span>파일 정리, 데이터 추출, 보고서 생성</span></div>
                        <div class="flex items-start gap-2"><span class="text-purple-500 mt-0.5">&#9654;</span> <span>Google Drive, Gmail, Slack, Excel 연동</span></div>
                        <div class="flex items-start gap-2"><span class="text-purple-500 mt-0.5">&#9654;</span> <span>정기 작업 스케줄링 (자동 반복)</span></div>
                    </div>
                    <div class="mt-3 p-2 bg-purple-100 rounded text-xs text-purple-800 font-medium text-center">
                        비유: AI 비서 — 반복 업무를 <strong>대신 해주는</strong> 도구
                    </div>
                </div>
            </div>

            {{-- 상세 비교 테이블 --}}
            <div class="mt-5">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b-2 border-gray-200">
                            <th class="text-left py-2.5 px-3 text-gray-600 font-medium" style="width: 22%;">비교 항목</th>
                            <th class="text-center py-2.5 px-3 text-blue-700 font-medium" style="width: 39%;">Claude Code</th>
                            <th class="text-center py-2.5 px-3 text-purple-700 font-medium" style="width: 39%;">Claude Cowork</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-700">대상 사용자</td>
                            <td class="py-2.5 px-3 text-center">개발자</td>
                            <td class="py-2.5 px-3 text-center">전 직원 (비개발자 포함)</td>
                        </tr>
                        <tr class="border-b border-gray-100 bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-700">실행 환경</td>
                            <td class="py-2.5 px-3 text-center">터미널(CLI) / IDE</td>
                            <td class="py-2.5 px-3 text-center">데스크톱 앱 (macOS/Windows)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-700">설치</td>
                            <td class="py-2.5 px-3 text-center">npm 설치 필요</td>
                            <td class="py-2.5 px-3 text-center">설치 불필요 (앱 내장)</td>
                        </tr>
                        <tr class="border-b border-gray-100 bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-700">CLI 사용</td>
                            <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-green">가능</span></td>
                            <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-red">불가 (GUI 전용)</span></td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-700">서버 자동화</td>
                            <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-green">가능 (API 연동)</span></td>
                            <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-red">불가 (개인 PC만)</span></td>
                        </tr>
                        <tr class="border-b border-gray-100 bg-gray-50">
                            <td class="py-2.5 px-3 font-medium text-gray-700">보안 모델</td>
                            <td class="py-2.5 px-3 text-center">로컬 코드 직접 접근</td>
                            <td class="py-2.5 px-3 text-center">격리 샌드박스 (VM)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-2.5 px-3 font-medium text-gray-700">외부 도구 연동</td>
                            <td class="py-2.5 px-3 text-center">Git, MCP 서버</td>
                            <td class="py-2.5 px-3 text-center">Jira, Slack, Gmail, Drive, Excel 등</td>
                        </tr>
                        <tr>
                            <td class="py-2.5 px-3 font-medium text-gray-700">요금</td>
                            <td class="py-2.5 px-3 text-center">Pro $20 / Max $100~200</td>
                            <td class="py-2.5 px-3 text-center">Pro $20부터 (동일 구독에 포함)</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 2: SAM 팀 활용 시나리오 ─── --}}
    <div class="cw-card">
        <div class="cw-card-header">
            <h2 class="text-base font-semibold text-gray-800">SAM 팀 활용 시나리오</h2>
            <p class="text-xs text-gray-400 mt-0.5">우리 회사 직무별로 Cowork을 이렇게 쓸 수 있습니다</p>
        </div>
        <div class="p-5 space-y-4">

            {{-- 영업팀 --}}
            <div class="p-4 rounded-lg border border-emerald-200 bg-emerald-50">
                <div class="flex items-center gap-2 mb-2">
                    <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #059669;">
                        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <span class="font-semibold text-emerald-800 text-sm">영업팀</span>
                    <span class="cw-badge cw-badge-green">즉시 활용 가능</span>
                </div>
                <div class="flex gap-3 text-sm" style="flex-wrap: wrap;">
                    <div class="bg-white rounded-lg p-3 border border-emerald-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">고객 미팅 후 보고서</div>
                        <p class="text-gray-600 text-xs leading-relaxed">미팅 녹음 파일을 폴더에 넣으면 &rarr; 자동으로 요약 보고서 + 액션 아이템 문서 생성</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-emerald-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">제안서/견적서 초안</div>
                        <p class="text-gray-600 text-xs leading-relaxed">고객 요구사항 메모 + 기존 템플릿 &rarr; 맞춤형 제안서 초안 자동 작성</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-emerald-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">주간 영업 리포트</div>
                        <p class="text-gray-600 text-xs leading-relaxed">매주 금요일 자동 실행 &rarr; CRM 데이터 정리 + 주간 성과 요약 PPT 생성</p>
                    </div>
                </div>
            </div>

            {{-- 관리/경영 --}}
            <div class="p-4 rounded-lg border border-blue-200 bg-blue-50">
                <div class="flex items-center gap-2 mb-2">
                    <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #2563eb;">
                        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    </div>
                    <span class="font-semibold text-blue-800 text-sm">관리/경영</span>
                    <span class="cw-badge cw-badge-blue">효율 극대화</span>
                </div>
                <div class="flex gap-3 text-sm" style="flex-wrap: wrap;">
                    <div class="bg-white rounded-lg p-3 border border-blue-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">경비 영수증 처리</div>
                        <p class="text-gray-600 text-xs leading-relaxed">영수증 사진 폴더에 넣으면 &rarr; 날짜/금액/항목 추출 &rarr; Excel 정리</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-blue-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">계약서/문서 분석</div>
                        <p class="text-gray-600 text-xs leading-relaxed">PDF 계약서 업로드 &rarr; 핵심 조항 요약, 리스크 항목 표시</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-blue-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">매일 아침 브리핑</div>
                        <p class="text-gray-600 text-xs leading-relaxed">매일 9시 자동 &rarr; 업계 뉴스 + 전일 매출 요약 + 오늘 일정</p>
                    </div>
                </div>
            </div>

            {{-- 생산/품질 --}}
            <div class="p-4 rounded-lg border border-amber-200 bg-amber-50">
                <div class="flex items-center gap-2 mb-2">
                    <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #d97706;">
                        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <span class="font-semibold text-amber-800 text-sm">생산/품질</span>
                    <span class="cw-badge cw-badge-amber">현장 활용</span>
                </div>
                <div class="flex gap-3 text-sm" style="flex-wrap: wrap;">
                    <div class="bg-white rounded-lg p-3 border border-amber-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">검사 보고서 정리</div>
                        <p class="text-gray-600 text-xs leading-relaxed">검사 사진 + 메모 &rarr; 표준 양식의 검사 보고서 자동 생성</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-amber-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">생산 일보 작성</div>
                        <p class="text-gray-600 text-xs leading-relaxed">생산 데이터 CSV &rarr; 일일 생산 현황 보고서 + 전일 대비 분석</p>
                    </div>
                    <div class="bg-white rounded-lg p-3 border border-amber-100" style="flex: 1 1 200px;">
                        <div class="font-semibold text-gray-800 text-xs mb-1">불량 분석 리포트</div>
                        <p class="text-gray-600 text-xs leading-relaxed">불량 로그 데이터 &rarr; 원인별 분류 + 파레토 차트 + 개선 제안</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 3: 올바른 도구 선택 가이드 ─── --}}
    <div class="cw-card">
        <div class="cw-card-header">
            <h2 class="text-base font-semibold text-gray-800">어떤 도구를 써야 할까?</h2>
            <p class="text-xs text-gray-400 mt-0.5">업무 유형별 최적 도구 선택 가이드 — SAM 프로젝트 기준</p>
        </div>
        <div class="p-5">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b-2 border-gray-200">
                        <th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 35%;">하고 싶은 일</th>
                        <th class="text-center py-2 px-3 text-gray-600 font-medium" style="width: 20%;">추천 도구</th>
                        <th class="text-left py-2 px-3 text-gray-600 font-medium">이유</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-700">SAM 코드 수정/기능 개발</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-blue">Claude Code</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">코드 읽기/쓰기, Git, 테스트 필요</td>
                    </tr>
                    <tr class="border-b border-gray-100 bg-gray-50">
                        <td class="py-2.5 px-3 text-gray-700">서버 자동화 (견적 자동생성 등)</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-blue">Code + API</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">Code로 개발, API로 서버에서 실행</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-700">엑셀/CSV 데이터 정리/분석</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-purple">Cowork</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">파일 폴더 지정 → 자동 처리</td>
                    </tr>
                    <tr class="border-b border-gray-100 bg-gray-50">
                        <td class="py-2.5 px-3 text-gray-700">미팅 녹음 → 보고서 요약</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-purple">Cowork</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">파일 넣으면 알아서 분석 → 문서화</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-700">매주 자동 보고서/브리핑 생성</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-purple">Cowork</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">정기 스케줄링 기능으로 자동 반복</td>
                    </tr>
                    <tr class="border-b border-gray-100 bg-gray-50">
                        <td class="py-2.5 px-3 text-gray-700">Slack/Gmail/Drive 연동 자동화</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-purple">Cowork</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">MCP 커넥터로 외부 도구 직접 연동</td>
                    </tr>
                    <tr class="border-b border-gray-100">
                        <td class="py-2.5 px-3 text-gray-700">제안서/PPT 초안 작성</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge cw-badge-purple">Cowork</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">브랜드 자산 폴더 + "슬라이드 만들어"</td>
                    </tr>
                    <tr>
                        <td class="py-2.5 px-3 text-gray-700">일반 질문/대화/아이디어</td>
                        <td class="py-2.5 px-3 text-center"><span class="cw-badge" style="background: #f1f5f9; color: #475569;">Claude 채팅</span></td>
                        <td class="py-2.5 px-3 text-gray-500 text-xs">파일 작업 불필요한 단순 대화</td>
                    </tr>
                </tbody>
            </table>

            <div class="mt-4 p-3 bg-indigo-50 border border-indigo-200 rounded-lg text-sm">
                <div class="font-semibold text-indigo-800 mb-1">SAM 프로젝트에서의 구분</div>
                <div class="flex gap-4 text-xs text-indigo-700" style="flex-wrap: wrap;">
                    <div style="flex: 1 1 280px;">
                        <strong>개발팀</strong>: Claude Code로 SAM 기능 개발 + Claude API로 서버 AI 실행
                    </div>
                    <div style="flex: 1 1 280px;">
                        <strong>비개발 직군</strong>: Claude Cowork으로 일상 업무 자동화 (코딩 지식 불필요)
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 4: Cowork 시작하기 ─── --}}
    <div class="cw-card">
        <div class="cw-card-header">
            <h2 class="text-base font-semibold text-gray-800">Cowork 시작하기</h2>
            <p class="text-xs text-gray-400 mt-0.5">3단계로 바로 시작할 수 있습니다</p>
        </div>
        <div class="p-5">
            <div class="space-y-0">
                <div class="cw-step">
                    <div>
                        <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #6366f1; color: white; font-size: 12px; font-weight: 700;">1</div>
                    </div>
                    <div>
                        <div class="font-semibold text-gray-800 text-sm">Claude 데스크톱 앱 설치</div>
                        <p class="text-gray-500 text-xs mt-0.5">claude.ai/download 에서 macOS 또는 Windows용 앱 다운로드. Pro($20/월) 이상 구독 필요.</p>
                    </div>
                </div>
                <div class="cw-step">
                    <div>
                        <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #6366f1; color: white; font-size: 12px; font-weight: 700;">2</div>
                    </div>
                    <div>
                        <div class="font-semibold text-gray-800 text-sm">작업 폴더 지정</div>
                        <p class="text-gray-500 text-xs mt-0.5">Cowork 모드에서 작업할 폴더를 선택합니다. Claude가 이 폴더의 파일을 읽고, 수정하고, 새로 만들 수 있습니다.</p>
                    </div>
                </div>
                <div class="cw-step">
                    <div>
                        <div class="cw-icon-circle" style="width: 28px; height: 28px; background: #6366f1; color: white; font-size: 12px; font-weight: 700;">3</div>
                    </div>
                    <div>
                        <div class="font-semibold text-gray-800 text-sm">자연어로 지시하기</div>
                        <p class="text-gray-500 text-xs mt-0.5">"이 폴더의 영수증 사진들을 날짜순으로 정리하고 Excel로 만들어줘" — 이렇게 말하면 Claude가 알아서 처리합니다.</p>
                    </div>
                </div>
            </div>

            <div class="mt-4 flex gap-4" style="flex-wrap: wrap;">
                <div class="p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm" style="flex: 1 1 280px;">
                    <div class="font-semibold text-amber-800 text-xs mb-1">주의사항</div>
                    <ul class="text-xs text-amber-700 space-y-1">
                        <li>- 현재 macOS 우선 지원 (Windows 확대 예정)</li>
                        <li>- 폴더 기반 작업 — 클라우드 파일은 Drive 연동 필요</li>
                        <li>- Max 플랜일수록 처리 가능한 작업량 증가</li>
                        <li>- 스크린샷/이미지 처리로 할당량 소모가 빠를 수 있음</li>
                    </ul>
                </div>
                <div class="p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-sm" style="flex: 1 1 280px;">
                    <div class="font-semibold text-emerald-800 text-xs mb-1">추천 요금제</div>
                    <ul class="text-xs text-emerald-700 space-y-1">
                        <li>- <strong>가끔 사용</strong>: Pro $20/월 (기본 Cowork 포함)</li>
                        <li>- <strong>매일 활용</strong>: Max 5x $100/월 (5배 사용량)</li>
                        <li>- <strong>팀 전체</strong>: Team Premium $100/인/월 (관리 기능)</li>
                        <li>- 요금 상세: <a href="{{ route('claude-code.pricing.index') }}" class="text-emerald-600 underline">요금정책 페이지</a> 참고</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── 섹션 5: 요약 ─── --}}
    <div class="cw-card" style="border-color: #c7d2fe;">
        <div class="p-5">
            <div class="flex gap-4 items-center" style="flex-wrap: wrap;">
                <div style="flex: 1 1 350px;">
                    <div class="text-lg font-bold text-gray-900 mb-2">한 줄 요약</div>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        <strong>Claude Code</strong>는 개발팀이 SAM 시스템을 <strong>만드는</strong> 도구이고,<br>
                        <strong>Claude Cowork</strong>은 전 직원이 일상 업무를 AI로 <strong>처리하는</strong> 도구입니다.
                    </p>
                    <p class="text-sm text-gray-600 mt-2 leading-relaxed">
                        서버 자동화(견적 자동생성 등)가 목적이라면 <strong>Code + API</strong>가 맞고,<br>
                        개인 PC에서 반복 업무를 줄이고 싶다면 <strong>Cowork</strong>이 정답입니다.
                    </p>
                </div>
                <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4 text-center" style="flex: 0 0 220px;">
                    <div class="text-xs text-indigo-500 font-medium">두 도구는 상호 보완</div>
                    <div class="text-sm font-bold text-indigo-800 mt-1">Code로 만들고</div>
                    <div class="text-sm font-bold text-indigo-800">Cowork으로 활용하기</div>
                    <div class="text-xs text-indigo-500 mt-1">동일 구독으로 함께 사용 가능</div>
                </div>
            </div>
            <p class="mt-3 text-xs text-gray-400 text-center">※ Claude Cowork은 2026년 1월 연구 프리뷰로 출시되었으며, 기능이 계속 확장되고 있습니다.</p>
        </div>
    </div>

</div>
@endsection