{{-- JSON 작성 가이드 모달 --}}
<div id="guide-modal"
     class="hidden fixed inset-0 z-50 overflow-y-auto"
     aria-labelledby="guide-modal-title"
     role="dialog"
     aria-modal="true">

    {{-- 배경 오버레이 --}}
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
         onclick="GuideModal.close()"></div>

    {{-- 모달 컨테이너 --}}
    <div class="flex min-h-full items-start justify-center p-4 pt-8">
        <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">

            {{-- 모달 헤더 --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 flex-shrink-0">
                <h2 id="guide-modal-title" class="text-xl font-semibold text-gray-800">
                    API Flow JSON 작성 가이드
                </h2>
                <button type="button"
                        onclick="GuideModal.close()"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            {{-- 탭 네비게이션 --}}
            <div class="px-6 py-3 border-b border-gray-200 flex-shrink-0">
                <div class="flex gap-2">
                    <button type="button" class="guide-tab active px-4 py-2 text-sm font-medium rounded-lg transition-colors" data-tab="basic">
                        기본 구조
                    </button>
                    <button type="button" class="guide-tab px-4 py-2 text-sm font-medium rounded-lg transition-colors" data-tab="variables">
                        변수 바인딩
                    </button>
                    <button type="button" class="guide-tab px-4 py-2 text-sm font-medium rounded-lg transition-colors" data-tab="validation">
                        응답 검증
                    </button>
                    <button type="button" class="guide-tab px-4 py-2 text-sm font-medium rounded-lg transition-colors" data-tab="ai-prompt">
                        AI로 만들기
                    </button>
                </div>
            </div>

            {{-- 모달 콘텐츠 --}}
            <div class="flex-1 overflow-y-auto p-6">

                {{-- 기본 구조 탭 --}}
                <div id="guide-tab-basic" class="guide-tab-content">
                    <div class="prose prose-sm max-w-none">
                        <h4 class="text-lg font-semibold mb-3">1. 전체 구조</h4>
                        <pre class="bg-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>{
  "name": "플로우 이름",                 // 플로우 제목 (필수)
  "description": "플로우 설명",          // 상세 설명 (선택)
  "version": "1.0",
  "config": {
    "baseUrl": "",                       // 빈 문자열 (서버 기본값 사용)
    "timeout": 30000,
    "stopOnFailure": true
    // apiKey는 서버에서 자동 주입 (JSON에 포함하지 않음)
  },
  "variables": {
    "user_id": "@{{$env.FLOW_TESTER_USER_ID}}",  // 환경변수 참조
    "user_pwd": "@{{$env.FLOW_TESTER_USER_PWD}}"
  },
  "steps": [...]
}</code></pre>

                        <h4 class="text-lg font-semibold mt-6 mb-3">2. Step 구조</h4>
                        <pre class="bg-gray-100 p-4 rounded-lg text-xs overflow-x-auto"><code>{
  "id": "step1",              // 고유 ID (필수)
  "name": "페이지 생성",        // 표시 이름 (필수)
  "description": "테스트용 페이지 생성",  // 설명 (선택)
  "dependsOn": [],            // 의존 스텝 ID 배열 (선택)
  "method": "POST",           // HTTP 메서드 (필수)
  "endpoint": "/item-master/pages",  // 엔드포인트 (필수)
  "headers": {},              // 추가 헤더 (선택)
  "body": {                   // 요청 바디 (선택)
    "page_name": "@{{variables.testPrefix}}Page"
  },
  "expect": {                 // 응답 검증 (선택)
    "status": [200, 201],
    "jsonPath": {
      "$.success": true
    }
  },
  "extract": {                // 변수 추출 (선택)
    "pageId": "$.data.id"
  },
  "continueOnFailure": false, // 실패 시 계속 여부 (기본: false)
  "delay": 0                  // 실행 전 대기 (ms, 기본: 0)
}</code></pre>

                        <h4 class="text-lg font-semibold mt-6 mb-3">3. HTTP 메서드</h4>
                        <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left">메서드</th>
                                    <th class="px-4 py-2 text-left">용도</th>
                                    <th class="px-4 py-2 text-left">예시</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">GET</code></td><td class="px-4 py-2">조회</td><td class="px-4 py-2">목록, 상세</td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">POST</code></td><td class="px-4 py-2">생성</td><td class="px-4 py-2">새 리소스</td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">PUT</code></td><td class="px-4 py-2">수정 (전체)</td><td class="px-4 py-2">리소스 교체</td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">PATCH</code></td><td class="px-4 py-2">수정 (일부)</td><td class="px-4 py-2">필드 수정</td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">DELETE</code></td><td class="px-4 py-2">삭제</td><td class="px-4 py-2">리소스 삭제</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- 변수 바인딩 탭 --}}
                <div id="guide-tab-variables" class="guide-tab-content hidden">
                    <div class="prose prose-sm max-w-none">
                        <h4 class="text-lg font-semibold mb-3">변수 바인딩 문법</h4>
                        <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left">패턴</th>
                                    <th class="px-4 py-2 text-left">설명</th>
                                    <th class="px-4 py-2 text-left">예시</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{variables.xxx}}</code></td>
                                    <td class="px-4 py-2">전역 변수</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{variables.testPrefix}}</code> → "TEST_"</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{stepN.xxx}}</code></td>
                                    <td class="px-4 py-2">이전 스텝 추출값</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{step1.pageId}}</code> → 42</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{stepN.response.xxx}}</code></td>
                                    <td class="px-4 py-2">이전 스텝 응답</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{step1.response.data.name}}</code></td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$timestamp}}</code></td>
                                    <td class="px-4 py-2">현재 타임스탬프</td>
                                    <td class="px-4 py-2">1701100800</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$uuid}}</code></td>
                                    <td class="px-4 py-2">랜덤 UUID</td>
                                    <td class="px-4 py-2">550e8400-e29b-...</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$random:N}}</code></td>
                                    <td class="px-4 py-2">N자리 랜덤 숫자</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{$random:6}}</code> → 482916</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$date}}</code></td>
                                    <td class="px-4 py-2">오늘 날짜</td>
                                    <td class="px-4 py-2">2025-11-27</td>
                                </tr>
                            </tbody>
                        </table>

                        <h4 class="text-lg font-semibold mt-6 mb-3">Faker 변수 (랜덤 데이터 생성)</h4>
                        <p class="text-gray-600 mb-3 text-sm">Create API 테스트 시 임의의 테스트 데이터를 자동 생성합니다. <code class="bg-gray-100 px-1 rounded">@{{$faker.타입}}</code> 형식으로 사용합니다.</p>
                        <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left">패턴</th>
                                    <th class="px-4 py-2 text-left">설명</th>
                                    <th class="px-4 py-2 text-left">예시 결과</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr class="bg-blue-50">
                                    <td colspan="3" class="px-4 py-2 font-semibold text-blue-800">텍스트</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.name}}</code></td>
                                    <td class="px-4 py-2">랜덤 이름</td>
                                    <td class="px-4 py-2">김철수</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.company}}</code></td>
                                    <td class="px-4 py-2">랜덤 회사명</td>
                                    <td class="px-4 py-2">삼성전자</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.email}}</code></td>
                                    <td class="px-4 py-2">랜덤 이메일</td>
                                    <td class="px-4 py-2">test@example.com</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.phone}}</code></td>
                                    <td class="px-4 py-2">랜덤 전화번호</td>
                                    <td class="px-4 py-2">010-1234-5678</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.sentence}}</code></td>
                                    <td class="px-4 py-2">랜덤 문장</td>
                                    <td class="px-4 py-2">테스트용 설명 문장입니다.</td>
                                </tr>
                                <tr class="bg-green-50">
                                    <td colspan="3" class="px-4 py-2 font-semibold text-green-800">숫자/가격</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.number:MIN:MAX}}</code></td>
                                    <td class="px-4 py-2">범위 내 정수</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{$faker.number:1:100}}</code> → 42</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.price:MIN:MAX}}</code></td>
                                    <td class="px-4 py-2">범위 내 가격</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{$faker.price:1000:50000}}</code> → 25430.50</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.quantity}}</code></td>
                                    <td class="px-4 py-2">수량 (1~100)</td>
                                    <td class="px-4 py-2">25</td>
                                </tr>
                                <tr class="bg-purple-50">
                                    <td colspan="3" class="px-4 py-2 font-semibold text-purple-800">코드/ID 생성</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.itemCode:PREFIX}}</code></td>
                                    <td class="px-4 py-2">품목코드 생성</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{$faker.itemCode:TEST}}</code> → TEST-482916</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.code:PREFIX:LEN}}</code></td>
                                    <td class="px-4 py-2">커스텀 코드</td>
                                    <td class="px-4 py-2"><code class="text-xs">@{{$faker.code:MAT:4}}</code> → MAT0042</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.sku}}</code></td>
                                    <td class="px-4 py-2">SKU 코드</td>
                                    <td class="px-4 py-2">SKU-AB123</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.barcode}}</code></td>
                                    <td class="px-4 py-2">바코드 (EAN13)</td>
                                    <td class="px-4 py-2">4006381333931</td>
                                </tr>
                                <tr class="bg-orange-50">
                                    <td colspan="3" class="px-4 py-2 font-semibold text-orange-800">품목 관련</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.productName}}</code></td>
                                    <td class="px-4 py-2">제품명 (한글)</td>
                                    <td class="px-4 py-2">프리미엄 부품 Pro-425</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.unit}}</code></td>
                                    <td class="px-4 py-2">단위</td>
                                    <td class="px-4 py-2">EA, SET, BOX, KG 등</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded text-xs">@{{$faker.category}}</code></td>
                                    <td class="px-4 py-2">품목 카테고리</td>
                                    <td class="px-4 py-2">원자재, 부품, 반제품 등</td>
                                </tr>
                            </tbody>
                        </table>

                        <h4 class="text-lg font-semibold mt-6 mb-3">사용 위치</h4>
                        <ul class="list-disc list-inside space-y-2 text-gray-700">
                            <li><strong>endpoint:</strong> <code class="bg-gray-100 px-1 rounded text-xs">/pages/@{{step1.pageId}}/sections</code></li>
                            <li><strong>body:</strong> <code class="bg-gray-100 px-1 rounded text-xs">"name": "@{{variables.testPrefix}}Page_@{{$timestamp}}"</code></li>
                            <li><strong>headers:</strong> <code class="bg-gray-100 px-1 rounded text-xs">"X-Request-ID": "@{{$uuid}}"</code></li>
                        </ul>

                        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <span class="text-sm text-blue-800"><strong>Tip:</strong> extract로 추출한 값은 이후 스텝에서 <code class="bg-blue-100 px-1 rounded">@{{stepId.변수명}}</code>으로 사용</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 응답 검증 탭 --}}
                <div id="guide-tab-validation" class="guide-tab-content hidden">
                    <div class="prose prose-sm max-w-none">
                        <h4 class="text-lg font-semibold mb-3">expect.status - 상태 코드 검증</h4>
                        <pre class="bg-gray-100 p-4 rounded-lg text-xs">"expect": {
  "status": [200, 201]  // 허용 상태 코드 배열
}</pre>

                        <h4 class="text-lg font-semibold mt-6 mb-3">expect.jsonPath - 응답 바디 검증</h4>
                        <table class="w-full text-sm border border-gray-200 rounded-lg overflow-hidden">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left">연산자</th>
                                    <th class="px-4 py-2 text-left">설명</th>
                                    <th class="px-4 py-2 text-left">예시</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr><td class="px-4 py-2">(직접 값)</td><td class="px-4 py-2">정확한 값 비교</td><td class="px-4 py-2"><code class="text-xs">"$.success": true</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@exists</code></td><td class="px-4 py-2">존재 여부</td><td class="px-4 py-2"><code class="text-xs">"$.data.id": "@exists"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@isNumber</code></td><td class="px-4 py-2">숫자 타입</td><td class="px-4 py-2"><code class="text-xs">"$.data.id": "@isNumber"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@isString</code></td><td class="px-4 py-2">문자열 타입</td><td class="px-4 py-2"><code class="text-xs">"$.data.name": "@isString"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@isArray</code></td><td class="px-4 py-2">배열 타입</td><td class="px-4 py-2"><code class="text-xs">"$.data.items": "@isArray"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@notEmpty</code></td><td class="px-4 py-2">비어있지 않음</td><td class="px-4 py-2"><code class="text-xs">"$.data.name": "@notEmpty"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@minLength:N</code></td><td class="px-4 py-2">최소 길이</td><td class="px-4 py-2"><code class="text-xs">"$.data.items": "@minLength:1"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@gt:N</code></td><td class="px-4 py-2">N보다 큼</td><td class="px-4 py-2"><code class="text-xs">"$.data.id": "@gt:0"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@regex:패턴</code></td><td class="px-4 py-2">정규식 매칭</td><td class="px-4 py-2"><code class="text-xs">"$.data.code": "@regex:^[A-Z]+$"</code></td></tr>
                                <tr><td class="px-4 py-2"><code class="bg-gray-100 px-1 rounded">@contains:값</code></td><td class="px-4 py-2">포함 여부</td><td class="px-4 py-2"><code class="text-xs">"$.message": "@contains:success"</code></td></tr>
                            </tbody>
                        </table>

                        <h4 class="text-lg font-semibold mt-6 mb-3">extract - 값 추출</h4>
                        <pre class="bg-gray-100 p-4 rounded-lg text-xs">"extract": {
  "pageId": "$.data.id",           // 이후 @{{step1.pageId}}로 사용
  "pageName": "$.data.page_name",  // 이후 @{{step1.pageName}}로 사용
  "sections": "$.data.sections"    // 배열도 추출 가능
}</pre>
                    </div>
                </div>

                {{-- AI로 만들기 탭 --}}
                <div id="guide-tab-ai-prompt" class="guide-tab-content hidden">
                    <div class="prose prose-sm max-w-none">
                        <h4 class="text-lg font-semibold mb-3">AI에게 플로우 JSON 요청하기</h4>
                        <p class="text-gray-600 mb-4">아래 프롬프트를 AI에게 전달하면 3단계로 최적의 플로우 JSON을 생성합니다.</p>

                        <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg mb-6">
                            <h5 class="font-semibold text-blue-800 mb-2">AI 생성 프로세스</h5>
                            <ol class="list-decimal list-inside text-sm text-blue-700 space-y-1">
                                <li><strong>Step 1:</strong> 시나리오 설명 → AI가 스텝 목록 제안 → 확정</li>
                                <li><strong>Step 2:</strong> AI가 규칙 제안 (분기, 검증, 변수 등) → 선택</li>
                                <li><strong>Step 3:</strong> 최종 JSON 생성 → 복사하여 사용</li>
                            </ol>
                        </div>

                        <h4 class="text-lg font-semibold mb-3">프롬프트 템플릿</h4>
                        <div class="relative">
                            <button onclick="copyPromptTemplate()"
                                    class="absolute top-2 right-2 px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors z-10">
                                복사
                            </button>
                            <pre id="prompt-template" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto whitespace-pre-wrap">SAM API Flow Tester용 JSON을 만들어줘. 3단계로 진행해.

## 테스트 시나리오
[여기에 테스트하려는 시나리오를 자연어로 설명]

---

# Step 1: 스텝 목록 확정
위 시나리오를 분석해서 필요한 API 스텝 목록을 테이블로 제안해줘:
| # | 스텝 ID | 이름 | Method | Endpoint | 설명 |

**확정 후 다음 단계 진행**

---

# Step 2: 규칙 제안
확정된 스텝에 적용할 규칙들을 제안해줘:

## 분기(Branching) 규칙
- 어떤 스텝에서 조건 분기가 필요한가?
- 성공/실패에 따른 다른 경로가 있는가?

## 의존성(DependsOn) 규칙
- 스텝 간 실행 순서와 의존 관계
- 조건부 의존성이 필요한 경우 (onlyIf: success|failure|any|executed|skipped)

## 검증(Expect) 규칙
- 각 스텝별 예상 상태 코드
- jsonPath 검증이 필요한 필드

## 추출(Extract) 규칙
- 다음 스텝에서 사용할 값 추출

**확정 후 다음 단계 진행**

---

# Step 3: 최종 JSON 생성

## 필수 형식 규칙
```json
{
  "name": "플로우 이름",
  "description": "상세 설명",
  "version": "1.0",
  "config": {
    "baseUrl": "",
    "timeout": 30000,
    "stopOnFailure": false
  },
  "variables": {
    "user_id": "@{{$env.FLOW_TESTER_USER_ID}}",
    "user_pwd": "@{{$env.FLOW_TESTER_USER_PWD}}"
  },
  "steps": [...]
}
```

## Step 속성 레퍼런스
- **id**: 고유 ID (영문, snake_case)
- **name**: 표시 이름 (한글 가능)
- **method**: GET|POST|PUT|PATCH|DELETE
- **endpoint**: /api/v1/... (prefix 필수)
- **headers**: { "Authorization": "Bearer @{{login.token}}" }
- **body**: 요청 본문
- **expect**: { "status": [200, 201], "jsonPath": { "$.success": true } }
- **extract**: { "token": "$.access_token" }
- **dependsOn**: ["step_id"] 또는 [{"step": "step_id", "onlyIf": "success|failure|any|executed|skipped"}]
- **condition**: 분기 조건 (아래 참조)
- **continueOnFailure**: true (실패해도 계속 진행)

## 분기(Condition) 문법
```json
// 1. 스텝 결과 기반
"condition": {"stepResult": "login", "is": "success"}
"condition": {"stepResult": "login", "is": "failure"}

// 2. 값 비교
"condition": "@{{login.role}} == 'admin'"
"condition": {"left": "@{{login.role}}", "op": "==", "right": "admin"}

// 3. 논리 연산
"condition": {"and": [조건1, 조건2]}
"condition": {"or": [조건1, 조건2]}
"condition": {"not": 조건}

// 4. 복합 조건
"condition": {
  "and": [
    {"stepResult": "login", "is": "success"},
    {"left": "@{{login.permissions}}", "op": "contains", "right": "premium"}
  ]
}
```

## 조건부 의존성 (DependsOn)
```json
// 기본: 성공 시에만 실행
"dependsOn": ["login"]

// 조건부: 실패해도 실행 (정리 작업 등)
"dependsOn": [{"step": "login", "onlyIf": "any"}]

// 조건부: 실패했을 때만 실행
"dependsOn": [{"step": "login", "onlyIf": "failure"}]
```

## 변수 참조
- 환경변수: @{{$env.XXX}}
- 전역변수: @{{variables.xxx}}
- 이전 스텝 추출값: @{{stepId.extractKey}}
- 빌트인: @{{$timestamp}}, @{{$uuid}}, @{{$date}}, @{{$random:6}}
- Faker: @{{$faker.name}}, @{{$faker.email}}, @{{$faker.itemCode:PREFIX}}

---
위 형식에 맞춰 최종 JSON을 생성해줘. config.apiKey는 포함하지 마.</pre>
                        </div>

                        <h4 class="text-lg font-semibold mt-6 mb-3">실제 예시: 권한별 분기 테스트</h4>
                        <div class="relative">
                            <button onclick="copyExamplePrompt()"
                                    class="absolute top-2 right-2 px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors z-10">
                                복사
                            </button>
                            <pre id="example-prompt" class="bg-gray-800 text-gray-100 p-4 rounded-lg text-xs overflow-x-auto whitespace-pre-wrap">SAM API Flow Tester용 JSON을 만들어줘. 3단계로 진행해.

## 테스트 시나리오
로그인 후 사용자 권한(role)에 따라 다른 API를 호출하는 테스트:
- 로그인 시도 (성공/실패 분기)
- 로그인 성공 시: 프로필 조회 후 권한 확인
- 관리자(admin): 관리자 대시보드 조회 → 리포트 생성
- 일반 사용자(user): 사용자 대시보드 조회
- 로그인 실패 시: 비밀번호 재설정 요청
- 마지막에 항상 로그아웃 (성공/실패 무관)

## API 정보
- POST /api/v1/login - 로그인
- GET /api/v1/users/me - 프로필 (role 포함)
- GET /api/v1/admin/dashboard - 관리자 대시보드
- GET /api/v1/user/dashboard - 사용자 대시보드
- POST /api/v1/admin/reports - 리포트 생성
- POST /api/v1/auth/password-reset - 비밀번호 재설정
- POST /api/v1/logout - 로그아웃

Step 1부터 시작해줘.</pre>
                        </div>

                        <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <div class="text-sm text-green-800">
                                    <strong>Tip:</strong> AI가 각 단계에서 제안을 하면 "확인" 또는 수정 요청을 하고, 최종 JSON이 생성되면 복사하여 "새 플로우" 페이지에 붙여넣으세요.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- 모달 푸터 --}}
            <div class="flex justify-end px-6 py-4 border-t border-gray-200 flex-shrink-0">
                <button type="button"
                        onclick="GuideModal.close()"
                        class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors">
                    닫기
                </button>
            </div>

        </div>
    </div>
</div>

<style>
.guide-tab {
    background-color: #f3f4f6;
    color: #374151;
}
.guide-tab:hover {
    background-color: #e5e7eb;
}
.guide-tab.active {
    background-color: #2563eb;
    color: white;
}
</style>

<script>
// htmx 중복 로드 시 재선언 방지
window.GuideModal = window.GuideModal || {
    open() {
        document.getElementById('guide-modal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    },
    close() {
        document.getElementById('guide-modal').classList.add('hidden');
        document.body.style.overflow = '';
    },
    switchTab(tabId) {
        // 탭 버튼 활성화
        document.querySelectorAll('.guide-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelector(`.guide-tab[data-tab="${tabId}"]`).classList.add('active');

        // 탭 콘텐츠 표시
        document.querySelectorAll('.guide-tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        document.getElementById(`guide-tab-${tabId}`).classList.remove('hidden');
    }
};

// 탭 클릭 이벤트
document.querySelectorAll('.guide-tab').forEach(tab => {
    tab.addEventListener('click', function() {
        GuideModal.switchTab(this.dataset.tab);
    });
});

// ESC 키로 닫기
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('guide-modal').classList.contains('hidden')) {
        GuideModal.close();
    }
});

// 프롬프트 템플릿 복사
function copyPromptTemplate() {
    const text = document.getElementById('prompt-template').textContent;
    navigator.clipboard.writeText(text).then(() => {
        showToast('프롬프트 템플릿이 복사되었습니다.', 'success');
    }).catch(err => {
        console.error('복사 실패:', err);
    });
}

// 예시 프롬프트 복사
function copyExamplePrompt() {
    const text = document.getElementById('example-prompt').textContent;
    navigator.clipboard.writeText(text).then(() => {
        showToast('예시 프롬프트가 복사되었습니다.', 'success');
    }).catch(err => {
        console.error('복사 실패:', err);
    });
}
</script>
